1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798 |
- import React, { Suspense } from 'react';
- import PageHeading from 'components/common/PageHeading/PageHeading';
- import * as Metrics from 'components/common/Metrics';
- import BytesFormatted from 'components/common/BytesFormatted/BytesFormatted';
- import useAppParams from 'lib/hooks/useAppParams';
- import {
- clusterBrokerMetricsPath,
- clusterBrokerMetricsRelativePath,
- clusterBrokerConfigsPath,
- ClusterBrokerParam,
- clusterBrokerPath,
- clusterBrokersPath,
- clusterBrokerConfigsRelativePath,
- } from 'lib/paths';
- import { useClusterStats } from 'lib/hooks/api/clusters';
- import { useBrokers } from 'lib/hooks/api/brokers';
- import { NavLink, Route, Routes } from 'react-router-dom';
- import BrokerLogdir from 'components/Brokers/Broker/BrokerLogdir/BrokerLogdir';
- import BrokerMetrics from 'components/Brokers/Broker/BrokerMetrics/BrokerMetrics';
- import Navbar from 'components/common/Navigation/Navbar.styled';
- import PageLoader from 'components/common/PageLoader/PageLoader';
- import Configs from './Configs/Configs';
- const Broker: React.FC = () => {
- const { clusterName, brokerId } = useAppParams<ClusterBrokerParam>();
- const { data: clusterStats } = useClusterStats(clusterName);
- const { data: brokers } = useBrokers(clusterName);
- if (!clusterStats) return null;
- const brokerItem = brokers?.find(({ id }) => id === Number(brokerId));
- const brokerDiskUsage = clusterStats.diskUsage?.find(
- (item) => item.brokerId === Number(brokerId)
- );
- return (
- <>
- <PageHeading
- text={`Broker ${brokerId}`}
- backTo={clusterBrokersPath(clusterName)}
- backText="Brokers"
- />
- <Metrics.Wrapper>
- <Metrics.Section>
- <Metrics.Indicator label="Segment Size">
- <BytesFormatted
- value={brokerDiskUsage?.segmentSize}
- precision={2}
- />
- </Metrics.Indicator>
- <Metrics.Indicator label="Segment Count">
- {brokerDiskUsage?.segmentCount}
- </Metrics.Indicator>
- <Metrics.Indicator label="Port">{brokerItem?.port}</Metrics.Indicator>
- <Metrics.Indicator label="Host">{brokerItem?.host}</Metrics.Indicator>
- </Metrics.Section>
- </Metrics.Wrapper>
- <Navbar role="navigation">
- <NavLink
- to={clusterBrokerPath(clusterName, brokerId)}
- className={({ isActive }) => (isActive ? 'is-active' : '')}
- end
- >
- Log directories
- </NavLink>
- <NavLink
- to={clusterBrokerConfigsPath(clusterName, brokerId)}
- className={({ isActive }) => (isActive ? 'is-active' : '')}
- >
- Configs
- </NavLink>
- <NavLink
- to={clusterBrokerMetricsPath(clusterName, brokerId)}
- className={({ isActive }) => (isActive ? 'is-active' : '')}
- >
- Metrics
- </NavLink>
- </Navbar>
- <Suspense fallback={<PageLoader />}>
- <Routes>
- <Route index element={<BrokerLogdir />} />
- <Route
- path={clusterBrokerConfigsRelativePath}
- element={<Configs />}
- />
- <Route
- path={clusterBrokerMetricsRelativePath}
- element={<BrokerMetrics />}
- />
- </Routes>
- </Suspense>
- </>
- );
- };
- export default Broker;
|