Skip to content

Commit

Permalink
Merge branch 'main' into fix/cel-fe
Browse files Browse the repository at this point in the history
  • Loading branch information
@Haarolean
Haarolean authored Mar 1, 2024
2 parents b47aa33 + 3608b26 commit c78e7b2
Show file tree
Hide file tree
Showing 28 changed files with 487 additions and 323 deletions.
3 changes: 1 addition & 2 deletions frontend/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1" />

<!-- Favicons -->
<link rel="icon" href="<%= PUBLIC_PATH %>/favicon/favicon.ico" sizes="any" />
<link rel="icon" href="<%= PUBLIC_PATH %>/favicon/icon.svg" type="image/svg+xml" />
<link rel="icon" href="<%= PUBLIC_PATH %>/favicon/favicon.svg" type="image/svg+xml" />
<link rel="apple-touch-icon" href="<%= PUBLIC_PATH %>/favicon/apple-touch-icon.png" />
<link rel="manifest" href="<%= PUBLIC_PATH %>/manifest.json" />

Expand Down
Binary file removed frontend/public/favicon/favicon.ico
View file
Binary file not shown.
10 changes: 6 additions & 4 deletions frontend/public/favicon/icon.svg → frontend/public/favicon/favicon.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 1 addition & 1 deletion frontend/src/components/App.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,7 @@ const App: React.FC = () => {
<QueryClientProvider client={queryClient}>
<GlobalSettingsProvider>
<ThemeProvider theme={isDarkMode ? darkTheme : theme}>
<Suspense fallback={<PageLoader />}>
<Suspense fallback={<PageLoader fullSize />}>
<UserInfoRolesAccessProvider>
<ConfirmContextProvider>
<GlobalCSS />
Expand Down
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};
`;
Loading

0 comments on commit c78e7b2

Please sign in to comment.