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