Broker.tsx 3.2 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798
  1. import React, { Suspense } from 'react';
  2. import PageHeading from 'components/common/PageHeading/PageHeading';
  3. import * as Metrics from 'components/common/Metrics';
  4. import BytesFormatted from 'components/common/BytesFormatted/BytesFormatted';
  5. import useAppParams from 'lib/hooks/useAppParams';
  6. import {
  7. clusterBrokerMetricsPath,
  8. clusterBrokerMetricsRelativePath,
  9. clusterBrokerConfigsPath,
  10. ClusterBrokerParam,
  11. clusterBrokerPath,
  12. clusterBrokersPath,
  13. clusterBrokerConfigsRelativePath,
  14. } from 'lib/paths';
  15. import { useClusterStats } from 'lib/hooks/api/clusters';
  16. import { useBrokers } from 'lib/hooks/api/brokers';
  17. import { NavLink, Route, Routes } from 'react-router-dom';
  18. import BrokerLogdir from 'components/Brokers/Broker/BrokerLogdir/BrokerLogdir';
  19. import BrokerMetrics from 'components/Brokers/Broker/BrokerMetrics/BrokerMetrics';
  20. import Navbar from 'components/common/Navigation/Navbar.styled';
  21. import PageLoader from 'components/common/PageLoader/PageLoader';
  22. import Configs from './Configs/Configs';
  23. const Broker: React.FC = () => {
  24. const { clusterName, brokerId } = useAppParams<ClusterBrokerParam>();
  25. const { data: clusterStats } = useClusterStats(clusterName);
  26. const { data: brokers } = useBrokers(clusterName);
  27. if (!clusterStats) return null;
  28. const brokerItem = brokers?.find(({ id }) => id === Number(brokerId));
  29. const brokerDiskUsage = clusterStats.diskUsage?.find(
  30. (item) => item.brokerId === Number(brokerId)
  31. );
  32. return (
  33. <>
  34. <PageHeading
  35. text={`Broker ${brokerId}`}
  36. backTo={clusterBrokersPath(clusterName)}
  37. backText="Brokers"
  38. />
  39. <Metrics.Wrapper>
  40. <Metrics.Section>
  41. <Metrics.Indicator label="Segment Size">
  42. <BytesFormatted
  43. value={brokerDiskUsage?.segmentSize}
  44. precision={2}
  45. />
  46. </Metrics.Indicator>
  47. <Metrics.Indicator label="Segment Count">
  48. {brokerDiskUsage?.segmentCount}
  49. </Metrics.Indicator>
  50. <Metrics.Indicator label="Port">{brokerItem?.port}</Metrics.Indicator>
  51. <Metrics.Indicator label="Host">{brokerItem?.host}</Metrics.Indicator>
  52. </Metrics.Section>
  53. </Metrics.Wrapper>
  54. <Navbar role="navigation">
  55. <NavLink
  56. to={clusterBrokerPath(clusterName, brokerId)}
  57. className={({ isActive }) => (isActive ? 'is-active' : '')}
  58. end
  59. >
  60. Log directories
  61. </NavLink>
  62. <NavLink
  63. to={clusterBrokerConfigsPath(clusterName, brokerId)}
  64. className={({ isActive }) => (isActive ? 'is-active' : '')}
  65. >
  66. Configs
  67. </NavLink>
  68. <NavLink
  69. to={clusterBrokerMetricsPath(clusterName, brokerId)}
  70. className={({ isActive }) => (isActive ? 'is-active' : '')}
  71. >
  72. Metrics
  73. </NavLink>
  74. </Navbar>
  75. <Suspense fallback={<PageLoader />}>
  76. <Routes>
  77. <Route index element={<BrokerLogdir />} />
  78. <Route
  79. path={clusterBrokerConfigsRelativePath}
  80. element={<Configs />}
  81. />
  82. <Route
  83. path={clusterBrokerMetricsRelativePath}
  84. element={<BrokerMetrics />}
  85. />
  86. </Routes>
  87. </Suspense>
  88. </>
  89. );
  90. };
  91. export default Broker;