Add support for ARM Machine Images / Machine Types (#1261)

* Show architecture next to machine type and image in select control. Filter not supported images * Show architecture in worker group description * Changed Implementation to have a dedicated selection for the machine architecture * PR Feedback * PR Feedback * PR Feedback * Renamed properties as discussed
gardener · Sep 1, 2022 · 0a96501 · 0a96501
1 parent 644f6eb
commit 0a96501
Show file tree

Hide file tree

Showing 8 changed files with 227 additions and 80 deletions.
diff --git a/frontend/src/components/ShootWorkers/ContainerRuntime.vue b/frontend/src/components/ShootWorkers/ContainerRuntime.vue
@@ -7,16 +7,20 @@ SPDX-License-Identifier: Apache-2.0
 
 <template>
   <div class="d-flex flex-row">
-    <v-select
-      color="primary"
-      item-color="primary"
-      :items="criItems"
-      :error-messages="getErrorMessages('criName')"
-      @input="onInputCriName"
-      @blur="$v.criName.$touch()"
-      v-model="criName"
-      label="Container Runtime"
-    ></v-select>
+    <hint-colorizer hint-color="warning">
+      <v-select
+        color="primary"
+        item-color="primary"
+        :items="criItems"
+        :error-messages="getErrorMessages('criName')"
+        @input="onInputCriName"
+        @blur="$v.criName.$touch()"
+        v-model="criName"
+        label="Container Runtime"
+        :hint="hint"
+        persistent-hint
+      ></v-select>
+    </hint-colorizer>
     <v-select
       v-if="criContainerRuntimeTypes.length"
       class="ml-1"
@@ -34,6 +38,7 @@ SPDX-License-Identifier: Apache-2.0
 </template>
 
 <script>
+import HintColorizer from '@/components/HintColorizer'
 import { getValidationErrors } from '@/utils'
 import { required } from 'vuelidate/lib/validators'
 import find from 'lodash/find'
@@ -46,12 +51,14 @@ import isEmpty from 'lodash/isEmpty'
 
 const validationErrors = {
   criName: {
-    required: 'An explicit container runtime configuration is required',
-    validCriName: 'The selected machine image does not support the selected container runtime'
+    required: 'An explicit container runtime configuration is required'
   }
 }
 
 export default {
+  components: {
+    HintColorizer
+  },
   props: {
     worker: {
       type: Object,
@@ -72,8 +79,10 @@ export default {
       validationErrors
     }
   },
-  validations () {
-    return this.validators
+  validations: {
+    criName: {
+      required
+    }
   },
   computed: {
     validCriNames () {
@@ -86,7 +95,7 @@ export default {
           text: name
         }
       })
-      if (this.criName && !includes(criItems, this.criName)) {
+      if (this.criName && this.notInList) {
         criItems.push({
           value: this.criName,
           text: this.criName,
@@ -127,15 +136,15 @@ export default {
         }
       }
     },
-    validators () {
-      return {
-        criName: {
-          required,
-          validCriName: value => {
-            return includes(this.validCriNames, value)
-          }
-        }
+    notInList () {
+      // notInList: selected value may have been removed from cloud profile or other worker changes do not support current selection anymore
+      return !includes(this.validCriNames, this.criName)
+    },
+    hint () {
+      if (this.notInList) {
+        return 'The container runtime may not be supported by the selected machine image'
       }
+      return undefined
     }
   },
   methods: {

diff --git a/frontend/src/components/ShootWorkers/MachineImage.vue b/frontend/src/components/ShootWorkers/MachineImage.vue
@@ -7,7 +7,7 @@ SPDX-License-Identifier: Apache-2.0
   <v-select
     color="primary"
     item-color="primary"
-    :items="machineImages"
+    :items="machineImageItems"
     item-value="key"
     return-object
     :error-messages="getErrorMessages('worker.machine.image')"
@@ -46,8 +46,6 @@ import VendorIcon from '@/components/VendorIcon'
 import MultiMessage from '@/components/MultiMessage'
 import { required } from 'vuelidate/lib/validators'
 import { getValidationErrors, selectedImageIsNotLatest, transformHtml } from '@/utils'
-import includes from 'lodash/includes'
-import map from 'lodash/map'
 import pick from 'lodash/pick'
 import find from 'lodash/find'
 import join from 'lodash/join'
@@ -97,10 +95,24 @@ export default {
     }
   },
   computed: {
+    machineImageItems () {
+      const machineImages = [...this.machineImages]
+      if (this.notInList) {
+        machineImages.push({
+          ...this.worker.machine.image,
+          key: 'notInList'
+        })
+      }
+      return machineImages
+    },
+    notInList () {
+      // notInList: selected value may have been removed from cloud profile or other worker changes do not support current selection anymore
+      return !find(this.machineImages, this.worker.machine.image)
+    },
     machineImage: {
       get () {
         const { name, version } = this.worker.machine.image || {}
-        return find(this.machineImages, { name, version }) || {}
+        return find(this.machineImageItems, { name, version }) || {}
       },
       set (machineImage) {
         this.worker.machine.image = pick(machineImage, ['name', 'version'])
@@ -136,6 +148,13 @@ export default {
           severity: 'warning'
         })
       }
+      if (this.notInList) {
+        hints.push({
+          type: 'text',
+          hint: 'This image may not be supported by the selected machine type',
+          severity: 'warning'
+        })
+      }
       return JSON.stringify(hints)
     },
     hintColor () {
@@ -183,14 +202,6 @@ export default {
   mounted () {
     this.$v.$touch()
     this.validateInput()
-  },
-  watch: {
-    machineImages (updatedMachineImages) {
-      if (!includes(map(updatedMachineImages, 'name'), this.worker.machine.image)) {
-        this.worker.machine.image = undefined
-        this.onInputMachineImage()
-      }
-    }
   }
 }
 </script>

diff --git a/frontend/src/components/ShootWorkers/MachineType.vue b/frontend/src/components/ShootWorkers/MachineType.vue
@@ -22,7 +22,9 @@ SPDX-License-Identifier: Apache-2.0
     >
       <template v-slot:item="{ item }">
         <v-list-item-content>
-          <v-list-item-title>{{item.name}}</v-list-item-title>
+          <v-list-item-title>
+            {{item.name}}
+          </v-list-item-title>
           <v-list-item-subtitle>
             <span v-if="item.cpu">CPU: {{item.cpu}} | </span>
             <span v-if="item.gpu">GPU: {{item.gpu}} | </span>
@@ -31,6 +33,9 @@ SPDX-License-Identifier: Apache-2.0
           </v-list-item-subtitle>
         </v-list-item-content>
       </template>
+      <template v-slot:selection="{ item }">
+         {{item.name}}
+      </template>
     </v-select>
   </hint-colorizer>
 </template>
@@ -83,19 +88,20 @@ export default {
   },
   computed: {
     machineTypeItems () {
-      const machineTypes = this.machineTypes.slice()
-      if (this.notInCloudProfile) {
+      const machineTypes = [...this.machineTypes]
+      if (this.notInList) {
         machineTypes.push({
           name: this.worker.machine.type
         })
       }
       return machineTypes
     },
-    notInCloudProfile () {
+    notInList () {
+      // notInList: selected value may have been removed from cloud profile or other worker changes do not support current selection anymore
       return !find(this.machineTypes, ['name', this.worker.machine.type])
     },
     hint () {
-      if (this.notInCloudProfile) {
+      if (this.notInList) {
         return 'This machine type may not be supported by your worker'
       }
       return undefined

diff --git a/frontend/src/components/ShootWorkers/WorkerConfiguration.vue b/frontend/src/components/ShootWorkers/WorkerConfiguration.vue
@@ -10,7 +10,7 @@ SPDX-License-Identifier: Apache-2.0
     :valid="workersValid"
     @dialog-opened="onConfigurationDialogOpened"
     ref="actionDialog"
-    width="1200"
+    width="1250"
     confirm-required
     caption="Configure Workers"
     disable-confirm-input-focus>

diff --git a/frontend/src/components/ShootWorkers/WorkerGroup.vue b/frontend/src/components/ShootWorkers/WorkerGroup.vue
@@ -22,7 +22,9 @@ SPDX-License-Identifier: Apache-2.0
     <v-list class="pa-0">
       <v-list-item v-for="({title, value, description}) in workerGroupDescriptions" :key="title" class="px-0">
         <v-list-item-content class="pt-1">
-          <v-list-item-subtitle>{{title}}</v-list-item-subtitle>
+          <v-list-item-subtitle>
+            {{title}}
+          </v-list-item-subtitle>
           <v-list-item-title>{{value}} {{description}}</v-list-item-title>
         </v-list-item-content>
       </v-list-item>
@@ -36,6 +38,7 @@ import GPopper from '@/components/GPopper'
 import VendorIcon from '@/components/VendorIcon'
 import find from 'lodash/find'
 import join from 'lodash/join'
+import map from 'lodash/map'
 import get from 'lodash/get'
 import { mapGetters } from 'vuex'
 
@@ -76,6 +79,14 @@ export default {
     },
     workerGroupDescriptions () {
       const description = []
+      const machineArchitecture = this.workerGroup.machine.architecture
+      if (machineArchitecture) {
+        description.push({
+          title: 'Machine Architecture',
+          value: machineArchitecture
+        })
+      }
+
       description.push(this.machineTypeDescription)
       const volumeTypeDescription = this.volumeTypeDescription
       if (volumeTypeDescription) {
@@ -87,6 +98,21 @@ export default {
       }
       description.push(this.machineImageDescription)
 
+      const cri = this.workerGroup.cri
+      if (cri) {
+        let value
+        if (cri.containerRuntimes?.length) {
+          const containerRuntimes = map(cri.containerRuntimes, 'type')
+          value = `${cri.name} (${join(containerRuntimes, ', ')})`
+        } else {
+          value = cri.name
+        }
+        description.push({
+          title: 'Container Runtime',
+          value
+        })
+      }
+
       const { minimum, maximum, maxSurge, zones = [] } = this.workerGroup
       if (minimum >= 0 && maximum >= 0) {
         description.push({
@@ -183,8 +209,10 @@ export default {
       const machineImage = this.machineImage
       if (!machineImage) {
         item.description = '(Image is expired)'
-      } else if (machineImage.expirationDate) {
-        item.description = `(Expires: ${machineImage.expirationDateString})`
+      } else {
+        if (machineImage.expirationDate) {
+          item.description = `(Expires: ${machineImage.expirationDateString})`
+        }
       }
 
       return item