From e73a22cfcdb5c63d6c29daf76ff6095c375584bb Mon Sep 17 00:00:00 2001
From: Lukas Gross <lukas.gross@sap.com>
Date: Fri, 28 Aug 2020 13:16:07 +0200
Subject: [PATCH 1/4] Implementation reflects current state of this feature in
 Gardener

---
 .../ShootWorkers/ContainerRuntime.vue         | 142 ++++++++++++++++++
 .../ShootWorkers/WorkerInputGeneric.vue       |  27 +++-
 frontend/src/store/index.js                   |   3 +-
 3 files changed, 169 insertions(+), 3 deletions(-)
 create mode 100644 frontend/src/components/ShootWorkers/ContainerRuntime.vue

diff --git a/frontend/src/components/ShootWorkers/ContainerRuntime.vue b/frontend/src/components/ShootWorkers/ContainerRuntime.vue
new file mode 100644
index 0000000000..1455e9183f
--- /dev/null
+++ b/frontend/src/components/ShootWorkers/ContainerRuntime.vue
@@ -0,0 +1,142 @@
+<template>
+  <div class="d-flex flex-row">
+    <v-select
+      color="cyan darken-2"
+      item-color="cyan darken-2"
+      :items="containerRuntimeItems"
+      :error-messages="getErrorMessages('containerRuntime')"
+      @input="onInputContainerRuntime"
+      @blur="$v.containerRuntime.$touch()"
+      v-model="containerRuntime"
+      label="Container Runtime"
+    ></v-select>
+    <v-select
+      v-if="ociRuntimeItems.length"
+      class="ml-1"
+      color="cyan darken-2"
+      item-color="cyan darken-2"
+      :items="ociRuntimeItems"
+      :error-messages="getErrorMessages('ociRuntime')"
+      @input="onInputOciRuntime"
+      @blur="$v.ociRuntime.$touch()"
+      v-model="ociRuntime"
+      label="OCI Runtime"
+      multiple
+    ></v-select>
+  </div>
+</template>
+
+<script>
+import { required, requiredIf } from 'vuelidate/lib/validators'
+import { getValidationErrors } from '@/utils'
+import uniq from 'lodash/uniq'
+import find from 'lodash/find'
+import map from 'lodash/map'
+import isEqual from 'lodash/isEqual'
+import get from 'lodash/get'
+import set from 'lodash/set'
+import unset from 'lodash/unset'
+
+// The following runtimes are defaults that are always offered.
+// Selecting a default Container / OCI Runtime will not create a CRI config in the shoot worker
+const DEFAULT_CONTAINER_RUNTIME = 'docker'
+const DEFAULT_OCI_RUNTIME = 'runc'
+
+const validationErrors = {
+  containerRuntime: {
+    required: 'Container Runtime is required'
+  },
+  ociRuntime: {
+    required: 'OCI Runtime is required'
+  }
+}
+
+const validations = {
+  containerRuntime: {
+    required
+  },
+  ociRuntime: {
+    required: requiredIf(function () {
+      return this.ociRuntimeItems.length
+    })
+  }
+}
+
+export default {
+  props: {
+    worker: {
+      type: Object,
+      required: true
+    },
+    machineImageCri: {
+      type: Array,
+      default: () => []
+    }
+  },
+  data () {
+    return {
+      validationErrors,
+      valid: undefined,
+      containerRuntime: undefined,
+      ociRuntime: undefined
+    }
+  },
+  validations,
+  computed: {
+    containerRuntimeItems () {
+      const containerRuntimes = map(this.machineImageCri, 'name')
+      return uniq([...containerRuntimes, DEFAULT_CONTAINER_RUNTIME])
+    },
+    ociRuntimeItems () {
+      if (this.containerRuntime === DEFAULT_CONTAINER_RUNTIME) {
+        return [DEFAULT_OCI_RUNTIME]
+      }
+      const containerRuntime = find(this.machineImageCri, { name: this.containerRuntime })
+      const ociRuntimes = get(containerRuntime, 'containerRuntimes', [])
+      return map(ociRuntimes, 'type')
+    }
+  },
+  methods: {
+    getErrorMessages (field) {
+      return getValidationErrors(this, field)
+    },
+    onInputContainerRuntime (value) {
+      if (value && value !== DEFAULT_CONTAINER_RUNTIME) {
+        set(this.worker, 'cri.name', value)
+      } else {
+        unset(this.worker, 'cri')
+      }
+      this.ociRuntime = undefined
+      this.$v.containerRuntime.$touch()
+      this.validateInput()
+    },
+    onInputOciRuntime (value) {
+      if (value.length && !isEqual(value, [DEFAULT_OCI_RUNTIME])) {
+        const containerRuntimes = map(value, ociRuntime => ({ type: ociRuntime }))
+        set(this.worker, 'cri.containerRuntimes', containerRuntimes)
+      } else {
+        unset(this.worker, 'cri.containerRuntimes')
+      }
+      this.$v.ociRuntime.$touch()
+      this.validateInput()
+    },
+    validateInput () {
+      if (this.valid !== !this.$v.$invalid) {
+        this.valid = !this.$v.$invalid
+        this.$emit('valid', { id: this.worker.id, valid: this.valid })
+      }
+    }
+  },
+  mounted () {
+    this.containerRuntime = get(this.worker, 'cri.name', DEFAULT_CONTAINER_RUNTIME)
+    const ociRuntime = get(this.worker, 'cri.containerRuntimes')
+    if (ociRuntime) {
+      this.ociRuntime = map(ociRuntime, 'type')
+    } else {
+      this.ociRuntime = [DEFAULT_OCI_RUNTIME]
+    }
+    this.$v.$touch()
+    this.validateInput()
+  }
+}
+</script>
diff --git a/frontend/src/components/ShootWorkers/WorkerInputGeneric.vue b/frontend/src/components/ShootWorkers/WorkerInputGeneric.vue
index c170b0f7ef..ca4daa25e5 100644
--- a/frontend/src/components/ShootWorkers/WorkerInputGeneric.vue
+++ b/frontend/src/components/ShootWorkers/WorkerInputGeneric.vue
@@ -46,6 +46,13 @@ limitations under the License.
         @valid="onMachineImageValid">
         </machine-image>
       </div>
+      <div class="regularInput">
+        <container-runtime
+        :machineImageCri="machineImageCri"
+        :worker="worker"
+        @valid="onContainerRuntimeValid">
+        </container-runtime>
+      </div>
       <div v-if="volumeInCloudProfile" class="regularInput">
         <volume-type
         :volumeTypes="volumeTypes"
@@ -131,11 +138,13 @@ import SizeInput from '@/components/ShootWorkers/VolumeSizeInput'
 import MachineType from '@/components/ShootWorkers/MachineType'
 import VolumeType from '@/components/ShootWorkers/VolumeType'
 import MachineImage from '@/components/ShootWorkers/MachineImage'
+import ContainerRuntime from '@/components/ShootWorkers/ContainerRuntime'
 import isEmpty from 'lodash/isEmpty'
 import filter from 'lodash/filter'
 import map from 'lodash/map'
 import includes from 'lodash/includes'
 import sortBy from 'lodash/sortBy'
+import find from 'lodash/find'
 import { required, maxLength, minValue, requiredIf } from 'vuelidate/lib/validators'
 import { getValidationErrors, parseSize } from '@/utils'
 import { uniqueWorkerName, minVolumeSize, resourceName, noStartEndHyphen, numberOrPercentage } from '@/utils/validators'
@@ -174,7 +183,8 @@ export default {
     SizeInput,
     MachineType,
     VolumeType,
-    MachineImage
+    MachineImage,
+    ContainerRuntime
   },
   props: {
     worker: {
@@ -217,6 +227,7 @@ export default {
       machineTypeValid: undefined,
       volumeTypeValid: true, // selection not shown in all cases, default to true
       machineImageValid: undefined,
+      containerRuntimeValid: undefined,
       immutableZones: undefined
     }
   },
@@ -333,6 +344,12 @@ export default {
         return `Your network configuration allows to add ${this.maxAdditionalZones} more zones that are not already used by this cluster`
       }
       return undefined
+    },
+    selectedMachineImage () {
+      return find(this.machineImages, this.worker.machine.image)
+    },
+    machineImageCri () {
+      return this.selectedMachineImage.cri
     }
   },
   methods: {
@@ -391,8 +408,14 @@ export default {
         this.validateInput()
       }
     },
+    onContainerRuntimeValid ({ valid }) {
+      if (this.containerRuntimeValid !== valid) {
+        this.containerRuntimeValid = valid
+        this.validateInput()
+      }
+    },
     validateInput () {
-      const valid = !this.$v.$invalid && this.machineTypeValid && this.volumeTypeValid && this.machineImageValid
+      const valid = !this.$v.$invalid && this.machineTypeValid && this.volumeTypeValid && this.machineImageValid && this.containerRuntimeValid
       if (this.valid !== valid) {
         this.valid = valid
         this.$emit('valid', { id: this.worker.id, valid: this.valid })
diff --git a/frontend/src/store/index.js b/frontend/src/store/index.js
index 3dba3622cd..c6003928d2 100644
--- a/frontend/src/store/index.js
+++ b/frontend/src/store/index.js
@@ -379,7 +379,7 @@ const getters = {
           return semver.rcompare(a.version, b.version)
         })
 
-        return map(versions, ({ version, expirationDate, classification }) => {
+        return map(versions, ({ version, expirationDate, cri, classification }) => {
           const vendorName = vendorNameFromImageName(machineImage.name)
           const name = machineImage.name
 
@@ -387,6 +387,7 @@ const getters = {
             key: name + '/' + version,
             name,
             version,
+            cri,
             classification,
             isPreview: classification === 'preview',
             isSupported: classification === 'supported',

From 9288133273ed894cfddcd93c3c63150d6dfaa194 Mon Sep 17 00:00:00 2001
From: Lukas Gross <lukas.gross@sap.com>
Date: Wed, 5 May 2021 15:44:58 +0200
Subject: [PATCH 2/4] Show container runtimes selection as disabled for
 existing workers

---
 .../ShootWorkers/ContainerRuntime.vue         | 66 ++++++++++++++++---
 .../ShootWorkers/WorkerInputGeneric.vue       |  8 ++-
 2 files changed, 63 insertions(+), 11 deletions(-)

diff --git a/frontend/src/components/ShootWorkers/ContainerRuntime.vue b/frontend/src/components/ShootWorkers/ContainerRuntime.vue
index 1455e9183f..c4097a1fcd 100644
--- a/frontend/src/components/ShootWorkers/ContainerRuntime.vue
+++ b/frontend/src/components/ShootWorkers/ContainerRuntime.vue
@@ -1,28 +1,59 @@
+
+<!--
+SPDX-FileCopyrightText: 2021 SAP SE or an SAP affiliate company and Gardener contributors
+
+SPDX-License-Identifier: Apache-2.0
+-->
+
 <template>
   <div class="d-flex flex-row">
     <v-select
-      color="cyan darken-2"
-      item-color="cyan darken-2"
+      color="primary"
+      item-color="primary"
       :items="containerRuntimeItems"
       :error-messages="getErrorMessages('containerRuntime')"
       @input="onInputContainerRuntime"
       @blur="$v.containerRuntime.$touch()"
       v-model="containerRuntime"
       label="Container Runtime"
-    ></v-select>
+      :disabled="immutableCri"
+      :hint="criHint"
+      persistent-hint
+    >
+      <template v-slot:item="{ item }">
+        <span v-if="!immutableCri && item===defaultCir">default ({{item}})</span>
+        <span v-else>{{item}}</span>
+      </template>
+      <template v-slot:selection="{ item }">
+        <span v-if="!immutableCri && item===defaultCir">default ({{item}})</span>
+        <span v-else>{{item}}</span>
+      </template>
+    </v-select>
     <v-select
       v-if="ociRuntimeItems.length"
       class="ml-1"
-      color="cyan darken-2"
-      item-color="cyan darken-2"
+      color="primary"
+      item-color="primary"
       :items="ociRuntimeItems"
       :error-messages="getErrorMessages('ociRuntime')"
       @input="onInputOciRuntime"
       @blur="$v.ociRuntime.$touch()"
       v-model="ociRuntime"
-      label="OCI Runtime"
+      label="OCI Runtimes"
       multiple
-    ></v-select>
+      :disabled="immutableCri"
+      :hint="ociHint"
+      persistent-hint
+    >
+      <template v-slot:item="{ item }">
+        <span v-if="!immutableCri && item===defaultOci">default ({{item}})</span>
+        <span v-else>{{item}}</span>
+      </template>
+      <template v-slot:selection="{ item }">
+        <span v-if="!immutableCri && item===defaultOci">default ({{item}})</span>
+        <span v-else>{{item}}</span>
+      </template>
+    </v-select>
   </div>
 </template>
 
@@ -39,6 +70,7 @@ import unset from 'lodash/unset'
 
 // The following runtimes are defaults that are always offered.
 // Selecting a default Container / OCI Runtime will not create a CRI config in the shoot worker
+// Currently, this is hard-coded in Gardener. Once this can be configured or default is removed, we need to adapt
 const DEFAULT_CONTAINER_RUNTIME = 'docker'
 const DEFAULT_OCI_RUNTIME = 'runc'
 
@@ -71,6 +103,10 @@ export default {
     machineImageCri: {
       type: Array,
       default: () => []
+    },
+    immutableCri: {
+      type: Boolean,
+      default: false
     }
   },
   data () {
@@ -78,7 +114,9 @@ export default {
       validationErrors,
       valid: undefined,
       containerRuntime: undefined,
-      ociRuntime: undefined
+      ociRuntime: undefined,
+      defaultCir: DEFAULT_CONTAINER_RUNTIME,
+      defaultOci: DEFAULT_OCI_RUNTIME
     }
   },
   validations,
@@ -94,6 +132,18 @@ export default {
       const containerRuntime = find(this.machineImageCri, { name: this.containerRuntime })
       const ociRuntimes = get(containerRuntime, 'containerRuntimes', [])
       return map(ociRuntimes, 'type')
+    },
+    criHint () {
+      if (this.immutableCri) {
+        return 'Container runtime cannot be changed after worker has been created'
+      }
+      return undefined
+    },
+    ociHint () {
+      if (this.immutableCri) {
+        return 'OCI runtimes cannot be changed after worker has been created'
+      }
+      return undefined
     }
   },
   methods: {
diff --git a/frontend/src/components/ShootWorkers/WorkerInputGeneric.vue b/frontend/src/components/ShootWorkers/WorkerInputGeneric.vue
index 6bf857fa0f..5c14ee4bdb 100644
--- a/frontend/src/components/ShootWorkers/WorkerInputGeneric.vue
+++ b/frontend/src/components/ShootWorkers/WorkerInputGeneric.vue
@@ -38,8 +38,9 @@ SPDX-License-Identifier: Apache-2.0
       </div>
       <div class="regularInput">
         <container-runtime
-        :machineImageCri="machineImageCri"
+        :machine-image-cri="machineImageCri"
         :worker="worker"
+        :immutable-cri="immutableCri"
         @valid="onContainerRuntimeValid">
         </container-runtime>
       </div>
@@ -138,7 +139,6 @@ import find from 'lodash/find'
 import concat from 'lodash/concat'
 import last from 'lodash/last'
 import difference from 'lodash/difference'
-import find from 'lodash/find'
 import get from 'lodash/get'
 import set from 'lodash/set'
 import { required, maxLength, minValue, requiredIf } from 'vuelidate/lib/validators'
@@ -223,7 +223,8 @@ export default {
       machineImageValid: undefined,
       containerRuntimeValid: undefined,
       immutableZones: undefined,
-      volumeSizeInternal: undefined
+      volumeSizeInternal: undefined,
+      immutableCri: undefined
     }
   },
   validations () {
@@ -502,6 +503,7 @@ export default {
     this.setVolumeDependingOnMachineType()
     this.onInputVolumeSize()
     this.immutableZones = this.isNew ? [] : this.worker.zones
+    this.immutableCri = !this.isNew
   }
 }
 </script>

From 7c085222bfbe6c75a092bb75fff2741ddb44cf3a Mon Sep 17 00:00:00 2001
From: Lukas Gross <35373687+grolu@users.noreply.github.com>
Date: Thu, 6 May 2021 10:27:02 +0200
Subject: [PATCH 3/4] Apply suggestions from code review

Co-authored-by: Holger Koser <holger.koser@sap.com>
---
 .../ShootWorkers/ContainerRuntime.vue         | 23 +++++++++++--------
 .../ShootWorkers/WorkerInputGeneric.vue       |  8 +++----
 2 files changed, 17 insertions(+), 14 deletions(-)

diff --git a/frontend/src/components/ShootWorkers/ContainerRuntime.vue b/frontend/src/components/ShootWorkers/ContainerRuntime.vue
index c4097a1fcd..53206714e6 100644
--- a/frontend/src/components/ShootWorkers/ContainerRuntime.vue
+++ b/frontend/src/components/ShootWorkers/ContainerRuntime.vue
@@ -20,13 +20,12 @@ SPDX-License-Identifier: Apache-2.0
       :hint="criHint"
       persistent-hint
     >
+```suggestion
       <template v-slot:item="{ item }">
-        <span v-if="!immutableCri && item===defaultCir">default ({{item}})</span>
-        <span v-else>{{item}}</span>
+        <span>{{criItemText(item)}}</span>
       </template>
       <template v-slot:selection="{ item }">
-        <span v-if="!immutableCri && item===defaultCir">default ({{item}})</span>
-        <span v-else>{{item}}</span>
+        <span>{{criItemText(item)}}</span>
       </template>
     </v-select>
     <v-select
@@ -46,12 +45,10 @@ SPDX-License-Identifier: Apache-2.0
       persistent-hint
     >
       <template v-slot:item="{ item }">
-        <span v-if="!immutableCri && item===defaultOci">default ({{item}})</span>
-        <span v-else>{{item}}</span>
+        <span>{{ociItemText(item)}}</span>
       </template>
       <template v-slot:selection="{ item }">
-        <span v-if="!immutableCri && item===defaultOci">default ({{item}})</span>
-        <span v-else>{{item}}</span>
+        <span>{{ociItemText(item)}}</span>
       </template>
     </v-select>
   </div>
@@ -115,7 +112,7 @@ export default {
       valid: undefined,
       containerRuntime: undefined,
       ociRuntime: undefined,
-      defaultCir: DEFAULT_CONTAINER_RUNTIME,
+      defaultCri: DEFAULT_CONTAINER_RUNTIME,
       defaultOci: DEFAULT_OCI_RUNTIME
     }
   },
@@ -129,7 +126,7 @@ export default {
       if (this.containerRuntime === DEFAULT_CONTAINER_RUNTIME) {
         return [DEFAULT_OCI_RUNTIME]
       }
-      const containerRuntime = find(this.machineImageCri, { name: this.containerRuntime })
+      const containerRuntime = find(this.machineImageCri, ['name', this.containerRuntime])
       const ociRuntimes = get(containerRuntime, 'containerRuntimes', [])
       return map(ociRuntimes, 'type')
     },
@@ -147,6 +144,12 @@ export default {
     }
   },
   methods: {
+    ociItemText (item) {
+      return !this.immutableCri && item === this.defaultOci ? `default (${item})` : item
+    },
+    criItemText (item) {
+      return !this.immutableCri && item === this.defaultCri ? `default (${item})` : item
+    },
     getErrorMessages (field) {
       return getValidationErrors(this, field)
     },
diff --git a/frontend/src/components/ShootWorkers/WorkerInputGeneric.vue b/frontend/src/components/ShootWorkers/WorkerInputGeneric.vue
index 5c14ee4bdb..d8fed5714b 100644
--- a/frontend/src/components/ShootWorkers/WorkerInputGeneric.vue
+++ b/frontend/src/components/ShootWorkers/WorkerInputGeneric.vue
@@ -38,10 +38,10 @@ SPDX-License-Identifier: Apache-2.0
       </div>
       <div class="regularInput">
         <container-runtime
-        :machine-image-cri="machineImageCri"
-        :worker="worker"
-        :immutable-cri="immutableCri"
-        @valid="onContainerRuntimeValid">
+          :machine-image-cri="machineImageCri"
+          :worker="worker"
+          :immutable-cri="immutableCri"
+          @valid="onContainerRuntimeValid">
         </container-runtime>
       </div>
       <div v-if="volumeInCloudProfile" class="regularInput">

From b7ce48c4cd44a8981b42ec257a3b2f90c918dbde Mon Sep 17 00:00:00 2001
From: Lukas Gross <lukas.gross@sap.com>
Date: Thu, 6 May 2021 10:34:25 +0200
Subject: [PATCH 4/4] fix suggestion

---
 frontend/src/components/ShootWorkers/ContainerRuntime.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/frontend/src/components/ShootWorkers/ContainerRuntime.vue b/frontend/src/components/ShootWorkers/ContainerRuntime.vue
index 53206714e6..20aaee0e3f 100644
--- a/frontend/src/components/ShootWorkers/ContainerRuntime.vue
+++ b/frontend/src/components/ShootWorkers/ContainerRuntime.vue
@@ -20,7 +20,6 @@ SPDX-License-Identifier: Apache-2.0
       :hint="criHint"
       persistent-hint
     >
-```suggestion
       <template v-slot:item="{ item }">
         <span>{{criItemText(item)}}</span>
       </template>