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

ISSUE-3427_frontend store getValue call in a variable, update percentage view

Browse source
This commit is contained in:
Nail Badiullin 2023-04-26 10:30:00 +04:00
parent 9c6f561cee
commit 6b86202c97
1 changed files with 29 additions and 20 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

@ -113,37 +113,46 @@ const BrokersList: React.FC = () => {
header: () => <SkewHeader />, header: () => <SkewHeader />,
accessorKey: 'partitionsSkew', accessorKey: 'partitionsSkew',
// eslint-disable-next-line react/no-unstable-nested-components // eslint-disable-next-line react/no-unstable-nested-components
cell: ({ getValue }) => ( cell: ({ getValue }) => {
<ColoredCell const value = getValue<number>();
value={getValue<number>() !== null ? `${getValue<number>()}%` : '-'} return (
warn={getValue<number>() >= 10 && getValue<number>() < 20} <ColoredCell
attention={getValue<number>() >= 20} value={value ? `${value.toFixed(2)}%` : '-'}
/> warn={value >= 10 && value < 20}
), attention={value >= 20}
/>
);
},
}, },
{ header: 'Leaders', accessorKey: 'partitionsLeader' }, { header: 'Leaders', accessorKey: 'partitionsLeader' },
{ {
header: 'Leader skew', header: 'Leader skew',
accessorKey: 'leadersSkew', accessorKey: 'leadersSkew',
// eslint-disable-next-line react/no-unstable-nested-components // eslint-disable-next-line react/no-unstable-nested-components
cell: ({ getValue }) => ( cell: ({ getValue }) => {
<ColoredCell const value = getValue<number>();
value={getValue<number>() !== null ? `${getValue<number>()}%` : '-'} return (
warn={getValue<number>() >= 10 && getValue<number>() < 20} <ColoredCell
attention={getValue<number>() >= 20} value={value ? `${value.toFixed(2)}%` : '-'}
/> warn={value >= 10 && value < 20}
), attention={value >= 20}
/>
);
},
}, },
{ {
header: 'Online partitions', header: 'Online partitions',
accessorKey: 'inSyncPartitions', accessorKey: 'inSyncPartitions',
// eslint-disable-next-line react/no-unstable-nested-components // eslint-disable-next-line react/no-unstable-nested-components
cell: ({ getValue, row }) => ( cell: ({ getValue, row }) => {
<ColoredCell const value = getValue<number>();
value={getValue<number>()} return (
attention={getValue<number>() !== row.original.count} <ColoredCell
/> value={value}
), attention={value !== row.original.count}
/>
);
},
}, },
{ header: 'Port', accessorKey: 'port' }, { header: 'Port', accessorKey: 'port' },
{ {