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
pull/5365/head
zees-dev 2021-07-28 14:26:03 +12:00 committed by GitHub
parent cee7ac26e9
commit ce31de5e9e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
13 changed files with 188 additions and 30 deletions

View File

@ -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 }}">
<b style="white-space: nowrap;"> {{ $ctrl.memory }} / {{ $ctrl.memoryLimit }} MB - {{ $ctrl.memoryUsage }}% </b>
<uib-progressbar animate="false" value="$ctrl.memoryReservationPercent" type="{{ $ctrl.memoryReservationPercent | kubernetesUsageLevelInfo }}">
<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 }}">
<b style="white-space: nowrap;"> {{ $ctrl.cpu | kubernetesApplicationCPUValue }} / {{ $ctrl.cpuLimit }} - {{ $ctrl.cpuUsage }}% </b>
<uib-progressbar animate="false" value="$ctrl.cpuReservationPercent" type="{{ $ctrl.cpuReservationPercent | kubernetesUsageLevelInfo }}">
<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>

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -13,10 +13,10 @@ class KubernetesClusterController {
Notifications,
LocalStorage,
KubernetesNodeService,
KubernetesMetricsService,
KubernetesApplicationService,
KubernetesComponentStatusService,
KubernetesEndpointService,
EndpointProvider
KubernetesEndpointService
) {
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() {

View File

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

View File

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

View File

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

View File

@ -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"
memory="ctrl.state.memoryUsed"
cpu-reservation="ctrl.state.resourceReservation.CPU"
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>

View File

@ -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.memoryUsed = KubernetesResourceReservationHelper.megaBytesValue(quota.MemoryLimitUsed);
this.state.resourceReservation.CPU = quota.CpuLimitUsed;
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) {