applications/luci-app-lxc/luasrc/view/lxc.htm

   1 <%#
   2
   3 LuCI LXC module
   4
   5 Copyright (C) 2014, Cisco Systems, Inc.
   6
   7 Licensed under the Apache License, Version 2.0 (the "License");
   8 you may not use this file except in compliance with the License.
   9 You may obtain a copy of the License at
  10
  11         http://www.apache.org/licenses/LICENSE-2.0
  12
  13 Author: Petar Koretic <petar.koretic@sartura.hr>
  14
  15 -%>
  16
  17 <fieldset class="cbi-section">
  18         <legend><%:Available Containers%></legend>
  19         <div class="cbi-section-node">
  20                 <table id="t_lxc_list" class="cbi-section-table">
  21                         <tr class="cbi-section-table-titles">
  22                                 <th class="cbi-section-table-cell"><%:Name%></th>
  23                                 <th class="cbi-section-table-cell"><%:Status%></th>
  24                                 <th class="cbi-section-table-cell"><%:Actions%></th>
  25                         </tr>
  26                 </table>
  27         </div>
  28 </fieldset>
  29
  30 <fieldset class="cbi-section">
  31         <span id="lxc-list-output"></span>
  32 </fieldset>
  33
  34 <hr/>
  35 <fieldset class="cbi-section">
  36         <legend><%:Create New Container%></legend>
  37         <div class="cbi-section-node">
  38                 <table id="t_lxc_create" class="cbi-section-table">
  39                         <tr class="cbi-section-table-titles">
  40                                 <th class="cbi-section-table-cell"><%:Name%></th>
  41                                 <th class="cbi-section-table-cell"><%:Template%></th>
  42                                 <th class="cbi-section-table-cell"><%:Actions%></th>
  43                         </tr>
  44                         <tr id="tr_holder">
  45                                 <td>
  46                                         <input type="text" id="tx_name" placeholder="<%:Enter new name%>" value='' />
  47                                 </td>
  48                                 <td>
  49                                         <select id="s_template" class="cbi-input-select cbi-button">
  50                                         </select>
  51                                 </td>
  52                                 <td>
  53                                         <input type="button" id="bt_create" value="<%:Create%>" onclick="lxc_create(tr_holder)" class="cbi-button cbi-button-add" />
  54                                         <span id="lxc-add-loader" style="display:inline-block; width:16px; height:16px; margin:0 5px"></span>
  55                                 </td>
  56                         </tr>
  57                 </table>
  58         </div>
  59 </fieldset>
  60
  61 <fieldset class="cbi-section">
  62         <span id="lxc-add-output"></span>
  63 </fieldset>
  64
  65 <hr/>
  66
  67 <script type="text/javascript" src="<%=resource%>/cbi.js"></script>
  68 <script type="text/javascript">//<![CDATA[
  69
  70         window.img = { "red" : "<%=resource%>/cbi/red.gif", "green" : "<%=resource%>/cbi/green.gif", "purple" : "<%=resource%>/cbi/purple.gif" }
  71         window.states = {  "STOPPED" : "red", "RUNNING" : "green", "FROZEN" : "purple"}
  72
  73         var t_lxc_list = document.getElementById('t_lxc_list');
  74         var loader_html = '<img src="<%=resource%>/icons/loading.gif" alt="<%:Loading%>" width="16" height="16" style="vertical-align:middle" /> ';
  75         var timeout_msg = 0
  76         var output_list = document.getElementById("lxc-list-output")
  77         var output_add = document.getElementById("lxc-add-output")
  78         var loader_add = document.getElementById("lxc-add-loader")
  79
  80         function lxc_create(tr)
  81         {
  82                 var lxc_name = tr.querySelector("#tx_name").value.trim()
  83                 var lxc_template = tr.querySelector("#s_template").value
  84                 var bt_create = tr.querySelector("#bt_create")
  85
  86                 if (t_lxc_list.querySelector("[data-id='" + lxc_name + "']") != null)
  87                         return info_message(output_add, "Container with that name already exists!", 4000)
  88
  89                 bt_create.disabled = true
  90                 output_add.innerHTML = ''
  91
  92                 if (!lxc_name || !lxc_name.length)
  93                 {
  94                         bt_create.disabled = false
  95                         return info_message(output_add, "Name cannot be empty!", 4000)
  96                 }
  97
  98                 loading(loader_add)
  99
 100                 new XHR().get('<%=luci.dispatcher.build_url("admin", "services")%>/lxc_create/' + '%h/%h'.format(lxc_name, lxc_template) , null,
 101                 function(x)
 102                 {
 103                         bt_create.disabled = false
 104                         loading(loader_add, 0)
 105
 106                         if (!x)
 107                                 info_message(output_add, "Container creation failed!")
 108                 })
 109         }
 110
 111         function lxc_create_template(lxc_name, lxc_state)
 112         {
 113                 var info_row = t_lxc_list.querySelector("#empty")
 114                 if (info_row)
 115                         t_lxc_list.deleteRow(1)
 116
 117                 var actions = ''
 118                 actions += '<input type="button" onclick="action_handler(this)" data-action="start" value="<%:Start%>" class="cbi-button cbi-button-apply" />'
 119                 actions+= '<input type="button" onclick="action_handler(this)" data-action="stop" value="<%:Stop%>" class="cbi-button cbi-button-reset" />'
 120                 actions+= '<input type="button" onclick="action_handler(this)" data-action="destroy" value="<%:Delete%>" class="cbi-button cbi-button-remove" />'
 121                 actions+= ' <select class="cbi-input-select cbi-button" onchange="action_more_handler(this)">\
 122                                                 <option selected disabled>more</option>\
 123                                                 <option>configure</option>\
 124                                                 <option>freeze</option>\
 125                                                 <option>unfreeze</option>\
 126                                                 <option>reboot</option>\
 127                                         </select>'
 128                 actions+= '<span data-loader style="display:inline-block; width:16px; height:16px; margin:0 5px"></span>'
 129
 130                 var row = t_lxc_list.insertRow(-1)
 131                 var cell = row.insertCell(-1)
 132                 cell.innerHTML = '%q%h%q'.format("<strong>", lxc_name, "</strong>")
 133                 cell.width = "30%"
 134                 cell.setAttribute("data-id", lxc_name)
 135
 136                 cell = row.insertCell(-1)
 137                 cell.width = "20%"
 138                 cell.innerHTML = "<img src='"+window.img[lxc_state]+"'/>"
 139
 140                 cell = row.insertCell(-1)
 141                 cell.width = "50%"
 142                 cell.innerHTML = actions
 143         }
 144
 145         function action_handler(self)
 146         {
 147                 var action = self.getAttribute("data-action");
 148
 149                 var bt_action = self
 150                 var lxc_name = self.parentNode.parentNode.children[0].getAttribute('data-id')
 151                 var status_img = self.parentNode.parentNode.querySelector('img')
 152                 var loader = self.parentNode.querySelector('[data-loader]')
 153
 154                 bt_action.disabled = true
 155
 156                 if (action == "stop")
 157                 {
 158                         loading(loader)
 159
 160                         new XHR().get('<%=luci.dispatcher.build_url("admin", "services")%>/lxc_action/' + '%h/%h'.format(action, lxc_name), null,
 161                         function(x, ec)
 162                         {
 163                                 loading(loader, 0)
 164                                 bt_action.disabled = false
 165
 166                                 if (!x || ec)
 167                                         return info_message(output_list,"Action failed!")
 168
 169                                 set_status(status_img, "red")
 170
 171                         });
 172                 }
 173
 174                 else if (action == "start")
 175                 {
 176                         loading(loader)
 177
 178                         new XHR().get('<%=luci.dispatcher.build_url("admin", "services")%>/lxc_action/' + '%h/%h'.format(action, lxc_name), null,
 179                         function(x, data)
 180                         {
 181                                 loading(loader, 0)
 182                                 bt_action.disabled = false
 183
 184                                 //FIXME: uncomment after fixing 'lxc-start'
 185                                 if (!x /*|| ec */)
 186                                         return info_message(output_list,"Action failed!")
 187
 188                                 //FIXME: uncomment after fixing 'lxc-start'
 189                                 //set_status(status_img, "green")
 190                         });
 191                 }
 192
 193                 else if (action == "destroy")
 194                 {
 195                         if (!confirm("This will completely remove LXC container from the disk. Are you sure? (container will be stopped if running)"))
 196                                 return
 197
 198                         loading(loader)
 199
 200                         new XHR().get('<%=luci.dispatcher.build_url("admin", "services")%>/lxc_action/' + '%h/%h'.format(action, lxc_name), null,
 201                         function(x, ec)
 202                         {
 203                                 loading(loader, 0)
 204                                 bt_action.disabled = false
 205
 206                                 if (!x || ec)
 207                                         return info_message(output_list,"Action failed!")
 208
 209                                 var row = self.parentNode.parentNode
 210                                 row.parentNode.removeChild(row)
 211
 212                         });
 213                 }
 214         }
 215
 216         function lxc_configure_handler(self)
 217         {
 218                 var td = self.parentNode
 219                 var textarea = td.querySelector('[data-id]')
 220                 var lxc_name = textarea.getAttribute('data-id')
 221                 var lxc_configuration = textarea.value
 222
 223                 new XHR().post('<%=luci.dispatcher.build_url("admin", "services")%>/lxc_configuration_set/' + lxc_name, "lxc_configuration=" + encodeURIComponent(lxc_configuration) ,
 224                 function(x)
 225                 {
 226                         if (!x || x.responseText != "0")
 227                                 return info_message(output_list,"Action failed!")
 228
 229                         info_message(output_list,"LXC configuration updated")
 230                         var row = td.parentNode
 231                         row.parentNode.removeChild(row)
 232                 })
 233         }
 234
 235         function lxc_rename_template(lxc_name)
 236         {
 237                 var h = '\
 238                         <input data-id="'+ lxc_name + '" type="text" placeholder="Enter new name" /> \
 239                         <input data-id="bt_confirm" onclick="lxc_rename_handler(this)" type="button" class="cbi-button" value="Confirm" />'
 240
 241                 return h
 242         }
 243
 244         function lxc_configure_template(lxc_name, lxc_configuration)
 245         {
 246                 var h = '\
 247                         <textarea data-id="'+ lxc_name + '" rows="20" style="width:100%">'+ lxc_configuration +'</textarea> \
 248                         <input data-id="bt_confirm" onclick="lxc_configure_handler(this)" type="button" class="cbi-button" value="Confirm" />'
 249
 250                 return h
 251         }
 252
 253         function action_more_handler(self)
 254         {
 255                 var lxc_name = self.parentNode.parentNode.querySelector('[data-id]').getAttribute('data-id')
 256                 var loader = self.parentNode.parentNode.querySelector('[data-loader]')
 257
 258                 var option = self.options[self.selectedIndex].text
 259
 260                 self.value = "more"
 261
 262                 switch (option)
 263                 {
 264                         case "configure":
 265                                 var tr = document.createElement('tr')
 266                                 var row = self.parentNode.parentNode
 267                                 var next_row = row.nextSibling
 268                                 if (next_row && next_row.getAttribute('data-action') !== null)
 269                                         row.parentNode.removeChild(next_row)
 270
 271                                 new XHR().get('<%=luci.dispatcher.build_url("admin", "services")%>/lxc_configuration_get/' + lxc_name, null,
 272                                 function(x)
 273                                 {
 274                                         tr.innerHTML="<td colspan='" + row.cells.length + "'>" + lxc_configure_template(lxc_name, x.responseText) + "</td>"
 275                                         tr.setAttribute('data-action','')
 276                                         row.parentNode.insertBefore(tr, row.nextSibling)
 277                                 })
 278
 279                         break
 280
 281                         case "freeze":
 282                                 var tr = self.parentNode.parentNode
 283                                 var img = tr.querySelector('img')
 284                                 if(img.getAttribute('src') != window.img["green"])
 285                                         return info_message(output_list,"Container is not running!")
 286
 287                                 loading(loader)
 288                                 new XHR().get('<%=luci.dispatcher.build_url("admin", "services")%>/lxc_action/' + '%h/%h'.format(option, lxc_name), null,
 289                                 function(x, ec)
 290                                 {
 291                                         loading(loader, 0)
 292                                         if (!x || ec)
 293                                                 return info_message(output_list,"Action failed!")
 294
 295                                         set_status(img, "purple")
 296                                 })
 297
 298                         break
 299
 300                         case "unfreeze":
 301                                 var tr = self.parentNode.parentNode
 302                                 var img = tr.querySelector('img')
 303
 304                                 if(img.getAttribute('src') != window.img["purple"])
 305                                         return info_message(output_list,"Container is not frozen!")
 306
 307                                 loading(loader)
 308                                 new XHR().get('<%=luci.dispatcher.build_url("admin", "services")%>/lxc_action/' + '%h/%h'.format(option, lxc_name), null,
 309                                 function(x, ec)
 310                                 {
 311                                         loading(loader, 0)
 312                                         if (!x || ec)
 313                                                 return info_message(output_list,"Action failed!")
 314
 315                                         set_status(img, "green")
 316                                 })
 317
 318                         break
 319
 320                         case "reboot":
 321                                 var tr = self.parentNode.parentNode
 322                                 var img = tr.querySelector('img')
 323                                 if(img.getAttribute('src') != window.img["green"])
 324                                         return info_message(output_list,"Container is not running!")
 325
 326                                 if (!confirm("Are you sure?"))
 327                                         return
 328
 329                                 loading(loader)
 330                                 new XHR().get('<%=luci.dispatcher.build_url("admin", "services")%>/lxc_action/' + '%h/%h'.format(option, lxc_name), null,
 331                                 function(x, ec)
 332                                 {
 333                                         loading(loader, 0)
 334                                         if (!x || ec)
 335                                                 return info_message(output_list,"Action failed!")
 336
 337                                         info_message(output_list,"LXC rebooted")
 338                                 })
 339                         break
 340                 }
 341
 342         }
 343
 344         function set_empty(t_lxc_list)
 345         {
 346                 if (document.getElementById('empty') !== null)
 347                         return
 348
 349                 var row_count = t_lxc_list.rows.length;
 350                 while(--row_count) t_lxc_list.deleteRow(row_count);
 351
 352                 var row = t_lxc_list.insertRow(-1);
 353                 row.id = 'empty'
 354                 var cell = row.insertCell(0);
 355                 cell.colSpan = 4;
 356                 cell.innerHTML = '<em><br />There are no containers available yet.</em>';
 357         }
 358
 359         function lxc_list_update()
 360         {
 361                 XHR.poll(4, '<%=luci.dispatcher.build_url("admin", "services")%>/lxc_action/list', null,
 362                 function(x, data)
 363                 {
 364                         if (!x) return;
 365
 366                         var lxc_count = Object.keys(data).length
 367                         if (!data || !lxc_count)
 368                                 return set_empty(t_lxc_list)
 369
 370                         if (document.getElementById('empty') !== null)
 371                                 t_lxc_list.deleteRow(1);
 372
 373                         var lxcs = t_lxc_list.querySelectorAll('td[data-id]')
 374                         var lxc_name_table = {}
 375                         for (var i = 0, len = lxcs.length; i < len; i++)
 376                         {
 377                                 var lxc_name = lxcs[i].getAttribute('data-id')
 378                                 if (!(lxc_name in data))
 379                                 {
 380                                         var row = t_lxc_list.querySelector("[data-id='" + lxc_name + "']").parentNode
 381                                         row.parentNode.removeChild(row)
 382                                         continue
 383                                 }
 384
 385                                 lxc_name_table[lxc_name] = lxcs[i].parentNode.querySelector('img')
 386                         }
 387
 388                         for(var key in data)
 389                         {
 390                                 var lxc_name = key
 391                                 var state = window.states[data[key]]
 392
 393                                 if (!(lxc_name in lxc_name_table))
 394                                         lxc_create_template(lxc_name, state)
 395
 396                                 else if (state != get_status(lxc_name_table[lxc_name]))
 397                                         set_status(lxc_name_table[lxc_name], state)
 398                         }
 399
 400                 })
 401         }
 402
 403         function loading(elem, state)
 404         {
 405                 state = (typeof state === 'undefined') ? 1 : state
 406
 407                 if (state === 1)
 408                         elem.innerHTML = loader_html
 409                 else
 410                         setTimeout(function() { elem.innerHTML = ''}, 1000)
 411         }
 412
 413         function set_status(elem, state)
 414         {
 415                 state = (typeof state === 'undefined') ? 1 : state
 416
 417                 setTimeout(function() { elem.setAttribute('src', window.img[state])}, 300)
 418         }
 419
 420         function get_status(elem)
 421         {
 422                 var src = elem.getAttribute('src')
 423
 424                 for (var i in img)
 425                 {
 426                         if (img[i] == src)
 427                                 return i
 428                 }
 429         }
 430
 431         function info_message(output, msg, timeout)
 432         {
 433                 timeout = timeout || 3000
 434                 output.innerHTML = msg
 435                 clearTimeout(timeout_msg)
 436                 timeout_msg = setTimeout(function(){ output.innerHTML=""}, timeout);
 437         }
 438
 439         lxc_list_update()
 440
 441         new XHR().get('<%=luci.dispatcher.build_url("admin", "services")%>/lxc_get_downloadable', null,
 442         function(x, data)
 443         {
 444                 if (!x) return;
 445
 446                 var lxc_count = Object.keys(data).length
 447                 if (!data || !lxc_count) return;
 448                 var select = document.getElementById("s_template");
 449                 for(var key in data)
 450                 {
 451                         var option = document.createElement('option');
 452                         option.value = data[key];
 453                         option.text = data[key].replace(/[_:]/g, ' ');
 454                         select.add(option, -1);
 455                 }
 456         })
 457
 458 //]]></script>