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

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

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

173
app/react/kubernetes/more-resources/ClusterRolesView/ClusterRoleBindingsDatatable/ClusterRoleBindingsDatatable.tsx Normal file
View file

@ -0,0 +1,173 @@
import { Trash2, Link as LinkIcon } from 'lucide-react';
import { useRouter } from '@uirouter/react';
import { Row } from '@tanstack/react-table';
import clsx from 'clsx';
import { useMemo } from 'react';
import { useEnvironmentId } from '@/react/hooks/useEnvironmentId';
import { useAuthorizations, Authorized } from '@/react/hooks/useUser';
import { notifyError, notifySuccess } from '@/portainer/services/notifications';
import { SystemResourceDescription } from '@/react/kubernetes/datatables/SystemResourceDescription';
import { createStore } from '@/react/kubernetes/datatables/default-kube-datatable-store';
import { CreateFromManifestButton } from '@/react/kubernetes/components/CreateFromManifestButton';
import { confirmDelete } from '@@/modals/confirm';
import { Datatable, Table, TableSettingsMenu } from '@@/datatables';
import { LoadingButton } from '@@/buttons';
import { useTableState } from '@@/datatables/useTableState';
import { DefaultDatatableSettings } from '../../../datatables/DefaultDatatableSettings';
import { ClusterRoleBinding } from './types';
import { columns } from './columns';
import { useGetClusterRoleBindingsQuery } from './queries/useGetClusterRoleBindingsQuery';
import { useDeleteClusterRoleBindingsMutation } from './queries/useDeleteClusterRoleBindingsMutation';
const storageKey = 'clusterRoleBindings';
const settingsStore = createStore(storageKey);
export function ClusterRoleBindingsDatatable() {
const environmentId = useEnvironmentId();
const tableState = useTableState(settingsStore, storageKey);
const clusterRoleBindingsQuery = useGetClusterRoleBindingsQuery(
environmentId,
{
autoRefreshRate: tableState.autoRefreshRate * 1000,
}
);
const filteredClusterRoleBindings = useMemo(
() =>
clusterRoleBindingsQuery.data?.filter(
(crb) => tableState.showSystemResources || !crb.isSystem
),
[clusterRoleBindingsQuery.data, tableState.showSystemResources]
);
const { authorized: isAuthorizedToAddOrEdit } = useAuthorizations([
'K8sClusterRoleBindingsW',
]);
return (
<Datatable
dataset={filteredClusterRoleBindings || []}
columns={columns}
settingsManager={tableState}
isLoading={clusterRoleBindingsQuery.isLoading}
emptyContentLabel="No supported cluster role bindings found"
title="Cluster Role Bindings"
titleIcon={LinkIcon}
getRowId={(row) => row.uid}
isRowSelectable={(row) => !row.original.isSystem}
renderTableActions={(selectedRows) => (
<TableActions selectedItems={selectedRows} />
)}
renderTableSettings={() => (
<TableSettingsMenu>
<DefaultDatatableSettings settings={tableState} />
</TableSettingsMenu>
)}
description={
<SystemResourceDescription
showSystemResources={tableState.showSystemResources}
/>
}
disableSelect={!isAuthorizedToAddOrEdit}
renderRow={renderRow}
data-cy="k8s-cluster-role-bindings-datatable"
/>
);
}
// needed to apply custom styling to the row and not globally required in the AC's for this ticket.
function renderRow(row: Row<ClusterRoleBinding>, highlightedItemId?: string) {
return (
<Table.Row<ClusterRoleBinding>
cells={row.getVisibleCells()}
className={clsx('[&>td]:!py-4 [&>td]:!align-top', {
active: highlightedItemId === row.id,
})}
/>
);
}
interface SelectedRole {
name: string;
}
type TableActionsProps = {
selectedItems: ClusterRoleBinding[];
};
function TableActions({ selectedItems }: TableActionsProps) {
const environmentId = useEnvironmentId();
const deleteClusterRoleBindingsMutation =
useDeleteClusterRoleBindingsMutation(environmentId);
const router = useRouter();
async function handleRemoveClick(roles: SelectedRole[]) {
const confirmed = await confirmDelete(
<>
<p>
Are you sure you want to delete the selected cluster role binding(s)?
</p>
<ul className="mt-2 max-h-96 list-inside overflow-hidden overflow-y-auto text-sm">
{roles.map((s, index) => (
<li key={index}>{s.name}</li>
))}
</ul>
</>
);
if (!confirmed) {
return null;
}
const payload: string[] = [];
roles.forEach((r) => {
payload.push(r.name);
});
deleteClusterRoleBindingsMutation.mutate(
{ environmentId, data: payload },
{
onSuccess: () => {
notifySuccess(
'Roles successfully removed',
roles.map((r) => `${r.name}`).join(', ')
);
router.stateService.reload();
},
onError: (error) => {
notifyError(
'Unable to delete cluster role bindings',
error as Error,
roles.map((r) => `${r.name}`).join(', ')
);
},
}
);
return roles;
}
return (
<Authorized authorizations="K8sClusterRoleBindingsW">
<LoadingButton
className="btn-wrapper"
color="dangerlight"
disabled={selectedItems.length === 0}
onClick={() => handleRemoveClick(selectedItems)}
icon={Trash2}
isLoading={deleteClusterRoleBindingsMutation.isLoading}
loadingText="Removing cluster role bindings..."
data-cy="k8s-cluster-role-bindings-remove-button"
>
Remove
</LoadingButton>
<CreateFromManifestButton
params={{ tab: 'clusterRoleBindings' }}
data-cy="k8s-cluster-role-bindings-deploy-button"
/>
</Authorized>
);
}

12
app/react/kubernetes/more-resources/ClusterRolesView/ClusterRoleBindingsDatatable/columns/created.tsx Normal file
View file

@ -0,0 +1,12 @@
import { formatDate } from '@/portainer/filters/filters';
import { columnHelper } from './helper';
export const created = columnHelper.accessor(
(row) => formatDate(row.creationDate),
{
header: 'Created',
id: 'created',
cell: ({ getValue }) => getValue(),
}
);

5
app/react/kubernetes/more-resources/ClusterRolesView/ClusterRoleBindingsDatatable/columns/helper.ts Normal file
View file

@ -0,0 +1,5 @@
import { createColumnHelper } from '@tanstack/react-table';
import { ClusterRoleBinding } from '../types';
export const columnHelper = createColumnHelper<ClusterRoleBinding>();

17
app/react/kubernetes/more-resources/ClusterRolesView/ClusterRoleBindingsDatatable/columns/index.tsx Normal file
View file

@ -0,0 +1,17 @@
import { name } from './name';
import { roleName } from './roleName';
import { kind } from './kind';
import { created } from './created';
import { subjectKind } from './subjectKind';
import { subjectName } from './subjectName';
import { subjectNamespace } from './subjectNamespace';
export const columns = [
name,
roleName,
kind,
subjectKind,
subjectName,
subjectNamespace,
created,
];

6
app/react/kubernetes/more-resources/ClusterRolesView/ClusterRoleBindingsDatatable/columns/kind.tsx Normal file
View file

@ -0,0 +1,6 @@
import { columnHelper } from './helper';
export const kind = columnHelper.accessor('roleRef.kind', {
header: 'Role Kind',
id: 'roleKind',
});

22
app/react/kubernetes/more-resources/ClusterRolesView/ClusterRoleBindingsDatatable/columns/name.tsx Normal file
View file

@ -0,0 +1,22 @@
import { SystemBadge } from '@@/Badge/SystemBadge';
import { columnHelper } from './helper';
export const name = columnHelper.accessor(
(row) => {
if (row.isSystem) {
return `${row.name} system`;
}
return row.name;
},
{
header: 'Name',
id: 'name',
cell: ({ row }) => (
<div className="flex gap-2">
{row.original.name}
{row.original.isSystem && <SystemBadge />}
</div>
),
}
);

6
app/react/kubernetes/more-resources/ClusterRolesView/ClusterRoleBindingsDatatable/columns/roleName.tsx Normal file
View file

@ -0,0 +1,6 @@
import { columnHelper } from './helper';
export const roleName = columnHelper.accessor('roleRef.name', {
header: 'Role Name',
id: 'roleName',
});

13
app/react/kubernetes/more-resources/ClusterRolesView/ClusterRoleBindingsDatatable/columns/subjectKind.tsx Normal file
View file

@ -0,0 +1,13 @@
import { columnHelper } from './helper';
export const subjectKind = columnHelper.accessor(
(row) => row.subjects?.map((sub) => sub.kind).join(', '),
{
header: 'Subject Kind',
id: 'subjectKind',
cell: ({ row }) =>
row.original.subjects?.map((sub, index) => (
<div key={index}>{sub.kind}</div>
)) || '-',
}
);

13
app/react/kubernetes/more-resources/ClusterRolesView/ClusterRoleBindingsDatatable/columns/subjectName.tsx Normal file
View file

@ -0,0 +1,13 @@
import { columnHelper } from './helper';
export const subjectName = columnHelper.accessor(
(row) => row.subjects?.map((sub) => sub.name).join(' '),
{
header: 'Subject Name',
id: 'subjectName',
cell: ({ row }) =>
row.original.subjects?.map((sub, index) => (
<div key={index}>{sub.name}</div>
)) || '-',
}
);

42
app/react/kubernetes/more-resources/ClusterRolesView/ClusterRoleBindingsDatatable/columns/subjectNamespace.tsx Normal file
View file

@ -0,0 +1,42 @@
import { Link } from '@@/Link';
import { filterHOC } from '@@/datatables/Filter';
import { filterFn, filterNamespaceOptionsTransformer } from '../../utils';
import { columnHelper } from './helper';
export const subjectNamespace = columnHelper.accessor(
(row) => row.subjects?.flatMap((sub) => sub.namespace || '-') || [],
{
header: 'Subject Namespace',
id: 'subjectNamespace',
cell: ({ row }) =>
row.original.subjects?.map((sub, index) => (
<div key={index}>
{sub.namespace ? (
<Link
to="kubernetes.resourcePools.resourcePool"
params={{
id: sub.namespace,
}}
title={sub.namespace}
data-cy={`subject-namespace-link-${row.original.name}_${index}`}
>
{sub.namespace}
</Link>
) : (
'-'
)}
</div>
)) || '-',
enableColumnFilter: true,
// use a custom filter, to remove empty namespace values
meta: {
filter: filterHOC(
'Filter by subject namespace',
filterNamespaceOptionsTransformer
),
},
filterFn,
}
);

11
app/react/kubernetes/more-resources/ClusterRolesView/ClusterRoleBindingsDatatable/queries/query-keys.ts Normal file
View file

@ -0,0 +1,11 @@
import { EnvironmentId } from '@/react/portainer/environments/types';
export const queryKeys = {
list: (environmentId: EnvironmentId) =>
[
'environments',
environmentId,
'kubernetes',
'cluster_role_bindings',
] as const,
};

34
app/react/kubernetes/more-resources/ClusterRolesView/ClusterRoleBindingsDatatable/queries/useDeleteClusterRoleBindingsMutation.ts Normal file
View file

@ -0,0 +1,34 @@
import { useMutation, useQueryClient } from '@tanstack/react-query';
import { withGlobalError, withInvalidate } from '@/react-tools/react-query';
import axios, { parseAxiosError } from '@/portainer/services/axios';
import { EnvironmentId } from '@/react/portainer/environments/types';
import { queryKeys } from './query-keys';
export function useDeleteClusterRoleBindingsMutation(
environmentId: EnvironmentId
) {
const queryClient = useQueryClient();
return useMutation(deleteClusterRoleBindings, {
...withInvalidate(queryClient, [queryKeys.list(environmentId)]),
...withGlobalError('Unable to delete cluster role bindings'),
});
}
export async function deleteClusterRoleBindings({
environmentId,
data,
}: {
environmentId: EnvironmentId;
data: string[];
}) {
try {
return await axios.post(
`kubernetes/${environmentId}/cluster_role_bindings/delete`,
data
);
} catch (e) {
throw parseAxiosError(e, `Unable to delete cluster role bindings`);
}
}

41
app/react/kubernetes/more-resources/ClusterRolesView/ClusterRoleBindingsDatatable/queries/useGetClusterRoleBindingsQuery.ts Normal file
View file

@ -0,0 +1,41 @@
import { compact } from 'lodash';
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 { ClusterRoleBinding } from '../types';
import { queryKeys } from './query-keys';
export function useGetClusterRoleBindingsQuery(
environmentId: EnvironmentId,
options?: { autoRefreshRate?: number }
) {
return useQuery(
queryKeys.list(environmentId),
async () => {
const cluerRoleBindings = await getClusterRoleBindings(environmentId);
return compact(cluerRoleBindings);
},
{
...withGlobalError('Unable to get cluster role bindings'),
refetchInterval() {
return options?.autoRefreshRate ?? false;
},
}
);
}
async function getClusterRoleBindings(environmentId: EnvironmentId) {
try {
const { data: roles } = await axios.get<ClusterRoleBinding[]>(
`kubernetes/${environmentId}/cluster_role_bindings`
);
return roles;
} catch (e) {
throw parseAxiosError(e, 'Unable to get cluster role bindings');
}
}

26
app/react/kubernetes/more-resources/ClusterRolesView/ClusterRoleBindingsDatatable/types.ts Normal file
View file

@ -0,0 +1,26 @@
export type ClusterRoleRef = {
name: string;
kind: string;
apiGroup?: string;
};
export type ClusterRoleSubject = {
name: string;
kind: string;
apiGroup?: string;
namespace?: string;
};
export type ClusterRoleBinding = {
name: string;
uid: string;
namespace: string;
resourceVersion: string;
creationDate: string;
annotations: Record<string, string> | null;
roleRef: ClusterRoleRef;
subjects: ClusterRoleSubject[] | null;
isSystem: boolean;
};

152
app/react/kubernetes/more-resources/ClusterRolesView/ClusterRolesDatatable/ClusterRolesDatatable.tsx Normal file
View file

@ -0,0 +1,152 @@
import { Trash2, UserCheck } from 'lucide-react';
import { useRouter } from '@uirouter/react';
import { useMemo } from 'react';
import { useEnvironmentId } from '@/react/hooks/useEnvironmentId';
import { useAuthorizations, Authorized } from '@/react/hooks/useUser';
import { notifyError, notifySuccess } from '@/portainer/services/notifications';
import { SystemResourceDescription } from '@/react/kubernetes/datatables/SystemResourceDescription';
import { createStore } from '@/react/kubernetes/datatables/default-kube-datatable-store';
import { CreateFromManifestButton } from '@/react/kubernetes/components/CreateFromManifestButton';
import { confirmDelete } from '@@/modals/confirm';
import { Datatable, TableSettingsMenu } from '@@/datatables';
import { LoadingButton } from '@@/buttons';
import { useTableState } from '@@/datatables/useTableState';
import { DefaultDatatableSettings } from '../../../datatables/DefaultDatatableSettings';
import { ClusterRole } from './types';
import { columns } from './columns';
import { useGetClusterRolesQuery } from './queries/useGetClusterRolesQuery';
import { useDeleteClusterRolesMutation } from './queries/useDeleteClusterRolesMutation';
const storageKey = 'clusterRoles';
const settingsStore = createStore(storageKey);
export function ClusterRolesDatatable() {
const environmentId = useEnvironmentId();
const tableState = useTableState(settingsStore, storageKey);
const clusterRolesQuery = useGetClusterRolesQuery(environmentId, {
autoRefreshRate: tableState.autoRefreshRate * 1000,
});
const { authorized: isAuthorizedToAddEdit } = useAuthorizations([
'K8sClusterRolesW',
]);
const filteredClusterRoles = useMemo(
() =>
clusterRolesQuery.data?.filter(
(cr) => tableState.showSystemResources || !cr.isSystem
),
[clusterRolesQuery.data, tableState.showSystemResources]
);
return (
<Datatable
dataset={filteredClusterRoles || []}
columns={columns}
isLoading={clusterRolesQuery.isLoading}
settingsManager={tableState}
emptyContentLabel="No supported cluster roles found"
title="Cluster Roles"
titleIcon={UserCheck}
getRowId={(row) => row.uid}
isRowSelectable={(row) => !row.original.isSystem}
renderTableActions={(selectedRows) => (
<TableActions selectedItems={selectedRows} />
)}
renderTableSettings={() => (
<TableSettingsMenu>
<DefaultDatatableSettings settings={tableState} />
</TableSettingsMenu>
)}
description={
<SystemResourceDescription
showSystemResources={tableState.showSystemResources}
/>
}
disableSelect={!isAuthorizedToAddEdit}
data-cy="k8s-clusterroles-datatable"
/>
);
}
interface SelectedRole {
name: string;
}
type TableActionsProps = {
selectedItems: ClusterRole[];
};
function TableActions({ selectedItems }: TableActionsProps) {
const environmentId = useEnvironmentId();
const deleteClusterRolesMutation =
useDeleteClusterRolesMutation(environmentId);
const router = useRouter();
async function handleRemoveClick(roles: SelectedRole[]) {
const confirmed = await confirmDelete(
<>
<p>Are you sure you want to delete the selected cluster role(s)?</p>
<ul className="mt-2 max-h-96 list-inside overflow-hidden overflow-y-auto text-sm">
{roles.map((s, index) => (
<li key={index}>{s.name}</li>
))}
</ul>
</>
);
if (!confirmed) {
return null;
}
const payload: string[] = [];
roles.forEach((r) => {
payload.push(r.name);
});
deleteClusterRolesMutation.mutate(
{ environmentId, data: payload },
{
onSuccess: () => {
notifySuccess(
'Roles successfully removed',
roles.map((r) => `${r.name}`).join(', ')
);
router.stateService.reload();
},
onError: (error) => {
notifyError(
'Unable to delete cluster roles',
error as Error,
roles.map((r) => `${r.name}`).join(', ')
);
},
}
);
return roles;
}
return (
<Authorized authorizations="K8sClusterRolesW">
<LoadingButton
className="btn-wrapper"
color="dangerlight"
disabled={selectedItems.length === 0}
onClick={() => handleRemoveClick(selectedItems)}
icon={Trash2}
isLoading={deleteClusterRolesMutation.isLoading}
loadingText="Removing cluster roles..."
data-cy="k8sClusterRoles-removeRoleButton"
>
Remove
</LoadingButton>
<CreateFromManifestButton
params={{ tab: 'clusterRoles' }}
data-cy="k8s-cluster-roles-deploy-button"
/>
</Authorized>
);
}

12
app/react/kubernetes/more-resources/ClusterRolesView/ClusterRolesDatatable/columns/created.tsx Normal file
View file

@ -0,0 +1,12 @@
import { formatDate } from '@/portainer/filters/filters';
import { columnHelper } from './helper';
export const created = columnHelper.accessor(
(row) => formatDate(row.creationDate),
{
header: 'Created',
id: 'created',
cell: ({ getValue }) => getValue(),
}
);

5
app/react/kubernetes/more-resources/ClusterRolesView/ClusterRolesDatatable/columns/helper.ts Normal file
View file

@ -0,0 +1,5 @@
import { createColumnHelper } from '@tanstack/react-table';
import { ClusterRole } from '../types';
export const columnHelper = createColumnHelper<ClusterRole>();

4
app/react/kubernetes/more-resources/ClusterRolesView/ClusterRolesDatatable/columns/index.tsx Normal file
View file

@ -0,0 +1,4 @@
import { name } from './name';
import { created } from './created';
export const columns = [name, created];

28
app/react/kubernetes/more-resources/ClusterRolesView/ClusterRolesDatatable/columns/name.tsx Normal file
View file

@ -0,0 +1,28 @@
import { SystemBadge } from '@@/Badge/SystemBadge';
import { UnusedBadge } from '@@/Badge/UnusedBadge';
import { columnHelper } from './helper';
export const name = columnHelper.accessor(
(row) => {
let result = row.name;
if (row.isSystem) {
result += ' system';
}
if (row.isUnused) {
result += ' unused';
}
return result;
},
{
header: 'Name',
id: 'name',
cell: ({ row }) => (
<div className="flex gap-2">
{row.original.name}
{row.original.isSystem && <SystemBadge />}
{row.original.isUnused && <UnusedBadge />}
</div>
),
}
);

6
app/react/kubernetes/more-resources/ClusterRolesView/ClusterRolesDatatable/queries/query-keys.ts Normal file
View file

@ -0,0 +1,6 @@
import { EnvironmentId } from '@/react/portainer/environments/types';
export const queryKeys = {
list: (environmentId: EnvironmentId) =>
['environments', environmentId, 'kubernetes', 'cluster_roles'] as const,
};

33
app/react/kubernetes/more-resources/ClusterRolesView/ClusterRolesDatatable/queries/useDeleteClusterRolesMutation.ts Normal file
View file

@ -0,0 +1,33 @@
import { useMutation, useQueryClient } 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 { queryKeys } from './query-keys';
export function useDeleteClusterRolesMutation(environmentId: EnvironmentId) {
const queryClient = useQueryClient();
return useMutation(deleteClusterRoles, {
onSuccess: () =>
queryClient.invalidateQueries(queryKeys.list(environmentId)),
...withGlobalError('Unable to delete cluster roles'),
});
}
export async function deleteClusterRoles({
environmentId,
data,
}: {
environmentId: EnvironmentId;
data: string[];
}) {
try {
return await axios.post(
`kubernetes/${environmentId}/cluster_roles/delete`,
data
);
} catch (e) {
throw parseAxiosError(e, `Unable to delete cluster roles`);
}
}

39
app/react/kubernetes/more-resources/ClusterRolesView/ClusterRolesDatatable/queries/useGetClusterRolesQuery.ts Normal file
View file

@ -0,0 +1,39 @@
import { compact } from 'lodash';
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 { ClusterRole } from '../types';
import { queryKeys } from './query-keys';
export function useGetClusterRolesQuery(
environmentId: EnvironmentId,
options?: { autoRefreshRate?: number }
) {
return useQuery(
queryKeys.list(environmentId),
async () => {
const clusterRoles = await getClusterRoles(environmentId);
return compact(clusterRoles);
},
{
...withGlobalError('Unable to get cluster roles'),
...options,
}
);
}
async function getClusterRoles(environmentId: EnvironmentId) {
try {
const { data: roles } = await axios.get<ClusterRole[]>(
`kubernetes/${environmentId}/cluster_roles`
);
return roles;
} catch (e) {
throw parseAxiosError(e, 'Unable to get cluster roles');
}
}

23
app/react/kubernetes/more-resources/ClusterRolesView/ClusterRolesDatatable/types.ts Normal file
View file

@ -0,0 +1,23 @@
export type Rule = {
verbs: string[];
apiGroups: string[];
resources: string[];
};
export type ClusterRole = {
name: string;
uid: string;
namespace: string;
resourceVersion: string;
creationDate: string;
annotations?: Record<string, string>;
rules: Rule[];
isUnused: boolean;
isSystem: boolean;
};
export type DeleteRequestPayload = {
clusterRoles: string[];
};

51
app/react/kubernetes/more-resources/ClusterRolesView/ClusterRolesView.tsx Normal file
View file

@ -0,0 +1,51 @@
import { UserCheck, Link } from 'lucide-react';
import { useCurrentStateAndParams } from '@uirouter/react';
import { useUnauthorizedRedirect } from '@/react/hooks/useUnauthorizedRedirect';
import { PageHeader } from '@@/PageHeader';
import { Tab, WidgetTabs, findSelectedTabIndex } from '@@/Widget/WidgetTabs';
import { ClusterRolesDatatable } from './ClusterRolesDatatable/ClusterRolesDatatable';
import { ClusterRoleBindingsDatatable } from './ClusterRoleBindingsDatatable/ClusterRoleBindingsDatatable';
export function ClusterRolesView() {
useUnauthorizedRedirect(
{ authorizations: ['K8sClusterRoleBindingsW', 'K8sClusterRolesW'] },
{ to: 'kubernetes.dashboard' }
);
const tabs: Tab[] = [
{
name: 'Cluster Roles',
icon: UserCheck,
widget: <ClusterRolesDatatable />,
selectedTabParam: 'clusterRoles',
},
{
name: 'Cluster Role Bindings',
icon: Link,
widget: <ClusterRoleBindingsDatatable />,
selectedTabParam: 'clusterRoleBindings',
},
];
const currentTabIndex = findSelectedTabIndex(
useCurrentStateAndParams(),
tabs
);
return (
<>
<PageHeader
title="Cluster Role list"
breadcrumbs="Cluster Roles"
reload
/>
<>
<WidgetTabs tabs={tabs} currentTabIndex={currentTabIndex} />
<div className="content">{tabs[currentTabIndex].widget}</div>
</>
</>
);
}

1
app/react/kubernetes/more-resources/ClusterRolesView/index.tsx Normal file
View file

@ -0,0 +1 @@
export { ClusterRolesView } from './ClusterRolesView';

52
app/react/kubernetes/more-resources/ClusterRolesView/utils.ts Normal file
View file

@ -0,0 +1,52 @@
import { Row } from '@tanstack/react-table';
import { RoleBinding } from '../RolesView/RoleBindingsDatatable/types';
import { ClusterRoleBinding } from './ClusterRoleBindingsDatatable/types';
/**
* Transforms the rows of a table to get a unique list of namespaces to use as filter options.
* One row can have multiple subject namespaces.
* @param rows - The rows of the table.
* @param id - The ID of the column containing the subject namespaces.
* @returns An array of unique subject namespace options.
*/
export function filterNamespaceOptionsTransformer<
TData extends ClusterRoleBinding | RoleBinding,
>(rows: Row<TData>[], id: string) {
const options = new Set<string>();
rows.forEach(({ getValue }) => {
const value = getValue<string[]>(id);
if (!value) {
return;
}
value.forEach((v) => {
if (v && v !== '-') {
options.add(v);
}
});
});
return Array.from(options);
}
/**
* Filters the rows of a table based on the selected namespaces.
* @param row - The row to filter.
* @param _columnId - The ID of the column being filtered.
* @param filterValue - The selected namespaces to filter by.
* @returns True if the row should be shown, false otherwise.
*/
export function filterFn(
row: Row<ClusterRoleBinding | RoleBinding>,
_columnId: string,
filterValue: string[]
) {
// when no filter is set, show all rows
if (filterValue.length === 0) {
return true;
}
const subjectNamespaces = row.original.subjects?.flatMap(
(sub) => sub.namespace ?? []
);
return filterValue.some((v) => subjectNamespaces?.includes(v));
}

175
app/react/kubernetes/more-resources/RolesView/RoleBindingsDatatable/RoleBindingsDatatable.tsx Normal file
View file

@ -0,0 +1,175 @@
import { Trash2, Link as LinkIcon } from 'lucide-react';
import { useRouter } from '@uirouter/react';
import { Row } from '@tanstack/react-table';
import clsx from 'clsx';
import { useEnvironmentId } from '@/react/hooks/useEnvironmentId';
import { useAuthorizations, Authorized } from '@/react/hooks/useUser';
import { notifyError, notifySuccess } from '@/portainer/services/notifications';
import { SystemResourceDescription } from '@/react/kubernetes/datatables/SystemResourceDescription';
import { createStore } from '@/react/kubernetes/datatables/default-kube-datatable-store';
import { useNamespacesQuery } from '@/react/kubernetes/namespaces/queries/useNamespacesQuery';
import { CreateFromManifestButton } from '@/react/kubernetes/components/CreateFromManifestButton';
import { isSystemNamespace } from '@/react/kubernetes/namespaces/queries/useIsSystemNamespace';
import { confirmDelete } from '@@/modals/confirm';
import { Datatable, Table, TableSettingsMenu } from '@@/datatables';
import { LoadingButton } from '@@/buttons';
import { useTableState } from '@@/datatables/useTableState';
import { DefaultDatatableSettings } from '../../../datatables/DefaultDatatableSettings';
import { RoleBinding } from './types';
import { columns } from './columns';
import { useGetAllRoleBindingsQuery } from './queries/useGetAllRoleBindingsQuery';
import { useDeleteRoleBindingsMutation } from './queries/useDeleteRoleBindingsMutation';
const storageKey = 'roleBindings';
const settingsStore = createStore(storageKey);
export function RoleBindingsDatatable() {
const environmentId = useEnvironmentId();
const tableState = useTableState(settingsStore, storageKey);
const namespacesQuery = useNamespacesQuery(environmentId);
const roleBindingsQuery = useGetAllRoleBindingsQuery(environmentId, {
autoRefreshRate: tableState.autoRefreshRate * 1000,
enabled: namespacesQuery.isSuccess,
});
const filteredRoleBindings = tableState.showSystemResources
? roleBindingsQuery.data
: roleBindingsQuery.data?.filter(
(rb) => !isSystemNamespace(rb.namespace, namespacesQuery.data)
);
const { authorized: isAuthorisedToAddEdit } = useAuthorizations([
'K8sRoleBindingsW',
]);
return (
<Datatable
dataset={filteredRoleBindings || []}
columns={columns}
settingsManager={tableState}
isLoading={roleBindingsQuery.isLoading}
emptyContentLabel="No role bindings found"
title="Role Bindings"
titleIcon={LinkIcon}
getRowId={(row) => row.uid}
isRowSelectable={(row) => !row.original.isSystem}
renderTableActions={(selectedRows) => (
<TableActions selectedItems={selectedRows} />
)}
renderTableSettings={() => (
<TableSettingsMenu>
<DefaultDatatableSettings settings={tableState} />
</TableSettingsMenu>
)}
description={
<SystemResourceDescription
showSystemResources={tableState.showSystemResources}
/>
}
disableSelect={!isAuthorisedToAddEdit}
renderRow={renderRow}
data-cy="k8s-role-bindings-datatable"
/>
);
}
// needed to apply custom styling to the row and not globally required in the AC's for this ticket.
function renderRow(row: Row<RoleBinding>, highlightedItemId?: string) {
return (
<Table.Row<RoleBinding>
cells={row.getVisibleCells()}
className={clsx('[&>td]:!py-4 [&>td]:!align-top', {
active: highlightedItemId === row.id,
})}
/>
);
}
interface SelectedRole {
namespace: string;
name: string;
}
type TableActionsProps = {
selectedItems: RoleBinding[];
};
function TableActions({ selectedItems }: TableActionsProps) {
const environmentId = useEnvironmentId();
const deleteRoleBindingsMutation =
useDeleteRoleBindingsMutation(environmentId);
const router = useRouter();
async function handleRemoveClick(roles: SelectedRole[]) {
const confirmed = await confirmDelete(
<>
<p>Are you sure you want to delete the selected role binding(s)?</p>
<ul className="mt-2 max-h-96 list-inside overflow-hidden overflow-y-auto text-sm">
{roles.map((r, index) => (
<li key={index}>
{r.namespace}/{r.name}
</li>
))}
</ul>
</>
);
if (!confirmed) {
return null;
}
const payload: Record<string, string[]> = {};
roles.forEach((r) => {
payload[r.namespace] = payload[r.namespace] || [];
payload[r.namespace].push(r.name);
});
deleteRoleBindingsMutation.mutate(
{ environmentId, data: payload },
{
onSuccess: () => {
notifySuccess(
'Role binding(s) successfully removed',
roles.map((r) => `${r.namespace}/${r.name}`).join(', ')
);
router.stateService.reload();
},
onError: (error) => {
notifyError(
'Unable to delete role bindings(s)',
error as Error,
roles.map((r) => `${r.namespace}/${r.name}`).join(', ')
);
},
}
);
return roles;
}
return (
<Authorized authorizations="K8sRoleBindingsW">
<LoadingButton
className="btn-wrapper"
color="dangerlight"
disabled={selectedItems.length === 0}
onClick={() => handleRemoveClick(selectedItems)}
icon={Trash2}
isLoading={deleteRoleBindingsMutation.isLoading}
loadingText="Removing role bindings..."
data-cy="k8s-role-bindings-remove-button"
>
Remove
</LoadingButton>
<CreateFromManifestButton
params={{
tab: 'roleBindings',
}}
data-cy="k8s-role-bindings-deploy-button"
/>
</Authorized>
);
}

12
app/react/kubernetes/more-resources/RolesView/RoleBindingsDatatable/columns/created.tsx Normal file
View file

@ -0,0 +1,12 @@
import { formatDate } from '@/portainer/filters/filters';
import { columnHelper } from './helper';
export const created = columnHelper.accessor(
(row) => formatDate(row.creationDate),
{
header: 'Created',
id: 'created',
cell: ({ getValue }) => getValue(),
}
);

5
app/react/kubernetes/more-resources/RolesView/RoleBindingsDatatable/columns/helper.ts Normal file
View file

@ -0,0 +1,5 @@
import { createColumnHelper } from '@tanstack/react-table';
import { RoleBinding } from '../types';
export const columnHelper = createColumnHelper<RoleBinding>();

17
app/react/kubernetes/more-resources/RolesView/RoleBindingsDatatable/columns/index.tsx Normal file
View file

@ -0,0 +1,17 @@
import { name } from './name';
import { roleKind } from './roleKind';
import { roleName } from './roleName';
import { subjectKind } from './subjectKind';
import { subjectName } from './subjectName';
import { subjectNamespace } from './subjectNamespace';
import { created } from './created';
export const columns = [
name,
roleKind,
roleName,
subjectKind,
subjectName,
subjectNamespace,
created,
];

22
app/react/kubernetes/more-resources/RolesView/RoleBindingsDatatable/columns/name.tsx Normal file
View file

@ -0,0 +1,22 @@
import { SystemBadge } from '@@/Badge/SystemBadge';
import { columnHelper } from './helper';
export const name = columnHelper.accessor(
(row) => {
if (row.isSystem) {
return `${row.name} system`;
}
return row.name;
},
{
header: 'Name',
id: 'name',
cell: ({ row }) => (
<div className="flex gap-2">
{row.original.name}
{row.original.isSystem && <SystemBadge />}
</div>
),
}
);

6
app/react/kubernetes/more-resources/RolesView/RoleBindingsDatatable/columns/roleKind.tsx Normal file
View file

@ -0,0 +1,6 @@
import { columnHelper } from './helper';
export const roleKind = columnHelper.accessor('roleRef.kind', {
header: 'Role Kind',
id: 'roleKind',
});

6
app/react/kubernetes/more-resources/RolesView/RoleBindingsDatatable/columns/roleName.tsx Normal file
View file

@ -0,0 +1,6 @@
import { columnHelper } from './helper';
export const roleName = columnHelper.accessor('roleRef.name', {
header: 'Role Name',
id: 'roleName',
});

13
app/react/kubernetes/more-resources/RolesView/RoleBindingsDatatable/columns/subjectKind.tsx Normal file
View file

@ -0,0 +1,13 @@
import { columnHelper } from './helper';
export const subjectKind = columnHelper.accessor(
(row) => row.subjects?.map((sub) => sub.kind).join(', '),
{
header: 'Subject Kind',
id: 'subjectKind',
cell: ({ row }) =>
row.original.subjects?.map((sub, index) => (
<div key={index}>{sub.kind}</div>
)) || '-',
}
);

13
app/react/kubernetes/more-resources/RolesView/RoleBindingsDatatable/columns/subjectName.tsx Normal file
View file

@ -0,0 +1,13 @@
import { columnHelper } from './helper';
export const subjectName = columnHelper.accessor(
(row) => row.subjects?.map((sub) => sub.name).join(', '),
{
header: 'Subject Name',
id: 'subjectName',
cell: ({ row }) =>
row.original.subjects?.map((sub, index) => (
<div key={index}>{sub.name}</div>
)) || '-',
}
);

45
app/react/kubernetes/more-resources/RolesView/RoleBindingsDatatable/columns/subjectNamespace.tsx Normal file
View file

@ -0,0 +1,45 @@
import { Link } from '@@/Link';
import { filterHOC } from '@@/datatables/Filter';
import {
filterFn,
filterNamespaceOptionsTransformer,
} from '../../../ClusterRolesView/utils';
import { columnHelper } from './helper';
export const subjectNamespace = columnHelper.accessor(
(row) => row.subjects?.flatMap((sub) => sub.namespace || '-') || [],
{
header: 'Subject Namespace',
id: 'subjectNamespace',
cell: ({ row }) =>
row.original.subjects?.map((sub, index) => (
<div key={index}>
{sub.namespace ? (
<Link
to="kubernetes.resourcePools.resourcePool"
params={{
id: sub.namespace,
}}
title={sub.namespace}
data-cy={`subject-namespace-link-${row.original.name}_${index}`}
>
{sub.namespace}
</Link>
) : (
'-'
)}
</div>
)) || '-',
enableColumnFilter: true,
// use a custom filter, to remove empty namespace values
meta: {
filter: filterHOC(
'Filter by subject namespace',
filterNamespaceOptionsTransformer
),
},
filterFn,
}
);

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