diff options
Diffstat (limited to 'app/assets/javascripts/clusters_list/components')
-rw-r--r-- | app/assets/javascripts/clusters_list/components/clusters.vue | 162 |
1 files changed, 94 insertions, 68 deletions
diff --git a/app/assets/javascripts/clusters_list/components/clusters.vue b/app/assets/javascripts/clusters_list/components/clusters.vue index 46dacf30f39..af3f1437c64 100644 --- a/app/assets/javascripts/clusters_list/components/clusters.vue +++ b/app/assets/javascripts/clusters_list/components/clusters.vue @@ -1,61 +1,78 @@ <script> import { mapState, mapActions } from 'vuex'; -import { GlTable, GlLoadingIcon, GlBadge } from '@gitlab/ui'; +import { GlBadge, GlLink, GlLoadingIcon, GlPagination, GlTable } from '@gitlab/ui'; import tooltip from '~/vue_shared/directives/tooltip'; import { CLUSTER_TYPES, STATUSES } from '../constants'; import { __, sprintf } from '~/locale'; export default { components: { - GlTable, - GlLoadingIcon, GlBadge, + GlLink, + GlLoadingIcon, + GlPagination, + GlTable, }, directives: { tooltip, }, - fields: [ - { - key: 'name', - label: __('Kubernetes cluster'), - }, - { - key: 'environmentScope', - label: __('Environment scope'), - }, - { - key: 'size', - label: __('Size'), - }, - { - key: 'cpu', - label: __('Total cores (vCPUs)'), + computed: { + ...mapState(['clusters', 'clustersPerPage', 'loading', 'page', 'totalCulsters']), + currentPage: { + get() { + return this.page; + }, + set(newVal) { + this.setPage(newVal); + this.fetchClusters(); + }, }, - { - key: 'memory', - label: __('Total memory (GB)'), + fields() { + return [ + { + key: 'name', + label: __('Kubernetes cluster'), + }, + { + key: 'environment_scope', + label: __('Environment scope'), + }, + // Wait for backend to send these fields + // { + // key: 'size', + // label: __('Size'), + // }, + // { + // key: 'cpu', + // label: __('Total cores (vCPUs)'), + // }, + // { + // key: 'memory', + // label: __('Total memory (GB)'), + // }, + { + key: 'cluster_type', + label: __('Cluster level'), + formatter: value => CLUSTER_TYPES[value], + }, + ]; }, - { - key: 'clusterType', - label: __('Cluster level'), - formatter: value => CLUSTER_TYPES[value], + hasClusters() { + return this.clustersPerPage > 0; }, - ], - computed: { - ...mapState(['clusters', 'loading']), }, mounted() { - // TODO - uncomment this once integrated with BE - // this.fetchClusters(); + this.fetchClusters(); }, methods: { - ...mapActions(['fetchClusters']), + ...mapActions(['fetchClusters', 'setPage']), statusClass(status) { - return STATUSES[status].className; + const iconClass = STATUSES[status] || STATUSES.default; + return iconClass.className; }, statusTitle(status) { - const { title } = STATUSES[status]; - return sprintf(__('Status: %{title}'), { title }, false); + const iconTitle = STATUSES[status] || STATUSES.default; + return sprintf(__('Status: %{title}'), { title: iconTitle.title }, false); }, }, }; @@ -63,37 +80,46 @@ export default { <template> <gl-loading-icon v-if="loading" size="md" class="mt-3" /> - <gl-table - v-else - :items="clusters" - :fields="$options.fields" - stacked="md" - variant="light" - class="qa-clusters-table" - > - <template #cell(name)="{ item }"> - <div class="d-flex flex-row-reverse flex-md-row js-status"> - {{ item.name }} - <gl-loading-icon - v-if="item.status === 'deleting'" - v-tooltip - :title="statusTitle(item.status)" - size="sm" - class="mr-2 ml-md-2" - /> - <div - v-else - v-tooltip - class="cluster-status-indicator rounded-circle align-self-center gl-w-8 gl-h-8 mr-2 ml-md-2" - :class="statusClass(item.status)" - :title="statusTitle(item.status)" - ></div> - </div> - </template> - <template #cell(clusterType)="{value}"> - <gl-badge variant="light"> - {{ value }} - </gl-badge> - </template> - </gl-table> + + <section v-else> + <gl-table :items="clusters" :fields="fields" stacked="md" class="qa-clusters-table"> + <template #cell(name)="{ item }"> + <div class="d-flex flex-row-reverse flex-md-row js-status"> + <gl-link data-qa-selector="cluster" :data-qa-cluster-name="item.name" :href="item.path"> + {{ item.name }} + </gl-link> + + <gl-loading-icon + v-if="item.status === 'deleting'" + v-tooltip + :title="statusTitle(item.status)" + size="sm" + class="mr-2 ml-md-2" + /> + <div + v-else + v-tooltip + class="cluster-status-indicator rounded-circle align-self-center gl-w-4 gl-h-4 mr-2 ml-md-2" + :class="statusClass(item.status)" + :title="statusTitle(item.status)" + ></div> + </div> + </template> + <template #cell(cluster_type)="{value}"> + <gl-badge variant="light"> + {{ value }} + </gl-badge> + </template> + </gl-table> + + <gl-pagination + v-if="hasClusters" + v-model="currentPage" + :per-page="clustersPerPage" + :total-items="totalCulsters" + :prev-text="__('Prev')" + :next-text="__('Next')" + align="center" + /> + </section> </template> |