0ct0pu5/kafka-ui
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

add new columns, add new cell components

Browse source
This commit is contained in:
Nail Badiullin 2023-04-06 09:39:57 +04:00
parent 9af88aa139
commit ef32c92b37
6 changed files with 127 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

49
kafka-ui-react-app/src/components/Brokers/BrokersList/BrokersList.tsx
View file

@ -11,7 +11,9 @@ import CheckMarkRoundIcon from 'components/common/Icons/CheckMarkRoundIcon';
import { ColumnDef } from '@tanstack/react-table';
import { clusterBrokerPath } from 'lib/paths';
import Tooltip from 'components/common/Tooltip/Tooltip';
import ColoredCell from 'components/common/NewTable/ColoredCell';
import SkewHeader from './SkewHeader/SkewHeader';
import * as S from './BrokersList.styled';
const NA = 'N/A';
@ -57,11 +59,15 @@ const BrokersList: React.FC = () => {
count: segmentCount || NA,
port: broker?.port,
host: broker?.host,
partitionsLeader: broker?.partitionsLeader,
partitionsSkew: broker?.partitionsSkew,
leadersSkew: broker?.leadersSkew,
inSyncPartitions: broker?.inSyncPartitions,
};
});
}, [diskUsage, brokers]);
const columns = React.useMemo<ColumnDef<typeof rows>[]>(
const columns = React.useMemo<ColumnDef<(typeof rows)[number]>[]>(
() => [
{
header: 'Broker ID',
@ -84,7 +90,7 @@ const BrokersList: React.FC = () => {
),
},
{
header: 'Segment Size',
header: 'Disk usage',
accessorKey: 'size',
// eslint-disable-next-line react/no-unstable-nested-components
cell: ({ getValue, table, cell, column, renderValue, row }) =>
@ -98,10 +104,47 @@ const BrokersList: React.FC = () => {
cell={cell}
getValue={getValue}
renderValue={renderValue}
renderSegments
/>
),
},
{ header: 'Segment Count', accessorKey: 'count' },
{
// eslint-disable-next-line react/no-unstable-nested-components
header: () => <SkewHeader />,
accessorKey: 'partitionsSkew',
// eslint-disable-next-line react/no-unstable-nested-components
cell: ({ getValue }) => (
<ColoredCell
value={getValue<number>() !== null ? `${getValue<number>()}%` : '-'}
warn={getValue<number>() >= 10 && getValue<number>() < 20}
attention={getValue<number>() >= 20}
/>
),
},
{ header: 'Leaders', accessorKey: 'partitionsLeader' },
{
header: 'Leader skew',
accessorKey: 'leadersSkew',
// eslint-disable-next-line react/no-unstable-nested-components
cell: ({ getValue }) => (
<ColoredCell
value={getValue<number>() !== null ? `${getValue<number>()}%` : '-'}
warn={getValue<number>() >= 10 && getValue<number>() < 20}
attention={getValue<number>() >= 20}
/>
),
},
{
header: 'Online partitions',
accessorKey: 'inSyncPartitions',
// eslint-disable-next-line react/no-unstable-nested-components
cell: ({ getValue, row }) => (
<ColoredCell
value={getValue<number>()}
attention={getValue<number>() !== row.original.count}
/>
),
},
{ header: 'Port', accessorKey: 'port' },
{
header: 'Host',

6
kafka-ui-react-app/src/components/Brokers/BrokersList/SkewHeader/SkewHeader.styled.ts Normal file
View file

@ -0,0 +1,6 @@
import styled from 'styled-components';
export const CellWrapper = styled.div`
display: flex;
gap: 10px;
`;

17
kafka-ui-react-app/src/components/Brokers/BrokersList/SkewHeader/SkewHeader.tsx Normal file
View file

@ -0,0 +1,17 @@
import React from 'react';
import Tooltip from 'components/common/Tooltip/Tooltip';
import InfoIcon from 'components/common/Icons/InfoIcon';
import * as S from './SkewHeader.styled';
const SkewHeader: React.FC = () => (
<S.CellWrapper>
Partitions skew
<Tooltip
value={<InfoIcon />}
content="The divergence from the average brokers' value"
/>
</S.CellWrapper>
);
export default SkewHeader;

41
kafka-ui-react-app/src/components/common/NewTable/ColoredCell.tsx Normal file
View file

@ -0,0 +1,41 @@
import React from 'react';
import styled from 'styled-components';
interface CellProps {
isWarning?: boolean;
isAttention?: boolean;
}
interface ColoredCellProps {
value: number | string;
warn?: boolean;
attention?: boolean;
}
const Cell = styled.div<CellProps>`
color: ${(props) => {
if (props.isAttention) {
return props.theme.table.colored.color.attention;
}
if (props.isWarning) {
return props.theme.table.colored.color.warning;
}
return 'inherit';
}};
`;
const ColoredCell: React.FC<ColoredCellProps> = ({
value,
warn,
attention,
}) => {
return (
<Cell isWarning={warn} isAttention={attention}>
{value}
</Cell>
);
};
export default ColoredCell;

7
kafka-ui-react-app/src/components/common/NewTable/SizeCell.tsx
View file

@ -3,8 +3,11 @@ import { CellContext } from '@tanstack/react-table';
import BytesFormatted from 'components/common/BytesFormatted/BytesFormatted';
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const SizeCell: React.FC<CellContext<any, unknown>> = ({ getValue }) => (
<BytesFormatted value={getValue<string | number>()} />
const SizeCell: React.FC<CellContext<any, unknown> & { renderSegments?: boolean }> = ({ getValue, row, renderSegments = false }) => (
<>
<BytesFormatted value={getValue<string | number>()} />
{renderSegments ? `, ${row?.original.count} segment(s)` : null}
</>
);
export default SizeCell;

12
kafka-ui-react-app/src/theme/theme.ts
View file

@ -529,6 +529,12 @@ export const theme = {
active: Colors.neutral[90],
},
},
colored: {
color: {
attention: Colors.red[50],
warning: Colors.yellow[20],
},
},
expander: {
normal: Colors.brand[30],
hover: Colors.brand[40],
@ -924,6 +930,12 @@ export const darkTheme: ThemeType = {
active: Colors.neutral[0],
},
},
colored: {
color: {
attention: Colors.red[50],
warning: Colors.yellow[20],
},
},
expander: {
normal: Colors.brand[30],
hover: Colors.brand[40],