From 8b64575bd5ea0bbf27aa0f205fdfa6ac9b23439c Mon Sep 17 00:00:00 2001 From: Zhenya Taran Date: Sun, 1 Mar 2020 16:07:33 +0200 Subject: [PATCH] use cluster name instead of cluster id --- .../ui/cluster/config/ClustersProperties.java | 3 -- .../ui/cluster/model/ClustersStorage.java | 21 +++++----- .../ui/cluster/service/ClusterService.java | 20 +++++----- .../kafka/ui/kafka/KafkaService.java | 2 +- .../main/resources/swagger/kafka-ui-api.yaml | 24 +++++------ kafka-ui-react-app/mock/index.js | 24 +++++------ .../mock/payload/brokerMetrics.json | 4 +- kafka-ui-react-app/mock/payload/brokers.json | 4 +- kafka-ui-react-app/mock/payload/clusters.json | 4 +- kafka-ui-react-app/mock/payload/topics.json | 14 +++---- kafka-ui-react-app/src/components/App.tsx | 8 ++-- .../src/components/Brokers/Brokers.tsx | 20 +++++----- .../components/Brokers/BrokersContainer.ts | 14 +++---- .../ClustersWidget/ClusterWidget.tsx | 3 +- .../src/components/Nav/ClusterMenu.tsx | 7 ++-- .../src/components/Topics/Details/Details.tsx | 22 +++++----- .../Topics/Details/DetailsContainer.ts | 8 ++-- .../Topics/Details/Messages/Messages.tsx | 10 ++--- .../Details/Messages/MessagesContainer.ts | 10 ++--- .../Topics/Details/Overview/Overview.tsx | 14 +++---- .../Details/Overview/OverviewContainer.ts | 14 +++---- .../Topics/Details/Settings/Settings.tsx | 18 ++++----- .../Details/Settings/SettingsContainer.ts | 14 +++---- .../src/components/Topics/List/List.tsx | 10 ++--- .../components/Topics/List/ListContainer.ts | 8 ++-- .../src/components/Topics/New/New.tsx | 18 ++++----- .../src/components/Topics/New/NewContainer.ts | 16 ++++---- .../src/components/Topics/Topics.tsx | 20 +++++----- .../src/components/Topics/TopicsContainer.ts | 12 +++--- kafka-ui-react-app/src/lib/paths.ts | 16 ++++---- .../src/redux/actions/thunks.ts | 40 +++++++++---------- kafka-ui-react-app/src/redux/api/brokers.ts | 10 ++--- kafka-ui-react-app/src/redux/api/topics.ts | 20 +++++----- .../src/redux/interfaces/cluster.ts | 6 +-- 34 files changed, 224 insertions(+), 234 deletions(-) diff --git a/kafka-ui-api/src/main/java/com/provectus/kafka/ui/cluster/config/ClustersProperties.java b/kafka-ui-api/src/main/java/com/provectus/kafka/ui/cluster/config/ClustersProperties.java index 909e8c9f0c..a19be53800 100644 --- a/kafka-ui-api/src/main/java/com/provectus/kafka/ui/cluster/config/ClustersProperties.java +++ b/kafka-ui-api/src/main/java/com/provectus/kafka/ui/cluster/config/ClustersProperties.java @@ -16,11 +16,8 @@ public class ClustersProperties { @Data public static class Cluster { - String id; String name; String bootstrapServers; - String jmxHost; - String jmxPort; String zookeeper; } } diff --git a/kafka-ui-api/src/main/java/com/provectus/kafka/ui/cluster/model/ClustersStorage.java b/kafka-ui-api/src/main/java/com/provectus/kafka/ui/cluster/model/ClustersStorage.java index d244760f43..393dc7f282 100644 --- a/kafka-ui-api/src/main/java/com/provectus/kafka/ui/cluster/model/ClustersStorage.java +++ b/kafka-ui-api/src/main/java/com/provectus/kafka/ui/cluster/model/ClustersStorage.java @@ -7,14 +7,13 @@ import org.mapstruct.factory.Mappers; import org.springframework.stereotype.Component; import javax.annotation.PostConstruct; -import java.util.ArrayList; -import java.util.List; +import java.util.*; @Component @RequiredArgsConstructor public class ClustersStorage { - private final List kafkaClusters = new ArrayList<>(); + private final Map kafkaClusters = new HashMap<>(); private final ClustersProperties clusterProperties; @@ -23,18 +22,18 @@ public class ClustersStorage { @PostConstruct public void init() { for (ClustersProperties.Cluster clusterProperties : clusterProperties.getClusters()) { - kafkaClusters.add(clusterMapper.toKafkaCluster(clusterProperties)); + if (kafkaClusters.get(clusterProperties.getName()) != null) { + throw new IllegalStateException("Application config isn't correct. Two clusters can't have the same name"); + } + kafkaClusters.put(clusterProperties.getName(), clusterMapper.toKafkaCluster(clusterProperties)); } } - public List getKafkaClusters() { - return kafkaClusters; + public Collection getKafkaClusters() { + return kafkaClusters.values(); } - public KafkaCluster getClusterById(String clusterId) { - return kafkaClusters.stream() - .filter(cluster -> cluster.getId() != null && cluster.getId().equals(clusterId)) - .findFirst() - .orElse(null); + public KafkaCluster getClusterByName(String clusterName) { + return kafkaClusters.get(clusterName); } } diff --git a/kafka-ui-api/src/main/java/com/provectus/kafka/ui/cluster/service/ClusterService.java b/kafka-ui-api/src/main/java/com/provectus/kafka/ui/cluster/service/ClusterService.java index 665f68d041..f58762c29d 100644 --- a/kafka-ui-api/src/main/java/com/provectus/kafka/ui/cluster/service/ClusterService.java +++ b/kafka-ui-api/src/main/java/com/provectus/kafka/ui/cluster/service/ClusterService.java @@ -29,32 +29,32 @@ public class ClusterService { return Mono.just(ResponseEntity.ok(Flux.fromIterable(clusters))); } - public Mono> getBrokersMetrics(String clusterId) { - KafkaCluster cluster = clustersStorage.getClusterById(clusterId); + public Mono> getBrokersMetrics(String name) { + KafkaCluster cluster = clustersStorage.getClusterByName(name); if (cluster == null) return null; return Mono.just(ResponseEntity.ok(cluster.getBrokersMetrics())); } - public Mono>> getTopics(String clusterId) { - KafkaCluster cluster = clustersStorage.getClusterById(clusterId); + public Mono>> getTopics(String name) { + KafkaCluster cluster = clustersStorage.getClusterByName(name); if (cluster == null) return null; return Mono.just(ResponseEntity.ok(Flux.fromIterable(cluster.getTopics()))); } - public Mono> getTopicDetails(String clusterId, String topicName) { - KafkaCluster cluster = clustersStorage.getClusterById(clusterId); + public Mono> getTopicDetails(String name, String topicName) { + KafkaCluster cluster = clustersStorage.getClusterByName(name); if (cluster == null) return null; return Mono.just(ResponseEntity.ok(cluster.getOrCreateTopicDetails(topicName))); } - public Mono>> getTopicConfigs(String clusterId, String topicName) { - KafkaCluster cluster = clustersStorage.getClusterById(clusterId); + public Mono>> getTopicConfigs(String name, String topicName) { + KafkaCluster cluster = clustersStorage.getClusterByName(name); if (cluster == null) return null; return Mono.just(ResponseEntity.ok(Flux.fromIterable(cluster.getTopicConfigsMap().get(topicName)))); } - public Mono> createTopic(String clusterId, Mono topicFormData) { - KafkaCluster cluster = clustersStorage.getClusterById(clusterId); + public Mono> createTopic(String name, Mono topicFormData) { + KafkaCluster cluster = clustersStorage.getClusterByName(name); if (cluster == null) return null; return kafkaService.createTopic(cluster, topicFormData); } diff --git a/kafka-ui-api/src/main/java/com/provectus/kafka/ui/kafka/KafkaService.java b/kafka-ui-api/src/main/java/com/provectus/kafka/ui/kafka/KafkaService.java index 658cb4ea25..cb2ab55dc2 100644 --- a/kafka-ui-api/src/main/java/com/provectus/kafka/ui/kafka/KafkaService.java +++ b/kafka-ui-api/src/main/java/com/provectus/kafka/ui/kafka/KafkaService.java @@ -139,7 +139,7 @@ public class KafkaService { } private Topic collectTopicData(KafkaCluster kafkaCluster, TopicDescription topicDescription) { - var topic = new Topic().clusterId(kafkaCluster.getId()); + var topic = new Topic(); topic.setInternal(topicDescription.isInternal()); topic.setName(topicDescription.name()); diff --git a/kafka-ui-contract/src/main/resources/swagger/kafka-ui-api.yaml b/kafka-ui-contract/src/main/resources/swagger/kafka-ui-api.yaml index c432ced2f7..6fc71e2035 100644 --- a/kafka-ui-contract/src/main/resources/swagger/kafka-ui-api.yaml +++ b/kafka-ui-contract/src/main/resources/swagger/kafka-ui-api.yaml @@ -30,14 +30,14 @@ paths: items: $ref: '#/components/schemas/Cluster' - /api/clusters/{clusterId}/brokers: + /api/clusters/{clusterName}/brokers: get: tags: - /api/clusters summary: getBrokers operationId: getBrokers parameters: - - name: clusterId + - name: clusterName in: path required: true schema: @@ -52,14 +52,14 @@ paths: items: $ref: '#/components/schemas/Broker' - /api/clusters/{clusterId}/metrics/broker: + /api/clusters/{clusterName}/metrics/broker: get: tags: - /api/clusters summary: getBrokersMetrics operationId: getBrokersMetrics parameters: - - name: clusterId + - name: clusterName in: path required: true schema: @@ -72,14 +72,14 @@ paths: schema: $ref: '#/components/schemas/BrokersMetrics' - /api/clusters/{clusterId}/topics: + /api/clusters/{clusterName}/topics: get: tags: - /api/clusters summary: getTopics operationId: getTopics parameters: - - name: clusterId + - name: clusterName in: path required: true schema: @@ -99,7 +99,7 @@ paths: summary: createTopic operationId: createTopic parameters: - - name: clusterId + - name: clusterName in: path required: true schema: @@ -117,14 +117,14 @@ paths: schema: $ref: '#/components/schemas/Topic' - /api/clusters/{clusterId}/topics/{topicName}: + /api/clusters/{clusterName}/topics/{topicName}: get: tags: - /api/clusters summary: getTopicDetails operationId: getTopicDetails parameters: - - name: clusterId + - name: clusterName in: path required: true schema: @@ -142,14 +142,14 @@ paths: schema: $ref: '#/components/schemas/TopicDetails' - /api/clusters/{clusterId}/topics/{topicName}/config: + /api/clusters/{clusterName}/topics/{topicName}/config: get: tags: - /api/clusters summary: getTopicConfigs operationId: getTopicConfigs parameters: - - name: clusterId + - name: clusterName in: path required: true schema: @@ -228,8 +228,6 @@ components: Topic: type: object properties: - clusterId: - type: string name: type: string internal: diff --git a/kafka-ui-react-app/mock/index.js b/kafka-ui-react-app/mock/index.js index 50c019ef67..8e589dfcdb 100644 --- a/kafka-ui-react-app/mock/index.js +++ b/kafka-ui-react-app/mock/index.js @@ -1,5 +1,4 @@ const jsonServer = require('json-server'); -const _ = require('lodash'); const clusters = require('./payload/clusters.json'); const brokers = require('./payload/brokers.json'); const brokerMetrics = require('./payload/brokerMetrics.json'); @@ -8,13 +7,13 @@ const topicDetails = require('./payload/topicDetails.json'); const topicConfigs = require('./payload/topicConfigs.json'); const db = { - clusters, - brokers, - brokerMetrics: brokerMetrics.map(({ clusterId, ...rest }) => ({ ...rest, id: clusterId })), - topics: topics.map((topic) => ({ ...topic, id: topic.name })), - topicDetails, - topicConfigs, -} + clusters, + brokers, + brokerMetrics: brokerMetrics.map(({clusterName, ...rest}) => ({...rest, id: clusterName})), + topics: topics.map((topic) => ({...topic, id: topic.name})), + topicDetails, + topicConfigs, +}; const server = jsonServer.create(); const router = jsonServer.router(db); const middlewares = jsonServer.defaults(); @@ -29,11 +28,10 @@ server.use((_req, _res, next) => { server.use( jsonServer.rewriter({ - '/*': '/$1', - '/clusters/:clusterId/metrics/broker': '/brokerMetrics/:clusterId', - '/clusters/:clusterId/topics/:id': '/topicDetails', - '/clusters/:clusterId/topics/:id/config': '/topicDetails', - '/clusters/:clusterId/topics/:id/config': '/topicConfigs', + '/api/*': '/$1', + '/clusters/:clusterName/metrics/broker': '/brokerMetrics/:clusterName', + '/clusters/:clusterName/topics/:id': '/topicDetails', + '/clusters/:clusterName/topics/:id/config': '/topicConfigs', }) ); diff --git a/kafka-ui-react-app/mock/payload/brokerMetrics.json b/kafka-ui-react-app/mock/payload/brokerMetrics.json index b912f82c01..b3c5e348b9 100644 --- a/kafka-ui-react-app/mock/payload/brokerMetrics.json +++ b/kafka-ui-react-app/mock/payload/brokerMetrics.json @@ -1,6 +1,6 @@ [ { - "clusterId": "wrYGf-csNgiGdK7B_ADF7Z", + "clusterName": "fake.cluster", "bytesInPerSec": 8027, "brokerCount": 1, "zooKeeperStatus": 1, @@ -20,7 +20,7 @@ "diskUsageDistribution": "even" }, { - "clusterId": "dMMQx-WRh77BKYas_g2ZTz", + "clusterName": "kafka-ui.cluster", "bytesInPerSec": 8194, "brokerCount": 1, "zooKeeperStatus": 1, diff --git a/kafka-ui-react-app/mock/payload/brokers.json b/kafka-ui-react-app/mock/payload/brokers.json index ad880579b7..a362630cb5 100644 --- a/kafka-ui-react-app/mock/payload/brokers.json +++ b/kafka-ui-react-app/mock/payload/brokers.json @@ -1,7 +1,7 @@ [ { "brokerId": 1, - "clusterId": "wrYGf-csNgiGdK7B_ADF7Z", + "name": "fake.cluster", "bytesInPerSec": 1234, "bytesOutPerSec": 3567, "segmentSize": 912360707, @@ -9,7 +9,7 @@ }, { "brokerId": 2, - "clusterId": "dMMQx-WRh77BKYas_g2ZTz", + "name": "kafka-ui.cluster", "bytesInPerSec": 9194, "bytesOutPerSec": 7924, "segmentSize": 840060707, diff --git a/kafka-ui-react-app/mock/payload/clusters.json b/kafka-ui-react-app/mock/payload/clusters.json index 6a3cb24c7a..aa3b2f2fad 100644 --- a/kafka-ui-react-app/mock/payload/clusters.json +++ b/kafka-ui-react-app/mock/payload/clusters.json @@ -1,6 +1,6 @@ [ { - "id": "wrYGf-csNgiGdK7B_ADF7Z", + "id": "fake.cluster", "name": "fake.cluster", "defaultCluster": true, "status": "online", @@ -11,7 +11,7 @@ "bytesOutPerSec": 4320 }, { - "id": "dMMQx-WRh77BKYas_g2ZTz", + "id": "kafka-ui.cluster", "name": "kafka-ui.cluster", "defaultCluster": false, "status": "offline", diff --git a/kafka-ui-react-app/mock/payload/topics.json b/kafka-ui-react-app/mock/payload/topics.json index 2cb05f2439..f18d740d10 100644 --- a/kafka-ui-react-app/mock/payload/topics.json +++ b/kafka-ui-react-app/mock/payload/topics.json @@ -1,6 +1,6 @@ [ { - "clusterId": "wrYGf-csNgiGdK7B_ADF7Z", + "clusterId": "fake.cluster", "name": "docker-connect-status", "internal": true, "partitions": [ @@ -62,7 +62,7 @@ ] }, { - "clusterId": "wrYGf-csNgiGdK7B_ADF7Z", + "clusterId": "fake.cluster", "name": "dsadsda", "internal": false, "partitions": [ @@ -80,7 +80,7 @@ ] }, { - "clusterId": "wrYGf-csNgiGdK7B_ADF7Z", + "clusterId": "fake.cluster", "name": "my-topic", "internal": false, "partitions": [ @@ -98,7 +98,7 @@ ] }, { - "clusterId": "wrYGf-csNgiGdK7B_ADF7Z", + "clusterId": "fake.cluster", "name": "docker-connect-offsets", "internal": false, "partitions": [ @@ -171,7 +171,7 @@ ] }, { - "clusterId": "dMMQx-WRh77BKYas_g2ZTz", + "clusterId": "kafka-ui.cluster", "name": "_schemas", "internal": false, "partitions": [ @@ -189,7 +189,7 @@ ] }, { - "clusterId": "dMMQx-WRh77BKYas_g2ZTz", + "clusterId": "kafka-ui.cluster", "name": "docker-connect-configs", "internal": false, "partitions": [ @@ -207,7 +207,7 @@ ] }, { - "clusterId": "dMMQx-WRh77BKYas_g2ZTz", + "clusterId": "kafka-ui.cluster", "name": "_kafka-ui-test-topic-monitoring-message-rekey-store", "internal": false, "partitions": [ diff --git a/kafka-ui-react-app/src/components/App.tsx b/kafka-ui-react-app/src/components/App.tsx index 89abae2f49..f32df104b6 100644 --- a/kafka-ui-react-app/src/components/App.tsx +++ b/kafka-ui-react-app/src/components/App.tsx @@ -37,9 +37,9 @@ const App: React.FC = ({ - - - + + + ) : ( @@ -48,6 +48,6 @@ const App: React.FC = ({ ); -} +}; export default App; diff --git a/kafka-ui-react-app/src/components/Brokers/Brokers.tsx b/kafka-ui-react-app/src/components/Brokers/Brokers.tsx index ddad0b610e..436556d339 100644 --- a/kafka-ui-react-app/src/components/Brokers/Brokers.tsx +++ b/kafka-ui-react-app/src/components/Brokers/Brokers.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { ClusterId, BrokerMetrics, ZooKeeperStatus } from 'redux/interfaces'; +import { ClusterName, BrokerMetrics, ZooKeeperStatus } from 'redux/interfaces'; import useInterval from 'lib/hooks/useInterval'; import formatBytes from 'lib/utils/formatBytes'; import cx from 'classnames'; @@ -8,16 +8,16 @@ import Indicator from 'components/common/Dashboard/Indicator'; import Breadcrumb from 'components/common/Breadcrumb/Breadcrumb'; interface Props extends BrokerMetrics { - clusterId: string; + clusterName: ClusterName; isFetched: boolean; minDiskUsage: number; maxDiskUsage: number; - fetchBrokers: (clusterId: ClusterId) => void; - fetchBrokerMetrics: (clusterId: ClusterId) => void; + fetchBrokers: (clusterName: ClusterName) => void; + fetchBrokerMetrics: (clusterName: ClusterName) => void; } const Topics: React.FC = ({ - clusterId, + clusterName, isFetched, brokerCount, activeControllers, @@ -35,13 +35,13 @@ const Topics: React.FC = ({ }) => { React.useEffect( () => { - fetchBrokers(clusterId); - fetchBrokerMetrics(clusterId); + fetchBrokers(clusterName); + fetchBrokerMetrics(clusterName); }, - [fetchBrokers, fetchBrokerMetrics, clusterId], + [fetchBrokers, fetchBrokerMetrics, clusterName], ); - useInterval(() => { fetchBrokerMetrics(clusterId); }, 5000); + useInterval(() => { fetchBrokerMetrics(clusterName); }, 5000); const [minDiskUsageValue, minDiskUsageSize] = formatBytes(minDiskUsage); const [maxDiskUsageValue, maxDiskUsageSize] = formatBytes(maxDiskUsage); @@ -116,6 +116,6 @@ const Topics: React.FC = ({ ); -} +}; export default Topics; diff --git a/kafka-ui-react-app/src/components/Brokers/BrokersContainer.ts b/kafka-ui-react-app/src/components/Brokers/BrokersContainer.ts index ec374ca0d3..57bb7d73fa 100644 --- a/kafka-ui-react-app/src/components/Brokers/BrokersContainer.ts +++ b/kafka-ui-react-app/src/components/Brokers/BrokersContainer.ts @@ -5,18 +5,18 @@ import { } from 'redux/actions'; import Brokers from './Brokers'; import * as brokerSelectors from 'redux/reducers/brokers/selectors'; -import { RootState, ClusterId } from 'redux/interfaces'; +import { RootState, ClusterName } from 'redux/interfaces'; import { RouteComponentProps } from 'react-router-dom'; interface RouteProps { - clusterId: string; + clusterName: ClusterName; } interface OwnProps extends RouteComponentProps { } -const mapStateToProps = (state: RootState, { match: { params: { clusterId } }}: OwnProps) => ({ +const mapStateToProps = (state: RootState, { match: { params: { clusterName } }}: OwnProps) => ({ isFetched: brokerSelectors.getIsBrokerListFetched(state), - clusterId, + clusterName, brokerCount: brokerSelectors.getBrokerCount(state), zooKeeperStatus: brokerSelectors.getZooKeeperStatus(state), activeControllers: brokerSelectors.getActiveControllers(state), @@ -31,8 +31,8 @@ const mapStateToProps = (state: RootState, { match: { params: { clusterId } }}: }); const mapDispatchToProps = { - fetchBrokers: (clusterId: ClusterId) => fetchBrokers(clusterId), - fetchBrokerMetrics: (clusterId: ClusterId) => fetchBrokerMetrics(clusterId), -} + fetchBrokers: (clusterName: ClusterName) => fetchBrokers(clusterName), + fetchBrokerMetrics: (clusterName: ClusterName) => fetchBrokerMetrics(clusterName), +}; export default connect(mapStateToProps, mapDispatchToProps)(Brokers); diff --git a/kafka-ui-react-app/src/components/Dashboard/ClustersWidget/ClusterWidget.tsx b/kafka-ui-react-app/src/components/Dashboard/ClustersWidget/ClusterWidget.tsx index bc7e8d7851..e813163edf 100644 --- a/kafka-ui-react-app/src/components/Dashboard/ClustersWidget/ClusterWidget.tsx +++ b/kafka-ui-react-app/src/components/Dashboard/ClustersWidget/ClusterWidget.tsx @@ -5,7 +5,6 @@ import { NavLink } from 'react-router-dom'; import { clusterBrokersPath } from 'lib/paths'; const ClusterWidget: React.FC = ({ - id, name, status, topicCount, @@ -14,7 +13,7 @@ const ClusterWidget: React.FC = ({ bytesOutPerSec, onlinePartitionCount, }) => ( - +
{ }; const ClusterMenu: React.FC = ({ - id, name, defaultCluster, }) => (
  • - + {defaultCluster && } {name}
      - + Brokers - + Topics
    diff --git a/kafka-ui-react-app/src/components/Topics/Details/Details.tsx b/kafka-ui-react-app/src/components/Topics/Details/Details.tsx index 9069fb4975..74185608cc 100644 --- a/kafka-ui-react-app/src/components/Topics/Details/Details.tsx +++ b/kafka-ui-react-app/src/components/Topics/Details/Details.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { ClusterId, Topic, TopicDetails, TopicName } from 'redux/interfaces'; +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'; @@ -8,12 +8,12 @@ import MessagesContainer from './Messages/MessagesContainer'; import SettingsContainer from './Settings/SettingsContainer'; interface Props extends Topic, TopicDetails { - clusterId: ClusterId; + clusterName: ClusterName; topicName: TopicName; } const Details: React.FC = ({ - clusterId, + clusterName, topicName, }) => { return ( @@ -21,7 +21,7 @@ const Details: React.FC = ({
    {topicName} @@ -32,7 +32,7 @@ const Details: React.FC = ({
    - - - + + +
    ); -} +}; export default Details; diff --git a/kafka-ui-react-app/src/components/Topics/Details/DetailsContainer.ts b/kafka-ui-react-app/src/components/Topics/Details/DetailsContainer.ts index 177ed134dc..98fe3a12b7 100644 --- a/kafka-ui-react-app/src/components/Topics/Details/DetailsContainer.ts +++ b/kafka-ui-react-app/src/components/Topics/Details/DetailsContainer.ts @@ -1,17 +1,17 @@ import { connect } from 'react-redux'; import Details from './Details'; -import { RootState } from 'redux/interfaces'; +import {ClusterName, RootState} from 'redux/interfaces'; import { withRouter, RouteComponentProps } from 'react-router-dom'; interface RouteProps { - clusterId: string; + clusterName: ClusterName; topicName: string; } interface OwnProps extends RouteComponentProps { } -const mapStateToProps = (state: RootState, { match: { params: { topicName, clusterId } } }: OwnProps) => ({ - clusterId, +const mapStateToProps = (state: RootState, { match: { params: { topicName, clusterName } } }: OwnProps) => ({ + clusterName, topicName, }); diff --git a/kafka-ui-react-app/src/components/Topics/Details/Messages/Messages.tsx b/kafka-ui-react-app/src/components/Topics/Details/Messages/Messages.tsx index a6264e8fb4..429456465b 100644 --- a/kafka-ui-react-app/src/components/Topics/Details/Messages/Messages.tsx +++ b/kafka-ui-react-app/src/components/Topics/Details/Messages/Messages.tsx @@ -1,20 +1,20 @@ import React from 'react'; -import { ClusterId, TopicName } from 'redux/interfaces'; +import { ClusterName, TopicName } from 'redux/interfaces'; interface Props { - clusterId: ClusterId; + clusterName: ClusterName; topicName: TopicName; } const Messages: React.FC = ({ - clusterId, + clusterName, topicName, }) => { return (

    - Messages from {clusterId}{topicName} + Messages from {clusterName}{topicName}

    ); -} +}; export default Messages; diff --git a/kafka-ui-react-app/src/components/Topics/Details/Messages/MessagesContainer.ts b/kafka-ui-react-app/src/components/Topics/Details/Messages/MessagesContainer.ts index 8e3e0a81c0..2a26dd181e 100644 --- a/kafka-ui-react-app/src/components/Topics/Details/Messages/MessagesContainer.ts +++ b/kafka-ui-react-app/src/components/Topics/Details/Messages/MessagesContainer.ts @@ -1,17 +1,17 @@ import { connect } from 'react-redux'; import Messages from './Messages'; -import { RootState } from 'redux/interfaces'; +import {ClusterName, RootState, TopicName} from 'redux/interfaces'; import { withRouter, RouteComponentProps } from 'react-router-dom'; interface RouteProps { - clusterId: string; - topicName: string; + clusterName: ClusterName; + topicName: TopicName; } interface OwnProps extends RouteComponentProps { } -const mapStateToProps = (state: RootState, { match: { params: { topicName, clusterId } } }: OwnProps) => ({ - clusterId, +const mapStateToProps = (state: RootState, { match: { params: { topicName, clusterName } } }: OwnProps) => ({ + clusterName, topicName, }); diff --git a/kafka-ui-react-app/src/components/Topics/Details/Overview/Overview.tsx b/kafka-ui-react-app/src/components/Topics/Details/Overview/Overview.tsx index db6890c308..69ee5e7a49 100644 --- a/kafka-ui-react-app/src/components/Topics/Details/Overview/Overview.tsx +++ b/kafka-ui-react-app/src/components/Topics/Details/Overview/Overview.tsx @@ -1,18 +1,18 @@ import React from 'react'; -import { ClusterId, Topic, TopicDetails, TopicName } from 'redux/interfaces'; +import { ClusterName, Topic, TopicDetails, TopicName } from 'redux/interfaces'; import MetricsWrapper from 'components/common/Dashboard/MetricsWrapper'; import Indicator from 'components/common/Dashboard/Indicator'; interface Props extends Topic, TopicDetails { isFetched: boolean; - clusterId: ClusterId; + clusterName: ClusterName; topicName: TopicName; - fetchTopicDetails: (clusterId: ClusterId, topicName: TopicName) => void; + fetchTopicDetails: (clusterName: ClusterName, topicName: TopicName) => void; } const Overview: React.FC = ({ isFetched, - clusterId, + clusterName, topicName, partitions, underReplicatedPartitions, @@ -24,8 +24,8 @@ const Overview: React.FC = ({ fetchTopicDetails, }) => { React.useEffect( - () => { fetchTopicDetails(clusterId, topicName); }, - [fetchTopicDetails, clusterId, topicName], + () => { fetchTopicDetails(clusterName, topicName); }, + [fetchTopicDetails, clusterName, topicName], ); if (!isFetched) { @@ -74,6 +74,6 @@ const Overview: React.FC = ({
); -} +}; export default Overview; diff --git a/kafka-ui-react-app/src/components/Topics/Details/Overview/OverviewContainer.ts b/kafka-ui-react-app/src/components/Topics/Details/Overview/OverviewContainer.ts index d1912baea4..8bc9aae7dd 100644 --- a/kafka-ui-react-app/src/components/Topics/Details/Overview/OverviewContainer.ts +++ b/kafka-ui-react-app/src/components/Topics/Details/Overview/OverviewContainer.ts @@ -3,27 +3,27 @@ import { fetchTopicDetails, } from 'redux/actions'; import Overview from './Overview'; -import { RootState, TopicName, ClusterId } from 'redux/interfaces'; +import { RootState, TopicName, ClusterName } from 'redux/interfaces'; import { getTopicByName, getIsTopicDetailsFetched } from 'redux/reducers/topics/selectors'; import { withRouter, RouteComponentProps } from 'react-router-dom'; interface RouteProps { - clusterId: string; - topicName: string; + clusterName: ClusterName; + topicName: TopicName; } interface OwnProps extends RouteComponentProps { } -const mapStateToProps = (state: RootState, { match: { params: { topicName, clusterId } } }: OwnProps) => ({ - clusterId, +const mapStateToProps = (state: RootState, { match: { params: { topicName, clusterName } } }: OwnProps) => ({ + clusterName, topicName, isFetched: getIsTopicDetailsFetched(state), ...getTopicByName(state, topicName), }); const mapDispatchToProps = { - fetchTopicDetails: (clusterId: ClusterId, topicName: TopicName) => fetchTopicDetails(clusterId, topicName), -} + fetchTopicDetails: (clusterName: ClusterName, topicName: TopicName) => fetchTopicDetails(clusterName, topicName), +}; export default withRouter( connect(mapStateToProps, mapDispatchToProps)(Overview) diff --git a/kafka-ui-react-app/src/components/Topics/Details/Settings/Settings.tsx b/kafka-ui-react-app/src/components/Topics/Details/Settings/Settings.tsx index 4312649fbf..6b67d9f9ba 100644 --- a/kafka-ui-react-app/src/components/Topics/Details/Settings/Settings.tsx +++ b/kafka-ui-react-app/src/components/Topics/Details/Settings/Settings.tsx @@ -1,12 +1,12 @@ import React from 'react'; -import { ClusterId, TopicName, TopicConfig } from 'redux/interfaces'; +import { ClusterName, TopicName, TopicConfig } from 'redux/interfaces'; interface Props { - clusterId: ClusterId; + clusterName: ClusterName; topicName: TopicName; config?: TopicConfig[]; isFetched: boolean; - fetchTopicConfig: (clusterId: ClusterId, topicName: TopicName) => void; + fetchTopicConfig: (clusterName: ClusterName, topicName: TopicName) => void; } const ConfigListItem: React.FC = ({ @@ -32,22 +32,22 @@ const ConfigListItem: React.FC = ({ ) -} +}; const Sertings: React.FC = ({ - clusterId, + clusterName, topicName, isFetched, fetchTopicConfig, config, }) => { React.useEffect( - () => { fetchTopicConfig(clusterId, topicName); }, - [fetchTopicConfig, clusterId, topicName], + () => { fetchTopicConfig(clusterName, topicName); }, + [fetchTopicConfig, clusterName, topicName], ); if (!isFetched || !config) { - return (null); + return null; } return ( @@ -66,6 +66,6 @@ const Sertings: React.FC = ({
); -} +}; export default Sertings; diff --git a/kafka-ui-react-app/src/components/Topics/Details/Settings/SettingsContainer.ts b/kafka-ui-react-app/src/components/Topics/Details/Settings/SettingsContainer.ts index d3108efb39..f7afd03ada 100644 --- a/kafka-ui-react-app/src/components/Topics/Details/Settings/SettingsContainer.ts +++ b/kafka-ui-react-app/src/components/Topics/Details/Settings/SettingsContainer.ts @@ -1,5 +1,5 @@ import { connect } from 'react-redux'; -import { RootState, ClusterId, TopicName } from 'redux/interfaces'; +import { RootState, ClusterName, TopicName } from 'redux/interfaces'; import { withRouter, RouteComponentProps } from 'react-router-dom'; import { fetchTopicConfig, @@ -12,22 +12,22 @@ import { interface RouteProps { - clusterId: string; - topicName: string; + clusterName: ClusterName; + topicName: TopicName; } interface OwnProps extends RouteComponentProps { } -const mapStateToProps = (state: RootState, { match: { params: { topicName, clusterId } } }: OwnProps) => ({ - clusterId, +const mapStateToProps = (state: RootState, { match: { params: { topicName, clusterName } } }: OwnProps) => ({ + clusterName, topicName, config: getTopicConfig(state, topicName), isFetched: getTopicConfigFetched(state), }); const mapDispatchToProps = { - fetchTopicConfig: (clusterId: ClusterId, topicName: TopicName) => fetchTopicConfig(clusterId, topicName), -} + fetchTopicConfig: (clusterName: ClusterName, topicName: TopicName) => fetchTopicConfig(clusterName, topicName), +}; export default withRouter( connect(mapStateToProps, mapDispatchToProps)(Settings) diff --git a/kafka-ui-react-app/src/components/Topics/List/List.tsx b/kafka-ui-react-app/src/components/Topics/List/List.tsx index e058dbb102..09f56331f7 100644 --- a/kafka-ui-react-app/src/components/Topics/List/List.tsx +++ b/kafka-ui-react-app/src/components/Topics/List/List.tsx @@ -1,18 +1,18 @@ import React from 'react'; -import { TopicWithDetailedInfo, ClusterId } from 'redux/interfaces'; +import { TopicWithDetailedInfo, ClusterName } from 'redux/interfaces'; import ListItem from './ListItem'; import Breadcrumb from 'components/common/Breadcrumb/Breadcrumb'; import { NavLink } from 'react-router-dom'; import { clusterTopicNewPath } from 'lib/paths'; interface Props { - clusterId: ClusterId; + clusterName: ClusterName; topics: (TopicWithDetailedInfo)[]; externalTopics: (TopicWithDetailedInfo)[]; } const List: React.FC = ({ - clusterId, + clusterName, topics, externalTopics, }) => { @@ -46,7 +46,7 @@ const List: React.FC = ({
Add a Topic @@ -75,6 +75,6 @@ const List: React.FC = ({
); -} +}; export default List; diff --git a/kafka-ui-react-app/src/components/Topics/List/ListContainer.ts b/kafka-ui-react-app/src/components/Topics/List/ListContainer.ts index 1c6450c510..a2502b62a0 100644 --- a/kafka-ui-react-app/src/components/Topics/List/ListContainer.ts +++ b/kafka-ui-react-app/src/components/Topics/List/ListContainer.ts @@ -1,17 +1,17 @@ import { connect } from 'react-redux'; -import { RootState } from 'redux/interfaces'; +import {ClusterName, RootState} from 'redux/interfaces'; import { getTopicList, getExternalTopicList } from 'redux/reducers/topics/selectors'; import List from './List'; import { withRouter, RouteComponentProps } from 'react-router-dom'; interface RouteProps { - clusterId: string; + clusterName: ClusterName; } interface OwnProps extends RouteComponentProps { } -const mapStateToProps = (state: RootState, { match: { params: { clusterId } } }: OwnProps) => ({ - clusterId, +const mapStateToProps = (state: RootState, { match: { params: { clusterName } } }: OwnProps) => ({ + clusterName, topics: getTopicList(state), externalTopics: getExternalTopicList(state), }); diff --git a/kafka-ui-react-app/src/components/Topics/New/New.tsx b/kafka-ui-react-app/src/components/Topics/New/New.tsx index a436cb37b3..c5dfe688df 100644 --- a/kafka-ui-react-app/src/components/Topics/New/New.tsx +++ b/kafka-ui-react-app/src/components/Topics/New/New.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { ClusterId, CleanupPolicy, TopicFormData, TopicName } from 'redux/interfaces'; +import { ClusterName, CleanupPolicy, TopicFormData, TopicName } from 'redux/interfaces'; import Breadcrumb from 'components/common/Breadcrumb/Breadcrumb'; import { clusterTopicsPath } from 'lib/paths'; import { useForm, ErrorMessage } from 'react-hook-form'; @@ -10,15 +10,15 @@ import { } from 'lib/constants'; interface Props { - clusterId: ClusterId; + clusterName: ClusterName; isTopicCreated: boolean; - createTopic: (clusterId: ClusterId, form: TopicFormData) => void; - redirectToTopicPath: (clusterId: ClusterId, topicName: TopicName) => void; + createTopic: (clusterName: ClusterName, form: TopicFormData) => void; + redirectToTopicPath: (clusterName: ClusterName, topicName: TopicName) => void; resetUploadedState: () => void; } const New: React.FC = ({ - clusterId, + clusterName, isTopicCreated, createTopic, redirectToTopicPath, @@ -31,10 +31,10 @@ const New: React.FC = ({ () => { if (isSubmitting && isTopicCreated) { const {name} = getValues(); - redirectToTopicPath(clusterId, name); + redirectToTopicPath(clusterName, name); } }, - [isSubmitting, isTopicCreated, redirectToTopicPath, clusterId, getValues], + [isSubmitting, isTopicCreated, redirectToTopicPath, clusterName, getValues], ); const onSubmit = async (data: TopicFormData) => { @@ -43,7 +43,7 @@ const New: React.FC = ({ //going to object page on the second creation. Resetting loaded state is workaround, need to tweak loader logic resetUploadedState(); setIsSubmitting(true); - createTopic(clusterId, data); + createTopic(clusterName, data); }; return ( @@ -51,7 +51,7 @@ const New: React.FC = ({
New Topic diff --git a/kafka-ui-react-app/src/components/Topics/New/NewContainer.ts b/kafka-ui-react-app/src/components/Topics/New/NewContainer.ts index aa8d0aa7fb..2836c8e4c4 100644 --- a/kafka-ui-react-app/src/components/Topics/New/NewContainer.ts +++ b/kafka-ui-react-app/src/components/Topics/New/NewContainer.ts @@ -1,5 +1,5 @@ import { connect } from 'react-redux'; -import { RootState, ClusterId, TopicFormData, TopicName, Action } from 'redux/interfaces'; +import { RootState, ClusterName, TopicFormData, TopicName, Action } from 'redux/interfaces'; import New from './New'; import { withRouter, RouteComponentProps } from 'react-router-dom'; import { createTopic } from 'redux/actions'; @@ -9,22 +9,22 @@ import { ThunkDispatch } from 'redux-thunk'; import * as actions from "../../../redux/actions/actions"; interface RouteProps { - clusterId: string; + clusterName: ClusterName; } interface OwnProps extends RouteComponentProps { } -const mapStateToProps = (state: RootState, { match: { params: { clusterId } } }: OwnProps) => ({ - clusterId, +const mapStateToProps = (state: RootState, { match: { params: { clusterName } } }: OwnProps) => ({ + clusterName, isTopicCreated: getTopicCreated(state), }); const mapDispatchToProps = (dispatch: ThunkDispatch, { history }: OwnProps) => ({ - createTopic: (clusterId: ClusterId, form: TopicFormData) => { - dispatch(createTopic(clusterId, form)); + createTopic: (clusterName: ClusterName, form: TopicFormData) => { + dispatch(createTopic(clusterName, form)); }, - redirectToTopicPath: (clusterId: ClusterId, topicName: TopicName) => { - history.push(clusterTopicPath(clusterId, topicName)); + redirectToTopicPath: (clusterName: ClusterName, topicName: TopicName) => { + history.push(clusterTopicPath(clusterName, topicName)); }, resetUploadedState: (() => dispatch(actions.createTopicAction.failure())) }); diff --git a/kafka-ui-react-app/src/components/Topics/Topics.tsx b/kafka-ui-react-app/src/components/Topics/Topics.tsx index 3c1131fcf8..ed1652c847 100644 --- a/kafka-ui-react-app/src/components/Topics/Topics.tsx +++ b/kafka-ui-react-app/src/components/Topics/Topics.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { ClusterId } from 'redux/interfaces'; +import { ClusterName } from 'redux/interfaces'; import { Switch, Route, @@ -10,30 +10,30 @@ import PageLoader from 'components/common/PageLoader/PageLoader'; import NewContainer from './New/NewContainer'; interface Props { - clusterId: string; + clusterName: ClusterName; isFetched: boolean; - fetchBrokers: (clusterId: ClusterId) => void; - fetchTopicList: (clusterId: ClusterId) => void; + fetchBrokers: (clusterName: ClusterName) => void; + fetchTopicList: (clusterName: ClusterName) => void; } const Topics: React.FC = ({ - clusterId, + clusterName, isFetched, fetchTopicList, }) => { - React.useEffect(() => { fetchTopicList(clusterId); }, [fetchTopicList, clusterId]); + React.useEffect(() => { fetchTopicList(clusterName); }, [fetchTopicList, clusterName]); if (isFetched) { return ( - - - + + + ); } return (); -} +}; export default Topics; diff --git a/kafka-ui-react-app/src/components/Topics/TopicsContainer.ts b/kafka-ui-react-app/src/components/Topics/TopicsContainer.ts index ef09cbd188..fdf63a437e 100644 --- a/kafka-ui-react-app/src/components/Topics/TopicsContainer.ts +++ b/kafka-ui-react-app/src/components/Topics/TopicsContainer.ts @@ -2,22 +2,22 @@ import { connect } from 'react-redux'; import { fetchTopicList } from 'redux/actions'; import Topics from './Topics'; import { getIsTopicListFetched } from 'redux/reducers/topics/selectors'; -import { RootState, ClusterId } from 'redux/interfaces'; +import { RootState, ClusterName } from 'redux/interfaces'; import { RouteComponentProps } from 'react-router-dom'; interface RouteProps { - clusterId: string; + clusterName: ClusterName; } interface OwnProps extends RouteComponentProps { } -const mapStateToProps = (state: RootState, { match: { params: { clusterId } }}: OwnProps) => ({ +const mapStateToProps = (state: RootState, { match: { params: { clusterName } }}: OwnProps) => ({ isFetched: getIsTopicListFetched(state), - clusterId, + clusterName, }); const mapDispatchToProps = { - fetchTopicList: (clusterId: ClusterId) => fetchTopicList(clusterId), -} + fetchTopicList: (clusterName: ClusterName) => fetchTopicList(clusterName), +}; export default connect(mapStateToProps, mapDispatchToProps)(Topics); diff --git a/kafka-ui-react-app/src/lib/paths.ts b/kafka-ui-react-app/src/lib/paths.ts index ea137f7cb9..78099dbfe2 100644 --- a/kafka-ui-react-app/src/lib/paths.ts +++ b/kafka-ui-react-app/src/lib/paths.ts @@ -1,15 +1,15 @@ import { - ClusterId, + ClusterName, TopicName, } from 'redux/interfaces'; -const clusterPath = (clusterId: ClusterId) => `/clusters/${clusterId}`; +const clusterPath = (clusterName: ClusterName) => `/clusters/${clusterName}`; -export const clusterBrokersPath = (clusterId: ClusterId) => `${clusterPath(clusterId)}/brokers`; +export const clusterBrokersPath = (clusterName: ClusterName) => `${clusterPath(clusterName)}/brokers`; -export const clusterTopicsPath = (clusterId: ClusterId) => `${clusterPath(clusterId)}/topics`; -export const clusterTopicNewPath = (clusterId: ClusterId) => `${clusterPath(clusterId)}/topics/new`; +export const clusterTopicsPath = (clusterName: ClusterName) => `${clusterPath(clusterName)}/topics`; +export const clusterTopicNewPath = (clusterName: ClusterName) => `${clusterPath(clusterName)}/topics/new`; -export const clusterTopicPath = (clusterId: ClusterId, topicName: TopicName) => `${clusterTopicsPath(clusterId)}/${topicName}`; -export const clusterTopicSettingsPath = (clusterId: ClusterId, topicName: TopicName) => `${clusterTopicsPath(clusterId)}/${topicName}/settings`; -export const clusterTopicMessagesPath = (clusterId: ClusterId, topicName: TopicName) => `${clusterTopicsPath(clusterId)}/${topicName}/messages`; +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`; diff --git a/kafka-ui-react-app/src/redux/actions/thunks.ts b/kafka-ui-react-app/src/redux/actions/thunks.ts index c1c3cf4ecb..c23f43a56d 100644 --- a/kafka-ui-react-app/src/redux/actions/thunks.ts +++ b/kafka-ui-react-app/src/redux/actions/thunks.ts @@ -3,30 +3,30 @@ import * as actions from './actions'; import { PromiseThunk, Cluster, - ClusterId, + ClusterName, TopicFormData, TopicName, Topic, } from 'redux/interfaces'; -export const fetchBrokers = (clusterId: ClusterId): PromiseThunk => async (dispatch) => { +export const fetchBrokers = (clusterName: ClusterName): PromiseThunk => async (dispatch) => { dispatch(actions.fetchBrokersAction.request()); try { - const payload = await api.getBrokers(clusterId); + const payload = await api.getBrokers(clusterName); dispatch(actions.fetchBrokersAction.success(payload)); } catch (e) { dispatch(actions.fetchBrokersAction.failure()); } -} +}; -export const fetchBrokerMetrics = (clusterId: ClusterId): PromiseThunk => async (dispatch) => { +export const fetchBrokerMetrics = (clusterName: ClusterName): PromiseThunk => async (dispatch) => { dispatch(actions.fetchBrokerMetricsAction.request()); try { - const payload = await api.getBrokerMetrics(clusterId); + const payload = await api.getBrokerMetrics(clusterName); dispatch(actions.fetchBrokerMetricsAction.success(payload)); } catch (e) { dispatch(actions.fetchBrokerMetricsAction.failure()); } -} +}; export const fetchClustersList = (): PromiseThunk => async (dispatch) => { dispatch(actions.fetchClusterListAction.request()); @@ -36,44 +36,44 @@ export const fetchClustersList = (): PromiseThunk => async (dispatch) => { } catch (e) { dispatch(actions.fetchClusterListAction.failure()); } -} +}; -export const fetchTopicList = (clusterId: ClusterId): PromiseThunk => async (dispatch) => { +export const fetchTopicList = (clusterName: ClusterName): PromiseThunk => async (dispatch) => { dispatch(actions.fetchTopicListAction.request()); try { - const topics = await api.getTopics(clusterId); + const topics = await api.getTopics(clusterName); dispatch(actions.fetchTopicListAction.success(topics)); } catch (e) { dispatch(actions.fetchTopicListAction.failure()); } -} +}; -export const fetchTopicDetails = (clusterId: ClusterId, topicName: TopicName): PromiseThunk => async (dispatch) => { +export const fetchTopicDetails = (clusterName: ClusterName, topicName: TopicName): PromiseThunk => async (dispatch) => { dispatch(actions.fetchTopicDetailsAction.request()); try { - const topicDetails = await api.getTopicDetails(clusterId, topicName); + const topicDetails = await api.getTopicDetails(clusterName, topicName); dispatch(actions.fetchTopicDetailsAction.success({ topicName, details: topicDetails })); } catch (e) { dispatch(actions.fetchTopicDetailsAction.failure()); } -} +}; -export const fetchTopicConfig = (clusterId: ClusterId, topicName: TopicName): PromiseThunk => async (dispatch) => { +export const fetchTopicConfig = (clusterName: ClusterName, topicName: TopicName): PromiseThunk => async (dispatch) => { dispatch(actions.fetchTopicConfigAction.request()); try { - const config = await api.getTopicConfig(clusterId, topicName); + const config = await api.getTopicConfig(clusterName, topicName); dispatch(actions.fetchTopicConfigAction.success({ topicName, config })); } catch (e) { dispatch(actions.fetchTopicConfigAction.failure()); } -} +}; -export const createTopic = (clusterId: ClusterId, form: TopicFormData): PromiseThunk => async (dispatch) => { +export const createTopic = (clusterName: ClusterName, form: TopicFormData): PromiseThunk => async (dispatch) => { dispatch(actions.createTopicAction.request()); try { - const topic: Topic = await api.postTopic(clusterId, form); + const topic: Topic = await api.postTopic(clusterName, form); dispatch(actions.createTopicAction.success(topic)); } catch (e) { dispatch(actions.createTopicAction.failure()); } -} +}; diff --git a/kafka-ui-react-app/src/redux/api/brokers.ts b/kafka-ui-react-app/src/redux/api/brokers.ts index 5ae1f19150..2b4216fb27 100644 --- a/kafka-ui-react-app/src/redux/api/brokers.ts +++ b/kafka-ui-react-app/src/redux/api/brokers.ts @@ -1,6 +1,6 @@ import { Broker, - ClusterId, + ClusterName, BrokerMetrics, } from 'redux/interfaces'; import { @@ -8,10 +8,10 @@ import { BASE_PARAMS, } from 'lib/constants'; -export const getBrokers = (clusterId: ClusterId): Promise => - fetch(`${BASE_URL}/clusters/${clusterId}/brokers`, { ...BASE_PARAMS }) +export const getBrokers = (clusterName: ClusterName): Promise => + fetch(`${BASE_URL}/clusters/${clusterName}/brokers`, { ...BASE_PARAMS }) .then(res => res.json()); -export const getBrokerMetrics = (clusterId: ClusterId): Promise => - fetch(`${BASE_URL}/clusters/${clusterId}/metrics/broker`, { ...BASE_PARAMS }) +export const getBrokerMetrics = (clusterName: ClusterName): Promise => + fetch(`${BASE_URL}/clusters/${clusterName}/metrics/broker`, { ...BASE_PARAMS }) .then(res => res.json()); diff --git a/kafka-ui-react-app/src/redux/api/topics.ts b/kafka-ui-react-app/src/redux/api/topics.ts index 6331803fc5..160c392c9b 100644 --- a/kafka-ui-react-app/src/redux/api/topics.ts +++ b/kafka-ui-react-app/src/redux/api/topics.ts @@ -1,7 +1,7 @@ import { TopicName, Topic, - ClusterId, + ClusterName, TopicDetails, TopicConfig, TopicFormData, @@ -11,19 +11,19 @@ import { BASE_PARAMS, } from 'lib/constants'; -export const getTopicConfig = (clusterId: ClusterId, topicName: TopicName): Promise => - fetch(`${BASE_URL}/clusters/${clusterId}/topics/${topicName}/config`, { ...BASE_PARAMS }) +export const getTopicConfig = (clusterName: ClusterName, topicName: TopicName): Promise => + fetch(`${BASE_URL}/clusters/${clusterName}/topics/${topicName}/config`, { ...BASE_PARAMS }) .then(res => res.json()); -export const getTopicDetails = (clusterId: ClusterId, topicName: TopicName): Promise => - fetch(`${BASE_URL}/clusters/${clusterId}/topics/${topicName}`, { ...BASE_PARAMS }) +export const getTopicDetails = (clusterName: ClusterName, topicName: TopicName): Promise => + fetch(`${BASE_URL}/clusters/${clusterName}/topics/${topicName}`, { ...BASE_PARAMS }) .then(res => res.json()); -export const getTopics = (clusterId: ClusterId): Promise => - fetch(`${BASE_URL}/clusters/${clusterId}/topics`, { ...BASE_PARAMS }) +export const getTopics = (clusterName: ClusterName): Promise => + fetch(`${BASE_URL}/clusters/${clusterName}/topics`, { ...BASE_PARAMS }) .then(res => res.json()); -export const postTopic = (clusterId: ClusterId, form: TopicFormData): Promise => { +export const postTopic = (clusterName: ClusterName, form: TopicFormData): Promise => { const { name, partitions, @@ -46,9 +46,9 @@ export const postTopic = (clusterId: ClusterId, form: TopicFormData): Promise res.json()); -} +}; diff --git a/kafka-ui-react-app/src/redux/interfaces/cluster.ts b/kafka-ui-react-app/src/redux/interfaces/cluster.ts index fcddb23367..1123a68a6a 100644 --- a/kafka-ui-react-app/src/redux/interfaces/cluster.ts +++ b/kafka-ui-react-app/src/redux/interfaces/cluster.ts @@ -3,11 +3,11 @@ export enum ClusterStatus { Offline = 'offline', } -export type ClusterId = string; +export type ClusterName = string; export interface Cluster { - id: ClusterId; - name: string; + id: string; + name: ClusterName; defaultCluster: boolean; status: ClusterStatus; brokerCount: number;