Merge pull request #4132 from westlywright/feature.eks.v2.nodegroup.versions

Expose node group versions on eks v2 node groups

app/models/cluster.js

@@ -270,6 +270,18 @@ export default Resource.extend(Grafana, ResourceUsage, {
     return out;
   }),
 
+  nodeGroupVersionUpdate: computed('appliedSpec.eksConfig.kubernetesVersion', 'appliedSpec.eksConfig.nodeGroups.@each.{version}', function() {
+    if (isEmpty(get(this, 'appliedSpec.eksConfig.nodeGroups'))) {
+      return false;
+    }
+
+    const kubernetesVersion = get(this, 'appliedSpec.eksConfig.kubernetesVersion');
+    const nodeGroupVersions = (get(this, 'appliedSpec.eksConfig.nodeGroups') || []).getEach('version');
+
+    return nodeGroupVersions.any((ngv) => ngv !== kubernetesVersion);
+  }),
+
+
   certsExpiring: computed('certificatesExpiration', function() {
     let { certificatesExpiration = {}, expiringCerts } = this;
 

lib/global-admin/addon/components/cluster-row/template.hbs

@@ -11,18 +11,22 @@
     {{#link-to-external "authenticated.cluster" model.id}}
       {{model.displayName}}
     {{/link-to-external}}
-
-    {{#if (and model.displayWarnings.length (not-eq model.state "waiting") (not-eq model.state "provisioning"))}}
+    {{#if
+      (and
+        model.displayWarnings.length
+        (not-eq model.state "waiting")
+        (not-eq model.state "provisioning")
+      )
+    }}
       {{#tooltip-element
-         type="tooltip-basic"
-         tooltipTemplate='tooltip-multi-lines'
-         model=model.displayWarnings
-         inlineBlock=true
+        type="tooltip-basic"
+        tooltipTemplate="tooltip-multi-lines"
+        model=model.displayWarnings
+        inlineBlock=true
       }}
-        <i class="icon icon-alert text-error" />
+        <i class="icon icon-alert text-error"></i>
       {{/tooltip-element}}
     {{/if}}
-
     {{#if model.certsExpiring}}
       {{#tooltip-element
         type="tooltip-expiring"
@@ -31,18 +35,34 @@
         aria-describedby="tooltip-base"
         tooltipFor="tooltipCertExpire"
       }}
-        <i class="icon icon-alert text-warning" />
+        <i class="icon icon-alert text-warning"></i>
+      {{/tooltip-element}}
+    {{/if}}
+    {{#if model.nodeGroupVersionUpdate}}
+      {{#tooltip-element
+        type="tooltip-node-group-update"
+        model=model
+        tooltipTemplate="tooltip-static"
+        aria-describedby="tooltip-base"
+        tooltipFor="tooltipNodeGroupVersionUpdate"
+      }}
+        <i class="icon icon-alert text-warning"></i>
       {{/tooltip-element}}
     {{/if}}
-
     {{cluster-template-revision-upgrade-notification cluster=model}}
   </td>
   <td data-title="{{dt.provider}}">
     {{#if model.version.gitVersion}}
-      <small>{{model.displayProvider}}</small>
-      <p class="text-small text-muted m-0">{{model.version.gitVersion}}</p>
+      <small>
+        {{model.displayProvider}}
+      </small>
+      <p class="text-small text-muted m-0">
+        {{model.version.gitVersion}}
+      </p>
     {{else}}
-      <small>{{model.displayProvider}}</small>
+      <small>
+        {{model.displayProvider}}
+      </small>
     {{/if}}
   </td>
   {{#if (eq model.state "inactive")}}
@@ -53,7 +73,9 @@
     <td data-title="{{dt.nodes}}">
       {{#link-to-external "authenticated.cluster.nodes" model.id}}
         {{#if (gt (get subMatches model.id) 0)}}
-          <b>{{model.machines.length}}</b>
+          <b>
+            {{model.machines.length}}
+          </b>
         {{else}}
           {{model.machines.length}}
         {{/if}}
@@ -61,19 +83,26 @@
     </td>
     <td data-title="{{dt.cpu}}">
       {{#if model.cpuUsage}}
-        <small>{{model.cpuUsage}}</small>
-        <p class="text-small text-muted m-0">{{model.cpuPercent}}</p>
+        <small>
+          {{model.cpuUsage}}
+        </small>
+        <p class="text-small text-muted m-0">
+          {{model.cpuPercent}}
+        </p>
       {{else}}
         <span class="text-muted">
           {{t "generic.na"}}
         </span>
       {{/if}}
     </td>
-
     <td data-title="{{dt.memory}}">
       {{#if model.memoryUsage}}
-        <small>{{model.memoryUsage}}</small>
-        <p class="text-small text-muted m-0">{{model.memoryPercent}}</p>
+        <small>
+          {{model.memoryUsage}}
+        </small>
+        <p class="text-small text-muted m-0">
+          {{model.memoryPercent}}
+        </p>
       {{else}}
         <span class="text-muted">
           {{t "generic.na"}}
@@ -81,11 +110,10 @@
       {{/if}}
     </td>
   {{/if}}
-  <td data-title="{{dt.actions}} "class="actions">
+  <td data-title="{{dt.actions}}" class="actions">
     {{action-menu model=model}}
   </td>
 </tr>
-
 {{#if model.showTransitioningMessage}}
   {{error-sub-row fullColspan=fullColspan model=model}}
 {{/if}}

lib/monitoring/addon/components/cluster-dashboard/component.js

@@ -29,6 +29,9 @@ export default Component.extend(CatalogUpgrade, {
   componentStatuses: alias('scope.currentCluster.componentStatuses'),
 
   actions: {
+    edit() {
+      this.cluster.send('edit');
+    },
     rotate() {
       this.cluster.send('rotateCertificates');
     },

lib/monitoring/addon/components/cluster-dashboard/template.hbs

@@ -3,6 +3,11 @@
     <p>{{t "tooltipExpire.label"}} {{#if cluster.canRotateCerts}}<a href="#" {{action "rotate"}}>{{t "tooltipExpire.link"}}</a>{{/if}}</p>
   {{/banner-message}}
 {{/if}}
+{{#if cluster.nodeGroupVersionUpdate}}
+  {{#banner-message color="bg-warning"}}
+    <p>{{t "tooltipNodeGroupUpdate.label"}} <a href="#" {{action "edit"}}>{{t "tooltipNodeGroupUpdate.link"}}</a></p>
+  {{/banner-message}}
+{{/if}}
 {{#if showDashboard}}
   {{cluster-basic-info cluster=cluster}}
 

lib/shared/addon/components/cluster-driver/driver-eks/template.hbs

@@ -537,9 +537,12 @@
       <div class="row">
         {{#each config.nodeGroups as |nodeGroup|}}
           <NodeGroupRow
-            @model={{nodeGroup}}
+            @clusterConfig={{config}}
             @keyPairs={{filteredKeyPairs}}
+            @model={{nodeGroup}}
+            @mode={{mode}}
             @removeNodeGroup={{action "removeNodeGroup"}}
+            @versions={{versionChoices}}
           />
         {{else}}
           <div class="p-20">

lib/shared/addon/components/node-group-row/component.js

@@ -1,37 +1,55 @@
 import Component from '@ember/component';
 import layout from './template';
 import { INSTANCE_TYPES } from 'shared/utils/amazon';
-import { set } from '@ember/object';
+import { get, set, observer, computed } from '@ember/object';
+import { on } from '@ember/object/evented';
+import { equal } from '@ember/object/computed';
 
 export default Component.extend({
   layout,
   classNames:    ['row', 'mb-20'],
-  editing:       true,
-  instanceTypes: INSTANCE_TYPES,
-  keyPairs:      null,
 
+  instanceTypes: INSTANCE_TYPES,
+
+  clusterConfig: null,
+  keyPairs:      null,
+  mode:          null,
+  model:         null,
+  versions:      null,
+
+  editing:       equal('mode', 'edit'),
   actions: {
     setTags(section) {
-      const { model: { tags = {} } } = this;
-
-      for (let key in section) {
-        tags[key] = section[key];
-      }
-
-      set(this, 'model.tags', tags);
+      set(this, 'model.tags', section);
     },
 
     setLabels(section) {
-      const { model: { labels = {} } } = this;
-
-      for (let key in section) {
-        labels[key] = section[key];
-      }
-
-      set(this, 'model.labels', labels);
+      set(this, 'model.labels', section);
     },
   },
 
+  shouldDisableVersionSelect: computed('clusterConfig.kubernetesVersion', function() {
+    const {
+      clusterConfig,
+      model,
+    } = this;
+
+
+    if (get(model, 'version') === get(clusterConfig, 'kubernetesVersion') ) {
+      return true;
+    }
+
+    return false;
+  }),
+
+  clusterVersionDidChange: on('init', observer('clusterConfig.kubernetesVersion', function() {
+    const { clusterConfig, editing } = this;
+
+    if (get(clusterConfig, 'kubernetesVersion') && !editing) {
+      set(this, 'model.version', clusterConfig.kubernetesVersion);
+    }
+  })),
+
   removeNodeGroup() {
     throw new Error('remove node group action is required!');
   },

lib/shared/addon/components/node-group-row/template.hbs

@@ -1,26 +1,40 @@
 <div class="box">
   <div class="row">
-    <div class="pull-right">
-      <button
-        class="btn bg-transparent text-small vertical-middle"
-        type="button"
-        {{action removeNodeGroup model}}
-      >
-        {{t "nodeGroupRow.remove.label"}}
-      </button>
+    <div class="row">
+      <div class="pull-right">
+        <button
+          class="btn bg-transparent text-small vertical-middle"
+          type="button"
+          {{action removeNodeGroup model}}
+        >
+          {{t "nodeGroupRow.remove.label"}}
+        </button>
+      </div>
     </div>
-    <div class="col span-6">
-      <label class="acc-label">
-        {{t "nodeGroupRow.name.label"}}
-      </label>
-      <Input
-        @type="text"
-        @value={{mut model.nodegroupName}}
-        @classNames="form-control"
-      />
+    <div class="row">
+      <div class="col span-6">
+        <label class="acc-label">
+          {{t "nodeGroupRow.name.label"}}
+        </label>
+        <Input
+          @type="text"
+          @value={{mut model.nodegroupName}}
+          @classNames="form-control"
+        />
+      </div>
+      <div class="col span-6">
+        <label class="acc-label">
+          {{t "nodeGroupRow.version.label"}}
+        </label>
+          {{new-select
+            disabled=shouldDisableVersionSelect
+            classNames="form-control"
+            content=versions
+            value=model.version
+          }}
+      </div>
     </div>
   </div>
-
   <div class="row">
     <div class="col span-6">
       <label class="acc-label">
@@ -29,7 +43,7 @@
       <NewSelect
         class="form-control"
         @value={{mut model.instanceType}}
-        @content={{ instanceTypes }}
+        @content={{instanceTypes}}
         @optionValuePath="name"
         @optionLabelPath="name"
         @optionGroupPath="group"
@@ -52,7 +66,6 @@
       </div>
     </div>
   </div>
-
   <div class="row">
     <div class="col span-6">
       <label class="acc-label">
@@ -65,7 +78,6 @@
       />
     </div>
   </div>
-
   <div class="row">
     <div class="col span-6">
       <label class="acc-label">
@@ -88,7 +100,6 @@
       />
     </div>
   </div>
-
   <div class="row">
     <div class="col span-6">
       <label class="acc-label">
@@ -124,7 +135,6 @@
       </div>
     </div>
   </div>
-
   <div class="row">
     <div class="col span-6">
       <label class="acc-label">

lib/shared/addon/components/tooltip-node-group-update/component.js

@@ -0,0 +1,17 @@
+import Component from '@ember/component';
+import layout from './template';
+import Tooltip from 'shared/mixins/tooltip';
+import { alias } from '@ember/object/computed';
+
+export default Component.extend(Tooltip, {
+  layout,
+
+  model: alias('tooltipService.tooltipOpts.model'),
+
+  actions: {
+    updateNodeGroup() {
+      this.model.send('edit')
+      this.tooltipService.hide();
+    }
+  }
+});

lib/shared/addon/components/tooltip-node-group-update/template.hbs

@@ -0,0 +1,10 @@
+<span class="tooltip-node-group-update">
+  <p class="mb-5">
+    {{t "tooltipNodeGroupUpdate.label"}}
+  </p>
+  <p>
+    <span class="text-link hand" {{on "click" (action "updateNodeGroup")}}>
+      {{t "tooltipNodeGroupUpdate.link"}}
+    </span>
+  </p>
+</span>

lib/shared/app/components/tooltip-node-group-update/component.js

@@ -0,0 +1 @@
+export { default } from 'shared/components/tooltip-node-group-update/component';

translations/en-us.yaml

@@ -7402,6 +7402,8 @@ nodeGroupRow:
     addLabel: Add Tag
   remove:
     label: Remove Node Group
+  version:
+    label: Kubernetes Version
 
 
 uploadFile:
@@ -9600,6 +9602,10 @@ tooltipExpire:
   label: 'This cluster has certs that are expiring or have expired.'
   link: 'Rotate Now'
 
+tooltipNodeGroupUpdate:
+  label: A node group Kubernetes version can be updated.
+  link: Edit Version
+
 tooltipToggleOverride:
   label: 'Allow user override?'