From 5c30ab5696ed2cf6093e2a7ef1bc9580ce8f1489 Mon Sep 17 00:00:00 2001 From: Lyudmyla Todoriko Date: Mon, 24 Feb 2020 10:27:14 +0000 Subject: [PATCH 1/3] Fixed routing not working on create - no need to pass props on that one --- .../Tab/Tabs/TopicList/TopicList.jsx | 262 ++++++++++++++++++ .../TopicList/TopicCreate/TopicCreate.jsx | 12 +- client/src/utils/endpoints.js | 1 + 3 files changed, 268 insertions(+), 7 deletions(-) create mode 100644 client/src/containers/Tab/Tabs/TopicList/TopicList.jsx diff --git a/client/src/containers/Tab/Tabs/TopicList/TopicList.jsx b/client/src/containers/Tab/Tabs/TopicList/TopicList.jsx new file mode 100644 index 000000000..2203ce47e --- /dev/null +++ b/client/src/containers/Tab/Tabs/TopicList/TopicList.jsx @@ -0,0 +1,262 @@ +import React from 'react'; +import { Link } from 'react-router-dom'; + +import Header from '../../../Header'; +import SearchBar from '../../../../components/SearchBar'; +import Pagination from '../../../../components/Pagination'; +import Tab from '../../Tab'; +import ConfirmModal from '../../../../components/Modal/ConfirmModal'; +import { getTopics, deleteTopic } from '../../../../utils/FakeTopicService'; + +// Adaptation of topicList.ftl + +class TopicList extends Tab { + state = { + topics: [], + showDeleteModal: false, + deleteMessage: '', + deleteData: {} + }; + + componentDidMount() { + const topics = getTopics(); + this.setState({ + topics + }); + } + + showDeleteModal = (deleteMessage, deleteData) => { + this.setState({ showDeleteModal: true, deleteMessage, deleteData }); + }; + + closeDeleteModal = () => { + this.setState({ showDeleteModal: false, deleteMessage: '', deleteData: {} }); + }; + + deleteTopic = () => { + const { clusterId, topic } = this.state.deleteData; + deleteTopic(clusterId, topic.name); + this.closeDeleteModal(); + + this.props.history.push({ + pathname: `/${clusterId}/topic`, + showSuccessToast: true, + successToastMessage: `Topic '${topic.name}' is deleted` + }); + }; + + renderTopics() { + const { topics } = this.state; + const { clusterId } = this.props.match.params; + + if (topics.length === 0) { + return ( + + +
+ No topic available +
+ + + ); + } + + let renderedTopics = []; + for (let topic of topics) { + topic.size = 0; + topic.logDirSize = 0; + + //TODO find out where all the extra topic info comes from (i.e skipeConsumerGroups or replicaCount) + renderedTopics.push( + + {topic.name} + + ≈ {topic.size} + + {topic.logDirSize ? 'n/a' : topic.logDirSize} + {topic.partition} + {topic.replication} + + + {topic.replication} + + + + {/*<#if skipConsumerGroups == false> + + < + #list topic.getConsumerGroups() as group> + < + #assign active=group.isActiveTopic(topic.getName()) > + + ${group.getId()} + + Lag: ${group.getOffsetLag(topic.getName())} + + +
+ + + {/#if*/} + + {/* + + + + {/*<#if canDelete == true>*/} + + {/*<#if topic.isInternal() == false>*/} + + this.showDeleteModal(`Do you want to delete topic: ${topic.name}`, { + clusterId: clusterId, + topic: topic + }) + } + // href="${basePath}/${clusterId}/topic/${topic.getName()}/delete" + //data-confirm="Do you want to delete topic: ${topic.getName()} ?" + > + + + {/**/} + + {/**/} + + ); + } + + return renderedTopics; + } + + render() { + const { topics } = this.state; + const { clusterId } = this.props.match.params; + + return ( +
+
+ +
+ + + + + + + {/*<#if skipConsumerGroups== false>*/} + + {/**/} + + + + + + + + + + + {/*<#if skipConsumerGroups== false>*/} + + {/**/} + + {/*<#if canDelete== true>*/} + + {/**/} + + + + {/*#if topics?size == 0*/} + {this.renderTopics()} + {/* + <#list topics as topic> + + + + + + + + <#if skipConsumerGroups == false> + + + + <#if canDelete == true> + + + +*/} + +
TopicsPartitionsReplicationsConsumers Groups +
NameSizeWeightTotalFactorIn SyncConsumer Groups
${topic.getName()} + + ≈ ${topic.getSize()} + + + #if topic.getLogDirSize().isEmpty() + n/a + <#else> + ${functions.filesize(topic.getLogDirSize().get())} + + ${topic.getPartitions() ? size}${topic.getReplicaCount()}${topic.getInSyncReplicaCount()} + < + #list topic.getConsumerGroups() as group> + < + #assign active=group.isActiveTopic(topic.getName()) > + + ${group.getId()} + + Lag: ${group.getOffsetLag(topic.getName())} + + +
+ +		 + + + < + #if topic.isInternal() == false> + + +
+
+ + + + {/*#if roles?seq_contains("topic/insert") == true*/} + + {/**/} + + +
+ ); + } +} + +export default TopicList; diff --git a/client/src/containers/TopicList/TopicCreate/TopicCreate.jsx b/client/src/containers/TopicList/TopicCreate/TopicCreate.jsx index bf632129c..019e78a16 100644 --- a/client/src/containers/TopicList/TopicCreate/TopicCreate.jsx +++ b/client/src/containers/TopicList/TopicCreate/TopicCreate.jsx @@ -8,10 +8,10 @@ class TopicCreate extends Form { state = { formData: { name: '', - partition: 0, - replication: 0, - cleanup: 'delete', - retention: 0 + partition: 1, + replication: 1, + cleanup: 'delete', // TODO: delete default value not working + retention: 86400000 }, errors: {} }; @@ -32,9 +32,7 @@ class TopicCreate extends Form { retention: Joi.number().label('Retention') }; - componentDidMount() { - this.setState({ formData: this.props.location.state.formData }); - } + componentDidMount() {} onCleanupChange = value => { let { formData } = { ...this.state }; diff --git a/client/src/utils/endpoints.js b/client/src/utils/endpoints.js index 3fd17298b..ee93f85a1 100644 --- a/client/src/utils/endpoints.js +++ b/client/src/utils/endpoints.js @@ -22,6 +22,7 @@ export const uriTopics = (id, view, search) => { : 'topicsByType?clusterId=' + id + '&view=' + view } `; }; + export const uriNodesConfigs = (clusterId, nodeId) => { return ( `${apiUrl}/cluster/nodes/configs${clusterId ? '?clusterId=' + clusterId : ''}` + From c415ab6b8551767a84d2eb2f40ac874056d0dc04 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Gon=C3=A7alo=20Valentim?= Date: Mon, 24 Feb 2020 10:42:15 +0000 Subject: [PATCH 2/3] Update TopicList.jsx --- client/src/containers/Tab/Tabs/TopicList/TopicList.jsx | 1 - 1 file changed, 1 deletion(-) diff --git a/client/src/containers/Tab/Tabs/TopicList/TopicList.jsx b/client/src/containers/Tab/Tabs/TopicList/TopicList.jsx index 2203ce47e..573b2b6b2 100644 --- a/client/src/containers/Tab/Tabs/TopicList/TopicList.jsx +++ b/client/src/containers/Tab/Tabs/TopicList/TopicList.jsx @@ -66,7 +66,6 @@ class TopicList extends Tab { topic.size = 0; topic.logDirSize = 0; - //TODO find out where all the extra topic info comes from (i.e skipeConsumerGroups or replicaCount) renderedTopics.push( {topic.name} From 82c0eda3fc784ba47699488eaf32bf4005487a7e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Gon=C3=A7alo=20Valentim?= Date: Mon, 24 Feb 2020 10:42:51 +0000 Subject: [PATCH 3/3] Update TopicCreate.jsx --- client/src/containers/TopicList/TopicCreate/TopicCreate.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/client/src/containers/TopicList/TopicCreate/TopicCreate.jsx b/client/src/containers/TopicList/TopicCreate/TopicCreate.jsx index 019e78a16..911891cca 100644 --- a/client/src/containers/TopicList/TopicCreate/TopicCreate.jsx +++ b/client/src/containers/TopicList/TopicCreate/TopicCreate.jsx @@ -10,7 +10,7 @@ class TopicCreate extends Form { name: '', partition: 1, replication: 1, - cleanup: 'delete', // TODO: delete default value not working + cleanup: 'delete', retention: 86400000 }, errors: {}