80 lines
2.2 KiB
TypeScript
80 lines
2.2 KiB
TypeScript
import React from 'react';
|
|
import { Switch, Route, useParams } from 'react-router-dom';
|
|
import { clusterTopicPath, clusterTopicsPath } from 'lib/paths';
|
|
import { ClusterName, TopicName } from 'redux/interfaces';
|
|
import Breadcrumb from 'components/common/Breadcrumb/Breadcrumb';
|
|
import EditContainer from 'components/Topics/Topic/Edit/EditContainer';
|
|
import DetailsContainer from 'components/Topics/Topic/Details/DetailsContainer';
|
|
import PageLoader from 'components/common/PageLoader/PageLoader';
|
|
|
|
interface RouterParams {
|
|
clusterName: ClusterName;
|
|
topicName: TopicName;
|
|
}
|
|
|
|
interface TopicProps {
|
|
isTopicFetching: boolean;
|
|
fetchTopicDetails: (clusterName: ClusterName, topicName: TopicName) => void;
|
|
}
|
|
|
|
const Topic: React.FC<TopicProps> = ({
|
|
isTopicFetching,
|
|
fetchTopicDetails,
|
|
}) => {
|
|
const { clusterName, topicName } = useParams<RouterParams>();
|
|
|
|
React.useEffect(() => {
|
|
fetchTopicDetails(clusterName, topicName);
|
|
}, [fetchTopicDetails, clusterName, topicName]);
|
|
|
|
const rootBreadcrumbLinks = [
|
|
{
|
|
href: clusterTopicsPath(clusterName),
|
|
label: 'All Topics',
|
|
},
|
|
];
|
|
|
|
const childBreadcrumbLinks = [
|
|
...rootBreadcrumbLinks,
|
|
{
|
|
href: clusterTopicPath(clusterName, topicName),
|
|
label: topicName,
|
|
},
|
|
];
|
|
|
|
const topicPageUrl = '/ui/clusters/:clusterName/topics/:topicName';
|
|
|
|
return (
|
|
<div className="section">
|
|
<div className="level">
|
|
<div className="level-item level-left">
|
|
<Switch>
|
|
<Route exact path={`${topicPageUrl}/edit`}>
|
|
<Breadcrumb links={childBreadcrumbLinks}>Edit</Breadcrumb>
|
|
</Route>
|
|
<Route path={topicPageUrl}>
|
|
<Breadcrumb links={rootBreadcrumbLinks}>{topicName}</Breadcrumb>
|
|
</Route>
|
|
</Switch>
|
|
</div>
|
|
</div>
|
|
{isTopicFetching ? (
|
|
<PageLoader />
|
|
) : (
|
|
<Switch>
|
|
<Route
|
|
exact
|
|
path="/ui/clusters/:clusterName/topics/:topicName/edit"
|
|
component={EditContainer}
|
|
/>
|
|
<Route
|
|
path="/ui/clusters/:clusterName/topics/:topicName"
|
|
component={DetailsContainer}
|
|
/>
|
|
</Switch>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Topic;
|