[Kimchi-devel] [PATCH 3/4] [UI] Add/Edit Repository Support

Repositories management support: 1) Add a repository 2) Edit a repository Signed-off-by: Hongliang Wang <hlwang(a)linux.vnet.ibm.com&gt; --- po/POTFILES.in | 2 + ui/css/theme-default/repository-add.css | 39 ++++++++++ ui/css/theme-default/repository-edit.css | 69 ++++++++++++++++++ ui/js/src/kimchi.repository_add_main.js | 84 +++++++++++++++++++++ ui/js/src/kimchi.repository_edit_main.js | 85 ++++++++++++++++++++++ ui/pages/repository-add.html.tmpl | 104 ++++++++++++++++++++++++++ ui/pages/repository-edit.html.tmpl | 121 +++++++++++++++++++++++++++++++ 7 files changed, 504 insertions(+) create mode 100644 ui/css/theme-default/repository-add.css create mode 100644 ui/css/theme-default/repository-edit.css create mode 100644 ui/js/src/kimchi.repository_add_main.js create mode 100644 ui/js/src/kimchi.repository_edit_main.js create mode 100644 ui/pages/repository-add.html.tmpl create mode 100644 ui/pages/repository-edit.html.tmpl 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/repository-add.css b/ui/css/theme-default/repository-add.css new file mode 100644 index 0000000..2434efd --- /dev/null +++ b/ui/css/theme-default/repository-add.css @@ -0,0 +1,39 @@ +/* + * Project Kimchi + * + * Copyright IBM, Corp. 2013 + * + * Authors: + * Hongliang Wang <hlwang(a)linux.vnet.ibm.com&gt; + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ +#repository-add-window { + height: 680px; + width: 1000px; +} + +#repository-add-window .required { + color: red; + padding-left: 5px; + vertical-align: top; +} + +#repository-add-window .textbox-wrapper input[type="text"] { + box-sizing: border-box; + width: 100%; +} + +#repository-add-window .textbox-wrapper label { + vertical-align: middle; +} diff --git a/ui/css/theme-default/repository-edit.css b/ui/css/theme-default/repository-edit.css new file mode 100644 index 0000000..ee6ad2e --- /dev/null +++ b/ui/css/theme-default/repository-edit.css @@ -0,0 +1,69 @@ +/* + * Project Kimchi + * + * Copyright IBM, Corp. 2013 + * + * Authors: + * Hongliang Wang <hlwang(a)linux.vnet.ibm.com&gt; + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ +#repository-edit-window { + height: 420px; + width: 1000px; +} + +.repository-edit-fieldset { + float: left; + padding: 1em; +} + +.repository-edit-wrapper-label, .repository-edit-wrapper-controls { + display: inline-block; + height: 38px; + line-height: 38px; + margin-top: 5px; + vertical-align: top; +} + +.repository-edit-wrapper-label { + width: 150px; +} + +.repository-edit-wrapper-controls label { + vertical-align: middle; +} + +.repository-edit-wrapper-controls { + width: 300px; +} + +.repository-edit-wrapper-controls input[type="text"] { + font-size: 16px; + height: 38px; + line-height: 38px; + background: #fff; + -webkit-border-radius: 5px; + border-radius: 5px; + box-shadow: 2px 2px 2px #eee inset; + border-top: 1px solid #bbb; + border-left: 1px solid #bbb; + padding: 0 10px; + width: 250px; +} + +.repository-edit-wrapper-controls input[type="text"][disabled] { + color: #bbb; + background-color: #fafafa; + cursor: not-allowed; +} diff --git a/ui/js/src/kimchi.repository_add_main.js b/ui/js/src/kimchi.repository_add_main.js new file mode 100644 index 0000000..75b785e --- /dev/null +++ b/ui/js/src/kimchi.repository_add_main.js @@ -0,0 +1,84 @@ +/* + * Project Kimchi + * + * Copyright IBM, Corp. 2013 + * + * Authors: + * Hongliang Wang <hlwang(a)linux.vnet.ibm.com&gt; + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ +kimchi.repository_add_main = function() { + + var addForm = $('#form-repository-add'); + var addButton = $('#button-repository-add'); + + var nameBox = $('input[name="repo_id"]', addForm); + var urlBox = $('input[name="baseurl"]', addForm); + var isMirrorButton = $('input[name="is_mirror"]', addForm); + var urlArgsBox = $('input[name="url_args"]', addForm); + var gpgkeyBox = $('input[name="gpgkey"]', addForm); + + var validateForm = function(event) { + var valid = $(urlBox).val() !== ''; + $(addButton).prop('disabled', !valid); + return valid; + }; + + $(urlBox).on('input propertychange', validateForm); + + var booleanFields = ['is_mirror']; + + var addRepository = function(event) { + var valid = validateForm(); + if(!valid) { + return false; + } + + var formData = $(addForm).serializeObject(); + for(var p in formData) { + if(formData[p] == '') { + delete formData[p]; + } + } + + $(booleanFields).each(function(i, f) { + switch(formData[f]) { + case 'true': + formData[f] = true; + break; + case 'false': + formData[f] = false; + break; + default: + delete formData[f]; + break; + } + }); + + kimchi.createRepository(formData, function() { + kimchi.topic('kimchi/repositoryAdded').publish(); + kimchi.window.close(); + }, function(jqXHR, textStatus, errorThrown) { + var reason = jqXHR && + jqXHR['responseJSON'] && + jqXHR['responseJSON']['reason']; + reason = reason ? ': ' + reason : ''; + kimchi.message.error(i18n['KCHREPO6015M'] + reason); + }); + + return false; + }; + + $(addForm).on('submit', addRepository); +}; diff --git a/ui/js/src/kimchi.repository_edit_main.js b/ui/js/src/kimchi.repository_edit_main.js new file mode 100644 index 0000000..0ab008e --- /dev/null +++ b/ui/js/src/kimchi.repository_edit_main.js @@ -0,0 +1,85 @@ +/* + * Project Kimchi + * + * Copyright IBM, Corp. 2013 + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ +kimchi.repository_edit_main = function() { + + var editForm = $('#form-repository-edit'); + var saveButton = $('#repository-edit-button-save'); + + kimchi.retrieveRepository(kimchi.selectedRepository, function(repository) { + for(var prop in repository) { + var control = $('input[name="' + prop + '"]', editForm); + switch($(control).attr('type')) { + case 'text': + $(control).val(repository[prop]); + break; + case 'radio': + case 'checkbox': + $(control).each(function(i, c) { + var matched = ('' + repository[prop]) == $(c).val(); + $(c).prop('checked', matched); + }); + break; + default: + break; + } + + } + + $('input', editForm).on('input propertychange', function(event) { + if($(this).val() !== '') { + $(saveButton).prop('disabled', false); + } + }); + }); + + var booleanFields = ['is_mirror', 'gpgcheck']; + + var editRepository = function(event) { + var formData = $(editForm).serializeObject(); + + $(booleanFields).each(function(i, f) { + switch(formData[f]) { + case 'true': + formData[f] = true; + break; + case 'false': + formData[f] = false; + break; + default: + delete formData[f]; + break; + } + }); + + kimchi.updateRepository(kimchi.selectedRepository, formData, function() { + kimchi.topic('kimchi/repositoryUpdated').publish(); + kimchi.window.close(); + }, function(jqXHR, textStatus, errorThrown) { + var reason = jqXHR && + jqXHR['responseJSON'] && + jqXHR['responseJSON']['reason']; + reason = reason ? ': ' + reason : ''; + kimchi.message.error(i18n['KCHREPO6015M'] + reason); + }); + + return false; + }; + + $(editForm).on('submit', editRepository); + $(saveButton).on('click', editRepository); +}; diff --git a/ui/pages/repository-add.html.tmpl b/ui/pages/repository-add.html.tmpl new file mode 100644 index 0000000..5208f50 --- /dev/null +++ b/ui/pages/repository-add.html.tmpl @@ -0,0 +1,104 @@ +#* + * Project Kimchi + * + * Copyright IBM, Corp. 2013 + * + * Authors: + * Hongliang Wang <hlwang(a)linux.vnet.ibm.com&gt; + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + *# +#unicode UTF-8 +#import gettext +#from kimchi.cachebust import href +#silent t = gettext.translation($lang.domain, $lang.localedir, languages=$lang.lang) +#silent _ = t.gettext +#silent _t = t.gettext +<div id="repository-add-window" class="window"> + <form id="form-repository-add"> + <header class="window-header"> + <h1 class="title">$_("Add a Repository")</h1> + <div class="close">X</div> + </header> + <div class="content"> + <section class="form-section"> + <h2>1. $_("Repository Name")</h2> + <div class="field"> + <p class="text-help"> + $_("Unique repository name for each repository, one word.") + </p> + <div class="textbox-wrapper"> + <input type="text" class="text" name="repo_id" /> + </div> + </div> + </section> + <section class="form-section"> + <h2>2. $_("Base URL")<span class="required" role="presentation" title="$_("Required Field")">*</span></h2> + <div class="field"> + <p class="text-help"> + $_("URL to the repodata directory when \"is_mirror\" is false. Otherwise, it can be URL to the mirror system for YUM. Can be an http://, ftp:// or file:// URL.") + </p> + <div class="textbox-wrapper"> + <input type="text" class="text" name="baseurl" /> + </div> + </div> + </section> + <section class="form-section"> + <h2>3. $_("Is Mirror")</h2> + <div class="field"> + <p class="text-help"> + $_("Set the given URI of baseurl as a mirror list, instead of use baseurl in repository configuration.") + </p> + <div class="textbox-wrapper"> + <input type="radio" id="isMirrorRadioTrue" name="is_mirror" value="true" /> + <label for="isMirrorRadioTrue">$_("Yes")</label> + <input type="radio" id="isMirrorRadioFalse" name="is_mirror" value="false" /> + <label for="isMirrorRadioFalse">$_("No")</label> + </div> + </div> + </section> + <section class="form-section"> + <h2>4. $_("URL Args")</h2> + <div class="field"> + <p class="text-help"> + $_("Arguments to be passed to baseurl, like the list of APT repositories provided by the same baseurl.") + </p> + <div class="textbox-wrapper"> + <input type="text" class="text" name="url_args" /> + </div> + </div> + </section> + <section class="form-section"> + <h2>5. $_("GPG Key")</h2> + <div class="field"> + <p class="text-help"> + $_("URL pointing to the ASCII-armored GPG key file for the repository. This option is used if yum needs a public key to verify a package and the required key hasn't been imported into the RPM database.") + </p> + <div class="textbox-wrapper"> + <input type="text" class="text" name="gpgkey" /> + </div> + </div> + </section> + </div> + <footer> + <div class="btn-group"> + <button type="submit" id="button-repository-add" class="btn-normal" disabled="disabled"> + <span class="text">$_("Add")</span> + </button> + </div> + </footer> + </form> +</div> +<script> + kimchi.repository_add_main(); +</script> diff --git a/ui/pages/repository-edit.html.tmpl b/ui/pages/repository-edit.html.tmpl new file mode 100644 index 0000000..cd488d7 --- /dev/null +++ b/ui/pages/repository-edit.html.tmpl @@ -0,0 +1,121 @@ +#* + * Project Kimchi + * + * Copyright IBM, Corp. 2013 + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + *# +#unicode UTF-8 +#import gettext +#from kimchi.cachebust import href +#silent t = gettext.translation($lang.domain, $lang.localedir, languages=$lang.lang) +#silent _ = t.gettext +#silent _t = t.gettext + +<div id="repository-edit-window" class="window"> + <header> + <h1 class="title">$_("Edit Repository")</h1> + <div class="close">X</div> + </header> + <div class="content"> + <form id="form-repository-edit"> + <fieldset class="repository-edit-fieldset"> + <div> + <div class="repository-edit-wrapper-label"> + <label for="repository-edit-id-textbox">$_("Repository ID")</label> + </div> + <div class="repository-edit-wrapper-controls"> + <input id="repository-edit-id-textbox" name="repo_id" type="text" /> + </div> + </div> + <div> + <div class="repository-edit-wrapper-label"> + <label for="repository-edit-name-textbox">$_("Repository Name")</label> + </div> + <div class="repository-edit-wrapper-controls"> + <input id="repository-edit-name-textbox" name="repo_name" type="text" /> + </div> + </div> + <div> + <div class="repository-edit-wrapper-label"> + <label for="repository-edit-baseurl-textbox">$_("Base URL")</label> + </div> + <div class="repository-edit-wrapper-controls"> + <input id="repository-edit-baseurl-textbox" name="baseurl" type="text" /> + </div> + </div> + <div> + <div class="repository-edit-wrapper-label"> + <label>$_("Is Mirror")</label> + </div> + <div class="repository-edit-wrapper-controls"> + <input id="repository-edit-ismirror-radio-true" name="is_mirror" type="radio" value="true" disabled="disabled" /> + <label for="repository-edit-ismirror-radio-true">$_("Yes")</label> + <input id="repository-edit-ismirror-radio-false" name="is_mirror" type="radio" value="false" disabled="disabled" /> + <label for="repository-edit-ismirror-radio-false">$_("No")</label> + </div> + </div> + </fieldset> + <fieldset class="repository-edit-fieldset"> + <div> + <div class="repository-edit-wrapper-label"> + <label for="repository-edit-urlargs-textbox">$_("URL Args")</label> + </div> + <div class="repository-edit-wrapper-controls"> + <input id="repository-edit-urlargs-textbox" name="url_args" type="text" /> + </div> + </div> + <div> + <div class="repository-edit-wrapper-label"> + <label>$_("Enabled")</label> + </div> + <div class="repository-edit-wrapper-controls"> + <input id="repository-edit-enabled-radio-true" name="enabled" type="radio" value="true" disabled="disabled" /> + <label for="repository-edit-enabled-radio-true">$_("Yes")</label> + <input id="repository-edit-enabled-radio-false" name="enabled" type="radio" value="false" disabled="disabled" /> + <label for="repository-edit-enabled-radio-false">$_("No")</label> + </div> + </div> + <div> + <div class="repository-edit-wrapper-label"> + <label>$_("GPG Check")</label> + </div> + <div class="repository-edit-wrapper-controls"> + <input id="repository-edit-gpgcheck-radio-true" name="gpgcheck" type="radio" value="true" /> + <label for="repository-edit-gpgcheck-radio-true">$_("Yes")</label> + <input id="repository-edit-gpgcheck-radio-false" name="gpgcheck" type="radio" value="false" /> + <label for="repository-edit-gpgcheck-radio-false">$_("No")</label> + </div> + </div> + <div> + <div class="repository-edit-wrapper-label"> + <label for="repository-edit-gpgkey-textbox">$_("GPG Key")</label> + </div> + <div class="repository-edit-wrapper-controls"> + <input id="repository-edit-gpgkey-textbox" name="gpgkey" type="text" /> + </div> + </div> + </fieldset> + </form> + </div> + <footer> + <div class="btn-group"> + <button id="repository-edit-button-save" class="btn-normal"> + <span class="text">$_("Save")</span> + </button> + </div> + </footer> +</div> +<script type="text/javascript"> + kimchi.repository_edit_main(); +</script> -- 1.8.1.4