37 lines
888 B
TypeScript
37 lines
888 B
TypeScript
import React from 'react';
|
|
import { ClusterId, Topic } from 'types';
|
|
import MetricsWrapper from 'components/common/Dashboard/MetricsWrapper';
|
|
import Indicator from 'components/common/Dashboard/Indicator';
|
|
import Breadcrumb from 'components/common/Breadcrumb/Breadcrumb';
|
|
|
|
interface Props extends Topic {
|
|
clusterId: ClusterId;
|
|
}
|
|
|
|
const Details: React.FC<Props> = ({
|
|
clusterId,
|
|
name,
|
|
partitions,
|
|
internal,
|
|
}) => {
|
|
return (
|
|
<div className="section">
|
|
<Breadcrumb links={[
|
|
{ href: `/clusters/${clusterId}/topics`, label: 'All Topics' },
|
|
]}>
|
|
{name}
|
|
</Breadcrumb>
|
|
|
|
<MetricsWrapper title="Partitions">
|
|
<Indicator title="Under replicated partitions">
|
|
0
|
|
</Indicator>
|
|
<Indicator title="Out of sync replicas">
|
|
0
|
|
</Indicator>
|
|
</MetricsWrapper>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default Details;
|