portainer/app/docker/containers/components/ContainersDatatable/columns/name.tsx

55 lines
1.4 KiB
TypeScript

import { CellProps, Column, TableInstance } from 'react-table';
import _ from 'lodash-es';
import { useSref } from '@uirouter/react';
import { useEnvironment } from '@/portainer/environments/useEnvironment';
import { useTableSettings } from '@/portainer/components/datatables/components/useTableSettings';
import type {
ContainersTableSettings,
DockerContainer,
} from '@/docker/containers/types';
export const name: Column<DockerContainer> = {
Header: 'Name',
accessor: (row) => {
const name = row.Names[0];
return name.substring(1, name.length);
},
id: 'name',
Cell: NameCell,
disableFilters: true,
Filter: () => null,
canHide: true,
sortType: 'string',
};
export function NameCell({
value: name,
row: { original: container },
}: CellProps<TableInstance>) {
const { settings } = useTableSettings<ContainersTableSettings>();
const truncate = settings.truncateContainerName;
const endpoint = useEnvironment();
const offlineMode = endpoint.Status !== 1;
const linkProps = useSref('docker.containers.container', {
id: container.Id,
nodeName: container.NodeName,
});
let shortName = name;
if (truncate > 0) {
shortName = _.truncate(name, { length: truncate });
}
if (offlineMode) {
return <span>{shortName}</span>;
}
return (
<a href={linkProps.href} onClick={linkProps.onClick} title={name}>
{shortName}
</a>
);
}