Add a warning in case new networks extend the network configuration (#…

…1194)

* Add a warning in case new networks extend the network configuration (aws/alicloud)

* Removed spacing between code lines

* Moved zones error message to fixed (not scrollable) area
Show zone configuration as yaml (not json)
Use CodeBlock to highlight yaml

* make warning alert outlined

* Apply suggestions from code review

Co-authored-by: Holger Koser <[email protected]>

* fixed compile errors

Co-authored-by: Holger Koser <[email protected]>

frontend/src/components/ShootWorkers/ManageWorkers.vue

@@ -71,6 +71,7 @@ import assign from 'lodash/assign'
 import isEmpty from 'lodash/isEmpty'
 import flatMap from 'lodash/flatMap'
 import difference from 'lodash/difference'
+import get from 'lodash/get'
 import { v4 as uuidv4 } from '@/utils/uuid'
 
 const NO_LIMIT = -1
@@ -158,12 +159,18 @@ export default {
     },
     cloudProviderKind () {
       const cloudProfile = this.cloudProfileByName(this.cloudProfileName)
-      return cloudProfile.metadata.cloudProviderKind
+      return get(cloudProfile, 'metadata.cloudProviderKind')
     },
     currentZonesNetworkConfiguration () {
       return getZonesNetworkConfiguration(this.zonesNetworkConfiguration, this.internalWorkers, this.cloudProviderKind, this.allZones.length, this.existingWorkerCIDR)
     }
   },
+  watch: {
+    currentZonesNetworkConfiguration (value) {
+      const additionalZonesNetworkConfiguration = difference(this.currentZonesNetworkConfiguration, this.zonesNetworkConfiguration)
+      this.$emit('additionalZonesNetworkConfiguration', additionalZonesNetworkConfiguration)
+    }
+  },
   methods: {
     setInternalWorkers (workers) {
       this.internalWorkers = []

frontend/src/components/ShootWorkers/WorkerConfiguration.vue

@@ -17,15 +17,36 @@ SPDX-License-Identifier: Apache-2.0
     <template v-slot:actionComponent>
       <manage-workers
         @valid="onWorkersValid"
+        @additionalZonesNetworkConfiguration="setNetworkConfiguration"
         ref="manageWorkers"
         v-on="$manageWorkers.hooks"
       ></manage-workers>
     </template>
+    <template v-slot:errorMessage>
+      <v-alert
+        type="warning"
+        outlined
+        tile
+        prominent
+        v-if="networkConfiguration.length"
+        dismissible
+        @input="setNetworkConfiguration(undefined)"
+        class="mx-1">
+        <span>Adding addtional zones will extend the zone network configuration by adding new networks to your cluster:</span>
+        <code-block
+          lang="code"
+          :content="networkConfigurationYaml"
+          :show-copy-button="false"
+          ></code-block>
+        <span class="font-weight-bold">This change cannot be undone.</span>
+      </v-alert>
+    </template>
   </action-button-dialog>
 </template>
 
 <script>
 import ActionButtonDialog from '@/components/dialogs/ActionButtonDialog'
+import CodeBlock from '@/components/CodeBlock'
 import { patchShootProvider } from '@/utils/api'
 import shootItem from '@/mixins/shootItem'
 import asyncRef from '@/mixins/asyncRef'
@@ -39,12 +60,15 @@ export default {
   name: 'worker-configuration',
   components: {
     ActionButtonDialog,
-    ManageWorkers
+    ManageWorkers,
+    CodeBlock
   },
   data () {
     return {
       workersValid: false,
-      workers: undefined
+      workers: undefined,
+      networkConfiguration: [],
+      networkConfigurationYaml: undefined
     }
   },
   mixins: [
@@ -95,6 +119,15 @@ export default {
     },
     onWorkersValid (value) {
       this.workersValid = value
+    },
+    async setNetworkConfiguration (value) {
+      if (value) {
+        this.networkConfiguration = value
+        this.networkConfigurationYaml = await this.$yaml.safeDump(value)
+      } else {
+        this.networkConfiguration = []
+        this.networkConfigurationYaml = undefined
+      }
     }
   }
 }

frontend/src/components/dialogs/ActionButtonDialog.vue

@@ -45,6 +45,7 @@ SPDX-License-Identifier: Apache-2.0
       <template v-slot:caption>{{caption}}</template>
       <template v-slot:affectedObjectName>{{shootName}}</template>
       <template v-slot:message><slot name="actionComponent"></slot></template>
+      <template v-slot:errorMessage><slot name="errorMessage"></slot></template>
     </g-dialog>
   </div>
   <div v-else style="width: 36px"></div>

frontend/src/components/dialogs/GDialog.vue

@@ -22,8 +22,9 @@ SPDX-License-Identifier: Apache-2.0
         <slot name="message">
           This is a generic dialog template.
         </slot>
-        <g-message color="error" class="mt-4" :message.sync="message" :detailed-message.sync="detailedMessage"></g-message>
       </v-card-text>
+      <slot name="errorMessage"></slot>
+      <g-message color="error" class="mt-4" :message.sync="message" :detailed-message.sync="detailedMessage"></g-message>
       <v-divider></v-divider>
       <v-card-actions>
         <v-spacer></v-spacer>