diff options
author | Filipa Lacerda <filipa@gitlab.com> | 2017-09-25 18:00:39 +0100 |
---|---|---|
committer | Filipa Lacerda <filipa@gitlab.com> | 2017-09-25 18:00:39 +0100 |
commit | 5ae54ca3eb98df665a243bf190a16e80e87c37f2 (patch) | |
tree | 6bbc0076241b3ed4633fd82a44b339eedf9a989c /app/assets/javascripts/registry/components | |
parent | 9c7807b319a845a43e75a5ef7edb100676e9d525 (diff) | |
download | gitlab-ce-5ae54ca3eb98df665a243bf190a16e80e87c37f2.tar.gz |
Moves table component into a separate one
Adds better support for i18n
Diffstat (limited to 'app/assets/javascripts/registry/components')
-rw-r--r-- | app/assets/javascripts/registry/components/collapsible_container.vue | 118 | ||||
-rw-r--r-- | app/assets/javascripts/registry/components/table_registry.vue | 147 |
2 files changed, 154 insertions, 111 deletions
diff --git a/app/assets/javascripts/registry/components/collapsible_container.vue b/app/assets/javascripts/registry/components/collapsible_container.vue index c29f98c6841..7c341b0e91b 100644 --- a/app/assets/javascripts/registry/components/collapsible_container.vue +++ b/app/assets/javascripts/registry/components/collapsible_container.vue @@ -3,9 +3,8 @@ 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 tableRegistry from './table_registry.vue'; import { errorMessages, errorMessagesTypes } from '../constants'; export default { @@ -19,11 +18,8 @@ components: { clipboardButton, loadingIcon, - tablePagination, + tableRegistry, }, - mixins: [ - timeagoMixin, - ], directives: { tooltip, }, @@ -32,24 +28,13 @@ isOpen: false, }; }, - computed: { - shouldRenderPagination() { - return this.repo.pagination.total > this.repo.pagination.perPage; - }, - }, methods: { ...mapActions([ + 'fetchRepos', 'fetchList', 'deleteRepo', - 'deleteRegistry', - 'toggleLoading', ]), - layers(item) { - const pluralize = n__('layer', 'layers', item.layers); - return `${item.layers} ${pluralize}`; - }, - toggleRepo() { this.isOpen = !this.isOpen; if (this.isOpen) { @@ -64,17 +49,6 @@ .catch(() => this.showError(errorMessagesTypes.DELETE_REPO)); }, - handleDeleteRegistry(registry) { - this.deleteRegistry(registry) - .then(() => this.fetchRegistry(this.repo)) - .catch(() => this.showError(errorMessagesTypes.DELETE_REGISTRY)); - }, - - onPageChange(pageNumber) { - this.fetchList({ repo: this.repo, page }) - .catch(() => this.showError(errorMessagesTypes.FETCH_REGISTRY)); - }, - clipboardText(text) { return `docker pull ${text}`; }, @@ -137,89 +111,11 @@ v-else-if="!repo.isLoading && isOpen" class="container-image-tags"> - <template v-if="repo.list.length"> - <table class="table tags"> - <thead> - <tr> - <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> - <tbody> - <tr - v-for="(item, i) in repo.list" - :key="i"> - <td> - - {{item.tag}} - - <clipboard-button - v-if="item.location" - :title="item.location" - :text="clipboardText(item.location)" - /> - </td> - <td> - <span - v-tooltip - :title="item.revision" - data-placement="bottom"> - {{item.shortRevision}} - </span> - </td> - <td> - <template v-if="item.size"> - {{item.size}} - · - {{layers(item)}} - </template> - <div - v-else - class="light"> - \- - </div> - </td> - - <td> - <template v-if="item.createdAt"> - {{timeFormated(item.createdAt)}} - </template> - <div - v-else - class="light"> - \- - </div> - </td> - - <td class="content"> - <button - v-if="item.canDelete" - type="button" - 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)"> - <i - class="fa fa-trash" - aria-hidden="true"> - </i> - </button> - </td> - </tr> - </tbody> - </table> + <table-registry + v-if="repo.list.length" + :repo="repo" + /> - <table-pagination - v-if="shouldRenderPagination" - :change="onPageChange" - :page-info="repo.pagination" - /> - </template> <div v-else class="nothing-here-block"> diff --git a/app/assets/javascripts/registry/components/table_registry.vue b/app/assets/javascripts/registry/components/table_registry.vue new file mode 100644 index 00000000000..491a90363db --- /dev/null +++ b/app/assets/javascripts/registry/components/table_registry.vue @@ -0,0 +1,147 @@ +<script> + import { mapActions } from 'vuex'; + import { n__, s__ } from '../../locale'; + import clipboardButton from '../../vue_shared/components/clipboard_button.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 { + props: { + repo: { + type: Object, + required: true, + }, + }, + components: { + clipboardButton, + tablePagination, + }, + mixins: [ + timeagoMixin, + ], + directives: { + tooltip, + }, + computed: { + shouldRenderPagination() { + return this.repo.pagination.total > this.repo.pagination.perPage; + }, + }, + methods: { + ...mapActions([ + 'fetchList', + 'deleteRegistry', + ]), + + layers(item) { + const pluralize = n__('layer', 'layers', item.layers); + return `${item.layers} ${pluralize}`; + }, + handleDeleteRegistry(registry) { + this.deleteRegistry(registry) + .then(() => this.fetchList({ repo: this.repo })) + .catch(() => this.showError(errorMessagesTypes.DELETE_REGISTRY)); + }, + + onPageChange(pageNumber) { + this.fetchList({ repo: this.repo, page }) + .catch(() => this.showError(errorMessagesTypes.FETCH_REGISTRY)); + }, + + clipboardText(text) { + return `docker pull ${text}`; + }, + + showError(message) { + Flash((errorMessages[message])); + }, + }, + }; +</script> +<template> +<div> + <table class="table tags"> + <thead> + <tr> + <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> + <tbody> + <tr + v-for="(item, i) in repo.list" + :key="i"> + <td> + + {{item.tag}} + + <clipboard-button + v-if="item.location" + :title="item.location" + :text="clipboardText(item.location)" + /> + </td> + <td> + <span + v-tooltip + :title="item.revision" + data-placement="bottom"> + {{item.shortRevision}} + </span> + </td> + <td> + <template v-if="item.size"> + {{item.size}} + · + {{layers(item)}} + </template> + <div + v-else + class="light"> + \- + </div> + </td> + + <td> + <template v-if="item.createdAt"> + {{timeFormated(item.createdAt)}} + </template> + <div + v-else + class="light"> + \- + </div> + </td> + + <td class="content"> + <button + v-if="item.canDelete" + type="button" + 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)"> + <i + class="fa fa-trash" + aria-hidden="true"> + </i> + </button> + </td> + </tr> + </tbody> + </table> + + <table-pagination + v-if="shouldRenderPagination" + :change="onPageChange" + :page-info="repo.pagination" + /> +</div> +</template> |