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