Adds pagination

Adds specs

5 files changed, 129 insertions, 94 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}}
-                &middot;
-                {{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}}
+                  &middot;
+                  {{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">
diff --git a/app/assets/javascripts/registry/index.js b/app/assets/javascripts/registry/index.js
index ad76dfd333b..d8edff73f72 100644
--- a/app/assets/javascripts/registry/index.js
+++ b/app/assets/javascripts/registry/index.js
@@ -1,5 +1,8 @@
 import Vue from 'vue';
 import registryApp from './components/app.vue';
+import Translate from '../vue_shared/translate';
+
+Vue.use(Translate);
 
 document.addEventListener('DOMContentLoaded', () => new Vue({
   el: '#js-vue-registry-images',
diff --git a/app/assets/javascripts/registry/stores/actions.js b/app/assets/javascripts/registry/stores/actions.js
index c86e40a1a28..d980e98e7b1 100644
--- a/app/assets/javascripts/registry/stores/actions.js
+++ b/app/assets/javascripts/registry/stores/actions.js
@@ -15,14 +15,17 @@ export const fetchRepos = ({ commit, state }) => {
     });
 };
 
-export const fetchList = ({ commit }, list) => {
-  commit(types.TOGGLE_REGISTRY_LIST_LOADING, list);
+export const fetchList = ({ commit }, { repo, page }) => {
+  commit(types.TOGGLE_REGISTRY_LIST_LOADING, repo);
 
-  return Vue.http.get(list.path)
-    .then(res => res.json())
+  return Vue.http.get(repo.tagsPath, { params: { page } })
     .then((response) => {
-      commit(types.TOGGLE_REGISTRY_LIST_LOADING, list);
-      commit(types.SET_REGISTRY_LIST, list, response);
+      const headers = response.headers;
+
+      return response.json().then((resp) => {
+        commit(types.TOGGLE_REGISTRY_LIST_LOADING, repo);
+        commit(types.SET_REGISTRY_LIST, { repo, resp, headers });
+      });
     });
 };
 
diff --git a/app/assets/javascripts/registry/stores/mutations.js b/app/assets/javascripts/registry/stores/mutations.js
index 0e69d2bed1b..e40382e7afc 100644
--- a/app/assets/javascripts/registry/stores/mutations.js
+++ b/app/assets/javascripts/registry/stores/mutations.js
@@ -1,4 +1,5 @@
 import * as types from './mutation_types';
+import { parseIntPagination, normalizeHeaders } from '../../lib/utils/common_utils';
 
 export default {
 
@@ -15,7 +16,7 @@ export default {
         isLoading: false,
         list: [],
         location: el.location,
-        name: el.name,
+        name: el.path,
         tagsPath: el.tags_path,
       })),
     });
@@ -25,10 +26,15 @@ export default {
     Object.assign(state, { isLoading: !state.isLoading });
   },
 
-  [types.SET_REGISTRY_LIST](state, repo, list) {
+  [types.SET_REGISTRY_LIST](state, { repo, resp, headers }) {
     const listToUpdate = state.repos.find(el => el.id === repo.id);
 
-    listToUpdate.list = list.map(element => ({
+    const normalizedHeaders = normalizeHeaders(headers);
+    const pagination = parseIntPagination(normalizedHeaders);
+
+    listToUpdate.pagination = pagination;
+
+    listToUpdate.list = resp.map(element => ({
       tag: element.name,
       revision: element.revision,
       shortRevision: element.short_revision,