diff --git a/catalog-rest-service/src/main/resources/ui/src/assets/svg/topic-grey.svg b/catalog-rest-service/src/main/resources/ui/src/assets/svg/topic-grey.svg index 7c9e7b8f0be..594b9ad2442 100644 --- a/catalog-rest-service/src/main/resources/ui/src/assets/svg/topic-grey.svg +++ b/catalog-rest-service/src/main/resources/ui/src/assets/svg/topic-grey.svg @@ -1,8 +1,6 @@ - - - - - - - + + + + + \ No newline at end of file diff --git a/catalog-rest-service/src/main/resources/ui/src/assets/svg/topic.svg b/catalog-rest-service/src/main/resources/ui/src/assets/svg/topic.svg index 453dda0430b..418a918d0dd 100644 --- a/catalog-rest-service/src/main/resources/ui/src/assets/svg/topic.svg +++ b/catalog-rest-service/src/main/resources/ui/src/assets/svg/topic.svg @@ -1,8 +1,6 @@ - - - - - - - + + + + + \ No newline at end of file diff --git a/catalog-rest-service/src/main/resources/ui/src/pages/topic-details/index.tsx b/catalog-rest-service/src/main/resources/ui/src/pages/topic-details/index.tsx index 19837d6d528..808f94066fe 100644 --- a/catalog-rest-service/src/main/resources/ui/src/pages/topic-details/index.tsx +++ b/catalog-rest-service/src/main/resources/ui/src/pages/topic-details/index.tsx @@ -26,6 +26,7 @@ import { getUserTeams, } from '../../utils/CommonUtils'; import { serviceTypeLogo } from '../../utils/ServiceUtils'; +import { bytesToSize } from '../../utils/StringsUtils'; import { getOwnerFromId, getTagsWithoutTier, @@ -292,12 +293,22 @@ const MyTopicDetailPage = () => { return [ { key: 'Partitions', value: partitions }, { key: 'Replication Factor', value: replicationFactor }, - { key: 'Retention Size', value: retentionSize.toLocaleString() }, - { key: 'CleanUp Policies', value: cleanupPolicies.join() }, + { key: 'Retention Size', value: bytesToSize(retentionSize) }, + { key: 'CleanUp Policies', value: cleanupPolicies.join(',') }, { key: 'Max Message Size', value: maximumMessageSize }, ]; }; + const getConfigObject = () => { + return { + Partitions: partitions, + 'Replication Factor': replicationFactor, + 'Retention Size': retentionSize, + 'CleanUp Policies': cleanupPolicies, + 'Max Message Size': maximumMessageSize, + }; + }; + useEffect(() => { fetchTopicDetail(topicFQN); }, [topicFQN]); @@ -317,6 +328,7 @@ const MyTopicDetailPage = () => { extraInfo={[ { key: 'Owner', value: owner?.name || '' }, { key: 'Tier', value: tier ? tier.split('.')[1] : '' }, + ...getConfigDetails(), ]} followers={followers} followHandler={followTopic} @@ -365,16 +377,7 @@ const MyTopicDetailPage = () => { /> )} {activeTab === 3 && ( -
- {getConfigDetails().map((config, index) => ( -
-

{config.key}

-

{config.value}

-
- ))} -
+ )} diff --git a/catalog-rest-service/src/main/resources/ui/src/utils/StringsUtils.ts b/catalog-rest-service/src/main/resources/ui/src/utils/StringsUtils.ts index bb98153e401..5caed8ed3ac 100644 --- a/catalog-rest-service/src/main/resources/ui/src/utils/StringsUtils.ts +++ b/catalog-rest-service/src/main/resources/ui/src/utils/StringsUtils.ts @@ -63,3 +63,20 @@ export const isValidJSONString = (data?: string): boolean => { return false; }; + +export const bytesToSize = (bytes: number) => { + const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB']; + if (bytes === 0) { + return `${bytes} ${sizes[0]}`; + } else { + const i = parseInt( + Math.floor(Math.log(bytes) / Math.log(1024)).toString(), + 10 + ); + if (i === 0) { + return `${bytes} ${sizes[i]}`; + } else { + return `${(bytes / 1024 ** i).toFixed(2)} ${sizes[i]}`; + } + } +};