Skip to content

Commit

Permalink
Fixes cluster overview gap with optional sections
Browse files Browse the repository at this point in the history
  • Loading branch information
@jvorcak
jvorcak committed Oct 11, 2024
1 parent 41dc316 commit d2845ae
Show file tree
Hide file tree
Showing 3 changed files with 101 additions and 109 deletions.
13 changes: 0 additions & 13 deletions frontend/src/components/pages/overview/Overview.scss
View file
Original file line number Diff line number Diff line change
@@ -1,17 +1,4 @@
.overviewGrid {
display: grid;

grid-template-areas:
"health health"
"debugInfo details"
"broker details"
"resources details"
;
grid-template-columns: fit-content(60%) 1fr;
grid-template-rows: auto auto auto 1fr;
align-items: start;

gap: 1.5rem;

h3 {
margin-bottom: 22px;
Expand Down
195 changes: 100 additions & 95 deletions frontend/src/components/pages/overview/Overview.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -83,101 +83,106 @@ class Overview extends PageComponent {
const version = overview.redpanda.version ?? overview.kafka.version;

return <>
<PageContent>
<div className="overviewGrid">
<Section py={5} gridArea="health">
<Flex>
<Statistic title="Cluster Status" value={clusterStatus.displayText} className={'status-bar ' + clusterStatus.className} />
<Statistic title="Cluster Storage Size" value={brokerSize} />
<Statistic title="Cluster Version" value={version} />
<Statistic title="Brokers Online" value={`${overview.kafka.brokersOnline} of ${overview.kafka.brokersExpected}`} />
<Statistic title="Topics" value={overview.kafka.topicsCount} />
<Statistic title="Replicas" value={overview.kafka.replicasCount} />
</Flex>
</Section>

{api.clusterHealth?.isHealthy === false && <Section py={4} gridArea="debugInfo">
<Heading as="h3" >Cluster Health Debug</Heading>
<ClusterHealthOverview />
</Section>}

<Section py={4} gridArea="broker">
<Heading as="h3" >Broker Details</Heading>
<DataTable<BrokerWithConfigAndStorage>
data={brokers}
sorting={false}
defaultPageSize={10}
pagination
columns={[
{
size: 80,
header: 'ID',
accessorKey: 'brokerId',
cell: ({row: {original: broker}}) => renderIdColumn(`${broker.brokerId}`, broker),
},
{
header: 'Status',
cell: ({row: {original: broker}}) =>
(
<Flex gap={2}>
{api.clusterHealth?.nodesDown.includes(broker.brokerId) ?
<>
<MdError size={18} color={colors.brandError} />
Down
</> : <>
<MdCheck size={18} color={colors.green} />
Running
</>}
</Flex>
),
size: Infinity
},
{
size: 120,
header: 'Size',
accessorKey: 'totalLogDirSizeBytes',
cell: ({row: {original: {totalLogDirSizeBytes}}}) => totalLogDirSizeBytes && prettyBytesOrNA(totalLogDirSizeBytes),
},
{
id: 'view',
size: 100,
header: '',
cell: ({row: {original: broker}}) => {
return (
<Button size="sm" variant="ghost" onClick={() => appGlobal.history.push('/overview/' + broker.brokerId)}>
View
</Button>
);
}
},
...(this.hasRack ? [{ size: 100, header: 'Rack', cell: ({row: {original: broker}}: {row: Row<BrokerWithConfigAndStorage>}) => broker.rack }] : [])
]}
/>
</Section>

<Section py={4} gridArea="resources">
<h3>Resources and updates</h3>

<div style={{ display: 'flex', flexDirection: 'row', maxWidth: '600px', gap: '5rem' }}>
<ul className="resource-list">
<li><a href="https://docs.redpanda.com/docs/home/" rel="" className="resource-link" >
<span className="dot">&bull;</span>
Documentation
</a></li>
<li><a href="https://docs.redpanda.com/docs/get-started/rpk-install/" rel="" className="resource-link" >
<span className="dot">&bull;</span>
CLI Tools
</a></li>
</ul>
</div>
</Section>

<Section py={4} gridArea="details">
<h3>Cluster Details</h3>

<ClusterDetails />
</Section>
</div>
<PageContent className="overviewGrid">
<Section py={5} my={4}>
<Flex>
<Statistic title="Cluster Status" value={clusterStatus.displayText} className={'status-bar ' + clusterStatus.className} />
<Statistic title="Cluster Storage Size" value={brokerSize} />
<Statistic title="Cluster Version" value={version} />
<Statistic title="Brokers Online" value={`${overview.kafka.brokersOnline} of ${overview.kafka.brokersExpected}`} />
<Statistic title="Topics" value={overview.kafka.topicsCount} />
<Statistic title="Replicas" value={overview.kafka.replicasCount} />
</Flex>
</Section>

<Grid gridTemplateColumns={{ base: '1fr', lg: 'fit-content(60%) 1fr' }} gap={6}>

<GridItem display="flex" flexDirection="column" gap={6}>
{api.clusterHealth?.isHealthy===false && <Section py={4} gridArea="debugInfo">
<Heading as="h3">Cluster Health Debug</Heading>
<ClusterHealthOverview/>
</Section>}

<Section py={4}>
<Heading as="h3">Broker Details</Heading>
<DataTable<BrokerWithConfigAndStorage>
data={brokers}
sorting={false}
defaultPageSize={10}
pagination
columns={[
{
size: 80,
header: 'ID',
accessorKey: 'brokerId',
cell: ({row: {original: broker}}) => renderIdColumn(`${broker.brokerId}`, broker),
},
{
header: 'Status',
cell: ({row: {original: broker}}) =>
(
<Flex gap={2}>
{api.clusterHealth?.nodesDown.includes(broker.brokerId) ?
<>
<MdError size={18} color={colors.brandError}/>
Down
</>:<>
<MdCheck size={18} color={colors.green}/>
Running
</>}
</Flex>
),
size: Infinity
},
{
size: 120,
header: 'Size',
accessorKey: 'totalLogDirSizeBytes',
cell: ({row: {original: {totalLogDirSizeBytes}}}) => totalLogDirSizeBytes && prettyBytesOrNA(totalLogDirSizeBytes),
},
{
id: 'view',
size: 100,
header: '',
cell: ({row: {original: broker}}) => {
return (
<Button size="sm" variant="ghost" onClick={() => appGlobal.history.push('/overview/' + broker.brokerId)}>
View
</Button>
);
}
},
...(this.hasRack ? [{size: 100, header: 'Rack', cell: ({row: {original: broker}}: { row: Row<BrokerWithConfigAndStorage> }) => broker.rack}]:[])
]}
/>
</Section>

<Section py={4}>
<h3>Resources and updates</h3>

<div style={{display: 'flex', flexDirection: 'row', maxWidth: '600px', gap: '5rem'}}>
<ul className="resource-list">
<li><a href="https://docs.redpanda.com/docs/home/" rel="" className="resource-link">
<span className="dot">&bull;</span>
Documentation
</a></li>
<li><a href="https://docs.redpanda.com/docs/get-started/rpk-install/" rel="" className="resource-link">
<span className="dot">&bull;</span>
CLI Tools
</a></li>
</ul>
</div>
</Section>
</GridItem>

<GridItem>
<Section py={4}>
<h3>Cluster Details</h3>

<ClusterDetails/>
</Section>
</GridItem>
</Grid>
</PageContent>
</>
}
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/state/backendApi.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -121,7 +121,7 @@ import { Features } from './supportedFeatures';
import { TransformMetadata } from '../protogen/redpanda/api/dataplane/v1alpha1/transform_pb';
import { Pipeline, PipelineCreate, PipelineUpdate } from '../protogen/redpanda/api/dataplane/v1alpha2/pipeline_pb';
import { License, ListEnterpriseFeaturesResponse_Feature, SetLicenseRequest, SetLicenseResponse } from '../protogen/redpanda/api/console/v1alpha1/license_pb';
import { CreateDebugBundleResponse, DebugBundleStatus, DebugBundleStatus_Status, DeleteDebugBundleFileForBroker, GetClusterHealthResponse, GetDebugBundleStatusResponse_DebugBundleBrokerStatus, UnhealthyReason } from '../protogen/redpanda/api/console/v1alpha1/debug_bundle_pb';
import { CreateDebugBundleResponse, DebugBundleStatus, DebugBundleStatus_Status, DeleteDebugBundleFileForBroker, GetClusterHealthResponse, GetDebugBundleStatusResponse_DebugBundleBrokerStatus } from '../protogen/redpanda/api/console/v1alpha1/debug_bundle_pb';

const REST_TIMEOUT_SEC = 25;
export const REST_CACHE_DURATION_SEC = 20;
Expand Down

0 comments on commit d2845ae

Please sign in to comment.