Integrate add/enable/disalbe/edit/remove a repository feature into host tab.
Signed-off-by: Hongliang Wang <hlwang@linux.vnet.ibm.com> --- po/POTFILES.in | 2 + ui/css/theme-default/host.css | 40 ++++++++++ ui/js/src/kimchi.host.js | 170 ++++++++++++++++++++++++++++++++++++++++++ ui/pages/tabs/host.html.tmpl | 13 ++++ 4 files changed, 225 insertions(+)
diff --git a/po/POTFILES.in b/po/POTFILES.in index 4ff7eaa..955a675 100644 --- a/po/POTFILES.in +++ b/po/POTFILES.in @@ -7,6 +7,8 @@ ui/pages/i18n.html.tmpl ui/pages/kimchi-ui.html.tmpl ui/pages/login-window.html.tmpl ui/pages/report-add.html.tmpl +ui/pages/repository-add.html.tmpl +ui/pages/repository-edit.html.tmpl ui/pages/storagepool-add.html.tmpl ui/pages/tabs/guests.html.tmpl ui/pages/tabs/host.html.tmpl diff --git a/ui/css/theme-default/host.css b/ui/css/theme-default/host.css index 0f8b941..98c63da 100644 --- a/ui/css/theme-default/host.css +++ b/ui/css/theme-default/host.css @@ -253,3 +253,43 @@ width: 846px; } /* End of Software Updates */ + +/* Repository */ +.host-panel #repositories-grid { + border-color: #ddd; + height: 200px; + width: 850px; +} + +.repository-id { + width: 70px; +} + +.repository-name { + width: 180px; +} + +.repository-baseurl { + width: 300px; +} + +.repository-ismirror { + width: 60px; +} + +.repository-urlargs { + width: 70px; +} + +.repository-enabled { + width: 60px; +} + +.repository-gpgcheck { + width: 60px; +} + +.repository-gpgkey { + width: 300px; +} +/* End of Repository */ diff --git a/ui/js/src/kimchi.host.js b/ui/js/src/kimchi.host.js index 6300f37..bb07333 100644 --- a/ui/js/src/kimchi.host.js +++ b/ui/js/src/kimchi.host.js @@ -22,6 +22,157 @@ kimchi.host_main = function() { $(header).attr('aria-expanded', toExpand ? 'true' : 'false'); };
+ var repositoriesGridID = 'repositories-grid'; + var repositoriesGrid = null; + var initRepositoriesGrid = function(repositories) { + repositoriesGrid = new kimchi.widget.Grid({ + container: 'repositories-grid-container', + id: repositoriesGridID, + title: i18n['KCHREPO6003M'], + toolbarButtons: [{ + id: repositoriesGridID + '-add-button', I'd rather not construct the IDs dynamically. It makes it difficult to take an ID from the DOM inspector and find the code that operates on
+ label: i18n['KCHREPO6012M'], + onClick: function(event) { + kimchi.window.open('repository-add.html'); + } + }, { + id: repositoriesGridID + '-enable-button', I'd rather not construct the IDs dynamically. It makes it difficult to take an ID from the DOM inspector and find the code that operates on
+ label: i18n['KCHREPO6016M'], + disabled: true, + onClick: function(event) { + var repository = repositoriesGrid.getSelected(); + if(!repository) { + return; + } + var name = repository['repo_id']; + var enable = !repository['enabled']; + $(this).prop('disabled', true); + kimchi.enableRepository(name, enable, function() { + kimchi.topic('kimchi/repositoryUpdated').publish(); + }); + } + }, { + id: repositoriesGridID + '-edit-button', I'd rather not construct the IDs dynamically. It makes it difficult to take an ID from the DOM inspector and find the code that operates on
+ label: i18n['KCHREPO6013M'], + disabled: true, + onClick: function(event) { + var repository = repositoriesGrid.getSelected(); + if(!repository) { + return; + } + kimchi.selectedRepository = repository['repo_id']; + kimchi.window.open('repository-edit.html'); + } + }, { + id: repositoriesGridID + '-remove-button', I'd rather not construct the IDs dynamically. It makes it difficult to take an ID from the DOM inspector and find the code that operates on
There are a number of places where we construct the DOM node ID dynamically. While functional, it makes it though to take an ID from the template or DOM inspector and search the code for all the places that ID is used. While functional, I'd prefer we reference the ID statically so its easier to find your way from one part of the implementation to another. Adam On 03/13/2014 05:18 AM, Hongliang Wang wrote: that code. that code. that code. that code.
+ label: i18n['KCHREPO6014M'], + disabled: true, + onClick: function(event) { + var repository = repositoriesGrid.getSelected(); + if(!repository) { + return; + } + + var settings = { + title : i18n['KCHREPO6001M'], + content : i18n['KCHREPO6002M'], + confirm : i18n['KCHAPI6004M'], + cancel : i18n['KCHAPI6003M'] + }; + + kimchi.confirm(settings, function() { + kimchi.deleteRepository( + repository['repo_id'], + function(result) { + kimchi.topic('kimchi/repositoryDeleted').publish(result); + }, function(error) { + } + ); + }); + } + }], + onRowSelected: function(row) { + var repository = repositoriesGrid.getSelected(); + if(!repository) { + return; + } + + $('#' + repositoriesGridID + '-remove-button') + .prop('disabled', false); + $('#' + repositoriesGridID + '-edit-button') + .prop('disabled', false); + + var enabled = repository['enabled']; + $('#' + repositoriesGridID + '-enable-button') + .text(i18n[enabled ? 'KCHREPO6017M' : 'KCHREPO6016M']) + .prop('disabled', false); + }, + frozenFields: [], + fields: [{ + name: 'repo_id', + label: i18n['KCHREPO6004M'], + 'class': 'repository-id' + }, { + name: 'repo_name', + label: i18n['KCHREPO6005M'], + 'class': 'repository-name' + }, { + name: 'enabled', + label: i18n['KCHREPO6009M'], + 'class': 'repository-enabled' + }, { + name: 'baseurl', + label: i18n['KCHREPO6006M'], + makeTitle: true, + 'class': 'repository-baseurl' + }, { + name: 'url_args', + label: i18n['KCHREPO6008M'], + 'class': 'repository-urlargs' + }, { + name: 'is_mirror', + label: i18n['KCHREPO6007M'], + 'class': 'repository-ismirror' + }, { + name: 'gpgcheck', + label: i18n['KCHREPO6010M'], + 'class': 'repository-gpgcheck' + }, { + name: 'gpgkey', + label: i18n['KCHREPO6011M'], + 'class': 'repository-gpgkey' + }], + data: listRepositories + }); + }; + + var listRepositories = function(gridCallback) { + kimchi.listRepositories(function(repositories) { + $.each(repositories, function(i, item) { + repositories[i]['rowno'] = i + 1; + }); + + if($.isFunction(gridCallback)) { + gridCallback(repositories); + } + else { + if(repositoriesGrid) { + repositoriesGrid.setData(repositories); + } + else { + initRepositoriesGrid(repositories); + } + } + }); + + $('#' + repositoriesGridID + '-remove-button') + .prop('disabled', true); + $('#' + repositoriesGridID + '-edit-button') + .prop('disabled', true); + $('#' + repositoriesGridID + '-enable-button') + .prop('disabled', true); + }; + var softwareUpdatesGridID = 'software-updates-grid'; var softwareUpdatesGrid = null; var progressAreaID = 'software-updates-progress-textarea'; @@ -271,6 +422,17 @@ kimchi.host_main = function() { });
kimchi.getCapabilities(function(capabilities) { + if(capabilities['repo_mngt_tool']) { + $('#repository-management-section').removeClass('hidden'); + initRepositoriesGrid(); + kimchi.topic('kimchi/repositoryAdded') + .subscribe(listRepositories); + kimchi.topic('kimchi/repositoryUpdated') + .subscribe(listRepositories); + kimchi.topic('kimchi/repositoryDeleted') + .subscribe(listRepositories); + } + if(capabilities['update_tool']) { $('#software-update-section').removeClass('hidden'); initSoftwareUpdatesGrid(); @@ -552,6 +714,14 @@ kimchi.host_main = function() { delete kimchi.hostTimer; }
+ repositoriesGrid && repositoriesGrid.destroy(); + kimchi.topic('kimchi/repositoryAdded') + .unsubscribe(listRepositories); + kimchi.topic('kimchi/repositoryUpdated') + .unsubscribe(listRepositories); + kimchi.topic('kimchi/repositoryDeleted') + .unsubscribe(listRepositories); + softwareUpdatesGrid && softwareUpdatesGrid.destroy(); kimchi.topic('kimchi/softwareUpdated').unsubscribe(listSoftwareUpdates);
diff --git a/ui/pages/tabs/host.html.tmpl b/ui/pages/tabs/host.html.tmpl index 179deba..4933b31 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="software-update-section" class="host-section hidden"> <h3 class="section-header" aria-controls="content-software-update">
-- Adam King <rak@linux.vnet.ibm.com> IBM CSI