diff options
Diffstat (limited to 'app/assets/javascripts/registry/components/collapsible_container.vue')
-rw-r--r-- | app/assets/javascripts/registry/components/collapsible_container.vue | 118 |
1 files changed, 7 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"> |