feat(k8s/cluster): Show the cluster leader (#4027)

* feat(cluster): Show the cluster leader

* feat(cluster): Restrict leader label only to admin users

* feat(kubernetes): minor UI update

* feat(endpoint):  move all KubernetesEndpoint related code to a single endpoint sub-folder and change few things

* fix(k8s/cluster): fix conflict leftover

* feat(k8s/cluster): review component leader UX

* refactor(k8s/node): remove useless call to endpoints

* refactor(k8s/endpoint): relocate variable declaration

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

app/kubernetes/components/datatables/nodes-datatable/nodesDatatable.html

@@ -114,13 +114,9 @@
               dir-paginate="item in ($ctrl.state.filteredDataSet = ($ctrl.dataset | filter:$ctrl.state.textFilter | orderBy:$ctrl.state.orderBy:$ctrl.state.reverseOrder | itemsPerPage: $ctrl.state.paginatedItemLimit))"
             >
               <td ng-if="$ctrl.isAdmin">
-                <a ui-sref="kubernetes.cluster.node({ name: item.Name })">
-                  {{ item.Name }}
-                </a>
-              </td>
-              <td ng-if="!$ctrl.isAdmin">
-                {{ item.Name }}
+                <a ui-sref="kubernetes.cluster.node({ name: item.Name })">{{ item.Name }}</a>
               </td>
+              <td ng-if="!$ctrl.isAdmin"> {{ item.Name }}</td>
               <td>{{ item.Role }}</td>
               <td
                 ><span class="label label-{{ item.Status | kubernetesNodeStatusColor }}">{{ item.Status }}</span></td

app/kubernetes/endpoint/converter.js

@@ -0,0 +1,20 @@
+import { KubernetesEndpoint, KubernetesEndpointAnnotationLeader } from 'Kubernetes/endpoint/models';
+import _ from 'lodash-es';
+
+class KubernetesEndpointConverter {
+  static apiToEndpoint(data) {
+    const res = new KubernetesEndpoint();
+    res.Id = data.metadata.uid;
+    res.Name = data.metadata.name;
+    res.Namespace = data.metadata.namespace;
+    const leaderAnnotation = data.metadata.annotations ? data.metadata.annotations[KubernetesEndpointAnnotationLeader] : '';
+    if (leaderAnnotation) {
+      const parsedJson = JSON.parse(leaderAnnotation);
+      const split = _.split(parsedJson.holderIdentity, '_');
+      res.HolderIdentity = split[0];
+    }
+    return res;
+  }
+}
+
+export default KubernetesEndpointConverter;

app/kubernetes/endpoint/models.js

@@ -0,0 +1,17 @@
+export const KubernetesEndpointAnnotationLeader = 'control-plane.alpha.kubernetes.io/leader';
+
+/**
+ * KubernetesEndpoint Model
+ */
+const _KubernetesEndpoint = Object.freeze({
+  Id: '',
+  Name: '',
+  Namespace: '',
+  HolderIdentity: '',
+});
+
+export class KubernetesEndpoint {
+  constructor() {
+    Object.assign(this, JSON.parse(JSON.stringify(_KubernetesEndpoint)));
+  }
+}

app/kubernetes/endpoint/rest.js

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

app/kubernetes/endpoint/service.js

@@ -0,0 +1,33 @@
+import _ from 'lodash-es';
+import angular from 'angular';
+import PortainerError from 'Portainer/error';
+import KubernetesEndpointConverter from 'Kubernetes/endpoint/converter';
+
+class KubernetesEndpointService {
+  /* @ngInject */
+  constructor($async, KubernetesEndpoints) {
+    this.$async = $async;
+    this.KubernetesEndpoints = KubernetesEndpoints;
+
+    this.getAllAsync = this.getAllAsync.bind(this);
+  }
+
+  /**
+   * GET
+   */
+  async getAllAsync(namespace) {
+    try {
+      const data = await this.KubernetesEndpoints(namespace).get().$promise;
+      return _.map(data.items, (item) => KubernetesEndpointConverter.apiToEndpoint(item));
+    } catch (err) {
+      throw new PortainerError('Unable to retrieve endpoints', err);
+    }
+  }
+
+  get(namespace) {
+    return this.$async(this.getAllAsync, namespace);
+  }
+}
+
+export default KubernetesEndpointService;
+angular.module('portainer.kubernetes').service('KubernetesEndpointService', KubernetesEndpointService);

app/kubernetes/views/cluster/cluster.html

@@ -9,6 +9,7 @@
     <div class="col-sm-12">
       <rd-widget>
         <rd-widget-body>
+          <!-- resource-reservation -->
           <form class="form-horizontal" ng-if="ctrl.resourceReservation">
             <kubernetes-resource-reservation
               cpu="ctrl.resourceReservation.CPU"
@@ -19,7 +20,9 @@
             >
             </kubernetes-resource-reservation>
           </form>
+          <!-- !resource-reservation -->
 
+          <!-- cluster-status -->
           <div class="col-sm-12 form-section-title">
             Cluster status
           </div>
@@ -27,24 +30,50 @@
           <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>
+                <td style="border-top: none; width: 25%;">Component</td>
+                <td style="border-top: none; width: 25%;">Status</td>
+                <td style="border-top: none; width: 50%;" ng-if="ctrl.hasUnhealthyComponentStatus">Error</td>
               </tr>
-              <tr ng-repeat="cs in ctrl.ComponentStatuses">
-                <td>
+              <tr ng-repeat="cs in ctrl.componentStatuses">
+                <td style="width: 25%;">
                   {{ cs.ComponentName }}
                 </td>
-                <td>
+                <td style="width: 25%;">
                   <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">
+                <td ng-if="ctrl.hasUnhealthyComponentStatus" style="width: 50%;">
                   {{ cs.ErrorMessage !== '' ? cs.ErrorMessage : '-' }}
                 </td>
               </tr>
             </tbody>
           </table>
+          <!-- !cluster-status -->
+
+          <!-- leader-status -->
+          <div ng-if="ctrl.endpoints.length > 0">
+            <div class="col-sm-12 form-section-title">
+              Leader status
+            </div>
+
+            <table class="table">
+              <tbody>
+                <tr class="text-muted">
+                  <td style="border-top: none; width: 25%;">Component</td>
+                  <td style="border-top: none; width: 25%;">Leader node</td>
+                </tr>
+                <tr ng-repeat="ep in ctrl.endpoints">
+                  <td style="width: 25%;">
+                    {{ ep.Name }}
+                  </td>
+                  <td style="width: 25%;">
+                    {{ ep.HolderIdentity }}
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+          <!-- !leader-status -->
         </rd-widget-body>
       </rd-widget>
     </div>

app/kubernetes/views/cluster/clusterController.js

@@ -6,7 +6,17 @@ import { KubernetesResourceReservation } from 'Kubernetes/models/resource-reserv
 
 class KubernetesClusterController {
   /* @ngInject */
-  constructor($async, $state, Authentication, Notifications, LocalStorage, KubernetesNodeService, KubernetesApplicationService, KubernetesComponentStatusService) {
+  constructor(
+    $async,
+    $state,
+    Authentication,
+    Notifications,
+    LocalStorage,
+    KubernetesNodeService,
+    KubernetesApplicationService,
+    KubernetesComponentStatusService,
+    KubernetesEndpointService
+  ) {
     this.$async = $async;
     this.$state = $state;
     this.Authentication = Authentication;
@@ -15,6 +25,7 @@ class KubernetesClusterController {
     this.KubernetesNodeService = KubernetesNodeService;
     this.KubernetesApplicationService = KubernetesApplicationService;
     this.KubernetesComponentStatusService = KubernetesComponentStatusService;
+    this.KubernetesEndpointService = KubernetesEndpointService;
 
     this.onInit = this.onInit.bind(this);
     this.getNodes = this.getNodes.bind(this);
@@ -22,12 +33,13 @@ class KubernetesClusterController {
     this.getApplicationsAsync = this.getApplicationsAsync.bind(this);
     this.getComponentStatus = this.getComponentStatus.bind(this);
     this.getComponentStatusAsync = this.getComponentStatusAsync.bind(this);
+    this.getEndpointsAsync = this.getEndpointsAsync.bind(this);
   }
 
   async getComponentStatusAsync() {
     try {
-      this.ComponentStatuses = await this.KubernetesComponentStatusService.get();
-      this.hasUnhealthyComponentStatus = _.find(this.ComponentStatuses, { Healthy: false }) ? true : false;
+      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');
     }
@@ -37,6 +49,19 @@ class KubernetesClusterController {
     return this.$async(this.getComponentStatusAsync);
   }
 
+  async getEndpointsAsync() {
+    try {
+      const endpoints = await this.KubernetesEndpointService.get('kube-system');
+      this.endpoints = _.filter(endpoints, (ep) => ep.HolderIdentity);
+    } catch (err) {
+      this.Notifications.error('Failure', err, 'Unable to retrieve endpoints');
+    }
+  }
+
+  getEndpoints() {
+    return this.$async(this.getEndpointsAsync);
+  }
+
   async getNodesAsync() {
     try {
       const nodes = await this.KubernetesNodeService.get();
@@ -92,6 +117,7 @@ class KubernetesClusterController {
 
     await this.getNodes();
     if (this.isAdmin) {
+      await this.getEndpoints();
       await this.getComponentStatus();
       await this.getApplications();
     }