Add cluster wrapper + cleanup
This commit is contained in:
parent
7cd099c3e4
commit
c1d4654816
4 changed files with 47 additions and 30 deletions
|
@ -1,13 +1,10 @@
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import { Switch, Route, Redirect } from 'react-router-dom';
|
import { Switch, Route } from 'react-router-dom';
|
||||||
import './App.scss';
|
import './App.scss';
|
||||||
import BrokersContainer from './Brokers/BrokersContainer';
|
|
||||||
import TopicsContainer from './Topics/TopicsContainer';
|
|
||||||
import NavContainer from './Nav/NavContainer';
|
import NavContainer from './Nav/NavContainer';
|
||||||
import PageLoader from './common/PageLoader/PageLoader';
|
import PageLoader from './common/PageLoader/PageLoader';
|
||||||
import Dashboard from './Dashboard/Dashboard';
|
import Dashboard from './Dashboard/Dashboard';
|
||||||
import ConsumersGroupsContainer from './ConsumerGroups/ConsumersGroupsContainer';
|
import Cluster from './Cluster/Cluster';
|
||||||
import SchemasContainer from './Schemas/SchemasContainer';
|
|
||||||
|
|
||||||
interface AppProps {
|
interface AppProps {
|
||||||
isClusterListFetched: boolean;
|
isClusterListFetched: boolean;
|
||||||
|
@ -44,29 +41,10 @@ const App: React.FC<AppProps> = ({
|
||||||
path={['/', '/ui', '/ui/clusters']}
|
path={['/', '/ui', '/ui/clusters']}
|
||||||
component={Dashboard}
|
component={Dashboard}
|
||||||
/>
|
/>
|
||||||
<Route
|
<Route path="/ui/clusters/:clusterName" component={Cluster} />
|
||||||
path="/ui/clusters/:clusterName/brokers"
|
|
||||||
component={BrokersContainer}
|
|
||||||
/>
|
|
||||||
<Route
|
|
||||||
path="/ui/clusters/:clusterName/topics"
|
|
||||||
component={TopicsContainer}
|
|
||||||
/>
|
|
||||||
<Route
|
|
||||||
path="/ui/clusters/:clusterName/consumer-groups"
|
|
||||||
component={ConsumersGroupsContainer}
|
|
||||||
/>
|
|
||||||
<Route
|
|
||||||
path="/ui/clusters/:clusterName/schemas"
|
|
||||||
component={SchemasContainer}
|
|
||||||
/>
|
|
||||||
<Redirect
|
|
||||||
from="/ui/clusters/:clusterName"
|
|
||||||
to="/ui/clusters/:clusterName/brokers"
|
|
||||||
/>
|
|
||||||
</Switch>
|
</Switch>
|
||||||
) : (
|
) : (
|
||||||
<PageLoader />
|
<PageLoader fullHeight />
|
||||||
)}
|
)}
|
||||||
</main>
|
</main>
|
||||||
</div>
|
</div>
|
||||||
|
|
30
kafka-ui-react-app/src/components/Cluster/Cluster.tsx
Normal file
30
kafka-ui-react-app/src/components/Cluster/Cluster.tsx
Normal file
|
@ -0,0 +1,30 @@
|
||||||
|
import React from 'react';
|
||||||
|
import { Switch, Route, Redirect } from 'react-router-dom';
|
||||||
|
import BrokersContainer from 'components/Brokers/BrokersContainer';
|
||||||
|
import TopicsContainer from 'components/Topics/TopicsContainer';
|
||||||
|
import ConsumersGroupsContainer from 'components/ConsumerGroups/ConsumersGroupsContainer';
|
||||||
|
import Schemas from 'components/Schemas/Schemas';
|
||||||
|
|
||||||
|
const Cluster: React.FC = () => (
|
||||||
|
<Switch>
|
||||||
|
<Route
|
||||||
|
path="/ui/clusters/:clusterName/brokers"
|
||||||
|
component={BrokersContainer}
|
||||||
|
/>
|
||||||
|
<Route
|
||||||
|
path="/ui/clusters/:clusterName/topics"
|
||||||
|
component={TopicsContainer}
|
||||||
|
/>
|
||||||
|
<Route
|
||||||
|
path="/ui/clusters/:clusterName/consumer-groups"
|
||||||
|
component={ConsumersGroupsContainer}
|
||||||
|
/>
|
||||||
|
<Route path="/ui/clusters/:clusterName/schemas" component={Schemas} />
|
||||||
|
<Redirect
|
||||||
|
from="/ui/clusters/:clusterName"
|
||||||
|
to="/ui/clusters/:clusterName/brokers"
|
||||||
|
/>
|
||||||
|
</Switch>
|
||||||
|
);
|
||||||
|
|
||||||
|
export default Cluster;
|
|
@ -24,6 +24,7 @@ describe('Details', () => {
|
||||||
describe('View', () => {
|
describe('View', () => {
|
||||||
const setupWrapper = (props: Partial<DetailsProps> = {}) => (
|
const setupWrapper = (props: Partial<DetailsProps> = {}) => (
|
||||||
<Details
|
<Details
|
||||||
|
subject={schema.subject}
|
||||||
schema={schema}
|
schema={schema}
|
||||||
clusterName="Test cluster"
|
clusterName="Test cluster"
|
||||||
fetchSchemaVersions={jest.fn()}
|
fetchSchemaVersions={jest.fn()}
|
||||||
|
|
|
@ -16,7 +16,9 @@ exports[`Details View Initial state matches snapshot 1`] = `
|
||||||
},
|
},
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
/>
|
>
|
||||||
|
test
|
||||||
|
</Breadcrumb>
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
className="box"
|
className="box"
|
||||||
|
@ -121,7 +123,9 @@ exports[`Details View when page with schema versions is loading matches snapshot
|
||||||
},
|
},
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
/>
|
>
|
||||||
|
test
|
||||||
|
</Breadcrumb>
|
||||||
</div>
|
</div>
|
||||||
<PageLoader />
|
<PageLoader />
|
||||||
</div>
|
</div>
|
||||||
|
@ -143,7 +147,9 @@ exports[`Details View when page with schema versions loaded when schema has vers
|
||||||
},
|
},
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
/>
|
>
|
||||||
|
test
|
||||||
|
</Breadcrumb>
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
className="box"
|
className="box"
|
||||||
|
@ -275,7 +281,9 @@ exports[`Details View when page with schema versions loaded when versions are em
|
||||||
},
|
},
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
/>
|
>
|
||||||
|
test
|
||||||
|
</Breadcrumb>
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
className="box"
|
className="box"
|
||||||
|
|
Loading…
Add table
Reference in a new issue