[Kimchi-devel] [WIP PATCH 2/2] Host Repositories Management UI

Repos manage. Signed-off-by: Hongliang Wang <hlwang(a)linux.vnet.ibm.com&gt; --- 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(a)linux.vnet.ibm.com&gt; + * + * 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(a)linux.vnet.ibm.com&gt; + * + * 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(a)linux.vnet.ibm.com&gt; + * + * 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