39 lines
1.1 KiB
TypeScript
39 lines
1.1 KiB
TypeScript
import React from 'react';
|
|
import { ClusterName } from 'redux/interfaces';
|
|
import {
|
|
Switch,
|
|
Route,
|
|
} from 'react-router-dom';
|
|
import ListContainer from './List/ListContainer';
|
|
import DetailsContainer from './Details/DetailsContainer';
|
|
import PageLoader from 'components/common/PageLoader/PageLoader';
|
|
import NewContainer from './New/NewContainer';
|
|
|
|
interface Props {
|
|
clusterName: ClusterName;
|
|
isFetched: boolean;
|
|
fetchBrokers: (clusterName: ClusterName) => void;
|
|
fetchTopicList: (clusterName: ClusterName) => void;
|
|
}
|
|
|
|
const Topics: React.FC<Props> = ({
|
|
clusterName,
|
|
isFetched,
|
|
fetchTopicList,
|
|
}) => {
|
|
React.useEffect(() => { fetchTopicList(clusterName); }, [fetchTopicList, clusterName]);
|
|
|
|
if (isFetched) {
|
|
return (
|
|
<Switch>
|
|
<Route exact path="/clusters/:clusterName/topics" component={ListContainer} />
|
|
<Route exact path="/clusters/:clusterName/topics/new" component={NewContainer} />
|
|
<Route path="/clusters/:clusterName/topics/:topicName" component={DetailsContainer} />
|
|
</Switch>
|
|
);
|
|
}
|
|
|
|
return (<PageLoader />);
|
|
};
|
|
|
|
export default Topics;
|