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

fix(kube): improve dashboard load speed [EE-4941] (#8572)

Browse source 
* apply changes from EE

* clear query cache when logging out

* Text transitions in smoother
This commit is contained in:
Ali 2023-03-08 11:22:08 +13:00 • committed by GitHub
parent 5f0af62521
commit 89194405ee
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
36 changed files with 569 additions and 210 deletions
Download patch file Download diff file Expand all files Collapse all files

64
app/kubernetes/views/dashboard/dashboard.html
View file

@ -1,64 +0,0 @@
<page-header ng-if="ctrl.state.viewReady" title="'Dashboard'" breadcrumbs="['Environment summary']" reload="true"></page-header>
<kubernetes-view-loading view-ready="ctrl.state.viewReady"></kubernetes-view-loading>
<div ng-if="ctrl.state.viewReady">
<div class="row" ng-if="ctrl.endpoint">
<div class="col-sm-12">
<rd-widget>
<div class="toolBar vertical-center w-full">
<div class="toolBarTitle vertical-center p-5">
<div class="widget-icon space-right">
<pr-icon icon="'gauge'"></pr-icon>
</div>
Environment info
</div>
</div>
<rd-widget-body classes="!px-5 !py-0">
<table class="table">
<tbody>
<tr>
<td class="!border-none !pl-0">Environment</td>
<td class="!border-none">
{{ ctrl.endpoint.Name }}
</td>
</tr>
<tr ng-if="ctrl.showEnvUrl">
<td class="!border-t !pl-0">URL</td>
<td class="!border-t">{{ ctrl.endpoint.URL | stripprotocol }}</td>
</tr>
<tr>
<td class="!pl-0">Tags</td>
<td>{{ ctrl.endpointTags }}</td>
</tr>
</tbody>
</table>
</rd-widget-body>
</rd-widget>
</div>
</div>
<div class="dashboard-grid mx-4">
<div ng-if="ctrl.pools" data-cy="k8sDashboard-namespaces">
<a class="no-link" ui-sref="kubernetes.resourcePools">
<dashboard-item icon="'layers'" type="'Namespace'" value="ctrl.pools.length"></dashboard-item>
</a>
</div>
<div ng-if="ctrl.applications" data-cy="k8sDashboard-applications">
<a class="no-link" ui-sref="kubernetes.applications">
<dashboard-item icon="'box'" type="'Application'" value="ctrl.applications.length"></dashboard-item>
</a>
</div>
<div ng-if="ctrl.configurations" data-cy="k8sDashboard-configurations">
<a class="no-link" ui-sref="kubernetes.configurations">
<dashboard-item icon="'lock'" type="'ConfigMaps & Secret'" value="ctrl.configurations.length"></dashboard-item>
</a>
</div>
<div ng-if="ctrl.volumes" data-cy="k8sDashboard-volumes">
<a class="no-link" ui-sref="kubernetes.volumes">
<dashboard-item icon="'database'" type="'Volume'" value="ctrl.volumes.length"></dashboard-item>
</a>
</div>
</div>
</div>

8
app/kubernetes/views/dashboard/dashboard.js
View file

@ -1,8 +0,0 @@
angular.module('portainer.kubernetes').component('kubernetesDashboardView', {
templateUrl: './dashboard.html',
controller: 'KubernetesDashboardController',
controllerAs: 'ctrl',
bindings: {
endpoint: '<',
},
});

96
app/kubernetes/views/dashboard/dashboardController.js
View file

@ -1,96 +0,0 @@
import angular from 'angular';
import _ from 'lodash-es';
import KubernetesConfigurationHelper from 'Kubernetes/helpers/configurationHelper';
import KubernetesNamespaceHelper from 'Kubernetes/helpers/namespaceHelper';
import { PortainerEndpointTypes } from 'Portainer/models/endpoint/models';
class KubernetesDashboardController {
/* @ngInject */
constructor(
$async,
Notifications,
EndpointService,
KubernetesResourcePoolService,
KubernetesApplicationService,
KubernetesConfigurationService,
KubernetesVolumeService,
Authentication,
TagService
) {
this.$async = $async;
this.Notifications = Notifications;
this.EndpointService = EndpointService;
this.KubernetesResourcePoolService = KubernetesResourcePoolService;
this.KubernetesApplicationService = KubernetesApplicationService;
this.KubernetesConfigurationService = KubernetesConfigurationService;
this.KubernetesVolumeService = KubernetesVolumeService;
this.Authentication = Authentication;
this.TagService = TagService;
this.onInit = this.onInit.bind(this);
this.getAll = this.getAll.bind(this);
this.getAllAsync = this.getAllAsync.bind(this);
}
async getAllAsync() {
const isAdmin = this.Authentication.isAdmin();
const storageClasses = this.endpoint.Kubernetes.Configuration.StorageClasses;
this.showEnvUrl = this.endpoint.Type !== PortainerEndpointTypes.EdgeAgentOnDockerEnvironment && this.endpoint.Type !== PortainerEndpointTypes.EdgeAgentOnKubernetesEnvironment;
try {
const [pools, applications, configurations, volumes, tags] = await Promise.all([
this.KubernetesResourcePoolService.get(),
this.KubernetesApplicationService.get(),
this.KubernetesConfigurationService.get(),
this.KubernetesVolumeService.get(undefined, storageClasses),
this.TagService.tags(),
]);
this.applications = applications;
this.volumes = volumes;
this.endpointTags = this.endpoint.TagIds.length
? _.join(
_.filter(
_.map(this.endpoint.TagIds, (id) => {
const tag = tags.find((tag) => tag.Id === id);
return tag ? tag.Name : '';
}),
Boolean
),
', '
)
: '-';
if (!isAdmin) {
this.pools = _.filter(pools, (pool) => !KubernetesNamespaceHelper.isSystemNamespace(pool.Namespace.Name));
this.configurations = _.filter(configurations, (config) => !KubernetesConfigurationHelper.isSystemToken(config));
} else {
this.pools = pools;
this.configurations = configurations;
}
} catch (err) {
this.Notifications.error('Failure', err, 'Unable to load dashboard data');
}
}
getAll() {
return this.$async(this.getAllAsync);
}
async onInit() {
this.state = {
viewReady: false,
};
await this.getAll();
this.state.viewReady = true;
}
$onInit() {
return this.$async(this.onInit);
}
}
export default KubernetesDashboardController;
angular.module('portainer.kubernetes').controller('KubernetesDashboardController', KubernetesDashboardController);