[DRAFT] Introduce new Readiness Bar Chart

frontend/__tests__/components/GStatusTag.spec.js → 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(),
@@ -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')
     })
   })

frontend/__tests__/components/GStatusTags.spec.js → 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(),

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 bar />
         </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'