From 2f6bef1fab4f1cc1d37b8a7ed123de9488d6af27 Mon Sep 17 00:00:00 2001
From: Lukas Gross <lukas.gross@sap.com>
Date: Mon, 1 Jul 2024 11:37:52 +0200
Subject: [PATCH 1/3] Renamed GShootStatusTags to GShootReadiness

---
 .../{GStatusTag.spec.js => GReadinessChip.spec.js}          | 6 +++---
 .../components/{GStatusTags.spec.js => GShootReadiness.js}  | 6 +++---
 frontend/src/components/GShootListRow.vue                   | 4 ++--
 .../{GStatusTag.vue => Readiness/GReadinessChip.vue}        | 2 +-
 .../{GStatusTags.vue => Readiness/GShootReadiness.vue}      | 5 +++--
 .../src/components/ShootDetails/GShootMonitoringCard.vue    | 4 ++--
 6 files changed, 14 insertions(+), 13 deletions(-)
 rename frontend/__tests__/components/{GStatusTag.spec.js => GReadinessChip.spec.js} (94%)
 rename frontend/__tests__/components/{GStatusTags.spec.js => GShootReadiness.js} (96%)
 rename frontend/src/components/{GStatusTag.vue => Readiness/GReadinessChip.vue} (98%)
 rename frontend/src/components/{GStatusTags.vue => Readiness/GShootReadiness.vue} (97%)

diff --git a/frontend/__tests__/components/GStatusTag.spec.js b/frontend/__tests__/components/GReadinessChip.spec.js
similarity index 94%
rename from frontend/__tests__/components/GStatusTag.spec.js
rename to frontend/__tests__/components/GReadinessChip.spec.js
index 3254aa7bb2..3e064be818 100644
--- a/frontend/__tests__/components/GStatusTag.spec.js
+++ b/frontend/__tests__/components/GReadinessChip.spec.js
@@ -7,14 +7,14 @@
 import { mount } from '@vue/test-utils'
 import { createTestingPinia } from '@pinia/testing'
 
-import GStatusTag from '@/components/GStatusTag.vue'
+import GReadinessChip from '@/components/Readiness/GReadinessChip.vue'
 
 const { createVuetifyPlugin } = global.fixtures.helper
 
 describe('components', () => {
-  describe('g-status-tag', () => {
+  describe('g-readiness-chip', () => {
     function mountStatusTag (condition, isAdmin = false) {
-      return mount(GStatusTag, {
+      return mount(GReadinessChip, {
         global: {
           plugins: [
             createVuetifyPlugin(),
diff --git a/frontend/__tests__/components/GStatusTags.spec.js b/frontend/__tests__/components/GShootReadiness.js
similarity index 96%
rename from frontend/__tests__/components/GStatusTags.spec.js
rename to frontend/__tests__/components/GShootReadiness.js
index 27667c2604..fd42438a53 100644
--- a/frontend/__tests__/components/GStatusTags.spec.js
+++ b/frontend/__tests__/components/GShootReadiness.js
@@ -10,14 +10,14 @@ import { createTestingPinia } from '@pinia/testing'
 
 import { useConfigStore } from '@/store/config'
 
-import GStatusTags from '@/components/GStatusTags'
+import GShootReadiness from '@/components/Readiness/GShootReadiness'
 
 import { createShootItemComposable } from '@/composables/useShootItem'
 
 const { createVuetifyPlugin } = global.fixtures.helper
 
 describe('components', () => {
-  describe('g-status-tags', () => {
+  describe('g-shoot-readiness', () => {
     let pinia
 
     function mountStatusTags (conditionTypes) {
@@ -31,7 +31,7 @@ describe('components', () => {
           }),
         },
       })
-      return mount(GStatusTags, {
+      return mount(GShootReadiness, {
         global: {
           plugins: [
             createVuetifyPlugin(),
diff --git a/frontend/src/components/GShootListRow.vue b/frontend/src/components/GShootListRow.vue
index 88cea98224..c253956fa1 100644
--- a/frontend/src/components/GShootListRow.vue
+++ b/frontend/src/components/GShootListRow.vue
@@ -96,7 +96,7 @@ SPDX-License-Identifier: Apache-2.0
       </template>
       <template v-if="cell.header.key === 'readiness'">
         <div class="d-flex">
-          <g-status-tags />
+          <g-shoot-readiness />
         </div>
       </template>
       <template v-if="cell.header.key === 'controlPlaneHighAvailability'">
@@ -220,7 +220,7 @@ import GActionButton from '@/components/GActionButton.vue'
 import GCopyBtn from '@/components/GCopyBtn.vue'
 import GVendor from '@/components/GVendor.vue'
 import GShootStatus from '@/components/GShootStatus.vue'
-import GStatusTags from '@/components/GStatusTags.vue'
+import GShootReadiness from '@/components/Readiness/GShootReadiness.vue'
 import GPurposeTag from '@/components/GPurposeTag.vue'
 import GTimeString from '@/components/GTimeString.vue'
 import GShootVersionChip from '@/components/ShootVersion/GShootVersionChip.vue'
diff --git a/frontend/src/components/GStatusTag.vue b/frontend/src/components/Readiness/GReadinessChip.vue
similarity index 98%
rename from frontend/src/components/GStatusTag.vue
rename to frontend/src/components/Readiness/GReadinessChip.vue
index 7f048d2683..88df9f28f9 100644
--- a/frontend/src/components/GStatusTag.vue
+++ b/frontend/src/components/Readiness/GReadinessChip.vue
@@ -126,7 +126,7 @@ export default {
       'isAdmin',
     ]),
     popoverKey () {
-      return `g-status-tag[${this.condition.type}]:${this.shootMetadata.uid}`
+      return `g-readiness-chip[${this.condition.type}]:${this.shootMetadata.uid}`
     },
     internalValue: {
       get () {
diff --git a/frontend/src/components/GStatusTags.vue b/frontend/src/components/Readiness/GShootReadiness.vue
similarity index 97%
rename from frontend/src/components/GStatusTags.vue
rename to frontend/src/components/Readiness/GShootReadiness.vue
index ee2267b0b1..88b97fed4b 100644
--- a/frontend/src/components/GStatusTags.vue
+++ b/frontend/src/components/Readiness/GShootReadiness.vue
@@ -6,7 +6,7 @@ SPDX-License-Identifier: Apache-2.0
 
 <template>
   <div class="d-flex flex-nowrap justify-start">
-    <g-status-tag
+    <g-readiness-chip
       v-for="condition in conditions"
       :key="condition.type"
       :condition="condition"
@@ -46,7 +46,6 @@ import {
 import { useConfigStore } from '@/store/config'
 import { useShootStore } from '@/store/shoot'
 
-import GStatusTag from '@/components/GStatusTag.vue'
 import GExternalLink from '@/components/GExternalLink.vue'
 
 import { useShootItem } from '@/composables/useShootItem'
@@ -56,6 +55,8 @@ import {
   errorCodesFromArray,
 } from '@/utils/errorCodes'
 
+import GReadinessChip from './GReadinessChip.vue'
+
 import {
   sortBy,
   padStart,
diff --git a/frontend/src/components/ShootDetails/GShootMonitoringCard.vue b/frontend/src/components/ShootDetails/GShootMonitoringCard.vue
index 606fb6877a..87c2fb2d86 100644
--- a/frontend/src/components/ShootDetails/GShootMonitoringCard.vue
+++ b/frontend/src/components/ShootDetails/GShootMonitoringCard.vue
@@ -31,7 +31,7 @@ SPDX-License-Identifier: Apache-2.0
       <g-list-item-content label="Readiness">
         <div class="d-flex align-center pt-1">
           <span v-if="!shootConditions.length">-</span>
-          <g-status-tags
+          <g-shoot-readiness
             v-else
             popper-placement="bottom"
             show-status-text
@@ -68,7 +68,7 @@ import { useAuthzStore } from '@/store/authz'
 import { useConfigStore } from '@/store/config'
 
 import GShootStatus from '@/components/GShootStatus'
-import GStatusTags from '@/components/GStatusTags'
+import GShootReadiness from '@/components/Readiness/GShootReadiness'
 import GClusterMetrics from '@/components/GClusterMetrics'
 
 import { useShootItem } from '@/composables/useShootItem'

From 9f6ddd281301fbb2c3bde9a42fb28e0401a9f955 Mon Sep 17 00:00:00 2001
From: Lukas Gross <lukas.gross@sap.com>
Date: Tue, 2 Jul 2024 13:07:49 +0200
Subject: [PATCH 2/3] Filter visible readiness chips in computed property
 Convert GReadinessChip to script setup

---
 .../components/Readiness/GReadinessChip.vue   | 416 +++++++++---------
 .../components/Readiness/GShootReadiness.vue  |   4 +-
 2 files changed, 201 insertions(+), 219 deletions(-)

diff --git a/frontend/src/components/Readiness/GReadinessChip.vue b/frontend/src/components/Readiness/GReadinessChip.vue
index 88df9f28f9..baad6e4ac2 100644
--- a/frontend/src/components/Readiness/GReadinessChip.vue
+++ b/frontend/src/components/Readiness/GReadinessChip.vue
@@ -5,78 +5,79 @@ SPDX-License-Identifier: Apache-2.0
 -->
 
 <template>
-  <div v-if="visible">
-    <g-popover
-      v-model="internalValue"
-      :placement="popperPlacement"
-      :disabled="!condition.message"
-      :toolbar-title="popperTitle"
-      :toolbar-color="color"
-    >
-      <template #activator="{ props }">
-        <v-chip
-          v-bind="props"
-          ref="tagChipRef"
-          :class="{ 'cursor-pointer': condition.message }"
-          :variant="!isError ? 'tonal' : 'flat'"
-          :text-color="textColor"
-          size="small"
-          :color="color"
-          class="status-tag"
+  <g-popover
+    v-model="internalValue"
+    :placement="popperPlacement"
+    :disabled="!condition.message"
+    :toolbar-title="popperTitle"
+    :toolbar-color="color"
+  >
+    <template #activator="{ props: popoverProps }">
+      <v-chip
+        v-bind="popoverProps"
+        ref="tagChipRef"
+        :class="{ 'cursor-pointer': condition.message }"
+        :variant="!isError ? 'tonal' : 'flat'"
+        :text-color="textColor"
+        size="small"
+        :color="color"
+        class="status-tag"
+      >
+        <v-icon
+          v-if="chipIcon"
+          :icon="chipIcon"
+          size="x-small"
+          class="chip-icon"
+        />
+        {{ chipText }}
+        <v-tooltip
+          :activator="$refs.tagChipRef"
+          location="top"
+          max-width="400px"
+          :disabled="internalValue"
         >
-          <v-icon
-            v-if="chipIcon"
-            :icon="chipIcon"
-            size="x-small"
-            class="chip-icon"
-          />
-          {{ chipText }}
-          <v-tooltip
-            :activator="$refs.tagChipRef"
-            location="top"
-            max-width="400px"
-            :disabled="internalValue"
+          <div class="font-weight-bold">
+            {{ chipTooltip.title }}
+          </div>
+          <div>Status: {{ chipTooltip.status }}</div>
+          <div
+            v-for="({ shortDescription }) in chipTooltip.userErrorCodeObjects"
+            :key="shortDescription"
           >
-            <div class="font-weight-bold">
-              {{ chipTooltip.title }}
-            </div>
-            <div>Status: {{ chipTooltip.status }}</div>
-            <div
-              v-for="({ shortDescription }) in chipTooltip.userErrorCodeObjects"
-              :key="shortDescription"
+            <v-icon
+              class="mr-1"
+              color="white"
+              size="small"
             >
-              <v-icon
-                class="mr-1"
-                color="white"
-                size="small"
-              >
-                mdi-account-alert
-              </v-icon>
-              <span class="font-weight-bold text--lighten-2">{{ shortDescription }}</span>
+              mdi-account-alert
+            </v-icon>
+            <span class="font-weight-bold text--lighten-2">{{ shortDescription }}</span>
+          </div>
+          <template v-if="chipTooltip.description">
+            <v-divider color="white" />
+            <div>
+              {{ chipTooltip.description }}
             </div>
-            <template v-if="chipTooltip.description">
-              <v-divider color="white" />
-              <div>
-                {{ chipTooltip.description }}
-              </div>
-            </template>
-          </v-tooltip>
-        </v-chip>
-      </template>
-      <g-shoot-message-details
-        :status-title="chipStatus"
-        :last-message="nonErrorMessage"
-        :error-descriptions="errorDescriptions"
-        :last-transition-time="condition.lastTransitionTime"
-        :secret-binding-name="secretBindingName"
-        :namespace="shootMetadata.namespace"
-      />
-    </g-popover>
-  </div>
+          </template>
+        </v-tooltip>
+      </v-chip>
+    </template>
+    <g-shoot-message-details
+      :status-title="chipStatus"
+      :last-message="nonErrorMessage"
+      :error-descriptions="errorDescriptions"
+      :last-transition-time="condition.lastTransitionTime"
+      :secret-binding-name="secretBindingName"
+      :namespace="shootMetadata.namespace"
+    />
+  </g-popover>
 </template>
 
-<script>
-import { mapState } from 'pinia'
+<script setup>
+import {
+  inject,
+  computed,
+} from 'vue'
 
 import { useAuthnStore } from '@/store/authn'
 
@@ -88,167 +89,146 @@ import {
 } from '@/utils/errorCodes'
 
 import {
-  get,
   isEmpty,
   filter,
 } from '@/lodash'
 
-export default {
-  components: {
-    GShootMessageDetails,
+const props = defineProps({
+  condition: {
+    type: Object,
+    required: true,
   },
-  inject: [
-    'activePopoverKey',
-  ],
-  props: {
-    condition: {
-      type: Object,
-      required: true,
-    },
-    secretBindingName: {
-      type: String,
-    },
-    popperPlacement: {
-      type: String,
-    },
-    staleShoot: {
-      type: Boolean,
-    },
-    shootMetadata: {
-      type: Object,
-      default () {
-        return { uid: '' }
-      },
-    },
+  secretBindingName: {
+    type: String,
   },
-  computed: {
-    ...mapState(useAuthnStore, [
-      'isAdmin',
-    ]),
-    popoverKey () {
-      return `g-readiness-chip[${this.condition.type}]:${this.shootMetadata.uid}`
-    },
-    internalValue: {
-      get () {
-        return this.activePopoverKey === this.popoverKey
-      },
-      set (value) {
-        this.activePopoverKey = value ? this.popoverKey : ''
-      },
-    },
-    popperTitle () {
-      if (this.staleShoot) {
-        return 'Last Status'
-      }
-      return this.condition.name
-    },
-    chipText () {
-      return this.condition.shortName || ''
-    },
-    chipStatus () {
-      if (this.isError) {
-        return 'Error'
-      }
-      if (this.isUnknown) {
-        return 'Unknown'
-      }
-      if (this.isProgressing) {
-        return 'Progressing'
-      }
+  popperPlacement: {
+    type: String,
+  },
+  staleShoot: {
+    type: Boolean,
+  },
+  shootMetadata: {
+    type: Object,
+    default: () => ({ uid: '' }),
+  },
+})
+
+const activePopoverKey = inject('activePopoverKey')
+
+const authnStore = useAuthnStore()
+const isAdmin = computed(() => authnStore.isAdmin)
 
-      return 'Healthy'
-    },
-    chipTooltip () {
-      return {
-        title: this.condition.name,
-        status: this.chipStatus,
-        description: this.condition.description,
-        userErrorCodeObjects: filter(objectsFromErrorCodes(this.condition.codes), { userError: true }),
-      }
-    },
-    chipIcon () {
-      if (this.isUserError) {
-        return 'mdi-account-alert-outline'
-      }
-      if (this.isError) {
-        return 'mdi-alert-circle-outline'
-      }
-      if (this.isUnknown) {
-        return 'mdi-help-circle-outline'
-      }
-      if (this.isProgressing && this.isAdmin) {
-        return 'mdi-progress-alert'
-      }
+const popoverKey = computed(() => {
+  return `g-readiness-chip[${props.condition.type}]:${props.shootMetadata.uid}`
+})
 
-      return ''
-    },
-    isError () {
-      if (this.condition.status === 'False' || !isEmpty(this.condition.codes)) {
-        return true
-      }
-      return false
-    },
-    isUnknown () {
-      if (this.condition.status === 'Unknown') {
-        return true
-      }
-      return false
-    },
-    isProgressing () {
-      if (this.condition.status === 'Progressing') {
-        return true
-      }
-      return false
-    },
-    isUserError () {
-      return isUserError(this.condition.codes)
-    },
-    errorDescriptions () {
-      if (this.isError) {
-        return [
-          {
-            description: this.condition.message,
-            errorCodeObjects: objectsFromErrorCodes(this.condition.codes),
-          },
-        ]
-      }
-      return undefined
-    },
-    nonErrorMessage () {
-      if (!this.isError) {
-        return this.condition.message
-      }
-      return undefined
-    },
-    popperKeyWithType () {
-      return `statusTag_${this.popperKey}`
-    },
-    color () {
-      if (this.isUnknown || this.staleShoot) {
-        return 'unknown'
-      }
-      if (this.isError) {
-        return 'error'
-      }
-      if (this.isProgressing && this.isAdmin) {
-        return 'info'
-      }
-      return 'primary'
-    },
-    textColor () {
-      if (this.isError) {
-        return 'white'
-      }
-      return this.color
-    },
-    visible () {
-      if (!this.isAdmin) {
-        return !get(this.condition, 'showAdminOnly', false)
-      }
-      return true
-    },
+const internalValue = computed({
+  get () {
+    return activePopoverKey.value === popoverKey.value
   },
-}
+  set (value) {
+    activePopoverKey.value = value ? popoverKey.value : ''
+  },
+})
+
+const popperTitle = computed(() => {
+  if (props.staleShoot) {
+    return 'Last Status'
+  }
+  return props.condition.name
+})
+
+const chipText = computed(() => props.condition.shortName || '')
+
+const chipStatus = computed(() => {
+  if (isError.value) {
+    return 'Error'
+  }
+  if (isUnknown.value) {
+    return 'Unknown'
+  }
+  if (isProgressing.value) {
+    return 'Progressing'
+  }
+  return 'Healthy'
+})
+
+const chipTooltip = computed(() => ({
+  title: props.condition.name,
+  status: chipStatus.value,
+  description: props.condition.description,
+  userErrorCodeObjects: filter(objectsFromErrorCodes(props.condition.codes), { userError: true }),
+}))
+
+const chipIcon = computed(() => {
+  if (isUserError(props.condition.codes)) {
+    return 'mdi-account-alert-outline'
+  }
+  if (isError.value) {
+    return 'mdi-alert-circle-outline'
+  }
+  if (isUnknown.value) {
+    return 'mdi-help-circle-outline'
+  }
+  if (isProgressing.value && isAdmin.value) {
+    return 'mdi-progress-alert'
+  }
+  return ''
+})
+
+const isError = computed(() => {
+  if (props.condition.status === 'False' || !isEmpty(props.condition.codes)) {
+    return true
+  }
+  return false
+})
+
+const isUnknown = computed(() => {
+  return props.condition.status === 'Unknown'
+})
+
+const isProgressing = computed(() => {
+  return props.condition.status === 'Progressing'
+})
+
+const errorDescriptions = computed(() => {
+  if (isError.value) {
+    return [
+      {
+        description: props.condition.message,
+        errorCodeObjects: objectsFromErrorCodes(props.condition.codes),
+      },
+    ]
+  }
+  return undefined
+})
+
+const nonErrorMessage = computed(() => {
+  if (!isError.value) {
+    return props.condition.message
+  }
+  return undefined
+})
+
+const color = computed(() => {
+  if (isUnknown.value || props.staleShoot) {
+    return 'unknown'
+  }
+  if (isError.value) {
+    return 'error'
+  }
+  if (isProgressing.value && isAdmin.value) {
+    return 'info'
+  }
+  return 'primary'
+})
+
+const textColor = computed(() => {
+  if (isError.value) {
+    return 'white'
+  }
+  return color.value
+})
 </script>
 
 <style lang="scss" scoped>
diff --git a/frontend/src/components/Readiness/GShootReadiness.vue b/frontend/src/components/Readiness/GShootReadiness.vue
index 88b97fed4b..1e0e58fc7e 100644
--- a/frontend/src/components/Readiness/GShootReadiness.vue
+++ b/frontend/src/components/Readiness/GShootReadiness.vue
@@ -45,6 +45,7 @@ import {
 
 import { useConfigStore } from '@/store/config'
 import { useShootStore } from '@/store/shoot'
+import { useAuthnStore } from '@/store/authn'
 
 import GExternalLink from '@/components/GExternalLink.vue'
 
@@ -85,10 +86,10 @@ const {
 
 const configStore = useConfigStore()
 const shootStore = useShootStore()
+const authnStore = useAuthnStore()
 
 const conditions = computed(() => {
   const conditions = shootReadiness.value
-    .filter(condition => !!condition.lastTransitionTime)
     .map(condition => {
       const conditionDefaults = configStore.conditionForType(condition.type)
       return {
@@ -97,6 +98,7 @@ const conditions = computed(() => {
         sortOrder: padStart(conditionDefaults.sortOrder, 8, '0'),
       }
     })
+    .filter(condition => !!condition.lastTransitionTime && (!condition.showAdminOnly || authnStore.isAdmin))
   return sortBy(conditions, 'sortOrder')
 })
 

From 81554eaf80a6fea6b7943eeacd4bb1d6255a26b8 Mon Sep 17 00:00:00 2001
From: Lukas Gross <lukas.gross@sap.com>
Date: Tue, 2 Jul 2024 16:21:01 +0200
Subject: [PATCH 3/3] Added Readiness Health Bars (Alternative to Readiness
 Chips)

---
 .../components/GReadinessChip.spec.js         |  15 +-
 frontend/src/components/GShootListRow.vue     |   2 +-
 .../components/Readiness/GReadinessBar.vue    | 124 +++++++++++++++++
 .../components/Readiness/GReadinessChip.vue   | 112 +++------------
 .../components/Readiness/GShootReadiness.vue  |  55 +++++++-
 frontend/src/composables/useShootReadiness.js | 131 ++++++++++++++++++
 6 files changed, 334 insertions(+), 105 deletions(-)
 create mode 100644 frontend/src/components/Readiness/GReadinessBar.vue
 create mode 100644 frontend/src/composables/useShootReadiness.js

diff --git a/frontend/__tests__/components/GReadinessChip.spec.js b/frontend/__tests__/components/GReadinessChip.spec.js
index 3e064be818..a0b8d2086f 100644
--- a/frontend/__tests__/components/GReadinessChip.spec.js
+++ b/frontend/__tests__/components/GReadinessChip.spec.js
@@ -44,12 +44,11 @@ describe('components', () => {
       }, true)
       const vm = wrapper.vm
       expect(vm.chipText).toBe('foo')
-      expect(vm.chipStatus).toBe('Healthy')
+      expect(vm.statusTitle).toBe('Healthy')
       expect(vm.chipTooltip.title).toBe('foo-bar')
       expect(vm.chipIcon).toBe('')
       expect(vm.isError || vm.isUnknown || vm.isProgressing).toBe(false)
       expect(vm.color).toBe('primary')
-      expect(vm.visible).toBe(true)
     })
 
     it('should render condition with user error', () => {
@@ -63,15 +62,13 @@ describe('components', () => {
       })
       const vm = wrapper.vm
       expect(vm.chipText).toBe('foo')
-      expect(vm.chipStatus).toBe('Error')
+      expect(vm.statusTitle).toBe('Error')
       expect(vm.isError).toBe(true)
-      expect(vm.isUserError).toBe(true)
       expect(vm.chipIcon).toBe('mdi-account-alert-outline')
       expect(vm.color).toBe('error')
-      expect(vm.visible).toBe(true)
     })
 
-    it('should render accoring to admin status', () => {
+    it('should render according to admin status', () => {
       const condition = {
         shortName: 'foo',
         name: 'foo-bar',
@@ -80,18 +77,16 @@ describe('components', () => {
       }
       let wrapper = mountStatusTag(condition)
       const vm = wrapper.vm
-      expect(vm.visible).toBe(false)
       expect(vm.isProgressing).toBe(true)
       expect(vm.color).toBe('primary')
-      expect(vm.chipStatus).toBe('Progressing')
+      expect(vm.statusTitle).toBe('Progressing')
       expect(vm.chipIcon).toBe('')
 
       wrapper = mountStatusTag(condition, true)
       const vmAdmin = wrapper.vm
-      expect(vmAdmin.visible).toBe(true)
       expect(vmAdmin.isProgressing).toBe(true)
       expect(vmAdmin.color).toBe('info')
-      expect(vmAdmin.chipStatus).toBe('Progressing')
+      expect(vmAdmin.statusTitle).toBe('Progressing')
       expect(vmAdmin.chipIcon).toBe('mdi-progress-alert')
     })
   })
diff --git a/frontend/src/components/GShootListRow.vue b/frontend/src/components/GShootListRow.vue
index c253956fa1..318fdeea56 100644
--- a/frontend/src/components/GShootListRow.vue
+++ b/frontend/src/components/GShootListRow.vue
@@ -96,7 +96,7 @@ SPDX-License-Identifier: Apache-2.0
       </template>
       <template v-if="cell.header.key === 'readiness'">
         <div class="d-flex">
-          <g-shoot-readiness />
+          <g-shoot-readiness bar />
         </div>
       </template>
       <template v-if="cell.header.key === 'controlPlaneHighAvailability'">
diff --git a/frontend/src/components/Readiness/GReadinessBar.vue b/frontend/src/components/Readiness/GReadinessBar.vue
new file mode 100644
index 0000000000..d7ef2f6fdf
--- /dev/null
+++ b/frontend/src/components/Readiness/GReadinessBar.vue
@@ -0,0 +1,124 @@
+<!--
+SPDX-FileCopyrightText: 2024 SAP SE or an SAP affiliate company and Gardener contributors
+
+SPDX-License-Identifier: Apache-2.0
+-->
+<template>
+  <div :class="['health-segment', stateClass]">
+    <v-tooltip
+      :text="condition.name"
+      location="top"
+      activator="parent"
+      :disabled="internalPopoverValue"
+    />
+    <g-popover
+      v-model="internalPopoverValue"
+      :placement="popperPlacement"
+      :disabled="!condition.message"
+      :toolbar-title="popperTitle"
+      :toolbar-color="color"
+    >
+      <template #activator="{ props: popoverProps }">
+        <div
+          v-bind="popoverProps"
+          :class="{ 'cursor-pointer': condition.message }"
+          style="width:100%; height:100%; position: absolute;"
+        />
+      </template>
+      <g-shoot-message-details
+        :status-title="statusTitle"
+        :last-message="nonErrorMessage"
+        :error-descriptions="errorDescriptions"
+        :last-transition-time="condition.lastTransitionTime"
+        :secret-binding-name="secretBindingName"
+        :namespace="shootMetadata.namespace"
+      />
+    </g-popover>
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+
+import { useAuthnStore } from '@/store/authn'
+
+import GShootMessageDetails from '@/components/GShootMessageDetails.vue'
+
+import { useShootReadiness } from '@/composables/useShootReadiness'
+
+const props = defineProps({
+  condition: {
+    type: Object,
+    required: true,
+  },
+  secretBindingName: {
+    type: String,
+  },
+  popperPlacement: {
+    type: String,
+  },
+  staleShoot: {
+    type: Boolean,
+  },
+  shootMetadata: {
+    type: Object,
+    default: () => ({ uid: '' }),
+  },
+})
+
+const {
+  errorDescriptions,
+  statusTitle,
+  color,
+  nonErrorMessage,
+  internalPopoverValue,
+  popperTitle,
+  status,
+} = useShootReadiness(props.condition, props.staleShoot, props.shootMetadata)
+
+const authnStore = useAuthnStore()
+const isAdmin = computed(() => authnStore.isAdmin)
+
+const stateClass = computed(() => {
+  if (status.value === 'progressing' && !isAdmin.value) {
+    return 'health-segment-healthy'
+  }
+  return `health-segment-${status.value}`
+})
+</script>
+
+<style scoped>
+  .health-segment {
+    margin: 1px;
+    z-index: 1;
+    filter: brightness(1); /* Initial brightness */
+    transition: all .2s; /* Smooth transition */
+  }
+
+  .health-segment:hover {
+    filter: brightness(1.3); /* Brightness on hover */
+    z-index: 2;
+  }
+
+  .health-segment-healthy {
+    background-color: rgb(var(--v-theme-primary));
+    height: 19px;
+    margin-top: 0px;
+  }
+  .health-segment-progressing {
+    background-color: rgb(var(--v-theme-info));
+    height: 13px;
+    margin-top: 6px;
+  }
+  .health-segment-error {
+    background-color: rgb(var(--v-theme-error));
+    height: 19px;
+    margin-top: 21px;
+  }
+  .health-segment-unknown {
+    background-color: rgb(var(--v-theme-unknown));
+    height: 14px;
+    margin-top: 13px;
+  }
+
+</style>
diff --git a/frontend/src/components/Readiness/GReadinessChip.vue b/frontend/src/components/Readiness/GReadinessChip.vue
index baad6e4ac2..34b9a191a3 100644
--- a/frontend/src/components/Readiness/GReadinessChip.vue
+++ b/frontend/src/components/Readiness/GReadinessChip.vue
@@ -6,7 +6,7 @@ SPDX-License-Identifier: Apache-2.0
 
 <template>
   <g-popover
-    v-model="internalValue"
+    v-model="internalPopoverValue"
     :placement="popperPlacement"
     :disabled="!condition.message"
     :toolbar-title="popperTitle"
@@ -34,7 +34,7 @@ SPDX-License-Identifier: Apache-2.0
           :activator="$refs.tagChipRef"
           location="top"
           max-width="400px"
-          :disabled="internalValue"
+          :disabled="internalPopoverValue"
         >
           <div class="font-weight-bold">
             {{ chipTooltip.title }}
@@ -63,7 +63,7 @@ SPDX-License-Identifier: Apache-2.0
       </v-chip>
     </template>
     <g-shoot-message-details
-      :status-title="chipStatus"
+      :status-title="statusTitle"
       :last-message="nonErrorMessage"
       :error-descriptions="errorDescriptions"
       :last-transition-time="condition.lastTransitionTime"
@@ -74,24 +74,20 @@ SPDX-License-Identifier: Apache-2.0
 </template>
 
 <script setup>
-import {
-  inject,
-  computed,
-} from 'vue'
+import { computed } from 'vue'
 
 import { useAuthnStore } from '@/store/authn'
 
 import GShootMessageDetails from '@/components/GShootMessageDetails.vue'
 
+import { useShootReadiness } from '@/composables/useShootReadiness'
+
 import {
   isUserError,
   objectsFromErrorCodes,
 } from '@/utils/errorCodes'
 
-import {
-  isEmpty,
-  filter,
-} from '@/lodash'
+import { filter } from '@/lodash'
 
 const props = defineProps({
   condition: {
@@ -113,49 +109,26 @@ const props = defineProps({
   },
 })
 
-const activePopoverKey = inject('activePopoverKey')
+const {
+  isError,
+  isUnknown,
+  isProgressing,
+  errorDescriptions,
+  statusTitle,
+  color,
+  nonErrorMessage,
+  internalPopoverValue,
+  popperTitle,
+} = useShootReadiness(props.condition, props.staleShoot, props.shootMetadata)
 
 const authnStore = useAuthnStore()
 const isAdmin = computed(() => authnStore.isAdmin)
 
-const popoverKey = computed(() => {
-  return `g-readiness-chip[${props.condition.type}]:${props.shootMetadata.uid}`
-})
-
-const internalValue = computed({
-  get () {
-    return activePopoverKey.value === popoverKey.value
-  },
-  set (value) {
-    activePopoverKey.value = value ? popoverKey.value : ''
-  },
-})
-
-const popperTitle = computed(() => {
-  if (props.staleShoot) {
-    return 'Last Status'
-  }
-  return props.condition.name
-})
-
 const chipText = computed(() => props.condition.shortName || '')
 
-const chipStatus = computed(() => {
-  if (isError.value) {
-    return 'Error'
-  }
-  if (isUnknown.value) {
-    return 'Unknown'
-  }
-  if (isProgressing.value) {
-    return 'Progressing'
-  }
-  return 'Healthy'
-})
-
 const chipTooltip = computed(() => ({
   title: props.condition.name,
-  status: chipStatus.value,
+  status: statusTitle.value,
   description: props.condition.description,
   userErrorCodeObjects: filter(objectsFromErrorCodes(props.condition.codes), { userError: true }),
 }))
@@ -176,53 +149,6 @@ const chipIcon = computed(() => {
   return ''
 })
 
-const isError = computed(() => {
-  if (props.condition.status === 'False' || !isEmpty(props.condition.codes)) {
-    return true
-  }
-  return false
-})
-
-const isUnknown = computed(() => {
-  return props.condition.status === 'Unknown'
-})
-
-const isProgressing = computed(() => {
-  return props.condition.status === 'Progressing'
-})
-
-const errorDescriptions = computed(() => {
-  if (isError.value) {
-    return [
-      {
-        description: props.condition.message,
-        errorCodeObjects: objectsFromErrorCodes(props.condition.codes),
-      },
-    ]
-  }
-  return undefined
-})
-
-const nonErrorMessage = computed(() => {
-  if (!isError.value) {
-    return props.condition.message
-  }
-  return undefined
-})
-
-const color = computed(() => {
-  if (isUnknown.value || props.staleShoot) {
-    return 'unknown'
-  }
-  if (isError.value) {
-    return 'error'
-  }
-  if (isProgressing.value && isAdmin.value) {
-    return 'info'
-  }
-  return 'primary'
-})
-
 const textColor = computed(() => {
   if (isError.value) {
     return 'white'
diff --git a/frontend/src/components/Readiness/GShootReadiness.vue b/frontend/src/components/Readiness/GShootReadiness.vue
index 1e0e58fc7e..7c769213de 100644
--- a/frontend/src/components/Readiness/GShootReadiness.vue
+++ b/frontend/src/components/Readiness/GShootReadiness.vue
@@ -5,7 +5,28 @@ SPDX-License-Identifier: Apache-2.0
 -->
 
 <template>
-  <div class="d-flex flex-nowrap justify-start">
+  <div
+    v-if="bar"
+    class="health-bar-container"
+  >
+    <div class="x-axis" />
+    <div class="health-bar">
+      <g-readiness-bar
+        v-for="condition in conditions"
+        :key="condition.type"
+        :condition="condition"
+        :popper-placement="popperPlacement"
+        :secret-binding-name="shootSecretBindingName"
+        :shoot-metadata="shootMetadata"
+        :stale-shoot="isStaleShoot"
+        :style="healthSegmentStyles"
+      />
+    </div>
+  </div>
+  <div
+    v-else
+    class="d-flex flex-nowrap justify-start"
+  >
     <g-readiness-chip
       v-for="condition in conditions"
       :key="condition.type"
@@ -56,6 +77,7 @@ import {
   errorCodesFromArray,
 } from '@/utils/errorCodes'
 
+import GReadinessBar from './GReadinessBar.vue'
 import GReadinessChip from './GReadinessChip.vue'
 
 import {
@@ -71,6 +93,10 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
+  bar: {
+    type: Boolean,
+    default: false,
+  },
 })
 const {
   popperPlacement,
@@ -110,4 +136,31 @@ const errorCodeObjects = computed(() => {
 const isStaleShoot = computed(() => {
   return !shootStore.isShootActive(shootUid.value)
 })
+
+const healthSegmentStyles = computed(() => ({
+  width: `${100 / conditions.value.length}%`,
+}))
 </script>
+
+<style scoped>
+.health-bar-container {
+  position: relative;
+  height: 40px;
+  width: 80px;
+  background-color: rgba(var(--v-border-color), .05);
+}
+.health-bar {
+  display: flex;
+}
+
+.x-axis {
+  position: absolute;
+  bottom: 19px;
+  height: 2px;
+  left: 1px;
+  right: 1px;
+  background-color: rgba(var(--v-border-color), .5);
+  z-index: 0;
+}
+
+</style>
diff --git a/frontend/src/composables/useShootReadiness.js b/frontend/src/composables/useShootReadiness.js
new file mode 100644
index 0000000000..dd3bbf0bbd
--- /dev/null
+++ b/frontend/src/composables/useShootReadiness.js
@@ -0,0 +1,131 @@
+//
+// SPDX-FileCopyrightText: 2024 SAP SE or an SAP affiliate company and Gardener contributors
+//
+// SPDX-License-Identifier: Apache-2.0
+//
+
+import {
+  computed,
+  inject,
+} from 'vue'
+
+import { useAuthnStore } from '@/store/authn'
+
+import { objectsFromErrorCodes } from '@/utils/errorCodes'
+
+import {
+  isEmpty,
+  upperFirst,
+} from '@/lodash'
+
+export function useShootReadiness (condition, staleShoot = false, shootMetadata) {
+  const authnStore = useAuthnStore()
+
+  const isAdmin = computed(() => authnStore.isAdmin)
+
+  const isError = computed(() => {
+    if (condition.status === 'False' || !isEmpty(condition.codes)) {
+      return true
+    }
+    return false
+  })
+
+  const isUnknown = computed(() => {
+    if (condition.status === 'Unknown') {
+      return true
+    }
+    return false
+  })
+
+  const isProgressing = computed(() => {
+    if (condition.status === 'Progressing') {
+      return true
+    }
+    return false
+  })
+
+  const errorDescriptions = computed(() => {
+    if (isError.value) {
+      return [
+        {
+          description: condition.message,
+          errorCodeObjects: objectsFromErrorCodes(condition.codes),
+        },
+      ]
+    }
+    return undefined
+  })
+
+  const status = computed(() => {
+    if (isUnknown.value || staleShoot) {
+      return 'unknown'
+    }
+    if (isError.value) {
+      return 'error'
+    }
+    if (isProgressing.value) {
+      return 'progressing'
+    }
+    return 'healthy'
+  })
+
+  const popoverKey = computed(() => {
+    return `g-readiness-chip[${condition.type}]:${shootMetadata.uid}`
+  })
+
+  const popperTitle = computed(() => {
+    if (staleShoot) {
+      return 'Last Status'
+    }
+    return condition.name
+  })
+
+  const statusTitle = computed(() => {
+    return upperFirst(status.value)
+  })
+
+  const nonErrorMessage = computed(() => {
+    if (!isError.value) {
+      return condition.message
+    }
+    return undefined
+  })
+
+  const color = computed(() => {
+    if (status.value === 'progressing') {
+      if (isAdmin.value) {
+        return 'info'
+      }
+      return 'primary'
+    }
+    if (status.value === 'healthy') {
+      return 'primary'
+    }
+    return status.value
+  })
+
+  const activePopoverKey = inject('activePopoverKey')
+
+  const internalPopoverValue = computed({
+    get () {
+      return activePopoverKey?.value === popoverKey.value
+    },
+    set (value) {
+      activePopoverKey.value = value ? popoverKey.value : ''
+    },
+  })
+
+  return {
+    isError,
+    isUnknown,
+    isProgressing,
+    errorDescriptions,
+    status,
+    popoverKey,
+    popperTitle,
+    statusTitle,
+    nonErrorMessage,
+    color,
+    internalPopoverValue,
+  }
+}