[Kimchi-devel] [PATCH v3 5/5] [UI] Repository Management - Integrate into Host Tab

Adam King rak at linux.vnet.ibm.com
Thu Mar 13 19:52:35 UTC 2014


Reviewed-by: Adam King <rak at linux.vnet.ibm.com>

On 03/13/2014 05:18 AM, Hongliang Wang wrote:
> Integrate add/enable/disalbe/edit/remove a repository feature into host tab.
>
> Signed-off-by: Hongliang Wang <hlwang at 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',
> +                label: i18n['KCHREPO6012M'],
> +                onClick: function(event) {
> +                    kimchi.window.open('repository-add.html');
> +                }
> +            }, {
> +                id: repositoriesGridID + '-enable-button',
> +                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',
> +                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) {
> +                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 at linux.vnet.ibm.com>
IBM CSI




More information about the Kimchi-devel mailing list