diff options
author | Filipa Lacerda <filipa@gitlab.com> | 2017-09-25 14:29:55 +0300 |
---|---|---|
committer | Filipa Lacerda <filipa@gitlab.com> | 2017-09-25 14:29:55 +0300 |
commit | 84c4834fb430e78e605519b53bd9aff25cb6426a (patch) | |
tree | 2f818c9aef0c8fc05e714f1008f041b614848baf /app/assets/javascripts/registry | |
parent | b187426720068903184ca33a63f9dfe22c29f49a (diff) |
Changes after review
Diffstat (limited to 'app/assets/javascripts/registry')
3 files changed, 53 insertions, 59 deletions
diff --git a/app/assets/javascripts/registry/components/app.vue b/app/assets/javascripts/registry/components/app.vue index 7a3e61b64cd..f1ca77a2694 100644 --- a/app/assets/javascripts/registry/components/app.vue +++ b/app/assets/javascripts/registry/components/app.vue @@ -30,44 +30,14 @@ ...mapActions([ 'setMainEndpoint', 'fetchRepos', - 'fetchList', - 'deleteRepo', - 'deleteRegistry', - 'toggleLoading', ]), - - fetchRegistryList(repo) { - this.fetchList({ repo }) - .catch(() => this.showError(errorMessagesTypes.FETCH_REGISTRY)); - }, - - deleteRegistry(repo, registry) { - this.deleteRegistry(registry) - .then(() => this.fetchRegistry(repo)) - .catch(() => this.showError(errorMessagesTypes.DELETE_REGISTRY)); - }, - - deleteRepository(repo) { - this.deleteRepo(repo) - .then(() => this.fetchRepos()) - .catch(() => this.showError(errorMessagesTypes.DELETE_REPO)); - }, - - showError(message) { - Flash(this.__(errorMessages[message])); - }, - - onPageChange(repo, page) { - this.fetchList({ repo, page }) - .catch(() => this.showError(errorMessagesTypes.FETCH_REGISTRY)); - }, }, created() { this.setMainEndpoint(this.endpoint); }, mounted() { this.fetchRepos() - .catch(() => this.showError(errorMessagesTypes.FETCH_REPOS)); + .catch(() => Flash(errorMessagesTypes.FETCH_REPOS)); }, }; </script> @@ -83,10 +53,6 @@ v-for="(item, index) in repos" :key="index" :repo="item" - @fetchRegistryList="fetchRegistryList" - @deleteRepository="deleteRepository" - @deleteRegistry="deleteRegistry" - @pageChange="onPageChange" /> <p v-else-if="!isLoading && !repos.length"> diff --git a/app/assets/javascripts/registry/components/collapsible_container.vue b/app/assets/javascripts/registry/components/collapsible_container.vue index 2d46eb8270e..ff69563a362 100644 --- a/app/assets/javascripts/registry/components/collapsible_container.vue +++ b/app/assets/javascripts/registry/components/collapsible_container.vue @@ -1,9 +1,12 @@ <script> + import { mapActions } from 'vuex'; + import { n__, s__ } from '../../locale'; import clipboardButton from '../../vue_shared/components/clipboard_button.vue'; import loadingIcon from '../../vue_shared/components/loading_icon.vue'; import tablePagination from '../../vue_shared/components/table_pagination.vue'; import tooltip from '../../vue_shared/directives/tooltip'; import timeagoMixin from '../../vue_shared/mixins/timeago'; + import { errorMessages, errorMessagesTypes } from '../constants'; export default { name: 'collapsibeContainerRegisty', @@ -35,28 +38,49 @@ }, }, methods: { + ...mapActions([ + 'fetchList', + 'deleteRepo', + 'deleteRegistry', + 'toggleLoading', + ]), + layers(item) { - const pluralize = gl.text.pluralize('layer', item.layers); + const pluralize = n__('layer', 'layers', item.layers); return `${item.layers} ${pluralize}`; }, toggleRepo() { if (this.isOpen === false) { - this.$emit('fetchRegistryList', this.repo); + this.fetchList({ repo: this.repo }) + .catch(() => this.showError(errorMessagesTypes.FETCH_REGISTRY)); } this.isOpen = !this.isOpen; }, handleDeleteRepository() { - this.$emit('deleteRepository', this.repo); + this.deleteRepo(this.repo) + .then(() => this.fetchRepos()) + .catch(() => this.showError(errorMessagesTypes.DELETE_REPO)); }, handleDeleteRegistry(registry) { - this.$emit('deleteRegistry', this.repo, registry); + this.deleteRegistry(registry) + .then(() => this.fetchRegistry(this.repo)) + .catch(() => this.showError(errorMessagesTypes.DELETE_REGISTRY)); }, onPageChange(pageNumber) { - this.$emit('pageChange', this.repo, pageNumber); + this.fetchList({ repo: this.repo, page }) + .catch(() => this.showError(errorMessagesTypes.FETCH_REGISTRY)); + }, + + clipboardText(text) { + return `docker pull ${text}`; + }, + + showError(message) { + Flash((errorMessages[message])); }, }, }; @@ -66,10 +90,10 @@ <div class="container-image"> <div class="container-image-head"> - <a - role="button" + <button + type="button" @click="toggleRepo" - class="js-toggle-repo"> + class="js-toggle-repo btn-link"> <i class="fa" :class="{ @@ -79,11 +103,11 @@ aria-hidden="true"> </i> {{repo.name}} - </a> + </button> <clipboard-button v-if="repo.location" - :text="__(`docker pull ${repo.location}`)" + :text="clipboardText(repo.location)" :title="repo.location" /> @@ -91,8 +115,9 @@ <button v-if="repo.canDelete" type="button" - class="js-remove-repo btn btn-remove" - :title="__('Remove repository')" + class="js-remove-repo btn btn-danger" + :title="s__('ContainerRegistry|Remove repository')" + :aria-label="s__('ContainerRegistry|Remove repository')" v-tooltip @click="handleDeleteRepository"> <i @@ -116,10 +141,10 @@ <table class="table tags"> <thead> <tr> - <th>{{__("Tag")}}</th> - <th>{{__("Tag ID")}}</th> - <th>{{__("Size")}}</th> - <th>{{__("Created")}}</th> + <th>{{s__('ContainerRegistry|Tag')}}</th> + <th>{{s__('ContainerRegistry|Tag ID')}}</th> + <th>{{s__("ContainerRegistry|Size")}}</th> + <th>{{s__("ContainerRegistry|Created")}}</th> <th></th> </tr> </thead> @@ -134,7 +159,7 @@ <clipboard-button v-if="item.location" :title="item.location" - :text="__(`docker pull ${item.location}`)" + :text="clipboardText(item.location)" /> </td> <td> @@ -173,8 +198,9 @@ <button v-if="item.canDelete" type="button" - class="js-delete-registry btn btn-remove hidden-xs pull-right" - :title="__('Remove tag')" + class="js-delete-registry btn btn-danger hidden-xs pull-right" + :title="s__('ContainerRegistry|Remove tag')" + :aria-label="s__('ContainerRegistry|Remove tag')" data-container="body" v-tooltip @click="handleDeleteRegistry(item)"> @@ -197,7 +223,7 @@ <div v-else class="nothing-here-block"> - {{__("No tags in Container Registry for this container image.")}} + {{s__("ContainerRegistry|No tags in Container Registry for this container image.")}} </div> </div> </div> diff --git a/app/assets/javascripts/registry/constants.js b/app/assets/javascripts/registry/constants.js index d3de6441dae..7d02b5bf7c3 100644 --- a/app/assets/javascripts/registry/constants.js +++ b/app/assets/javascripts/registry/constants.js @@ -1,3 +1,5 @@ +import { __ } from '../locale'; + export const errorMessagesTypes = { FETCH_REGISTRY: 'FETCH_REGISTRY', FETCH_REPOS: 'FETCH_REPOS', @@ -6,8 +8,8 @@ export const errorMessagesTypes = { }; export const errorMessages = { - [errorMessagesTypes.FETCH_REGISTRY]: 'Something went wrong while fetching the registry list.', - [errorMessagesTypes.FETCH_REPOS]: 'Something went wrong while fetching the repositories.', - [errorMessagesTypes.DELETE_REPO]: 'Something went wrong while deleting the repository.', - [errorMessagesTypes.DELETE_REGISTRY]: 'Something went wrong while deleting registry.', + [errorMessagesTypes.FETCH_REGISTRY]: __('Something went wrong while fetching the registry list.'), + [errorMessagesTypes.FETCH_REPOS]: __('Something went wrong while fetching the repositories.'), + [errorMessagesTypes.DELETE_REPO]: __('Something went wrong while deleting the repository.'), + [errorMessagesTypes.DELETE_REGISTRY]: __('Something went wrong while deleting registry.'), }; |