diff options
Diffstat (limited to 'app/assets/javascripts/clusters_list/components/clusters.vue')
-rw-r--r-- | app/assets/javascripts/clusters_list/components/clusters.vue | 34 |
1 files changed, 32 insertions, 2 deletions
diff --git a/app/assets/javascripts/clusters_list/components/clusters.vue b/app/assets/javascripts/clusters_list/components/clusters.vue index 9322423370b..a1b581dc627 100644 --- a/app/assets/javascripts/clusters_list/components/clusters.vue +++ b/app/assets/javascripts/clusters_list/components/clusters.vue @@ -1,8 +1,9 @@ <script> import { mapState, mapActions } from 'vuex'; import { GlTable, GlLoadingIcon, GlBadge } from '@gitlab/ui'; -import { CLUSTER_TYPES } from '../constants'; -import { __ } from '~/locale'; +import tooltip from '~/vue_shared/directives/tooltip'; +import { CLUSTER_TYPES, STATUSES } from '../constants'; +import { __, sprintf } from '~/locale'; export default { components: { @@ -10,6 +11,9 @@ export default { GlLoadingIcon, GlBadge, }, + directives: { + tooltip, + }, fields: [ { key: 'name', @@ -38,6 +42,13 @@ export default { }, methods: { ...mapActions(['fetchClusters']), + statusClass(status) { + return STATUSES[status].className; + }, + statusTitle(status) { + const { title } = STATUSES[status]; + return sprintf(__('Status: %{title}'), { title }, false); + }, }, }; </script> @@ -52,6 +63,25 @@ export default { 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 }} |