Merge pull request #3405 from westlywright/issue.21099

[2.3.2] Dynamically change version label on node dashboard

app/components/node-row/template.hbs

@@ -10,12 +10,12 @@
   <td data-title="{{dt.name}}" class="clip">
     {{#if (eq view "global")}}
       {{#if model.clusterId}}
-        <a href="{{href-to 'authenticated.cluster.monitoring.node-detail' model.clusterId model.id}}">{{model.displayName}}</a>
+        <a href="{{href-to "authenticated.cluster.monitoring.node-detail" model.clusterId model.id}}">{{model.displayName}}</a>
       {{else}}
         {{model.displayName}}
       {{/if}}
     {{else}}
-      <a href="{{href-to 'authenticated.cluster.monitoring.node-detail' model.clusterId model.id}}">{{model.displayName}}</a>
+      <a href="{{href-to "authenticated.cluster.monitoring.node-detail" model.clusterId model.id}}">{{model.displayName}}</a>
     {{/if}}
     {{#if (or model.externalIpAddress model.ipAddress)}}
       {{node-ip model=model}}
@@ -27,14 +27,14 @@
       {{#if model.cluster}}
         {{model.cluster.displayName}}
       {{else}}
-        <b>{{t 'generic.none'}}</b>
+        <b>{{t "generic.none"}}</b>
       {{/if}}
 
       <div class="text-small">
         {{#each model.displayRoles as |role|}}
           <span class="badge badge-xs bg-info">{{role}}</span>
         {{else}}
-          <span class="text-muted">{{t 'generic.none'}}</span>
+          <span class="text-muted">{{t "generic.none"}}</span>
         {{/each}}
       </div>
     </td>
@@ -46,7 +46,7 @@
       {{#each model.displayRoles as |role|}}
         <span class="badge badge-xs bg-info">{{role}}</span>
       {{else}}
-        <span class="text-muted">{{t 'generic.none'}}</span>
+        <span class="text-muted">{{t "generic.none"}}</span>
       {{/each}}
     </td>
   {{/if}}
@@ -54,11 +54,11 @@
   <td data-title="{{dt.version}}">
     {{#if model.info.kubernetes.kubeletVersion}}
       {{model.info.kubernetes.kubeletVersion}}
-      {{#if model.engineBlurb}}
+      {{#if model.versionBlurb}}
         <div class="text-small text-muted">
           <span>
             <i class="icon {{model.engineIcon}}"></i>
-            {{model.engineBlurb}}
+            {{model.versionBlurb}}
           </span>
         </div>
       {{/if}}
@@ -74,7 +74,7 @@
       {{/if}}
     {{else}}
       <span class="text-muted">
-        {{t 'generic.na'}}
+        {{t "generic.na"}}
       </span>
     {{/if}}
   </td>
@@ -84,7 +84,7 @@
       {{model.cpuUsage}}
     {{else}}
       <span class="text-muted">
-        {{t 'generic.na'}}
+        {{t "generic.na"}}
       </span>
     {{/if}}
   </td>
@@ -94,7 +94,7 @@
       {{model.memoryUsage}}
     {{else}}
       <span class="text-muted">
-        {{t 'generic.na'}}
+        {{t "generic.na"}}
       </span>
     {{/if}}
   </td>
@@ -104,7 +104,7 @@
       {{model.podUsage}}
     {{else}}
       <span class="text-muted">
-        {{t 'generic.na'}}
+        {{t "generic.na"}}
       </span>
     {{/if}}
   </td>
@@ -135,7 +135,7 @@
   {{error-sub-row fullColspan=fullColspan model=model}}
 {{/if}}
 
-<tr class="sub-row {{unless expanded 'hide'}}">
+<tr class="sub-row {{unless expanded "hide"}}">
   <td colspan="2">{{! checkbox and expand}}</td>
   <td colspan="{{sub fullColspan 3}}">
     {{#liquid-if expanded}}

app/models/node.js

@@ -1,4 +1,4 @@
-import { computed, get } from '@ember/object';
+import { computed, get, set } from '@ember/object';
 import { or, alias } from '@ember/object/computed';
 import Resource from '@rancher/ember-api-store/models/resource';
 import { download } from 'shared/utils/util';
@@ -8,6 +8,7 @@ import { inject as service } from '@ember/service';
 import { reference } from '@rancher/ember-api-store/utils/denormalize';
 import ResourceUsage from 'shared/mixins/resource-usage';
 import Grafana from 'shared/mixins/grafana';
+import { next } from '@ember/runloop';
 
 const UNSCHEDULABLE_KEYS = ['node-role.kubernetes.io/etcd', 'node-role.kubernetes.io/controlplane'];
 const UNSCHEDULABLE_EFFECTS = ['NoExecute', 'NoSchedule'];
@@ -23,7 +24,9 @@ var Node = Resource.extend(Grafana, StateCounts, ResourceUsage, {
   clusterStore: service(),
   intl:         service(),
 
-  type: 'node',
+  type:         'node',
+  containerD:   CONTAINERD,
+  isContainerD: false,
 
   grafanaDashboardName: 'Nodes',
   grafanaResourceId:    alias('ipAddress'),
@@ -173,11 +176,19 @@ var Node = Resource.extend(Grafana, StateCounts, ResourceUsage, {
     return 'icon-docker';
   }),
 
-  engineBlurb: computed('info.os.dockerVersion', function() {
+  versionBlurb: computed('info.os.dockerVersion', function() {
     let version = get(this, 'info.os.dockerVersion') || '';
 
     if ( version.startsWith(CONTAINERD) ) {
       version = version.substr(CONTAINERD.length);
+
+      if (!this.isContainerD) {
+        next(() => set(this, 'isContainerD', true));
+      }
+    } else {
+      if (this.isContainerD) {
+        next(() => set(this, 'isContainerD', false));
+      }
     }
 
     const idx = version.indexOf('+');
@@ -196,7 +207,7 @@ var Node = Resource.extend(Grafana, StateCounts, ResourceUsage, {
   }),
 
   //  or they will not be pulled in correctly.
-  displayEndpoints: function() {
+  displayEndpoints: computed('publicEndpoints.@each.{ipAddress,port,serviceId,instanceId}', function() {
     var store = get(this, 'clusterStore');
 
     return (get(this, 'publicEndpoints') || []).map((endpoint) => {
@@ -208,14 +219,15 @@ var Node = Resource.extend(Grafana, StateCounts, ResourceUsage, {
 
       return endpoint;
     });
-  }.property('publicEndpoints.@each.{ipAddress,port,serviceId,instanceId}'),
+  }),
 
   // If you use this you must ensure that services and containers are already in the store
-  requireAnyLabelStrings: function() {
+  requireAnyLabelStrings: computed(`labels.${ C.LABEL.REQUIRE_ANY }`, function() {
     return  ((get(this, 'labels') || {})[C.LABEL.REQUIRE_ANY] || '')
       .split(/\s*,\s*/)
       .filter((x) => x.length > 0 && x !== C.LABEL.SYSTEM_TYPE);
-  }.property(`labels.${ C.LABEL.REQUIRE_ANY }`),
+  }),
+
   actions: {
     activate() {
       return this.doAction('activate');

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

@@ -1,29 +1,47 @@
 <div class="row banner bg-info basics">
   <div class="vertical-middle">
-    <label class="acc-label vertical-middle p-0">{{t 'hostsPage.hostPage.ipAddress'}}:</label>
-    <div class="inline-block">{{node-ip model=model.node textMuted=false}}</div>
+    <label class="acc-label vertical-middle p-0">
+      {{t "hostsPage.hostPage.ipAddress"}}:
+    </label>
+    <div class="inline-block">
+      {{node-ip model=model.node textMuted=false}}
+    </div>
   </div>
   <div class="vertical-middle">
-    <label class="acc-label vertical-middle p-0">{{t 'hostsPage.hostPage.dockerVersion'}}:</label>
-    {{model.node.info.os.dockerVersion}}
+    <label class="acc-label vertical-middle p-0">
+      {{#if model.node.isContainerD}}
+        {{t "hostsPage.hostPage.containerDVersion"}}:
+      {{else}}
+        {{t "hostsPage.hostPage.dockerVersion"}}:
+      {{/if}}
+    </label>
+    {{model.node.versionBlurb}}
   </div>
   <div class="vertical-middle">
-    <label class="acc-label vertical-middle p-0">{{t 'generic.created'}}:</label>
+    <label class="acc-label vertical-middle p-0">
+      {{t "generic.created"}}:
+    </label>
     {{date-calendar model.node.created}}
   </div>
 </div>
 
 <div class="row banner bg-info basics">
   <div class="vertical-middle">
-    <label class="acc-label vertical-middle p-0">{{t 'hostsPage.hostPage.kubeletVersion'}}:</label>
+    <label class="acc-label vertical-middle p-0">
+      {{t "hostsPage.hostPage.kubeletVersion"}}:
+    </label>
     {{model.node.info.kubernetes.kubeletVersion}}
   </div>
   <div class="vertical-middle">
-    <label class="acc-label vertical-middle p-0">{{t 'hostsPage.hostPage.kubeProxyVersion'}}:</label>
+    <label class="acc-label vertical-middle p-0">
+      {{t "hostsPage.hostPage.kubeProxyVersion"}}:
+    </label>
     {{model.node.info.kubernetes.kubeProxyVersion}}
   </div>
   <div class="vertical-middle">
-    <label class="acc-label vertical-middle p-0">{{t 'hostsPage.hostPage.operatingSystem'}}:</label>
+    <label class="acc-label vertical-middle p-0">
+      {{t "hostsPage.hostPage.operatingSystem"}}:
+    </label>
     {{model.node.osBlurb}} <span class="text-small text-muted">{{model.node.info.os.kernelVersion}}</span>
   </div>
 </div>
@@ -45,7 +63,7 @@
       {{/metrics-summary}}
     {{/if}}
     {{resource-condition-list
-      resourceType=(t 'generic.node')
+      resourceType=(t "generic.node")
       conditions=model.node.conditions
       expandAll=al.expandAll
       expandFn=expandFn

translations/en-us.yaml

@@ -2261,6 +2261,7 @@ hostsPage:
     kubeletVersion: Kubelet Version
     kubeProxyVersion: Kube Proxy Version
     dockerVersion: Docker Version
+    containerDVersion: Containerd Version
     kernelVersion: Kernel Version
     operatingSystem: OS
     conditions: