({ sink }: { sink: Sink })
| 26 | import { SinkStatistics } from "./SinkOverview/SinkStatistics"; |
| 27 | |
| 28 | const SinkOverview = ({ sink }: { sink: Sink }) => { |
| 29 | const ref = usePageHeadingRef(); |
| 30 | const [timePeriodMinutes, setInitialTimePeriodMinutes] = useTimePeriodMinutes( |
| 31 | { localStorageKey: "mz-sink-stats-time-period" }, |
| 32 | ); |
| 33 | const { |
| 34 | data: { rows }, |
| 35 | } = useCurrentSinkStatistics({ sinkId: sink.id }); |
| 36 | const stats = rows.at(0); |
| 37 | return ( |
| 38 | <MainContentContainer> |
| 39 | <VStack width="100%" alignItems="flex-start" spacing={6}> |
| 40 | {sink.error && ( |
| 41 | <Alert variant="error" width="100%" message={sink.error} /> |
| 42 | )} |
| 43 | <Stack |
| 44 | alignItems="flex-start" |
| 45 | spacing={10} |
| 46 | width="100%" |
| 47 | flexDirection={{ base: "column", xl: "row" }} |
| 48 | > |
| 49 | <VStack width="100%" alignItems="flex-start" spacing={6}> |
| 50 | <OverviewHeader |
| 51 | connector={sink} |
| 52 | timePeriodMinutes={timePeriodMinutes} |
| 53 | setTimePeriodMinutes={setInitialTimePeriodMinutes} |
| 54 | clusterName={sink.clusterName} |
| 55 | replicaName={stats?.replicaName} |
| 56 | ref={ref} |
| 57 | /> |
| 58 | <SinkStatistics sink={sink} timePeriodMinutes={timePeriodMinutes} /> |
| 59 | </VStack> |
| 60 | <Stack |
| 61 | alignItems={{ base: "center", md: "flex-start" }} |
| 62 | flexDirection={{ base: "column", md: "row", xl: "column" }} |
| 63 | flexShrink="0" |
| 64 | justifyContent="center" |
| 65 | mb="10" |
| 66 | spacing="6" |
| 67 | width={{ base: "100%", xl: "400px" }} |
| 68 | > |
| 69 | <ClusterMetrics |
| 70 | clusterId={sink.clusterId} |
| 71 | clusterName={sink.clusterName} |
| 72 | replicaName={stats?.replicaName} |
| 73 | width="400px" |
| 74 | /> |
| 75 | <AsideBox title="Details" width="400px"> |
| 76 | <DetailItem label="Type"> |
| 77 | {prettyConnectorType(sink.type)} |
| 78 | </DetailItem> |
| 79 | {sink.connectionName && ( |
| 80 | <DetailItem label="Connection"> |
| 81 | {sink.connectionName} |
| 82 | </DetailItem> |
| 83 | )} |
| 84 | {sink.kafkaTopic && ( |
| 85 | <DetailItem |
nothing calls this directly
no test coverage detected