diff options
author | Filipa Lacerda <filipa@gitlab.com> | 2017-09-22 11:46:55 +0100 |
---|---|---|
committer | Filipa Lacerda <filipa@gitlab.com> | 2017-09-22 12:14:59 +0100 |
commit | d0e5bafa305b7bb481cb3fe527bbbc0f5b09ade3 (patch) | |
tree | 6021d373889a389afd4e4d3a4d14820e8053ca97 /app/assets/javascripts/registry/components | |
parent | 07b0d933b523b22464c72e0dd85bc413f455b72f (diff) | |
download | gitlab-ce-d0e5bafa305b7bb481cb3fe527bbbc0f5b09ade3.tar.gz |
Adds pagination
Adds specs
Diffstat (limited to 'app/assets/javascripts/registry/components')
-rw-r--r-- | app/assets/javascripts/registry/components/app.vue | 22 | ||||
-rw-r--r-- | app/assets/javascripts/registry/components/collapsible_container.vue | 171 |
2 files changed, 108 insertions, 85 deletions
diff --git a/app/assets/javascripts/registry/components/app.vue b/app/assets/javascripts/registry/components/app.vue index c4d66382850..7a3e61b64cd 100644 --- a/app/assets/javascripts/registry/components/app.vue +++ b/app/assets/javascripts/registry/components/app.vue @@ -12,7 +12,7 @@ props: { endpoint: { type: String, - required: true + required: true, }, }, store, @@ -37,8 +37,8 @@ ]), fetchRegistryList(repo) { - this.fetchList(repo) - .catch(() => this.showError(errorMessagesTypes.FETCH_REGISTRY)) + this.fetchList({ repo }) + .catch(() => this.showError(errorMessagesTypes.FETCH_REGISTRY)); }, deleteRegistry(repo, registry) { @@ -53,9 +53,14 @@ .catch(() => this.showError(errorMessagesTypes.DELETE_REPO)); }, - showError(message){ - Flash(__(errorMessages[message])); - } + showError(message) { + Flash(this.__(errorMessages[message])); + }, + + onPageChange(repo, page) { + this.fetchList({ repo, page }) + .catch(() => this.showError(errorMessagesTypes.FETCH_REGISTRY)); + }, }, created() { this.setMainEndpoint(this.endpoint); @@ -63,7 +68,7 @@ mounted() { this.fetchRepos() .catch(() => this.showError(errorMessagesTypes.FETCH_REPOS)); - } + }, }; </script> <template> @@ -81,10 +86,11 @@ @fetchRegistryList="fetchRegistryList" @deleteRepository="deleteRepository" @deleteRegistry="deleteRegistry" + @pageChange="onPageChange" /> <p v-else-if="!isLoading && !repos.length"> - {{__("No container images stored for this project. Add one by following the instructions above")}} + {{__("No container images stored for this project. Add one by following the instructions above.")}} </p> </div> </template> diff --git a/app/assets/javascripts/registry/components/collapsible_container.vue b/app/assets/javascripts/registry/components/collapsible_container.vue index 739e48b93f2..2d46eb8270e 100644 --- a/app/assets/javascripts/registry/components/collapsible_container.vue +++ b/app/assets/javascripts/registry/components/collapsible_container.vue @@ -1,6 +1,7 @@ <script> 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'; @@ -15,6 +16,7 @@ components: { clipboardButton, loadingIcon, + tablePagination, }, mixins: [ timeagoMixin, @@ -27,6 +29,11 @@ isOpen: false, }; }, + computed: { + shouldRenderPagination() { + return this.repo.pagination.total > this.repo.pagination.perPage; + }, + }, methods: { layers(item) { const pluralize = gl.text.pluralize('layer', item.layers); @@ -41,12 +48,16 @@ }, handleDeleteRepository() { - this.$emit('deleteRepository', this.repo) + this.$emit('deleteRepository', this.repo); }, handleDeleteRegistry(registry) { this.$emit('deleteRegistry', this.repo, registry); }, + + onPageChange(pageNumber) { + this.$emit('pageChange', this.repo, pageNumber); + }, }, }; </script> @@ -101,82 +112,88 @@ v-else-if="!repo.isLoading && isOpen" class="container-image-tags"> - <table - class="table tags" - v-if="repo.list.length"> - <thead> - <tr> - <th>{{__("Tag")}}</th> - <th>{{__("Tag ID")}}</th> - <th>{{__("Size")}}</th> - <th>{{__("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="__(`docker pull ${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-remove hidden-xs pull-right" - :title="__('Remove tag')" - data-container="body" - v-tooltip - @click="handleDeleteRegistry(item)"> - <i - class="fa fa-trash" - aria-hidden="true"> - </i> - </button> - </td> - </tr> - </tbody> - </table> + <template v-if="repo.list.length"> + <table class="table tags"> + <thead> + <tr> + <th>{{__("Tag")}}</th> + <th>{{__("Tag ID")}}</th> + <th>{{__("Size")}}</th> + <th>{{__("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="__(`docker pull ${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-remove hidden-xs pull-right" + :title="__('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" + /> + </template> <div v-else class="nothing-here-block"> |