Merge pull request #3382 from codyrancher/template-revision

Include Template/Revision Upgrade Notifications

app/models/cluster.js

@@ -2,7 +2,7 @@ import { get, set, computed, observer } from '@ember/object';
 import { on } from '@ember/object/evented';
 import { inject as service } from '@ember/service';
 import Resource from '@rancher/ember-api-store/models/resource';
-import { hasMany } from '@rancher/ember-api-store/utils/denormalize';
+import { hasMany, reference } from '@rancher/ember-api-store/utils/denormalize';
 import ResourceUsage from 'shared/mixins/resource-usage';
 import Grafana from 'shared/mixins/grafana';
 import { equal, alias } from '@ember/object/computed';
@@ -11,6 +11,7 @@ import C from 'ui/utils/constants';
 import { isEmpty } from '@ember/utils';
 import moment from 'moment';
 const TRUE = 'True';
+const CLUSTER_TEMPLATE_ID_PREFIX = 'cattle-global-data:';
 
 export default Resource.extend(Grafana, ResourceUsage, {
   globalStore: service(),
@@ -29,6 +30,8 @@ export default Resource.extend(Grafana, ResourceUsage, {
   grafanaDashboardName:        'Cluster',
   isMonitoringReady:           false,
   _cachedConfig:               null,
+  clusterTemplate:             reference('clusterTemplateId'),
+  clusterTemplateRevision:     reference('clusterTemplateRevisionId'),
   machines:                    alias('nodes'),
   roleTemplateBindings:        alias('clusterRoleTemplateBindings'),
   isAKS:                       equal('driver', 'azureKubernetesService'),
@@ -49,6 +52,25 @@ export default Resource.extend(Grafana, ResourceUsage, {
     }
   })),
 
+  clusterTemplateDisplayName: computed('clusterTemplate.name', 'clusterTemplateId', function() {
+    return get(this, 'clusterTemplate.displayName')
+      || get(this, 'clusterTemplateId').replace(CLUSTER_TEMPLATE_ID_PREFIX, '');
+  }),
+
+  clusterTemplateRevisionDisplayName: computed('clusterTemplateRevision.name', 'clusterTemplateRevisionId', function() {
+    return get(this, 'clusterTemplateRevision.displayName')
+      || get(this, 'clusterTemplateRevisionId').replace(CLUSTER_TEMPLATE_ID_PREFIX, '');
+  }),
+
+  isClusterTemplateUpgradeAvailable: computed('clusterTemplate.latestRevision.id', 'clusterTemplateRevision.id', function() {
+    const latestClusterTemplateRevisionId = get(this, 'clusterTemplate.latestRevision.id');
+    const currentClusterTemplateRevisionId = get(this, 'clusterTemplateRevision.id');
+
+    return latestClusterTemplateRevisionId
+      && currentClusterTemplateRevisionId
+      && currentClusterTemplateRevisionId !== latestClusterTemplateRevisionId;
+  }),
+
   getAltActionDelete: computed('action.remove', function() { // eslint-disable-line
     return get(this, 'canBulkRemove') ? 'delete' : null;
   }),

app/models/clustertemplate.js

@@ -30,6 +30,12 @@ const ClusterTemplate =  Resource.extend({
     return isNaN(get(this, 'revisions.length')) ? 0 : get(this, 'revisions.length');
   }),
 
+  latestRevision: computed('revisions.[]', function() {
+    return isNaN(get(this, 'revisions.length'))
+      ? null
+      : get(this, 'revisions').sortBy('createdTS').get('lastObject');
+  }),
+
   displayDefaultRevisionId: computed('revisionsCount', 'revisions.[]', function() {
     return get(this, 'defaultRevisionId').split(':')[1];
   }),

app/styles/_rancher.scss

@@ -62,6 +62,7 @@
 @import "app/styles/components/logging";
 @import "app/styles/components/identity-block";
 @import "app/styles/components/istio-graph";
+@import "app/styles/components/cluster-template-revision-upgrade-notification";
 
 // Vendor
 // Pretty much what it says. Vendor specific changes/overrides or includes.

app/styles/base/_icons.scss

@@ -64,7 +64,7 @@ $icon-inverse:          #fff !default;
 .icon-stack {
   position: relative;
   display: inline-block;
-  // width: 2em;
+  width: 2em;
   height: 2em;
   line-height: 2em;
   vertical-align: middle;

app/styles/components/_banners.scss

@@ -190,5 +190,12 @@
     .block .text-small {
       font-size: 0.7em;
     }
+
+    span.cluster-template-revision-upgrade-notification {
+      height: 0px;
+      display: inline-block;
+      margin-top: -1.5%;
+      vertical-align: top;
+    }
   }
 }

app/styles/components/_cluster-template-revision-upgrade-notification.scss

@@ -0,0 +1,17 @@
+.cluster-template-revision-upgrade-notification {
+    .icon-stack {
+        color: $banner-warning;
+
+        .icon-notification, .icon-circle-o {
+            color: lighten($warning, 5);
+        }
+
+        .icon-circle, .icon-circle-o {
+            font-size: 1.45em;
+        }
+
+        .icon-notification {
+            font-size: 0.85em;
+        }
+    }
+}

app/styles/components/_tables.scss

@@ -98,9 +98,15 @@ TABLE {
         text-align: center;
       }
 
-      &.sortable.text-right A {
-        position: relative;
-        left: -15px;
+      &.sortable {
+        &.text-right A {
+          position: relative;
+          left: -15px;
+        }
+        
+        .icon-stack .icon-stack-1x {
+          width: initial;
+        }
       }
 
       a {

lib/global-admin/addon/clusters/index/route.js

@@ -1,8 +1,21 @@
 import { next } from '@ember/runloop';
+import { hash } from 'rsvp';
+import { inject as service } from '@ember/service';
+import { get } from '@ember/object';
 import Route from '@ember/routing/route';
 
 export default Route.extend({
+  globalStore: service(),
+
   shortcuts: { 'g': 'toggleGrouping', },
+
+  afterModel() {
+    return hash(
+      get(this, 'globalStore').findAll('clusterTemplateRevision'),
+      get(this, 'globalStore').findAll('clusterTemplate'),
+    );
+  },
+
   actions:   {
     toggleGrouping() {
       let choices = ['list', 'grouped'];

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

@@ -34,6 +34,8 @@
         <i class="icon icon-alert text-warning" />
       {{/tooltip-element}}
     {{/if}}
+
+    {{cluster-template-revision-upgrade-notification cluster=model}}
   </td>
   <td data-title="{{dt.provider}}">
     {{#if model.version.gitVersion}}

lib/monitoring/addon/components/cluster-basic-info/template.hbs

@@ -5,10 +5,16 @@
   </div>
 
   <div class="vertical-middle">
-    <label class="acc-label vertical-middle p-0">{{t 'clustersPage.version.label'}}:</label>
+    <label class="acc-label vertical-middle p-0">{{t 'clustersPage.kubernetesVersion.label'}}:</label>
     <span>{{cluster.version.gitVersion}}</span>
   </div>
 
+  <div class="vertical-middle">
+    <label class="acc-label vertical-middle p-0">{{t 'clustersPage.rkeTemplate.label'}}:</label>
+    <span>{{cluster.clusterTemplateDisplayName}}/{{cluster.clusterTemplateRevisionDisplayName}}</span>
+    {{cluster-template-revision-upgrade-notification cluster=cluster}}
+  </div>
+
   <div class="vertical-middle">
     <label class="acc-label vertical-middle p-0">{{t 'generic.created'}}:</label>
     <span>{{date-calendar cluster.created}}</span>

lib/monitoring/addon/index/route.js

@@ -45,6 +45,13 @@ export default Route.extend({
     });
   },
 
+  afterModel() {
+    return hash(
+      get(this, 'globalStore').findAll('clusterTemplateRevision'),
+      get(this, 'globalStore').findAll('clusterTemplate'),
+    );
+  },
+
   setDefaultRoute: on('activate', function() {
     set(this, `session.${ C.SESSION.CLUSTER_ROUTE }`, 'authenticated.cluster.monitoring.index');
   }),

lib/shared/addon/components/cluster-template-revision-upgrade-notification/component.js

@@ -0,0 +1,10 @@
+import Component from '@ember/component';
+import layout from './template';
+
+export default Component.extend({
+  layout,
+  tagName:            'span',
+  classNames:         ['cluster-template-revision-upgrade-notification'],
+
+  cluster:            null,
+});

lib/shared/addon/components/cluster-template-revision-upgrade-notification/template.hbs

@@ -0,0 +1,14 @@
+{{#if cluster.isClusterTemplateUpgradeAvailable}}
+  {{#tooltip-element
+    type="tooltip-basic"
+    model=(t 'clusterTemplateRevisionUpgradeNotification.tooltip' revision=cluster.clusterTemplate.latestRevision.displayName)
+    tooltipTemplate="tooltip-static"
+    inlineBlock=true
+  }}
+    <span class="icon-stack rke-template-revision-upgrade-notification">
+      <i class="icon icon-circle icon-stack-1x"/>
+      <i class="icon icon-circle-o icon-stack-1x"/>
+      <i class="icon icon-notification icon-stack-1x"/>
+    </span>
+  {{/tooltip-element}}
+{{/if}}

lib/shared/app/components/cluster-template-revision-upgrade-notification/component.js

@@ -0,0 +1 @@
+export { default } from 'shared/components/cluster-template-revision-upgrade-notification/component';

translations/en-us.yaml

@@ -892,6 +892,9 @@ projectsPage:
       memberNameReq: Name is required for a member
       memberRoleReq: Role is required for a member
 
+clusterTemplateRevisionUpgradeNotification:
+  tooltip: Revision {revision} available for upgrade.
+
 clustersPage:
   header: Clusters
   newCluster: Add Cluster
@@ -903,10 +906,14 @@ clustersPage:
     new: Add Cluster
   cluster:
     label: Cluster Name
+  templateRevision:
+    label: Template/Revision
   provider:
     label: Provider
-  version:
-    label: Version
+  kubernetesVersion:
+    label: Kubernetes Version
+  rkeTemplate:
+    label: RKE Template
   nodes:
     label: Nodes
   cpu: