Docker/portainer
Docker/portainer
1
0
Fork 0
mirror of https://github.com/portainer/portainer.git synced 2025-07-23 15:29:42 +02:00
Code Issues Releases Activity

feat(app): migrate app containers to react [EE-5353] (#9992)

Browse source
This commit is contained in:
Ali 2023-08-17 22:00:25 +12:00 • committed by GitHub
parent 6290e9facc
commit 23295d2736
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
22 changed files with 312 additions and 297 deletions
Download patch file Download diff file Expand all files Collapse all files

111
app/react/kubernetes/applications/DetailsView/ApplicationContainersDatatable/ApplicationContainersDatatable.tsx Normal file
View file

@ -0,0 +1,111 @@
import { Server } from 'lucide-react';
import { useCurrentStateAndParams } from '@uirouter/react';
import { useMemo } from 'react';
import { ContainerStatus, Pod } from 'kubernetes-types/core/v1';
import { IndexOptional } from '@/react/kubernetes/configs/types';
import { createStore } from '@/react/kubernetes/datatables/default-kube-datatable-store';
import { useEnvironment } from '@/react/portainer/environments/queries';
import { Datatable } from '@@/datatables';
import { useTableState } from '@@/datatables/useTableState';
import { useApplication, useApplicationPods } from '../../application.queries';
import { ContainerRowData } from './types';
import { getColumns } from './columns';
const storageKey = 'k8sContainersDatatable';
const settingsStore = createStore(storageKey);
export function ApplicationContainersDatatable() {
const tableState = useTableState(settingsStore, storageKey);
const {
params: {
endpointId: environmentId,
name,
namespace,
'resource-type': resourceType,
},
} = useCurrentStateAndParams();
// get the containers from the aapplication pods
const { data: application, ...applicationQuery } = useApplication(
environmentId,
namespace,
name,
resourceType
);
const { data: pods, ...podsQuery } = useApplicationPods(
environmentId,
namespace,
name,
application
);
const appContainers = useContainersRowData(pods);
const { data: isServerMetricsEnabled } = useEnvironment(
environmentId,
(environment) => !!environment?.Kubernetes?.Configuration.UseServerMetrics
);
return (
<Datatable<IndexOptional<ContainerRowData>>
dataset={appContainers}
columns={getColumns(!!isServerMetricsEnabled)}
settingsManager={tableState}
isLoading={applicationQuery.isLoading || podsQuery.isLoading}
emptyContentLabel="No containers found"
title="Application containers"
titleIcon={Server}
getRowId={(row) => row.name}
disableSelect
/>
);
}
// useContainersRowData row data gets the pod.spec?.containers and pod.spec?.initContainers from an array of pods
// it then appends the podName, nodeName, podId, creationDate, and status to each container
function useContainersRowData(pods?: Pod[]): ContainerRowData[] {
return (
useMemo(
() =>
pods?.flatMap((pod) => {
const containers = [
...(pod.spec?.containers || []),
...(pod.spec?.initContainers || []),
];
return containers.map((container) => ({
...container,
podName: pod.metadata?.name ?? '',
nodeName: pod.spec?.nodeName ?? '',
podIp: pod.status?.podIP ?? '',
creationDate: pod.status?.startTime ?? '',
status: computeContainerStatus(
container.name,
pod.status?.containerStatuses
),
}));
}) || [],
[pods]
) || []
);
}
function computeContainerStatus(
containerName: string,
statuses?: ContainerStatus[]
) {
const status = statuses?.find((status) => status.name === containerName);
if (!status) {
return 'Terminated';
}
const { state } = status;
if (state?.waiting) {
return 'Waiting';
}
if (!state?.running) {
return 'Terminated';
}
return 'Running';
}

49
app/react/kubernetes/applications/DetailsView/ApplicationContainersDatatable/columns/actions.tsx Normal file
View file

@ -0,0 +1,49 @@
import { BarChart, FileText, Terminal } from 'lucide-react';
import { Authorized } from '@/react/hooks/useUser';
import { Link } from '@@/Link';
import { Icon } from '@@/Icon';
import { columnHelper } from './helper';
export function getActions(isServerMetricsEnabled: boolean) {
return columnHelper.accessor(() => '', {
header: 'Actions',
enableSorting: false,
cell: ({ row: { original: container } }) => (
<div className="flex gap-x-2">
{container.status === 'Running' && isServerMetricsEnabled && (
<Link
className="flex items-center gap-1"
to="kubernetes.applications.application.stats"
params={{ pod: container.podName, container: container.name }}
>
<Icon icon={BarChart} />
Stats
</Link>
)}
<Link
className="flex items-center gap-1"
to="kubernetes.applications.application.logs"
params={{ pod: container.podName, container: container.name }}
>
<Icon icon={FileText} />
Logs
</Link>
{container.status === 'Running' && (
<Authorized authorizations="K8sApplicationConsoleRW">
<Link
className="flex items-center gap-1"
to="kubernetes.applications.application.console"
params={{ pod: container.podName, container: container.name }}
>
<Icon icon={Terminal} />
Console
</Link>
</Authorized>
)}
</div>
),
});
}

11
app/react/kubernetes/applications/DetailsView/ApplicationContainersDatatable/columns/creationDate.tsx Normal file
View file

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

5
app/react/kubernetes/applications/DetailsView/ApplicationContainersDatatable/columns/helper.ts Normal file
View file

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

10
app/react/kubernetes/applications/DetailsView/ApplicationContainersDatatable/columns/image.tsx Normal file
View file

@ -0,0 +1,10 @@
import { columnHelper } from './helper';
export const image = columnHelper.accessor('image', {
header: 'Image',
cell: ({ getValue }) => (
<div className="max-w-xs truncate" title={getValue()}>
{getValue()}
</div>
),
});

6
app/react/kubernetes/applications/DetailsView/ApplicationContainersDatatable/columns/imagePullPolicy.tsx Normal file
View file

@ -0,0 +1,6 @@
import { columnHelper } from './helper';
export const imagePullPolicy = columnHelper.accessor('imagePullPolicy', {
header: 'Image Pull Policy',
id: 'imagePullPolicy',
});

23
app/react/kubernetes/applications/DetailsView/ApplicationContainersDatatable/columns/index.ts Normal file
View file

@ -0,0 +1,23 @@
import { pod } from './pod';
import { name } from './name';
import { image } from './image';
import { imagePullPolicy } from './imagePullPolicy';
import { status } from './status';
import { node } from './node';
import { podIp } from './podIp';
import { creationDate } from './creationDate';
import { getActions } from './actions';
export function getColumns(isServerMetricsEnabled: boolean) {
return [
pod,
name,
image,
imagePullPolicy,
status,
node,
podIp,
creationDate,
getActions(isServerMetricsEnabled),
];
}

6
app/react/kubernetes/applications/DetailsView/ApplicationContainersDatatable/columns/name.tsx Normal file
View file

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

24
app/react/kubernetes/applications/DetailsView/ApplicationContainersDatatable/columns/node.tsx Normal file
View file

@ -0,0 +1,24 @@
import { Authorized } from '@/react/hooks/useUser';
import { Link } from '@@/Link';
import { columnHelper } from './helper';
export const node = columnHelper.accessor('nodeName', {
header: 'Node',
cell: ({ getValue }) => {
const nodeName = getValue();
return (
<Authorized
authorizations="K8sClusterNodeR"
childrenUnauthorized={nodeName}
>
<Link to="kubernetes.cluster.node" params={{ nodeName }}>
<div className="max-w-xs truncate" title={nodeName}>
{nodeName}
</div>
</Link>
</Authorized>
);
},
});

10
app/react/kubernetes/applications/DetailsView/ApplicationContainersDatatable/columns/pod.tsx Normal file
View file

@ -0,0 +1,10 @@
import { columnHelper } from './helper';
export const pod = columnHelper.accessor('podName', {
header: 'Pod',
cell: ({ getValue }) => (
<div className="max-w-xs truncate" title={getValue()}>
{getValue()}
</div>
),
});

6
app/react/kubernetes/applications/DetailsView/ApplicationContainersDatatable/columns/podIp.tsx Normal file
View file

@ -0,0 +1,6 @@
import { columnHelper } from './helper';
export const podIp = columnHelper.accessor('podIp', {
header: 'Pod IP',
id: 'podIp',
});

29
app/react/kubernetes/applications/DetailsView/ApplicationContainersDatatable/columns/status.tsx Normal file
View file

@ -0,0 +1,29 @@
import { CellContext } from '@tanstack/react-table';
import { Badge, BadgeType } from '@@/Badge';
import { ContainerRowData } from '../types';
import { columnHelper } from './helper';
export const status = columnHelper.accessor('status', {
header: 'Status',
cell: StatusCell,
});
function StatusCell({ getValue }: CellContext<ContainerRowData, string>) {
return <Badge type={getContainerStatusType(getValue())}>{getValue()}</Badge>;
}
function getContainerStatusType(status: string): BadgeType {
switch (status.toLowerCase()) {
case 'running':
return 'success';
case 'waiting':
return 'warn';
case 'terminated':
return 'info';
default:
return 'danger';
}
}

1
app/react/kubernetes/applications/DetailsView/ApplicationContainersDatatable/index.ts Normal file
View file

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

9
app/react/kubernetes/applications/DetailsView/ApplicationContainersDatatable/types.ts Normal file
View file

@ -0,0 +1,9 @@
import { Container } from 'kubernetes-types/core/v1';
export interface ContainerRowData extends Container {
podName: string;
nodeName: string;
podIp: string;
creationDate: string;
status: string;
}