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

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