Skip to content

Commit

Permalink
K8s machineimage version warning (#511)
Browse files Browse the repository at this point in the history
* Implemented select hint colorizer component

* Show hint in case kubernetes patch updates are enabled and selected kubernetes version is not latest patch

* removed vm.nexttick workarounds where possible

* use colorizer component to colorize machineimage hint
Show hint in case user does not select latest machine image and has automatic operating system updates enabled

* Filter invalid kubernetes / machine image versions

* renamed variable

* changes as discussed
added tests

* Fixed: Addon dialog not resetted properly
Fixed: Vendor icon error in console for unknown infrastructure providers

* Cleaned unit tests

* cleaned store tests

* Update frontend/src/components/NewShoot/NewShootDetails.vue

Co-Authored-By: Peter Sutter <peter.sutter@sap.com>

* changes as discussed

* test getters directly

* improved tests

* use startsWith

Co-authored-by: Peter Sutter <peter.sutter@sap.com>
  • Loading branch information
grolu and petersutter committed Jan 13, 2020
1 parent 73fdcc9 commit 65a161b
Show file tree
Hide file tree
Showing 16 changed files with 637 additions and 125 deletions.
68 changes: 46 additions & 22 deletions frontend/src/components/NewShoot/NewShootDetails.vue
Original file line number Diff line number Diff line change
Expand Up @@ -30,26 +30,30 @@ limitations under the License.
></v-text-field>
</v-flex>
<v-flex class="regularInput">
<v-select
color="cyan darken-2"
label="Kubernetes Version"
item-text="version"
item-value="version"
:items="sortedKubernetesVersionsList"
v-model="kubernetesVersion"
:error-messages="getErrorMessages('kubernetesVersion')"
@input="onInputKubernetesVersion"
@blur="$v.kubernetesVersion.$touch()"
>
<template v-slot:item="{ item }">
<v-list-tile-content>
<v-list-tile-title>{{item.version}}</v-list-tile-title>
<v-list-tile-sub-title v-if="item.expirationDateString">
<span>Expires: {{item.expirationDateString}}</span>
</v-list-tile-sub-title>
</v-list-tile-content>
</template>
</v-select>
<select-hint-colorizer hintColor="orange">
<v-select
color="cyan darken-2"
label="Kubernetes Version"
item-text="version"
item-value="version"
:items="sortedKubernetesVersionsList"
v-model="kubernetesVersion"
:error-messages="getErrorMessages('kubernetesVersion')"
@input="onInputKubernetesVersion"
@blur="$v.kubernetesVersion.$touch()"
:hint="versionHint"
persistent-hint
>
<template v-slot:item="{ item }">
<v-list-tile-content>
<v-list-tile-title>{{item.version}}</v-list-tile-title>
<v-list-tile-sub-title v-if="item.expirationDateString">
<span>Expires: {{item.expirationDateString}}</span>
</v-list-tile-sub-title>
</v-list-tile-content>
</template>
</v-select>
</select-hint-colorizer>
</v-flex>
<v-flex class="regularInput">
<v-select
Expand All @@ -69,12 +73,15 @@ limitations under the License.

<script>
import SelectHintColorizer from '@/components/SelectHintColorizer'
import { mapGetters, mapState } from 'vuex'
import { getValidationErrors, purposesForSecret } from '@/utils'
import { required, maxLength } from 'vuelidate/lib/validators'
import { resourceName, noStartEndHyphen, noConsecutiveHyphen } from '@/utils/validators'
import head from 'lodash/head'
import get from 'lodash/get'
import find from 'lodash/find'
import semver from 'semver'
const validationErrors = {
name: {
Expand Down Expand Up @@ -115,6 +122,7 @@ const validations = {
export default {
name: 'new-shoot-details',
components: {
SelectHintColorizer
},
props: {
userInterActionBus: {
Expand All @@ -130,7 +138,8 @@ export default {
purpose: undefined,
valid: false,
cloudProfileName: undefined,
secret: undefined
secret: undefined,
updateK8sMaintenance: undefined
}
},
validations,
Expand All @@ -147,6 +156,17 @@ export default {
},
sortedKubernetesVersionsList () {
return this.sortedKubernetesVersions(this.cloudProfileName)
},
versionHint () {
if (this.updateK8sMaintenance && this.versionIsNotLatestPatch) {
return 'If you select a version which is not the latest patch version, you may want to disable automatic Kubernetes updates'
}
return undefined
},
versionIsNotLatestPatch () {
return !!find(this.sortedKubernetesVersionsList, ({ version }) => {
return semver.diff(version, this.kubernetesVersion) === 'patch' && semver.gt(version, this.kubernetesVersion)
})
}
},
methods: {
Expand Down Expand Up @@ -188,12 +208,13 @@ export default {
purpose: this.purpose
}
},
setDetailsData ({ name, kubernetesVersion, purpose, cloudProfileName, secret }) {
setDetailsData ({ name, kubernetesVersion, purpose, cloudProfileName, secret, updateK8sMaintenance }) {
this.name = name
this.cloudProfileName = cloudProfileName
this.secret = secret
this.kubernetesVersion = kubernetesVersion
this.purpose = purpose
this.updateK8sMaintenance = updateK8sMaintenance
this.validateInput()
}
Expand All @@ -207,6 +228,9 @@ export default {
this.cloudProfileName = cloudProfileName
this.setDefaultKubernetesVersion()
})
this.userInterActionBus.on('updateK8sMaintenance', updateK8sMaintenance => {
this.updateK8sMaintenance = updateK8sMaintenance
})
}
}
</script>
Expand Down
68 changes: 68 additions & 0 deletions frontend/src/components/SelectHintColorizer.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,68 @@
<!--
Copyright (c) 2019 by SAP SE or an SAP affiliate company. All rights reserved. This file is licensed under the Apache Software License, v. 2 except as noted otherwise in the LICENSE file
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
-->

<template>
<div>
<slot></slot>
</div>
</template>

<script>
export default {
name: 'select-hint-colorizer',
props: {
hintColor: {
type: String
}
},
watch: {
hintColor (hintColor) {
this.applyHintColor(hintColor)
}
},
methods: {
applyHintColor (hintColor) {
if (!this.$el) {
return
}
const elementClasses = this.$el.classList
elementClasses.forEach((className) => {
if (className.startsWith('hintColor-')) {
elementClasses.remove(className)
}
})
if (hintColor !== 'default') {
elementClasses.add(`hintColor-${hintColor}`)
}
}
},
mounted () {
this.applyHintColor(this.hintColor)
}
}
</script>

<style lang="styl" scoped>
@import '~vuetify/src/stylus/settings/_colors.styl';
.hintColor-orange {
>>>.v-messages__wrapper {
.v-messages__message {
color: $orange.darken-2 !important;
}
}
}
</style>
3 changes: 1 addition & 2 deletions frontend/src/components/ShootAddons/ManageAddons.vue
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,6 @@ limitations under the License.
<script>
import { mapGetters, mapState } from 'vuex'
import filter from 'lodash/filter'
import assign from 'lodash/assign'
import cloneDeep from 'lodash/cloneDeep'
import { shootAddonList } from '@/utils'
Expand Down Expand Up @@ -67,7 +66,7 @@ export default {
},
updateAddons (addons) {
this.resetAddonList(addons)
assign(this.addons, cloneDeep(addons))
this.addons = cloneDeep(addons)
},
resetAddonList (addons) {
this.addonDefinitionList = filter(shootAddonList, addon => {
Expand Down
30 changes: 28 additions & 2 deletions frontend/src/components/ShootMaintenance/MaintenanceComponents.vue
Original file line number Diff line number Diff line change
Expand Up @@ -69,6 +69,10 @@ limitations under the License.
export default {
name: 'maintenance-components',
props: {
userInterActionBus: {
type: Object,
required: true
},
title: {
type: String,
default: 'Auto Update'
Expand All @@ -80,11 +84,33 @@ export default {
},
data () {
return {
osUpdates: false,
k8sUpdates: false
k8sUpdatesInternal: false,
osUpdatesInternal: false
}
},
computed: {
k8sUpdates: {
get () {
return this.k8sUpdatesInternal
},
set (value) {
this.k8sUpdatesInternal = value
if (this.userInterActionBus) {
this.userInterActionBus.emit('updateK8sMaintenance', value)
}
}
},
osUpdates: {
get () {
return this.osUpdatesInternal
},
set (value) {
this.osUpdatesInternal = value
if (this.userInterActionBus) {
this.userInterActionBus.emit('updateOSMaintenance', value)
}
}
},
showNoUpdates () {
return !this.selectable && !this.osUpdates && !this.k8sUpdates
}
Expand Down
Loading

0 comments on commit 65a161b

Please sign in to comment.