0ct0pu5/kafka-ui
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix-routes-for-details (#45)

Browse source
This commit is contained in:
Azat Gataullin 2020-05-05 15:03:44 +03:00 • committed by GitHub
parent 2d45c488f9
commit 42085b5f07
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 27 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

38
kafka-ui-react-app/src/components/Topics/Details/Details.tsx
View file

@ -2,7 +2,12 @@ import React from 'react';
import { ClusterName, Topic, TopicDetails, TopicName } from 'redux/interfaces';
import Breadcrumb from 'components/common/Breadcrumb/Breadcrumb';
import { NavLink, Switch, Route } from 'react-router-dom';
import { clusterTopicsPath, clusterTopicSettingsPath, clusterTopicPath, clusterTopicMessagesPath } from 'lib/paths';
import {
clusterTopicsPath,
clusterTopicSettingsPath,
clusterTopicPath,
clusterTopicMessagesPath,
} from 'lib/paths';
import OverviewContainer from './Overview/OverviewContainer';
import MessagesContainer from './Messages/MessagesContainer';
import SettingsContainer from './Settings/SettingsContainer';
@ -12,17 +17,16 @@ interface Props extends Topic, TopicDetails {
topicName: TopicName;
}
const Details: React.FC<Props> = ({
clusterName,
topicName,
}) => {
const Details: React.FC<Props> = ({ clusterName, topicName }) => {
return (
<div className="section">
<div className="level">
<div className="level-item level-left">
<Breadcrumb links={[
{ href: clusterTopicsPath(clusterName), label: 'All Topics' },
]}>
<Breadcrumb
links={[
{ href: clusterTopicsPath(clusterName), label: 'All Topics' },
]}
>
{topicName}
</Breadcrumb>
</div>
@ -57,9 +61,21 @@ const Details: React.FC<Props> = ({
</nav>
<br />
<Switch>
<Route exact path="/clusters/:clusterName/topics/:topicName/messages" component={MessagesContainer} />
<Route exact path="/clusters/:clusterName/topics/:topicName/settings" component={SettingsContainer} />
<Route exact path="/clusters/:clusterName/topics/:topicName" component={OverviewContainer} />
<Route
exact
path="/ui/clusters/:clusterName/topics/:topicName/messages"
component={MessagesContainer}
/>
<Route
exact
path="/ui/clusters/:clusterName/topics/:topicName/settings"
component={SettingsContainer}
/>
<Route
exact
path="/ui/clusters/:clusterName/topics/:topicName"
component={OverviewContainer}
/>
</Switch>
</div>
</div>