Add latest changes from gitlab-org/gitlab@master

6 files changed, 114 insertions, 14 deletions

diff --git a/app/assets/javascripts/environments/components/kubernetes_overview.vue b/app/assets/javascripts/environments/components/kubernetes_overview.vue
index a849adfc755..b9e6548f640 100644
--- a/app/assets/javascripts/environments/components/kubernetes_overview.vue
+++ b/app/assets/javascripts/environments/components/kubernetes_overview.vue
@@ -6,6 +6,7 @@ import { getIdFromGraphQLId } from '~/graphql_shared/utils';
 import KubernetesAgentInfo from './kubernetes_agent_info.vue';
 import KubernetesPods from './kubernetes_pods.vue';
 import KubernetesTabs from './kubernetes_tabs.vue';
+import KubernetesStatusBar from './kubernetes_status_bar.vue';
 
 export default {
   components: {
@@ -15,6 +16,7 @@ export default {
     KubernetesAgentInfo,
     KubernetesPods,
     KubernetesTabs,
+    KubernetesStatusBar,
   },
   inject: ['kasTunnelUrl'],
   props: {
@@ -32,6 +34,9 @@ export default {
     return {
       isVisible: false,
       error: '',
+      hasFailedState: false,
+      podsLoading: false,
+      workloadTypesLoading: false,
     };
   },
   computed: {
@@ -52,6 +57,14 @@ export default {
         },
       };
     },
+    clusterHealthStatus() {
+      const clusterDataLoading = this.podsLoading || this.workloadTypesLoading;
+      if (clusterDataLoading) {
+        return '';
+      }
+
+      return this.hasFailedState ? 'error' : 'success';
+    },
   },
   methods: {
     toggleCollapse() {
@@ -82,6 +95,7 @@ export default {
     </p>
     <gl-collapse :visible="isVisible" class="gl-md-pl-7 gl-md-pr-5 gl-mt-4">
       <template v-if="isVisible">
+        <kubernetes-status-bar :cluster-health-status="clusterHealthStatus" class="gl-mb-4" />
         <kubernetes-agent-info :cluster-agent="clusterAgent" class="gl-mb-5" />
 
         <gl-alert v-if="error" variant="danger" :dismissible="false" class="gl-mb-5">
@@ -92,12 +106,16 @@ export default {
           :configuration="k8sAccessConfiguration"
           :namespace="namespace"
           class="gl-mb-5"
-          @cluster-error="onClusterError" />
+          @cluster-error="onClusterError"
+          @loading="podsLoading = $event"
+          @failed="hasFailedState = true" />
         <kubernetes-tabs
           :configuration="k8sAccessConfiguration"
           :namespace="namespace"
           class="gl-mb-5"
           @cluster-error="onClusterError"
+          @loading="workloadTypesLoading = $event"
+          @failed="hasFailedState = true"
       /></template>
     </gl-collapse>
   </div>
diff --git a/app/assets/javascripts/environments/components/kubernetes_pods.vue b/app/assets/javascripts/environments/components/kubernetes_pods.vue
index a153331ee58..aded3a4d0c4 100644
--- a/app/assets/javascripts/environments/components/kubernetes_pods.vue
+++ b/app/assets/javascripts/environments/components/kubernetes_pods.vue
@@ -3,6 +3,7 @@ import { GlLoadingIcon } from '@gitlab/ui';
 import { GlSingleStat } from '@gitlab/ui/dist/charts';
 import { s__ } from '~/locale';
 import k8sPodsQuery from '../graphql/queries/k8s_pods.query.graphql';
+import { PHASE_RUNNING, PHASE_PENDING, PHASE_SUCCEEDED, PHASE_FAILED } from '../constants';
 
 export default {
   components: {
@@ -25,6 +26,9 @@ export default {
         this.error = error;
         this.$emit('cluster-error', this.error);
       },
+      watchLoading(isLoading) {
+        this.$emit('loading', isLoading);
+      },
     },
   },
   props: {
@@ -42,41 +46,39 @@ export default {
       error: '',
     };
   },
-
   computed: {
     podStats() {
       if (!this.k8sPods) return null;
 
       return [
         {
-          // eslint-disable-next-line @gitlab/require-i18n-strings
-          value: this.getPodsByPhase('Running'),
+          value: this.countPodsByPhase(PHASE_RUNNING),
           title: this.$options.i18n.runningPods,
         },
         {
-          // eslint-disable-next-line @gitlab/require-i18n-strings
-          value: this.getPodsByPhase('Pending'),
+          value: this.countPodsByPhase(PHASE_PENDING),
           title: this.$options.i18n.pendingPods,
         },
         {
-          // eslint-disable-next-line @gitlab/require-i18n-strings
-          value: this.getPodsByPhase('Succeeded'),
+          value: this.countPodsByPhase(PHASE_SUCCEEDED),
           title: this.$options.i18n.succeededPods,
         },
         {
-          // eslint-disable-next-line @gitlab/require-i18n-strings
-          value: this.getPodsByPhase('Failed'),
+          value: this.countPodsByPhase(PHASE_FAILED),
           title: this.$options.i18n.failedPods,
         },
       ];
     },
     loading() {
-      return this.$apollo.queries.k8sPods.loading;
+      return this.$apollo?.queries?.k8sPods?.loading;
     },
   },
   methods: {
-    getPodsByPhase(phase) {
+    countPodsByPhase(phase) {
       const filteredPods = this.k8sPods.filter((item) => item.status.phase === phase);
+      if (phase === PHASE_FAILED && filteredPods.length) {
+        this.$emit('failed');
+      }
       return filteredPods.length;
     },
   },
diff --git a/app/assets/javascripts/environments/components/kubernetes_status_bar.vue b/app/assets/javascripts/environments/components/kubernetes_status_bar.vue
new file mode 100644
index 00000000000..94cd7438e46
--- /dev/null
+++ b/app/assets/javascripts/environments/components/kubernetes_status_bar.vue
@@ -0,0 +1,39 @@
+<script>
+import { GlLoadingIcon, GlBadge } from '@gitlab/ui';
+import { s__ } from '~/locale';
+import { HEALTH_BADGES } from '../constants';
+
+export default {
+  components: {
+    GlLoadingIcon,
+    GlBadge,
+  },
+  props: {
+    clusterHealthStatus: {
+      required: false,
+      type: String,
+      default: '',
+      validator(val) {
+        return ['error', 'success', ''].includes(val);
+      },
+    },
+  },
+  computed: {
+    healthBadge() {
+      return HEALTH_BADGES[this.clusterHealthStatus];
+    },
+  },
+  i18n: {
+    healthLabel: s__('Environment|Environment health'),
+  },
+};
+</script>
+<template>
+  <div class="gl-display-flex gl-align-items-center gl-mr-3 gl-mb-2">
+    <span class="gl-font-sm gl-font-monospace gl-mr-3">{{ $options.i18n.healthLabel }}</span>
+    <gl-loading-icon v-if="!clusterHealthStatus" size="sm" inline />
+    <gl-badge v-else-if="healthBadge" :variant="healthBadge.variant">
+      {{ healthBadge.text }}
+    </gl-badge>
+  </div>
+</template>
diff --git a/app/assets/javascripts/environments/components/kubernetes_summary.vue b/app/assets/javascripts/environments/components/kubernetes_summary.vue
index 85fc1c1a07d..b00e82809f6 100644
--- a/app/assets/javascripts/environments/components/kubernetes_summary.vue
+++ b/app/assets/javascripts/environments/components/kubernetes_summary.vue
@@ -32,6 +32,12 @@ export default {
       error(error) {
         this.$emit('cluster-error', error);
       },
+      result() {
+        this.checkFailed();
+      },
+      watchLoading(isLoading) {
+        this.$emit('loading', isLoading);
+      },
     },
   },
   props: {
@@ -46,7 +52,7 @@ export default {
   },
   computed: {
     summaryLoading() {
-      return this.$apollo.queries.k8sWorkloads.loading;
+      return this.$apollo?.queries?.k8sWorkloads?.loading;
     },
     summaryCount() {
       return this.k8sWorkloads ? Object.values(this.k8sWorkloads).flat().length : 0;
@@ -128,6 +134,17 @@ export default {
       };
     },
   },
+  methods: {
+    checkFailed() {
+      const failed = this.summaryObjects.some((workloadType) => {
+        return workloadType.items?.failed?.length > 0;
+      });
+
+      if (failed) {
+        this.$emit('failed');
+      }
+    },
+  },
   i18n: {
     summaryTitle: s__('Environment|Summary'),
     deployments: s__('Environment|Deployments'),
diff --git a/app/assets/javascripts/environments/components/kubernetes_tabs.vue b/app/assets/javascripts/environments/components/kubernetes_tabs.vue
index b900c23b2b7..4492d209e3b 100644
--- a/app/assets/javascripts/environments/components/kubernetes_tabs.vue
+++ b/app/assets/javascripts/environments/components/kubernetes_tabs.vue
@@ -134,7 +134,12 @@ export default {
 </script>
 <template>
   <gl-tabs>
-    <kubernetes-summary :namespace="namespace" :configuration="configuration" />
+    <kubernetes-summary
+      :namespace="namespace"
+      :configuration="configuration"
+      @loading="$emit('loading', $event)"
+      @failed="$emit('failed')"
+    />
 
     <gl-tab>
       <template #title>
diff --git a/app/assets/javascripts/environments/constants.js b/app/assets/javascripts/environments/constants.js
index 448cee530f6..2b178964c37 100644
--- a/app/assets/javascripts/environments/constants.js
+++ b/app/assets/javascripts/environments/constants.js
@@ -89,3 +89,22 @@ export const ENVIRONMENT_NEW_HELP_TEXT = __(
 export const ENVIRONMENT_EDIT_HELP_TEXT = ENVIRONMENT_NEW_HELP_TEXT;
 
 export const SERVICES_LIMIT_PER_PAGE = 10;
+
+export const CLUSTER_STATUS_HEALTHY_TEXT = s__('Environment|Healthy');
+export const CLUSTER_STATUS_UNHEALTHY_TEXT = s__('Environment|Unhealthy');
+
+export const HEALTH_BADGES = {
+  success: {
+    variant: 'success',
+    text: CLUSTER_STATUS_HEALTHY_TEXT,
+  },
+  error: {
+    variant: 'danger',
+    text: CLUSTER_STATUS_UNHEALTHY_TEXT,
+  },
+};
+
+export const PHASE_RUNNING = 'Running';
+export const PHASE_PENDING = 'Pending';
+export const PHASE_SUCCEEDED = 'Succeeded';
+export const PHASE_FAILED = 'Failed';