diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2023-06-05 21:09:44 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2023-06-05 21:09:44 +0300 |
commit | 2f1a81fd16ff9968d6b986f8a407d963bc2218f9 (patch) | |
tree | d079c1abc2bc282e749a676651c0f02d288874f3 /app/assets/javascripts/environments | |
parent | 18e9429b63f9a095b1ba3606856537b9ca291eac (diff) |
Add latest changes from gitlab-org/gitlab@master
Diffstat (limited to 'app/assets/javascripts/environments')
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'; |