Skip to content

Commit

Permalink
FE: Online partition count is red fix (#137)
Browse files Browse the repository at this point in the history 
Co-authored-by: Mgrdich <[email protected]>
  • Loading branch information
@Leshe4ka @Mgrdich
Leshe4ka and Mgrdich authored Feb 28, 2024
1 parent 8298929 commit 481df49
Show file tree
Hide file tree
Showing 17 changed files with 428 additions and 283 deletions.
235 changes: 28 additions & 207 deletions frontend/src/components/Brokers/BrokersList/BrokersList.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,27 +1,15 @@
import React from 'react';
import React, { useMemo } from 'react';
import { ClusterName } from 'redux/interfaces';
import { useNavigate } from 'react-router-dom';
import PageHeading from 'components/common/PageHeading/PageHeading';
import * as Metrics from 'components/common/Metrics';
import useAppParams from 'lib/hooks/useAppParams';
import Table from 'components/common/NewTable';
import { clusterBrokerPath } from 'lib/paths';
import { useBrokers } from 'lib/hooks/api/brokers';
import { useClusterStats } from 'lib/hooks/api/clusters';
import Table, { LinkCell, SizeCell } from 'components/common/NewTable';
import CheckMarkRoundIcon from 'components/common/Icons/CheckMarkRoundIcon';
import { ColumnDef } from '@tanstack/react-table';
import { clusterBrokerPath } from 'lib/paths';
import { keyBy } from 'lib/functions/keyBy';
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';
const NA_DISK_USAGE = {
segmentCount: NA,
segmentSize: NA,
};
import { BrokersMetrics } from './BrokersMetrics/BrokersMetrics';
import { getBrokersTableColumns, getBrokersTableRows } from './lib';

const BrokersList: React.FC = () => {
const navigate = useNavigate();
Expand All @@ -41,202 +29,35 @@ const BrokersList: React.FC = () => {
version,
} = clusterStats;

const rows = React.useMemo(() => {
if (!brokers || brokers.length === 0) {
return [];
}

const diskUsageByBroker = keyBy(diskUsage, 'brokerId');

return brokers.map((broker) => {
const diskUse = diskUsageByBroker[broker.id] || NA_DISK_USAGE;

return {
brokerId: broker.id,
size: diskUse.segmentSize,
count: diskUse.segmentCount,
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)[number]>[]>(
() => [
{
header: 'Broker ID',
accessorKey: 'brokerId',
// eslint-disable-next-line react/no-unstable-nested-components
cell: ({ getValue }) => (
<S.RowCell>
<LinkCell
value={`${getValue<string | number>()}`}
to={encodeURIComponent(`${getValue<string | number>()}`)}
/>
{getValue<string | number>() === activeControllers && (
<Tooltip
value={<CheckMarkRoundIcon />}
content="Active Controller"
placement="right"
/>
)}
</S.RowCell>
),
},
{
header: 'Disk usage',
accessorKey: 'size',
// eslint-disable-next-line react/no-unstable-nested-components
cell: ({ getValue, table, cell, column, renderValue, row }) =>
getValue() === NA ? (
NA
) : (
<SizeCell
table={table}
column={column}
row={row}
cell={cell}
getValue={getValue}
renderValue={renderValue}
renderSegments
precision={2}
/>
),
},
{
// eslint-disable-next-line react/no-unstable-nested-components
header: () => <SkewHeader />,
accessorKey: 'partitionsSkew',
// eslint-disable-next-line react/no-unstable-nested-components
cell: ({ getValue }) => {
const value = getValue<number>();
return (
<ColoredCell
value={value ? `${value.toFixed(2)}%` : '-'}
warn={value >= 10 && value < 20}
attention={value >= 20}
/>
);
},
},
{ header: 'Leaders', accessorKey: 'partitionsLeader' },
{
header: 'Leader skew',
accessorKey: 'leadersSkew',
// eslint-disable-next-line react/no-unstable-nested-components
cell: ({ getValue }) => {
const value = getValue<number>();
return (
<ColoredCell
value={value ? `${value.toFixed(2)}%` : '-'}
warn={value >= 10 && value < 20}
attention={value >= 20}
/>
);
},
},
{
header: 'Online partitions',
accessorKey: 'inSyncPartitions',
// eslint-disable-next-line react/no-unstable-nested-components
cell: ({ getValue, row }) => {
const value = getValue<number>();
return (
<ColoredCell
value={value}
attention={value !== row.original.count}
/>
);
},
},
{ header: 'Port', accessorKey: 'port' },
{
header: 'Host',
accessorKey: 'host',
},
],
[]
const rows = useMemo(
() =>
getBrokersTableRows({
brokers,
diskUsage,
activeControllers,
onlinePartitionCount,
offlinePartitionCount,
}),
[diskUsage, activeControllers, brokers]
);

const replicas = (inSyncReplicasCount ?? 0) + (outOfSyncReplicasCount ?? 0);
const areAllInSync = inSyncReplicasCount && replicas === inSyncReplicasCount;
const partitionIsOffline = offlinePartitionCount && offlinePartitionCount > 0;

const isActiveControllerUnKnown = typeof activeControllers === 'undefined';
const columns = useMemo(() => getBrokersTableColumns(), []);

return (
<>
<PageHeading text="Brokers" />
<Metrics.Wrapper>
<Metrics.Section title="Uptime">
<Metrics.Indicator label="Broker Count">
{brokerCount}
</Metrics.Indicator>
<Metrics.Indicator
label="Active Controller"
isAlert={isActiveControllerUnKnown}
>
{isActiveControllerUnKnown ? (
<S.DangerText>No Active Controller</S.DangerText>
) : (
activeControllers
)}
</Metrics.Indicator>
<Metrics.Indicator label="Version">{version}</Metrics.Indicator>
</Metrics.Section>
<Metrics.Section title="Partitions">
<Metrics.Indicator
label="Online"
isAlert
alertType={partitionIsOffline ? 'error' : 'success'}
>
{partitionIsOffline ? (
<Metrics.RedText>{onlinePartitionCount}</Metrics.RedText>
) : (
onlinePartitionCount
)}
<Metrics.LightText>
{` of ${
(onlinePartitionCount || 0) + (offlinePartitionCount || 0)
}
`}
</Metrics.LightText>
</Metrics.Indicator>
<Metrics.Indicator
label="URP"
title="Under replicated partitions"
isAlert
alertType={!underReplicatedPartitionCount ? 'success' : 'error'}
>
{!underReplicatedPartitionCount ? (
<Metrics.LightText>
{underReplicatedPartitionCount}
</Metrics.LightText>
) : (
<Metrics.RedText>{underReplicatedPartitionCount}</Metrics.RedText>
)}
</Metrics.Indicator>
<Metrics.Indicator
label="In Sync Replicas"
isAlert
alertType={areAllInSync ? 'success' : 'error'}
>
{areAllInSync ? (
replicas
) : (
<Metrics.RedText>{inSyncReplicasCount}</Metrics.RedText>
)}
<Metrics.LightText> of {replicas}</Metrics.LightText>
</Metrics.Indicator>
<Metrics.Indicator label="Out Of Sync Replicas">
{outOfSyncReplicasCount}
</Metrics.Indicator>
</Metrics.Section>
</Metrics.Wrapper>

<BrokersMetrics
brokerCount={brokerCount}
inSyncReplicasCount={inSyncReplicasCount}
outOfSyncReplicasCount={outOfSyncReplicasCount}
version={version}
activeControllers={activeControllers}
offlinePartitionCount={offlinePartitionCount}
onlinePartitionCount={onlinePartitionCount}
underReplicatedPartitionCount={underReplicatedPartitionCount}
/>

<Table
columns={columns}
data={rows}
Expand Down
5 changes: 5 additions & 0 deletions frontend/src/components/Brokers/BrokersList/BrokersMetrics/BrokersMetrics.styled.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
import styled from 'styled-components';

export const DangerText = styled.span`
color: ${({ theme }) => theme.circularAlert.color.error};
`;
105 changes: 105 additions & 0 deletions frontend/src/components/Brokers/BrokersList/BrokersMetrics/BrokersMetrics.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,105 @@
import React from 'react';
import * as Metrics from 'components/common/Metrics';

import * as S from './BrokersMetrics.styled';

type BrokersMetricsProps = {
brokerCount: number | undefined;
inSyncReplicasCount: number | undefined;
outOfSyncReplicasCount: number | undefined;
offlinePartitionCount: number | undefined;
activeControllers: number | undefined;
onlinePartitionCount: number | undefined;
underReplicatedPartitionCount: number | undefined;
version: string | undefined;
};

export const BrokersMetrics = ({
brokerCount,
version,
activeControllers,
outOfSyncReplicasCount,
inSyncReplicasCount,
offlinePartitionCount,
underReplicatedPartitionCount,
onlinePartitionCount,
}: BrokersMetricsProps) => {
const replicas = (inSyncReplicasCount ?? 0) + (outOfSyncReplicasCount ?? 0);
const areAllInSync = inSyncReplicasCount && replicas === inSyncReplicasCount;
const partitionIsOffline = offlinePartitionCount && offlinePartitionCount > 0;

const isActiveControllerUnKnown = typeof activeControllers === 'undefined';

return (
<Metrics.Wrapper>
<Metrics.Section title="Uptime">
<Metrics.Indicator label="Broker Count">
{brokerCount}
</Metrics.Indicator>

<Metrics.Indicator
label="Active Controller"
isAlert={isActiveControllerUnKnown}
>
{isActiveControllerUnKnown ? (
<S.DangerText>No Active Controller</S.DangerText>
) : (
activeControllers
)}
</Metrics.Indicator>

<Metrics.Indicator label="Version">{version}</Metrics.Indicator>
</Metrics.Section>

<Metrics.Section title="Partitions">
<Metrics.Indicator
label="Online"
isAlert
alertType={partitionIsOffline ? 'error' : 'success'}
>
{partitionIsOffline ? (
<Metrics.RedText>{onlinePartitionCount}</Metrics.RedText>
) : (
onlinePartitionCount
)}
<Metrics.LightText>
{` of ${(onlinePartitionCount || 0) + (offlinePartitionCount || 0)}
`}
</Metrics.LightText>
</Metrics.Indicator>

<Metrics.Indicator
label="URP"
title="Under replicated partitions"
isAlert
alertType={!underReplicatedPartitionCount ? 'success' : 'error'}
>
{!underReplicatedPartitionCount ? (
<Metrics.LightText>
{underReplicatedPartitionCount}
</Metrics.LightText>
) : (
<Metrics.RedText>{underReplicatedPartitionCount}</Metrics.RedText>
)}
</Metrics.Indicator>

<Metrics.Indicator
label="In Sync Replicas"
isAlert
alertType={areAllInSync ? 'success' : 'error'}
>
{areAllInSync ? (
replicas
) : (
<Metrics.RedText>{inSyncReplicasCount}</Metrics.RedText>
)}
<Metrics.LightText> of {replicas}</Metrics.LightText>
</Metrics.Indicator>

<Metrics.Indicator label="Out Of Sync Replicas">
{outOfSyncReplicasCount}
</Metrics.Indicator>
</Metrics.Section>
</Metrics.Wrapper>
);
};
4 changes: 0 additions & 4 deletions ...Brokers/BrokersList/BrokersList.styled.ts → ...okersList/TableCells/TableCells.styled.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,3 @@ export const RowCell = styled.div`
padding-left: 6px;
}
`;

export const DangerText = styled.span`
color: ${({ theme }) => theme.circularAlert.color.error};
`;
Loading

0 comments on commit 481df49

Please sign in to comment.