diff options
Diffstat (limited to 'app/assets/javascripts/environments/components/kubernetes_pods.vue')
-rw-r--r-- | app/assets/javascripts/environments/components/kubernetes_pods.vue | 38 |
1 files changed, 14 insertions, 24 deletions
diff --git a/app/assets/javascripts/environments/components/kubernetes_pods.vue b/app/assets/javascripts/environments/components/kubernetes_pods.vue index 3f040f1f40a..743159d6256 100644 --- a/app/assets/javascripts/environments/components/kubernetes_pods.vue +++ b/app/assets/javascripts/environments/components/kubernetes_pods.vue @@ -1,14 +1,20 @@ <script> import { GlLoadingIcon } from '@gitlab/ui'; -import { GlSingleStat } from '@gitlab/ui/dist/charts'; import { s__ } from '~/locale'; +import { + PHASE_RUNNING, + PHASE_PENDING, + PHASE_SUCCEEDED, + PHASE_FAILED, + STATUS_LABELS, +} from '~/kubernetes_dashboard/constants'; +import WorkloadStats from '~/kubernetes_dashboard/components/workload_stats.vue'; import k8sPodsQuery from '../graphql/queries/k8s_pods.query.graphql'; -import { PHASE_RUNNING, PHASE_PENDING, PHASE_SUCCEEDED, PHASE_FAILED } from '../constants'; export default { components: { GlLoadingIcon, - GlSingleStat, + WorkloadStats, }, apollo: { k8sPods: { @@ -53,19 +59,19 @@ export default { return [ { value: this.countPodsByPhase(PHASE_RUNNING), - title: this.$options.i18n.runningPods, + title: STATUS_LABELS[PHASE_RUNNING], }, { value: this.countPodsByPhase(PHASE_PENDING), - title: this.$options.i18n.pendingPods, + title: STATUS_LABELS[PHASE_PENDING], }, { value: this.countPodsByPhase(PHASE_SUCCEEDED), - title: this.$options.i18n.succeededPods, + title: STATUS_LABELS[PHASE_SUCCEEDED], }, { value: this.countPodsByPhase(PHASE_FAILED), - title: this.$options.i18n.failedPods, + title: STATUS_LABELS[PHASE_FAILED], }, ]; }, @@ -84,10 +90,6 @@ export default { }, i18n: { podsTitle: s__('Environment|Pods'), - runningPods: s__('Environment|Running'), - pendingPods: s__('Environment|Pending'), - succeededPods: s__('Environment|Succeeded'), - failedPods: s__('Environment|Failed'), }, }; </script> @@ -96,18 +98,6 @@ export default { <p class="gl-text-gray-500">{{ $options.i18n.podsTitle }}</p> <gl-loading-icon v-if="loading" /> - - <div - v-else-if="podStats && !error" - class="gl-display-flex gl-flex-wrap gl-sm-flex-nowrap gl-mx-n3 gl-mt-n3" - > - <gl-single-stat - v-for="(stat, index) in podStats" - :key="index" - class="gl-w-full gl-flex-direction-column gl-align-items-center gl-justify-content-center gl-bg-white gl-border gl-border-gray-a-08 gl-mx-3 gl-p-3 gl-mt-3" - :value="stat.value" - :title="stat.title" - /> - </div> + <workload-stats v-else-if="podStats && !error" :stats="podStats" /> </div> </template> |