[Kimchi-devel] [PATCH 2/2] Adding new-ui to Hosts tab and modal windows
sguimaraes943 at gmail.com
sguimaraes943 at gmail.com
Thu Oct 15 19:58:55 UTC 2015
From: samhenri <samuel.guimaraes at eldorado.org.br>
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 at eldorado.org.br>
---
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.api.js | 39 ++
src/wok/plugins/kimchi/ui/js/src/kimchi.host.js | 598 +++++++++++----------
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 ++---
13 files changed, 571 insertions(+), 1032 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.api.js b/src/wok/plugins/kimchi/ui/js/src/kimchi.api.js
index c82d040..f5839f1 100644
--- a/src/wok/plugins/kimchi/ui/js/src/kimchi.api.js
+++ b/src/wok/plugins/kimchi/ui/js/src/kimchi.api.js
@@ -884,6 +884,45 @@ var kimchi = {
});
},
+ tailSoftwareUpdateLogs : function(suc, err, progress) {
+ var taskID = -1;
+ var onResponse = function(data) {
+ taskID = data['id'];
+ trackTask();
+ };
+
+ var trackTask = function() {
+ kimchi.getTask(taskID, onTaskResponse, err);
+ };
+
+ var onTaskResponse = function(result) {
+ var taskStatus = result['status'];
+ switch(taskStatus) {
+ case 'running':
+ progress && progress(result);
+ setTimeout(function() {
+ trackTask();
+ }, 1000);
+ break;
+ case 'finished':
+ case 'failed':
+ suc(result);
+ break;
+ default:
+ break;
+ }
+ };
+
+ wok.requestJSON({
+ url : 'plugins/kimchi/host/taillogs',
+ type : "POST",
+ contentType : "application/json",
+ dataType : "json",
+ success : onResponse,
+ error : err
+ });
+ },
+
updateSoftware : function(suc, err, progress) {
var taskID = -1;
var onResponse = function(data) {
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 c3765dc..654df2e 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'
- }, {
- name: 'enabled',
- label: i18n['KCHREPO6009M'],
- 'class': 'repository-enabled'
- }, {
- name: 'baseurl',
- label: i18n['KCHREPO6006M'],
- makeTitle: true,
- 'class': 'repository-baseurl'
- }];
+ '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',
+ 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({
+ repositoriesGrid = new wok.widget.List({
container: 'repositories-grid-container',
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);
@@ -258,16 +266,32 @@ kimchi.host_main = function() {
});
};
+ var startSoftwareUpdateProgress = function() {
+ var progressArea = $('#' + progressAreaID)[0];
+ $('#software-updates-progress-container').removeClass('hidden');
+ $(progressArea).text('');
+ !wok.isElementInViewport(progressArea) &&
+ progressArea.scrollIntoView();
+
+ kimchi.tailSoftwareUpdateLogs(function(result) {
+ reloadProgressArea(result);
+ wok.topic('kimchi/softwareUpdated').publish({
+ result: result
+ });
+ wok.message.warn(i18n['KCHUPD6010M']);
+ }, function(error) {
+ wok.message.error(i18n['KCHUPD6011M']);
+ }, reloadProgressArea);
+ };
+
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);
}
}
@@ -276,7 +300,18 @@ kimchi.host_main = function() {
$(updateButton).prop('disabled', softwareUpdates.length === 0);
}, function(error) {
var message = error && error['responseJSON'] && error['responseJSON']['reason'];
- if($.isFunction(gridCallback)) {
+
+ // cannot get the list of packages because there is another
+ // package manager instance running, so follow that instance updates
+ if (message.indexOf("KCHPKGUPD0005E") !== -1) {
+ startSoftwareUpdateProgress();
+ if ($.isFunction(gridCallback)) {
+ gridCallback([]);
+ }
+ return;
+ }
+
+ if ($.isFunction(gridCallback)) {
gridCallback([]);
}
softwareUpdatesGrid &&
@@ -296,23 +331,25 @@ kimchi.host_main = function() {
});
};
var initReportGrid = function(reports) {
- reportGrid = new wok.widget.Grid({
+ reportGrid = new wok.widget.List({
container: 'available-reports-grid-container',
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;
}
@@ -320,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() {
@@ -342,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);
}
},
@@ -379,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++) {
+ 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']})
+ reports.push({
+ 'name': reportName,
+ 'time': i18n['KCHDR6007M']
+ });
- if(kimchi.trackingTasks.indexOf(tasks[i].id) >= 0) {
+ if (kimchi.trackingTasks.indexOf(tasks[i].id) >= 0) {
continue;
}
@@ -424,29 +468,28 @@ 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');
// Row selection will be cleared so disable buttons here
enableReportButtons(false);
- if(reportGrid) {
+ if (reportGrid) {
reportGrid.setData(allReports);
- }
- else {
+ } else {
initReportGrid(allReports);
}
// 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) {
+ $.each($('td:contains(' + i18n['KCHDR6007M'] + ')', gridElement), function(index, row) {
$(row).parent().addClass('no-hover');
$(row).attr('id', 'id-debug-img');
});
}, function(error) {
- if(error['status'] == 403) {
+ if (error['status'] === 403) {
$('#debug-report-section').addClass('hidden');
return;
}
@@ -458,10 +501,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() {
@@ -470,8 +512,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);
@@ -480,39 +522,30 @@ 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']);
wok.topic('kimchi/repositoryAdded')
@@ -523,7 +556,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')
@@ -533,7 +566,7 @@ kimchi.host_main = function() {
});
}
- if(kimchi.capabilities['system_report_tool']) {
+ if (kimchi.capabilities['system_report_tool']) {
listDebugReports();
wok.topic('kimchi/debugReportAdded')
.subscribe(listDebugReports);
@@ -576,40 +609,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: []
}
}
@@ -618,38 +651,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;
@@ -663,7 +694,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'],
@@ -672,10 +703,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'];
@@ -700,104 +731,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;
}
@@ -825,20 +854,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..3c6eda8 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-4">
+ <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-grid-container" class="col-md-4"></div>
+ <div id="available-reports-grid-container" class="col-md-4"></div>
+ </div>
+ <div class="row">
+ <div id="software-update-section" class="panel panel-default col-md-12">
+ <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
--
1.9.3
More information about the Kimchi-devel
mailing list