1
0
Fork 0
mirror of https://github.com/portainer/portainer.git synced 2025-08-02 20:35:25 +02:00

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>
This commit is contained in:
Maxime Bajeux 2020-07-20 00:49:49 +02:00 committed by GitHub
parent f765c63c74
commit 94676df329
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
7 changed files with 162 additions and 16 deletions

View file

@ -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>

View file

@ -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();
}