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