feat(cluster): Show the cluster health by showing the status of the underlying cluster components (#4022)

* feat(cluster): add tabs

* feat(cluster): add cluster status informations to cluster detail view

* feat(cluster): change data display

* feat(cluster): prevent regular users to see cluster health

* feat(kubernetes): reviewed ComponentStatus handling

* refactor(kubernetes): review apiToModel for KubernetesComponentStatus

* refactor(kubernetes): remove unused variable

* refactor(kubernetes): clean hasUnhealthyComponentStatus code

Co-authored-by: Anthony Lapenna <lapenna.anthony@gmail.com>

app/kubernetes/component-status/converter.js

@@ -0,0 +1,21 @@
+import _ from 'lodash-es';
+import { KubernetesComponentStatus } from './models';
+
+export class KubernetesComponentStatusConverter {
+  /**
+   * Convert API data to KubernetesComponentStatus model
+   */
+  static apiToModel(data) {
+    const res = new KubernetesComponentStatus();
+    res.ComponentName = data.metadata.name;
+
+    const healthyCondition = _.find(data.conditions, { type: 'Healthy' });
+    if (healthyCondition && healthyCondition.status === 'True') {
+      res.Healthy = true;
+    } else if (healthyCondition && healthyCondition.status === 'False') {
+      res.ErrorMessage = healthyCondition.message;
+    }
+
+    return res;
+  }
+}

app/kubernetes/component-status/models.js

@@ -0,0 +1,14 @@
+/**
+ * KubernetesComponentStatus Model
+ */
+const _KubernetesComponentStatus = Object.freeze({
+  ComponentName: '',
+  Healthy: false,
+  ErrorMessage: '',
+});
+
+export class KubernetesComponentStatus {
+  constructor() {
+    Object.assign(this, JSON.parse(JSON.stringify(_KubernetesComponentStatus)));
+  }
+}

app/kubernetes/component-status/rest.js

@@ -0,0 +1,24 @@
+angular.module('portainer.kubernetes').factory('KubernetesComponentStatus', [
+  '$resource',
+  'API_ENDPOINT_ENDPOINTS',
+  'EndpointProvider',
+  function KubernetesComponentStatusFactory($resource, API_ENDPOINT_ENDPOINTS, EndpointProvider) {
+    'use strict';
+    return function () {
+      const url = API_ENDPOINT_ENDPOINTS + '/:endpointId/kubernetes/api/v1' + '/componentstatuses/:id';
+      return $resource(
+        url,
+        {
+          endpointId: EndpointProvider.endpointID,
+        },
+        {
+          get: {
+            method: 'GET',
+            timeout: 15000,
+            ignoreLoadingBar: true,
+          },
+        }
+      );
+    };
+  },
+]);

app/kubernetes/component-status/service.js

@@ -0,0 +1,34 @@
+import angular from 'angular';
+import PortainerError from 'Portainer/error';
+import _ from 'lodash-es';
+import { KubernetesComponentStatusConverter } from './converter';
+
+class KubernetesComponentStatusService {
+  /* @ngInject */
+  constructor($async, KubernetesComponentStatus) {
+    this.$async = $async;
+    this.KubernetesComponentStatus = KubernetesComponentStatus;
+
+    this.getAsync = this.getAsync.bind(this);
+  }
+
+  /**
+   * GET
+   */
+  async getAsync() {
+    try {
+      const data = await this.KubernetesComponentStatus().get().$promise;
+      const res = _.map(data.items, (item) => KubernetesComponentStatusConverter.apiToModel(item));
+      return res;
+    } catch (err) {
+      throw new PortainerError('Unable to retrieve cluster status', err);
+    }
+  }
+
+  get() {
+    return this.$async(this.getAsync);
+  }
+}
+
+export default KubernetesComponentStatusService;
+angular.module('portainer.kubernetes').service('KubernetesComponentStatusService', KubernetesComponentStatusService);

app/kubernetes/views/cluster/cluster.html

@@ -5,11 +5,11 @@
 <kubernetes-view-loading view-ready="ctrl.state.viewReady"></kubernetes-view-loading>
 
 <div ng-if="ctrl.state.viewReady">
-  <div class="row" ng-if="ctrl.resourceReservation && ctrl.isAdmin">
+  <div class="row" ng-if="ctrl.isAdmin">
     <div class="col-sm-12">
       <rd-widget>
         <rd-widget-body>
-          <form class="form-horizontal">
+          <form class="form-horizontal" ng-if="ctrl.resourceReservation">
             <kubernetes-resource-reservation
               cpu="ctrl.resourceReservation.CPU"
               cpu-limit="ctrl.CPULimit"
@@ -19,6 +19,32 @@
             >
             </kubernetes-resource-reservation>
           </form>
+
+          <div class="col-sm-12 form-section-title">
+            Cluster status
+          </div>
+
+          <table class="table">
+            <tbody>
+              <tr class="text-muted">
+                <td style="border-top: none;">Component</td>
+                <td style="border-top: none;">Status</td>
+                <td style="border-top: none;" ng-if="ctrl.hasUnhealthyComponentStatus">Error</td>
+              </tr>
+              <tr ng-repeat="cs in ctrl.ComponentStatuses">
+                <td>
+                  {{ cs.ComponentName }}
+                </td>
+                <td>
+                  <span ng-if="cs.Healthy"><i class="fa fa-check green-icon" aria-hidden="true" style="margin-right: 2px;"></i> healthy</span>
+                  <span ng-if="!cs.Healthy"><i class="fa fa-exclamation-circle orange-icon" aria-hidden="true" style="margin-right: 2px;"></i> unhealthy</span>
+                </td>
+                <td ng-if="ctrl.hasUnhealthyComponentStatus">
+                  {{ cs.ErrorMessage !== '' ? cs.ErrorMessage : '-' }}
+                </td>
+              </tr>
+            </tbody>
+          </table>
         </rd-widget-body>
       </rd-widget>
     </div>

app/kubernetes/views/cluster/clusterController.js

@@ -6,17 +6,35 @@ import { KubernetesResourceReservation } from 'Kubernetes/models/resource-reserv
 
 class KubernetesClusterController {
   /* @ngInject */
-  constructor($async, Authentication, Notifications, KubernetesNodeService, KubernetesApplicationService) {
+  constructor($async, $state, Authentication, Notifications, LocalStorage, KubernetesNodeService, KubernetesApplicationService, KubernetesComponentStatusService) {
     this.$async = $async;
+    this.$state = $state;
     this.Authentication = Authentication;
     this.Notifications = Notifications;
+    this.LocalStorage = LocalStorage;
     this.KubernetesNodeService = KubernetesNodeService;
     this.KubernetesApplicationService = KubernetesApplicationService;
+    this.KubernetesComponentStatusService = KubernetesComponentStatusService;
 
     this.onInit = this.onInit.bind(this);
     this.getNodes = this.getNodes.bind(this);
     this.getNodesAsync = this.getNodesAsync.bind(this);
     this.getApplicationsAsync = this.getApplicationsAsync.bind(this);
+    this.getComponentStatus = this.getComponentStatus.bind(this);
+    this.getComponentStatusAsync = this.getComponentStatusAsync.bind(this);
+  }
+
+  async getComponentStatusAsync() {
+    try {
+      this.ComponentStatuses = await this.KubernetesComponentStatusService.get();
+      this.hasUnhealthyComponentStatus = _.find(this.ComponentStatuses, { Healthy: false }) ? true : false;
+    } catch (err) {
+      this.Notifications.error('Failure', err, 'Unable to retrieve cluster component statuses');
+    }
+  }
+
+  getComponentStatus() {
+    return this.$async(this.getComponentStatusAsync);
   }
 
   async getNodesAsync() {
@@ -67,12 +85,14 @@ class KubernetesClusterController {
     this.state = {
       applicationsLoading: true,
       viewReady: false,
+      hasUnhealthyComponentStatus: false,
     };
 
     this.isAdmin = this.Authentication.isAdmin();
 
     await this.getNodes();
     if (this.isAdmin) {
+      await this.getComponentStatus();
       await this.getApplications();
     }