[Kimchi-devel] [WIP PATCH 2/2] Host Repositories Management UI
Hongliang Wang
hlwang at linux.vnet.ibm.com
Mon Dec 30 07:57:39 UTC 2013
Repos manage.
Signed-off-by: Hongliang Wang <hlwang at linux.vnet.ibm.com>
---
ui/css/theme-default/host.css | 24 +++++++++
ui/css/theme-default/repository-edit.css | 29 +++++++++++
ui/js/src/kimchi.api.js | 33 ++++++++++++
ui/js/src/kimchi.host.js | 89 ++++++++++++++++++++++++++++++++
ui/js/src/kimchi.repository_edit_main.js | 62 ++++++++++++++++++++++
ui/pages/i18n.html.tmpl | 9 ++++
ui/pages/repository-edit.html.tmpl | 66 +++++++++++++++++++++++
ui/pages/tabs/host.html.tmpl | 23 +++++++--
8 files changed, 330 insertions(+), 5 deletions(-)
create mode 100644 ui/css/theme-default/repository-edit.css
create mode 100644 ui/js/src/kimchi.repository_edit_main.js
create mode 100644 ui/pages/repository-edit.html.tmpl
diff --git a/ui/css/theme-default/host.css b/ui/css/theme-default/host.css
index 782758d..c08b56e 100644
--- a/ui/css/theme-default/host.css
+++ b/ui/css/theme-default/host.css
@@ -241,3 +241,27 @@
width: 300px;
}
/* End of Debug Report */
+
+/* Repository */
+.host-panel #repositories-grid {
+ border-color: #ddd;
+ height: 300px;
+ width: 820px;
+}
+
+.repository-rowno {
+ width: 30px;
+}
+
+.repository-id {
+ width: 200px;
+}
+
+.repository-name {
+ width: 200px;
+}
+
+.repository-baseurl {
+ width: 350px;
+}
+/* End of Repository */
diff --git a/ui/css/theme-default/repository-edit.css b/ui/css/theme-default/repository-edit.css
new file mode 100644
index 0000000..5fe925f
--- /dev/null
+++ b/ui/css/theme-default/repository-edit.css
@@ -0,0 +1,29 @@
+/*
+ * Project Kimchi
+ *
+ * Copyright IBM, Corp. 2013
+ *
+ * Authors:
+ * Hongliang Wang <hlwang at linux.vnet.ibm.com>
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+#repository-edit-window {
+ height: 380px;
+ width: 420px;
+}
+
+#repository-edit-window .textbox-wrapper input {
+ box-sizing: border-box;
+ width: 100%;
+}
diff --git a/ui/js/src/kimchi.api.js b/ui/js/src/kimchi.api.js
index 3bbe2a4..6d7fd0f 100644
--- a/ui/js/src/kimchi.api.js
+++ b/ui/js/src/kimchi.api.js
@@ -758,5 +758,38 @@ var kimchi = {
error : err
});
*/
+ },
+
+ deleteRepository : function(repository, suc, err) {
+ suc();
+/*
+ kimchi.requestJSON({
+ url : kimchi.url + 'repositories/' + encodeURIComponent(repository),
+ type : 'DELETE',
+ contentType : 'application/json',
+ dataType : 'json',
+ success : suc,
+ error : err
+ });
+*/
+ },
+
+ listRepositories : function(suc, err) {
+ suc([{
+ repo_id: 'rhel6.4',
+ repo_name: 'RHEL 6.4',
+ baseurl: 'http://redhat.com/rhel6.4'
+ }]);
+/*
+ kimchi.requestJSON({
+ url : kimchi.url + 'repositories',
+ type : 'GET',
+ contentType : 'application/json',
+ dataType : 'json',
+ resend: true,
+ success : suc,
+ error : err
+ });
+*/
}
};
diff --git a/ui/js/src/kimchi.host.js b/ui/js/src/kimchi.host.js
index 0bcdf80..93fa834 100644
--- a/ui/js/src/kimchi.host.js
+++ b/ui/js/src/kimchi.host.js
@@ -131,6 +131,93 @@ kimchi.host_main = function() {
});
};
+ var repositoriesGridID = 'repositories-grid';
+ var repositoriesGrid = null;
+ var initRepositoriesGrid = function(repositories) {
+ repositoriesGrid = new kimchi.widget.Grid({
+ container: 'repositories-grid-container',
+ id: repositoriesGridID,
+ title: i18n['msg.host.repositories.title'],
+ toolbarButtons: [{
+ id: repositoriesGridID + '-add-button',
+ label: i18n['msg.host.repositories.add'],
+ disabled: true
+ }, {
+ id: repositoriesGridID + '-edit-button',
+ label: i18n['msg.host.repositories.edit'],
+ disabled: true,
+ onClick: function(event) {
+ kimchi.window.open('repository-edit.html');
+ }
+ }, {
+ id: repositoriesGridID + '-remove-button',
+ label: i18n['msg.host.repositories.remove'],
+ disabled: true,
+ onClick: function(event) {
+ var repository = repositoriesGrid.getSelected();
+ if(!repository) {
+ return;
+ }
+
+ var settings = {
+ title : i18n['msg.host.repositories.confirm.title'],
+ content : i18n['msg.host.repositories.confirm.content'],
+ confirm : i18n['msg.confirm'],
+ cancel : i18n['msg.cancel']
+ };
+
+ kimchi.confirm(settings, function() {
+ kimchi.deleteRepository({
+ name: repository['name']
+ }, function(result) {
+ listRepositories();
+ }, function(error) {
+ });
+ });
+ }
+ }],
+ onRowSelected: function(row) {
+ $('#' + repositoriesGridID + '-remove-button')
+ .prop('disabled', false);
+ $('#' + repositoriesGridID + '-edit-button')
+ .prop('disabled', false);
+ },
+ frozenFields: [{
+ name: 'rowno',
+ label: ' ',
+ 'class': 'repository-rowno'
+ }],
+ fields: [{
+ name: 'repo_id',
+ label: i18n['msg.host.repositories.id'],
+ 'class': 'repository-id'
+ }, {
+ name: 'repo_name',
+ label: i18n['msg.host.repositories.name'],
+ 'class': 'repository-name'
+ }, {
+ name: 'baseurl',
+ label: i18n['msg.host.repositories.baseurl'],
+ 'class': 'repository-baseurl'
+ }],
+ data: repositories
+ });
+ };
+
+ var listRepositories = function() {
+ kimchi.listRepositories(function(repositories) {
+ $.each(repositories, function(i, item) {
+ repositories[i]['rowno'] = i + 1;
+ });
+ if(repositoriesGrid) {
+ repositoriesGrid.setData(repositories);
+ }
+ else {
+ initRepositoriesGrid(repositories);
+ }
+ });
+ };
+
var shutdownButtonID = '#host-button-shutdown';
var restartButtonID = '#host-button-restart';
var shutdownHost = function(params) {
@@ -197,6 +284,8 @@ kimchi.host_main = function() {
listDebugReports();
});
+ listRepositories();
+
$('#button-edit-hosts').on('click', function(event) {
kimchi.window.open('hosts.html');
});
diff --git a/ui/js/src/kimchi.repository_edit_main.js b/ui/js/src/kimchi.repository_edit_main.js
new file mode 100644
index 0000000..29a1644
--- /dev/null
+++ b/ui/js/src/kimchi.repository_edit_main.js
@@ -0,0 +1,62 @@
+/*
+ * Project Kimchi
+ *
+ * Copyright IBM, Corp. 2013
+ *
+ * Authors:
+ * Hongliang Wang <hlwang at linux.vnet.ibm.com>
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+kimchi.repository_edit_main = function() {
+
+ var editForm = $('#form-repository-edit');
+ var saveButton = $('#button-repository-save');
+
+ var nameBox = $('input[name="name"]', editForm);
+ var urlBox = $('input[name="baseurl"]', editForm);
+
+ var validateForm = function(event) {
+ var valid = $(nameBox).val() !== '' && $(urlBox).val() !== '';
+ $(saveButton).prop('disabled', !valid);
+ return valid;
+ };
+
+ $(nameBox).on('change', validateForm);
+ $(urlBox).on('change', validateForm);
+
+ var editHost = function(event) {
+ var valid = validateForm();
+ if(!valid) {
+ return false;
+ }
+
+ var formData = $(editForm).serializeObject();
+
+ kimchi.updateHost(formData, function() {
+ kimchi.topic('repositoryUpdated').publish();
+ kimchi.window.close();
+ }, function(jqXHR, textStatus, errorThrown) {
+ var reason = jqXHR &&
+ jqXHR['responseJSON'] &&
+ jqXHR['responseJSON']['reason'];
+ reason = reason ? ': ' + reason : '';
+ kimchi.message.error(i18n['msg.host.repositories.failed.edit'] + reason);
+ });
+
+ return false;
+ };
+
+ $(editForm).on('submit', editHost);
+ $(saveButton).on('click', editHost);
+};
diff --git a/ui/pages/i18n.html.tmpl b/ui/pages/i18n.html.tmpl
index 475629e..48fc631 100644
--- a/ui/pages/i18n.html.tmpl
+++ b/ui/pages/i18n.html.tmpl
@@ -78,6 +78,15 @@ var i18n = {
'msg.host.debugreport.rename': "$_("Rename")",
'msg.host.debugreport.remove': "$_("Remove")",
'msg.host.debugreport.download': "$_("Download")",
+ 'msg.host.repositories.confirm.title': "$_("Confirm")",
+ 'msg.host.repositories.confirm.content': "$_("Repository will be removed permanently and can't be recovered. Do you want to continue?")",
+ 'msg.host.repositories.title': "$_("Repositories")",
+ 'msg.host.repositories.id': "$_("Repos ID")",
+ 'msg.host.repositories.name': "$_("Repos Name")",
+ 'msg.host.repositories.baseurl': "$_("Base URL")",
+ 'msg.host.repositories.add': "$_("Add")",
+ 'msg.host.repositories.edit': "$_("Edit")",
+ 'msg.host.repositories.remove': "$_("Remove")",
'msg.host.shutdown.vmrunning': "$_("Some VM(s) are running!")",
'msg.host.shutdown.confirm.title': "$_("Confirm")",
'msg.host.shutdown.confirm.content': "$_("Shutting down or restarting host will cause unsaved work lost. Continue to shut down/restarting?")",
diff --git a/ui/pages/repository-edit.html.tmpl b/ui/pages/repository-edit.html.tmpl
new file mode 100644
index 0000000..17fb780
--- /dev/null
+++ b/ui/pages/repository-edit.html.tmpl
@@ -0,0 +1,66 @@
+#*
+ * Project Kimchi
+ *
+ * Copyright IBM, Corp. 2013
+ *
+ * Authors:
+ * Hongliang Wang <hlwang at linux.vnet.ibm.com>
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *#
+#unicode UTF-8
+#import gettext
+#from kimchi.cachebust import href
+#silent t = gettext.translation($lang.domain, $lang.localedir, languages=$lang.lang)
+#silent _ = t.gettext
+#silent _t = t.gettext
+<div id="repository-edit-window" class="window">
+ <form id="form-repository-edit">
+ <header class="window-header">
+ <h1 class="title">$_("Edit a Repository")</h1>
+ <div class="close">X</div>
+ </header>
+ <div class="content">
+ <section class="form-section">
+ <h2>1. $_("Repository Name")</h2>
+ <div class="field">
+ <p class="text-help">
+ $_("The name used to identify the repository.")
+ </p>
+ <div class="textbox-wrapper">
+ <input type="text" class="text" name="name" />
+ </div>
+ </div>
+ </section>
+ <section class="form-section">
+ <h2>2. $_("Base URL")</h2>
+ <div class="field">
+ <p class="text-help">
+ $_("The URL of the repository base URL starting with: http://, ftp://, or file:///.")
+ </p>
+ <div class="textbox-wrapper">
+ <input type="text" class="text" name="baseurl" />
+ </div>
+ </div>
+ </section>
+ </div>
+ <footer>
+ <div class="btn-group">
+ <button type="submit" id="button-repository-save" class="btn-normal" disabled="disabled"><span class="text">$_("Save")</span></button>
+ </div>
+ </footer>
+ </form>
+</div>
+<script>
+ kimchi.repository_edit_main();
+</script>
diff --git a/ui/pages/tabs/host.html.tmpl b/ui/pages/tabs/host.html.tmpl
index 2ded6d4..d240774 100644
--- a/ui/pages/tabs/host.html.tmpl
+++ b/ui/pages/tabs/host.html.tmpl
@@ -120,6 +120,19 @@
</div>
</div>
</div>
+ <div id="repositories-section" class="host-section">
+ <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>
+ </div>
+ </div>
<div id="debug-report-section" class="host-section hidden">
<h3 class="section-header"
aria-controls="content-sys-reports">
@@ -141,19 +154,19 @@
<div class="other-servers-title">Other Servers</div>
<ul class="other-servers-list">
<li>
- <a href="http://9.123.141.113:8000">RHEL6.4</a>
+ <a href="http://9.123.141.113:8000" target="_blank">RHEL6.4</a>
</li>
<li>
- <a href="http://9.123.141.113:8000">RHEL6.5</a>
+ <a href="http://9.123.141.113:8000" target="_blank">RHEL6.5</a>
</li>
<li>
- <a href="http://9.123.141.113:8000">Fedora 18</a>
+ <a href="http://9.123.141.113:8000" target="_blank">Fedora 18</a>
</li>
<li>
- <a href="http://9.123.141.113:8000">Fedora 19</a>
+ <a href="http://9.123.141.113:8000" target="_blank">Fedora 19</a>
</li>
<li>
- <a href="http://9.123.141.113:8000" title="Fedora with very very very very very long name">Fedora with very very very very very long name</a>
+ <a href="http://9.123.141.113:8000" target="_blank" title="Fedora with very very very very very long name">Fedora with very very very very very long name</a>
</li>
</ul>
</div>
--
1.8.1.4
More information about the Kimchi-devel
mailing list