Fixed worker zone network management for existing shoots

frontend/src/components/ShootWorkers/GWorkerConfiguration.vue

@@ -108,7 +108,6 @@ import {
   ref,
   computed,
   provide,
-  watch,
 } from 'vue'
 import { useVuelidate } from '@vuelidate/core'
 import yaml from 'js-yaml'
@@ -133,6 +132,7 @@ import {
   isEmpty,
   pick,
   isEqual,
+  map,
 } from '@/lodash'
 
 export default {
@@ -154,8 +154,7 @@ export default {
     const {
       providerWorkers,
       providerInfrastructureConfigNetworksZones,
-      initialZones,
-      usedZones,
+      initialProviderInfrastructureConfigNetworksZones,
       setShootManifest,
     } = useShootContext()
 
@@ -167,16 +166,17 @@ export default {
     const disableWorkerAnimation = ref(false)
     const newZonesAlert = ref(true)
 
-    const newZones = computed(() => {
+    const newZoneNetworks = computed(() => {
+      const initialNetworkNames = map(initialProviderInfrastructureConfigNetworksZones.value, 'name')
       return filter(providerInfrastructureConfigNetworksZones.value, ({ name }) => {
-        return !includes(initialZones.value, name)
+        return !includes(initialNetworkNames, name)
       })
     })
 
     const newZonesYaml = computed(() => {
-      return isEmpty(newZones.value)
+      return isEmpty(newZoneNetworks.value)
         ? undefined
-        : yaml.dump(newZones.value)
+        : yaml.dump(newZoneNetworks.value)
     })
 
     const editorData = computed({
@@ -222,10 +222,6 @@ export default {
       disableLineHighlighting: true,
     }))
 
-    watch(usedZones, value => {
-      providerInfrastructureConfigNetworksZones.value = filter(providerInfrastructureConfigNetworksZones.value, zone => includes(value, zone.name))
-    })
-
     return {
       v$: useVuelidate(),
       shootItem,

frontend/src/components/ShootWorkers/GWorkerInputGeneric.vue

@@ -195,6 +195,7 @@ import {
   set,
   head,
   pick,
+  every,
 } from '@/lodash'
 
 export default {
@@ -422,8 +423,14 @@ export default {
       return sortBy(concat(this.selectedZones, this.unselectedZones), 'text')
     },
     zoneHint () {
+      const allAvailable = every(this.allZones, zone =>
+        includes(this.availableZones, zone),
+      )
+      if (allAvailable) {
+        return ''
+      }
       if (this.maxAdditionalZones >= this.availableZones.length) {
-        return undefined
+        return ''
       }
       if (this.maxAdditionalZones === 0) {
         return 'Your network configuration does not allow to add more zones that are not already used by this cluster'

frontend/src/composables/useShootContext.js

@@ -108,6 +108,10 @@ export function createShootContextComposable (options = {}) {
     return uniq(flatMap(workers, 'zones'))
   })
 
+  const initialProviderInfrastructureConfigNetworksZones = computed(() => {
+    return get(initialManifest.value, 'spec.provider.infrastructureConfig.networks.zones')
+  })
+
   /* manifest */
   const manifest = ref({})
 
@@ -982,6 +986,7 @@ export function createShootContextComposable (options = {}) {
     providerInfrastructureConfigFirewallSize,
     providerInfrastructureConfigFloatingPoolName,
     providerInfrastructureConfigNetworksZones,
+    initialProviderInfrastructureConfigNetworksZones,
     providerInfrastructureConfigPartitionID,
     providerInfrastructureConfigProjectID,
     /* provider - workers */