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

refactor(k8s): namespace core logic (#12142)

Browse source 
Co-authored-by: testA113 <aliharriss1995@gmail.com>
Co-authored-by: Anthony Lapenna <anthony.lapenna@portainer.io>
Co-authored-by: James Carppe <85850129+jamescarppe@users.noreply.github.com>
Co-authored-by: Ali <83188384+testA113@users.noreply.github.com>
This commit is contained in:
Steven Kang 2024-10-01 14:15:51 +13:00 • committed by GitHub
parent da010f3d08
commit ea228c3d6d
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
276 changed files with 9241 additions and 3361 deletions
Download patch file Download diff file Expand all files Collapse all files

69
app/kubernetes/__module.js
View file

@ -1,5 +1,4 @@
import { EnvironmentStatus } from '@/react/portainer/environments/types';
import { getSelfSubjectAccessReview } from '@/react/kubernetes/namespaces/getSelfSubjectAccessReview';
import { updateAxiosAdapter } from '@/portainer/services/axios';
import { PortainerEndpointTypes } from 'Portainer/models/endpoint/models';
@ -96,13 +95,7 @@ angular.module('portainer.kubernetes', ['portainer.app', registriesModule, custo
}
try {
const status = await checkEndpointStatus(
endpoint.Type === PortainerEndpointTypes.EdgeAgentOnKubernetesEnvironment
? KubernetesHealthService.ping(endpoint.Id)
: // use selfsubject access review to check if we can connect to the kubernetes environment
// because it gets a fast response, and is accessible to all users
getSelfSubjectAccessReview(endpoint.Id, 'default')
);
const status = await checkEndpointStatus(endpoint);
if (endpoint.Type !== PortainerEndpointTypes.EdgeAgentOnKubernetesEnvironment) {
await updateEndpointStatus(endpoint, status);
@ -131,9 +124,9 @@ angular.module('portainer.kubernetes', ['portainer.app', registriesModule, custo
return false;
}
async function checkEndpointStatus(promise) {
async function checkEndpointStatus(endpoint) {
try {
await promise;
await KubernetesHealthService.ping(endpoint.Id);
return EnvironmentStatus.Up;
} catch (e) {
return EnvironmentStatus.Down;
@ -459,10 +452,10 @@ angular.module('portainer.kubernetes', ['portainer.app', registriesModule, custo
const resourcePools = {
name: 'kubernetes.resourcePools',
url: '/pools',
url: '/namespaces',
views: {
'content@': {
component: 'kubernetesResourcePoolsView',
component: 'kubernetesNamespacesView',
},
},
data: {
@ -511,7 +504,7 @@ angular.module('portainer.kubernetes', ['portainer.app', registriesModule, custo
const volumes = {
name: 'kubernetes.volumes',
url: '/volumes',
url: '/volumes?tab',
views: {
'content@': {
component: 'kubernetesVolumesView',
@ -582,6 +575,51 @@ angular.module('portainer.kubernetes', ['portainer.app', registriesModule, custo
},
};
const moreResources = {
name: 'kubernetes.moreResources',
url: '/moreResources',
abstract: true,
};
const serviceAccounts = {
name: 'kubernetes.moreResources.serviceAccounts',
url: '/serviceAccounts',
views: {
'content@': {
component: 'serviceAccountsView',
},
},
data: {
docs: '/user/kubernetes/more-resources/service-accounts',
},
};
const clusterRoles = {
name: 'kubernetes.moreResources.clusterRoles',
url: '/clusterRoles?tab',
views: {
'content@': {
component: 'clusterRolesView',
},
},
data: {
docs: '/user/kubernetes/more-resources/cluster-roles',
},
};
const roles = {
name: 'kubernetes.moreResources.roles',
url: '/roles?tab',
views: {
'content@': {
component: 'k8sRolesView',
},
},
data: {
docs: '/user/kubernetes/more-resources/namespace-roles',
},
};
$stateRegistryProvider.register(kubernetes);
$stateRegistryProvider.register(helmApplication);
$stateRegistryProvider.register(applications);
@ -621,5 +659,10 @@ angular.module('portainer.kubernetes', ['portainer.app', registriesModule, custo
$stateRegistryProvider.register(ingresses);
$stateRegistryProvider.register(ingressesCreate);
$stateRegistryProvider.register(ingressesEdit);
$stateRegistryProvider.register(moreResources);
$stateRegistryProvider.register(serviceAccounts);
$stateRegistryProvider.register(clusterRoles);
$stateRegistryProvider.register(roles);
},
]);

4
app/kubernetes/converters/configMap.js
View file

@ -77,7 +77,7 @@ class KubernetesConfigMapConverter {
static createPayload(data) {
const res = new KubernetesConfigMapCreatePayload();
res.metadata.name = data.Name;
res.metadata.namespace = data.Namespace;
res.metadata.namespace = data.Namespace.Namespace.Name;
const configurationOwner = _.truncate(data.ConfigurationOwner, { length: 63, omission: '' });
res.metadata.labels[KubernetesPortainerConfigurationOwnerLabel] = configurationOwner;
@ -115,7 +115,7 @@ class KubernetesConfigMapConverter {
const res = new KubernetesConfigMap();
res.Id = formValues.Id;
res.Name = formValues.Name;
res.Namespace = formValues.ResourcePool.Namespace.Name;
res.Namespace = formValues.ResourcePool;
res.ConfigurationOwner = formValues.ConfigurationOwner;
res.Data = formValues.Data;
return res;

4
app/kubernetes/converters/secret.js
View file

@ -9,7 +9,7 @@ class KubernetesSecretConverter {
static createPayload(secret) {
const res = new KubernetesSecretCreatePayload();
res.metadata.name = secret.Name;
res.metadata.namespace = secret.Namespace;
res.metadata.namespace = secret.Namespace.Namespace.Name;
res.type = secret.Type;
const configurationOwner = _.truncate(secret.ConfigurationOwner, { length: 63, omission: '' });
res.metadata.labels[KubernetesPortainerConfigurationOwnerLabel] = configurationOwner;
@ -100,7 +100,7 @@ class KubernetesSecretConverter {
static configurationFormValuesToSecret(formValues) {
const res = new KubernetesApplicationSecret();
res.Name = formValues.Name;
res.Namespace = formValues.ResourcePool.Namespace.Name;
res.Namespace = formValues.ResourcePool;
res.Type = formValues.Type;
res.ConfigurationOwner = formValues.ConfigurationOwner;
res.Data = formValues.Data;

26
app/kubernetes/helpers/stackHelper.js
View file

@ -1,26 +0,0 @@
import _ from 'lodash-es';
import { KubernetesStack } from 'Kubernetes/models/stack/models';
class KubernetesStackHelper {
static stacksFromApplications(applications) {
const res = _.reduce(
applications,
(acc, app) => {
if (app.StackName) {
let stack = _.find(acc, { Name: app.StackName, ResourcePool: app.ResourcePool });
if (!stack) {
stack = new KubernetesStack();
stack.Name = app.StackName;
stack.ResourcePool = app.ResourcePool;
acc.push(stack);
}
stack.Applications.push(app);
}
return acc;
},
[]
);
return res;
}
}
export default KubernetesStackHelper;

12
app/kubernetes/helpers/stackHelper.test.js
View file

@ -1,12 +0,0 @@
import KubernetesStackHelper from './stackHelper';
describe('stacksFromApplications', () => {
const { stacksFromApplications } = KubernetesStackHelper;
test('should return an empty array when passed an empty array', () => {
expect(stacksFromApplications([])).toHaveLength(0);
});
test('should return an empty array when passed a list of applications without stacks', () => {
expect(stacksFromApplications([{ StackName: '' }, { StackName: '' }, { StackName: '' }, { StackName: '' }])).toHaveLength(0);
});
});

10
app/kubernetes/models/application/models/Application.ts
View file

@ -41,9 +41,11 @@ export class Application {
annotations?: Record<string, string>;
};
Limits: {
Cpu?: number;
Memory?: number;
Resource?: {
cpuLimit?: number;
cpuRequest?: number;
memoryLimit?: number;
memoryRequest?: number;
};
ServiceType?: ServiceType;
@ -106,7 +108,7 @@ export class Application {
this.Pods = [];
this.Containers = [];
this.Metadata = {};
this.Limits = {};
this.Resource = {};
this.ServiceId = '';
this.ServiceName = '';
this.HeadlessServiceName = undefined;

2
app/kubernetes/models/storage-class/StorageClass.ts
View file

@ -3,5 +3,7 @@ export class StorageClass {
Provisioner: string = '';
ReclaimPolicy: string = '';
AllowVolumeExpansion: boolean = false;
}

2
app/kubernetes/models/volume/Volume.ts
View file

@ -6,7 +6,7 @@ import { PersistentVolumeClaim } from './PersistentVolumeClaim';
type VolumeResourcePool = ReturnType<typeof KubernetesResourcePool>;
export class Volume {
ResourcePool: VolumeResourcePool = {} as VolumeResourcePool;
ResourcePool?: VolumeResourcePool = {} as VolumeResourcePool;
PersistentVolumeClaim: PersistentVolumeClaim = {} as PersistentVolumeClaim;

2
app/kubernetes/react/components/applications.ts
View file

@ -11,8 +11,6 @@ export const applicationsModule = angular
.component(
'kubernetesApplicationsDatatable',
r2a(withUIRouter(withCurrentUser(ApplicationsDatatable)), [
'dataset',
'isLoading',
'namespace',
'namespaces',
'onNamespaceChange',

6
app/kubernetes/react/components/clusterManagement.ts
View file

@ -11,11 +11,7 @@ export const clusterManagementModule = angular
.module('portainer.kubernetes.react.components.clusterManagement', [])
.component(
'kubernetesNodeApplicationsDatatable',
r2a(withUIRouter(withCurrentUser(NodeApplicationsDatatable)), [
'dataset',
'isLoading',
'onRefresh',
])
r2a(withUIRouter(withCurrentUser(NodeApplicationsDatatable)), [])
)
.component(
'resourceEventsDatatable',

5
app/kubernetes/react/components/index.ts
View file

@ -62,7 +62,6 @@ import { kubeEnvVarValidationSchema } from '@/react/kubernetes/applications/comp
import { IntegratedAppsDatatable } from '@/react/kubernetes/components/IntegratedAppsDatatable/IntegratedAppsDatatable';
import { applicationsModule } from './applications';
import { volumesModule } from './volumes';
import { namespacesModule } from './namespaces';
import { clusterManagementModule } from './clusterManagement';
import { registriesModule } from './registries';
@ -70,7 +69,6 @@ import { registriesModule } from './registries';
export const ngModule = angular
.module('portainer.kubernetes.react.components', [
applicationsModule,
volumesModule,
namespacesModule,
clusterManagementModule,
registriesModule,
@ -213,13 +211,10 @@ export const ngModule = angular
.component(
'kubernetesApplicationsStacksDatatable',
r2a(withUIRouter(withCurrentUser(ApplicationsStacksDatatable)), [
'dataset',
'onRefresh',
'onRemove',
'namespace',
'namespaces',
'onNamespaceChange',
'isLoading',
'showSystem',
'setSystemResources',
])

6
app/kubernetes/react/components/namespaces.ts
View file

@ -12,11 +12,7 @@ export const namespacesModule = angular
.module('portainer.kubernetes.react.components.namespaces', [])
.component(
'kubernetesNamespacesDatatable',
r2a(withUIRouter(withCurrentUser(NamespacesDatatable)), [
'dataset',
'onRemove',
'onRefresh',
])
r2a(withUIRouter(withCurrentUser(NamespacesDatatable)), [])
)
.component(
'kubernetesNamespaceApplicationsDatatable',

25
app/kubernetes/react/components/volumes.ts
View file

@ -1,25 +0,0 @@
import angular from 'angular';
import { r2a } from '@/react-tools/react2angular';
import { withUIRouter } from '@/react-tools/withUIRouter';
import { withCurrentUser } from '@/react-tools/withCurrentUser';
import { VolumesDatatable } from '@/react/kubernetes/volumes/ListView/VolumesDatatable';
import { StorageDatatable } from '@/react/kubernetes/volumes/ListView/StorageDatatable';
export const volumesModule = angular
.module('portainer.kubernetes.react.components.volumes', [])
.component(
'kubernetesVolumesDatatable',
r2a(withUIRouter(withCurrentUser(VolumesDatatable)), [
'dataset',
'onRemove',
'onRefresh',
])
)
.component(
'kubernetesVolumesStoragesDatatable',
r2a(withUIRouter(withCurrentUser(StorageDatatable)), [
'dataset',
'onRefresh',
])
).name;

25
app/kubernetes/react/views/index.ts
View file

@ -13,6 +13,11 @@ import { ConfigmapsAndSecretsView } from '@/react/kubernetes/configs/ListView/Co
import { CreateNamespaceView } from '@/react/kubernetes/namespaces/CreateView/CreateNamespaceView';
import { ApplicationDetailsView } from '@/react/kubernetes/applications/DetailsView/ApplicationDetailsView';
import { ConfigureView } from '@/react/kubernetes/cluster/ConfigureView';
import { NamespacesView } from '@/react/kubernetes/namespaces/ListView/NamespacesView';
import { ServiceAccountsView } from '@/react/kubernetes/more-resources/ServiceAccountsView/ServiceAccountsView';
import { ClusterRolesView } from '@/react/kubernetes/more-resources/ClusterRolesView';
import { RolesView } from '@/react/kubernetes/more-resources/RolesView';
import { VolumesView } from '@/react/kubernetes/volumes/ListView/VolumesView';
export const viewsModule = angular
.module('portainer.kubernetes.react.views', [])
@ -20,10 +25,18 @@ export const viewsModule = angular
'kubernetesCreateNamespaceView',
r2a(withUIRouter(withReactQuery(withCurrentUser(CreateNamespaceView))), [])
)
.component(
'kubernetesNamespacesView',
r2a(withUIRouter(withReactQuery(withCurrentUser(NamespacesView))), [])
)
.component(
'kubernetesServicesView',
r2a(withUIRouter(withReactQuery(withCurrentUser(ServicesView))), [])
)
.component(
'kubernetesVolumesView',
r2a(withUIRouter(withReactQuery(withCurrentUser(VolumesView))), [])
)
.component(
'kubernetesIngressesView',
r2a(
@ -60,4 +73,16 @@ export const viewsModule = angular
.component(
'kubernetesConsoleView',
r2a(withUIRouter(withReactQuery(withCurrentUser(ConsoleView))), [])
)
.component(
'serviceAccountsView',
r2a(withUIRouter(withReactQuery(withCurrentUser(ServiceAccountsView))), [])
)
.component(
'clusterRolesView',
r2a(withUIRouter(withReactQuery(withCurrentUser(ClusterRolesView))), [])
)
.component(
'k8sRolesView',
r2a(withUIRouter(withReactQuery(withCurrentUser(RolesView))), [])
).name;

3
app/kubernetes/services/applicationService.js
View file

@ -14,7 +14,6 @@ import { notifyError } from '@/portainer/services/notifications';
import { KubernetesIngressConverter } from 'Kubernetes/ingress/converter';
import { generateNewIngressesFromFormPaths } from '@/react/kubernetes/applications/CreateView/application-services/utils';
import { KubernetesPod } from '../pod/models';
import { KubernetesApplication } from '../models/application/models';
class KubernetesApplicationService {
/* #region CONSTRUCTOR */
@ -64,7 +63,7 @@ class KubernetesApplicationService {
apiService = this.KubernetesDaemonSetService;
} else if (app.ApplicationType === KubernetesApplicationTypes.StatefulSet) {
apiService = this.KubernetesStatefulSetService;
} else if (app instanceof KubernetesPod || (app instanceof KubernetesApplication && app.ApplicationType === KubernetesApplicationTypes.Pod)) {
} else if (app instanceof KubernetesPod || KubernetesApplicationTypes.Pod) {
apiService = this.KubernetesPodService;
} else {
throw new PortainerError('Unable to determine which association to use to retrieve API Service');

24
app/kubernetes/services/namespaceService.js
View file

@ -2,17 +2,17 @@ import angular from 'angular';
import PortainerError from 'Portainer/error';
import { KubernetesCommonParams } from 'Kubernetes/models/common/params';
import KubernetesNamespaceConverter from 'Kubernetes/converters/namespace';
import KubernetesNamespaceHelper from 'Kubernetes/helpers/namespaceHelper';
import { updateNamespaces } from 'Kubernetes/store/namespace';
import $allSettled from 'Portainer/services/allSettled';
import { getSelfSubjectAccessReview } from '@/react/kubernetes/namespaces/getSelfSubjectAccessReview';
class KubernetesNamespaceService {
/* @ngInject */
constructor($async, KubernetesNamespaces, LocalStorage, $state) {
constructor($async, KubernetesNamespaces, Authentication, LocalStorage, $state) {
this.$async = $async;
this.$state = $state;
this.KubernetesNamespaces = KubernetesNamespaces;
this.LocalStorage = LocalStorage;
this.Authentication = Authentication;
this.getAsync = this.getAsync.bind(this);
this.getAllAsync = this.getAllAsync.bind(this);
@ -68,17 +68,13 @@ class KubernetesNamespaceService {
try {
// get the list of all namespaces (RBAC allows users to see the list of namespaces)
const data = await this.KubernetesNamespaces().get().$promise;
// get the status of each namespace with accessReviews (to avoid failed forbidden responses, which aren't cached)
const accessReviews = await Promise.all(data.items.map((namespace) => getSelfSubjectAccessReview(this.$state.params.endpointId, namespace.metadata.name)));
const allowedNamespaceNames = accessReviews.filter((ar) => ar.status.allowed).map((ar) => ar.spec.resourceAttributes.namespace);
const promises = allowedNamespaceNames.map((name) => this.KubernetesNamespaces().status({ id: name }).$promise);
const namespaces = await $allSettled(promises);
// only return namespaces if the user has access to namespaces
const allNamespaces = namespaces.fulfilled.map((item) => {
return KubernetesNamespaceConverter.apiToNamespace(item);
});
updateNamespaces(allNamespaces);
return allNamespaces;
// get the list of all namespaces with isAccessAllowed flags
const hasK8sAccessSystemNamespaces = this.Authentication.hasAuthorizations(['K8sAccessSystemNamespaces']);
const namespaces = data.items.filter((item) => !KubernetesNamespaceHelper.isSystemNamespace(item.metadata.name) || hasK8sAccessSystemNamespaces);
// parse the namespaces
const visibleNamespaces = namespaces.map((item) => KubernetesNamespaceConverter.apiToNamespace(item));
updateNamespaces(visibleNamespaces);
return visibleNamespaces;
} catch (err) {
throw new PortainerError('Unable to retrieve namespaces', err);
}

56
app/kubernetes/views/applications/applicationsController.js
View file

@ -1,12 +1,11 @@
import angular from 'angular';
import _ from 'lodash-es';
import KubernetesStackHelper from 'Kubernetes/helpers/stackHelper';
import KubernetesApplicationHelper from 'Kubernetes/helpers/application';
import KubernetesConfigurationHelper from 'Kubernetes/helpers/configurationHelper';
import { KubernetesApplicationTypes } from 'Kubernetes/models/application/models/appConstants';
import { KubernetesPortainerApplicationStackNameLabel } from 'Kubernetes/models/application/models';
import { getDeploymentOptions } from '@/react/portainer/environments/environment.service';
import { getStacksFromApplications } from '@/react/kubernetes/applications/ListView/ApplicationsStacksDatatable/getStacksFromApplications';
import { getApplications } from '@/react/kubernetes/applications/application.queries.ts';
import { getNamespaces } from '@/react/kubernetes/namespaces/queries/useNamespacesQuery';
class KubernetesApplicationsController {
/* @ngInject */
constructor(
@ -16,6 +15,7 @@ class KubernetesApplicationsController {
Authentication,
Notifications,
KubernetesApplicationService,
EndpointService,
HelmService,
KubernetesConfigurationService,
LocalStorage,
@ -36,8 +36,6 @@ class KubernetesApplicationsController {
this.KubernetesNamespaceService = KubernetesNamespaceService;
this.onInit = this.onInit.bind(this);
this.getApplications = this.getApplications.bind(this);
this.getApplicationsAsync = this.getApplicationsAsync.bind(this);
this.removeAction = this.removeAction.bind(this);
this.removeActionAsync = this.removeActionAsync.bind(this);
this.removeStacksAction = this.removeStacksAction.bind(this);
@ -88,23 +86,18 @@ class KubernetesApplicationsController {
if (application.ApplicationType === KubernetesApplicationTypes.Helm) {
await this.HelmService.uninstall(this.endpoint.Id, application);
} else {
await this.KubernetesApplicationService.delete(application);
if (application.Metadata.labels && application.Metadata.labels[KubernetesPortainerApplicationStackNameLabel]) {
// Update applications in stack
const stack = this.state.stacks.find((x) => x.Name === application.StackName);
const index = stack.Applications.indexOf(application);
stack.Applications.splice(index, 1);
// remove stack if no app left in the stack
const appsInNamespace = await getApplications(this.endpoint.Id, { namespace: application.ResourcePool, withDependencies: false });
const stacksInNamespace = getStacksFromApplications(appsInNamespace);
const stack = stacksInNamespace.find((x) => x.Name === application.StackName);
if (stack.Applications.length === 0 && application.StackId) {
await this.StackService.remove({ Id: application.StackId }, false, this.endpoint.Id);
}
}
await this.KubernetesApplicationService.delete(application);
}
this.Notifications.success('Application successfully removed', application.Name);
const index = this.state.applications.indexOf(application);
this.state.applications.splice(index, 1);
} catch (err) {
this.Notifications.error('Failure', err, 'Unable to remove application');
} finally {
@ -137,42 +130,15 @@ class KubernetesApplicationsController {
this.state.namespaceName = namespaceName;
// save the selected namespaceName in local storage with the key 'kubernetes_namespace_filter_${environmentId}_${userID}'
this.LocalStorage.storeNamespaceFilter(this.endpoint.Id, this.user.ID, namespaceName);
return this.getApplicationsAsync();
});
}
async getApplicationsAsync() {
try {
this.state.isAppsLoading = true;
const [applications, configurations] = await Promise.all([
this.KubernetesApplicationService.get(this.state.namespaceName),
this.KubernetesConfigurationService.get(this.state.namespaceName),
]);
const configuredApplications = KubernetesConfigurationHelper.getApplicationConfigurations(applications, configurations);
const { helmApplications, nonHelmApplications } = KubernetesApplicationHelper.getNestedApplications(configuredApplications);
this.state.applications = [...helmApplications, ...nonHelmApplications];
this.state.stacks = KubernetesStackHelper.stacksFromApplications(applications);
this.state.ports = KubernetesApplicationHelper.portMappingsFromApplications(applications);
this.$scope.$apply();
} catch (err) {
this.Notifications.error('Failure', err, 'Unable to retrieve applications');
} finally {
this.state.isAppsLoading = false;
}
}
setSystemResources(flag) {
return this.$scope.$applyAsync(() => {
this.state.isSystemResources = flag;
});
}
getApplications() {
return this.$async(this.getApplicationsAsync);
}
async onInit() {
this.state = {
activeTab: this.LocalStorage.getActiveTab('applications'),
@ -190,12 +156,12 @@ class KubernetesApplicationsController {
this.deploymentOptions = await getDeploymentOptions();
this.user = this.Authentication.getUserDetails();
this.state.namespaces = await this.KubernetesNamespaceService.get();
this.state.namespaces = await getNamespaces(this.endpoint.Id);
const savedNamespace = this.LocalStorage.getNamespaceFilter(this.endpoint.Id, this.user.ID); // could be null if not found, and '' if all namepsaces is selected
const preferredNamespace = savedNamespace === null ? 'default' : savedNamespace;
this.state.namespaces = this.state.namespaces.filter((n) => n.Status === 'Active');
this.state.namespaces = this.state.namespaces.filter((n) => n.Status.phase === 'Active');
this.state.namespaces = _.sortBy(this.state.namespaces, 'Name');
// set all namespaces ('') if there are no namespaces, or if all namespaces is selected
if (!this.state.namespaces.length || preferredNamespace === '') {
@ -205,8 +171,6 @@ class KubernetesApplicationsController {
this.state.namespaceName = this.state.namespaces.find((n) => n.Name === preferredNamespace) ? preferredNamespace : this.state.namespaces[0].Name;
}
await this.getApplications();
this.state.viewReady = true;
}

2
app/kubernetes/views/applications/create/createApplicationController.js
View file

@ -918,7 +918,7 @@ class KubernetesCreateApplicationController {
async checkIngressesToUpdate() {
let ingressesToUpdate = [];
let servicePortsToUpdate = [];
const fullIngresses = await getIngresses(this.endpoint.Id, this.formValues.ResourcePool.Namespace.Name);
const fullIngresses = await getIngresses(this.endpoint.Id);
this.formValues.Services.forEach((updatedService) => {
const oldServiceIndex = this.oldFormValues.Services.findIndex((oldService) => oldService.Name === updatedService.Name);
const numberOfPortsInOldService = this.oldFormValues.Services[oldServiceIndex] && this.oldFormValues.Services[oldServiceIndex].Ports.length;

2
app/kubernetes/views/applications/stats/statsController.js
View file

@ -4,7 +4,7 @@ import _ from 'lodash-es';
import filesizeParser from 'filesize-parser';
import KubernetesResourceReservationHelper from 'Kubernetes/helpers/resourceReservationHelper';
import KubernetesPodConverter from 'Kubernetes/pod/converter';
import { getMetricsForPod } from '@/react/kubernetes/services/service.ts';
import { getMetricsForPod } from '@/react/kubernetes/metrics/metrics.ts';
class KubernetesApplicationStatsController {
/* @ngInject */

24
app/kubernetes/views/cluster/clusterController.js
View file

@ -3,7 +3,7 @@ import _ from 'lodash-es';
import filesizeParser from 'filesize-parser';
import KubernetesResourceReservationHelper from 'Kubernetes/helpers/resourceReservationHelper';
import { KubernetesResourceReservation } from 'Kubernetes/models/resource-reservation/models';
import { getMetricsForAllNodes } from '@/react/kubernetes/services/service.ts';
import { getMetricsForAllNodes, getTotalResourcesForAllApplications } from '@/react/kubernetes/metrics/metrics.ts';
class KubernetesClusterController {
/* @ngInject */
@ -68,20 +68,11 @@ class KubernetesClusterController {
async getApplicationsAsync() {
try {
this.state.applicationsLoading = true;
this.applications = await this.KubernetesApplicationService.get();
const nodeNames = _.map(this.nodes, (node) => node.Name);
this.resourceReservation = _.reduce(
this.applications,
(acc, app) => {
app.Pods = _.filter(app.Pods, (pod) => nodeNames.includes(pod.Node));
const resourceReservation = KubernetesResourceReservationHelper.computeResourceReservation(app.Pods);
acc.CPU += resourceReservation.CPU;
acc.Memory += resourceReservation.Memory;
return acc;
},
new KubernetesResourceReservation()
);
this.resourceReservation.Memory = KubernetesResourceReservationHelper.megaBytesValue(this.resourceReservation.Memory);
const applicationsResources = await getTotalResourcesForAllApplications(this.endpoint.Id);
this.resourceReservation = new KubernetesResourceReservation();
this.resourceReservation.CPU = Math.round(applicationsResources.CpuRequest / 1000);
this.resourceReservation.Memory = KubernetesResourceReservationHelper.megaBytesValue(applicationsResources.MemoryRequest);
if (this.hasResourceUsageAccess()) {
await this.getResourceUsage(this.endpoint.Id);
@ -133,8 +124,7 @@ class KubernetesClusterController {
await this.getNodes();
if (this.isAdmin) {
await this.getEndpoints();
await this.getApplications();
await Promise.allSettled([this.getEndpoints(), this.getApplicationsAsync()]);
}
this.state.viewReady = true;

14
app/kubernetes/views/cluster/node/node.html
View file

@ -76,12 +76,12 @@
<div style="padding: 8px">
<kubernetes-resource-reservation
ng-if="ctrl.resourceReservation"
cpu-reservation="ctrl.resourceReservation.CPU"
cpu-reservation="ctrl.resourceReservation.CpuRequest"
cpu-usage="ctrl.resourceUsage.CPU"
cpu-limit="ctrl.node.CPU"
memory-reservation="ctrl.resourceReservation.Memory"
memory-reservation="ctrl.resourceReservation.MemoryRequest"
memory-usage="ctrl.resourceUsage.Memory"
memory-limit="ctrl.memoryLimit"
memory-limit="ctrl.node.Memory"
description="Resource reservation represents the total amount of resource assigned to all the applications running on this node."
display-usage="ctrl.hasResourceUsageAccess()"
>
@ -267,11 +267,5 @@
</div>
</div>
<kubernetes-node-applications-datatable
ng-if="ctrl.applications && ctrl.applications.length > 0"
dataset="ctrl.applications"
on-refresh="(ctrl.getApplications)"
is-loading="ctrl.state.applicationsLoading"
>
</kubernetes-node-applications-datatable>
<kubernetes-node-applications-datatable></kubernetes-node-applications-datatable>
</div>

48
app/kubernetes/views/cluster/node/nodeController.js
View file

@ -9,7 +9,7 @@ import { KubernetesNodeTaintEffects, KubernetesNodeAvailabilities } from 'Kubern
import KubernetesFormValidationHelper from 'Kubernetes/helpers/formValidationHelper';
import { KubernetesNodeHelper } from 'Kubernetes/node/helper';
import { confirmUpdateNode } from '@/react/kubernetes/cluster/NodeView/ConfirmUpdateNode';
import { getMetricsForNode } from '@/react/kubernetes/services/service.ts';
import { getMetricsForNode, getTotalResourcesForAllApplications } from '@/react/kubernetes/metrics/metrics.ts';
class KubernetesNodeController {
/* @ngInject */
@ -40,7 +40,6 @@ class KubernetesNodeController {
this.getNodesAsync = this.getNodesAsync.bind(this);
this.getEvents = this.getEvents.bind(this);
this.getEventsAsync = this.getEventsAsync.bind(this);
this.getApplicationsAsync = this.getApplicationsAsync.bind(this);
this.getEndpointsAsync = this.getEndpointsAsync.bind(this);
this.updateNodeAsync = this.updateNodeAsync.bind(this);
this.drainNodeAsync = this.drainNodeAsync.bind(this);
@ -300,6 +299,8 @@ class KubernetesNodeController {
try {
const nodeName = this.$transition$.params().nodeName;
const node = await getMetricsForNode(this.$state.params.endpointId, nodeName);
node.CPU = node.usage.cpu;
node.Memory = KubernetesResourceReservationHelper.megaBytesValue(node.usage.memory);
this.resourceUsage = new KubernetesResourceReservation();
this.resourceUsage.CPU = KubernetesResourceReservationHelper.parseCPU(node.usage.cpu);
this.resourceUsage.Memory = KubernetesResourceReservationHelper.megaBytesValue(node.usage.memory);
@ -338,43 +339,6 @@ class KubernetesNodeController {
this.selectTab(2);
}
async getApplicationsAsync() {
try {
this.state.applicationsLoading = true;
this.applications = await this.KubernetesApplicationService.get();
this.resourceReservation = new KubernetesResourceReservation();
this.applications = _.map(this.applications, (app) => {
app.Pods = _.filter(app.Pods, (pod) => pod.Node === this.node.Name);
return app;
});
this.applications = _.filter(this.applications, (app) => app.Pods.length !== 0);
this.applications = _.map(this.applications, (app) => {
const resourceReservation = KubernetesResourceReservationHelper.computeResourceReservation(app.Pods);
app.CPU = resourceReservation.CPU;
app.Memory = resourceReservation.Memory;
this.resourceReservation.CPU += resourceReservation.CPU;
this.resourceReservation.Memory += resourceReservation.Memory;
return app;
});
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.hasResourceUsageAccess()) {
await this.getNodeUsage();
}
} catch (err) {
this.Notifications.error('Failure', err, 'Unable to retrieve applications');
} finally {
this.state.applicationsLoading = false;
}
}
getApplications() {
return this.$async(this.getApplicationsAsync);
}
async onInit() {
this.availabilities = KubernetesNodeAvailabilities;
@ -399,7 +363,6 @@ class KubernetesNodeController {
await this.getNodes();
await this.getEvents();
await this.getApplications();
await this.getEndpoints();
this.availableEffects = _.values(KubernetesNodeTaintEffects);
@ -407,6 +370,11 @@ class KubernetesNodeController {
this.formValues.Labels = KubernetesNodeHelper.computeUsedLabels(this.applications, this.formValues.Labels);
this.formValues.Labels = KubernetesNodeHelper.reorderLabels(this.formValues.Labels);
this.resourceReservation = await getTotalResourcesForAllApplications(this.$state.params.endpointId, this.node.Name);
this.resourceReservation.CpuRequest = Math.round(this.resourceReservation.CpuRequest / 1000);
this.resourceReservation.MemoryRequest = KubernetesResourceReservationHelper.megaBytesValue(this.resourceReservation.MemoryRequest);
this.node.Memory = KubernetesResourceReservationHelper.megaBytesValue(this.node.Memory);
this.state.viewReady = true;
}

2
app/kubernetes/views/cluster/node/stats/statsController.js
View file

@ -3,7 +3,7 @@ import moment from 'moment';
import filesizeParser from 'filesize-parser';
import KubernetesResourceReservationHelper from 'Kubernetes/helpers/resourceReservationHelper';
import { PORTAINER_FADEOUT } from '@/constants';
import { getMetricsForNode } from '@/react/kubernetes/services/service.ts';
import { getMetricsForNode } from '@/react/kubernetes/metrics/metrics.ts';
class KubernetesNodeStatsController {
/* @ngInject */

2
app/kubernetes/views/configurations/configmap/create/createConfigMapController.js
View file

@ -139,8 +139,6 @@ class KubernetesCreateConfigMapController {
return;
}
await this.getConfigurations();
this.environmentId = this.EndpointProvider.endpointID();
this.availableServiceAccounts = await getServiceAccounts(this.environmentId, this.resourcePools[0].Namespace.Name);
this.formValues.ServiceAccountName = this.availableServiceAccounts.length > 0 ? this.availableServiceAccounts[0].metadata.name : '';

15
app/kubernetes/views/configurations/configmap/edit/configMapController.js
View file

@ -7,7 +7,6 @@ import KubernetesConfigurationHelper from 'Kubernetes/helpers/configurationHelpe
import KubernetesConfigurationConverter from 'Kubernetes/converters/configuration';
import KubernetesEventHelper from 'Kubernetes/helpers/eventHelper';
import KubernetesNamespaceHelper from 'Kubernetes/helpers/namespaceHelper';
import { pluralize } from '@/portainer/helpers/strings';
import { confirmUpdate, confirmWebEditorDiscard } from '@@/modals/confirm';
@ -91,18 +90,14 @@ class KubernetesConfigMapController {
async updateConfigurationAsync() {
try {
this.state.actionInProgress = true;
if (
this.formValues.Kind !== this.configuration.Kind ||
this.formValues.ResourcePool.Namespace.Name !== this.configuration.Namespace ||
this.formValues.Name !== this.configuration.Name
) {
if (this.formValues.Kind !== this.configuration.Kind || this.formValues.ResourcePool !== this.configuration.Namespace || this.formValues.Name !== this.configuration.Name) {
await this.KubernetesConfigurationService.create(this.formValues);
await this.KubernetesConfigurationService.delete(this.configuration);
this.Notifications.success('Success', `ConfigMap successfully updated`);
this.$state.go(
'kubernetes.configurations.configmap',
{
namespace: this.formValues.ResourcePool.Namespace.Name,
namespace: this.formValues.ResourcePool,
name: this.formValues.Name,
},
{ reload: true }
@ -142,6 +137,7 @@ class KubernetesConfigMapController {
this.state.configurationLoading = true;
const name = this.$transition$.params().name;
const namespace = this.$transition$.params().namespace;
try {
const configMap = await this.KubernetesConfigMapService.get(namespace, name);
this.configuration = KubernetesConfigurationConverter.configMapToConfiguration(configMap);
@ -153,7 +149,7 @@ class KubernetesConfigMapController {
}
}
this.formValues.ResourcePool = _.find(this.resourcePools, (resourcePool) => resourcePool.Namespace.Name === this.configuration.Namespace);
this.formValues.ResourcePool = this.configuration.Namespace;
this.formValues.Id = this.configuration.Id;
this.formValues.Name = this.configuration.Name;
this.formValues.Type = this.configuration.Type;
@ -266,13 +262,10 @@ class KubernetesConfigMapController {
this.formValues = new KubernetesConfigurationFormValues();
this.resourcePools = await this.KubernetesResourcePoolService.get();
const configuration = await this.getConfiguration();
if (configuration) {
await this.getApplications(this.configuration.Namespace);
await this.getEvents(this.configuration.Namespace);
await this.getConfigurations();
}
this.tagUsedDataKeys();

4
app/kubernetes/views/configurations/secret/create/createSecretController.js
View file

@ -45,7 +45,7 @@ class KubernetesCreateSecretController {
async onResourcePoolSelectionChangeAsync() {
try {
this.onChangeName();
this.availableServiceAccounts = await getServiceAccounts(this.environmentId, this.formValues.ResourcePool.Namespace.Name);
this.availableServiceAccounts = await getServiceAccounts(this.environmentId, this.formValues.ResourcePool.Name);
this.formValues.ServiceAccountName = this.availableServiceAccounts.length > 0 ? this.availableServiceAccounts[0].metadata.name : '';
} catch (err) {
this.Notifications.error('Failure', err, 'Unable to load service accounts');
@ -186,8 +186,6 @@ class KubernetesCreateSecretController {
);
this.formValues.ResourcePool = this.resourcePools[0];
await this.getConfigurations();
this.environmentId = this.EndpointProvider.endpointID();
this.availableServiceAccounts = await getServiceAccounts(this.environmentId, this.resourcePools[0].Namespace.Name);
this.formValues.ServiceAccountName = this.availableServiceAccounts.length > 0 ? this.availableServiceAccounts[0].metadata.name : '';

11
app/kubernetes/views/configurations/secret/edit/secretController.js
View file

@ -88,18 +88,14 @@ class KubernetesSecretController {
async updateConfigurationAsync() {
try {
this.state.actionInProgress = true;
if (
this.formValues.Kind !== this.configuration.Kind ||
this.formValues.ResourcePool.Namespace.Name !== this.configuration.Namespace ||
this.formValues.Name !== this.configuration.Name
) {
if (this.formValues.Kind !== this.configuration.Kind || this.formValues.ResourcePool !== this.configuration.Namespace || this.formValues.Name !== this.configuration.Name) {
await this.KubernetesConfigurationService.create(this.formValues);
await this.KubernetesConfigurationService.delete(this.configuration);
this.Notifications.success('Success', `Secret successfully updated`);
this.$state.go(
'kubernetes.secrets.secret',
{
namespace: this.formValues.ResourcePool.Namespace.Name,
namespace: this.formValues.ResourcePool,
name: this.formValues.Name,
},
{ reload: true }
@ -149,7 +145,7 @@ class KubernetesSecretController {
throw new Error('Not authorized to edit secret');
}
}
this.formValues.ResourcePool = _.find(this.resourcePools, (resourcePool) => resourcePool.Namespace.Name === this.configuration.Namespace);
this.formValues.ResourcePool = this.configuration.Namespace;
this.formValues.Id = this.configuration.Id;
this.formValues.Name = this.configuration.Name;
this.formValues.Type = this.configuration.Type;
@ -252,7 +248,6 @@ class KubernetesSecretController {
this.formValues = new KubernetesConfigurationFormValues();
this.resourcePools = await this.KubernetesResourcePoolService.get();
const configuration = await this.getConfiguration();
if (configuration) {
await this.getApplications(this.configuration.Namespace);

2
app/kubernetes/views/resource-pools/edit/resourcePoolController.js
View file

@ -15,7 +15,7 @@ import { FeatureId } from '@/react/portainer/feature-flags/enums';
import { updateIngressControllerClassMap, getIngressControllerClassMap } from '@/react/kubernetes/cluster/ingressClass/useIngressControllerClassMap';
import { confirmUpdate } from '@@/modals/confirm';
import { confirmUpdateNamespace } from '@/react/kubernetes/namespaces/ItemView/ConfirmUpdateNamespace';
import { getMetricsForAllPods } from '@/react/kubernetes/services/service.ts';
import { getMetricsForAllPods } from '@/react/kubernetes/metrics/metrics.ts';
class KubernetesResourcePoolController {
/* #region CONSTRUCTOR */

32
app/kubernetes/views/volumes/volumes.html
View file

@ -1,32 +0,0 @@
<page-header ng-if="ctrl.state.viewReady" title="'Volume list'" breadcrumbs="['Volumes']" reload="true"></page-header>
<kubernetes-view-loading view-ready="ctrl.state.viewReady"></kubernetes-view-loading>
<div ng-if="ctrl.state.viewReady">
<div class="row">
<div class="col-sm-12">
<rd-widget>
<rd-widget-body classes="no-padding">
<uib-tabset active="ctrl.state.activeTab" justified="true" type="pills">
<uib-tab index="0" classes="btn-sm" select="ctrl.selectTab(0)">
<uib-tab-heading class="vertical-center">
<pr-icon icon="'database'"></pr-icon>
Volumes
</uib-tab-heading>
<kubernetes-volumes-datatable dataset="ctrl.volumes" on-remove="(ctrl.removeAction)" on-refresh="(ctrl.getVolumes)"> </kubernetes-volumes-datatable>
</uib-tab>
<uib-tab index="1" classes="btn-sm" select="ctrl.selectTab(1)">
<uib-tab-heading class="vertical-center">
<pr-icon icon="'hard-drive'"></pr-icon>
Storage
</uib-tab-heading>
<kubernetes-volumes-storages-datatable dataset="ctrl.storages" on-refresh="(ctrl.getVolumes)"> </kubernetes-volumes-storages-datatable>
</uib-tab>
</uib-tabset>
</rd-widget-body>
</rd-widget>
</div>
</div>
</div>

9
app/kubernetes/views/volumes/volumes.js
View file

@ -1,9 +0,0 @@
angular.module('portainer.kubernetes').component('kubernetesVolumesView', {
templateUrl: './volumes.html',
controller: 'KubernetesVolumesController',
controllerAs: 'ctrl',
bindings: {
$transition$: '<',
endpoint: '<',
},
});

113
app/kubernetes/views/volumes/volumesController.js
View file

@ -1,113 +0,0 @@
import _ from 'lodash-es';
import filesizeParser from 'filesize-parser';
import angular from 'angular';
import KubernetesVolumeHelper from 'Kubernetes/helpers/volumeHelper';
import KubernetesResourceQuotaHelper from 'Kubernetes/helpers/resourceQuotaHelper';
function buildStorages(storages, volumes) {
_.forEach(storages, (s) => {
const filteredVolumes = _.filter(volumes, ['PersistentVolumeClaim.storageClass.Name', s.Name, 'PersistentVolumeClaim.storageClass.Provisioner', s.Provisioner]);
s.Volumes = filteredVolumes;
s.size = computeSize(filteredVolumes);
});
return storages;
}
function computeSize(volumes) {
const size = _.sumBy(volumes, (v) => filesizeParser(v.PersistentVolumeClaim.Storage, { base: 10 }));
const format = KubernetesResourceQuotaHelper.formatBytes(size);
return `${format.size}${format.sizeUnit}`;
}
class KubernetesVolumesController {
/* @ngInject */
constructor($async, $state, Notifications, Authentication, LocalStorage, KubernetesStorageService, KubernetesVolumeService, KubernetesApplicationService) {
this.$async = $async;
this.$state = $state;
this.Notifications = Notifications;
this.Authentication = Authentication;
this.LocalStorage = LocalStorage;
this.KubernetesStorageService = KubernetesStorageService;
this.KubernetesVolumeService = KubernetesVolumeService;
this.KubernetesApplicationService = KubernetesApplicationService;
this.onInit = this.onInit.bind(this);
this.getVolumes = this.getVolumes.bind(this);
this.getVolumesAsync = this.getVolumesAsync.bind(this);
this.removeAction = this.removeAction.bind(this);
}
selectTab(index) {
this.LocalStorage.storeActiveTab('volumes', index);
}
async removeAction(selectedItems) {
return this.$async(async () => {
let actionCount = selectedItems.length;
for (const volume of selectedItems) {
try {
await this.KubernetesVolumeService.delete(volume);
this.Notifications.success('Volume successfully removed', volume.PersistentVolumeClaim.Name);
const index = this.volumes.indexOf(volume);
this.volumes.splice(index, 1);
} catch (err) {
this.Notifications.error('Failure', err, 'Unable to remove volume');
} finally {
--actionCount;
if (actionCount === 0) {
this.$state.reload(this.$state.current);
}
}
}
});
}
async getVolumesAsync() {
const storageClasses = this.endpoint.Kubernetes.Configuration.StorageClasses;
try {
const [volumes, applications, storages] = await Promise.all([
this.KubernetesVolumeService.get(undefined, storageClasses),
this.KubernetesApplicationService.get(),
this.KubernetesStorageService.get(this.endpoint.Id),
]);
this.volumes = _.map(volumes, (volume) => {
volume.Applications = KubernetesVolumeHelper.getUsingApplications(volume, applications);
return volume;
});
this.storages = buildStorages(storages, volumes);
} catch (err) {
this.Notifications.error('Failure', err, 'Unable to retreive namespaces');
}
}
getVolumes() {
return this.$async(this.getVolumesAsync);
}
async onInit() {
this.state = {
viewReady: false,
currentName: this.$state.$current.name,
activeTab: this.LocalStorage.getActiveTab('volumes'),
isAdmin: this.Authentication.isAdmin(),
};
await this.getVolumes();
this.state.viewReady = true;
}
$onInit() {
return this.$async(this.onInit);
}
$onDestroy() {
if (this.state.currentName !== this.$state.$current.name) {
this.LocalStorage.storeActiveTab('volumes', 0);
}
}
}
export default KubernetesVolumesController;
angular.module('portainer.kubernetes').controller('KubernetesVolumesController', KubernetesVolumesController);

40
app/portainer/helpers/promise-utils.ts
View file

@ -10,6 +10,46 @@ export function promiseSequence(promises: (() => Promise<unknown>)[]) {
);
}
type AllSettledItems<T> = {
fulfilledItems: T[];
rejectedItems: { item: T; reason?: string }[];
};
/**
* Separates a list of items into successful and rejected items based on the results of asynchronous operations.
* This function is useful for deleting in parallel, or other requests where the response doesn't have much information.
*
* @template T - The type of the items in the list.
* @param {T[]} items - The list of items to process.
* @param {(item: T) => Promise<void>} asyncFn - An asynchronous function that takes the item and performs an operation on it.
* @returns {Promise<AllSettledItems<T>>} - A promise that resolves to an object containing arrays of successful and rejected items.
*/
export async function getAllSettledItems<T>(
items: T[],
asyncFn: (item: T) => Promise<void>
): Promise<AllSettledItems<T>> {
const results = await Promise.allSettled(items.map((item) => asyncFn(item)));
// make an array of successful items and an array of rejected items
const separatedItems = results.reduce<AllSettledItems<T>>(
(acc, result, index) => {
if (result.status === 'fulfilled') {
acc.fulfilledItems.push(items[index]);
} else {
const reason =
result.reason instanceof Error
? result.reason.message
: String(result.reason);
acc.rejectedItems.push({ item: items[index], reason });
}
return acc;
},
{ fulfilledItems: [], rejectedItems: [] }
);
return separatedItems;
}
export function isFulfilled<T>(
result: PromiseSettledResult<T>
): result is PromiseFulfilledResult<T> {

2
app/react/components/Badge/UnusedBadge.tsx
View file

@ -1,5 +1,5 @@
import { Badge } from '@@/Badge';
export function UnusedBadge() {
return <Badge type="warn">unused</Badge>;
return <Badge type="warn">Unused</Badge>;
}

27
app/react/components/buttons/DeleteButton.tsx
View file

@ -6,6 +6,7 @@ import { AutomationTestingProps } from '@/types';
import { confirmDelete } from '@@/modals/confirm';
import { Button } from './Button';
import { LoadingButton } from './LoadingButton';
type ConfirmOrClick =
| {
@ -24,6 +25,8 @@ export function DeleteButton({
disabled,
size,
children,
isLoading,
loadingText = 'Removing',
'data-cy': dataCy,
...props
}: PropsWithChildren<
@ -31,10 +34,28 @@ export function DeleteButton({
ConfirmOrClick & {
size?: ComponentProps<typeof Button>['size'];
disabled?: boolean;
isLoading?: boolean;
loadingText?: string;
}
>) {
if (isLoading === undefined) {
return (
<Button
size={size}
color="dangerlight"
disabled={disabled || isLoading}
onClick={() => handleClick()}
icon={Trash2}
className="!m-0"
data-cy={dataCy}
>
{children || 'Remove'}
</Button>
);
}
return (
<Button
<LoadingButton
size={size}
color="dangerlight"
disabled={disabled}
@ -42,9 +63,11 @@ export function DeleteButton({
icon={Trash2}
className="!m-0"
data-cy={dataCy}
isLoading={isLoading}
loadingText={loadingText}
>
{children || 'Remove'}
</Button>
</LoadingButton>
);
async function handleClick() {

37
app/react/components/datatables/Filter.tsx
View file

@ -1,7 +1,7 @@
import clsx from 'clsx';
import { useMemo } from 'react';
import { Menu, MenuButton, MenuPopover } from '@reach/menu-button';
import { Column } from '@tanstack/react-table';
import { Column, Row } from '@tanstack/react-table';
import { Check, Filter } from 'lucide-react';
import { getValueAsArrayOfStrings } from '@/portainer/helpers/array';
@ -73,7 +73,15 @@ export function MultipleSelectionFilter({
}
}
export function filterHOC<TData extends DefaultType>(menuTitle: string) {
export type FilterOptionsTransformer<TData extends DefaultType> = (
rows: Row<TData>[],
id: string
) => string[];
export function filterHOC<TData extends DefaultType>(
menuTitle: string,
filterOptionsTransformer: FilterOptionsTransformer<TData> = defaultFilterOptionsTransformer
) {
return function Filter({
column: { getFilterValue, setFilterValue, getFacetedRowModel, id },
}: {
@ -81,15 +89,10 @@ export function filterHOC<TData extends DefaultType>(menuTitle: string) {
}) {
const { flatRows } = getFacetedRowModel();
const options = useMemo(() => {
const options = new Set<string>();
flatRows.forEach(({ getValue }) => {
const value = getValue<string>(id);
options.add(value);
});
return Array.from(options);
}, [flatRows, id]);
const options = useMemo(
() => filterOptionsTransformer(flatRows, id),
[flatRows, id]
);
const value = getFilterValue();
@ -106,3 +109,15 @@ export function filterHOC<TData extends DefaultType>(menuTitle: string) {
);
};
}
function defaultFilterOptionsTransformer<TData extends DefaultType>(
rows: Row<TData>[],
id: string
) {
const options = new Set<string>();
rows.forEach(({ getValue }) => {
const value = getValue<string>(id);
options.add(value);
});
return Array.from(options);
}

25
app/react/hooks/useIsDeploymentOptionHidden.ts Normal file
View file

@ -0,0 +1,25 @@
import { useEnvironmentDeploymentOptions } from '@/react/portainer/environments/queries/useEnvironment';
import { useEnvironmentId } from './useEnvironmentId';
type HideDeploymentOption = 'form' | 'webEditor' | 'fileUpload';
export function useIsDeploymentOptionHidden(
hideDeploymentOption: HideDeploymentOption
) {
const environmentId = useEnvironmentId();
const { data: deploymentOptions } =
useEnvironmentDeploymentOptions(environmentId);
if (deploymentOptions) {
const isDeploymentOptionHidden =
(hideDeploymentOption === 'form' && deploymentOptions.hideAddWithForm) ||
(hideDeploymentOption === 'webEditor' &&
deploymentOptions.hideAddWithForm) ||
(hideDeploymentOption === 'fileUpload' &&
deploymentOptions.hideAddWithForm);
return isDeploymentOptionHidden;
}
return false;
}

2
app/react/kubernetes/applications/CreateView/application-services/KubeServicesForm.tsx
View file

@ -42,7 +42,7 @@ export function KubeServicesForm({
// start loading ingresses and controllers early to reduce perceived loading time
const environmentId = useEnvironmentId();
useIngresses(environmentId, namespace ? [namespace] : []);
useIngresses(environmentId, { withServices: true });
useIngressControllers(environmentId, namespace);
// when the appName changes, update the names for each service

5
app/react/kubernetes/applications/CreateView/application-services/ingress/AppIngressPathsForm.tsx
View file

@ -39,10 +39,7 @@ export function AppIngressPathsForm({
isEditMode,
}: Props) {
const environmentId = useEnvironmentId();
const ingressesQuery = useIngresses(
environmentId,
namespace ? [namespace] : undefined
);
const ingressesQuery = useIngresses(environmentId);
const { data: ingresses } = ingressesQuery;
const { data: ingressControllers, ...ingressControllersQuery } =
useIngressControllers(environmentId, namespace);

4
app/react/kubernetes/applications/DetailsView/ApplicationDetailsWidget/ApplicationIngressesTable.tsx
View file

@ -19,7 +19,9 @@ export function ApplicationIngressesTable({
namespace,
appServices,
}: Props) {
const namespaceIngresses = useIngresses(environmentId, [namespace]);
const namespaceIngresses = useIngresses(environmentId, {
withServices: true,
});
// getIngressPathsForAppServices could be expensive, so memoize it
const ingressPathsForAppServices = useMemo(
() => getIngressPathsForAppServices(namespaceIngresses.data, appServices),

35
app/react/kubernetes/applications/ListView/ApplicationsDatatable/ApplicationsDatatable.tsx
View file

@ -9,6 +9,7 @@ import { useNamespacesQuery } from '@/react/kubernetes/namespaces/queries/useNam
import { useEnvironmentId } from '@/react/hooks/useEnvironmentId';
import { useCurrentEnvironment } from '@/react/hooks/useCurrentEnvironment';
import { useAuthorizations } from '@/react/hooks/useUser';
import { isSystemNamespace } from '@/react/kubernetes/namespaces/queries/useIsSystemNamespace';
import { TableSettingsMenu } from '@@/datatables';
import { useRepeater } from '@@/datatables/useRepeater';
@ -18,6 +19,7 @@ import { ExpandableDatatable } from '@@/datatables/ExpandableDatatable';
import { NamespaceFilter } from '../ApplicationsStacksDatatable/NamespaceFilter';
import { Namespace } from '../ApplicationsStacksDatatable/types';
import { useApplications } from '../../application.queries';
import { Application, ConfigKind } from './types';
import { useColumns } from './useColumns';
@ -26,9 +28,7 @@ import { SubRow } from './SubRow';
import { HelmInsightsBox } from './HelmInsightsBox';
export function ApplicationsDatatable({
dataset,
onRefresh,
isLoading,
onRemove,
namespace = '',
namespaces,
@ -37,9 +37,7 @@ export function ApplicationsDatatable({
onShowSystemChange,
hideStacks,
}: {
dataset: Array<Application>;
onRefresh: () => void;
isLoading: boolean;
onRemove: (selectedItems: Application[]) => void;
namespace?: string;
namespaces: Array<Namespace>;
@ -50,7 +48,7 @@ export function ApplicationsDatatable({
}) {
const envId = useEnvironmentId();
const envQuery = useCurrentEnvironment();
const namespaceMetaListQuery = useNamespacesQuery(envId);
const namespaceListQuery = useNamespacesQuery(envId);
const tableState = useKubeStore('kubernetes.applications', 'Name');
useRepeater(tableState.autoRefreshRate, onRefresh);
@ -58,7 +56,7 @@ export function ApplicationsDatatable({
const hasWriteAuthQuery = useAuthorizations(
'K8sApplicationsW',
undefined,
true
false
);
const { setShowSystemResources } = tableState;
@ -67,27 +65,34 @@ export function ApplicationsDatatable({
setShowSystemResources(showSystem || false);
}, [showSystem, setShowSystemResources]);
const columns = useColumns(hideStacks);
const applicationsQuery = useApplications(envId, {
refetchInterval: tableState.autoRefreshRate * 1000,
namespace,
withDependencies: true,
});
const applications = applicationsQuery.data ?? [];
const filteredApplications = showSystem
? applications
: applications.filter(
(application) =>
!isSystemNamespace(application.ResourcePool, namespaceListQuery.data)
);
const filteredDataset = !showSystem
? dataset.filter(
(item) => !namespaceMetaListQuery.data?.[item.ResourcePool]?.IsSystem
)
: dataset;
const columns = useColumns(hideStacks);
return (
<ExpandableDatatable
data-cy="k8sApp-appTable"
noWidget
dataset={filteredDataset}
dataset={filteredApplications ?? []}
settingsManager={tableState}
columns={columns}
title="Applications"
titleIcon={BoxIcon}
isLoading={isLoading}
isLoading={applicationsQuery.isLoading}
disableSelect={!hasWriteAuthQuery.authorized}
isRowSelectable={(row) =>
!namespaceMetaListQuery.data?.[row.original.ResourcePool]?.IsSystem
!isSystemNamespace(row.original.ResourcePool, namespaceListQuery.data)
}
getRowCanExpand={(row) => isExpandable(row.original)}
renderSubRow={(row) => (

28
app/react/kubernetes/applications/ListView/ApplicationsDatatable/columns.tsx
View file

@ -1,5 +1,12 @@
import { isoDate, truncate } from '@/portainer/filters/filters';
import { CellContext } from '@tanstack/react-table';
import { isoDate, truncate } from '@/portainer/filters/filters';
import { useIsSystemNamespace } from '@/react/kubernetes/namespaces/queries/useIsSystemNamespace';
import { Link } from '@@/Link';
import { SystemBadge } from '@@/Badge/SystemBadge';
import { Application } from './types';
import { helper } from './columns.helper';
export const stackName = helper.accessor('StackName', {
@ -9,9 +16,26 @@ export const stackName = helper.accessor('StackName', {
export const namespace = helper.accessor('ResourcePool', {
header: 'Namespace',
cell: ({ getValue }) => getValue() || '-',
cell: NamespaceCell,
});
function NamespaceCell({ row, getValue }: CellContext<Application, string>) {
const value = getValue();
const isSystem = useIsSystemNamespace(value);
return (
<div className="flex gap-2">
<Link
to="kubernetes.resourcePools.resourcePool"
params={{ id: value }}
data-cy={`app-namespace-link-${row.original.Name}`}
>
{value}
</Link>
{isSystem && <SystemBadge />}
</div>
);
}
export const image = helper.accessor('Image', {
header: 'Image',
cell: ({ row: { original: item } }) => (

6
app/react/kubernetes/applications/ListView/ApplicationsDatatable/types.ts
View file

@ -39,6 +39,12 @@ export interface Application {
}>;
Port: number;
}>;
Resource?: {
CpuLimit?: number;
CpuRequest?: number;
MemoryLimit?: number;
MemoryRequest?: number;
};
}
export enum ConfigKind {

39
app/react/kubernetes/applications/ListView/ApplicationsStacksDatatable/ApplicationsStacksDatatable.tsx
View file

@ -4,44 +4,41 @@ import { useEffect } from 'react';
import { useAuthorizations } from '@/react/hooks/useUser';
import { SystemResourceDescription } from '@/react/kubernetes/datatables/SystemResourceDescription';
import { createStore } from '@/react/kubernetes/datatables/default-kube-datatable-store';
import { useEnvironmentId } from '@/react/hooks/useEnvironmentId';
import { isSystemNamespace } from '@/react/kubernetes/namespaces/queries/useIsSystemNamespace';
import { useNamespacesQuery } from '@/react/kubernetes/namespaces/queries/useNamespacesQuery';
import { ExpandableDatatable } from '@@/datatables/ExpandableDatatable';
import { useRepeater } from '@@/datatables/useRepeater';
import { useTableState } from '@@/datatables/useTableState';
import { KubernetesStack } from '../../types';
import { useApplications } from '../../application.queries';
import { columns } from './columns';
import { SubRows } from './SubRows';
import { Namespace } from './types';
import { Namespace, Stack } from './types';
import { StacksSettingsMenu } from './StacksSettingsMenu';
import { NamespaceFilter } from './NamespaceFilter';
import { TableActions } from './TableActions';
import { getStacksFromApplications } from './getStacksFromApplications';
const storageKey = 'kubernetes.applications.stacks';
const settingsStore = createStore(storageKey);
interface Props {
dataset: Array<KubernetesStack>;
onRemove(selectedItems: Array<KubernetesStack>): void;
onRefresh(): Promise<void>;
onRemove(selectedItems: Array<Stack>): void;
namespace?: string;
namespaces: Array<Namespace>;
onNamespaceChange(namespace: string): void;
isLoading?: boolean;
showSystem?: boolean;
setSystemResources(showSystem: boolean): void;
}
export function ApplicationsStacksDatatable({
dataset,
onRemove,
onRefresh,
namespace = '',
namespaces,
onNamespaceChange,
isLoading,
showSystem,
setSystemResources,
}: Props) {
@ -53,16 +50,32 @@ export function ApplicationsStacksDatatable({
setShowSystemResources(showSystem || false);
}, [showSystem, setShowSystemResources]);
const envId = useEnvironmentId();
const applicationsQuery = useApplications(envId, {
refetchInterval: tableState.autoRefreshRate * 1000,
namespace,
withDependencies: true,
});
const namespaceListQuery = useNamespacesQuery(envId);
const applications = applicationsQuery.data ?? [];
const filteredApplications = showSystem
? applications
: applications.filter(
(item) =>
!isSystemNamespace(item.ResourcePool, namespaceListQuery.data ?? [])
);
const { authorized } = useAuthorizations('K8sApplicationsW');
useRepeater(tableState.autoRefreshRate, onRefresh);
const stacks = getStacksFromApplications(filteredApplications);
return (
<ExpandableDatatable
getRowCanExpand={(row) => row.original.Applications.length > 0}
title="Stacks"
titleIcon={List}
dataset={dataset}
isLoading={isLoading}
dataset={stacks}
isLoading={applicationsQuery.isLoading || namespaceListQuery.isLoading}
columns={columns}
settingsManager={tableState}
disableSelect={!authorized}

10
app/react/kubernetes/applications/ListView/ApplicationsStacksDatatable/SubRows.tsx
View file

@ -6,15 +6,9 @@ import KubernetesNamespaceHelper from '@/kubernetes/helpers/namespaceHelper';
import { Link } from '@@/Link';
import { ExternalBadge } from '@@/Badge/ExternalBadge';
import { KubernetesStack } from '../../types';
import { Stack } from './types';
export function SubRows({
stack,
span,
}: {
stack: KubernetesStack;
span: number;
}) {
export function SubRows({ stack, span }: { stack: Stack; span: number }) {
return (
<>
{stack.Applications.map((app) => (

6
app/react/kubernetes/applications/ListView/ApplicationsStacksDatatable/TableActions.tsx
View file

@ -2,14 +2,14 @@ import { Authorized } from '@/react/hooks/useUser';
import { DeleteButton } from '@@/buttons/DeleteButton';
import { KubernetesStack } from '../../types';
import { Stack } from './types';
export function TableActions({
selectedItems,
onRemove,
}: {
selectedItems: Array<KubernetesStack>;
onRemove: (selectedItems: Array<KubernetesStack>) => void;
selectedItems: Array<Stack>;
onRemove: (selectedItems: Array<Stack>) => void;
}) {
return (
<Authorized authorizations="K8sApplicationsW">

109
app/react/kubernetes/applications/ListView/ApplicationsStacksDatatable/columns.tsx
View file

@ -1,63 +1,70 @@
import { FileText } from 'lucide-react';
import { createColumnHelper } from '@tanstack/react-table';
import { CellContext, createColumnHelper } from '@tanstack/react-table';
import KubernetesNamespaceHelper from '@/kubernetes/helpers/namespaceHelper';
import { useIsSystemNamespace } from '@/react/kubernetes/namespaces/queries/useIsSystemNamespace';
import { buildExpandColumn } from '@@/datatables/expand-column';
import { Link } from '@@/Link';
import { Icon } from '@@/Icon';
import { SystemBadge } from '@@/Badge/SystemBadge';
import { KubernetesStack } from '../../types';
import { Stack } from './types';
export const columnHelper = createColumnHelper<KubernetesStack>();
export const columnHelper = createColumnHelper<Stack>();
const namespace = columnHelper.accessor('ResourcePool', {
id: 'namespace',
header: 'Namespace',
cell: NamespaceCell,
});
function NamespaceCell({ row, getValue }: CellContext<Stack, string>) {
const value = getValue();
const isSystem = useIsSystemNamespace(value);
return (
<div className="flex gap-2">
<Link
to="kubernetes.resourcePools.resourcePool"
params={{ id: value }}
data-cy={`app-stack-namespace-link-${row.original.Name}`}
>
{value}
</Link>
{isSystem && <SystemBadge />}
</div>
);
}
const name = columnHelper.accessor('Name', {
id: 'name',
header: 'Stack',
});
const applications = columnHelper.accessor((row) => row.Applications.length, {
id: 'applications',
header: 'Applications',
});
const actions = columnHelper.display({
id: 'actions',
header: 'Actions',
cell: ({ row: { original: item } }) => (
<Link
to="kubernetes.stacks.stack.logs"
params={{ namespace: item.ResourcePool, name: item.Name }}
className="flex items-center gap-1"
data-cy={`app-stack-logs-link-${item.Name}`}
>
<Icon icon={FileText} />
Logs
</Link>
),
});
export const columns = [
buildExpandColumn<KubernetesStack>(),
columnHelper.accessor('Name', {
id: 'name',
header: 'Stack',
}),
columnHelper.accessor('ResourcePool', {
id: 'namespace',
header: 'Namespace',
cell: ({ getValue, row }) => {
const value = getValue();
return (
<div className="flex gap-2">
<Link
to="kubernetes.resourcePools.resourcePool"
params={{ id: value }}
data-cy={`app-stack-namespace-link-${row.original.Name}`}
>
{value}
</Link>
{KubernetesNamespaceHelper.isSystemNamespace(value) && (
<SystemBadge />
)}
</div>
);
},
}),
columnHelper.accessor((row) => row.Applications.length, {
id: 'applications',
header: 'Applications',
}),
columnHelper.display({
id: 'actions',
header: 'Actions',
cell: ({ row: { original: item } }) => (
<Link
to="kubernetes.stacks.stack.logs"
params={{ namespace: item.ResourcePool, name: item.Name }}
className="flex items-center gap-1"
data-cy={`app-stack-logs-link-${item.Name}`}
>
<Icon icon={FileText} />
Logs
</Link>
),
}),
buildExpandColumn<Stack>(),
name,
namespace,
applications,
actions,
];

159
app/react/kubernetes/applications/ListView/ApplicationsStacksDatatable/getStacksFromApplications.test.ts Normal file
View file

@ -0,0 +1,159 @@
import { Application } from '../ApplicationsDatatable/types';
import { getStacksFromApplications } from './getStacksFromApplications';
import { Stack } from './types';
describe('getStacksFromApplications', () => {
test('should return an empty array when passed an empty array', () => {
expect(getStacksFromApplications([])).toHaveLength(0);
});
test('should return an empty array when passed a list of applications without stacks', () => {
const appsWithoutStacks: Application[] = [
{
StackName: '',
Id: '1',
Name: 'app1',
CreationDate: '2021-10-01T00:00:00Z',
ResourcePool: 'namespace1',
Image: 'image1',
ApplicationType: 'Pod',
DeploymentType: 'Replicated',
Status: 'status1',
TotalPodsCount: 1,
RunningPodsCount: 1,
},
{
StackName: '',
Id: '1',
Name: 'app2',
CreationDate: '2021-10-01T00:00:00Z',
ResourcePool: 'namespace1',
Image: 'image1',
ApplicationType: 'Pod',
DeploymentType: 'Replicated',
Status: 'status1',
TotalPodsCount: 1,
RunningPodsCount: 1,
},
{
StackName: '',
Id: '1',
Name: 'app3',
CreationDate: '2021-10-01T00:00:00Z',
ResourcePool: 'namespace1',
Image: 'image1',
ApplicationType: 'Pod',
DeploymentType: 'Replicated',
Status: 'status1',
TotalPodsCount: 1,
RunningPodsCount: 1,
},
];
expect(getStacksFromApplications(appsWithoutStacks)).toHaveLength(0);
});
test('should return a list of stacks when passed a list of applications with stacks', () => {
const appsWithStacks: Application[] = [
{
StackName: 'stack1',
Id: '1',
Name: 'app1',
CreationDate: '2021-10-01T00:00:00Z',
ResourcePool: 'namespace1',
Image: 'image1',
ApplicationType: 'Pod',
DeploymentType: 'Replicated',
Status: 'status1',
TotalPodsCount: 1,
RunningPodsCount: 1,
},
{
StackName: 'stack1',
Id: '1',
Name: 'app2',
CreationDate: '2021-10-01T00:00:00Z',
ResourcePool: 'namespace1',
Image: 'image1',
ApplicationType: 'Pod',
DeploymentType: 'Replicated',
Status: 'status1',
TotalPodsCount: 1,
RunningPodsCount: 1,
},
{
StackName: 'stack2',
Id: '1',
Name: 'app3',
CreationDate: '2021-10-01T00:00:00Z',
ResourcePool: 'namespace1',
Image: 'image1',
ApplicationType: 'Pod',
DeploymentType: 'Replicated',
Status: 'status1',
TotalPodsCount: 1,
RunningPodsCount: 1,
},
];
const expectedStacksWithApps: Stack[] = [
{
Name: 'stack1',
ResourcePool: 'namespace1',
Applications: [
{
StackName: 'stack1',
Id: '1',
Name: 'app1',
CreationDate: '2021-10-01T00:00:00Z',
ResourcePool: 'namespace1',
Image: 'image1',
ApplicationType: 'Pod',
DeploymentType: 'Replicated',
Status: 'status1',
TotalPodsCount: 1,
RunningPodsCount: 1,
},
{
StackName: 'stack1',
Id: '1',
Name: 'app2',
CreationDate: '2021-10-01T00:00:00Z',
ResourcePool: 'namespace1',
Image: 'image1',
ApplicationType: 'Pod',
DeploymentType: 'Replicated',
Status: 'status1',
TotalPodsCount: 1,
RunningPodsCount: 1,
},
],
Highlighted: false,
},
{
Name: 'stack2',
ResourcePool: 'namespace1',
Applications: [
{
StackName: 'stack2',
Id: '1',
Name: 'app3',
CreationDate: '2021-10-01T00:00:00Z',
ResourcePool: 'namespace1',
Image: 'image1',
ApplicationType: 'Pod',
DeploymentType: 'Replicated',
Status: 'status1',
TotalPodsCount: 1,
RunningPodsCount: 1,
},
],
Highlighted: false,
},
];
expect(getStacksFromApplications(appsWithStacks)).toEqual(
expectedStacksWithApps
);
});
});

36
app/react/kubernetes/applications/ListView/ApplicationsStacksDatatable/getStacksFromApplications.ts Normal file
View file

@ -0,0 +1,36 @@
import { Application } from '../ApplicationsDatatable/types';
import { Stack } from './types';
export function getStacksFromApplications(applications: Application[]) {
const res = applications.reduce<Stack[]>((stacks, app) => {
const updatedStacks = stacks.map((stack) => {
if (
stack.Name === app.StackName &&
stack.ResourcePool === app.ResourcePool
) {
return {
...stack,
Applications: [...stack.Applications, app],
};
}
return stack;
});
const stackExists = updatedStacks.some(
(stack) =>
stack.Name === app.StackName && stack.ResourcePool === app.ResourcePool
);
if (!stackExists && app.StackName) {
updatedStacks.push({
Name: app.StackName,
ResourcePool: app.ResourcePool,
Applications: [app],
Highlighted: false,
});
}
return updatedStacks;
}, []);
return res;
}

9
app/react/kubernetes/applications/ListView/ApplicationsStacksDatatable/types.ts
View file

@ -5,6 +5,8 @@ import {
RefreshableTableSettings,
} from '@@/datatables/types';
import { Application } from '../ApplicationsDatatable/types';
export interface TableSettings
extends BasicTableSettings,
RefreshableTableSettings,
@ -16,3 +18,10 @@ export interface Namespace {
Yaml: string;
IsSystem?: boolean;
}
export type Stack = {
Name: string;
ResourcePool: string;
Applications: Application[];
Highlighted: boolean;
};

119
app/react/kubernetes/applications/application.queries.ts
View file

@ -1,26 +1,37 @@
import { UseQueryResult, useMutation, useQuery } from '@tanstack/react-query';
import { Pod } from 'kubernetes-types/core/v1';
import { queryClient, withError } from '@/react-tools/react-query';
import { EnvironmentId } from '@/react/portainer/environments/types';
import { getNamespaceServices } from '../services/service';
import { Pod, PodList } from 'kubernetes-types/core/v1';
import {
queryClient,
withError,
withGlobalError,
} from '@/react-tools/react-query';
import { EnvironmentId } from '@/react/portainer/environments/types';
import axios, { parseAxiosError } from '@/portainer/services/axios';
import { getNamespaceServices } from '../services/service';
import { parseKubernetesAxiosError } from '../axiosError';
import {
getApplicationsForCluster,
getApplication,
patchApplication,
getApplicationRevisionList,
} from './application.service';
import type { AppKind, Application, ApplicationPatch } from './types';
import { Application as K8sApplication } from './ListView/ApplicationsDatatable/types';
import { deletePod } from './pod.service';
import { getNamespaceHorizontalPodAutoscalers } from './autoscaling.service';
import { applicationIsKind, matchLabelsToLabelSelectorValue } from './utils';
import { getNamespacePods } from './usePods';
const queryKeys = {
applicationsForCluster: (environmentId: EnvironmentId) =>
['environments', environmentId, 'kubernetes', 'applications'] as const,
applications: (environmentId: EnvironmentId, params?: GetAppsParams) =>
[
'environments',
environmentId,
'kubernetes',
'applications',
params,
] as const,
application: (
environmentId: EnvironmentId,
namespace: string,
@ -110,21 +121,6 @@ const queryKeys = {
] as const,
};
// useQuery to get a list of all applications from an array of namespaces
export function useApplicationsQuery(
environmentId: EnvironmentId,
namespaces?: string[]
) {
return useQuery(
queryKeys.applicationsForCluster(environmentId),
() => getApplicationsForCluster(environmentId, namespaces),
{
...withError('Unable to retrieve applications'),
enabled: !!namespaces?.length,
}
);
}
// when yaml is set to true, the expected return type is a string
export function useApplication<T extends Application | string = Application>(
environmentId: EnvironmentId,
@ -305,6 +301,37 @@ export function useApplicationPods(
);
}
async function getNamespacePods(
environmentId: EnvironmentId,
namespace: string,
labelSelector?: string
) {
try {
const { data } = await axios.get<PodList>(
`/endpoints/${environmentId}/kubernetes/api/v1/namespaces/${namespace}/pods`,
{
params: {
labelSelector,
},
}
);
const items = (data.items || []).map(
(pod) =>
<Pod>{
...pod,
kind: 'Pod',
apiVersion: data.apiVersion,
}
);
return items;
} catch (e) {
throw parseKubernetesAxiosError(
e,
`Unable to retrieve Pods in namespace '${namespace}'`
);
}
}
// useQuery to patch an application by environmentId, namespace, name and patch payload
export function usePatchApplicationMutation(
environmentId: EnvironmentId,
@ -380,3 +407,45 @@ export function useRedeployApplicationMutation(
}
);
}
type GetAppsParams = {
namespace?: string;
nodeName?: string;
withDependencies?: boolean;
};
type GetAppsQueryOptions = {
refetchInterval?: number;
} & GetAppsParams;
// useQuery to get a list of all applications from an array of namespaces
export function useApplications(
environmentId: EnvironmentId,
queryOptions?: GetAppsQueryOptions
) {
const { refetchInterval, ...params } = queryOptions ?? {};
return useQuery(
queryKeys.applications(environmentId, params),
() => getApplications(environmentId, params),
{
refetchInterval,
...withGlobalError('Unable to retrieve applications'),
}
);
}
// get all applications from a namespace
export async function getApplications(
environmentId: EnvironmentId,
params?: GetAppsParams
) {
try {
const { data } = await axios.get<K8sApplication[]>(
`/kubernetes/${environmentId}/applications`,
{ params }
);
return data;
} catch (e) {
throw parseAxiosError(e, 'Unable to retrieve applications');
}
}

77
app/react/kubernetes/applications/application.service.ts
View file

@ -1,7 +1,4 @@
import {
DaemonSetList,
StatefulSetList,
DeploymentList,
Deployment,
DaemonSet,
StatefulSet,
@ -16,56 +13,9 @@ import { isFulfilled } from '@/portainer/helpers/promise-utils';
import { parseKubernetesAxiosError } from '../axiosError';
import { getPod, patchPod } from './pod.service';
import { filterRevisionsByOwnerUid, getNakedPods } from './utils';
import {
AppKind,
Application,
ApplicationList,
ApplicationPatch,
} from './types';
import { filterRevisionsByOwnerUid } from './utils';
import { AppKind, Application, ApplicationPatch } from './types';
import { appRevisionAnnotation } from './constants';
import { getNamespacePods } from './usePods';
// This file contains services for Kubernetes apps/v1 resources (Deployments, DaemonSets, StatefulSets)
export async function getApplicationsForCluster(
environmentId: EnvironmentId,
namespaceNames?: string[]
) {
if (!namespaceNames) {
return [];
}
const applications = await Promise.all(
namespaceNames.map((namespace) =>
getApplicationsForNamespace(environmentId, namespace)
)
);
return applications.flat();
}
// get a list of all Deployments, DaemonSets, StatefulSets and naked pods (https://portainer.atlassian.net/browse/CE-2) in one namespace
async function getApplicationsForNamespace(
environmentId: EnvironmentId,
namespace: string
) {
const [deployments, daemonSets, statefulSets, pods] = await Promise.all([
getApplicationsByKind<DeploymentList>(
environmentId,
namespace,
'Deployment'
),
getApplicationsByKind<DaemonSetList>(environmentId, namespace, 'DaemonSet'),
getApplicationsByKind<StatefulSetList>(
environmentId,
namespace,
'StatefulSet'
),
getNamespacePods(environmentId, namespace),
]);
// find all pods which are 'naked' (not owned by a deployment, daemonset or statefulset)
const nakedPods = getNakedPods(pods, deployments, daemonSets, statefulSets);
return [...deployments, ...daemonSets, ...statefulSets, ...nakedPods];
}
// if not known, get the type of an application (Deployment, DaemonSet, StatefulSet or naked pod) by name
export async function getApplication<
@ -235,29 +185,6 @@ async function getApplicationByKind<
}
}
async function getApplicationsByKind<T extends ApplicationList>(
environmentId: EnvironmentId,
namespace: string,
appKind: 'Deployment' | 'DaemonSet' | 'StatefulSet'
) {
try {
const { data } = await axios.get<T>(
buildUrl(environmentId, namespace, `${appKind}s`)
);
const items = (data.items || []).map((app) => ({
...app,
kind: appKind,
apiVersion: data.apiVersion,
}));
return items as T['items'];
} catch (e) {
throw parseKubernetesAxiosError(
e,
`Unable to retrieve ${appKind}s in namespace '${namespace}'`
);
}
}
export async function getApplicationRevisionList(
environmentId: EnvironmentId,
namespace: string,

6
app/react/kubernetes/applications/components/NamespaceSelector/NamespaceSelector.tsx
View file

@ -24,9 +24,9 @@ export function NamespaceSelector({
useNamespacesQuery(environmentId);
const namespaceNames = Object.entries(namespaces ?? {})
.filter(([, ns]) => !ns.IsSystem)
.map(([nsName]) => ({
label: nsName,
value: nsName,
.map(([, ns]) => ({
label: ns.Name,
value: ns.Name,
}));
return (

40
app/react/kubernetes/applications/types.ts
View file

@ -8,8 +8,9 @@ import {
ReplicaSet,
ControllerRevision,
} from 'kubernetes-types/apps/v1';
import { Pod, PodList } from 'kubernetes-types/core/v1';
import { Container, Pod, PodList, Volume } from 'kubernetes-types/core/v1';
import { RawExtension } from 'kubernetes-types/runtime';
import { OwnerReference } from 'kubernetes-types/meta/v1';
import { EnvVarValues } from '@@/form-components/EnvironmentVariablesFieldset';
@ -79,14 +80,29 @@ type Patch = {
export type ApplicationPatch = Patch | RawExtension;
export type KubernetesStack = {
Name: string;
ResourcePool: string;
Applications: Array<
Application & {
Name: string;
ResourcePool: string;
}
>;
Highlighted: boolean;
};
export interface ConfigmapRef {
name: string;
}
export interface ValueFrom {
configMapRef?: ConfigmapRef;
secretRef?: ConfigmapRef;
}
export interface Job {
name?: string;
namespace: string;
creationDate?: string;
uid?: string;
containers: Container[];
}
export interface K8sPod extends Job {
ownerReferences: OwnerReference[];
volumes?: Volume[];
nodeName?: string;
}
export interface CronJob extends Job {
schedule: string;
}

74
app/react/kubernetes/applications/usePods.ts
View file

@ -1,74 +0,0 @@
import { useQuery } from '@tanstack/react-query';
import { Pod, PodList } from 'kubernetes-types/core/v1';
import { EnvironmentId } from '@/react/portainer/environments/types';
import { withError } from '@/react-tools/react-query';
import axios from '@/portainer/services/axios';
import { parseKubernetesAxiosError } from '../axiosError';
const queryKeys = {
podsForCluster: (environmentId: EnvironmentId) => [
'environments',
environmentId,
'kubernetes',
'pods',
],
};
export function usePods(environemtId: EnvironmentId, namespaces?: string[]) {
return useQuery(
queryKeys.podsForCluster(environemtId),
() => getPodsForCluster(environemtId, namespaces),
{
...withError('Unable to retrieve Pods'),
enabled: !!namespaces?.length,
}
);
}
export async function getPodsForCluster(
environmentId: EnvironmentId,
namespaceNames?: string[]
) {
if (!namespaceNames) {
return [];
}
const pods = await Promise.all(
namespaceNames.map((namespace) =>
getNamespacePods(environmentId, namespace)
)
);
return pods.flat();
}
export async function getNamespacePods(
environmentId: EnvironmentId,
namespace: string,
labelSelector?: string
) {
try {
const { data } = await axios.get<PodList>(
`/endpoints/${environmentId}/kubernetes/api/v1/namespaces/${namespace}/pods`,
{
params: {
labelSelector,
},
}
);
const items = (data.items || []).map(
(pod) =>
<Pod>{
...pod,
kind: 'Pod',
apiVersion: data.apiVersion,
}
);
return items;
} catch (e) {
throw parseKubernetesAxiosError(
e,
`Unable to retrieve Pods in namespace '${namespace}'`
);
}
}

33
app/react/kubernetes/applications/utils.ts
View file

@ -18,39 +18,6 @@ import {
appRevisionAnnotation,
} from './constants';
// naked pods are pods which are not owned by a deployment, daemonset, statefulset or replicaset
// https://kubernetes.io/docs/concepts/configuration/overview/#naked-pods-vs-replicasets-deployments-and-jobs
// getNakedPods returns an array of naked pods from an array of pods, deployments, daemonsets and statefulsets
export function getNakedPods(
pods: Pod[],
deployments: Deployment[],
daemonSets: DaemonSet[],
statefulSets: StatefulSet[]
) {
const appLabels = [
...deployments.map((deployment) => deployment.spec?.selector.matchLabels),
...daemonSets.map((daemonSet) => daemonSet.spec?.selector.matchLabels),
...statefulSets.map(
(statefulSet) => statefulSet.spec?.selector.matchLabels
),
];
const nakedPods = pods.filter((pod) => {
const podLabels = pod.metadata?.labels;
// if the pod has no labels, it is naked
if (!podLabels) return true;
// if the pod has labels, but no app labels, it is naked
return !appLabels.some((appLabel) => {
if (!appLabel) return false;
return Object.entries(appLabel).every(
([key, value]) => podLabels[key] === value
);
});
});
return nakedPods;
}
// type guard to check if an application is a deployment, daemonset, statefulset or pod
export function applicationIsKind<T extends Application>(
appKind: 'Deployment' | 'DaemonSet' | 'StatefulSet' | 'Pod',

0
app/react/kubernetes/cluster/.keep
View file

0
app/react/kubernetes/cluster/NodeView/.keep
View file

31
app/react/kubernetes/cluster/NodeView/NodeApplicationsDatatable/NodeApplicationsDatatable.tsx
View file

@ -1,7 +1,10 @@
import { useCurrentStateAndParams } from '@uirouter/react';
import LaptopCode from '@/assets/ico/laptop-code.svg?c';
import { useEnvironmentId } from '@/react/hooks/useEnvironmentId';
import { useApplications } from '@/react/kubernetes/applications/application.queries';
import { Datatable, TableSettingsMenu } from '@@/datatables';
import { useRepeater } from '@@/datatables/useRepeater';
import { TableSettingsMenuAutoRefresh } from '@@/datatables/TableSettingsMenuAutoRefresh';
import { useTableStateWithStorage } from '@@/datatables/useTableState';
import {
@ -11,19 +14,10 @@ import {
} from '@@/datatables/types';
import { useColumns } from './columns';
import { NodeApplication } from './types';
interface TableSettings extends BasicTableSettings, RefreshableTableSettings {}
export function NodeApplicationsDatatable({
dataset,
onRefresh,
isLoading,
}: {
dataset: Array<NodeApplication>;
onRefresh: () => void;
isLoading: boolean;
}) {
export function NodeApplicationsDatatable() {
const tableState = useTableStateWithStorage<TableSettings>(
'kube-node-apps',
'Name',
@ -31,19 +25,28 @@ export function NodeApplicationsDatatable({
...refreshableSettings(set),
})
);
useRepeater(tableState.autoRefreshRate, onRefresh);
const envId = useEnvironmentId();
const {
params: { nodeName },
} = useCurrentStateAndParams();
const applicationsQuery = useApplications(envId, {
nodeName,
refetchInterval: tableState.autoRefreshRate * 1000,
});
const applications = applicationsQuery.data ?? [];
const columns = useColumns();
return (
<Datatable
dataset={dataset}
dataset={applications}
settingsManager={tableState}
columns={columns}
disableSelect
title="Applications running on this node"
titleIcon={LaptopCode}
isLoading={isLoading}
isLoading={applicationsQuery.isLoading}
renderTableSettings={() => (
<TableSettingsMenu>
<TableSettingsMenuAutoRefresh

4
app/react/kubernetes/cluster/NodeView/NodeApplicationsDatatable/columns.helper.tsx
View file

@ -1,5 +1,5 @@
import { createColumnHelper } from '@tanstack/react-table';
import { NodeApplication } from './types';
import { Application } from '@/react/kubernetes/applications/ListView/ApplicationsDatatable/types';
export const helper = createColumnHelper<NodeApplication>();
export const helper = createColumnHelper<Application>();

6
app/react/kubernetes/cluster/NodeView/NodeApplicationsDatatable/columns.name.tsx
View file

@ -4,20 +4,18 @@ import { isExternalApplication } from '@/react/kubernetes/applications/utils';
import { useIsSystemNamespace } from '@/react/kubernetes/namespaces/queries/useIsSystemNamespace';
import { ExternalBadge } from '@/react/kubernetes/components/ExternalBadge';
import { SystemBadge } from '@/react/kubernetes/components/SystemBadge';
import { Application } from '@/react/kubernetes/applications/ListView/ApplicationsDatatable/types';
import { Link } from '@@/Link';
import { helper } from './columns.helper';
import { NodeApplication } from './types';
export const name = helper.accessor('Name', {
header: 'Name',
cell: Cell,
});
function Cell({
row: { original: item },
}: CellContext<NodeApplication, string>) {
function Cell({ row: { original: item } }: CellContext<Application, string>) {
const isSystem = useIsSystemNamespace(item.ResourcePool);
return (
<div className="flex items-center gap-2">

33
app/react/kubernetes/cluster/NodeView/NodeApplicationsDatatable/columns.tsx
View file

@ -41,22 +41,31 @@ export function useColumns() {
}),
helper.accessor('Image', {
header: 'Image',
cell: ({ row: { original: item } }) => (
<>
{truncate(item.Image, 64)}
{item.Containers?.length > 1 && (
<>+ {item.Containers.length - 1}</>
)}
</>
),
cell: ({ row: { original: item } }) => {
const containersLength = item.Containers?.length || 0;
return (
<>
{truncate(item.Image, 64)}
{containersLength > 1 && <>+ {containersLength - 1}</>}
</>
);
},
}),
helper.accessor('CPU', {
helper.accessor((row) => row.Resource?.CpuRequest, {
header: 'CPU reservation',
cell: ({ getValue }) => _.round(getValue(), 2),
cell: ({ getValue }) => <>{_.round(getValue() || 0, 2)}</>,
}),
helper.accessor('Memory', {
helper.accessor((row) => row.Resource?.CpuLimit, {
header: 'CPU Limit',
cell: ({ getValue }) => <>{_.round(getValue() || 0, 2)}</>,
}),
helper.accessor((row) => row.Resource?.MemoryRequest, {
header: 'Memory reservation',
cell: ({ getValue }) => humanize(getValue()),
cell: ({ getValue }) => <>{humanize(getValue() || 0)}</>,
}),
helper.accessor((row) => row.Resource?.MemoryLimit, {
header: 'Memory Limit',
cell: ({ getValue }) => <>{humanize(getValue() || 0)}</>,
}),
]),
[hideStacksQuery.data]

166
app/react/kubernetes/configs/ListView/ConfigMapsDatatable/ConfigMapsDatatable.tsx
View file

@ -1,58 +1,35 @@
import { useMemo } from 'react';
import { FileCode } from 'lucide-react';
import { ConfigMap, Pod } from 'kubernetes-types/core/v1';
import { CronJob, Job } from 'kubernetes-types/batch/v1';
import { useEnvironmentId } from '@/react/hooks/useEnvironmentId';
import { Authorized, useAuthorizations } from '@/react/hooks/useUser';
import {
DefaultDatatableSettings,
TableSettings as KubeTableSettings,
} from '@/react/kubernetes/datatables/DefaultDatatableSettings';
import { useKubeStore } from '@/react/kubernetes/datatables/default-kube-datatable-store';
import { DefaultDatatableSettings } from '@/react/kubernetes/datatables/DefaultDatatableSettings';
import { createStore } from '@/react/kubernetes/datatables/default-kube-datatable-store';
import { SystemResourceDescription } from '@/react/kubernetes/datatables/SystemResourceDescription';
import { useIsDeploymentOptionHidden } from '@/react/hooks/useIsDeploymentOptionHidden';
import { pluralize } from '@/portainer/helpers/strings';
import { useNamespacesQuery } from '@/react/kubernetes/namespaces/queries/useNamespacesQuery';
import { Namespaces } from '@/react/kubernetes/namespaces/types';
import { PortainerNamespace } from '@/react/kubernetes/namespaces/types';
import { CreateFromManifestButton } from '@/react/kubernetes/components/CreateFromManifestButton';
import { usePods } from '@/react/kubernetes/applications/usePods';
import { useJobs } from '@/react/kubernetes/applications/useJobs';
import { useCronJobs } from '@/react/kubernetes/applications/useCronJobs';
import { isSystemNamespace } from '@/react/kubernetes/namespaces/queries/useIsSystemNamespace';
import { Datatable, TableSettingsMenu } from '@@/datatables';
import { AddButton } from '@@/buttons';
import { useTableState } from '@@/datatables/useTableState';
import { DeleteButton } from '@@/buttons/DeleteButton';
import {
type FilteredColumnsTableSettings,
filteredColumnsSettings,
} from '@@/datatables/types';
import { mergeOptions } from '@@/datatables/extend-options/mergeOptions';
import { withColumnFilters } from '@@/datatables/extend-options/withColumnFilters';
import {
useConfigMapsForCluster,
useMutationDeleteConfigMaps,
} from '../../configmap.service';
import { IndexOptional } from '../../types';
import { IndexOptional, Configuration } from '../../types';
import { useDeleteConfigMaps } from '../../queries/useDeleteConfigMaps';
import { useConfigMapsForCluster } from '../../queries/useConfigmapsForCluster';
import { getIsConfigMapInUse } from './utils';
import { ConfigMapRowData } from './types';
import { columns } from './columns';
interface TableSettings
extends KubeTableSettings,
FilteredColumnsTableSettings {}
const storageKey = 'k8sConfigMapsDatatable';
const settingsStore = createStore(storageKey);
export function ConfigMapsDatatable() {
const tableState = useKubeStore<TableSettings>(
storageKey,
undefined,
(set) => ({
...filteredColumnsSettings(set),
})
);
const tableState = useTableState(settingsStore, storageKey);
const { authorized: canWrite } = useAuthorizations(['K8sConfigMapsW']);
const readOnly = !canWrite;
const { authorized: canAccessSystemResources } = useAuthorizations(
@ -60,42 +37,23 @@ export function ConfigMapsDatatable() {
);
const environmentId = useEnvironmentId();
const { data: namespaces, ...namespacesQuery } = useNamespacesQuery(
environmentId,
{
autoRefreshRate: tableState.autoRefreshRate * 1000,
}
);
const namespaceNames = Object.keys(namespaces || {});
const { data: configMaps, ...configMapsQuery } = useConfigMapsForCluster(
environmentId,
namespaceNames,
{
autoRefreshRate: tableState.autoRefreshRate * 1000,
}
);
const podsQuery = usePods(environmentId, namespaceNames);
const jobsQuery = useJobs(environmentId, namespaceNames);
const cronJobsQuery = useCronJobs(environmentId, namespaceNames);
const isInUseLoading =
podsQuery.isLoading || jobsQuery.isLoading || cronJobsQuery.isLoading;
const filteredConfigMaps = useMemo(
() =>
configMaps?.filter(
(configMap) =>
const namespacesQuery = useNamespacesQuery(environmentId, {
autoRefreshRate: tableState.autoRefreshRate * 1000,
});
const configMapsQuery = useConfigMapsForCluster(environmentId, {
autoRefreshRate: tableState.autoRefreshRate * 1000,
select: (configMaps) =>
configMaps.filter(
(configmap) =>
(canAccessSystemResources && tableState.showSystemResources) ||
!namespaces?.[configMap.metadata?.namespace ?? '']?.IsSystem
) || [],
[configMaps, tableState, canAccessSystemResources, namespaces]
);
!isSystemNamespace(configmap.Namespace, namespacesQuery.data)
),
isUsed: true,
});
const configMapRowData = useConfigMapRowData(
filteredConfigMaps,
podsQuery.data ?? [],
jobsQuery.data ?? [],
cronJobsQuery.data ?? [],
isInUseLoading,
namespaces
configMapsQuery.data ?? [],
namespacesQuery.data
);
return (
@ -104,11 +62,12 @@ export function ConfigMapsDatatable() {
columns={columns}
settingsManager={tableState}
isLoading={configMapsQuery.isLoading || namespacesQuery.isLoading}
emptyContentLabel="No ConfigMaps found"
title="ConfigMaps"
titleIcon={FileCode}
getRowId={(row) => row.metadata?.uid ?? ''}
isRowSelectable={(row) =>
!namespaces?.[row.original.metadata?.namespace ?? ''].IsSystem
getRowId={(row) => row.UID ?? ''}
isRowSelectable={({ original: configmap }) =>
!isSystemNamespace(configmap.Namespace, namespacesQuery.data)
}
disableSelect={readOnly}
renderTableActions={(selectedRows) => (
@ -125,36 +84,26 @@ export function ConfigMapsDatatable() {
/>
}
data-cy="k8s-configmaps-datatable"
extendTableOptions={mergeOptions(
withColumnFilters(tableState.columnFilters, tableState.setColumnFilters)
)}
/>
);
}
// useConfigMapRowData appends the `inUse` property to the ConfigMap data (for the unused badge in the name column)
// and wraps with useMemo to prevent unnecessary calculations
function useConfigMapRowData(
configMaps: ConfigMap[],
pods: Pod[],
jobs: Job[],
cronJobs: CronJob[],
isInUseLoading: boolean,
namespaces?: Namespaces
configMaps: Configuration[],
namespaces?: PortainerNamespace[]
): ConfigMapRowData[] {
return useMemo(
() =>
configMaps.map((configMap) => ({
configMaps?.map((configMap) => ({
...configMap,
inUse:
// if the apps are loading, set inUse to true to hide the 'unused' badge
isInUseLoading ||
getIsConfigMapInUse(configMap, pods, jobs, cronJobs),
inUse: configMap.IsUsed,
isSystem: namespaces
? namespaces?.[configMap.metadata?.namespace ?? '']?.IsSystem
? namespaces.find(
(namespace) => namespace.Name === configMap.Namespace
)?.IsSystem ?? false
: false,
})),
[configMaps, isInUseLoading, pods, jobs, cronJobs, namespaces]
})) || [],
[configMaps, namespaces]
);
}
@ -163,17 +112,9 @@ function TableActions({
}: {
selectedItems: ConfigMapRowData[];
}) {
const isAddConfigMapHidden = useIsDeploymentOptionHidden('form');
const environmentId = useEnvironmentId();
const deleteConfigMapMutation = useMutationDeleteConfigMaps(environmentId);
async function handleRemoveClick(configMaps: ConfigMap[]) {
const configMapsToDelete = configMaps.map((configMap) => ({
namespace: configMap.metadata?.namespace ?? '',
name: configMap.metadata?.name ?? '',
}));
await deleteConfigMapMutation.mutateAsync(configMapsToDelete);
}
const deleteConfigMapMutation = useDeleteConfigMaps(environmentId);
return (
<Authorized authorizations="K8sConfigMapsW">
@ -187,13 +128,15 @@ function TableActions({
data-cy="k8sConfig-removeConfigButton"
/>
<AddButton
to="kubernetes.configmaps.new"
data-cy="k8sConfig-addConfigWithFormButton"
color="secondary"
>
Add with form
</AddButton>
{!isAddConfigMapHidden && (
<AddButton
to="kubernetes.configmaps.new"
data-cy="k8sConfig-addConfigWithFormButton"
color="secondary"
>
Add with form
</AddButton>
)}
<CreateFromManifestButton
params={{
@ -203,4 +146,13 @@ function TableActions({
/>
</Authorized>
);
async function handleRemoveClick(configMaps: ConfigMapRowData[]) {
const configMapsToDelete = configMaps.map((configMap) => ({
namespace: configMap.Namespace ?? '',
name: configMap.Name ?? '',
}));
await deleteConfigMapMutation.mutateAsync(configMapsToDelete);
}
}

8
app/react/kubernetes/configs/ListView/ConfigMapsDatatable/columns/created.tsx
View file

@ -1,8 +1,6 @@
import { formatDate } from '@/portainer/filters/filters';
import { appOwnerLabel } from '@/react/kubernetes/applications/constants';
import { ConfigMapRowData } from '../types';
import { configurationOwnerUsernameLabel } from '../../../constants';
import { columnHelper } from './helper';
@ -13,9 +11,7 @@ export const created = columnHelper.accessor((row) => getCreatedAtText(row), {
});
function getCreatedAtText(row: ConfigMapRowData) {
const owner =
row.metadata?.labels?.[configurationOwnerUsernameLabel] ||
row.metadata?.labels?.[appOwnerLabel];
const date = formatDate(row.metadata?.creationTimestamp);
const owner = row.ConfigurationOwner || row.ConfigurationOwnerId;
const date = formatDate(row.CreationDate);
return owner ? `${date} by ${owner}` : date;
}

17
app/react/kubernetes/configs/ListView/ConfigMapsDatatable/columns/name.tsx
View file

@ -1,7 +1,6 @@
import { CellContext } from '@tanstack/react-table';
import { Authorized } from '@/react/hooks/useUser';
import { appOwnerLabel } from '@/react/kubernetes/applications/constants';
import { ExternalBadge } from '@@/Badge/ExternalBadge';
import { SystemBadge } from '@@/Badge/SystemBadge';
@ -9,22 +8,18 @@ import { UnusedBadge } from '@@/Badge/UnusedBadge';
import { Link } from '@@/Link';
import { ConfigMapRowData } from '../types';
import { configurationOwnerUsernameLabel } from '../../../constants';
import { columnHelper } from './helper';
export const name = columnHelper.accessor(
(row) => {
const name = row.metadata?.name;
const name = row.Name;
const isSystemToken = name?.includes('default-token-');
const isSystemConfigMap = isSystemToken || row.isSystem;
const hasConfigurationOwner = !!(
row.metadata?.labels?.[configurationOwnerUsernameLabel] ||
row.metadata?.labels?.[appOwnerLabel]
row.ConfigurationOwner || row.ConfigurationOwnerId
);
return `${name} ${isSystemConfigMap ? 'system' : ''} ${
!isSystemToken && !hasConfigurationOwner ? 'external' : ''
} ${!row.inUse && !isSystemConfigMap ? 'unused' : ''}`;
@ -37,14 +32,12 @@ export const name = columnHelper.accessor(
);
function Cell({ row }: CellContext<ConfigMapRowData, string>) {
const name = row.original.metadata?.name;
const name = row.original.Name;
const isSystemToken = name?.includes('default-token-');
const isSystemConfigMap = isSystemToken || row.original.isSystem;
const hasConfigurationOwner = !!(
row.original.metadata?.labels?.[configurationOwnerUsernameLabel] ||
row.original.metadata?.labels?.[appOwnerLabel]
row.original.ConfigurationOwner || row.original.ConfigurationOwnerId
);
return (
@ -53,7 +46,7 @@ function Cell({ row }: CellContext<ConfigMapRowData, string>) {
<Link
to="kubernetes.configmaps.configmap"
params={{
namespace: row.original.metadata?.namespace,
namespace: row.original.Namespace,
name,
}}
title={name}

64
app/react/kubernetes/configs/ListView/ConfigMapsDatatable/columns/namespace.tsx
View file

@ -8,37 +8,33 @@ import { ConfigMapRowData } from '../types';
import { columnHelper } from './helper';
export const namespace = columnHelper.accessor(
(row) => row.metadata?.namespace,
{
header: 'Namespace',
id: 'namespace',
cell: ({ getValue }) => {
const namespace = getValue();
return (
<Link
to="kubernetes.resourcePools.resourcePool"
params={{
id: namespace,
}}
title={namespace}
data-cy={`configmap-namespace-link-${namespace}`}
>
{namespace}
</Link>
);
},
meta: {
filter: filterHOC('Filter by namespace'),
},
enableColumnFilter: true,
filterFn: (
row: Row<ConfigMapRowData>,
_columnId: string,
filterValue: string[]
) =>
filterValue.length === 0 ||
filterValue.includes(row.original.metadata?.namespace ?? ''),
}
);
export const namespace = columnHelper.accessor('Namespace', {
header: 'Namespace',
id: 'namespace',
cell: ({ getValue }) => {
const namespace = getValue();
return (
<Link
to="kubernetes.resourcePools.resourcePool"
params={{
id: namespace,
}}
title={namespace}
data-cy={`configmap-namespace-link-${namespace}`}
>
{namespace}
</Link>
);
},
meta: {
filter: filterHOC('Filter by namespace'),
},
enableColumnFilter: true,
filterFn: (
row: Row<ConfigMapRowData>,
_columnId: string,
filterValue: string[]
) =>
filterValue.length === 0 ||
filterValue.includes(row.original.Namespace ?? ''),
});

4
app/react/kubernetes/configs/ListView/ConfigMapsDatatable/types.ts
View file

@ -1,6 +1,6 @@
import { ConfigMap } from 'kubernetes-types/core/v1';
import { Configuration } from '../../types';
export interface ConfigMapRowData extends ConfigMap {
export interface ConfigMapRowData extends Configuration {
inUse: boolean;
isSystem: boolean;
}

115
app/react/kubernetes/configs/ListView/ConfigMapsDatatable/utils.test.ts
View file

@ -1,14 +1,21 @@
import { ConfigMap, Pod } from 'kubernetes-types/core/v1';
import { CronJob, Job } from 'kubernetes-types/batch/v1';
import { CronJob, Job, K8sPod } from '../../../applications/types';
import { Configuration } from '../../types';
import { getIsConfigMapInUse } from './utils';
describe('getIsConfigMapInUse', () => {
it('should return false when no resources reference the configMap', () => {
const configMap: ConfigMap = {
metadata: { name: 'my-configmap', namespace: 'default' },
const configMap: Configuration = {
Name: 'my-configmap',
Namespace: 'default',
UID: '',
Type: 1,
ConfigurationOwner: '',
ConfigurationOwnerId: '',
IsUsed: false,
Yaml: '',
};
const pods: Pod[] = [];
const pods: K8sPod[] = [];
const jobs: Job[] = [];
const cronJobs: CronJob[] = [];
@ -16,20 +23,26 @@ describe('getIsConfigMapInUse', () => {
});
it('should return true when a pod references the configMap', () => {
const configMap: ConfigMap = {
metadata: { name: 'my-configmap', namespace: 'default' },
const configMap: Configuration = {
Name: 'my-configmap',
Namespace: 'default',
UID: '',
Type: 1,
ConfigurationOwner: '',
ConfigurationOwnerId: '',
IsUsed: false,
Yaml: '',
};
const pods: Pod[] = [
const pods: K8sPod[] = [
{
metadata: { namespace: 'default' },
spec: {
containers: [
{
name: 'container1',
envFrom: [{ configMapRef: { name: 'my-configmap' } }],
},
],
},
namespace: 'default',
containers: [
{
name: 'container1',
envFrom: [{ configMapRef: { name: 'my-configmap' } }],
},
],
ownerReferences: [],
},
];
const jobs: Job[] = [];
@ -39,25 +52,26 @@ describe('getIsConfigMapInUse', () => {
});
it('should return true when a job references the configMap', () => {
const configMap: ConfigMap = {
metadata: { name: 'my-configmap', namespace: 'default' },
const configMap: Configuration = {
Name: 'my-configmap',
Namespace: 'default',
UID: '',
Type: 1,
ConfigurationOwner: '',
ConfigurationOwnerId: '',
IsUsed: false,
Yaml: '',
};
const pods: Pod[] = [];
const pods: K8sPod[] = [];
const jobs: Job[] = [
{
metadata: { namespace: 'default' },
spec: {
template: {
spec: {
containers: [
{
name: 'container1',
envFrom: [{ configMapRef: { name: 'my-configmap' } }],
},
],
},
namespace: 'default',
containers: [
{
name: 'container1',
envFrom: [{ configMapRef: { name: 'my-configmap' } }],
},
},
],
},
];
const cronJobs: CronJob[] = [];
@ -66,31 +80,28 @@ describe('getIsConfigMapInUse', () => {
});
it('should return true when a cronJob references the configMap', () => {
const configMap: ConfigMap = {
metadata: { name: 'my-configmap', namespace: 'default' },
const configMap: Configuration = {
Name: 'my-configmap',
Namespace: 'default',
UID: '',
Type: 1,
ConfigurationOwner: '',
ConfigurationOwnerId: '',
IsUsed: false,
Yaml: '',
};
const pods: Pod[] = [];
const pods: K8sPod[] = [];
const jobs: Job[] = [];
const cronJobs: CronJob[] = [
{
metadata: { namespace: 'default' },
spec: {
schedule: '0 0 * * *',
jobTemplate: {
spec: {
template: {
spec: {
containers: [
{
name: 'container1',
envFrom: [{ configMapRef: { name: 'my-configmap' } }],
},
],
},
},
},
namespace: 'default',
schedule: '0 0 * * *',
containers: [
{
name: 'container1',
envFrom: [{ configMapRef: { name: 'my-configmap' } }],
},
},
],
},
];

34
app/react/kubernetes/configs/ListView/ConfigMapsDatatable/utils.ts
View file

@ -1,27 +1,27 @@
import { ConfigMap, Pod, PodSpec } from 'kubernetes-types/core/v1';
import { CronJob, Job } from 'kubernetes-types/batch/v1';
import { PodSpec } from 'kubernetes-types/core/v1';
import { Configuration } from '../../types';
import { Job, CronJob, K8sPod } from '../../../applications/types';
/**
* getIsConfigMapInUse returns true if the configmap is referenced by any pod, job, or cronjob in the same namespace
*/
export function getIsConfigMapInUse(
configMap: ConfigMap,
pods: Pod[],
configMap: Configuration,
pods: K8sPod[],
jobs: Job[],
cronJobs: CronJob[]
) {
// get all podspecs from pods, jobs and cronjobs that are in the same namespace
const podsInNamespace = pods
.filter((pod) => pod.metadata?.namespace === configMap.metadata?.namespace)
.map((pod) => pod.spec);
const jobsInNamespace = jobs
.filter((job) => job.metadata?.namespace === configMap.metadata?.namespace)
.map((job) => job.spec?.template.spec);
const cronJobsInNamespace = cronJobs
.filter(
(cronJob) => cronJob.metadata?.namespace === configMap.metadata?.namespace
)
.map((cronJob) => cronJob.spec?.jobTemplate.spec?.template.spec);
const podsInNamespace = pods.filter(
(pod) => pod.namespace === configMap.Namespace
);
const jobsInNamespace = jobs.filter(
(job) => job.namespace === configMap.Namespace
);
const cronJobsInNamespace = cronJobs.filter(
(cronJob) => cronJob.namespace === configMap.Namespace
);
const allPodSpecs = [
...podsInNamespace,
...jobsInNamespace,
@ -30,10 +30,10 @@ export function getIsConfigMapInUse(
// check if the configmap is referenced by any pod, job or cronjob in the namespace
const isReferenced = allPodSpecs.some((podSpec) => {
if (!podSpec || !configMap.metadata?.name) {
if (!podSpec || !configMap.Namespace) {
return false;
}
return doesPodSpecReferenceConfigMap(podSpec, configMap.metadata?.name);
return doesPodSpecReferenceConfigMap(podSpec, configMap.Name);
});
return isReferenced;

175
app/react/kubernetes/configs/ListView/SecretsDatatable/SecretsDatatable.tsx
View file

@ -1,118 +1,81 @@
import { useMemo } from 'react';
import { Lock } from 'lucide-react';
import { Pod, Secret } from 'kubernetes-types/core/v1';
import { CronJob, Job } from 'kubernetes-types/batch/v1';
import { useEnvironmentId } from '@/react/hooks/useEnvironmentId';
import { Authorized, useAuthorizations } from '@/react/hooks/useUser';
import {
DefaultDatatableSettings,
TableSettings as KubeTableSettings,
} from '@/react/kubernetes/datatables/DefaultDatatableSettings';
import { useKubeStore } from '@/react/kubernetes/datatables/default-kube-datatable-store';
import { DefaultDatatableSettings } from '@/react/kubernetes/datatables/DefaultDatatableSettings';
import { createStore } from '@/react/kubernetes/datatables/default-kube-datatable-store';
import { SystemResourceDescription } from '@/react/kubernetes/datatables/SystemResourceDescription';
import { useIsDeploymentOptionHidden } from '@/react/hooks/useIsDeploymentOptionHidden';
import { pluralize } from '@/portainer/helpers/strings';
import { useNamespacesQuery } from '@/react/kubernetes/namespaces/queries/useNamespacesQuery';
import { Namespaces } from '@/react/kubernetes/namespaces/types';
import { PortainerNamespace } from '@/react/kubernetes/namespaces/types';
import { CreateFromManifestButton } from '@/react/kubernetes/components/CreateFromManifestButton';
import { usePods } from '@/react/kubernetes/applications/usePods';
import { useJobs } from '@/react/kubernetes/applications/useJobs';
import { useCronJobs } from '@/react/kubernetes/applications/useCronJobs';
import { isSystemNamespace } from '@/react/kubernetes/namespaces/queries/useIsSystemNamespace';
import { Datatable, TableSettingsMenu } from '@@/datatables';
import { AddButton } from '@@/buttons';
import { useTableState } from '@@/datatables/useTableState';
import { DeleteButton } from '@@/buttons/DeleteButton';
import {
type FilteredColumnsTableSettings,
filteredColumnsSettings,
} from '@@/datatables/types';
import { mergeOptions } from '@@/datatables/extend-options/mergeOptions';
import { withColumnFilters } from '@@/datatables/extend-options/withColumnFilters';
import {
useSecretsForCluster,
useMutationDeleteSecrets,
} from '../../secret.service';
import { IndexOptional } from '../../types';
import { useSecretsForCluster } from '../../queries/useSecretsForCluster';
import { useDeleteSecrets } from '../../queries/useDeleteSecrets';
import { IndexOptional, Configuration } from '../../types';
import { getIsSecretInUse } from './utils';
import { SecretRowData } from './types';
import { columns } from './columns';
const storageKey = 'k8sSecretsDatatable';
interface TableSettings
extends KubeTableSettings,
FilteredColumnsTableSettings {}
const settingsStore = createStore(storageKey);
export function SecretsDatatable() {
const tableState = useKubeStore<TableSettings>(
storageKey,
undefined,
(set) => ({
...filteredColumnsSettings(set),
})
);
const environmentId = useEnvironmentId();
const tableState = useTableState(settingsStore, storageKey);
const { authorized: canWrite } = useAuthorizations(['K8sSecretsW']);
const readOnly = !canWrite;
const { authorized: canAccessSystemResources } = useAuthorizations(
'K8sAccessSystemNamespaces'
);
const isAddSecretHidden = useIsDeploymentOptionHidden('form');
const { data: namespaces, ...namespacesQuery } = useNamespacesQuery(
environmentId,
{
autoRefreshRate: tableState.autoRefreshRate * 1000,
}
);
const namespaceNames = Object.keys(namespaces || {});
const { data: secrets, ...secretsQuery } = useSecretsForCluster(
environmentId,
namespaceNames,
{
autoRefreshRate: tableState.autoRefreshRate * 1000,
}
);
const podsQuery = usePods(environmentId, namespaceNames);
const jobsQuery = useJobs(environmentId, namespaceNames);
const cronJobsQuery = useCronJobs(environmentId, namespaceNames);
const isInUseLoading =
podsQuery.isLoading || jobsQuery.isLoading || cronJobsQuery.isLoading;
const filteredSecrets = useMemo(
() =>
secrets?.filter(
const environmentId = useEnvironmentId();
const namespacesQuery = useNamespacesQuery(environmentId, {
autoRefreshRate: tableState.autoRefreshRate * 1000,
});
const secretsQuery = useSecretsForCluster(environmentId, {
autoRefreshRate: tableState.autoRefreshRate * 1000,
select: (secrets) =>
secrets.filter(
(secret) =>
(canAccessSystemResources && tableState.showSystemResources) ||
!namespaces?.[secret.metadata?.namespace ?? '']?.IsSystem
) || [],
[secrets, tableState, canAccessSystemResources, namespaces]
);
!isSystemNamespace(secret.Namespace, namespacesQuery.data)
),
isUsed: true,
});
const secretRowData = useSecretRowData(
filteredSecrets,
podsQuery.data ?? [],
jobsQuery.data ?? [],
cronJobsQuery.data ?? [],
isInUseLoading,
namespaces
secretsQuery.data ?? [],
namespacesQuery.data
);
return (
<Datatable<IndexOptional<SecretRowData>>
dataset={secretRowData}
dataset={secretRowData || []}
columns={columns}
settingsManager={tableState}
isLoading={secretsQuery.isLoading || namespacesQuery.isLoading}
emptyContentLabel="No secrets found"
title="Secrets"
titleIcon={Lock}
getRowId={(row) => row.metadata?.uid ?? ''}
isRowSelectable={(row) =>
!namespaces?.[row.original.metadata?.namespace ?? '']?.IsSystem
getRowId={(row) => row.UID ?? ''}
isRowSelectable={({ original: secret }) =>
!isSystemNamespace(secret.Namespace, namespacesQuery.data)
}
disableSelect={readOnly}
renderTableActions={(selectedRows) => (
<TableActions selectedItems={selectedRows} />
<TableActions
selectedItems={selectedRows}
isAddSecretHidden={isAddSecretHidden}
/>
)}
renderTableSettings={() => (
<TableSettingsMenu>
@ -125,9 +88,6 @@ export function SecretsDatatable() {
/>
}
data-cy="k8s-secrets-datatable"
extendTableOptions={mergeOptions(
withColumnFilters(tableState.columnFilters, tableState.setColumnFilters)
)}
/>
);
}
@ -135,36 +95,41 @@ export function SecretsDatatable() {
// useSecretRowData appends the `inUse` property to the secret data (for the unused badge in the name column)
// and wraps with useMemo to prevent unnecessary calculations
function useSecretRowData(
secrets: Secret[],
pods: Pod[],
jobs: Job[],
cronJobs: CronJob[],
isInUseLoading: boolean,
namespaces?: Namespaces
secrets: Configuration[],
namespaces?: PortainerNamespace[]
): SecretRowData[] {
return useMemo(
() =>
secrets.map((secret) => ({
...secret,
inUse:
// if the apps are loading, set inUse to true to hide the 'unused' badge
isInUseLoading || getIsSecretInUse(secret, pods, jobs, cronJobs),
isSystem: namespaces
? namespaces?.[secret.metadata?.namespace ?? '']?.IsSystem
: false,
})),
[secrets, isInUseLoading, pods, jobs, cronJobs, namespaces]
secrets?.map(
(secret) =>
({
...secret,
inUse: secret.IsUsed,
isSystem: namespaces
? namespaces.find(
(namespace) => namespace.Name === secret.Namespace
)?.IsSystem ?? false
: false,
}) ?? []
),
[secrets, namespaces]
);
}
function TableActions({ selectedItems }: { selectedItems: SecretRowData[] }) {
function TableActions({
selectedItems,
isAddSecretHidden,
}: {
selectedItems: SecretRowData[];
isAddSecretHidden: boolean;
}) {
const environmentId = useEnvironmentId();
const deleteSecretMutation = useMutationDeleteSecrets(environmentId);
const deleteSecretMutation = useDeleteSecrets(environmentId);
async function handleRemoveClick(secrets: SecretRowData[]) {
const secretsToDelete = secrets.map((secret) => ({
namespace: secret.metadata?.namespace ?? '',
name: secret.metadata?.name ?? '',
namespace: secret.Namespace ?? '',
name: secret.Name ?? '',
}));
await deleteSecretMutation.mutateAsync(secretsToDelete);
@ -181,13 +146,17 @@ function TableActions({ selectedItems }: { selectedItems: SecretRowData[] }) {
'secret'
)}?`}
/>
<AddButton
to="kubernetes.secrets.new"
data-cy="k8sSecret-addSecretWithFormButton"
color="secondary"
>
Add with form
</AddButton>
{!isAddSecretHidden && (
<AddButton
to="kubernetes.secrets.new"
data-cy="k8sSecret-addSecretWithFormButton"
color="secondary"
>
Add with form
</AddButton>
)}
<CreateFromManifestButton
params={{
tab: 'secrets',

8
app/react/kubernetes/configs/ListView/SecretsDatatable/columns/created.tsx
View file

@ -1,8 +1,6 @@
import { formatDate } from '@/portainer/filters/filters';
import { appOwnerLabel } from '@/react/kubernetes/applications/constants';
import { SecretRowData } from '../types';
import { configurationOwnerUsernameLabel } from '../../../constants';
import { columnHelper } from './helper';
@ -13,9 +11,7 @@ export const created = columnHelper.accessor((row) => getCreatedAtText(row), {
});
function getCreatedAtText(row: SecretRowData) {
const owner =
row.metadata?.labels?.[configurationOwnerUsernameLabel] ||
row.metadata?.labels?.[appOwnerLabel];
const date = formatDate(row.metadata?.creationTimestamp);
const owner = row.ConfigurationOwner || row.ConfigurationOwnerId;
const date = formatDate(row.CreationDate);
return owner ? `${date} by ${owner}` : date;
}

28
app/react/kubernetes/configs/ListView/SecretsDatatable/columns/name.tsx
View file

@ -1,7 +1,6 @@
import { CellContext } from '@tanstack/react-table';
import { Authorized } from '@/react/hooks/useUser';
import { appOwnerLabel } from '@/react/kubernetes/applications/constants';
import { SystemBadge } from '@@/Badge/SystemBadge';
import { ExternalBadge } from '@@/Badge/ExternalBadge';
@ -9,26 +8,21 @@ import { UnusedBadge } from '@@/Badge/UnusedBadge';
import { Link } from '@@/Link';
import { SecretRowData } from '../types';
import { configurationOwnerUsernameLabel } from '../../../constants';
import { columnHelper } from './helper';
export const name = columnHelper.accessor(
(row) => {
const name = row.metadata?.name;
const name = row.Name;
const isSystemToken = name?.includes('default-token-');
const isRegistrySecret =
row.metadata?.annotations?.['portainer.io/registry.id'];
const isSystemSecret = isSystemToken || row.isSystem || isRegistrySecret;
const isSystemConfigMap = isSystemToken || row.isSystem;
const hasConfigurationOwner = !!(
row.metadata?.labels?.[configurationOwnerUsernameLabel] ||
row.metadata?.labels?.[appOwnerLabel]
row.ConfigurationOwner || row.ConfigurationOwnerId
);
return `${name} ${isSystemSecret ? 'system' : ''} ${
return `${name} ${isSystemConfigMap ? 'system' : ''} ${
!isSystemToken && !hasConfigurationOwner ? 'external' : ''
} ${!row.inUse && !isSystemSecret ? 'unused' : ''}`;
} ${!row.inUse && !isSystemConfigMap ? 'unused' : ''}`;
},
{
header: 'Name',
@ -38,23 +32,22 @@ export const name = columnHelper.accessor(
);
function Cell({ row }: CellContext<SecretRowData, string>) {
const name = row.original.metadata?.name;
const name = row.original.Name;
const isSystemToken = name?.includes('default-token-');
const isSystemSecret = isSystemToken || row.original.isSystem;
const hasConfigurationOwner = !!(
row.original.metadata?.labels?.[configurationOwnerUsernameLabel] ||
row.original.metadata?.labels?.[appOwnerLabel]
row.original.ConfigurationOwner || row.original.ConfigurationOwnerId
);
return (
<Authorized authorizations="K8sSecretsR" childrenUnauthorized={name}>
<div className="flex w-fit">
<div className="flex w-fit gap-x-2">
<Link
to="kubernetes.secrets.secret"
params={{
namespace: row.original.metadata?.namespace,
namespace: row.original.Namespace,
name,
}}
title={name}
@ -63,7 +56,6 @@ function Cell({ row }: CellContext<SecretRowData, string>) {
>
{name}
</Link>
{isSystemSecret && <SystemBadge />}
{!isSystemToken && !hasConfigurationOwner && <ExternalBadge />}
{!row.original.inUse && !isSystemSecret && <UnusedBadge />}

63
app/react/kubernetes/configs/ListView/SecretsDatatable/columns/namespace.tsx
View file

@ -8,37 +8,34 @@ import { SecretRowData } from '../types';
import { columnHelper } from './helper';
export const namespace = columnHelper.accessor(
(row) => row.metadata?.namespace,
{
header: 'Namespace',
id: 'namespace',
cell: ({ getValue }) => {
const namespace = getValue();
export const namespace = columnHelper.accessor((row) => row.Namespace, {
header: 'Namespace',
id: 'namespace',
cell: ({ getValue }) => {
const namespace = getValue();
return (
<Link
to="kubernetes.resourcePools.resourcePool"
params={{
id: namespace,
}}
title={namespace}
data-cy={`secret-namespace-link-${namespace}`}
>
{namespace}
</Link>
);
},
meta: {
filter: filterHOC('Filter by namespace'),
},
enableColumnFilter: true,
filterFn: (
row: Row<SecretRowData>,
_columnId: string,
filterValue: string[]
) =>
filterValue.length === 0 ||
filterValue.includes(row.original.metadata?.namespace ?? ''),
}
);
return (
<Link
to="kubernetes.resourcePools.resourcePool"
params={{
id: namespace,
}}
title={namespace}
data-cy={`secret-namespace-link-${namespace}`}
>
{namespace}
</Link>
);
},
meta: {
filter: filterHOC('Filter by namespace'),
},
enableColumnFilter: true,
filterFn: (
row: Row<SecretRowData>,
_columnId: string,
filterValue: string[]
) =>
filterValue.length === 0 ||
filterValue.includes(row.original.Namespace ?? ''),
});

4
app/react/kubernetes/configs/ListView/SecretsDatatable/types.ts
View file

@ -1,6 +1,6 @@
import { Secret } from 'kubernetes-types/core/v1';
import { Configuration } from '../../types';
export interface SecretRowData extends Secret {
export interface SecretRowData extends Configuration {
inUse: boolean;
isSystem: boolean;
}

115
app/react/kubernetes/configs/ListView/SecretsDatatable/utils.test.ts
View file

@ -1,14 +1,21 @@
import { CronJob, Job } from 'kubernetes-types/batch/v1';
import { Secret, Pod } from 'kubernetes-types/core/v1';
import { CronJob, Job, K8sPod } from '../../../applications/types';
import { Configuration } from '../../types';
import { getIsSecretInUse } from './utils';
describe('getIsSecretInUse', () => {
it('should return false when no resources reference the secret', () => {
const secret: Secret = {
metadata: { name: 'my-secret', namespace: 'default' },
const secret: Configuration = {
Name: 'my-secret',
Namespace: 'default',
UID: '',
Type: 1,
ConfigurationOwner: '',
ConfigurationOwnerId: '',
IsUsed: false,
Yaml: '',
};
const pods: Pod[] = [];
const pods: K8sPod[] = [];
const jobs: Job[] = [];
const cronJobs: CronJob[] = [];
@ -16,20 +23,26 @@ describe('getIsSecretInUse', () => {
});
it('should return true when a pod references the secret', () => {
const secret: Secret = {
metadata: { name: 'my-secret', namespace: 'default' },
const secret: Configuration = {
Name: 'my-secret',
Namespace: 'default',
UID: '',
Type: 1,
ConfigurationOwner: '',
ConfigurationOwnerId: '',
IsUsed: false,
Yaml: '',
};
const pods: Pod[] = [
const pods: K8sPod[] = [
{
metadata: { namespace: 'default' },
spec: {
containers: [
{
name: 'container1',
envFrom: [{ secretRef: { name: 'my-secret' } }],
},
],
},
namespace: 'default',
containers: [
{
name: 'container1',
envFrom: [{ secretRef: { name: 'my-secret' } }],
},
],
ownerReferences: [],
},
];
const jobs: Job[] = [];
@ -39,25 +52,26 @@ describe('getIsSecretInUse', () => {
});
it('should return true when a job references the secret', () => {
const secret: Secret = {
metadata: { name: 'my-secret', namespace: 'default' },
const secret: Configuration = {
Name: 'my-secret',
Namespace: 'default',
UID: '',
Type: 1,
ConfigurationOwner: '',
ConfigurationOwnerId: '',
IsUsed: false,
Yaml: '',
};
const pods: Pod[] = [];
const pods: K8sPod[] = [];
const jobs: Job[] = [
{
metadata: { namespace: 'default' },
spec: {
template: {
spec: {
containers: [
{
name: 'container1',
envFrom: [{ secretRef: { name: 'my-secret' } }],
},
],
},
namespace: 'default',
containers: [
{
name: 'container1',
envFrom: [{ secretRef: { name: 'my-secret' } }],
},
},
],
},
];
const cronJobs: CronJob[] = [];
@ -66,31 +80,28 @@ describe('getIsSecretInUse', () => {
});
it('should return true when a cronJob references the secret', () => {
const secret: Secret = {
metadata: { name: 'my-secret', namespace: 'default' },
const secret: Configuration = {
Name: 'my-secret',
Namespace: 'default',
UID: '',
Type: 1,
ConfigurationOwner: '',
ConfigurationOwnerId: '',
IsUsed: false,
Yaml: '',
};
const pods: Pod[] = [];
const pods: K8sPod[] = [];
const jobs: Job[] = [];
const cronJobs: CronJob[] = [
{
metadata: { namespace: 'default' },
spec: {
schedule: '0 0 * * *',
jobTemplate: {
spec: {
template: {
spec: {
containers: [
{
name: 'container1',
envFrom: [{ secretRef: { name: 'my-secret' } }],
},
],
},
},
},
namespace: 'default',
schedule: '0 0 * * *',
containers: [
{
name: 'container1',
envFrom: [{ secretRef: { name: 'my-secret' } }],
},
},
],
},
];

34
app/react/kubernetes/configs/ListView/SecretsDatatable/utils.ts
View file

@ -1,27 +1,27 @@
import { Secret, Pod, PodSpec } from 'kubernetes-types/core/v1';
import { CronJob, Job } from 'kubernetes-types/batch/v1';
import { PodSpec } from 'kubernetes-types/core/v1';
import { Configuration } from '../../types';
import { Job, CronJob, K8sPod } from '../../../applications/types';
/**
* getIsSecretInUse returns true if the secret is referenced by any pod, job, or cronjob in the same namespace
*/
export function getIsSecretInUse(
secret: Secret,
pods: Pod[],
secret: Configuration,
pods: K8sPod[],
jobs: Job[],
cronJobs: CronJob[]
) {
// get all podspecs from pods, jobs and cronjobs that are in the same namespace
const podsInNamespace = pods
.filter((pod) => pod.metadata?.namespace === secret.metadata?.namespace)
.map((pod) => pod.spec);
const jobsInNamespace = jobs
.filter((job) => job.metadata?.namespace === secret.metadata?.namespace)
.map((job) => job.spec?.template.spec);
const cronJobsInNamespace = cronJobs
.filter(
(cronJob) => cronJob.metadata?.namespace === secret.metadata?.namespace
)
.map((cronJob) => cronJob.spec?.jobTemplate.spec?.template.spec);
const podsInNamespace = pods.filter(
(pod) => pod.namespace === secret.Namespace
);
const jobsInNamespace = jobs.filter(
(job) => job.namespace === secret.Namespace
);
const cronJobsInNamespace = cronJobs.filter(
(cronJob) => cronJob.namespace === secret.Namespace
);
const allPodSpecs = [
...podsInNamespace,
...jobsInNamespace,
@ -30,10 +30,10 @@ export function getIsSecretInUse(
// check if the secret is referenced by any pod, job or cronjob in the namespace
const isReferenced = allPodSpecs.some((podSpec) => {
if (!podSpec || !secret.metadata?.name) {
if (!podSpec || !secret.Name) {
return false;
}
return doesPodSpecReferenceSecret(podSpec, secret.metadata?.name);
return doesPodSpecReferenceSecret(podSpec, secret.Name);
});
return isReferenced;

52
app/react/kubernetes/configs/queries/query-keys.ts Normal file
View file

@ -0,0 +1,52 @@
import { EnvironmentId } from '@/react/portainer/environments/types';
import { ConfigMapQueryParams, SecretQueryParams } from './types';
export const configMapQueryKeys = {
configMap: (
environmentId: EnvironmentId,
namespace: string,
configMap: string
) => [
'environments',
environmentId,
'kubernetes',
'configmaps',
'namespaces',
namespace,
configMap,
],
configMaps: (environmentId: EnvironmentId, namespace?: string) => [
'environments',
environmentId,
'kubernetes',
'configmaps',
'namespaces',
namespace,
],
configMapsForCluster: (
environmentId: EnvironmentId,
params?: ConfigMapQueryParams
) =>
params
? ['environments', environmentId, 'kubernetes', 'configmaps', params]
: ['environments', environmentId, 'kubernetes', 'configmaps'],
};
export const secretQueryKeys = {
secrets: (environmentId: EnvironmentId, namespace?: string) => [
'environments',
environmentId,
'kubernetes',
'secrets',
'namespaces',
namespace,
],
secretsForCluster: (
environmentId: EnvironmentId,
params?: SecretQueryParams
) =>
params
? ['environments', environmentId, 'kubernetes', 'secrets', params]
: ['environments', environmentId, 'kubernetes', 'secrets'],
};

2
app/react/kubernetes/configs/queries/types.ts Normal file
View file

@ -0,0 +1,2 @@
export type ConfigMapQueryParams = { isUsed?: boolean };
export type SecretQueryParams = { isUsed?: boolean };

48
app/react/kubernetes/configs/queries/useConfigMap.ts Normal file
View file

@ -0,0 +1,48 @@
import { useQuery } from '@tanstack/react-query';
import { withGlobalError } from '@/react-tools/react-query';
import axios, { parseAxiosError } from '@/portainer/services/axios';
import { EnvironmentId } from '@/react/portainer/environments/types';
import { Configuration } from '../types';
import { configMapQueryKeys } from './query-keys';
import { ConfigMapQueryParams } from './types';
export function useConfigMap(
environmentId: EnvironmentId,
namespace: string,
configMap: string,
options?: { autoRefreshRate?: number } & ConfigMapQueryParams
) {
return useQuery(
configMapQueryKeys.configMap(environmentId, namespace, configMap),
() => getConfigMap(environmentId, namespace, configMap, { withData: true }),
{
...withGlobalError('Unable to retrieve ConfigMaps for cluster'),
refetchInterval() {
return options?.autoRefreshRate ?? false;
},
}
);
}
// get a configmap
async function getConfigMap(
environmentId: EnvironmentId,
namespace: string,
configMap: string,
params?: { withData?: boolean }
) {
try {
const { data } = await axios.get<Configuration[]>(
`/kubernetes/${environmentId}/namespaces/${namespace}/configmaps/${configMap}`,
{ params }
);
return data;
} catch (e) {
// use parseAxiosError instead of parseKubernetesAxiosError
// because this is an internal portainer api endpoint, not through the kube proxy
throw parseAxiosError(e, 'Unable to retrieve ConfigMaps');
}
}

41
app/react/kubernetes/configs/queries/useConfigMaps.ts Normal file
View file

@ -0,0 +1,41 @@
import { useQuery } from '@tanstack/react-query';
import { ConfigMap, ConfigMapList } from 'kubernetes-types/core/v1';
import axios from '@/portainer/services/axios';
import { EnvironmentId } from '@/react/portainer/environments/types';
import { withGlobalError } from '@/react-tools/react-query';
import { parseKubernetesAxiosError } from '../../axiosError';
import { configMapQueryKeys } from './query-keys';
// returns a usequery hook for the list of configmaps within a namespace from the kubernetes API
export function useConfigMaps(environmentId: EnvironmentId, namespace: string) {
return useQuery(
configMapQueryKeys.configMaps(environmentId, namespace),
() => (namespace ? getConfigMaps(environmentId, namespace) : []),
{
...withGlobalError(
`Unable to get ConfigMaps in namespace '${namespace}'`
),
enabled: !!namespace,
}
);
}
// get all configmaps for a namespace
async function getConfigMaps(environmentId: EnvironmentId, namespace?: string) {
try {
const { data } = await axios.get<ConfigMapList>(
`/endpoints/${environmentId}/kubernetes/api/v1/namespaces/${namespace}/configmaps`
);
// when fetching a list, the kind isn't appended to the items, so we need to add it
const configmaps: ConfigMap[] = data.items.map((configmap) => ({
...configmap,
kind: 'ConfigMap',
}));
return configmaps;
} catch (e) {
throw parseKubernetesAxiosError(e, 'Unable to retrieve ConfigMaps');
}
}

53
app/react/kubernetes/configs/queries/useConfigmapsForCluster.ts Normal file
View file

@ -0,0 +1,53 @@
import { useQuery } from '@tanstack/react-query';
import { withGlobalError } from '@/react-tools/react-query';
import axios, { parseAxiosError } from '@/portainer/services/axios';
import { EnvironmentId } from '@/react/portainer/environments/types';
import { Configuration } from '../types';
import { configMapQueryKeys } from './query-keys';
import { ConfigMapQueryParams } from './types';
export function useConfigMapsForCluster<TData = Configuration[]>(
environmentId: EnvironmentId,
options?: {
autoRefreshRate?: number;
select?: (data: Configuration[]) => TData;
} & ConfigMapQueryParams
) {
const { autoRefreshRate, select, ...params } = options ?? {};
return useQuery(
configMapQueryKeys.configMapsForCluster(environmentId, params),
() =>
getConfigMapsForCluster(environmentId, {
...params,
isUsed: params?.isUsed,
}),
{
...withGlobalError('Unable to retrieve ConfigMaps for cluster'),
refetchInterval() {
return options?.autoRefreshRate ?? false;
},
select,
}
);
}
// get all configmaps for a cluster
async function getConfigMapsForCluster(
environmentId: EnvironmentId,
params?: { withData?: boolean; isUsed?: boolean }
) {
try {
const { data } = await axios.get<Configuration[]>(
`/kubernetes/${environmentId}/configmaps`,
{ params }
);
return data;
} catch (e) {
// use parseAxiosError instead of parseKubernetesAxiosError
// because this is an internal portainer api endpoint, not through the kube proxy
throw parseAxiosError(e, 'Unable to retrieve ConfigMaps');
}
}

77
app/react/kubernetes/configs/queries/useDeleteConfigMaps.ts Normal file
View file

@ -0,0 +1,77 @@
import { useMutation } from '@tanstack/react-query';
import { queryClient, withGlobalError } from '@/react-tools/react-query';
import axios from '@/portainer/services/axios';
import { EnvironmentId } from '@/react/portainer/environments/types';
import {
error as notifyError,
notifySuccess,
} from '@/portainer/services/notifications';
import { isFulfilled, isRejected } from '@/portainer/helpers/promise-utils';
import { pluralize } from '@/portainer/helpers/strings';
import { parseKubernetesAxiosError } from '../../axiosError';
import { configMapQueryKeys } from './query-keys';
export function useDeleteConfigMaps(environmentId: EnvironmentId) {
return useMutation(
async (configMaps: { namespace: string; name: string }[]) => {
const promises = await Promise.allSettled(
configMaps.map(({ namespace, name }) =>
deleteConfigMap(environmentId, namespace, name)
)
);
const successfulConfigMaps = promises
.filter(isFulfilled)
.map((_, index) => configMaps[index].name);
const failedConfigMaps = promises
.filter(isRejected)
.map(({ reason }, index) => ({
name: configMaps[index].name,
reason,
}));
return { failedConfigMaps, successfulConfigMaps };
},
{
...withGlobalError('Unable to remove ConfigMaps'),
onSuccess: ({ failedConfigMaps, successfulConfigMaps }) => {
// Promise.allSettled can also resolve with errors, so check for errors here
// show an error message for each configmap that failed to delete
failedConfigMaps.forEach(({ name, reason }) => {
notifyError(
`Failed to remove ConfigMap '${name}'`,
new Error(reason.message) as Error
);
});
// show one summary message for all successful deletes
if (successfulConfigMaps.length) {
notifySuccess(
`${pluralize(
successfulConfigMaps.length,
'ConfigMap'
)} successfully removed`,
successfulConfigMaps.join(', ')
);
}
queryClient.invalidateQueries({
queryKey: configMapQueryKeys.configMapsForCluster(environmentId),
});
},
}
);
}
async function deleteConfigMap(
environmentId: EnvironmentId,
namespace: string,
name: string
) {
try {
await axios.delete(
`/endpoints/${environmentId}/kubernetes/api/v1/namespaces/${namespace}/configmaps/${name}`
);
} catch (e) {
throw parseKubernetesAxiosError(e, 'Unable to remove ConfigMap');
}
}

76
app/react/kubernetes/configs/queries/useDeleteSecrets.ts Normal file
View file

@ -0,0 +1,76 @@
import { useMutation } from '@tanstack/react-query';
import { queryClient, withGlobalError } from '@/react-tools/react-query';
import axios from '@/portainer/services/axios';
import { EnvironmentId } from '@/react/portainer/environments/types';
import {
error as notifyError,
notifySuccess,
} from '@/portainer/services/notifications';
import { isFulfilled, isRejected } from '@/portainer/helpers/promise-utils';
import { pluralize } from '@/portainer/helpers/strings';
import { parseKubernetesAxiosError } from '../../axiosError';
import { secretQueryKeys } from './query-keys';
export function useDeleteSecrets(environmentId: EnvironmentId) {
return useMutation(
async (secrets: { namespace: string; name: string }[]) => {
const promises = await Promise.allSettled(
secrets.map(({ namespace, name }) =>
deleteSecret(environmentId, namespace, name)
)
);
const successfulSecrets = promises
.filter(isFulfilled)
.map((_, index) => secrets[index].name);
const failedSecrets = promises
.filter(isRejected)
.map(({ reason }, index) => ({
name: secrets[index].name,
reason,
}));
return { failedSecrets, successfulSecrets };
},
{
...withGlobalError('Unable to remove secrets'),
onSuccess: ({ failedSecrets, successfulSecrets }) => {
// show an error message for each secret that failed to delete
failedSecrets.forEach(({ name, reason }) => {
notifyError(
`Failed to remove secret '${name}'`,
new Error(reason.message) as Error
);
});
// show one summary message for all successful deletes
if (successfulSecrets.length) {
notifySuccess(
`${pluralize(
successfulSecrets.length,
'Secret'
)} successfully removed`,
successfulSecrets.join(', ')
);
}
queryClient.invalidateQueries({
queryKey: secretQueryKeys.secretsForCluster(environmentId),
});
},
}
);
}
async function deleteSecret(
environmentId: EnvironmentId,
namespace: string,
name: string
) {
try {
await axios.delete(
`/endpoints/${environmentId}/kubernetes/api/v1/namespaces/${namespace}/secrets/${name}`
);
} catch (e) {
throw parseKubernetesAxiosError(e, 'Unable to remove secret');
}
}

39
app/react/kubernetes/configs/queries/useSecrets.ts Normal file
View file

@ -0,0 +1,39 @@
import { useQuery } from '@tanstack/react-query';
import { Secret, SecretList } from 'kubernetes-types/core/v1';
import { withGlobalError } from '@/react-tools/react-query';
import axios from '@/portainer/services/axios';
import { EnvironmentId } from '@/react/portainer/environments/types';
import { parseKubernetesAxiosError } from '../../axiosError';
import { secretQueryKeys } from './query-keys';
// returns a usequery hook for the list of secrets from the kubernetes API
export function useSecrets(environmentId: EnvironmentId, namespace?: string) {
return useQuery(
secretQueryKeys.secrets(environmentId, namespace),
() => (namespace ? getSecrets(environmentId, namespace) : []),
{
...withGlobalError(`Unable to get secrets in namespace '${namespace}'`),
enabled: !!namespace,
}
);
}
// get all secrets for a namespace
async function getSecrets(environmentId: EnvironmentId, namespace: string) {
try {
const { data } = await axios.get<SecretList>(
`/endpoints/${environmentId}/kubernetes/api/v1/namespaces/${namespace}/secrets`
);
// when fetching a list, the kind isn't appended to the items, so we need to add it
const secrets: Secret[] = data.items.map((secret) => ({
...secret,
kind: 'Secret',
}));
return secrets;
} catch (e) {
throw parseKubernetesAxiosError(e, 'Unable to retrieve secrets');
}
}

59
app/react/kubernetes/configs/queries/useSecretsForCluster.ts Normal file
View file

@ -0,0 +1,59 @@
import { useQuery } from '@tanstack/react-query';
import { withGlobalError } from '@/react-tools/react-query';
import axios, { parseAxiosError } from '@/portainer/services/axios';
import { EnvironmentId } from '@/react/portainer/environments/types';
import { Configuration } from '../types';
import { SecretQueryParams } from './types';
import { secretQueryKeys } from './query-keys';
export function useSecretsForCluster<TData = Configuration[]>(
environmentId: EnvironmentId,
options?: {
autoRefreshRate?: number;
select?: (data: Configuration[]) => TData;
} & SecretQueryParams
) {
const { autoRefreshRate, select, ...params } = options ?? {};
return useQuery(
secretQueryKeys.secretsForCluster(environmentId, params),
() =>
getSecretsForCluster(environmentId, {
...params,
isUsed: params?.isUsed,
}),
{
...withGlobalError('Unable to retrieve secrets for cluster'),
refetchInterval() {
return options?.autoRefreshRate ?? false;
},
select,
}
);
}
async function getSecretsForCluster(
environmentId: EnvironmentId,
params?: { withData?: boolean; isUsed?: boolean }
) {
const secrets = await getSecrets(environmentId, params);
return secrets;
}
// get all secrets for a cluster
async function getSecrets(
environmentId: EnvironmentId,
params?: { withData?: boolean; isUsed?: boolean } | undefined
) {
try {
const { data } = await axios.get<Configuration[]>(
`/kubernetes/${environmentId}/secrets`,
{ params }
);
return data;
} catch (e) {
throw parseAxiosError(e, 'Unable to retrieve secrets');
}
}

36
app/react/kubernetes/configs/service.ts
View file

@ -1,36 +0,0 @@
import axios, { parseAxiosError } from '@/portainer/services/axios';
import { EnvironmentId } from '@/react/portainer/environments/types';
import { Configuration } from './types';
// returns the formatted list of configmaps and secrets
export async function getConfigurations(
environmentId: EnvironmentId,
namespace: string
) {
try {
const { data: configmaps } = await axios.get<Configuration[]>(
`kubernetes/${environmentId}/namespaces/${namespace}/configuration`
);
return configmaps;
} catch (e) {
throw parseAxiosError(e as Error, 'Unable to retrieve configmaps');
}
}
export async function getConfigMapsForCluster(
environmentId: EnvironmentId,
namespaces: string[]
) {
try {
const configmaps = await Promise.all(
namespaces.map((namespace) => getConfigurations(environmentId, namespace))
);
return configmaps.flat();
} catch (e) {
throw parseAxiosError(
e as Error,
'Unable to retrieve ConfigMaps for cluster'
);
}
}

12
app/react/kubernetes/configs/types.ts
View file

@ -1,18 +1,20 @@
export interface Configuration {
Id: string;
UID: string;
Name: string;
Type: number;
Namespace: string;
CreationDate: Date;
CreationDate?: string;
ConfigurationOwner: string;
ConfigurationOwner: string; // username
ConfigurationOwnerId: string; // user id
Used: boolean;
Data: Document;
IsUsed: boolean;
Data?: Record<string, string>;
Yaml: string;
SecretType?: string;
IsRegistrySecret?: boolean;
IsSecret?: boolean;
}
// Workaround for the TS error `Type 'ConfigMap' does not satisfy the constraint 'Record<string, unknown>'` for the datatable

55
app/react/kubernetes/dashboard/DashboardView.tsx
View file

@ -9,14 +9,35 @@ import { DashboardItem } from '@@/DashboardItem/DashboardItem';
import { PageHeader } from '@@/PageHeader';
import { EnvironmentInfo } from './EnvironmentInfo';
import { useGetDashboardQuery } from './queries/getDashboardQuery';
import { useGetApplicationsCountQuery } from './queries/getApplicationsCountQuery';
import { useGetConfigMapsCountQuery } from './queries/getConfigMapsCountQuery';
import { useGetIngressesCountQuery } from './queries/getIngressesCountQuery';
import { useGetSecretsCountQuery } from './queries/getSecretsCountQuery';
import { useGetServicesCountQuery } from './queries/getServicesCountQuery';
import { useGetVolumesCountQuery } from './queries/getVolumesCountQuery';
import { useGetNamespacesCountQuery } from './queries/getNamespacesCountQuery';
export function DashboardView() {
const queryClient = useQueryClient();
const environmentId = useEnvironmentId();
const dashboardQuery = useGetDashboardQuery(environmentId);
const dashboard = dashboardQuery.data;
const applicationsCountQuery = useGetApplicationsCountQuery(environmentId);
const configMapsCountQuery = useGetConfigMapsCountQuery(environmentId);
const ingressesCountQuery = useGetIngressesCountQuery(environmentId);
const secretsCountQuery = useGetSecretsCountQuery(environmentId);
const servicesCountQuery = useGetServicesCountQuery(environmentId);
const volumesCountQuery = useGetVolumesCountQuery(environmentId);
const namespacesCountQuery = useGetNamespacesCountQuery(environmentId);
const dashboard = {
applicationsCount: applicationsCountQuery.data,
configMapsCount: configMapsCountQuery.data,
ingressesCount: ingressesCountQuery.data,
secretsCount: secretsCountQuery.data,
servicesCount: servicesCountQuery.data,
volumesCount: volumesCountQuery.data,
namespacesCount: namespacesCountQuery.data,
};
return (
<>
@ -33,8 +54,8 @@ export function DashboardView() {
<DashboardGrid>
<DashboardItem
value={dashboard?.namespacesCount}
isLoading={dashboardQuery.isLoading}
isRefetching={dashboardQuery.isRefetching}
isLoading={namespacesCountQuery.isInitialLoading}
isRefetching={namespacesCountQuery.isRefetching}
icon={Layers}
to="kubernetes.resourcePools"
type="Namespace"
@ -42,8 +63,8 @@ export function DashboardView() {
/>
<DashboardItem
value={dashboard?.applicationsCount}
isLoading={dashboardQuery.isLoading}
isRefetching={dashboardQuery.isLoading}
isLoading={applicationsCountQuery.isInitialLoading}
isRefetching={applicationsCountQuery.isRefetching}
icon={Box}
to="kubernetes.applications"
type="Application"
@ -51,8 +72,8 @@ export function DashboardView() {
/>
<DashboardItem
value={dashboard?.servicesCount}
isLoading={dashboardQuery.isLoading}
isRefetching={dashboardQuery.isLoading}
isLoading={servicesCountQuery.isInitialLoading}
isRefetching={servicesCountQuery.isRefetching}
icon={Shuffle}
to="kubernetes.services"
type="Service"
@ -60,8 +81,8 @@ export function DashboardView() {
/>
<DashboardItem
value={dashboard?.ingressesCount}
isLoading={dashboardQuery.isLoading}
isRefetching={dashboardQuery.isLoading}
isLoading={ingressesCountQuery.isInitialLoading}
isRefetching={ingressesCountQuery.isRefetching}
icon={Route}
to="kubernetes.ingresses"
type="Ingress"
@ -70,8 +91,8 @@ export function DashboardView() {
/>
<DashboardItem
value={dashboard?.configMapsCount}
isLoading={dashboardQuery.isLoading}
isRefetching={dashboardQuery.isLoading}
isLoading={configMapsCountQuery.isInitialLoading}
isRefetching={configMapsCountQuery.isRefetching}
icon={FileCode}
to="kubernetes.configurations"
params={{ tab: 'configmaps' }}
@ -80,8 +101,8 @@ export function DashboardView() {
/>
<DashboardItem
value={dashboard?.secretsCount}
isLoading={dashboardQuery.isLoading}
isRefetching={dashboardQuery.isLoading}
isLoading={secretsCountQuery.isInitialLoading}
isRefetching={secretsCountQuery.isRefetching}
icon={Lock}
to="kubernetes.configurations"
params={{ tab: 'secrets' }}
@ -90,8 +111,8 @@ export function DashboardView() {
/>
<DashboardItem
value={dashboard?.volumesCount}
isLoading={dashboardQuery.isLoading}
isRefetching={dashboardQuery.isLoading}
isLoading={volumesCountQuery.isInitialLoading}
isRefetching={volumesCountQuery.isRefetching}
icon={Database}
to="kubernetes.volumes"
type="Volume"

41
app/react/kubernetes/dashboard/queries/getApplicationsCountQuery.ts Normal file
View file

@ -0,0 +1,41 @@
import { useQuery } from '@tanstack/react-query';
import { withError } from '@/react-tools/react-query';
import axios, { parseAxiosError } from '@/portainer/services/axios';
import { EnvironmentId } from '@/react/portainer/environments/types';
const queryKeys = {
list: (environmentId: EnvironmentId) =>
['environments', environmentId, 'dashboard', 'applicationsCount'] as const,
};
export function useGetApplicationsCountQuery(
environmentId: EnvironmentId,
options?: { autoRefreshRate?: number }
) {
return useQuery(
queryKeys.list(environmentId),
async () => getApplicationsCount(environmentId),
{
...withError('Unable to get applications count'),
refetchInterval() {
return options?.autoRefreshRate ?? false;
},
}
);
}
async function getApplicationsCount(environmentId: EnvironmentId) {
try {
const { data: applicationsCount } = await axios.get<number>(
`kubernetes/${environmentId}/applications/count`
);
return applicationsCount;
} catch (e) {
throw parseAxiosError(
e,
'Unable to get dashboard stats. Some counts may be inaccurate.'
);
}
}

41
app/react/kubernetes/dashboard/queries/getConfigMapsCountQuery.ts Normal file
View file

@ -0,0 +1,41 @@
import { useQuery } from '@tanstack/react-query';
import { withError } from '@/react-tools/react-query';
import axios, { parseAxiosError } from '@/portainer/services/axios';
import { EnvironmentId } from '@/react/portainer/environments/types';
const queryKeys = {
list: (environmentId: EnvironmentId) =>
['environments', environmentId, 'dashboard', 'configMapsCount'] as const,
};
export function useGetConfigMapsCountQuery(
environmentId: EnvironmentId,
options?: { autoRefreshRate?: number }
) {
return useQuery(
queryKeys.list(environmentId),
async () => getConfigMapsCount(environmentId),
{
...withError('Unable to get applications count'),
refetchInterval() {
return options?.autoRefreshRate ?? false;
},
}
);
}
async function getConfigMapsCount(environmentId: EnvironmentId) {
try {
const { data: configMapsCount } = await axios.get<number>(
`kubernetes/${environmentId}/configmaps/count`
);
return configMapsCount;
} catch (e) {
throw parseAxiosError(
e,
'Unable to get dashboard stats. Some counts may be inaccurate.'
);
}
}

18
app/react/kubernetes/dashboard/queries/getDashboardQuery.ts → app/react/kubernetes/dashboard/queries/getIngressesCountQuery.ts
View file

@ -4,22 +4,20 @@ import { withError } from '@/react-tools/react-query';
import axios, { parseAxiosError } from '@/portainer/services/axios';
import { EnvironmentId } from '@/react/portainer/environments/types';
import { K8sDashboard } from '../types';
const queryKeys = {
list: (environmentId: EnvironmentId) =>
['environments', environmentId, 'dashboard'] as const,
['environments', environmentId, 'dashboard', 'ingressesCount'] as const,
};
export function useGetDashboardQuery(
export function useGetIngressesCountQuery(
environmentId: EnvironmentId,
options?: { autoRefreshRate?: number }
) {
return useQuery(
queryKeys.list(environmentId),
async () => getDashboard(environmentId),
async () => getIngressesCount(environmentId),
{
...withError('Unable to get dashboard stats'),
...withError('Unable to get ingresses count'),
refetchInterval() {
return options?.autoRefreshRate ?? false;
},
@ -27,13 +25,13 @@ export function useGetDashboardQuery(
);
}
async function getDashboard(environmentId: EnvironmentId) {
async function getIngressesCount(environmentId: EnvironmentId) {
try {
const { data: dashboard } = await axios.get<K8sDashboard>(
`kubernetes/${environmentId}/dashboard`
const { data: ingressesCount } = await axios.get<number>(
`kubernetes/${environmentId}/ingresses/count`
);
return dashboard;
return ingressesCount;
} catch (e) {
throw parseAxiosError(
e,

41
app/react/kubernetes/dashboard/queries/getNamespacesCountQuery.ts Normal file
View file

@ -0,0 +1,41 @@
import { useQuery } from '@tanstack/react-query';
import { withError } from '@/react-tools/react-query';
import axios, { parseAxiosError } from '@/portainer/services/axios';
import { EnvironmentId } from '@/react/portainer/environments/types';
const queryKeys = {
list: (environmentId: EnvironmentId) =>
['environments', environmentId, 'dashboard', 'namespacesCount'] as const,
};
export function useGetNamespacesCountQuery(
environmentId: EnvironmentId,
options?: { autoRefreshRate?: number }
) {
return useQuery(
queryKeys.list(environmentId),
async () => getNamespacesCount(environmentId),
{
...withError('Unable to get namespaces count'),
refetchInterval() {
return options?.autoRefreshRate ?? false;
},
}
);
}
async function getNamespacesCount(environmentId: EnvironmentId) {
try {
const { data: namespacesCount } = await axios.get<number>(
`kubernetes/${environmentId}/namespaces/count`
);
return namespacesCount;
} catch (e) {
throw parseAxiosError(
e,
'Unable to get dashboard stats. Some counts may be inaccurate.'
);
}
}

41
app/react/kubernetes/dashboard/queries/getSecretsCountQuery.ts Normal file
View file

@ -0,0 +1,41 @@
import { useQuery } from '@tanstack/react-query';
import { withError } from '@/react-tools/react-query';
import axios, { parseAxiosError } from '@/portainer/services/axios';
import { EnvironmentId } from '@/react/portainer/environments/types';
const queryKeys = {
list: (environmentId: EnvironmentId) =>
['environments', environmentId, 'dashboard', 'secretsCount'] as const,
};
export function useGetSecretsCountQuery(
environmentId: EnvironmentId,
options?: { autoRefreshRate?: number }
) {
return useQuery(
queryKeys.list(environmentId),
async () => getSecretsCount(environmentId),
{
...withError('Unable to get secrets count'),
refetchInterval() {
return options?.autoRefreshRate ?? false;
},
}
);
}
async function getSecretsCount(environmentId: EnvironmentId) {
try {
const { data: secretsCount } = await axios.get<number>(
`kubernetes/${environmentId}/secrets/count`
);
return secretsCount;
} catch (e) {
throw parseAxiosError(
e,
'Unable to get dashboard stats. Some counts may be inaccurate.'
);
}
}

41
app/react/kubernetes/dashboard/queries/getServicesCountQuery.ts Normal file
View file

@ -0,0 +1,41 @@
import { useQuery } from '@tanstack/react-query';
import { withError } from '@/react-tools/react-query';
import axios, { parseAxiosError } from '@/portainer/services/axios';
import { EnvironmentId } from '@/react/portainer/environments/types';
const queryKeys = {
list: (environmentId: EnvironmentId) =>
['environments', environmentId, 'dashboard', 'servicesCount'] as const,
};
export function useGetServicesCountQuery(
environmentId: EnvironmentId,
options?: { autoRefreshRate?: number }
) {
return useQuery(
queryKeys.list(environmentId),
async () => getServicesCount(environmentId),
{
...withError('Unable to get services count'),
refetchInterval() {
return options?.autoRefreshRate ?? false;
},
}
);
}
async function getServicesCount(environmentId: EnvironmentId) {
try {
const { data: servicesCount } = await axios.get<number>(
`kubernetes/${environmentId}/services/count`
);
return servicesCount;
} catch (e) {
throw parseAxiosError(
e,
'Unable to get dashboard stats. Some counts may be inaccurate.'
);
}
}

41
app/react/kubernetes/dashboard/queries/getVolumesCountQuery.ts Normal file
View file

@ -0,0 +1,41 @@
import { useQuery } from '@tanstack/react-query';
import { withError } from '@/react-tools/react-query';
import axios, { parseAxiosError } from '@/portainer/services/axios';
import { EnvironmentId } from '@/react/portainer/environments/types';
const queryKeys = {
list: (environmentId: EnvironmentId) =>
['environments', environmentId, 'dashboard', 'volumesCount'] as const,
};
export function useGetVolumesCountQuery(
environmentId: EnvironmentId,
options?: { autoRefreshRate?: number }
) {
return useQuery(
queryKeys.list(environmentId),
async () => getVolumesCount(environmentId),
{
...withError('Unable to get volumes count'),
refetchInterval() {
return options?.autoRefreshRate ?? false;
},
}
);
}
async function getVolumesCount(environmentId: EnvironmentId) {
try {
const { data: volumesCount } = await axios.get<number>(
`kubernetes/${environmentId}/volumes/count`
);
return volumesCount;
} catch (e) {
throw parseAxiosError(
e,
'Unable to get dashboard stats. Some counts may be inaccurate.'
);
}
}

21
app/react/kubernetes/ingresses/CreateIngressView/CreateIngressView.tsx
View file

@ -71,10 +71,7 @@ export function CreateIngressView() {
const { data: allServices } = useNamespaceServices(environmentId, namespace);
const secretsResults = useSecrets(environmentId, namespace);
const ingressesResults = useIngresses(
environmentId,
namespaces ? Object.keys(namespaces || {}) : []
);
const ingressesResults = useIngresses(environmentId);
const { data: ingressControllers, ...ingressControllersQuery } =
useIngressControllers(environmentId, namespace);
@ -90,7 +87,7 @@ export function CreateIngressView() {
] => {
const ruleCounterByNamespace: Record<string, number> = {};
const hostWithTLS: Record<string, string> = {};
ingressesResults.data?.forEach((ingress) => {
ingressesResults.data?.forEach((ingress: Ingress) => {
ingress.TLS?.forEach((tls) => {
tls.Hosts.forEach((host) => {
hostWithTLS[host] = tls.SecretName;
@ -98,7 +95,7 @@ export function CreateIngressView() {
});
});
const ingressNames: string[] = [];
ingressesResults.data?.forEach((ing) => {
ingressesResults.data?.forEach((ing: Ingress) => {
ruleCounterByNamespace[ing.Namespace] =
ruleCounterByNamespace[ing.Namespace] || 0;
const n = ing.Name.match(/^(.*)-(\d+)$/);
@ -123,10 +120,10 @@ export function CreateIngressView() {
const namespaceOptions = useMemo(
() =>
Object.entries(namespaces || {})
.filter(([, nsValue]) => !nsValue.IsSystem)
.map(([nsKey]) => ({
label: nsKey,
value: nsKey,
.filter(([, ns]) => !ns.IsSystem)
.map(([, ns]) => ({
label: ns.Name,
value: ns.Name,
})),
[namespaces]
);
@ -170,10 +167,10 @@ export function CreateIngressView() {
? Object.fromEntries(
allServices?.map((service) => [
service.Name,
service.Ports.map((port) => ({
service.Ports?.map((port) => ({
label: String(port.Port),
value: String(port.Port),
})),
})) ?? [],
])
)
: {},

81
app/react/kubernetes/ingresses/IngressDatatable/IngressDatatable.tsx
View file

@ -4,27 +4,20 @@ import { useMemo } from 'react';
import { useEnvironmentId } from '@/react/hooks/useEnvironmentId';
import { useAuthorizations, Authorized } from '@/react/hooks/useUser';
import Route from '@/assets/ico/route.svg?c';
import {
DefaultDatatableSettings,
TableSettings as KubeTableSettings,
} from '@/react/kubernetes/datatables/DefaultDatatableSettings';
import { useKubeStore } from '@/react/kubernetes/datatables/default-kube-datatable-store';
import { useIsDeploymentOptionHidden } from '@/react/hooks/useIsDeploymentOptionHidden';
import { DefaultDatatableSettings } from '@/react/kubernetes/datatables/DefaultDatatableSettings';
import { createStore } from '@/react/kubernetes/datatables/default-kube-datatable-store';
import { SystemResourceDescription } from '@/react/kubernetes/datatables/SystemResourceDescription';
import { Datatable, TableSettingsMenu } from '@@/datatables';
import { AddButton } from '@@/buttons';
import { useTableState } from '@@/datatables/useTableState';
import { DeleteButton } from '@@/buttons/DeleteButton';
import {
type FilteredColumnsTableSettings,
filteredColumnsSettings,
} from '@@/datatables/types';
import { mergeOptions } from '@@/datatables/extend-options/mergeOptions';
import { withColumnFilters } from '@@/datatables/extend-options/withColumnFilters';
import { DeleteIngressesRequest, Ingress } from '../types';
import { useDeleteIngresses, useIngresses } from '../queries';
import { useNamespacesQuery } from '../../namespaces/queries/useNamespacesQuery';
import { Namespaces } from '../../namespaces/types';
import { Namespaces, PortainerNamespace } from '../../namespaces/types';
import { CreateFromManifestButton } from '../../components/CreateFromManifestButton';
import { columns } from './columns';
@ -37,48 +30,48 @@ interface SelectedIngress {
}
const storageKey = 'ingressClassesNameSpace';
interface TableSettings
extends KubeTableSettings,
FilteredColumnsTableSettings {}
const settingsStore = createStore(storageKey, 'name');
export function IngressDatatable() {
const tableState = useKubeStore<TableSettings>(
storageKey,
undefined,
(set) => ({
...filteredColumnsSettings(set),
})
);
const tableState = useTableState(settingsStore, storageKey);
const environmentId = useEnvironmentId();
const { authorized: canAccessSystemResources } = useAuthorizations(
'K8sAccessSystemNamespaces'
);
const { data: namespaces, ...namespacesQuery } =
useNamespacesQuery(environmentId);
const { data: ingresses, ...ingressesQuery } = useIngresses(
environmentId,
Object.keys(namespaces || {}),
{
autoRefreshRate: tableState.autoRefreshRate * 1000,
}
);
const namespacesQuery = useNamespacesQuery(environmentId);
const { data: ingresses, ...ingressesQuery } = useIngresses(environmentId, {
autoRefreshRate: tableState.autoRefreshRate * 1000,
withServices: true,
});
const namespacesMap = useMemo(() => {
const namespacesMap = namespacesQuery.data?.reduce<
Record<string, PortainerNamespace>
>((acc, namespace) => {
acc[namespace.Name] = namespace;
return acc;
}, {});
return namespacesMap ?? {};
}, [namespacesQuery.data]);
const filteredIngresses = useMemo(
() =>
ingresses?.filter(
(ingress) =>
(canAccessSystemResources && tableState.showSystemResources) ||
!namespaces?.[ingress.Namespace].IsSystem
!namespacesMap?.[ingress.Namespace].IsSystem
) || [],
[ingresses, tableState, canAccessSystemResources, namespaces]
[ingresses, tableState, canAccessSystemResources, namespacesMap]
);
const ingressesWithIsSystem = useIngressesRowData(
filteredIngresses || [],
namespaces
namespacesMap
);
const isAddIngressHidden = useIsDeploymentOptionHidden('form');
const deleteIngressesMutation = useDeleteIngresses();
const router = useRouter();
@ -89,10 +82,13 @@ export function IngressDatatable() {
dataset={ingressesWithIsSystem}
columns={columns}
isLoading={ingressesQuery.isLoading || namespacesQuery.isLoading}
emptyContentLabel="No supported ingresses found"
title="Ingresses"
titleIcon={Route}
getRowId={(row) => row.Name + row.Type + row.Namespace}
isRowSelectable={(row) => !namespaces?.[row.original.Namespace].IsSystem}
isRowSelectable={(row) =>
!namespacesMap?.[row.original.Namespace].IsSystem
}
renderTableActions={tableActions}
renderTableSettings={() => (
<TableSettingsMenu>
@ -106,9 +102,6 @@ export function IngressDatatable() {
}
disableSelect={useCheckboxes()}
data-cy="k8s-ingresses-datatable"
extendTableOptions={mergeOptions(
withColumnFilters(tableState.columnFilters, tableState.setColumnFilters)
)}
/>
);
@ -137,9 +130,15 @@ export function IngressDatatable() {
data-cy="remove-ingresses-button"
/>
<AddButton to=".create" color="secondary" data-cy="add-ingress-button">
Add with form
</AddButton>
{!isAddIngressHidden && (
<AddButton
to=".create"
color="secondary"
data-cy="add-ingress-button"
>
Add with form
</AddButton>
)}
<CreateFromManifestButton data-cy="k8s-ingress-deploy-button" />
</Authorized>

132
app/react/kubernetes/ingresses/queries.ts
View file

@ -3,11 +3,9 @@ import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
import { EnvironmentId } from '@/react/portainer/environments/types';
import {
mutationOptions,
withError,
withGlobalError,
withInvalidate,
} from '@/react-tools/react-query';
import { getServices } from '@/react/kubernetes/networks/services/service';
import { isFulfilled } from '@/portainer/helpers/promise-utils';
import {
getIngresses,
@ -19,13 +17,23 @@ import {
} from './service';
import { DeleteIngressesRequest, Ingress } from './types';
const ingressKeys = {
all: ['environments', 'kubernetes', 'namespace', 'ingress'] as const,
namespace: (
const queryKeys = {
base: ['environments', 'kubernetes', 'ingress'] as const,
clusterIngresses: (environmentId: EnvironmentId) =>
[...queryKeys.base, String(environmentId)] as const,
namespaceIngresses: (
environmentId: EnvironmentId,
namespace: string,
ingress: string
) => [...ingressKeys.all, String(environmentId), namespace, ingress] as const,
) => [...queryKeys.base, String(environmentId), namespace, ingress] as const,
ingress: (environmentId: EnvironmentId, namespace: string, name: string) =>
[...queryKeys.base, String(environmentId), namespace, name] as const,
ingressControllers: (environmentId: EnvironmentId, namespace: string) => [
...queryKeys.base,
String(environmentId),
namespace,
'ingresscontrollers',
],
};
export function useIngress(
@ -34,93 +42,34 @@ export function useIngress(
name: string
) {
return useQuery(
[
'environments',
environmentId,
'kubernetes',
'namespace',
namespace,
'ingress',
name,
],
queryKeys.ingress(environmentId, namespace, name),
async () => {
const ing = await getIngress(environmentId, namespace, name);
return ing;
},
{
...withError('Unable to get ingress'),
...withGlobalError('Unable to get ingress'),
}
);
}
export function useIngresses(
environmentId: EnvironmentId,
namespaces?: string[],
options?: { autoRefreshRate?: number }
options?: {
autoRefreshRate?: number;
enabled?: boolean;
withServices?: boolean;
}
) {
const { enabled, autoRefreshRate, ...params } = options ?? {};
return useQuery(
[
'environments',
environmentId,
'kubernetes',
'namespace',
namespaces,
'ingress',
],
async () => {
if (!namespaces?.length) {
return [];
}
const settledIngressesPromise = await Promise.allSettled(
namespaces.map((namespace) => getIngresses(environmentId, namespace))
);
const ingresses = settledIngressesPromise
.filter(isFulfilled)
?.map((i) => i.value);
// flatten the array and remove empty ingresses
const filteredIngresses = ingresses.flat().filter((ing) => ing);
// get all services in only the namespaces that the ingresses are in to find missing services
const uniqueNamespacesWithIngress = [
...new Set(filteredIngresses.map((ing) => ing?.Namespace)),
];
const settledServicesPromise = await Promise.allSettled(
uniqueNamespacesWithIngress.map((ns) => getServices(environmentId, ns))
);
const services = settledServicesPromise
.filter(isFulfilled)
?.map((s) => s.value)
.flat();
// check if each ingress path service has a service that still exists
const updatedFilteredIngresses: Ingress[] = filteredIngresses.map(
(ing) => {
const servicesInNamespace = services?.filter(
(service) => service?.Namespace === ing?.Namespace
);
const serviceNamesInNamespace = servicesInNamespace?.map(
(service) => service.Name
);
const updatedPaths =
ing.Paths?.map((path) => {
const hasService = serviceNamesInNamespace?.includes(
path.ServiceName
);
return { ...path, HasService: hasService };
}) || null;
return { ...ing, Paths: updatedPaths };
}
);
return updatedFilteredIngresses;
},
['environments', environmentId, 'kubernetes', 'ingress', params],
async () => getIngresses(environmentId, params),
{
enabled: !!namespaces?.length,
...withError('Unable to get ingresses'),
refetchInterval() {
return options?.autoRefreshRate ?? false;
},
...withGlobalError('Unable to get ingresses'),
refetchInterval: autoRefreshRate,
enabled,
}
);
}
@ -136,8 +85,8 @@ export function useCreateIngress() {
ingress: Ingress;
}) => createIngress(environmentId, ingress),
mutationOptions(
withError('Unable to create ingress controller'),
withInvalidate(queryClient, [ingressKeys.all])
withGlobalError('Unable to create ingress controller'),
withInvalidate(queryClient, [queryKeys.base])
)
);
}
@ -153,8 +102,8 @@ export function useUpdateIngress() {
ingress: Ingress;
}) => updateIngress(environmentId, ingress),
mutationOptions(
withError('Unable to update ingress controller'),
withInvalidate(queryClient, [ingressKeys.all])
withGlobalError('Unable to update ingress controller'),
withInvalidate(queryClient, [queryKeys.base])
)
);
}
@ -170,8 +119,8 @@ export function useDeleteIngresses() {
data: DeleteIngressesRequest;
}) => deleteIngresses(environmentId, data),
mutationOptions(
withError('Unable to update ingress controller'),
withInvalidate(queryClient, [ingressKeys.all])
withGlobalError('Unable to update ingress controller'),
withInvalidate(queryClient, [queryKeys.base])
)
);
}
@ -185,21 +134,14 @@ export function useIngressControllers(
allowedOnly?: boolean
) {
return useQuery(
[
'environments',
environmentId,
'kubernetes',
'namespace',
namespace,
'ingresscontrollers',
],
queryKeys.ingressControllers(environmentId, namespace ?? ''),
async () =>
namespace
? getIngressControllers(environmentId, namespace, allowedOnly)
: [],
{
enabled: !!namespace,
...withError('Unable to get ingress controllers'),
...withGlobalError('Unable to get ingress controllers'),
}
);
}

5
app/react/kubernetes/ingresses/service.ts
View file

@ -20,11 +20,12 @@ export async function getIngress(
export async function getIngresses(
environmentId: EnvironmentId,
namespace: string
params?: { withServices?: boolean }
) {
try {
const { data: ingresses } = await axios.get<Ingress[]>(
buildUrl(environmentId, namespace)
`kubernetes/${environmentId}/ingresses`,
{ params }
);
return ingresses;
} catch (e) {

84
app/react/kubernetes/metrics/metrics.ts Normal file
View file

@ -0,0 +1,84 @@
import axios, { parseAxiosError } from '@/portainer/services/axios';
import { EnvironmentId } from '@/react/portainer/environments/types';
import {
NodeMetrics,
NodeMetric,
ApplicationResource,
} from '@/react/kubernetes/metrics/types';
export async function getMetricsForAllNodes(environmentId: EnvironmentId) {
try {
const { data: nodes } = await axios.get<NodeMetrics>(
`kubernetes/${environmentId}/metrics/nodes`
);
return nodes;
} catch (e) {
throw parseAxiosError(e, 'Unable to retrieve metrics for all nodes');
}
}
export async function getMetricsForNode(
environmentId: EnvironmentId,
nodeName: string
) {
try {
const { data: node } = await axios.get<NodeMetric>(
`kubernetes/${environmentId}/metrics/nodes/${nodeName}`
);
return node;
} catch (e) {
throw parseAxiosError(e, 'Unable to retrieve metrics for node');
}
}
export async function getMetricsForAllPods(
environmentId: EnvironmentId,
namespace: string
) {
try {
const { data: pods } = await axios.get(
`kubernetes/${environmentId}/metrics/pods/namespace/${namespace}`
);
return pods;
} catch (e) {
throw parseAxiosError(e, 'Unable to retrieve metrics for all pods');
}
}
export async function getMetricsForPod(
environmentId: EnvironmentId,
namespace: string,
podName: string
) {
try {
const { data: pod } = await axios.get(
`kubernetes/${environmentId}/metrics/pods/namespace/${namespace}/${podName}`
);
return pod;
} catch (e) {
throw parseAxiosError(e, 'Unable to retrieve metrics for pod');
}
}
export async function getTotalResourcesForAllApplications(
environmentId: EnvironmentId,
nodeName?: string
) {
try {
const { data: resources } = await axios.get<ApplicationResource>(
`kubernetes/${environmentId}/metrics/applications_resources`,
{
params: {
node: nodeName,
},
}
);
return resources;
} catch (e) {
throw parseAxiosError(
e,
'Unable to retrieve total resources for all applications'
);
}
}

27
app/react/kubernetes/metrics/types.ts Normal file
View file

@ -0,0 +1,27 @@
export type NodeMetrics = {
items: NodeMetric[];
};
export type NodeMetric = {
metadata: NodeMetricMetadata;
timestamp: Date;
usage: Usage;
window: string;
};
export type NodeMetricMetadata = {
creationTimestamp: Date;
name: string;
};
export type Usage = {
cpu: string;
memory: string;
};
export type ApplicationResource = {
cpuRequest: number;
cpuLimit: number;
memoryRequest: number;
memoryLimit: number;
};

Some files were not shown because too many files have changed in this diff Show more