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

[Hongliang Wang]

Integrated repositories management into host tab.

Signed-off-by: Hongliang Wang <hlwang at linux.vnet.ibm.com>
---
 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