feat(kubernetes/resource-usage): k8s resource usage for cluster, node and namespace EE-3 EE-1112 (#5301)

* backported resource usage functionality from EE

* utilising view bound endpoint object instead of depracated EndpointProvider

* refactor flatmap

* addressed merge conflict issues

app/kubernetes/components/resource-reservation/resourceReservation.html

@@ -10,22 +10,42 @@
     </span>
   </div>
   <div class="form-group" ng-if="$ctrl.memoryLimit !== 0">
-    <label for="memory-usage" class="col-sm-3 col-lg-2 control-label text-left">
+    <label for="memory-reservation" class="col-sm-3 col-lg-2 control-label text-left">
       Memory reservation
     </label>
     <div class="col-sm-9" style="margin-top: 4px;">
-      <uib-progressbar animate="false" value="$ctrl.memoryUsage" type="{{ $ctrl.memoryUsage | kubernetesUsageLevelInfo }}">
+      <uib-progressbar animate="false" value="$ctrl.memoryReservationPercent" type="{{ $ctrl.memoryReservationPercent | kubernetesUsageLevelInfo }}">
-        <b style="white-space: nowrap;"> {{ $ctrl.memory }} / {{ $ctrl.memoryLimit }} MB - {{ $ctrl.memoryUsage }}% </b>
+        <b style="white-space: nowrap;"> {{ $ctrl.memoryReservation }} / {{ $ctrl.memoryLimit }} MB - {{ $ctrl.memoryReservationPercent }}% </b>
+      </uib-progressbar>
+    </div>
+  </div>
+  <div class="form-group" ng-if="$ctrl.displayUsage && $ctrl.memoryLimit !== 0">
+    <label for="memory-usage" class="col-sm-3 col-lg-2 control-label text-left">
+      Memory used
+    </label>
+    <div class="col-sm-9" style="margin-top: 4px;">
+      <uib-progressbar animate="false" value="$ctrl.memoryUsagePercent" type="{{ $ctrl.memoryUsagePercent | kubernetesUsageLevelInfo }}">
+        <b style="white-space: nowrap;"> {{ $ctrl.memoryUsage }} / {{ $ctrl.memoryLimit }} MB - {{ $ctrl.memoryUsagePercent }}% </b>
       </uib-progressbar>
     </div>
   </div>
   <div class="form-group" ng-if="$ctrl.cpuLimit !== 0">
-    <label for="cpu-usage" class="col-sm-3 col-lg-2 control-label text-left">
+    <label for="cpu-reservation" class="col-sm-3 col-lg-2 control-label text-left">
       CPU reservation
     </label>
     <div class="col-sm-9" style="margin-top: 4px;">
-      <uib-progressbar animate="false" value="$ctrl.cpuUsage" type="{{ $ctrl.cpuUsage | kubernetesUsageLevelInfo }}">
+      <uib-progressbar animate="false" value="$ctrl.cpuReservationPercent" type="{{ $ctrl.cpuReservationPercent | kubernetesUsageLevelInfo }}">
-        <b style="white-space: nowrap;"> {{ $ctrl.cpu | kubernetesApplicationCPUValue }} / {{ $ctrl.cpuLimit }} - {{ $ctrl.cpuUsage }}% </b>
+        <b style="white-space: nowrap;"> {{ $ctrl.cpuReservation | kubernetesApplicationCPUValue }} / {{ $ctrl.cpuLimit }} - {{ $ctrl.cpuReservationPercent }}% </b>
+      </uib-progressbar>
+    </div>
+  </div>
+  <div class="form-group" ng-if="$ctrl.displayUsage && $ctrl.cpuLimit !== 0">
+    <label for="cpu-usage" class="col-sm-3 col-lg-2 control-label text-left">
+      CPU used
+    </label>
+    <div class="col-sm-9" style="margin-top: 4px;">
+      <uib-progressbar animate="false" value="$ctrl.cpuUsagePercent" type="{{ $ctrl.cpuUsagePercent | kubernetesUsageLevelInfo }}">
+        <b style="white-space: nowrap;"> {{ $ctrl.cpuUsage | kubernetesApplicationCPUValue }} / {{ $ctrl.cpuLimit }} - {{ $ctrl.cpuUsagePercent }}% </b>
       </uib-progressbar>
     </div>
   </div>

app/kubernetes/components/resource-reservation/resourceReservation.js

@@ -3,9 +3,12 @@ angular.module('portainer.kubernetes').component('kubernetesResourceReservation'
   controller: 'KubernetesResourceReservationController',
   bindings: {
     description: '@',
-    cpu: '<',
+    cpuReservation: '<',
+    cpuUsage: '<',
     cpuLimit: '<',
-    memory: '<',
+    memoryReservation: '<',
+    memoryUsage: '<',
     memoryLimit: '<',
+    displayUsage: '<',
   },
 });

app/kubernetes/components/resource-reservation/resourceReservationController.js

@@ -3,10 +3,15 @@ import angular from 'angular';
 class KubernetesResourceReservationController {
   usageValues() {
     if (this.cpuLimit) {
-      this.cpuUsage = Math.round((this.cpu / this.cpuLimit) * 100);
+      this.cpuReservationPercent = Math.round((this.cpuReservation / this.cpuLimit) * 100);
     }
     if (this.memoryLimit) {
-      this.memoryUsage = Math.round((this.memory / this.memoryLimit) * 100);
+      this.memoryReservationPercent = Math.round((this.memoryReservation / this.memoryLimit) * 100);
+    }
+
+    if (this.displayUsage && this.cpuLimit && this.memoryLimit) {
+      this.cpuUsagePercent = Math.round((this.cpuUsage / this.cpuLimit) * 100);
+      this.memoryUsagePercent = Math.round((this.memoryUsage / this.memoryLimit) * 100);
     }
   }
 

app/kubernetes/metrics/metrics.js

@@ -9,8 +9,12 @@ class KubernetesMetricsService {
     this.KubernetesMetrics = KubernetesMetrics;
 
     this.capabilitiesAsync = this.capabilitiesAsync.bind(this);
+
     this.getPodAsync = this.getPodAsync.bind(this);
     this.getNodeAsync = this.getNodeAsync.bind(this);
+
+    this.getPodsAsync = this.getPodsAsync.bind(this);
+    this.getNodesAsync = this.getNodesAsync.bind(this);
   }
 
   /**
@@ -68,6 +72,42 @@ class KubernetesMetricsService {
   getPod(namespace, podName) {
     return this.$async(this.getPodAsync, namespace, podName);
   }
+
+  /**
+   * Stats of Nodes in cluster
+   *
+   * @param {string} endpointID
+   */
+  async getNodesAsync(endpointID) {
+    try {
+      const data = await this.KubernetesMetrics().getNodes({ endpointId: endpointID }).$promise;
+      return data;
+    } catch (err) {
+      throw new PortainerError('Unable to retrieve nodes stats', err);
+    }
+  }
+
+  getNodes(endpointID) {
+    return this.$async(this.getNodesAsync, endpointID);
+  }
+
+  /**
+   * Stats of Pods in a namespace
+   *
+   * @param {string} namespace
+   */
+  async getPodsAsync(namespace) {
+    try {
+      const data = await this.KubernetesMetrics(namespace).getPods().$promise;
+      return data;
+    } catch (err) {
+      throw new PortainerError('Unable to retrieve pod stats', err);
+    }
+  }
+
+  getPods(namespace) {
+    return this.$async(this.getPodsAsync, namespace);
+  }
 }
 
 export default KubernetesMetricsService;

app/kubernetes/metrics/rest.js

@@ -24,6 +24,14 @@ angular.module('portainer.kubernetes').factory('KubernetesMetrics', [
             method: 'GET',
             url: `${url}/nodes/:id`,
           },
+          getPods: {
+            method: 'GET',
+            url: `${url}/namespaces/:namespace/pods`,
+          },
+          getNodes: {
+            method: 'GET',
+            url: `${url}/nodes`,
+          },
         }
       );
     };

app/kubernetes/views/cluster/cluster.html

@@ -12,11 +12,14 @@
           <!-- resource-reservation -->
           <form class="form-horizontal" ng-if="ctrl.resourceReservation">
             <kubernetes-resource-reservation
-              cpu="ctrl.resourceReservation.CPU"
-              cpu-limit="ctrl.CPULimit"
-              memory="ctrl.resourceReservation.Memory"
-              memory-limit="ctrl.MemoryLimit"
               description="Resource reservation represents the total amount of resource assigned to all the applications inside the cluster."
+              cpu-reservation="ctrl.resourceReservation.CPU"
+              cpu-limit="ctrl.CPULimit"
+              memory-reservation="ctrl.resourceReservation.Memory"
+              memory-limit="ctrl.MemoryLimit"
+              display-usage="ctrl.isAdmin"
+              cpu-usage="ctrl.resourceUsage.CPU"
+              memory-usage="ctrl.resourceUsage.Memory"
             >
             </kubernetes-resource-reservation>
           </form>

app/kubernetes/views/cluster/cluster.js

@@ -2,4 +2,7 @@ angular.module('portainer.kubernetes').component('kubernetesClusterView', {
   templateUrl: './cluster.html',
   controller: 'KubernetesClusterController',
   controllerAs: 'ctrl',
+  bindings: {
+    endpoint: '<',
+  },
 });

app/kubernetes/views/cluster/clusterController.js

@@ -13,10 +13,10 @@ class KubernetesClusterController {
     Notifications,
     LocalStorage,
     KubernetesNodeService,
+    KubernetesMetricsService,
     KubernetesApplicationService,
     KubernetesComponentStatusService,
-    KubernetesEndpointService,
+    KubernetesEndpointService
-    EndpointProvider
   ) {
     this.$async = $async;
     this.$state = $state;
@@ -24,10 +24,10 @@ class KubernetesClusterController {
     this.Notifications = Notifications;
     this.LocalStorage = LocalStorage;
     this.KubernetesNodeService = KubernetesNodeService;
+    this.KubernetesMetricsService = KubernetesMetricsService;
     this.KubernetesApplicationService = KubernetesApplicationService;
     this.KubernetesComponentStatusService = KubernetesComponentStatusService;
     this.KubernetesEndpointService = KubernetesEndpointService;
-    this.EndpointProvider = EndpointProvider;
 
     this.onInit = this.onInit.bind(this);
     this.getNodes = this.getNodes.bind(this);
@@ -106,6 +106,10 @@ class KubernetesClusterController {
         new KubernetesResourceReservation()
       );
       this.resourceReservation.Memory = KubernetesResourceReservationHelper.megaBytesValue(this.resourceReservation.Memory);
+
+      if (this.isAdmin) {
+        await this.getResourceUsage(this.endpoint.Id);
+      }
     } catch (err) {
       this.Notifications.error('Failure', 'Unable to retrieve applications', err);
     } finally {
@@ -117,14 +121,31 @@ class KubernetesClusterController {
     return this.$async(this.getApplicationsAsync);
   }
 
+  async getResourceUsage(endpointId) {
+    try {
+      const nodeMetrics = await this.KubernetesMetricsService.getNodes(endpointId);
+      const resourceUsageList = nodeMetrics.items.map((i) => i.usage);
+      const clusterResourceUsage = resourceUsageList.reduce((total, u) => {
+        total.CPU += KubernetesResourceReservationHelper.parseCPU(u.cpu);
+        total.Memory += KubernetesResourceReservationHelper.megaBytesValue(u.memory);
+        return total;
+      }, new KubernetesResourceReservation());
+      this.resourceUsage = clusterResourceUsage;
+    } catch (err) {
+      this.Notifications.error('Failure', 'Unable to retrieve cluster resource usage', err);
+    }
+  }
+
   async onInit() {
     this.state = {
       applicationsLoading: true,
       viewReady: false,
       hasUnhealthyComponentStatus: false,
+      useServerMetrics: false,
     };
 
     this.isAdmin = this.Authentication.isAdmin();
+    this.state.useServerMetrics = this.endpoint.Kubernetes.Configuration.UseServerMetrics;
 
     await this.getNodes();
     if (this.isAdmin) {
@@ -134,7 +155,6 @@ class KubernetesClusterController {
     }
 
     this.state.viewReady = true;
-    this.state.useServerMetrics = this.EndpointProvider.currentEndpoint().Kubernetes.Configuration.UseServerMetrics;
   }
 
   $onInit() {

app/kubernetes/views/cluster/node/node.html

@@ -78,11 +78,14 @@
                 <div style="padding: 8px;">
                   <kubernetes-resource-reservation
                     ng-if="ctrl.resourceReservation"
-                    cpu="ctrl.resourceReservation.CPU"
+                    cpu-reservation="ctrl.resourceReservation.CPU"
+                    cpu-usage="ctrl.resourceUsage.CPU"
                     cpu-limit="ctrl.node.CPU"
-                    memory="ctrl.resourceReservation.Memory"
+                    memory-reservation="ctrl.resourceReservation.Memory"
+                    memory-usage="ctrl.resourceUsage.Memory"
                     memory-limit="ctrl.memoryLimit"
                     description="Resource reservation represents the total amount of resource assigned to all the applications running on this node."
+                    display-usage="ctrl.state.isAdmin"
                   >
                   </kubernetes-resource-reservation>
                 </div>

app/kubernetes/views/cluster/node/node.js

@@ -3,6 +3,7 @@ angular.module('portainer.kubernetes').component('kubernetesNodeView', {
   controller: 'KubernetesNodeController',
   controllerAs: 'ctrl',
   bindings: {
+    endpoint: '<',
     $transition$: '<',
   },
 });

app/kubernetes/views/cluster/node/nodeController.js

@@ -21,7 +21,9 @@ class KubernetesNodeController {
     KubernetesEventService,
     KubernetesPodService,
     KubernetesApplicationService,
-    KubernetesEndpointService
+    KubernetesEndpointService,
+    KubernetesMetricsService,
+    Authentication
   ) {
     this.$async = $async;
     this.$state = $state;
@@ -33,6 +35,8 @@ class KubernetesNodeController {
     this.KubernetesPodService = KubernetesPodService;
     this.KubernetesApplicationService = KubernetesApplicationService;
     this.KubernetesEndpointService = KubernetesEndpointService;
+    this.KubernetesMetricsService = KubernetesMetricsService;
+    this.Authentication = Authentication;
 
     this.onInit = this.onInit.bind(this);
     this.getNodesAsync = this.getNodesAsync.bind(this);
@@ -42,6 +46,7 @@ class KubernetesNodeController {
     this.getEndpointsAsync = this.getEndpointsAsync.bind(this);
     this.updateNodeAsync = this.updateNodeAsync.bind(this);
     this.drainNodeAsync = this.drainNodeAsync.bind(this);
+    this.getNodeUsageAsync = this.getNodeUsageAsync.bind(this);
   }
 
   selectTab(index) {
@@ -327,6 +332,22 @@ class KubernetesNodeController {
     return this.$async(this.getNodesAsync);
   }
 
+  async getNodeUsageAsync() {
+    try {
+      const nodeName = this.$transition$.params().name;
+      const node = await this.KubernetesMetricsService.getNode(nodeName);
+      this.resourceUsage = new KubernetesResourceReservation();
+      this.resourceUsage.CPU = KubernetesResourceReservationHelper.parseCPU(node.usage.cpu);
+      this.resourceUsage.Memory = KubernetesResourceReservationHelper.megaBytesValue(node.usage.memory);
+    } catch (err) {
+      this.Notifications.error('Failure', 'Unable to retrieve node resource usage', err);
+    }
+  }
+
+  getNodeUsage() {
+    return this.$async(this.getNodeUsageAsync);
+  }
+
   hasEventWarnings() {
     return this.state.eventWarningCount;
   }
@@ -375,6 +396,10 @@ class KubernetesNodeController {
       this.resourceReservation.Memory = KubernetesResourceReservationHelper.megaBytesValue(this.resourceReservation.Memory);
       this.memoryLimit = KubernetesResourceReservationHelper.megaBytesValue(this.node.Memory);
       this.state.isContainPortainer = _.find(this.applications, { ApplicationName: 'portainer' });
+
+      if (this.state.isAdmin) {
+        await this.getNodeUsage();
+      }
     } catch (err) {
       this.Notifications.error('Failure', err, 'Unable to retrieve applications');
     } finally {
@@ -388,6 +413,7 @@ class KubernetesNodeController {
 
   async onInit() {
     this.state = {
+      isAdmin: this.Authentication.isAdmin(),
       activeTab: 0,
       currentName: this.$state.$current.name,
       dataLoading: true,
@@ -402,10 +428,13 @@ class KubernetesNodeController {
       hasDuplicateLabelKeys: false,
       isDrainOperation: false,
       isContainPortainer: false,
+      useServerMetrics: false,
     };
 
     this.availabilities = KubernetesNodeAvailabilities;
 
+    this.state.useServerMetrics = this.endpoint.Kubernetes.Configuration.UseServerMetrics;
+
     this.state.activeTab = this.LocalStorage.getActiveTab('node');
 
     await this.getNodes();

app/kubernetes/views/resource-pools/edit/resourcePool.html

@@ -40,10 +40,13 @@
                   <kubernetes-resource-reservation
                     ng-if="ctrl.pool.Quota"
                     description="Resource reservation represents the total amount of resource assigned to all the applications deployed inside this namespace."
-                    cpu="ctrl.state.cpuUsed"
+                    cpu-reservation="ctrl.state.resourceReservation.CPU"
-                    memory="ctrl.state.memoryUsed"
+                    memory-reservation="ctrl.state.resourceReservation.Memory"
                     cpu-limit="ctrl.formValues.CpuLimit"
                     memory-limit="ctrl.formValues.MemoryLimit"
+                    display-usage="ctrl.state.useServerMetrics"
+                    cpu-usage="ctrl.state.resourceUsage.CPU"
+                    memory-usage="ctrl.state.resourceUsage.Memory"
                   >
                   </kubernetes-resource-reservation>
                 </div>

app/kubernetes/views/resource-pools/edit/resourcePoolController.js

@@ -3,6 +3,7 @@ import _ from 'lodash-es';
 import filesizeParser from 'filesize-parser';
 import { KubernetesResourceQuotaDefaults } from 'Kubernetes/models/resource-quota/models';
 import KubernetesResourceReservationHelper from 'Kubernetes/helpers/resourceReservationHelper';
+import { KubernetesResourceReservation } from 'Kubernetes/models/resource-reservation/models';
 import KubernetesEventHelper from 'Kubernetes/helpers/eventHelper';
 import {
   KubernetesResourcePoolFormValues,
@@ -27,6 +28,7 @@ class KubernetesResourcePoolController {
     EndpointService,
     ModalService,
     KubernetesNodeService,
+    KubernetesMetricsService,
     KubernetesResourceQuotaService,
     KubernetesResourcePoolService,
     KubernetesEventService,
@@ -45,6 +47,7 @@ class KubernetesResourcePoolController {
       EndpointService,
       ModalService,
       KubernetesNodeService,
+      KubernetesMetricsService,
       KubernetesResourceQuotaService,
       KubernetesResourcePoolService,
       KubernetesEventService,
@@ -240,6 +243,8 @@ class KubernetesResourcePoolController {
           app.Memory = resourceReservation.Memory;
           return app;
         });
+
+        await this.getResourceUsage(this.pool.Namespace.Name);
       } catch (err) {
         this.Notifications.error('Failure', err, 'Unable to retrieve applications.');
       } finally {
@@ -300,11 +305,26 @@ class KubernetesResourcePoolController {
   }
   /* #endregion */
 
+  async getResourceUsage(namespace) {
+    try {
+      const namespaceMetrics = await this.KubernetesMetricsService.getPods(namespace);
+      // extract resource usage of all containers within each pod of the namespace
+      const containerResourceUsageList = namespaceMetrics.items.flatMap((i) => i.containers.map((c) => c.usage));
+      const namespaceResourceUsage = containerResourceUsageList.reduce((total, u) => {
+        total.CPU += KubernetesResourceReservationHelper.parseCPU(u.cpu);
+        total.Memory += KubernetesResourceReservationHelper.megaBytesValue(u.memory);
+        return total;
+      }, new KubernetesResourceReservation());
+      this.state.resourceUsage = namespaceResourceUsage;
+    } catch (err) {
+      this.Notifications.error('Failure', 'Unable to retrieve namespace resource usage', err);
+    }
+  }
+
   /* #region  ON INIT */
   $onInit() {
     return this.$async(async () => {
       try {
-        const endpoint = this.endpoint;
         this.isAdmin = this.Authentication.isAdmin();
 
         this.state = {
@@ -312,9 +332,8 @@ class KubernetesResourcePoolController {
           sliderMaxMemory: 0,
           sliderMaxCpu: 0,
           cpuUsage: 0,
-          cpuUsed: 0,
           memoryUsage: 0,
-          memoryUsed: 0,
+          resourceReservation: { CPU: 0, Memory: 0 },
           activeTab: 0,
           currentName: this.$state.$current.name,
           showEditorTab: false,
@@ -323,7 +342,8 @@ class KubernetesResourcePoolController {
           ingressesLoading: true,
           viewReady: false,
           eventWarningCount: 0,
-          canUseIngress: endpoint.Kubernetes.Configuration.IngressClasses.length,
+          canUseIngress: this.endpoint.Kubernetes.Configuration.IngressClasses.length,
+          useServerMetrics: this.endpoint.Kubernetes.Configuration.UseServerMetrics,
           duplicates: {
             ingressHosts: new KubernetesFormValidationReferences(),
           },
@@ -352,8 +372,8 @@ class KubernetesResourcePoolController {
           this.formValues = KubernetesResourceQuotaConverter.quotaToResourcePoolFormValues(quota);
           this.formValues.EndpointId = this.endpoint.Id;
 
-          this.state.cpuUsed = quota.CpuLimitUsed;
+          this.state.resourceReservation.CPU = quota.CpuLimitUsed;
-          this.state.memoryUsed = KubernetesResourceReservationHelper.megaBytesValue(quota.MemoryLimitUsed);
+          this.state.resourceReservation.Memory = KubernetesResourceReservationHelper.megaBytesValue(quota.MemoryLimitUsed);
         }
 
         this.isEditable = !this.KubernetesNamespaceHelper.isSystemNamespace(this.pool.Namespace.Name);
@@ -366,7 +386,7 @@ class KubernetesResourcePoolController {
 
         if (this.state.canUseIngress) {
           await this.getIngresses();
-          const ingressClasses = endpoint.Kubernetes.Configuration.IngressClasses;
+          const ingressClasses = this.endpoint.Kubernetes.Configuration.IngressClasses;
           this.formValues.IngressClasses = KubernetesIngressConverter.ingressClassesToFormValues(ingressClasses, this.ingresses);
           _.forEach(this.formValues.IngressClasses, (ic) => {
             if (ic.Hosts.length === 0) {