[Kimchi-devel] [PATCH 8/9] Adding new-ui to Networks tab

From: samhenri <samuel.guimaraes(a)eldorado.org.br&gt; Signed-off-by: samhenri <samuel.guimaraes(a)eldorado.org.br&gt; --- .../kimchi/ui/css/theme-default/network.css | 267 --------------------- src/wok/plugins/kimchi/ui/js/src/kimchi.network.js | 72 +++--- src/wok/plugins/kimchi/ui/pages/network.html.tmpl | 185 ++++++++------ 3 files changed, 139 insertions(+), 385 deletions(-) delete mode 100644 src/wok/plugins/kimchi/ui/css/theme-default/network.css diff --git a/src/wok/plugins/kimchi/ui/css/theme-default/network.css b/src/wok/plugins/kimchi/ui/css/theme-default/network.css deleted file mode 100644 index fc8a24f..0000000 --- a/src/wok/plugins/kimchi/ui/css/theme-default/network.css +++ /dev/null @@ -1,267 +0,0 @@ -/* - * Project Kimchi - * - * Copyright IBM, Corp. 2013-2015 - * - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -.network { - margin: 5px; -} - -.network .grid-control { - height: 40px; - padding: 5px 0; -} - -.network .grid-control .filter { - width: 300px; - padding: 5px; - float: right; -} - -.network .list .column-name { - width: 20%; - max-width: 20%; - text-overflow: ellipsis; -} - -.network .list .column-state { - width: 10%; -} - -.network .list .column-type { - width: 15%; -} - -.network .list .column-interface { - width: 15%; -} - -.network .list .column-space { - width: 25%; -} - -.network .list .column-action { - display: inline-block; - float: right; - height: 40px; -} - -.network .list .hide-action-item { - display: none; -} - -.network .list .menu-container { - display: none; - top: 58px; -} - -.network .list .action-button { - float: right; - margin-top: 2px; - margin-left: 5px; -} - -.network .list .action-button-icon { - background: url("../images/theme-default/arrow-down-black.png") no-repeat - scroll center center transparent; -} - -.network .list .ui-state-disabled { - margin: 0px; -} - -.network .list .network-state { - display: inline-block; - height: 16px; - width: 16px; - border-radius: 8px; - margin-left: 10px; -} - -.network .list .nw-loading { - background: #c0c0c0 url(../images/theme-default/loading.gif) - center no-repeat; -} - -.network .list .up { - background: linear-gradient(to bottom, #BFD255 0%, #8EB92A 50%, - #72AA00 51%, #9ECB2D 100%) repeat scroll 0 0 transparent; -} - -.network .list .down { - background: linear-gradient(to bottom, #AFAFAF 0%, #AFAFAF 50%, - #AFAFAF 51%, #AFAFAF 100%) repeat scroll 0 0 transparent; -} - -.network-config { - font-family: Arial; - font-size: 12px; - margin-bottom: 40px; - display: none; -} - -.network-config .section-container { - margin-top: 20px; -} - -.network-config .section-container:first-child { - margin-top: 10px; -} - -.network-config .section-container:last-child { - height: 200px; -} - -.network-config .section-container .bridged-inline { - display: inline-block; - vertical-align: top; - max-width: 520px; -} - -.network-config .section-header { - font-size: 14px; - font-weight: lighter; -} - -.network-config .section-content { - margin-top: 10px; -} - -.network-config input[type="text"] { - border: 1px solid #CCCCCC; - font-size: 16px; - height: 30px; - width: 300px; - line-height: 30px; - padding: 0 5px; -} - -.network-config input.invalid-field[type="text"] { - border-color: #FF4444; -} - -.network-config input.invalid-field[type="text"][disabled] { - border-color: #666666; -} - -.network-config input[type="radio"] { - margin-right: 5px; - margin-top: 0px; -} - -.network-config select { - color: #666666; - border: solid 1px; - background-color: white; - padding: 3px 4px 3px 0; -} - -.network-config .input-container { - height: 20px; -} - -.network-config label { - vertical-align: top; -} - -.network-type-wrapper-controls input[type="text"] { - height: 38px; - line-height: 38px; - background: #fff; - -webkit-border-radius: 5px; - border-radius: 5px; - box-shadow: 2px 2px 2px #eee inset; - border-top: 1px solid #bbb; - border-left: 1px solid #bbb; - padding: 0 10px; - margin-top: 5px; - width: 50px; -} - -.network-type-wrapper-controls > .dropdown { - margin: 5px 0 0 1px; - width: 180px; -} - -.network-type-wrapper-controls input[type="text"][disabled] { - color: #bbb; - background-color: #fafafa; - cursor: not-allowed; -} - -.network-type-wrapper-controls span[type="text"] { - padding: 0 10px; -} - -.bridge-option-column { - display: inline-block; - vertical-align: middle; -} - -.bridge-option-column label { - margin-left: 42px; -} - -.network-type-wrapper-controls { - width: 80px; - display: inline-block; - vertical-align: top; - padding: 5px 5px 5px 22px; -} - -#enableVlan { - margin-left: 42px; - vertical-align: middle; -} - -#labelEnableVlan { - vertical-align: middle; -} - -#labelNetworkVlanID { - margin-left: 42px; - vertical-align: middle; - display: none; -} - -#networkVlanID { - width: 80px; - vertical-align: middle; - display: none; -} - -.network-config .input-hint-icon { - margin: -1px 1px 0 0; - display: inline-block; -} - -.network-config .input-hint { - margin-top: 3px; -} - -.network-config .input-hint-text { - color: #999999; - font-weight: lighter; - font-size: 12px; -} - -.ui-state-default a { - color: #212121; -} - -#networkConfig { - padding-left: 30px; -} diff --git a/src/wok/plugins/kimchi/ui/js/src/kimchi.network.js b/src/wok/plugins/kimchi/ui/js/src/kimchi.network.js index c43b59a..13d2cd1 100644 --- a/src/wok/plugins/kimchi/ui/js/src/kimchi.network.js +++ b/src/wok/plugins/kimchi/ui/js/src/kimchi.network.js @@ -21,7 +21,7 @@ kimchi.NETWORK_TYPE_BRIDGE = "bridged"; kimchi.initNetwork = function() { if(wok.tabMode['network'] === 'admin') { $('.tools').attr('style','display'); - $('#network-content .header span:last-child').attr('style','display'); + $('#networkGrid .wok-nw-grid-header span:last-child').attr('style','display'); kimchi.initNetworkCreation(); } kimchi.initNetworkListView(); @@ -47,9 +47,9 @@ kimchi.initNetworkListView = function() { network.persistent = data[i].persistent; kimchi.addNetworkItem(network); } - $('#networkGrid').grid({enableSorting: false}); - $('input', $('.grid-control', '#network-content')).on('keyup', function(){ - $('#networkGrid').grid('filter', $(this).val()); + $('#networkGrid').dataGrid({enableSorting: false}); + $('input', $('.grid-control', '#network-content-container')).on('keyup', function(){ + $('#networkGrid').dataGrid('filter', $(this).val()); }); }); }; @@ -59,8 +59,6 @@ kimchi.addNetworkItem = function(network) { $("#networkBody").append(itemNode); if(wok.tabMode["network"] === "admin") { $(".column-action").attr("style","display"); - } else { - $(".column-space").addClass('column-space-no-border-right'); } kimchi.addNetworkActions(network); return itemNode; @@ -77,67 +75,67 @@ kimchi.getNetworkItemHtml = function(network) { network.type = i18n["network_type_" + network.type]; } - var disable_in_use = network.in_use ? "ui-state-disabled" : ""; + var disable_in_use = network.in_use ? "disabled" : ""; var networkItem = wok.substitute($('#networkItem').html(), { name : network.name, state : network.state, type : network.type, interface: network.interface, addrSpace : network.addrSpace, - startClass : network.state === "up" ? "hide-action-item" : "", - stopClass : network.state === "down" ? "hide-action-item" : disable_in_use, + startClass : network.state === "up" ? "wok-hide-action-item" : "", + stopClass : network.state === "down" ? "wok-hide-action-item" : disable_in_use, stopDisabled : network.in_use ? "disabled" : "", - deleteClass : network.state === "up" || network.in_use ? "ui-state-disabled" : "", + deleteClass : network.state === "up" || network.in_use ? "disabled" : "", deleteDisabled: network.state === "up" || network.in_use ? "disabled" : "" }); return networkItem; }; kimchi.stopNetwork = function(network,menu) { - $(".network-state", $("#" + wok.escapeStr(network.name))).switchClass("up", "nw-loading"); - $("[nwAct='stop']", menu).addClass("ui-state-disabled"); + $(".network-state", $("#" + wok.escapeStr(network.name))).switchClass("up", "loading"); + $("[nwAct='stop']", menu).addClass("disabled"); kimchi.toggleNetwork(network.name, false, function() { - $("[nwAct='start']", menu).removeClass("hide-action-item"); - $("[nwAct='stop']", menu).addClass("hide-action-item"); - $("[nwAct='stop']", menu).removeClass("ui-state-disabled"); + $("[nwAct='start']", menu).removeClass("wok-hide-action-item"); + $("[nwAct='stop']", menu).addClass("wok-hide-action-item"); + $("[nwAct='stop']", menu).removeClass("disabled"); if (!network.in_use) { - $("[nwAct='delete']", menu).removeClass("ui-state-disabled"); + $("[nwAct='delete']", menu).removeClass("disabled"); $(":first-child", $("[nwAct='delete']", menu)).removeAttr("disabled"); } - $(".network-state", $("#" + wok.escapeStr(network.name))).switchClass("nw-loading", "down"); + $(".network-state", $("#" + wok.escapeStr(network.name))).switchClass("loading", "down"); }, function(err) { - $(".network-state", $("#" + wok.escapeStr(network.name))).switchClass("nw-loading", "up"); + $(".network-state", $("#" + wok.escapeStr(network.name))).switchClass("loading", "up"); if (!network.in_use) { - $("[nwAct='stop']", menu).removeClass("ui-state-disabled"); + $("[nwAct='stop']", menu).removeClass("disabled"); } wok.message.error(err.responseJSON.reason); }); } kimchi.addNetworkActions = function(network) { - $(".menu-container", "#" + wok.escapeStr(network.name)).menu(); + //$(".dropdown-menu", "#" + wok.escapeStr(network.name)).menu(); - $('#' + wok.escapeStr(network.name)).on('click', '.menu-container li', function(evt) { + $('#' + wok.escapeStr(network.name)).on('click', '.dropdown-menu li', function(evt) { var menu = $(evt.currentTarget).parent(); if ($(evt.currentTarget).attr("nwAct") === "start") { $(".network-state", $("#" + wok.escapeStr(network.name))).switchClass("down", "nw-loading"); - $("[nwAct='start']", menu).addClass("ui-state-disabled"); - $("[nwAct='delete']", menu).addClass("ui-state-disabled"); + $("[nwAct='start']", menu).addClass("disabled"); + $("[nwAct='delete']", menu).addClass("disabled"); $(":first-child", $("[nwAct='delete']", menu)).attr("disabled", true); kimchi.toggleNetwork(network.name, true, function() { - $("[nwAct='start']", menu).addClass("hide-action-item"); - $("[nwAct='start']", menu).removeClass("ui-state-disabled"); - $("[nwAct='stop']", menu).removeClass("hide-action-item"); + $("[nwAct='start']", menu).addClass("wok-hide-action-item"); + $("[nwAct='start']", menu).removeClass("disabled"); + $("[nwAct='stop']", menu).removeClass("wok-hide-action-item"); network.state = "up"; if (network.in_use) { - $("[nwAct='stop']", menu).addClass("ui-state-disabled"); + $("[nwAct='stop']", menu).addClass("disabled"); } $(".network-state", $("#" + wok.escapeStr(network.name))).switchClass("nw-loading", "up"); }, function(err) { $(".network-state", $("#" + wok.escapeStr(network.name))).switchClass("nw-loading","down"); - $("[nwAct='start']", menu).removeClass("ui-state-disabled"); + $("[nwAct='start']", menu).removeClass("disabled"); if (!network.in_use) { - $("[nwAct='delete']", menu).removeClass("ui-state-disabled"); + $("[nwAct='delete']", menu).removeClass("disabled"); } $(":first-child", $("[nwAct='delete']", menu)).removeAttr("disabled"); wok.message.error(err.responseJSON.reason); @@ -155,7 +153,7 @@ kimchi.addNetworkActions = function(network) { }; wok.confirm(settings, function() { kimchi.stopNetwork(network, menu); - $('#networkGrid').grid('deleteRow', $(evt.currentTarget).parents(".row")); + $('#networkGrid').dataGrid('deleteRow', $(evt.currentTarget).parents(".row")); }, null); } else { @@ -173,17 +171,13 @@ kimchi.addNetworkActions = function(network) { cancel : i18n['KCHAPI6003M'] }, function() { kimchi.deleteNetwork(network.name, function() { - $('#networkGrid').grid('deleteRow', $(evt.currentTarget).parents(".row")); + $('#networkGrid').dataGrid('deleteRow', $(evt.currentTarget).parents(".row")); }); }, null); } }); - $("#networkBody .column-action .popable").button({ - icons : { - secondary : "action-button-icon" - } - }); + //$("#networkBody .column-action .dropdown.menu-flat").button(); }; @@ -217,7 +211,7 @@ kimchi.initNetworkCreation = function() { network.interface = result.interface ? result.interface : i18n["KCHNET6001M"]; network.addrSpace = result.subnet ? result.subnet : i18n["KCHNET6001M"]; network.persistent = result.persistent; - $('#networkGrid').grid('addRow', kimchi.addNetworkItem(network)); + $('#networkGrid').dataGrid('addRow', kimchi.addNetworkItem(network)); $("#networkConfig").dialog("close"); }, function(data) { wok.message.error(data.responseJSON.reason); @@ -231,13 +225,13 @@ kimchi.initNetworkDialog = function() { buttonsObj= {}; buttonsObj['id'] = "networkFormOk"; buttonsObj['text'] = i18n.KCHAPI6005M; - buttonsObj['class'] = "btn-normal"; + buttonsObj['class'] = "btn btn-default"; buttonsObj['disabled'] = true; buttonsObj['click'] = function() { }; buttonsObjCancel= {}; buttonsObjCancel['id'] = "networkFormCancel"; buttonsObjCancel['text'] = i18n.KCHAPI6003M; - buttonsObjCancel['class'] = "btn-normal"; + buttonsObjCancel['class'] = "btn btn-default"; buttonsObjCancel['disabled'] = false; buttonsObjCancel['click'] = function() { $(this).dialog("close"); diff --git a/src/wok/plugins/kimchi/ui/pages/network.html.tmpl b/src/wok/plugins/kimchi/ui/pages/network.html.tmpl index 915feac..75721d7 100644 --- a/src/wok/plugins/kimchi/ui/pages/network.html.tmpl +++ b/src/wok/plugins/kimchi/ui/pages/network.html.tmpl @@ -29,102 +29,129 @@ <script src="plugins/kimchi/js/kimchi.min.js"></script> </head> <body> -<div class="toolbar"> - <div class="tools" style="display:none"> - <a id="networkAdd" class="btn-tool" href="javascript:void(0);"><span class="icon add">+</span></a> - </div> -</div> -<div id="network-content" class="network"> - <div class="grid-control"><input type="text" class="filter" placeholder="$_("Filter")"></div> - <div id="networkGrid" class="list"> - <div> - <span class="column-name">$_("Network Name")</span><!-- - --><span class="column-state">$_("State")</span><!-- - --><span class="column-type">$_("Network Type")</span><!-- - --><span class="column-interface">$_("Interface")</span><!-- - --><span class="column-space">$_("Address Space")</span><!-- - --><span style="display:none">$_("Actions")</span> - </div> - <div id="networkBody" class="empty-when-logged-off"></div> - </div> - <div id="networkConfig" class="network-config"> - <div class="section-container"> - <div class="section-header">1. $_("Network Name")</div> - <div class="section-content"> - <input type="text" id="networkName" /> - <div class="input-hint"> - <span class="icon-info-circled light-grey c1 help-inline"></span> - <span class="input-hint-text help-inline">$_("Name should not contain '/' and '\"'.")</span> - </div> +<div id="network-root-container"> + <nav class="navbar navbar-default toolbar"> + <div class="container"> + <!-- Brand and toggle get grouped for better mobile display --> + <div class="navbar-header"> + <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#toolbar" aria-expanded="false"> + <span class="sr-only">Toggle navigation</span> + <span class="icon-bar"></span> + <span class="icon-bar"></span> + <span class="icon-bar"></span> + </button> + </div> + <!-- Collect the nav links, forms, and other content for toggling --> + <div class="collapse navbar-collapse" id="toolbar"> + <ul class="nav navbar-nav navbar-right tools" display="none"> + <li><a id="networkAdd" class="btn-tool" href="javascript:void(0);"><i class="fa fa-plus-circle"></i><span>Add a Network</span></a></li> + </ul> </div> </div> - <div class="section-container"> - <div class="section-header">2. $_("Network Type")</div> - <div class="section-content"> - <div class="input-container"> - <input type="radio" id="networkTypeIso" name="networkType" value="isolated" /> - <label for="networkTypeIso">$_("Isolated: no external network connection")</label> + </nav> + <div id="network-content-container"> + <div class="container"> + <div class="row grid-control"> + <div class="pull-right"> + <label for="network-filter" class="sr-only">$_("Filter"):</label> + <input type="text" class="filter form-control" placeholder="$_("Filter")"> </div> - <div class="input-container"> - <input type="radio" id="networkTypeNat" name="networkType" value="nat" /> - <label for="networkTypeNat">$_("NAT: outbound physical network connection only")</label> + </div> + <div id="networkGrid"> + <div> + <span class="column-state"><span class="sr-only">$_("State")</span></span><!-- + --><span class="column-name">$_("Network Name")</span><!-- + --><span class="column-type">$_("Network Type")</span><!-- + --><span class="column-interface">$_("Interface")</span><!-- + --><span class="column-space">$_("Address Space")</span><!-- + --><span class="column-action" style="display:none"> + <span class="sr-only">$_("Actions")</span><!-- + --></span> </div> - <div class="input-container"> - <div class="bridged-inline"> - <input type="radio" id="networkTypeBri" name="networkType" value="bridged" /> - </div> - <div class="bridged-inline"> - <label for="networkTypeBri">$_("Bridged: Virtual machines are connected to physical network directly")</label><br /> - <label id="networkBriDisabledLabel" style="display:none">$_("(No interfaces found)")</label> + <div id="networkBody" class="empty-when-logged-off"></div> + </div> + <div id="networkConfig" class="network-config"> + <div class="section-container"> + <div class="section-header">1. $_("Network Name")</div> + <div class="section-content"> + <input type="text" id="networkName" /> + <div class="input-hint"> + <span class="icon-info-circled light-grey c1 help-inline"></span> + <span class="input-hint-text help-inline">$_("Name should not contain '/' and '\"'.")</span> + </div> </div> </div> - <div id="bridgeOptions"> - <div> - <div class="bridge-option-column"> - <label for="networkInterface">$_("Destination"): </label> + <div class="section-container"> + <div class="section-header">2. $_("Network Type")</div> + <div class="section-content"> + <div class="input-container"> + <input type="radio" id="networkTypeIso" name="networkType" value="isolated" /> + <label for="networkTypeIso">$_("Isolated: no external network connection")</label> + </div> + <div class="input-container"> + <input type="radio" id="networkTypeNat" name="networkType" value="nat" /> + <label for="networkTypeNat">$_("NAT: outbound physical network connection only")</label> + </div> + <div class="input-container"> + <div class="bridged-inline"> + <input type="radio" id="networkTypeBri" name="networkType" value="bridged" /> + </div> + <div class="bridged-inline"> + <label for="networkTypeBri">$_("Bridged: Virtual machines are connected to physical network directly")</label><br /> + <label id="networkBriDisabledLabel" style="display:none">$_("(No interfaces found)")</label> + </div> </div> - <div class="bridge-option-column"> - <div class="network-type-wrapper-controls"> - <div id ="networkDestinationID"> - <input id="networkDestinationInputId" name="type" type="hidden"/> - <span id="networkDestinationLabel" type="text"></span><span class="arrow"></span> - <div> - <ul id="networkInterface"></ul> + <div id="bridgeOptions"> + <div> + <div class="bridge-option-column"> + <label for="networkInterface">$_("Destination"): </label> + </div> + <div class="bridge-option-column"> + <div class="network-type-wrapper-controls"> + <div id ="networkDestinationID"> + <input id="networkDestinationInputId" name="type" type="hidden"/> + <span id="networkDestinationLabel" type="text"></span><span class="arrow"></span> + <div> + <ul id="networkInterface"></ul> + </div> + </div> </div> </div> </div> + <div> + <input id="enableVlan" type="checkbox" value="" /> + <label for="enableVlan" id="labelEnableVlan">$_("Enable VLAN") </label> + </div> + <label for="networkVlanID" id="labelNetworkVlanID">$_("VLAN ID"): </label> + <input type="text" id="networkVlanID" class="network-label"/> + </div> </div> </div> - <div> - <input id="enableVlan" type="checkbox" value="" /> - <label for="enableVlan" id="labelEnableVlan">$_("Enable VLAN") </label> - </div> - <label for="networkVlanID" id="labelNetworkVlanID">$_("VLAN ID"): </label> - <input type="text" id="networkVlanID" class="network-label"/> - </div> </div> </div> </div> - </div> </div> <script id="networkItem" type="text/html"> - <div id='{name}' class='remove-when-logged-off'> - <span class='column-name' title="{name}" val="{name}">{name}</span><!-- - --><span class='column-state' val="{state}"><span class='network-state {state}'></span></span><!-- - --><span class='column-type' val="{type}">{type}</span><!-- - --><span class='column-interface' val="{interface}">{interface}</span><!-- - --><span class='column-space' val="{addrSpace}">{addrSpace}</span><!-- - --><span class='column-action' style="display:none"> - <span class="ui-button-secondary dropdown popable action-button"> - $_("Actions") - <ul class='popover actionsheet right-side menu-container'> - <li nwAct="start" class='{startClass}'><a class='button-big'>$_("Start")</a></li> - <li nwAct="stop" class='{stopClass}'><a {stopDisabled} class='button-big'>$_("Stop")</a></li> - <li nwAct="delete" class='{deleteClass}'><a {deleteDisabled} class='red'>$_("Delete")</a></li> - </ul> - </span> - </span> - </div> + <div id='{name}' class='wok-nw-grid-body remove-when-logged-off '> + <span class='column-state' val="{state}"><span class='network-state {state}'><i class="fa fa-power-off"></i><span class="wok-nw-loading-icon"></span></span></span><!-- + --><span class='column-name' title="{name}" val="{name}">{name}</span><!-- + --><span class='column-type' val="{type}">{type}</span><!-- + --><span class='column-interface' val="{interface}">{interface}</span><!-- + --><span class='column-space' val="{addrSpace}">{addrSpace}</span><!-- + --><span class='column-action' style="display:none"> + <span class="pull-right"> + <div class="dropdown menu-flat"> + <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false"><span class="edit-alt"></span>$_("Actions")<span class="caret"></span> + </button> + <ul class="dropdown-menu" role="menu"> + <li role="presentation" nwAct="start" class='{startClass}'><a><i class="fa fa-undo"></i>$_("Start")</a></li> + <li role="presentation" nwAct="stop" class='{stopClass}'><a {stopDisabled}><i class="fa fa-ban"></i>$_("Stop")</a></li> + <li role="presentation" nwAct="delete" class='critical {deleteClass}'><a {deleteDisabled}><i class="fa fa-minus-circle"></i>$_("Delete")</a></li> + </ul> + </div> + </span> + </span> + </div> </script> <script> kimchi.initNetwork(); -- 1.9.3