[Kimchi-devel] [PATCH 4/4] [UI] Integrate Repositories Management into Host Tab

Integrated repositories management into host tab. Signed-off-by: Hongliang Wang <hlwang(a)linux.vnet.ibm.com&gt; --- ui/css/theme-default/host.css | 44 +++++++++++++++ ui/js/src/kimchi.host.js | 126 ++++++++++++++++++++++++++++++++++++++++++ ui/pages/tabs/host.html.tmpl | 13 +++++ 3 files changed, 183 insertions(+) diff --git a/ui/css/theme-default/host.css b/ui/css/theme-default/host.css index 470ed1b..a1964aa 100644 --- a/ui/css/theme-default/host.css +++ b/ui/css/theme-default/host.css @@ -224,3 +224,47 @@ width: 300px; } /* End of Debug Report */ + +/* Repository */ +.host-panel #repositories-grid { + border-color: #ddd; + height: 300px; + width: 850px; +} + +.repository-rowno { + width: 30px; +} + +.repository-id { + width: 100px; +} + +.repository-name { + width: 100px; +} + +.repository-baseurl { + width: 200px; +} + +.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 7974054..57117a9 100644 --- a/ui/js/src/kimchi.host.js +++ b/ui/js/src/kimchi.host.js @@ -133,6 +133,129 @@ 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['KCHREPO6003M'], + toolbarButtons: [{ + id: repositoriesGridID + '-add-button', + label: i18n['KCHREPO6012M'], + onClick: function(event) { + kimchi.window.open('repository-add.html'); + } + }, { + id: repositoriesGridID + '-edit-button', + 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', + 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) { + $('#' + 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['KCHREPO6004M'], + 'class': 'repository-id' + }, { + name: 'repo_name', + label: i18n['KCHREPO6005M'], + 'class': 'repository-name' + }, { + name: 'baseurl', + label: i18n['KCHREPO6006M'], + 'class': 'repository-baseurl' + }, { + name: 'is_mirror', + label: i18n['KCHREPO6007M'], + 'class': 'repository-ismirror' + }, { + name: 'url_args', + label: i18n['KCHREPO6008M'], + 'class': 'repository-urlargs' + }, { + name: 'enabled', + label: i18n['KCHREPO6009M'], + 'class': 'repository-enabled' + }, { + name: 'gpgcheck', + label: i18n['KCHREPO6010M'], + 'class': 'repository-gpgcheck' + }, { + name: 'gpgkey', + label: i18n['KCHREPO6011M'], + 'class': 'repository-gpgkey' + }], + data: repositories + }); + kimchi.topic('kimchi/repositoryAdded').subscribe(listRepositories); + kimchi.topic('kimchi/repositoryUpdated').subscribe(listRepositories); + kimchi.topic('kimchi/repositoryDeleted').subscribe(listRepositories); + }; + + 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); + } + }); + + $('#' + repositoriesGridID + '-remove-button') + .prop('disabled', true); + $('#' + repositoriesGridID + '-edit-button') + .prop('disabled', true); + }; + var shutdownButtonID = '#host-button-shutdown'; var restartButtonID = '#host-button-restart'; var shutdownHost = function(params) { @@ -198,6 +321,8 @@ kimchi.host_main = function() { $('#debug-report-section').removeClass('hidden'); listDebugReports(); }); + + listRepositories(); }; kimchi.topic('kimchi/debugReportAdded').subscribe(function(params) { @@ -469,5 +594,6 @@ kimchi.host_main = function() { delete kimchi.hostTimer; } reportGrid && reportGrid.destroy(); + repositoriesGrid && repositoriesGrid.destroy(); }); }; diff --git a/ui/pages/tabs/host.html.tmpl b/ui/pages/tabs/host.html.tmpl index 23b9853..b34a351 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"> -- 1.8.1.4