diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2020-03-04 09:08:23 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2020-03-04 09:08:23 +0300 |
commit | be81c1578d65f25edfde8aa550f190b8d3e6d976 (patch) | |
tree | 0695fcaec3739d0ba486985bae2ebd85a3f49ee5 /app/assets/javascripts/clusters_list/components/clusters.vue | |
parent | bb19d18713d1b3da7d564826f5e21e8d9f9f36cd (diff) |
Add latest changes from gitlab-org/gitlab@master
Diffstat (limited to 'app/assets/javascripts/clusters_list/components/clusters.vue')
-rw-r--r-- | app/assets/javascripts/clusters_list/components/clusters.vue | 61 |
1 files changed, 61 insertions, 0 deletions
diff --git a/app/assets/javascripts/clusters_list/components/clusters.vue b/app/assets/javascripts/clusters_list/components/clusters.vue new file mode 100644 index 00000000000..9322423370b --- /dev/null +++ b/app/assets/javascripts/clusters_list/components/clusters.vue @@ -0,0 +1,61 @@ +<script> +import { mapState, mapActions } from 'vuex'; +import { GlTable, GlLoadingIcon, GlBadge } from '@gitlab/ui'; +import { CLUSTER_TYPES } from '../constants'; +import { __ } from '~/locale'; + +export default { + components: { + GlTable, + GlLoadingIcon, + GlBadge, + }, + fields: [ + { + key: 'name', + label: __('Kubernetes cluster'), + }, + { + key: 'environmentScope', + label: __('Environment scope'), + }, + { + key: 'size', + label: __('Size'), + }, + { + key: 'clusterType', + label: __('Cluster level'), + formatter: value => CLUSTER_TYPES[value], + }, + ], + computed: { + ...mapState(['clusters', 'loading']), + }, + mounted() { + // TODO - uncomment this once integrated with BE + // this.fetchClusters(); + }, + methods: { + ...mapActions(['fetchClusters']), + }, +}; +</script> + +<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(clusterType)="{value}"> + <gl-badge variant="light"> + {{ value }} + </gl-badge> + </template> + </gl-table> +</template> |