1 files changed, 137 insertions, 0 deletions
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..e917279947e
--- /dev/null
+++ b/app/assets/javascripts/registry/components/table_registry.vue
@@ -0,0 +1,137 @@
+<script>
+  /* globals Flash */
+  import { mapActions } from 'vuex';
+  import { n__ } from '../../locale';
+  import '../../flash';
+  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) {
+        return item.layers ? n__('%d layer', '%d layers', item.layers) : '';
+      },
+
+      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: pageNumber })
+          .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>
+          {{item.size}}
+          <template v-if="item.size && item.layers">
+            &middot;
+          </template>
+          {{layers(item)}}
+        </td>
+
+        <td>
+          {{timeFormated(item.createdAt)}}
+        </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>