59 lines
1.6 KiB
TypeScript
59 lines
1.6 KiB
TypeScript
import React from 'react';
|
|
import { TableCellProps } from 'components/common/SmartTable/TableColumn';
|
|
import { Tag } from 'components/common/Tag/Tag.styled';
|
|
import BytesFormatted from 'components/common/BytesFormatted/BytesFormatted';
|
|
import { Topic } from 'generated-sources';
|
|
|
|
import * as S from './List.styled';
|
|
|
|
export const TitleCell: React.FC<TableCellProps<Topic, string>> = ({
|
|
dataItem: { internal, name },
|
|
}) => {
|
|
return (
|
|
<>
|
|
{internal && <Tag color="gray">IN</Tag>}
|
|
<S.Link to={name} $isInternal={internal}>
|
|
{name}
|
|
</S.Link>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export const TopicSizeCell: React.FC<TableCellProps<Topic, string>> = ({
|
|
dataItem: { segmentSize },
|
|
}) => {
|
|
return <BytesFormatted value={segmentSize} />;
|
|
};
|
|
|
|
export const OutOfSyncReplicasCell: React.FC<TableCellProps<Topic, string>> = ({
|
|
dataItem: { partitions },
|
|
}) => {
|
|
const data = React.useMemo(() => {
|
|
if (partitions === undefined || partitions.length === 0) {
|
|
return 0;
|
|
}
|
|
|
|
return partitions.reduce((memo, { replicas }) => {
|
|
const outOfSync = replicas?.filter(({ inSync }) => !inSync);
|
|
return memo + (outOfSync?.length || 0);
|
|
}, 0);
|
|
}, [partitions]);
|
|
|
|
return <span>{data}</span>;
|
|
};
|
|
|
|
export const MessagesCell: React.FC<TableCellProps<Topic, string>> = ({
|
|
dataItem: { partitions },
|
|
}) => {
|
|
const data = React.useMemo(() => {
|
|
if (partitions === undefined || partitions.length === 0) {
|
|
return 0;
|
|
}
|
|
|
|
return partitions.reduce((memo, { offsetMax, offsetMin }) => {
|
|
return memo + (offsetMax - offsetMin);
|
|
}, 0);
|
|
}, [partitions]);
|
|
|
|
return <span>{data}</span>;
|
|
};
|