diff --git a/kafka-ui-api/src/main/java/com/provectus/kafka/ui/rest/config/CustomWebFilter.java b/kafka-ui-api/src/main/java/com/provectus/kafka/ui/rest/config/CustomWebFilter.java index 370e89847f8f4ad4050c3717d96a5e9a19922567..e117a43b6c1e5d936faad4a0212ccac8f07e8017 100644 --- a/kafka-ui-api/src/main/java/com/provectus/kafka/ui/rest/config/CustomWebFilter.java +++ b/kafka-ui-api/src/main/java/com/provectus/kafka/ui/rest/config/CustomWebFilter.java @@ -10,7 +10,7 @@ import reactor.core.publisher.Mono; public class CustomWebFilter implements WebFilter { @Override public Mono filter(ServerWebExchange exchange, WebFilterChain chain) { - if (exchange.getRequest().getURI().getPath().equals("/")) { + if (exchange.getRequest().getURI().getPath().equals("/") || exchange.getRequest().getURI().getPath().startsWith("/ui")) { return chain.filter(exchange.mutate().request(exchange.getRequest().mutate().path("/index.html").build()).build()); } diff --git a/kafka-ui-react-app/src/components/App.tsx b/kafka-ui-react-app/src/components/App.tsx index 46a5ff8419136b19aa78c8be62da0acf9fd7f90c..7c53592906bee9754b67bd9e7a962a994fc69eb6 100644 --- a/kafka-ui-react-app/src/components/App.tsx +++ b/kafka-ui-react-app/src/components/App.tsx @@ -1,9 +1,5 @@ import React from 'react'; -import { - Switch, - Route, - Redirect, -} from 'react-router-dom'; +import { Switch, Route, Redirect } from 'react-router-dom'; import './App.scss'; import BrokersContainer from './Brokers/BrokersContainer'; import TopicsContainer from './Topics/TopicsContainer'; @@ -21,13 +17,19 @@ const App: React.FC = ({ isClusterListFetched, fetchClustersList, }) => { - React.useEffect(() => { fetchClustersList() }, [fetchClustersList]); + React.useEffect(() => { + fetchClustersList(); + }, [fetchClustersList]); return (
-
); diff --git a/kafka-ui-react-app/src/components/ConsumerGroups/ConsumerGroups.tsx b/kafka-ui-react-app/src/components/ConsumerGroups/ConsumerGroups.tsx index 6286345e018382494d30c7fcd80e0f71ebd2bacd..747cf998f2e1c0446db96571d1a339b92222b13f 100644 --- a/kafka-ui-react-app/src/components/ConsumerGroups/ConsumerGroups.tsx +++ b/kafka-ui-react-app/src/components/ConsumerGroups/ConsumerGroups.tsx @@ -1,11 +1,8 @@ import React from 'react'; import { ClusterName } from 'redux/interfaces'; -import { - Switch, - Route, -} from 'react-router-dom'; -import ListContainer from './List/ListContainer'; +import { Switch, Route } from 'react-router-dom'; import PageLoader from 'components/common/PageLoader/PageLoader'; +import ListContainer from './List/ListContainer'; interface Props { clusterName: ClusterName; @@ -18,17 +15,23 @@ const ConsumerGroups: React.FC = ({ isFetched, fetchConsumerGroupsList, }) => { - React.useEffect(() => { fetchConsumerGroupsList(clusterName); }, [fetchConsumerGroupsList, clusterName]); + React.useEffect(() => { + fetchConsumerGroupsList(clusterName); + }, [fetchConsumerGroupsList, clusterName]); if (isFetched) { return ( - + ); } - return (); + return ; }; export default ConsumerGroups; diff --git a/kafka-ui-react-app/src/components/Nav/Nav.tsx b/kafka-ui-react-app/src/components/Nav/Nav.tsx index acd427bc6fa25a816894da0d28ad48cc2a7f05e9..a6c40087894a903ef87f0375c345f4d24eca5963 100644 --- a/kafka-ui-react-app/src/components/Nav/Nav.tsx +++ b/kafka-ui-react-app/src/components/Nav/Nav.tsx @@ -5,7 +5,7 @@ import cx from 'classnames'; import ClusterMenu from './ClusterMenu'; interface Props { - isClusterListFetched: boolean, + isClusterListFetched: boolean; clusters: Cluster[]; className?: string; } @@ -16,22 +16,21 @@ const Nav: React.FC = ({ className, }) => ( ); diff --git a/kafka-ui-react-app/src/components/Topics/Topics.tsx b/kafka-ui-react-app/src/components/Topics/Topics.tsx index ed1652c847cf0343674b51262a3a891fc8cb7217..b66a72d3d564129e55dd282415c61f43802daea7 100644 --- a/kafka-ui-react-app/src/components/Topics/Topics.tsx +++ b/kafka-ui-react-app/src/components/Topics/Topics.tsx @@ -1,12 +1,9 @@ import React from 'react'; import { ClusterName } from 'redux/interfaces'; -import { - Switch, - Route, -} from 'react-router-dom'; +import { Switch, Route } from 'react-router-dom'; +import PageLoader from 'components/common/PageLoader/PageLoader'; import ListContainer from './List/ListContainer'; import DetailsContainer from './Details/DetailsContainer'; -import PageLoader from 'components/common/PageLoader/PageLoader'; import NewContainer from './New/NewContainer'; interface Props { @@ -21,19 +18,32 @@ const Topics: React.FC = ({ isFetched, fetchTopicList, }) => { - React.useEffect(() => { fetchTopicList(clusterName); }, [fetchTopicList, clusterName]); + React.useEffect(() => { + fetchTopicList(clusterName); + }, [fetchTopicList, clusterName]); if (isFetched) { return ( - - - + + + ); } - return (); + return ; }; export default Topics; diff --git a/kafka-ui-react-app/src/lib/paths.ts b/kafka-ui-react-app/src/lib/paths.ts index c01592db0edb5d9d1f388286a0f3628a768e34d7..78e5e0167c2813bc3f971ac6716eb1a86a55e2fd 100644 --- a/kafka-ui-react-app/src/lib/paths.ts +++ b/kafka-ui-react-app/src/lib/paths.ts @@ -1,17 +1,25 @@ -import { - ClusterName, - TopicName, -} from 'redux/interfaces'; +import { ClusterName, TopicName } from 'redux/interfaces'; -const clusterPath = (clusterName: ClusterName) => `/clusters/${clusterName}`; +const clusterPath = (clusterName: ClusterName) => `/ui/clusters/${clusterName}`; -export const clusterBrokersPath = (clusterName: ClusterName) => `${clusterPath(clusterName)}/brokers`; +export const clusterBrokersPath = (clusterName: ClusterName) => + `${clusterPath(clusterName)}/brokers`; +export const clusterTopicsPath = (clusterName: ClusterName) => + `${clusterPath(clusterName)}/topics`; +export const clusterTopicNewPath = (clusterName: ClusterName) => + `${clusterPath(clusterName)}/topics/new`; +export const clusterConsumerGroupsPath = (clusterName: ClusterName) => + `${clusterPath(clusterName)}/consumer-groups`; -export const clusterTopicsPath = (clusterName: ClusterName) => `${clusterPath(clusterName)}/topics`; -export const clusterTopicNewPath = (clusterName: ClusterName) => `${clusterPath(clusterName)}/topics/new`; - -export const clusterTopicPath = (clusterName: ClusterName, topicName: TopicName) => `${clusterTopicsPath(clusterName)}/${topicName}`; -export const clusterTopicSettingsPath = (clusterName: ClusterName, topicName: TopicName) => `${clusterTopicsPath(clusterName)}/${topicName}/settings`; -export const clusterTopicMessagesPath = (clusterName: ClusterName, topicName: TopicName) => `${clusterTopicsPath(clusterName)}/${topicName}/messages`; - -export const clusterConsumerGroupsPath = (clusterName: ClusterName) => `${clusterPath(clusterName)}/consumer-groups`; \ No newline at end of file +export const clusterTopicPath = ( + clusterName: ClusterName, + topicName: TopicName +) => `${clusterTopicsPath(clusterName)}/${topicName}`; +export const clusterTopicSettingsPath = ( + clusterName: ClusterName, + topicName: TopicName +) => `${clusterTopicsPath(clusterName)}/${topicName}/settings`; +export const clusterTopicMessagesPath = ( + clusterName: ClusterName, + topicName: TopicName +) => `${clusterTopicsPath(clusterName)}/${topicName}/messages`;