[Kimchi-devel] [PATCH v3 5/5] [UI] Repository Management - Integrate into Host Tab
Adam King
rak at linux.vnet.ibm.com
Thu Mar 13 20:09:40 UTC 2014
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:
> 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',
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
that code.
> + 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
that code.
> + 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
that code.
> + 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
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 at linux.vnet.ibm.com>
IBM CSI
More information about the Kimchi-devel
mailing list