diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2020-03-09 12:07:45 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2020-03-09 12:07:45 +0300 |
commit | f4186a753b86625a83e8499af14b5badd63a2ac2 (patch) | |
tree | b960dd9f4255e9eee9f87d28e853f163836aa4c5 /app/assets/javascripts/clusters_list | |
parent | 0221116862ee66024a03492b4fbbe4e069d84303 (diff) |
Add latest changes from gitlab-org/gitlab@master
Diffstat (limited to 'app/assets/javascripts/clusters_list')
-rw-r--r-- | app/assets/javascripts/clusters_list/components/clusters.vue | 34 | ||||
-rw-r--r-- | app/assets/javascripts/clusters_list/constants.js | 8 | ||||
-rw-r--r-- | app/assets/javascripts/clusters_list/store/state.js | 16 |
3 files changed, 39 insertions, 19 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 }} diff --git a/app/assets/javascripts/clusters_list/constants.js b/app/assets/javascripts/clusters_list/constants.js index 4125288b5a5..9428f08176c 100644 --- a/app/assets/javascripts/clusters_list/constants.js +++ b/app/assets/javascripts/clusters_list/constants.js @@ -6,6 +6,10 @@ export const CLUSTER_TYPES = { instance_type: __('Instance'), }; -export default { - CLUSTER_TYPES, +export const STATUSES = { + disabled: { className: 'disabled', title: __('Disabled') }, + connected: { className: 'bg-success', title: __('Connected') }, + unreachable: { className: 'bg-danger', title: __('Unreachable') }, + authentication_failure: { className: 'bg-warning', title: __('Authentication Failure') }, + deleting: { title: __('Deleting') }, }; diff --git a/app/assets/javascripts/clusters_list/store/state.js b/app/assets/javascripts/clusters_list/store/state.js index e6cdf9d67db..ed032ed8435 100644 --- a/app/assets/javascripts/clusters_list/store/state.js +++ b/app/assets/javascripts/clusters_list/store/state.js @@ -1,19 +1,5 @@ export default (initialState = {}) => ({ endpoint: initialState.endpoint, loading: false, // TODO - set this to true once integrated with BE - clusters: [ - // TODO - remove mock data once integrated with BE - // { - // name: 'My Cluster', - // environmentScope: '*', - // size: '3', - // clusterType: 'group_type', - // }, - // { - // name: 'My other cluster', - // environmentScope: 'production', - // size: '12', - // clusterType: 'project_type', - // }, - ], + clusters: [], }); |