[Kimchi-devel] [PATCH 2/2] Adding new-ui to Hosts tab and modal windows

From: samhenri <samuel.guimaraes(a)eldorado.org.br&gt; Some CSS files are empty to avoid conflicts with next patches and or commits when deleted/moved to gingerbase Signed-off-by: samhenri <samuel.guimaraes(a)eldorado.org.br&gt; --- src/wok/plugins/kimchi/ui/config/tab-ext.xml | 10 +- .../plugins/kimchi/ui/css/theme-default/host.css | 270 --------- .../kimchi/ui/css/theme-default/report-add.css | 20 - .../kimchi/ui/css/theme-default/report-rename.css | 22 - .../kimchi/ui/css/theme-default/repository-add.css | 25 - .../ui/css/theme-default/repository-edit.css | 62 --- src/wok/plugins/kimchi/ui/js/src/kimchi.host.js | 615 +++++++++++---------- src/wok/plugins/kimchi/ui/pages/host.html.tmpl | 207 +++---- .../plugins/kimchi/ui/pages/report-add.html.tmpl | 46 +- .../kimchi/ui/pages/report-rename.html.tmpl | 42 +- .../kimchi/ui/pages/repository-add.html.tmpl | 124 ++--- .../kimchi/ui/pages/repository-edit.html.tmpl | 138 ++--- ui/css/src/modules/_host.scss | 6 +- 13 files changed, 547 insertions(+), 1040 deletions(-) diff --git a/src/wok/plugins/kimchi/ui/config/tab-ext.xml b/src/wok/plugins/kimchi/ui/config/tab-ext.xml index ee88c88..b2a842b 100644 --- a/src/wok/plugins/kimchi/ui/config/tab-ext.xml +++ b/src/wok/plugins/kimchi/ui/config/tab-ext.xml @@ -3,35 +3,35 @@ <tab> <access role="admin" mode="admin"/> <access role="user" mode="none"/> - + <class>host</class> <title>Host</title> <path>plugins/kimchi/host.html</path> </tab> <tab> <access role="admin" mode="admin"/> <access role="user" mode="byInstance"/> - + <class>guests</class> <title>Guests</title> <path>plugins/kimchi/guests.html</path> </tab> <tab> <access role="admin" mode="admin"/> <access role="user" mode="none"/> - + <class>templates</class> <title>Templates</title> <path>plugins/kimchi/templates.html</path> </tab> <tab> <access role="admin" mode="admin"/> <access role="user" mode="read-only"/> - + <class>storage</class> <title>Storage</title> <path>plugins/kimchi/storage.html</path> </tab> <tab> <access role="admin" mode="admin"/> <access role="user" mode="read-only"/> - + <class>network</class> <title>Network</title> <path>plugins/kimchi/network.html</path> </tab> diff --git a/src/wok/plugins/kimchi/ui/css/theme-default/host.css b/src/wok/plugins/kimchi/ui/css/theme-default/host.css index a0cccb1..bb693cc 100644 --- a/src/wok/plugins/kimchi/ui/css/theme-default/host.css +++ b/src/wok/plugins/kimchi/ui/css/theme-default/host.css @@ -15,273 +15,3 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -.host-panel { - font-size: 12px; - margin-bottom: 100px; -} - -.host-panel .logo-container, .host-panel .info-container, -.host-panel .section-label, .host-panel .section-value { - display: inline-block; - vertical-align: top; -} - -.host-panel .section-label { - display: inline-block; - margin-right: 1em; - vertical-align: top; -} - -.host-panel .logo { - background: url("plugins/kimchi/images/icon-vm.png") no-repeat left top; - height: 128px; - width: 128px; -} - -.host-panel .hostname { - text-decoration: underline; -} - -.host-panel .action-panel { - margin-top: 2em; - padding-left: 10px; -} - -.host-panel .button-icon { - background: url("../images/theme-default/host-icon-sprite.png") no-repeat - left top; - display: inline-block; - height: 12px; - width: 12px; -} - -.host-panel .action-icon-stop { - background-position: -14px 0; -} - -.host-panel .action-icon-restart { - background-position: -28px 0; -} - -.host-panel .action-icon-download { - background-position: -42px 0; -} - -.host-panel .action-icon-connect { - background-position: -56px 0; -} - -.host-panel .action-icon-add { - background-position: -70px 0; -} - -.host-panel .action-icon-edit { - background-position: -84px 0; -} - -.host-panel .action-icon-remove { - background-position: -98px 0; -} - -.host-panel button:disabled .action-icon-start { - background-position: 0 -14px; -} - -.host-panel button:disabled .action-icon-stop { - background-position: -14px -14px; -} - -.host-panel button:disabled .action-icon-restart { - background-position: -28px -14px; -} - -.host-panel button:disabled .action-icon-download { - background-position: -42px -14px; -} - -.host-panel button:disabled .action-icon-connect { - background-position: -56px -14px; -} - -.host-panel button:disabled .action-icon-add { - background-position: -70px -14px; -} - -.host-panel button:disabled .action-icon-edit { - background-position: -84px -14px; -} - -.host-panel button:disabled .action-icon-remove { - background-position: -98px -14px; -} - -.host-panel .info-container { - padding-top: 16px; - width: 890px; -} - -.host-panel .section-header { - background: #EEE; - border-radius: 5px; - cursor: pointer; - line-height: 2em; - margin: 1em 0 1em; - padding-left: 6px; -} - -.host-panel .section-header:hover { - background: #06f; - color: white; -} - -.host-panel .section-content { - padding-left: 1em; -} - -.host-panel .section-header .arrow { - border-color: transparent; - border-style: solid; - display: inline-block; - margin-right: 6px; - width: 0; -} - -.host-panel .section-header[aria-expanded="true"] .arrow { - border-top-color: black; - border-width: 8px 4px 0; - border-bottom: none; -} - -.host-panel .section-header[aria-expanded="true"]:hover .arrow { - border-top-color: white; -} - -.host-panel .section-header[aria-expanded="false"] .arrow { - border-left-color: black; - border-right: none; - border-width: 4px 0 4px 8px; -} - -.host-panel .section-header[aria-expanded="false"]:hover .arrow { - border-left-color: white; -} - -.host-panel .section-row { - line-height: 1.6em; - margin-bottom: 1em; -} - -.host-panel .section-label { - width: 100px; -} - -#frequency-textbox { - width: 20px; -} - -#container-chart-cpu, -#container-chart-memory, -#container-chart-disk-io, -#container-chart-network-io { - border: 1px solid white; - box-shadow: 2px 2px 2px gray, 2px -2px 2px gray, -2px -2px 2px gray, -2px - 2px 2px gray; - height: 100px; - width: 500px; -} - -#container-chart-disk-io .disk-write, -#container-chart-network-io .network-sent { - stroke: #f80; -} - -/* Debug Report */ -.cell-text-wrapper { - margin-left: 10px; -} - -.host-panel #available-reports-grid { - border-color: #ddd; - height: 400px; - width: 850px; -} - -.host-panel select#available-reports-list { - width: 300px; -} - -.host-panel select#available-reports-list option { - margin: .2em 1em; -} - -.debug-report-name, -.debug-report-time { - width: 424px; -} - -#id-debug-img { - background: url(../images/theme-default/kimchi-loading15x15.gif) 12px - center no-repeat; - padding-left: 23px; -} - -/* End of Debug Report */ - -/* Software Updates */ -.host-panel #software-updates-grid { - border-color: #ddd; - height: 300px; - width: 850px; -} - -.software-update-name, -.software-update-repos { - width: 224px; -} - -.software-update-version, -.software-update-arch { - width: 200px; -} - -.host-panel #software-updates-progress-textarea { - border: 1px solid #ddd; - box-sizing: border-box; - height: 100px; - padding: .2em .5em; - resize: vertical; - width: 852px; -} -/* End of Software Updates */ - -/* Repository */ -.host-panel #repositories-grid { - border-color: #ddd; - height: 200px; - width: 850px; -} - -.host-panel #repositories-grid .repository-id { - width: 120px; -} - -.host-panel #repositories-grid .repository-name { - width: 640px; -} - -.host-panel #repositories-grid .repository-enabled { - width: 88px; -} - -.host-panel #repositories-grid .repository-baseurl.deb { - width: 400px; -} - -.host-panel #repositories-grid .repository-enabled.deb { - width: 100px; -} - -.host-panel #repositories-grid .repository-gpgcheck.deb { - width: 150px; -} -/* End of Repository */ diff --git a/src/wok/plugins/kimchi/ui/css/theme-default/report-add.css b/src/wok/plugins/kimchi/ui/css/theme-default/report-add.css index 8020182..3769daa 100644 --- a/src/wok/plugins/kimchi/ui/css/theme-default/report-add.css +++ b/src/wok/plugins/kimchi/ui/css/theme-default/report-add.css @@ -15,23 +15,3 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -#report-add-window { - height: 300px; - width: 400px; -} - -#report-add-window .field { - font-size: 12px; -} - -#report-name-textbox { - margin: 0; - width: 100%; -} - -.info-add-debug-report { - font-size: 12px; - color: #999999; - font-weight: lighter; - font-family: 'Helvetica Neue', Helvetica, Arial; -} \ No newline at end of file diff --git a/src/wok/plugins/kimchi/ui/css/theme-default/report-rename.css b/src/wok/plugins/kimchi/ui/css/theme-default/report-rename.css index 2fb2698..2d9e4a2 100644 --- a/src/wok/plugins/kimchi/ui/css/theme-default/report-rename.css +++ b/src/wok/plugins/kimchi/ui/css/theme-default/report-rename.css @@ -15,25 +15,3 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -#report-rename-window { - height: 300px; - width: 400px; -} - -#report-rename-window .field { - font-size: 12px; -} - -#report-name-textbox { - -moz-box-sizing: border-box; - box-sizing: border-box; - margin: 0; - width: 100%; -} - -.info-debug-report-rename { - font-size: 12px; - color: #999999; - font-weight: lighter; - font-family: 'Helvetica Neue', Helvetica, Arial; -} diff --git a/src/wok/plugins/kimchi/ui/css/theme-default/repository-add.css b/src/wok/plugins/kimchi/ui/css/theme-default/repository-add.css index 4344569..2d9e4a2 100644 --- a/src/wok/plugins/kimchi/ui/css/theme-default/repository-add.css +++ b/src/wok/plugins/kimchi/ui/css/theme-default/repository-add.css @@ -15,28 +15,3 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -#repository-add-window { - height: 500px; - width: 1000px; -} - -#repository-add-window span.required { - color: red; - padding-left: 5px; - vertical-align: top; -} - -#repository-add-window .textbox-wrapper input[type="text"] { - box-sizing: border-box; - width: 100%; -} - -#repository-add-window .textbox-wrapper label { - vertical-align: middle; -} - -#isMirrorLabel { - font-size: 14px; - font-weight: lighter; - font-family: 'Helvetica Neue', Helvetica, Arial; -} \ No newline at end of file diff --git a/src/wok/plugins/kimchi/ui/css/theme-default/repository-edit.css b/src/wok/plugins/kimchi/ui/css/theme-default/repository-edit.css index 383a7fe..d50bbc1 100644 --- a/src/wok/plugins/kimchi/ui/css/theme-default/repository-edit.css +++ b/src/wok/plugins/kimchi/ui/css/theme-default/repository-edit.css @@ -15,68 +15,6 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -.yum div#repository-edit-window { - height: 680px; - width: 1000px; -} - -.deb div#repository-edit-window { - height: 480px; - width: 1000px; -} - - -.repository-edit-fieldset { - float: left; - padding: 0 30px; - width: 95%; -} - -.repository-edit-wrapper-label, .repository-edit-wrapper-controls { - display: inline-block; - height: 30px; - line-height: 30px; - font-size: 14px; - vertical-align: top; -} - -.repository-edit-wrapper-label { - margin-top: 10px; - width: 150px; -} - -.repository-edit-wrapper-controls label { - vertical-align: middle; -} - -.repository-edit-wrapper-controls { - width: 100%; -} - -.repository-edit-wrapper-controls input[type="text"] { - font-size: 16px; - height: 30px; - line-height: 30px; - padding: 0 10px; - width: 100%; - -moz-box-sizing: border-box; - box-sizing: border-box; - border: 1px solid #CCCCCC; -} - - -.repository-edit-wrapper-controls input[type="text"][readonly] { - color: #bbb; - background-color: #fafafa; -} - - -.repository-edit-wrapper-controls input[type="text"][disabled] { - color: #bbb; - background-color: #fafafa; - cursor: not-allowed; -} - .deb .yum{ display: none; diff --git a/src/wok/plugins/kimchi/ui/js/src/kimchi.host.js b/src/wok/plugins/kimchi/ui/js/src/kimchi.host.js index 8d2517a..66e6243 100644 --- a/src/wok/plugins/kimchi/ui/js/src/kimchi.host.js +++ b/src/wok/plugins/kimchi/ui/js/src/kimchi.host.js @@ -15,87 +15,92 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -kimchi.host={}; +kimchi.host = {}; kimchi.host_main = function() { - var expand = function(header, toExpand) { - var controlledNode = $(header).attr('aria-controls'); - $('#' + controlledNode)[toExpand ? 'removeClass' : 'addClass']('hidden'); - $(header).attr('aria-expanded', toExpand ? 'true' : 'false'); - }; - + "use strict"; var repositoriesGrid = null; var initRepositoriesGrid = function(repo_type) { - var gridFields=[]; - if (repo_type == "yum") { - gridFields=[{ - name: 'repo_id', - label: i18n['KCHREPO6004M'], - 'class': 'repository-id' - }, { - name: 'config[display_repo_name]', - label: i18n['KCHREPO6005M'], - 'class': 'repository-name' - }, { - name: 'enabled', - label: i18n['KCHREPO6009M'], - 'class': 'repository-enabled' - }]; - } - else if (repo_type == "deb") { - gridFields=[{ - name: 'baseurl', - label: i18n['KCHREPO6006M'], - makeTitle: true, - 'class': 'repository-baseurl deb' - }, { - name: 'enabled', - label: i18n['KCHREPO6009M'], - 'class': 'repository-enabled deb' - }, { - name: 'config[dist]', - label: "dist", - 'class': 'repository-gpgcheck deb' - }, { - name: 'config[comps]', - label: "comps", - 'class': 'repository-gpgcheck deb' - }]; - } - else { - gridFields=[{ + var gridFields = []; + if (repo_type === "yum") { + gridFields = [{ + name: 'repo_id', + label: i18n['KCHREPO6004M'], + 'class': 'repository-id', + type: 'name' + }, { + name: 'config[display_repo_name]', + label: i18n['KCHREPO6005M'], + 'class': 'repository-name', + type: 'description' + }, { + name: 'enabled', + label: i18n['KCHREPO6009M'], + 'class': 'repository-enabled', + type: 'status' + }]; + } else if (repo_type === "deb") { + gridFields = [{ + name: 'baseurl', + label: i18n['KCHREPO6006M'], + makeTitle: true, + 'class': 'repository-baseurl deb', + type: 'description' + }, { + name: 'enabled', + label: i18n['KCHREPO6009M'], + 'class': 'repository-enabled deb', + type: 'status' + }, { + name: 'config[dist]', + label: "dist", + 'class': 'repository-gpgcheck deb' + }, { + name: 'config[comps]', + label: "comps", + 'class': 'repository-gpgcheck deb' + }]; + } else { + gridFields = [{ name: 'repo_id', label: i18n['KCHREPO6004M'], - 'class': 'repository-id' - }, { - name: 'enabled', - label: i18n['KCHREPO6009M'], - 'class': 'repository-enabled' - }, { - name: 'baseurl', - label: i18n['KCHREPO6006M'], - makeTitle: true, - 'class': 'repository-baseurl' - }]; + 'class': 'repository-id', + type: 'name' + }, { + name: 'enabled', + label: i18n['KCHREPO6009M'], + 'class': 'repository-enabled', + type: 'status' + }, { + name: 'baseurl', + label: i18n['KCHREPO6006M'], + makeTitle: true, + 'class': 'repository-baseurl', + type: 'description' + }]; } - repositoriesGrid = new wok.widget.Grid({ - container: 'repositories-grid-container', + repositoriesGrid = new wok.widget.List({ + container: 'repositories-section', id: 'repositories-grid', title: i18n['KCHREPO6003M'], toolbarButtons: [{ id: 'repositories-grid-add-button', label: i18n['KCHREPO6012M'], + class: 'fa fa-plus-circle', onClick: function(event) { - wok.window.open({url:'plugins/kimchi/repository-add.html', - class: repo_type}); + wok.window.open({ + url: 'plugins/kimchi/repository-add.html', + class: repo_type + }); } }, { id: 'repositories-grid-enable-button', label: i18n['KCHREPO6016M'], + class: 'fa fa-play-circle-o', disabled: true, onClick: function(event) { var repository = repositoriesGrid.getSelected(); - if(!repository) { + if (!repository) { return; } var name = repository['repo_id']; @@ -108,31 +113,36 @@ kimchi.host_main = function() { }, { id: 'repositories-grid-edit-button', label: i18n['KCHREPO6013M'], + class: 'fa fa-pencil', disabled: true, onClick: function(event) { var repository = repositoriesGrid.getSelected(); - if(!repository) { + if (!repository) { return; } kimchi.selectedRepository = repository['repo_id']; - wok.window.open({url:'plugins/kimchi/repository-edit.html', - class: repo_type}); + wok.window.open({ + url: 'plugins/kimchi/repository-edit.html', + class: repo_type + }); } }, { id: 'repositories-grid-remove-button', label: i18n['KCHREPO6014M'], + class: 'fa fa-minus-circle', + critical: true, disabled: true, onClick: function(event) { var repository = repositoriesGrid.getSelected(); - if(!repository) { + if (!repository) { return; } var settings = { - title : i18n['KCHREPO6001M'], - content : i18n['KCHREPO6002M'], - confirm : i18n['KCHAPI6004M'], - cancel : i18n['KCHAPI6003M'] + title: i18n['KCHREPO6001M'], + content: i18n['KCHREPO6002M'], + confirm: i18n['KCHAPI6004M'], + cancel: i18n['KCHAPI6003M'] }; wok.confirm(settings, function() { @@ -140,15 +150,15 @@ kimchi.host_main = function() { repository['repo_id'], function(result) { wok.topic('kimchi/repositoryDeleted').publish(result); - }, function(error) { - } + }, + function(error) {} ); }); } }], onRowSelected: function(row) { var repository = repositoriesGrid.getSelected(); - if(!repository) { + if (!repository) { return; } $('#repositories-grid-remove-button').prop('disabled', false); @@ -166,28 +176,26 @@ kimchi.host_main = function() { var listRepositories = function(gridCallback) { kimchi.listRepositories(function(repositories) { - if($.isFunction(gridCallback)) { - gridCallback(repositories); - } - else { - if(repositoriesGrid) { - repositoriesGrid.setData(repositories); - } - else { - initRepositoriesGrid(); - repositoriesGrid.setData(repositories); + if ($.isFunction(gridCallback)) { + gridCallback(repositories); + } else { + if (repositoriesGrid) { + repositoriesGrid.setData(repositories); + } else { + initRepositoriesGrid(); + repositoriesGrid.setData(repositories); + } } - } - }, - function(error) { - var message = error && error['responseJSON'] && error['responseJSON']['reason']; + }, + function(error) { + var message = error && error['responseJSON'] && error['responseJSON']['reason']; - if($.isFunction(gridCallback)) { - gridCallback([]); - } - repositoriesGrid && - repositoriesGrid.showMessage(message || i18n['KCHUPD6008M']); - }); + if ($.isFunction(gridCallback)) { + gridCallback([]); + } + repositoriesGrid && + repositoriesGrid.showMessage(message || i18n['KCHUPD6008M']); + }); $('#repositories-grid-remove-button').prop('disabled', true); $('#repositories-grid-edit-button').prop('disabled', true); @@ -278,14 +286,12 @@ kimchi.host_main = function() { var listSoftwareUpdates = function(gridCallback) { kimchi.listSoftwareUpdates(function(softwareUpdates) { - if($.isFunction(gridCallback)) { + if ($.isFunction(gridCallback)) { gridCallback(softwareUpdates); - } - else { - if(softwareUpdatesGrid) { + } else { + if (softwareUpdatesGrid) { softwareUpdatesGrid.setData(softwareUpdates); - } - else { + } else { initSoftwareUpdatesGrid(softwareUpdates); } } @@ -299,13 +305,13 @@ kimchi.host_main = function() { // package manager instance running, so follow that instance updates if (message.indexOf("KCHPKGUPD0005E") !== -1) { startSoftwareUpdateProgress(); - if($.isFunction(gridCallback)) { + if ($.isFunction(gridCallback)) { gridCallback([]); } return; } - if($.isFunction(gridCallback)) { + if ($.isFunction(gridCallback)) { gridCallback([]); } softwareUpdatesGrid && @@ -325,23 +331,25 @@ kimchi.host_main = function() { }); }; var initReportGrid = function(reports) { - reportGrid = new wok.widget.Grid({ - container: 'available-reports-grid-container', + reportGrid = new wok.widget.List({ + container: 'debug-report-section', id: reportGridID, title: i18n['KCHDR6002M'], toolbarButtons: [{ id: reportGridID + '-generate-button', + class: 'fa fa-plus-circle', label: i18n['KCHDR6006M'], onClick: function(event) { wok.window.open('plugins/kimchi/report-add.html'); } }, { id: reportGridID + '-rename-button', + class: 'fa fa-pencil', label: i18n['KCHDR6008M'], disabled: true, onClick: function(event) { var report = reportGrid.getSelected(); - if(!report) { + if (!report) { return; } @@ -349,20 +357,37 @@ kimchi.host_main = function() { wok.window.open('plugins/kimchi/report-rename.html'); } }, { + id: reportGridID + '-download-button', + label: i18n['KCHDR6010M'], + class: 'fa fa-download', + disabled: true, + onClick: function(event) { + var report = reportGrid.getSelected(); + if (!report) { + return; + } + + kimchi.downloadReport({ + file: report['uri'] + }); + } + }, { id: reportGridID + '-remove-button', + class: 'fa fa-minus-circle', label: i18n['KCHDR6009M'], + critical: true, disabled: true, onClick: function(event) { var report = reportGrid.getSelected(); - if(!report) { + if (!report) { return; } var settings = { - title : i18n['KCHAPI6004M'], - content : i18n['KCHDR6001M'], - confirm : i18n['KCHAPI6002M'], - cancel : i18n['KCHAPI6003M'] + title: i18n['KCHAPI6004M'], + content: i18n['KCHDR6001M'], + confirm: i18n['KCHAPI6002M'], + cancel: i18n['KCHAPI6003M'] }; wok.confirm(settings, function() { @@ -371,36 +396,21 @@ kimchi.host_main = function() { }, function(result) { listDebugReports(); }, function(error) { - wok.message.error(error.responseJSON.reason); + wok.message.error(error.responseJSON.reason); }); }); } - }, { - id: reportGridID + '-download-button', - label: i18n['KCHDR6010M'], - disabled: true, - onClick: function(event) { - var report = reportGrid.getSelected(); - if(!report) { - return; - } - - kimchi.downloadReport({ - file: report['uri'] - }); - } }], onRowSelected: function(row) { var report = reportGrid.getSelected(); // Only enable report buttons if the selected line is not a // pending report - if (report['time'] == i18n['KCHDR6007M']) { - var gridElement = $('#'+ reportGridID); + if (report['time'] === i18n['KCHDR6007M']) { + var gridElement = $('#' + reportGridID); var row = $('tr:contains(' + report['name'] + ')', gridElement); enableReportButtons(false); row.attr('class', ''); - } - else { + } else { enableReportButtons(true); } }, @@ -408,26 +418,31 @@ kimchi.host_main = function() { fields: [{ name: 'name', label: i18n['KCHDR6003M'], - 'class': 'debug-report-name' + 'class': 'debug-report-name', + type: 'name' }, { name: 'time', label: i18n['KCHDR6005M'], - 'class': 'debug-report-time' + 'class': 'debug-report-time', + type: 'description' }], data: reports }); }; var getPendingReports = function() { - var reports = [] - var filter = 'status=running&target_uri=' + encodeURIComponent('^/plugins/kimchi/debugreports/*') + var reports = []; + var filter = 'status=running&target_uri=' + encodeURIComponent('^/plugins/kimchi/debugreports/*'); kimchi.getTasksByFilter(filter, function(tasks) { - for(var i = 0; i < tasks.length; i++) { - reportName = tasks[i].target_uri.replace(/^\/plugins\/kimchi\/debugreports\//, '') || i18n['KCHDR6012M']; - reports.push({'name': reportName, 'time': i18n['KCHDR6007M']}) + for (var i = 0; i < tasks.length; i++) { + var reportName = tasks[i].target_uri.replace(/^\/plugins\/kimchi\/debugreports\//, '') || i18n['KCHDR6012M']; + reports.push({ + 'name': reportName, + 'time': i18n['KCHDR6007M'] + }); - if(kimchi.trackingTasks.indexOf(tasks[i].id) >= 0) { + if (kimchi.trackingTasks.indexOf(tasks[i].id) >= 0) { continue; } @@ -453,33 +468,64 @@ kimchi.host_main = function() { var listDebugReports = function() { kimchi.listReports(function(reports) { - pendingReports = getPendingReports(); - allReports = pendingReports.concat(reports); + var pendingReports = getPendingReports(); + var allReports = pendingReports.concat(reports); $('#debug-report-section').removeClass('hidden'); + if ((kimchi.capabilities['repo_mngt_tool']) && (kimchi.capabilities['repo_mngt_tool'] !== "None")) { + $('#debug-report-section, #repositories-section').removeClass('col-md-8'); + $('#debug-report-section, #repositories-section').addClass('col-md-4'); + }else { + $('#content-sys-info').removeClass('col-md-12'); + $('#content-sys-info').addClass('col-md-4'); + } + // Row selection will be cleared so disable buttons here enableReportButtons(false); - if(reportGrid) { + if (reportGrid) { reportGrid.setData(allReports); - } - else { + } else { initReportGrid(allReports); } + if (!allReports.length) { + $('#available-reports-grid-btn-group').removeClass('hidden'); + } else { + $('#available-reports-grid-btn-group').addClass('hidden'); + } + // Set id-debug-img to pending reports // It will display a loading icon var gridElement = $('#' + reportGridID); - $.each($('td:contains(' + i18n['KCHDR6007M'] + ')', gridElement), function(index, row) { - $(row).parent().addClass('no-hover'); - $(row).attr('id', 'id-debug-img'); + // "Generating..." + $.each($('td:contains(' + i18n['KCHDR6007M'] + ')', gridElement), function(index, row) { + console.log(row); + $(row).parent().addClass('generating'); + $(row).parent().find('.dropdown-toggle').addClass('disabled'); + //$(row).attr('id', 'id-debug-img'); }); }, function(error) { - if(error['status'] == 403) { + if (error['status'] === 403) { $('#debug-report-section').addClass('hidden'); + // Check Repositories and resize column + if ((kimchi.capabilities['repo_mngt_tool']) && (kimchi.capabilities['repo_mngt_tool'] !== "None")) { + $('#repositories-section').removeClass('col-md-4'); + $('#repositories-section').addClass('col-md-8'); + }else { + $('#content-sys-info').removeClass('col-md-4'); + $('#content-sys-info').addClass('col-md-12'); + } return; } $('#debug-report-section').removeClass('hidden'); + if ((kimchi.capabilities['repo_mngt_tool']) && (kimchi.capabilities['repo_mngt_tool'] !== "None")) { + $('#debug-report-section, #repositories-section').removeClass('col-md-8'); + $('#debug-report-section, #repositories-section').addClass('col-md-4'); + }else { + $('#content-sys-info').removeClass('col-md-12'); + $('#content-sys-info').addClass('col-md-4'); + } }); }; @@ -487,10 +533,9 @@ kimchi.host_main = function() { var restartButtonID = '#host-button-restart'; var shutdownHost = function(params) { var settings = { - title : i18n['KCHAPI6004M'], - content : i18n['KCHHOST6008M'], - confirm : i18n['KCHAPI6002M'], - cancel : i18n['KCHAPI6003M'] + content: i18n['KCHHOST6008M'], + confirm: i18n['KCHAPI6002M'], + cancel: i18n['KCHAPI6003M'] }; wok.confirm(settings, function() { @@ -499,8 +544,8 @@ kimchi.host_main = function() { $(restartButtonID).prop('disabled', true); // Check if there is any VM is running. kimchi.listVMs(function(vms) { - for(var i = 0; i < vms.length; i++) { - if(vms[i]['state'] === 'running') { + for (var i = 0; i < vms.length; i++) { + if (vms[i]['state'] === 'running') { wok.message.error.code('KCHHOST6001E'); $(shutdownButtonID).prop('disabled', false); $(restartButtonID).prop('disabled', false); @@ -509,41 +554,34 @@ kimchi.host_main = function() { } }); - }, function() { - }); + }, function() {}); }; var initPage = function() { - $('#host-info-container .section-header').each(function(i, header) { - $('<span class="arrow"></span>').prependTo(header); - var toExpand = $(header).attr('aria-expanded') !== 'false'; - expand(header, toExpand); - }); - - $('#host-info-container').on('click', '.section-header', function(event) { - var toExpand = $(this).attr('aria-expanded') === 'false'; - expand(this, toExpand); - }); $('#host-button-shutdown').on('click', function(event) { + event.preventDefault(); shutdownHost(null); }); $('#host-button-restart').on('click', function(event) { + event.preventDefault(); shutdownHost({ reboot: true }); }); var setupUI = function() { - if (kimchi.capabilities == undefined) { + if (kimchi.capabilities === undefined) { setTimeout(setupUI, 2000); return; } - if((kimchi.capabilities['repo_mngt_tool']) && (kimchi.capabilities['repo_mngt_tool']!="None")) { + if ((kimchi.capabilities['repo_mngt_tool']) && (kimchi.capabilities['repo_mngt_tool'] !== "None")) { initRepositoriesGrid(kimchi.capabilities['repo_mngt_tool']); $('#repositories-section').switchClass('hidden', kimchi.capabilities['repo_mngt_tool']); + $('#content-sys-info').removeClass('col-md-12', kimchi.capabilities['repo_mngt_tool']); + $('#content-sys-info').addClass('col-md-4', kimchi.capabilities['repo_mngt_tool']); wok.topic('kimchi/repositoryAdded') .subscribe(listRepositories); wok.topic('kimchi/repositoryUpdated') @@ -552,7 +590,7 @@ kimchi.host_main = function() { .subscribe(listRepositories); } - if(kimchi.capabilities['update_tool']) { + if (kimchi.capabilities['update_tool']) { $('#software-update-section').removeClass('hidden'); initSoftwareUpdatesGrid(); wok.topic('kimchi/softwareUpdated') @@ -562,7 +600,7 @@ kimchi.host_main = function() { }); } - if(kimchi.capabilities['system_report_tool']) { + if (kimchi.capabilities['system_report_tool']) { listDebugReports(); wok.topic('kimchi/debugReportAdded') .subscribe(listDebugReports); @@ -605,40 +643,40 @@ kimchi.host_main = function() { } }, diskIO: { - r: { + w: { type: 'value', base: 2, fixed: 2, unit: 'B/s', - legend: i18n['KCHHOST6004M'], + legend: i18n['KCHHOST6005M'], + 'class': 'disk-write', points: [] }, - w: { + r: { type: 'value', base: 2, fixed: 2, unit: 'B/s', - legend: i18n['KCHHOST6005M'], - 'class': 'disk-write', + legend: i18n['KCHHOST6004M'], points: [] } }, networkIO: { - r: { + s: { type: 'value', base: 2, fixed: 2, unit: 'B/s', - legend: i18n['KCHHOST6006M'], + legend: i18n['KCHHOST6007M'], + 'class': 'network-sent', points: [] }, - s: { + r: { type: 'value', base: 2, fixed: 2, unit: 'B/s', - legend: i18n['KCHHOST6007M'], - 'class': 'network-sent', + legend: i18n['KCHHOST6006M'], points: [] } } @@ -647,38 +685,36 @@ kimchi.host_main = function() { var cursor = SIZE; var add = function(stats) { - for(var key in stats) { + for (var key in stats) { var item = stats[key]; - for(var metrics in item) { + for (var metrics in item) { var value = item[metrics]['v']; var max = item[metrics]['max']; var unifiedMetrics = statsArray[key][metrics]; var ps = unifiedMetrics['points']; - if(!Array.isArray(value)){ + if (!Array.isArray(value)) { ps.push(value); - if(ps.length > SIZE + 1) { + if (ps.length > SIZE + 1) { ps.shift(); } + } else { + ps = ps.concat(value); + ps.splice(0, ps.length - SIZE - 1); + unifiedMetrics['points'] = ps; } - else{ - ps=ps.concat(value); - ps.splice(0, ps.length-SIZE-1); - unifiedMetrics['points']=ps; - } - if(max !== undefined) { + if (max !== undefined) { unifiedMetrics['max'] = max; - } - else { - if(unifiedMetrics['type'] !== 'value') { + } else { + if (unifiedMetrics['type'] !== 'value') { continue; } max = -Infinity; $.each(ps, function(i, value) { - if(value > max) { + if (value > max) { max = value; } }); - if(max === 0) { + if (max === 0) { ++max; } max *= 1.1; @@ -692,7 +728,7 @@ kimchi.host_main = function() { var get = function(which) { var stats = statsArray[which]; var lines = []; - for(var k in stats) { + for (var k in stats) { var obj = stats[k]; var line = { type: obj['type'], @@ -701,10 +737,10 @@ kimchi.host_main = function() { fixed: obj['fixed'], legend: obj['legend'] }; - if(obj['max']) { + if (obj['max']) { line['max'] = obj['max']; } - if(obj['class']) { + if (obj['class']) { line['class'] = obj['class']; } var ps = obj['points']; @@ -729,104 +765,102 @@ kimchi.host_main = function() { }; var Tracker = function(charts) { - var charts = charts; - var timer = null; - var statsPool = new StatsMgr(); - var setCharts = function(newCharts) { - charts = newCharts; - for(var key in charts) { - var chart = charts[key]; - chart.updateUI(statsPool.get(key)); - } - }; - - var self = this; - - var UnifyStats = function(stats) { - var result= { - cpu: { - u: { - v: stats['cpu_utilization'] - } - }, - memory: { - u: { - } - }, - diskIO: { - r: { - v: stats['disk_read_rate'] - }, - w: { - v: stats['disk_write_rate'] - } - }, - networkIO: { - r: { - v: stats['net_recv_rate'] - }, - s: { - v: stats['net_sent_rate'] - } - } - }; - if(Array.isArray(stats['memory'])){ - result.memory.u['v']=[]; - result.memory.u['max']=-Infinity; - for(var i=0;i<stats['memory'].length;i++){ - result.memory.u['v'].push(stats['memory'][i]['avail']); - result.memory.u['max']=Math.max(result.memory.u['max'],stats['memory'][i]['total']); - } - } - else { - result.memory.u['v']=stats['memory']['avail'], - result.memory.u['max']=stats['memory']['total'] - } - return(result); - }; - - - var statsCallback = function(stats) { - var unifiedStats = UnifyStats(stats); - statsPool.add(unifiedStats); - for(var key in charts) { - var chart = charts[key]; - chart.updateUI(statsPool.get(key)); - } - timer = setTimeout(function() { - continueTrack(); - }, 1000); - }; - - var track = function() { - kimchi.getHostStatsHistory(statsCallback, - function() { - continueTrack(); - }); - }; + var charts = charts; + var timer = null; + var statsPool = new StatsMgr(); + var setCharts = function(newCharts) { + charts = newCharts; + for (var key in charts) { + var chart = charts[key]; + chart.updateUI(statsPool.get(key)); + } + }; + + var self = this; + + var UnifyStats = function(stats) { + var result = { + cpu: { + u: { + v: stats['cpu_utilization'] + } + }, + memory: { + u: {} + }, + diskIO: { + w: { + v: stats['disk_write_rate'] + }, + r: { + v: stats['disk_read_rate'] + } + }, + networkIO: { + s: { + v: stats['net_sent_rate'] + }, + r: { + v: stats['net_recv_rate'] + } + } + }; + if (Array.isArray(stats['memory'])) { + result.memory.u['v'] = []; + result.memory.u['max'] = -Infinity; + for (var i = 0; i < stats['memory'].length; i++) { + result.memory.u['v'].push(stats['memory'][i]['avail']); + result.memory.u['max'] = Math.max(result.memory.u['max'], stats['memory'][i]['total']); + } + } else { + result.memory.u['v'] = stats['memory']['avail'], + result.memory.u['max'] = stats['memory']['total'] + } + return (result); + }; + - var continueTrack = function() { - kimchi.getHostStats(statsCallback, - function() { + var statsCallback = function(stats) { + var unifiedStats = UnifyStats(stats); + statsPool.add(unifiedStats); + for (var key in charts) { + var chart = charts[key]; + chart.updateUI(statsPool.get(key)); + } + timer = setTimeout(function() { continueTrack(); - }); - }; - - var destroy = function() { - timer && clearTimeout(timer); - timer = null; - }; - - return { - setCharts: setCharts, - start: track, - stop: destroy - }; + }, 1000); + }; + + var track = function() { + kimchi.getHostStatsHistory(statsCallback, + function() { + continueTrack(); + }); + }; + + var continueTrack = function() { + kimchi.getHostStats(statsCallback, + function() { + continueTrack(); + }); + }; + + var destroy = function() { + timer && clearTimeout(timer); + timer = null; + }; + + return { + setCharts: setCharts, + start: track, + stop: destroy + }; }; var initTracker = function() { // TODO: Extend tabs with onUnload event to unregister timers. - if(kimchi.hostTimer) { + if (kimchi.hostTimer) { kimchi.hostTimer.stop(); delete kimchi.hostTimer; } @@ -854,20 +888,19 @@ kimchi.host_main = function() { }) }; - if(kimchi.hostTimer) { + if (kimchi.hostTimer) { kimchi.hostTimer.setCharts(trackedCharts); - } - else { + } else { kimchi.hostTimer = new Tracker(trackedCharts); kimchi.hostTimer.start(); } }; $('#host-root-container').on('remove', function() { - if(kimchi.hostTimer) { + if (kimchi.hostTimer) { kimchi.hostTimer.stop(); delete kimchi.hostTimer; - } + } repositoriesGrid && repositoriesGrid.destroy(); wok.topic('kimchi/repositoryAdded') diff --git a/src/wok/plugins/kimchi/ui/pages/host.html.tmpl b/src/wok/plugins/kimchi/ui/pages/host.html.tmpl index d87debc..0128c4f 100644 --- a/src/wok/plugins/kimchi/ui/pages/host.html.tmpl +++ b/src/wok/plugins/kimchi/ui/pages/host.html.tmpl @@ -23,153 +23,124 @@ #silent _ = t.gettext #silent _t = t.gettext <!DOCTYPE html> -<html> +<html> <head> <link rel="stylesheet" href="plugins/kimchi/css/theme-default.min.css"> <script src="plugins/kimchi/js/kimchi.min.js"></script> </head> <body> <div id="host-root-container"> - <div class="toolbar"> - <div class="tools"> - </div> +<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"> + <li><a id="host-button-restart" href="javascript:void(0);"><i class="fa fa-refresh"></i><span>$_("Restart")</span></a></li> + <li><a id="host-button-shutdown" href="javascript:void(0);"><i class="fa fa-ban"></i><span>$_("Shut down")</span></a></li> + <!-- <li><a href="javascript:void(0);"><i class="fa fa-desktop"></i><span>$_("Connect")</span></a></li> --> + </ul> </div> + </div> +</nav> <div id="host-content-container" class="empty-when-logged-off"></div> </div> <script id="host-tmpl" type="kimchi/template"> - <div class="host-panel"> - <div class="logo-container"> - <div class="logo" style="background-image: url({logo});"></div> - </div> - <div id="host-info-container" class="info-container"> - <h2 class="hostname">{hostname}</h2> - <div class="action-panel"> - <button id="host-button-shutdown" class="btn-normal-1 stop"> - <div class="button-icon action-icon-stop"></div> - $_("Shut down") - </button> - <button id="host-button-restart" class="btn-normal-1 restart"> - <div class="button-icon action-icon-restart"></div> - $_("Restart") - </button> - <button class="btn-normal-1 connect" disabled="disabled"> - <div class="button-icon action-icon-connect"></div> - $_("Connect") - </button> - </div> - <div class="host-section"> - <h3 class="section-header" - aria-expanded="false" - aria-controls="content-sys-info"> - $_("Basic Information") - </h3> - <div id="content-sys-info" class="section-content"> - <div class="section-row"> - <div class="section-label">$_("OS Distro")</div> - <div class="section-value">{os_distro}</div> - </div> - <div class="section-row"> - <div class="section-label">$_("OS Version")</div> - <div class="section-value">{os_version}</div> - </div> - <div class="section-row"> - <div class="section-label">$_("OS Code Name")</div> - <div class="section-value">{os_codename}</div> - </div> - <div class="section-row"> - <div class="section-label">$_("Processor")</div> - <div class="section-value">{cpu_model}</div> - </div> - <div class="section-row"> - <div class="section-label">$_("CPU(s)")</div> - <div class="section-value">{cpus}</div> - </div> - <div class="section-row"> - <div class="section-label">$_("Memory")</div> - <div class="section-value">{memory}</div> +<div class="host-dashboard"> + <div class="container"> + <div id="alert-container"></div> + <div id="content-sys-statistics" class="row"> + <div class="col-md-3"> + <div id="cpu-dashboard"> + <h3 class="section-label">$_("CPU")</h3> + <div class="section-value"> + <div id="container-chart-cpu" class="inline-block"></div> </div> </div> </div> - <div class="host-section"> - <h3 class="section-header" - aria-controls="content-sys-statistics"> - $_("System Statistics") - </h3> - <div id="content-sys-statistics" class="section-content"> - <div class="section-row"> - <div class="section-label">$_("CPU")</div> - <div class="section-value"> - <div id="container-chart-cpu" class="inline-block"></div> - </div> - </div> - <div class="section-row"> - <div class="section-label">$_("Memory")</div> - <div class="section-value"> - <div id="container-chart-memory" class="inline-block"></div> - </div> - </div> - <div class="section-row"> - <div class="section-label">$_("Disk I/O")</div> - <div class="section-value"> - <div id="container-chart-disk-io" class="inline-block"></div> - </div> - </div> - <div class="section-row"> - <div class="section-label">$_("Network I/O")</div> - <div class="section-value"> - <div id="container-chart-network-io" class="inline-block"></div> - </div> + <div class="col-md-3"> + <div id="memory-dashboard"> + <h3 class="section-label">$_("Memory")</h3> + <div class="section-value"> + <div id="container-chart-memory" class="inline-block"></div> </div> </div> </div> - <div id="software-update-section" class="host-section hidden"> - <h3 class="section-header" - aria-controls="content-software-update"> - $_("Software Updates") - </h3> - <div id="content-software-update" class="section-content"> - <div class="section-row"> - <div class="section-value"> - <div id="software-updates-grid-container"></div> - <div id="software-updates-progress-container" class="hidden"> - <label for="software-updates-progress-textarea">$_("Update Progress")</label> - <textarea id="software-updates-progress-textarea" readonly></textarea> - </div> - </div> + <div class="col-md-3"> + <div id="disk-dashboard"> + <h3 class="section-label">$_("Disk I/O")</h3> + <div class="section-value"> + <div id="container-chart-disk-io" class="inline-block"></div> </div> </div> </div> - <div id="repositories-section" class="host-section hidden"> - <h3 class="section-header" - aria-controls="content-repositories"> - $_("Repositories") - </h3> - <div id="content-repositories" class="section-content"> - <div class="section-row"> - <div class="section-value"> - <div id="repositories-grid-container"></div> - </div> + <div class="col-md-3"> + <div id="network-dashboard"> + <h3 class="section-label">$_("Network I/O")</h3> + <div class="section-value"> + <div id="container-chart-network-io" class="inline-block"></div> </div> </div> </div> - <div id="debug-report-section" class="host-section hidden"> - <h3 class="section-header" - aria-controls="content-sys-reports"> - $_("Debug Reports") - </h3> - <div id="content-sys-reports" class="section-content"> - <div class="section-row"> - <div class="section-value"> - <div id="available-reports-grid-container"></div> - </div> + </div> + </div> +</div> +<div class="host-panel"> + <div class="container"> + <div id="host-info-container" class="row"> + <div id="content-sys-info" class="panel panel-default col-md-12"> + <div class="panel-heading"> + <h3 class="panel-title">$_("Basic Information")</h3> + </div> + <div class="panel-body"> + <dl class="basic-information-list"> + <dt>{os_distro}</dt> + <dd>$_("OS Distro")</dd> + <dt>{os_version}</dt> + <dd>$_("OS Version")</dd> + <dt>{os_codename}</dt> + <dd>$_("OS Code Name")</dd> + <dt>{cpu_model}</dt> + <dd>$_("Processor")</dd> + <dt>{cpus}</dt> + <dd>$_("CPU(s)")</dd> + <dt>{memory}</dt> + <dd>$_("Memory")</dd> + </dl> + </div> + </div> + <div id="repositories-section" class="col-md-8 hidden"></div> + <div id="debug-report-section" class="col-md-8 hidden"></div> + </div> + <div class="row"> + <div id="software-update-section" class="panel panel-default col-md-12 hidden"> + <div class="panel-heading"> + <h3 class="panel-title">$_("Software Updates")</h3> + </div> + <div id="content-software-update" class="panel panel-default"> + <div id="software-updates-grid-container"></div> + <div id="software-updates-progress-container" class="hidden"> + <label for="software-updates-progress-textarea">$_("Update Progress")</label> + <textarea id="software-updates-progress-textarea" readonly></textarea> </div> </div> </div> </div> </div> +</div> </script> - +<div id="modalWindow" class="modal fade host-modal" tabindex="-1" role="dialog" aria-labelledby="hostsModalLabel" aria-hidden="true"> +</div> <script type="text/javascript"> kimchi.host_main(); </script> diff --git a/src/wok/plugins/kimchi/ui/pages/report-add.html.tmpl b/src/wok/plugins/kimchi/ui/pages/report-add.html.tmpl index 25bf0a9..8d6fb38 100644 --- a/src/wok/plugins/kimchi/ui/pages/report-add.html.tmpl +++ b/src/wok/plugins/kimchi/ui/pages/report-add.html.tmpl @@ -22,35 +22,25 @@ #silent _ = t.gettext #silent _t = t.gettext <!DOCTYPE html> -<div id="report-add-window" class="window"> - <header> - <h1 class="title h1 grey">$_("Generate a New Debug Report")</h1> - </header> - <div class="content"> - <form id="form-report-add"> - <section class="form-section"> - <h2> - <label for="report-name-textbox">$_("Report Name")</label> - </h2> - <div class="field"> - <input type="text" class="text" id="report-name-textbox" name="name" /> - <span class="icon-info-circled light-grey c1"></span> - <span class="info-add-debug-report"> - $_("The name used to identify the report. If omitted, a name will be chosen based on current time. Name can contain: letters, digits, underscore (\"_\") and hyphen (\"-\").") - </span> - </div> - </section> - </form> - </div> - <footer> - <div class="btn-group"> - <button id="button-report-add" class="btn-normal"><span class="text">$_("Generate")</span></button> - <button id="button-report-cancel" class="btn-normal close" type="button"> - <span calss="text">$_("Cancel")</span> - </button> +<div class="modal-content"> + <div class="modal-header"> + <h4 class="modal-title">$_("Generate a New Debug Report")</h4> + </div> + <div class="modal-body"> + <form id="form-report-add"> + <div class="form-group"> + <label for="report-name-textbox">$_("Report Name")</label> + <input type="text" class="form-control" id="report-name-textbox" name="name" /> + <p class="help-block"><i class="fa fa-info-circle"></i> $_("The name used to identify the report. If omitted, a name will be chosen based on current time. Name can contain: letters, digits, underscore (\"_\") and hyphen (\"-\").") + </p> </div> - </footer> + </form> + </div> + <div class="modal-footer"> + <button type="button" id="button-report-add" class="btn btn-default" data-dismiss="modal">$_("Generate")</button> + <button type="button" id="button-report-cancel" class="btn btn-default" data-dismiss="modal">$_("Cancel")</button> + </div> </div> <script> kimchi.report_add_main(); -</script> +</script> \ No newline at end of file diff --git a/src/wok/plugins/kimchi/ui/pages/report-rename.html.tmpl b/src/wok/plugins/kimchi/ui/pages/report-rename.html.tmpl index 90a0a80..f89da19 100644 --- a/src/wok/plugins/kimchi/ui/pages/report-rename.html.tmpl +++ b/src/wok/plugins/kimchi/ui/pages/report-rename.html.tmpl @@ -22,35 +22,27 @@ #silent _ = t.gettext #silent _t = t.gettext <!DOCTYPE html> -<div id="report-rename-window" class="window"> - <header> - <h1 class="title h1 grey">$_("Rename a Debug Report")</h1> - </header> - <div class="content"> +<div class="modal-content"> + <div class="modal-header"> + <h4 class="modal-title">$_("Rename a Debug Report")</h4> + </div> + <div class="modal-body"> <form id="form-report-rename"> - <section class="form-section"> - <h2> - <label for="report-name-textbox">$_("Report Name")</label> - </h2> - <div class="field"> - <input type="text" class="text" id="report-name-textbox" name="name" /> - <span class="icon-info-circled light-grey c1"></span> - <span class="info-debug-report-rename"> - $_("The name used to identify the report. Name can contain: letters, digits and hyphen (\"-\").") - </span> - </div> - </section> + <div class="form-group"> + <label for="report-name-textbox">$_("Report Name")</label> + <input type="text" class="form-control" id="report-name-textbox" name="name" /> + <p class="help-block"><i class="fa fa-info-circle"></i> $_("The name used to identify the report. Name can contain: letters, digits and hyphen (\"-\").") + </p> + </div> </form> </div> - <footer> - <div class="btn-group"> - <button id="button-report-rename" class="btn-normal"><span class="text">$_("Submit")</span></button> - <button id-"button-report-rename-cancel" class="btn-normal close" type="button"> - <span class="text">$_("Cancel")</span> - </button> - </div> - </footer> + <div class="modal-footer"> + <button type="button" id="button-report-rename" class="btn btn-default" data-dismiss="modal">$_("Submit")</button> + <button type="button" id- "button-report-rename-cancel" class="btn btn-default" type="button" data-dismiss="modal">$_("Cancel") + </button> + </div> </div> <script> kimchi.report_rename_main(); </script> + \ No newline at end of file diff --git a/src/wok/plugins/kimchi/ui/pages/repository-add.html.tmpl b/src/wok/plugins/kimchi/ui/pages/repository-add.html.tmpl index 950252a..6da8c05 100644 --- a/src/wok/plugins/kimchi/ui/pages/repository-add.html.tmpl +++ b/src/wok/plugins/kimchi/ui/pages/repository-add.html.tmpl @@ -21,93 +21,51 @@ #silent t = gettext.translation($lang.domain, $lang.localedir, languages=$lang.lang, fallback=True) #silent _ = t.gettext #silent _t = t.gettext -<div id="repository-add-window" class="window"> - <form id="form-repository-add"> - <header class="window-header"> - <h1 class="title h1 grey">$_("Add a Repository")</h1> - </header> - <section> - <div class="content"> - <div class="form-section yum"> - <h2>$_("Identifier")</h2> - <div class="field"> - <div class="textbox-wrapper"> - <input type="text" class="text" name="repo_id" /> - </div> - <div class="icon-info-circled light-grey c1 help-inline"></div> - <p class="text-help help-inline"> - $_("Single word, unique identifier for the repository.") +<div class="modal-content"> + <div class="modal-header"> + <h4 class="modal-title">$_("Add a Repository")</h4> + </div> + <div class="modal-body"> + <form id="form-repository-add"> + <div class="form-group yum"> + <label for="repo_id">$_("Identifier")</label> + <input type="text" class="form-control" name="repo_id" /> + <p class="help-block"><i class="fa fa-info-circle"></i> $_("Single word, unique identifier for the repository.") </p> - </div> </div> - <section class="form-section yum"> - <h2>$_("Name")</h2> - <div class="field"> - <div class="textbox-wrapper"> - <input type="text" class="text" name="config[repo_name]" /> - </div> - <div class="icon-info-circled light-grey c1 help-inline"></div> - <p class="text-help help-inline"> - $_("Textual name for the repository.") + <div class="form-group yum"> + <label for="repo_name">$_("Name")</label> + <input type="text" class="form-control" id="repo_name" name="config[repo_name]" /> + <p class="help-block"><i class="fa fa-info-circle"></i> $_("Textual name for the repository.") </p> - </div> - </section> - <section class="form-section"> - <h2>$_("URL")<span class="required" role="presentation" title='$_("Required Field")'>*</span></h2> - <div class="field"> - <div class="textbox-wrapper"> - <input type="text" class="text required" name="baseurl" /> - </div> - <div class="icon-info-circled light-grey c1 help-inline"></div> - <p class="text-help help-inline"> - $_("URL to the repository. Supported protocols are http, ftp, and file.") - </p> - </div> - <div class="field yum"> - <p class="yum"> - <input type="checkbox" name="isMirror" value="true" id="isMirror" /> - <label id="isMirrorLabel" for="isMirror">$_("Repository is a mirror")</label> - </p> - </div> - </section> - <section class="form-section repository-dist deb"> - <h2>$_("Distribution")</h2> - <div class="field"> - <div class="textbox-wrapper"> - <input type="text" class="text" name="config[dist]" /> - </div> - <div class="icon-info-circled light-grey c1 help-inline"></div> - <p class="text-help help-inline"> - $_("Distribution of the DEB repository.") - </p> - </div> - </section> - <section class="form-section repository-comps deb"> - <h2>$_("Components")</h2> - <div class="field"> - <div class="textbox-wrapper"> - <input type="text" class="text" name="config[comps]" /> - </div> - <div class="icon-info-circled light-grey c1 help-inline"></div> - <p class="text-help help-inline"> - $_("List of components in DEB repository.") - </p> - </div> - </section> - </div> - </section> - <footer> - <div class="btn-group"> - <button type="submit" id="button-repository-add" class="btn-normal" disabled="disabled"> - <span class="text">$_("Add")</span> - </button> - <button type="button" id="button-repository-close" class="btn-normal close"> - <span class="text">$("Cancel")</span> - </button> - </div> - </footer> - </form> + </div> + <div class="form-group"> + <label for="baseurl">$_("URL")<span class="required" role="presentation" title='$_("Required Field")'>*</span></label> + <input type="text" class="form-control required" id="baseurl" name="baseurl" /> + <p class="help-block"><i class="fa fa-info-circle"></i> $_("URL to the repository. Supported protocols are http, ftp, and file.")</p> + </div> + <div class="checkbox yum"> + <label id="isMirrorLabel" for="isMirror"> + <input type="checkbox" name="isMirror" value="true" id="isMirror" /> $_("Repository is a mirror")</label> + </div> + <div class="form-group repository-dist deb"> + <label>$_("Distribution")</label> + <input type="text" class="form-control" name="config[dist]" /> + <p class="help-block"><i class="fa fa-info-circle"></i> $_("Distribution of the DEB repository.")</p> + </div> + <div class="form-group repository-comps deb"> + <label>$_("Components")</label> + <input type="text" class="form-control" name="config[comps]" /> + <p class="help-block"><i class="fa fa-info-circle"></i> $_("List of components in DEB repository.")</p> + </div> + </form> + </div> + <div class="modal-footer"> + <button type="submit" id="button-repository-add" class="btn btn-default" disabled="disabled">$_("Add")</button> + <button type="button" id="button-repository-close" data-dismiss="modal" class="btn btn-default">$("Cancel")</button> + </div> </div> <script> kimchi.repository_add_main(); </script> + \ No newline at end of file diff --git a/src/wok/plugins/kimchi/ui/pages/repository-edit.html.tmpl b/src/wok/plugins/kimchi/ui/pages/repository-edit.html.tmpl index e5a3cfb..33e5eee 100644 --- a/src/wok/plugins/kimchi/ui/pages/repository-edit.html.tmpl +++ b/src/wok/plugins/kimchi/ui/pages/repository-edit.html.tmpl @@ -21,97 +21,57 @@ #silent t = gettext.translation($lang.domain, $lang.localedir, languages=$lang.lang, fallback=True) #silent _ = t.gettext #silent _t = t.gettext - -<div id="repository-edit-window" class="window"> - <form id="form-repository-edit"> - <header> - <h1 class="title h1 grey">$_("Edit Repository")</h1> - </header> - <div class="content"> - <section id="form-repository-edit"> - <fieldset class="repository-edit-fieldset"> - <div class="repository-id yum"> - <div class="repository-edit-wrapper-label"> - <label for="repository-edit-id-textbox">$_("ID")</label> - </div> - <div class="repository-edit-wrapper-controls"> - <input id="repository-edit-id-textbox" name="repo_id" type="text" disabled="disabled" readonly="readonly"/> - </div> - </div> - <div class="repository-name yum"> - <div class="repository-edit-wrapper-label"> - <label for="repository-edit-name-textbox">$_("Name")</label> - </div> - <div class="repository-edit-wrapper-controls"> - <input id="repository-edit-name-textbox" class="yum" name="config[repo_name]" type="text" /> - </div> - </div> - <div class="repository-url"> - <div class="repository-edit-wrapper-label"> - <label for="repository-edit-baseurl-textbox">$_("URL")</label> - </div> - <div class="repository-edit-wrapper-controls"> - <input id="repository-edit-baseurl-textbox" name="baseurl" type="text" /> - </div> - </div> - <div class="repository-dist deb"> - <div class="repository-edit-wrapper-label"> - <label for="repository-edit-urlargs-textbox">$_("Distribution")</label> - </div> - <div class="repository-edit-wrapper-controls"> - <input id="repository-edit-urlargs-textbox" class="deb" name="config[dist]" type="text" /> - </div> - </div> - <div class="repository-mirrorlist yum"> - <div class="repository-edit-wrapper-label"> - <label for="repository-edit-urlargs-textbox">$_("Mirror List URL")</label> - </div> - <div class="repository-edit-wrapper-controls"> - <input id="repository-edit-urlargs-textbox" class="yum" name="config[mirrorlist]" type="text" /> - </div> - </div> - <div class="repository-comps deb"> - <div class="repository-edit-wrapper-label"> - <label for="repository-edit-urlargs-textbox">$_("Components")</label> - </div> - <div class="repository-edit-wrapper-controls"> - <input id="repository-edit-urlargs-textbox" class="deb" name="config[comps]" type="text" /> - </div> - </div> - <div class="repository-gpgkey yum"> - <div class="repository-edit-wrapper-label"> - <label for="repository-edit-gpgkey-textbox">$_("GPG Key")</label> - </div> - <div class="repository-edit-wrapper-controls"> - <input id="repository-edit-gpgkey-textbox" class="yum" name="config[gpgkey]" type="text" /> - </div> - </div> - <div class="repository-gpgcheck yum"> - <div class="repository-edit-wrapper-label"> - <label>$_("GPG Check")</label> - </div> - <div class="repository-edit-wrapper-controls"> - <input id="repository-edit-gpgcheck-radio-true" class="yum" name="config[gpgcheck]" type="radio" value="true" /> - <label for="repository-edit-gpgcheck-radio-true">$_("Yes")</label> - <input id="repository-edit-gpgcheck-radio-false" class="yum" name="config[gpgcheck]" type="radio" value="false" /> - <label for="repository-edit-gpgcheck-radio-false">$_("No")</label> - </div> - </div> - </fieldset> - </section> - </div> - <footer> - <div class="btn-group"> - <button type="submit" id="repository-edit-button-save" class="btn-normal"> - <span class="text">$_("Save")</span> - </button> - <button type="button" id="repository-edit-button-cancel" class="close btn-normal"> - <span class="text">$_("Cancel")</span> - </button> +<div class="modal-content"> + <div class="modal-header"> + <h4 class="modal-title">$_("Edit Repository")</h4> + </div> + <div class="modal-body"> + <form id="form-repository-edit"> + <div class="form-group repository-id yum"> + <label for="repository-edit-id-textbox">$_("ID")</label> + <input id="repository-edit-id-textbox" class="form-control" name="repo_id" type="text" disabled="disabled" readonly="readonly" /> </div> - </footer> - </form> + <div class="form-group repository-name yum"> + <label for="repository-edit-name-textbox">$_("Name")</label> + <input id="repository-edit-name-textbox" class="form-control yum" name="config[repo_name]" type="text" /> + </div> + <div class="form-group repository-url"> + <label for="repository-edit-baseurl-textbox">$_("URL")</label> + <input id="repository-edit-baseurl-textbox" class="form-control" name="baseurl" type="text" /> + </div> + <div class="form-group repository-dist deb"> + <label for="repository-edit-urlargs-textbox">$_("Distribution")</label> + <input id="repository-edit-urlargs-textbox" class="form-control deb" name="config[dist]" type="text" /> + </div> + <div class="form-group repository-mirrorlist yum"> + <label for="repository-edit-urlargs-textbox">$_("Mirror List URL")</label> + <input id="repository-edit-urlargs-textbox" class="form-control yum" name="config[mirrorlist]" type="text" /> + </div> + <div class="form-group repository-comps deb"> + <label for="repository-edit-urlargs-textbox">$_("Components")</label> + <input id="repository-edit-urlargs-textbox" class="form-control deb" name="config[comps]" type="text" /> + </div> + <div class="form-group repository-gpgkey yum"> + <label for="repository-edit-gpgkey-textbox">$_("GPG Key")</label> + <input id="repository-edit-gpgkey-textbox" class="form-control yum" name="config[gpgkey]" type="text" /> + </div> + <div class="form-group repository-gpgcheck yum"> + <label>$_("GPG Check")</label> + <label for="repository-edit-gpgcheck-radio-true" class="radio inline control-label"> + <input id="repository-edit-gpgcheck-radio-true" class="yum" name="config[gpgcheck]" type="radio" value="true" /> $_("Yes") + </label> + <label for="repository-edit-gpgcheck-radio-false" class="radio inline control-label"> + <input id="repository-edit-gpgcheck-radio-false" class="yum" name="config[gpgcheck]" type="radio" value="false" /> $_("No") + </label> + </div> + </form> + </div> + <div class="modal-footer"> + <button type="submit" id="repository-edit-button-save" class="btn btn-default">$_("Save")</button> + <button type="button" id="repository-edit-button-cancel" class="btn btn-default">$_("Cancel")</button> + </div> </div> <script type="text/javascript"> kimchi.repository_edit_main(); </script> + \ No newline at end of file diff --git a/ui/css/src/modules/_host.scss b/ui/css/src/modules/_host.scss index 5c2d9f6..7e4dba0 100644 --- a/ui/css/src/modules/_host.scss +++ b/ui/css/src/modules/_host.scss @@ -90,7 +90,8 @@ .wok-list-content { height: 517px; - overflow-x: auto; + overflow-x: hidden; + overflow-y: auto; } .dropdown.menu-flat { @@ -109,7 +110,8 @@ .basic-information-list { height: 517px; - overflow-x: auto; + overflow-x: hidden; + overflow-y: auto; margin: 0; @extend .row; // Extending bootstrap .row clearfix util -- 1.9.3