From 11cc607433699ae13e191a9e7f911dd65e08a4f1 Mon Sep 17 00:00:00 2001 From: Adam Cass Date: Thu, 20 Oct 2022 11:19:09 -0600 Subject: [PATCH 01/13] Add production/consumption to topic list and topic overview --- .../src/components/Topics/List/TopicTable.tsx | 29 +++++++++++++++++++ .../Topics/Topic/Overview/Overview.tsx | 6 ++++ 2 files changed, 35 insertions(+) diff --git a/kafka-ui-react-app/src/components/Topics/List/TopicTable.tsx b/kafka-ui-react-app/src/components/Topics/List/TopicTable.tsx index dcafa61b915..97ab5f20fa7 100644 --- a/kafka-ui-react-app/src/components/Topics/List/TopicTable.tsx +++ b/kafka-ui-react-app/src/components/Topics/List/TopicTable.tsx @@ -13,6 +13,27 @@ import { TopicTitleCell } from './TopicTitleCell'; import ActionsCell from './ActionsCell'; import BatchActionsbar from './BatchActionsBar'; +import BytesFormatted from 'components/common/BytesFormatted/BytesFormatted'; + +function formatThroughput(row: Topic) { + const production = row.bytesInPerSec; + const consumption = row.bytesOutPerSec; + if (production === undefined && consumption === undefined) { + return (N/A); + } else if (production === undefined) { + return (out: ); + } else if (consumption === undefined) { + return (in: ); + } else { + return ( +
+ in: + out: +
+ ); + } +} + const TopicTable: React.FC = () => { const { clusterName } = useAppParams<{ clusterName: ClusterName }>(); const [searchParams] = useSearchParams(); @@ -85,6 +106,14 @@ const TopicTable: React.FC = () => { accessorKey: 'segmentSize', cell: SizeCell, }, + { + header: 'Throughput', + accessorFn: row => formatThroughput(row), + enableSorting: false, + cell: ({ getValue }) => { + return getValue(); + }, + }, { id: 'actions', header: '', diff --git a/kafka-ui-react-app/src/components/Topics/Topic/Overview/Overview.tsx b/kafka-ui-react-app/src/components/Topics/Topic/Overview/Overview.tsx index 2bd1c4a78a6..bddf6d28971 100644 --- a/kafka-ui-react-app/src/components/Topics/Topic/Overview/Overview.tsx +++ b/kafka-ui-react-app/src/components/Topics/Topic/Overview/Overview.tsx @@ -88,6 +88,12 @@ const Overview: React.FC = () => { {messageCount} + + + + + + From c475b311b96096f35720f0a20989e127b4ec3c2a Mon Sep 17 00:00:00 2001 From: Adam Cass Date: Thu, 20 Oct 2022 14:24:20 -0600 Subject: [PATCH 02/13] Fix linting issues --- .../src/components/Topics/List/TopicTable.tsx | 113 ++++++++++-------- .../Topics/Topic/Overview/Overview.tsx | 88 +++++++------- 2 files changed, 107 insertions(+), 94 deletions(-) diff --git a/kafka-ui-react-app/src/components/Topics/List/TopicTable.tsx b/kafka-ui-react-app/src/components/Topics/List/TopicTable.tsx index 97ab5f20fa7..2525db73dde 100644 --- a/kafka-ui-react-app/src/components/Topics/List/TopicTable.tsx +++ b/kafka-ui-react-app/src/components/Topics/List/TopicTable.tsx @@ -1,43 +1,56 @@ -import React from 'react'; -import { SortOrder, Topic, TopicColumnsToSort } from 'generated-sources'; -import { ColumnDef } from '@tanstack/react-table'; -import Table, { SizeCell } from 'components/common/NewTable'; -import useAppParams from 'lib/hooks/useAppParams'; -import { ClusterName } from 'redux/interfaces'; -import { useSearchParams } from 'react-router-dom'; -import ClusterContext from 'components/contexts/ClusterContext'; -import { useTopics } from 'lib/hooks/api/topics'; -import { PER_PAGE } from 'lib/constants'; +import React from 'react' +import { SortOrder, Topic, TopicColumnsToSort } from 'generated-sources' +import { ColumnDef } from '@tanstack/react-table' +import Table, { SizeCell } from 'components/common/NewTable' +import useAppParams from 'lib/hooks/useAppParams' +import { ClusterName } from 'redux/interfaces' +import { useSearchParams } from 'react-router-dom' +import ClusterContext from 'components/contexts/ClusterContext' +import { useTopics } from 'lib/hooks/api/topics' +import { PER_PAGE } from 'lib/constants' +import BytesFormatted from 'components/common/BytesFormatted/BytesFormatted' -import { TopicTitleCell } from './TopicTitleCell'; -import ActionsCell from './ActionsCell'; -import BatchActionsbar from './BatchActionsBar'; - -import BytesFormatted from 'components/common/BytesFormatted/BytesFormatted'; +import { TopicTitleCell } from './TopicTitleCell' +import ActionsCell from './ActionsCell' +import BatchActionsbar from './BatchActionsBar' function formatThroughput(row: Topic) { - const production = row.bytesInPerSec; - const consumption = row.bytesOutPerSec; + const production = row.bytesInPerSec + const consumption = row.bytesOutPerSec if (production === undefined && consumption === undefined) { - return (N/A); - } else if (production === undefined) { - return (out: ); - } else if (consumption === undefined) { - return (in: ); - } else { + return N/A + } + if (production === undefined) { + return ( + + out: + + ) + } + if (consumption === undefined) { return ( -
-
in: - out: - - ); + + in: + + ) } + + return ( +
+
+ in: + + + out: + + + ) } const TopicTable: React.FC = () => { - const { clusterName } = useAppParams<{ clusterName: ClusterName }>(); - const [searchParams] = useSearchParams(); - const { isReadOnly } = React.useContext(ClusterContext); + const { clusterName } = useAppParams<{ clusterName: ClusterName }>() + const [searchParams] = useSearchParams() + const { isReadOnly } = React.useContext(ClusterContext) const { data } = useTopics({ clusterName, page: Number(searchParams.get('page') || 1), @@ -48,10 +61,10 @@ const TopicTable: React.FC = () => { sortOrder: (searchParams.get('sortDirection')?.toUpperCase() as SortOrder) || undefined, - }); + }) - const topics = data?.topics || []; - const pageCount = data?.pageCount || 0; + const topics = data?.topics || [] + const pageCount = data?.pageCount || 0 const columns = React.useMemo[]>( () => [ @@ -71,14 +84,14 @@ const TopicTable: React.FC = () => { header: 'Out of sync replicas', accessorKey: 'partitions', cell: ({ getValue }) => { - const partitions = getValue(); + const partitions = getValue() if (partitions === undefined || partitions.length === 0) { - return 0; + return 0 } return partitions.reduce((memo, { replicas }) => { - const outOfSync = replicas?.filter(({ inSync }) => !inSync); - return memo + (outOfSync?.length || 0); - }, 0); + const outOfSync = replicas?.filter(({ inSync }) => !inSync) + return memo + (outOfSync?.length || 0) + }, 0) }, }, { @@ -91,13 +104,13 @@ const TopicTable: React.FC = () => { accessorKey: 'partitions', enableSorting: false, cell: ({ getValue }) => { - const partitions = getValue(); + const partitions = getValue() if (partitions === undefined || partitions.length === 0) { - return 0; + return 0 } return partitions.reduce((memo, { offsetMax, offsetMin }) => { - return memo + (offsetMax - offsetMin); - }, 0); + return memo + (offsetMax - offsetMin) + }, 0) }, }, { @@ -108,10 +121,10 @@ const TopicTable: React.FC = () => { }, { header: 'Throughput', - accessorFn: row => formatThroughput(row), + accessorFn: (row) => formatThroughput(row), enableSorting: false, cell: ({ getValue }) => { - return getValue(); + return getValue() }, }, { @@ -121,7 +134,7 @@ const TopicTable: React.FC = () => { }, ], [] - ); + ) return (
{ enableRowSelection={ !isReadOnly ? (row) => !row.original.internal : undefined } - emptyMessage="No topics found" + emptyMessage='No topics found' /> - ); -}; + ) +} -export default TopicTable; +export default TopicTable diff --git a/kafka-ui-react-app/src/components/Topics/Topic/Overview/Overview.tsx b/kafka-ui-react-app/src/components/Topics/Topic/Overview/Overview.tsx index 503b064b0e5..5d99efb4084 100644 --- a/kafka-ui-react-app/src/components/Topics/Topic/Overview/Overview.tsx +++ b/kafka-ui-react-app/src/components/Topics/Topic/Overview/Overview.tsx @@ -1,38 +1,38 @@ -import React from 'react'; -import { Partition, Replica } from 'generated-sources'; -import BytesFormatted from 'components/common/BytesFormatted/BytesFormatted'; -import Table from 'components/common/NewTable'; -import * as Metrics from 'components/common/Metrics'; -import { Tag } from 'components/common/Tag/Tag.styled'; -import { RouteParamsClusterTopic } from 'lib/paths'; -import useAppParams from 'lib/hooks/useAppParams'; -import { useTopicDetails } from 'lib/hooks/api/topics'; -import { ColumnDef } from '@tanstack/react-table'; +import React from 'react' +import { Partition, Replica } from 'generated-sources' +import BytesFormatted from 'components/common/BytesFormatted/BytesFormatted' +import Table from 'components/common/NewTable' +import * as Metrics from 'components/common/Metrics' +import { Tag } from 'components/common/Tag/Tag.styled' +import { RouteParamsClusterTopic } from 'lib/paths' +import useAppParams from 'lib/hooks/useAppParams' +import { useTopicDetails } from 'lib/hooks/api/topics' +import { ColumnDef } from '@tanstack/react-table' -import * as S from './Overview.styled'; -import ActionsCell from './ActionsCell'; +import * as S from './Overview.styled' +import ActionsCell from './ActionsCell' const Overview: React.FC = () => { - const { clusterName, topicName } = useAppParams(); - const { data } = useTopicDetails({ clusterName, topicName }); + const { clusterName, topicName } = useAppParams() + const { data } = useTopicDetails({ clusterName, topicName }) const messageCount = React.useMemo( () => (data?.partitions || []).reduce((memo, partition) => { - return memo + partition.offsetMax - partition.offsetMin; + return memo + partition.offsetMax - partition.offsetMin }, 0), [data] - ); + ) const newData = React.useMemo(() => { - if (!data?.partitions) return []; + if (!data?.partitions) return [] return data.partitions.map((items: Partition) => { return { ...items, messageCount: items.offsetMax - items.offsetMin, - }; - }); - }, [data?.partitions]); + } + }) + }, [data?.partitions]) const columns = React.useMemo[]>( () => [ @@ -47,9 +47,9 @@ const Overview: React.FC = () => { accessorKey: 'replicas', cell: ({ getValue }) => { - const replicas = getValue(); + const replicas = getValue() if (replicas === undefined || replicas.length === 0) { - return 0; + return 0 } return replicas?.map(({ broker, leader }: Replica) => ( { > {broker} - )); + )) }, }, { @@ -81,20 +81,20 @@ const Overview: React.FC = () => { }, ], [] - ); + ) return ( <> - + {data?.partitionCount} - + {data?.replicationFactor} { )} { )} of {data?.replicas} - - {data?.internal ? 'Internal' : 'External'} + + {data?.internal ? 'Internal' : 'External'} - + - + {data?.segmentCount} - - {data?.cleanUpPolicy || 'Unknown'} + + {data?.cleanUpPolicy || 'Unknown'} - + {messageCount} - - + + - - + + @@ -153,10 +153,10 @@ const Overview: React.FC = () => { columns={columns} data={newData} enableSorting - emptyMessage="No Partitions found " + emptyMessage='No Partitions found ' /> - ); -}; + ) +} -export default Overview; +export default Overview From a9d3e4d935a997e12e14dda13427a534c4f9de77 Mon Sep 17 00:00:00 2001 From: Adam Cass Date: Thu, 20 Oct 2022 15:53:34 -0600 Subject: [PATCH 03/13] Revert use of semicolons and quotes --- .../src/components/Topics/List/TopicTable.tsx | 82 +++++++++--------- .../Topics/Topic/Overview/Overview.tsx | 84 +++++++++---------- 2 files changed, 83 insertions(+), 83 deletions(-) diff --git a/kafka-ui-react-app/src/components/Topics/List/TopicTable.tsx b/kafka-ui-react-app/src/components/Topics/List/TopicTable.tsx index 2525db73dde..5b0a87aa1f4 100644 --- a/kafka-ui-react-app/src/components/Topics/List/TopicTable.tsx +++ b/kafka-ui-react-app/src/components/Topics/List/TopicTable.tsx @@ -1,38 +1,38 @@ -import React from 'react' -import { SortOrder, Topic, TopicColumnsToSort } from 'generated-sources' -import { ColumnDef } from '@tanstack/react-table' -import Table, { SizeCell } from 'components/common/NewTable' -import useAppParams from 'lib/hooks/useAppParams' -import { ClusterName } from 'redux/interfaces' -import { useSearchParams } from 'react-router-dom' -import ClusterContext from 'components/contexts/ClusterContext' -import { useTopics } from 'lib/hooks/api/topics' -import { PER_PAGE } from 'lib/constants' -import BytesFormatted from 'components/common/BytesFormatted/BytesFormatted' +import React from 'react'; +import { SortOrder, Topic, TopicColumnsToSort } from 'generated-sources'; +import { ColumnDef } from '@tanstack/react-table'; +import Table, { SizeCell } from 'components/common/NewTable'; +import useAppParams from 'lib/hooks/useAppParams'; +import { ClusterName } from 'redux/interfaces'; +import { useSearchParams } from 'react-router-dom'; +import ClusterContext from 'components/contexts/ClusterContext'; +import { useTopics } from 'lib/hooks/api/topics'; +import { PER_PAGE } from 'lib/constants'; +import BytesFormatted from 'components/common/BytesFormatted/BytesFormatted'; -import { TopicTitleCell } from './TopicTitleCell' -import ActionsCell from './ActionsCell' -import BatchActionsbar from './BatchActionsBar' +import { TopicTitleCell } from './TopicTitleCell'; +import ActionsCell from './ActionsCell'; +import BatchActionsbar from './BatchActionsBar'; function formatThroughput(row: Topic) { - const production = row.bytesInPerSec - const consumption = row.bytesOutPerSec + const production = row.bytesInPerSec; + const consumption = row.bytesOutPerSec; if (production === undefined && consumption === undefined) { - return N/A + return N/A; } if (production === undefined) { return ( out: - ) + ); } if (consumption === undefined) { return ( in: - ) + ); } return ( @@ -44,13 +44,13 @@ function formatThroughput(row: Topic) { out: - ) + ); } const TopicTable: React.FC = () => { - const { clusterName } = useAppParams<{ clusterName: ClusterName }>() - const [searchParams] = useSearchParams() - const { isReadOnly } = React.useContext(ClusterContext) + const { clusterName } = useAppParams<{ clusterName: ClusterName }>(); + const [searchParams] = useSearchParams(); + const { isReadOnly } = React.useContext(ClusterContext); const { data } = useTopics({ clusterName, page: Number(searchParams.get('page') || 1), @@ -61,10 +61,10 @@ const TopicTable: React.FC = () => { sortOrder: (searchParams.get('sortDirection')?.toUpperCase() as SortOrder) || undefined, - }) + }); - const topics = data?.topics || [] - const pageCount = data?.pageCount || 0 + const topics = data?.topics || []; + const pageCount = data?.pageCount || 0; const columns = React.useMemo[]>( () => [ @@ -84,14 +84,14 @@ const TopicTable: React.FC = () => { header: 'Out of sync replicas', accessorKey: 'partitions', cell: ({ getValue }) => { - const partitions = getValue() + const partitions = getValue(); if (partitions === undefined || partitions.length === 0) { - return 0 + return 0; } return partitions.reduce((memo, { replicas }) => { - const outOfSync = replicas?.filter(({ inSync }) => !inSync) - return memo + (outOfSync?.length || 0) - }, 0) + const outOfSync = replicas?.filter(({ inSync }) => !inSync); + return memo + (outOfSync?.length || 0); + }, 0); }, }, { @@ -104,13 +104,13 @@ const TopicTable: React.FC = () => { accessorKey: 'partitions', enableSorting: false, cell: ({ getValue }) => { - const partitions = getValue() + const partitions = getValue(); if (partitions === undefined || partitions.length === 0) { - return 0 + return 0; } return partitions.reduce((memo, { offsetMax, offsetMin }) => { - return memo + (offsetMax - offsetMin) - }, 0) + return memo + (offsetMax - offsetMin); + }, 0); }, }, { @@ -124,7 +124,7 @@ const TopicTable: React.FC = () => { accessorFn: (row) => formatThroughput(row), enableSorting: false, cell: ({ getValue }) => { - return getValue() + return getValue(); }, }, { @@ -134,7 +134,7 @@ const TopicTable: React.FC = () => { }, ], [] - ) + ); return (
{ enableRowSelection={ !isReadOnly ? (row) => !row.original.internal : undefined } - emptyMessage='No topics found' + emptyMessage="No topics found" /> - ) -} + ); +}; -export default TopicTable +export default TopicTable; diff --git a/kafka-ui-react-app/src/components/Topics/Topic/Overview/Overview.tsx b/kafka-ui-react-app/src/components/Topics/Topic/Overview/Overview.tsx index 5d99efb4084..600dc48ff00 100644 --- a/kafka-ui-react-app/src/components/Topics/Topic/Overview/Overview.tsx +++ b/kafka-ui-react-app/src/components/Topics/Topic/Overview/Overview.tsx @@ -1,38 +1,38 @@ -import React from 'react' -import { Partition, Replica } from 'generated-sources' -import BytesFormatted from 'components/common/BytesFormatted/BytesFormatted' -import Table from 'components/common/NewTable' -import * as Metrics from 'components/common/Metrics' -import { Tag } from 'components/common/Tag/Tag.styled' -import { RouteParamsClusterTopic } from 'lib/paths' -import useAppParams from 'lib/hooks/useAppParams' -import { useTopicDetails } from 'lib/hooks/api/topics' -import { ColumnDef } from '@tanstack/react-table' +import React from 'react'; +import { Partition, Replica } from 'generated-sources'; +import BytesFormatted from 'components/common/BytesFormatted/BytesFormatted'; +import Table from 'components/common/NewTable'; +import * as Metrics from 'components/common/Metrics'; +import { Tag } from 'components/common/Tag/Tag.styled'; +import { RouteParamsClusterTopic } from 'lib/paths'; +import useAppParams from 'lib/hooks/useAppParams'; +import { useTopicDetails } from 'lib/hooks/api/topics'; +import { ColumnDef } from '@tanstack/react-table'; -import * as S from './Overview.styled' -import ActionsCell from './ActionsCell' +import * as S from './Overview.styled'; +import ActionsCell from './ActionsCell'; const Overview: React.FC = () => { - const { clusterName, topicName } = useAppParams() - const { data } = useTopicDetails({ clusterName, topicName }) + const { clusterName, topicName } = useAppParams(); + const { data } = useTopicDetails({ clusterName, topicName }); const messageCount = React.useMemo( () => (data?.partitions || []).reduce((memo, partition) => { - return memo + partition.offsetMax - partition.offsetMin + return memo + partition.offsetMax - partition.offsetMin; }, 0), [data] - ) + ); const newData = React.useMemo(() => { - if (!data?.partitions) return [] + if (!data?.partitions) return []; return data.partitions.map((items: Partition) => { return { ...items, messageCount: items.offsetMax - items.offsetMin, - } - }) - }, [data?.partitions]) + }; + }); + }, [data?.partitions]); const columns = React.useMemo[]>( () => [ @@ -47,9 +47,9 @@ const Overview: React.FC = () => { accessorKey: 'replicas', cell: ({ getValue }) => { - const replicas = getValue() + const replicas = getValue(); if (replicas === undefined || replicas.length === 0) { - return 0 + return 0; } return replicas?.map(({ broker, leader }: Replica) => ( { > {broker} - )) + )); }, }, { @@ -81,20 +81,20 @@ const Overview: React.FC = () => { }, ], [] - ) + ); return ( <> - + {data?.partitionCount} - + {data?.replicationFactor} { )} { )} of {data?.replicas} - - {data?.internal ? 'Internal' : 'External'} + + {data?.internal ? 'Internal' : 'External'} - + - + {data?.segmentCount} - - {data?.cleanUpPolicy || 'Unknown'} + + {data?.cleanUpPolicy || 'Unknown'} - + {messageCount} - + - + @@ -153,10 +153,10 @@ const Overview: React.FC = () => { columns={columns} data={newData} enableSorting - emptyMessage='No Partitions found ' + emptyMessage="No Partitions found " /> - ) -} + ); +}; -export default Overview +export default Overview; From 4398a3102844ee35d9fc83c529d6b26003693366 Mon Sep 17 00:00:00 2001 From: Adam Cass Date: Thu, 20 Oct 2022 17:19:58 -0600 Subject: [PATCH 04/13] Fix failing tests --- .../src/components/Topics/List/TopicTable.tsx | 10 +++++----- .../Topics/List/__tests__/TopicTable.spec.tsx | 8 ++++---- 2 files changed, 9 insertions(+), 9 deletions(-) diff --git a/kafka-ui-react-app/src/components/Topics/List/TopicTable.tsx b/kafka-ui-react-app/src/components/Topics/List/TopicTable.tsx index 5b0a87aa1f4..f217b7d476f 100644 --- a/kafka-ui-react-app/src/components/Topics/List/TopicTable.tsx +++ b/kafka-ui-react-app/src/components/Topics/List/TopicTable.tsx @@ -18,19 +18,19 @@ function formatThroughput(row: Topic) { const production = row.bytesInPerSec; const consumption = row.bytesOutPerSec; if (production === undefined && consumption === undefined) { - return N/A; + return ; } if (production === undefined) { return ( - out: + ); } if (consumption === undefined) { return ( - in: + ); } @@ -38,10 +38,10 @@ function formatThroughput(row: Topic) { return (
- in: + - out: + ); diff --git a/kafka-ui-react-app/src/components/Topics/List/__tests__/TopicTable.spec.tsx b/kafka-ui-react-app/src/components/Topics/List/__tests__/TopicTable.spec.tsx index 6031428895d..c9ede6fd682 100644 --- a/kafka-ui-react-app/src/components/Topics/List/__tests__/TopicTable.spec.tsx +++ b/kafka-ui-react-app/src/components/Topics/List/__tests__/TopicTable.spec.tsx @@ -92,13 +92,13 @@ describe('TopicTable Components', () => { screen.getByRole('link', { name: '__internal.topic' }) ).toBeInTheDocument(); expect( - screen.getByRole('row', { name: '__internal.topic 1 0 1 0 0Bytes' }) + screen.getByRole('row', { name: '__internal.topic 1 0 1 0 0Bytes N/A' }) ).toBeInTheDocument(); expect( screen.getByRole('link', { name: 'external.topic' }) ).toBeInTheDocument(); expect( - screen.getByRole('row', { name: 'external.topic 1 0 1 0 1KB' }) + screen.getByRole('row', { name: 'external.topic 1 0 1 0 1KB N/A' }) ).toBeInTheDocument(); expect(screen.getAllByRole('checkbox').length).toEqual(3); @@ -211,7 +211,7 @@ describe('TopicTable Components', () => { ).toEqual(2); // Internal topic action buttons are disabled const internalTopicRow = screen.getByRole('row', { - name: '__internal.topic 1 0 1 0 0Bytes', + name: '__internal.topic 1 0 1 0 0Bytes N/A', }); expect(internalTopicRow).toBeInTheDocument(); expect( @@ -221,7 +221,7 @@ describe('TopicTable Components', () => { ).toBeDisabled(); // External topic action buttons are enabled const externalTopicRow = screen.getByRole('row', { - name: 'external.topic 1 0 1 0 1KB', + name: 'external.topic 1 0 1 0 1KB N/A', }); expect(externalTopicRow).toBeInTheDocument(); const extBtn = within(externalTopicRow).getByRole('button', { From 0a2fca2cb966a08872d9b5ede3afae522700bc90 Mon Sep 17 00:00:00 2001 From: Adam Cass Date: Thu, 20 Oct 2022 17:33:28 -0600 Subject: [PATCH 05/13] Fix typo causing lint error --- .../src/components/Topics/List/TopicTable.tsx | 22 ++++++++++++++----- 1 file changed, 17 insertions(+), 5 deletions(-) diff --git a/kafka-ui-react-app/src/components/Topics/List/TopicTable.tsx b/kafka-ui-react-app/src/components/Topics/List/TopicTable.tsx index f217b7d476f..2f5aa06e7c4 100644 --- a/kafka-ui-react-app/src/components/Topics/List/TopicTable.tsx +++ b/kafka-ui-react-app/src/components/Topics/List/TopicTable.tsx @@ -18,19 +18,27 @@ function formatThroughput(row: Topic) { const production = row.bytesInPerSec; const consumption = row.bytesOutPerSec; if (production === undefined && consumption === undefined) { - return ; + return ( + + + + ); } if (production === undefined) { return ( - + ); } if (consumption === undefined) { return ( - + ); } @@ -38,10 +46,14 @@ function formatThroughput(row: Topic) { return (
- + - + ); From ebaf0b42db4c93f7bb8122f7c4b987ecc3991ec4 Mon Sep 17 00:00:00 2001 From: Adam Cass Date: Thu, 20 Oct 2022 18:01:37 -0600 Subject: [PATCH 06/13] Improve code coverage for throughput code --- .../Topics/List/__tests__/TopicTable.spec.tsx | 30 +++++++- kafka-ui-react-app/src/lib/fixtures/topics.ts | 70 +++++++++++++++++++ 2 files changed, 97 insertions(+), 3 deletions(-) diff --git a/kafka-ui-react-app/src/components/Topics/List/__tests__/TopicTable.spec.tsx b/kafka-ui-react-app/src/components/Topics/List/__tests__/TopicTable.spec.tsx index c9ede6fd682..2995b0fbf14 100644 --- a/kafka-ui-react-app/src/components/Topics/List/__tests__/TopicTable.spec.tsx +++ b/kafka-ui-react-app/src/components/Topics/List/__tests__/TopicTable.spec.tsx @@ -94,6 +94,30 @@ describe('TopicTable Components', () => { expect( screen.getByRole('row', { name: '__internal.topic 1 0 1 0 0Bytes N/A' }) ).toBeInTheDocument(); + expect( + screen.getByRole('link', { name: '__internal.topic2' }) + ).toBeInTheDocument(); + expect( + screen.getByRole('row', { + name: '__internal.topic2 1 0 1 0 0Bytes in: 0Bytes', + }) + ).toBeInTheDocument(); + expect( + screen.getByRole('link', { name: '__internal.topic3' }) + ).toBeInTheDocument(); + expect( + screen.getByRole('row', { + name: '__internal.topic3 1 0 1 0 0Bytes out: 0Bytes', + }) + ).toBeInTheDocument(); + expect( + screen.getByRole('link', { name: '__internal.topic4' }) + ).toBeInTheDocument(); + expect( + screen.getByRole('row', { + name: '__internal.topic4 1 0 1 0 0Bytes in: 0Bytes out: 0Bytes', + }) + ).toBeInTheDocument(); expect( screen.getByRole('link', { name: 'external.topic' }) ).toBeInTheDocument(); @@ -101,12 +125,12 @@ describe('TopicTable Components', () => { screen.getByRole('row', { name: 'external.topic 1 0 1 0 1KB N/A' }) ).toBeInTheDocument(); - expect(screen.getAllByRole('checkbox').length).toEqual(3); + expect(screen.getAllByRole('checkbox').length).toEqual(6); }); describe('Selectable rows', () => { it('renders selectable rows', () => { renderComponent({ topics: topicsPayload, pageCount: 1 }); - expect(screen.getAllByRole('checkbox').length).toEqual(3); + expect(screen.getAllByRole('checkbox').length).toEqual(6); // Disable checkbox for internal topic expect(screen.getAllByRole('checkbox')[1]).toBeDisabled(); // Disable checkbox for external topic @@ -208,7 +232,7 @@ describe('TopicTable Components', () => { renderComponent({ topics: topicsPayload, pageCount: 1 }); expect( screen.getAllByRole('button', { name: 'Dropdown Toggle' }).length - ).toEqual(2); + ).toEqual(5); // Internal topic action buttons are disabled const internalTopicRow = screen.getByRole('row', { name: '__internal.topic 1 0 1 0 0Bytes N/A', diff --git a/kafka-ui-react-app/src/lib/fixtures/topics.ts b/kafka-ui-react-app/src/lib/fixtures/topics.ts index 6fda7c2764d..339bae41d14 100644 --- a/kafka-ui-react-app/src/lib/fixtures/topics.ts +++ b/kafka-ui-react-app/src/lib/fixtures/topics.ts @@ -49,9 +49,79 @@ export const externalTopicPayload = { ], }; +export const internalTopicBytesInPayload = { + name: '__internal.topic2', + internal: true, + partitionCount: 1, + replicationFactor: 1, + replicas: 1, + inSyncReplicas: 1, + segmentSize: 0, + segmentCount: 1, + underReplicatedPartitions: 0, + partitions: [ + { + partition: 0, + leader: 1, + replicas: [{ broker: 1, leader: false, inSync: true }], + offsetMax: 0, + offsetMin: 0, + }, + ], + bytesInPerSec: 0, +}; + +export const internalTopicBytesOutPayload = { + name: '__internal.topic3', + internal: true, + partitionCount: 1, + replicationFactor: 1, + replicas: 1, + inSyncReplicas: 1, + segmentSize: 0, + segmentCount: 1, + underReplicatedPartitions: 0, + partitions: [ + { + partition: 0, + leader: 1, + replicas: [{ broker: 1, leader: false, inSync: true }], + offsetMax: 0, + offsetMin: 0, + }, + ], + bytesOutPerSec: 0, +}; + +export const internalTopicThroughputPayload = { + name: '__internal.topic4', + internal: true, + partitionCount: 1, + replicationFactor: 1, + replicas: 1, + inSyncReplicas: 1, + segmentSize: 0, + segmentCount: 1, + underReplicatedPartitions: 0, + partitions: [ + { + partition: 0, + leader: 1, + replicas: [{ broker: 1, leader: false, inSync: true }], + offsetMax: 0, + offsetMin: 0, + }, + ], + bytesInPerSec: 0, + bytesOutPerSec: 0, +}; + export const topicsPayload: Topic[] = [ internalTopicPayload, externalTopicPayload, + internalTopicBytesInPayload, + internalTopicBytesOutPayload, + internalTopicThroughputPayload, ]; export const topicConsumerGroups: ConsumerGroup[] = [ From c4f6fe20a10dc58b7d69f0d585d7b814a29ebf5b Mon Sep 17 00:00:00 2001 From: Adam Cass Date: Sun, 30 Oct 2022 15:34:52 -0600 Subject: [PATCH 07/13] Add ThroughputCell component --- .../components/Topics/List/ThroughputCell.tsx | 43 +++++++++++++++ .../src/components/Topics/List/TopicTable.tsx | 52 +------------------ 2 files changed, 45 insertions(+), 50 deletions(-) create mode 100644 kafka-ui-react-app/src/components/Topics/List/ThroughputCell.tsx diff --git a/kafka-ui-react-app/src/components/Topics/List/ThroughputCell.tsx b/kafka-ui-react-app/src/components/Topics/List/ThroughputCell.tsx new file mode 100644 index 00000000000..708d0a26ab8 --- /dev/null +++ b/kafka-ui-react-app/src/components/Topics/List/ThroughputCell.tsx @@ -0,0 +1,43 @@ +import React from 'react'; +import { CellContext } from '@tanstack/react-table'; +import { Topic } from 'generated-sources'; +import BytesFormatted from 'components/common/BytesFormatted/BytesFormatted'; + +function formatThroughput(row: Topic) { + const production = row.bytesInPerSec; + const consumption = row.bytesOutPerSec; + if (production === undefined && consumption === undefined) { + return
N/A
; + } + if (production === undefined) { + return ( +
+ out: +
+ ); + } + if (consumption === undefined) { + return ( +
+ in: +
+ ); + } + + return ( +
+
+ in: +
+
+ out: +
+
+ ); +} + +export const ThroughputCell: React.FC> = ({ + row: { original }, +}) => { + return formatThroughput(original); +}; diff --git a/kafka-ui-react-app/src/components/Topics/List/TopicTable.tsx b/kafka-ui-react-app/src/components/Topics/List/TopicTable.tsx index 2f5aa06e7c4..84ef5911ae4 100644 --- a/kafka-ui-react-app/src/components/Topics/List/TopicTable.tsx +++ b/kafka-ui-react-app/src/components/Topics/List/TopicTable.tsx @@ -8,56 +8,11 @@ import { useSearchParams } from 'react-router-dom'; import ClusterContext from 'components/contexts/ClusterContext'; import { useTopics } from 'lib/hooks/api/topics'; import { PER_PAGE } from 'lib/constants'; -import BytesFormatted from 'components/common/BytesFormatted/BytesFormatted'; import { TopicTitleCell } from './TopicTitleCell'; import ActionsCell from './ActionsCell'; import BatchActionsbar from './BatchActionsBar'; - -function formatThroughput(row: Topic) { - const production = row.bytesInPerSec; - const consumption = row.bytesOutPerSec; - if (production === undefined && consumption === undefined) { - return ( - - - - ); - } - if (production === undefined) { - return ( - - - - ); - } - if (consumption === undefined) { - return ( - - - - ); - } - - return ( -
-
- - - - - - - ); -} +import { ThroughputCell } from './ThroughputCell'; const TopicTable: React.FC = () => { const { clusterName } = useAppParams<{ clusterName: ClusterName }>(); @@ -133,11 +88,8 @@ const TopicTable: React.FC = () => { }, { header: 'Throughput', - accessorFn: (row) => formatThroughput(row), enableSorting: false, - cell: ({ getValue }) => { - return getValue(); - }, + cell: ThroughputCell, }, { id: 'actions', From c630c528f50e21a1754f24dfb98892dc38180ad2 Mon Sep 17 00:00:00 2001 From: acass91 Date: Mon, 7 Nov 2022 17:54:23 -0700 Subject: [PATCH 08/13] Apply suggestions from code review Co-authored-by: Oleg Shur --- .../src/components/Topics/List/ThroughputCell.tsx | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/kafka-ui-react-app/src/components/Topics/List/ThroughputCell.tsx b/kafka-ui-react-app/src/components/Topics/List/ThroughputCell.tsx index 708d0a26ab8..793e6a4bca7 100644 --- a/kafka-ui-react-app/src/components/Topics/List/ThroughputCell.tsx +++ b/kafka-ui-react-app/src/components/Topics/List/ThroughputCell.tsx @@ -7,32 +7,32 @@ function formatThroughput(row: Topic) { const production = row.bytesInPerSec; const consumption = row.bytesOutPerSec; if (production === undefined && consumption === undefined) { - return
N/A
; + return <>N/A; } if (production === undefined) { return ( -
+ <> out: -
+ ); } if (consumption === undefined) { return ( -
+ <> in: -
+ ); } return ( -
+ <>
in:
out:
-
+ ); } From 76dc394580b782936fb14605bf9c7a9a5221a1a2 Mon Sep 17 00:00:00 2001 From: Adam Cass Date: Thu, 10 Nov 2022 00:48:11 -0700 Subject: [PATCH 09/13] Inline the throughput code --- .../src/components/Topics/List/ThroughputCell.tsx | 14 +++++--------- 1 file changed, 5 insertions(+), 9 deletions(-) diff --git a/kafka-ui-react-app/src/components/Topics/List/ThroughputCell.tsx b/kafka-ui-react-app/src/components/Topics/List/ThroughputCell.tsx index 793e6a4bca7..cfd3362f97b 100644 --- a/kafka-ui-react-app/src/components/Topics/List/ThroughputCell.tsx +++ b/kafka-ui-react-app/src/components/Topics/List/ThroughputCell.tsx @@ -3,9 +3,11 @@ import { CellContext } from '@tanstack/react-table'; import { Topic } from 'generated-sources'; import BytesFormatted from 'components/common/BytesFormatted/BytesFormatted'; -function formatThroughput(row: Topic) { - const production = row.bytesInPerSec; - const consumption = row.bytesOutPerSec; +export const ThroughputCell: React.FC> = ({ + row: { original }, +}) => { + const production = original.bytesInPerSec; + const consumption = original.bytesOutPerSec; if (production === undefined && consumption === undefined) { return <>N/A; } @@ -34,10 +36,4 @@ function formatThroughput(row: Topic) { ); -} - -export const ThroughputCell: React.FC> = ({ - row: { original }, -}) => { - return formatThroughput(original); }; From e2d29236d72dcf0b13be5d2d5ce65dd11e7fc284 Mon Sep 17 00:00:00 2001 From: Adam Cass Date: Sun, 20 Nov 2022 17:23:41 -0700 Subject: [PATCH 10/13] Update tests --- .../Topics/List/__tests__/TopicTable.spec.tsx | 17 +++++++++-------- 1 file changed, 9 insertions(+), 8 deletions(-) diff --git a/kafka-ui-react-app/src/components/Topics/List/__tests__/TopicTable.spec.tsx b/kafka-ui-react-app/src/components/Topics/List/__tests__/TopicTable.spec.tsx index 3696cbd0147..028a22a7c2b 100644 --- a/kafka-ui-react-app/src/components/Topics/List/__tests__/TopicTable.spec.tsx +++ b/kafka-ui-react-app/src/components/Topics/List/__tests__/TopicTable.spec.tsx @@ -92,14 +92,16 @@ describe('TopicTable Components', () => { screen.getByRole('link', { name: '__internal.topic' }) ).toBeInTheDocument(); expect( - screen.getByRole('row', { name: '__internal.topic 1 0 1 0 0Bytes N/A' }) + screen.getByRole('row', { + name: '__internal.topic 1 0 1 0 0 Bytes N/A', + }) ).toBeInTheDocument(); expect( screen.getByRole('link', { name: '__internal.topic2' }) ).toBeInTheDocument(); expect( screen.getByRole('row', { - name: '__internal.topic2 1 0 1 0 0Bytes in: 0Bytes', + name: '__internal.topic2 1 0 1 0 0 Bytes in: 0 Bytes', }) ).toBeInTheDocument(); expect( @@ -107,7 +109,7 @@ describe('TopicTable Components', () => { ).toBeInTheDocument(); expect( screen.getByRole('row', { - name: '__internal.topic3 1 0 1 0 0Bytes out: 0Bytes', + name: '__internal.topic3 1 0 1 0 0 Bytes out: 0 Bytes', }) ).toBeInTheDocument(); expect( @@ -115,15 +117,14 @@ describe('TopicTable Components', () => { ).toBeInTheDocument(); expect( screen.getByRole('row', { - name: '__internal.topic4 1 0 1 0 0Bytes in: 0Bytes out: 0Bytes', + name: '__internal.topic4 1 0 1 0 0 Bytes in: 0 Bytes out: 0 Bytes', }) - screen.getByRole('row', { name: '__internal.topic 1 0 1 0 0 Bytes' }) ).toBeInTheDocument(); expect( screen.getByRole('link', { name: 'external.topic' }) ).toBeInTheDocument(); expect( - screen.getByRole('row', { name: 'external.topic 1 0 1 0 1KB N/A' }) + screen.getByRole('row', { name: 'external.topic 1 0 1 0 1 KB N/A' }) ).toBeInTheDocument(); expect(screen.getAllByRole('checkbox').length).toEqual(6); @@ -236,7 +237,7 @@ describe('TopicTable Components', () => { ).toEqual(5); // Internal topic action buttons are disabled const internalTopicRow = screen.getByRole('row', { - name: '__internal.topic 1 0 1 0 0Bytes N/A', + name: '__internal.topic 1 0 1 0 0 Bytes N/A', }); expect(internalTopicRow).toBeInTheDocument(); expect( @@ -246,7 +247,7 @@ describe('TopicTable Components', () => { ).toBeDisabled(); // External topic action buttons are enabled const externalTopicRow = screen.getByRole('row', { - name: 'external.topic 1 0 1 0 1KB N/A', + name: 'external.topic 1 0 1 0 1 KB N/A', }); expect(externalTopicRow).toBeInTheDocument(); const extBtn = within(externalTopicRow).getByRole('button', { From 3051a7d90013522643b83bb14a72919bee96a4a0 Mon Sep 17 00:00:00 2001 From: Adam Cass Date: Sun, 11 Dec 2022 17:00:12 -0700 Subject: [PATCH 11/13] Add up/down arrows to throughput cell --- .../components/Topics/List/ThroughputCell.tsx | 20 +++++++------- .../src/components/Topics/List/TopicTable.tsx | 2 +- .../Topics/List/__tests__/TopicTable.spec.tsx | 14 +++++----- .../components/common/Icons/ArrowDownIcon.tsx | 5 +++- .../components/common/Icons/ArrowUpIcon.tsx | 26 +++++++++++++++++++ 5 files changed, 49 insertions(+), 18 deletions(-) create mode 100644 kafka-ui-react-app/src/components/common/Icons/ArrowUpIcon.tsx diff --git a/kafka-ui-react-app/src/components/Topics/List/ThroughputCell.tsx b/kafka-ui-react-app/src/components/Topics/List/ThroughputCell.tsx index cfd3362f97b..afa7d8dcda3 100644 --- a/kafka-ui-react-app/src/components/Topics/List/ThroughputCell.tsx +++ b/kafka-ui-react-app/src/components/Topics/List/ThroughputCell.tsx @@ -2,6 +2,8 @@ import React from 'react'; import { CellContext } from '@tanstack/react-table'; import { Topic } from 'generated-sources'; import BytesFormatted from 'components/common/BytesFormatted/BytesFormatted'; +import ArrowDownIcon from 'components/common/Icons/ArrowDownIcon'; +import ArrowUpIcon from 'components/common/Icons/ArrowUpIcon'; export const ThroughputCell: React.FC> = ({ row: { original }, @@ -9,31 +11,31 @@ export const ThroughputCell: React.FC> = ({ const production = original.bytesInPerSec; const consumption = original.bytesOutPerSec; if (production === undefined && consumption === undefined) { - return <>N/A; + return ( + <> + N/A N/A + + ); } if (production === undefined) { return ( <> - out: + ); } if (consumption === undefined) { return ( <> - in: + ); } return ( <> -
- in: -
-
- out: -
+ {' '} + ); }; diff --git a/kafka-ui-react-app/src/components/Topics/List/TopicTable.tsx b/kafka-ui-react-app/src/components/Topics/List/TopicTable.tsx index 84ef5911ae4..91070c62f85 100644 --- a/kafka-ui-react-app/src/components/Topics/List/TopicTable.tsx +++ b/kafka-ui-react-app/src/components/Topics/List/TopicTable.tsx @@ -87,7 +87,7 @@ const TopicTable: React.FC = () => { cell: SizeCell, }, { - header: 'Throughput', + header: 'Speed', enableSorting: false, cell: ThroughputCell, }, diff --git a/kafka-ui-react-app/src/components/Topics/List/__tests__/TopicTable.spec.tsx b/kafka-ui-react-app/src/components/Topics/List/__tests__/TopicTable.spec.tsx index bf29b768670..af222c0a0a0 100644 --- a/kafka-ui-react-app/src/components/Topics/List/__tests__/TopicTable.spec.tsx +++ b/kafka-ui-react-app/src/components/Topics/List/__tests__/TopicTable.spec.tsx @@ -93,7 +93,7 @@ describe('TopicTable Components', () => { ).toBeInTheDocument(); expect( screen.getByRole('row', { - name: '__internal.topic 1 0 1 0 0 Bytes N/A', + name: /__internal.topic 1 0 1 0 0 Bytes* N\/A/, }) ).toBeInTheDocument(); expect( @@ -101,7 +101,7 @@ describe('TopicTable Components', () => { ).toBeInTheDocument(); expect( screen.getByRole('row', { - name: '__internal.topic2 1 0 1 0 0 Bytes in: 0 Bytes', + name: /__internal.topic2 1 0 1 0* 0 Bytes* 0 Bytes/, }) ).toBeInTheDocument(); expect( @@ -109,7 +109,7 @@ describe('TopicTable Components', () => { ).toBeInTheDocument(); expect( screen.getByRole('row', { - name: '__internal.topic3 1 0 1 0 0 Bytes out: 0 Bytes', + name: /__internal.topic3 1 0 1 0* 0 Bytes* 0 Bytes/, }) ).toBeInTheDocument(); expect( @@ -117,14 +117,14 @@ describe('TopicTable Components', () => { ).toBeInTheDocument(); expect( screen.getByRole('row', { - name: '__internal.topic4 1 0 1 0 0 Bytes in: 0 Bytes out: 0 Bytes', + name: /__internal.topic4 1 0 1 0 0 Bytes* 0 Bytes* 0 Bytes/, }) ).toBeInTheDocument(); expect( screen.getByRole('link', { name: 'external.topic' }) ).toBeInTheDocument(); expect( - screen.getByRole('row', { name: 'external.topic 1 0 1 0 1 KB N/A' }) + screen.getByRole('row', { name: /external.topic 1 0 1 0 1 KB* N\/A / }) ).toBeInTheDocument(); expect(screen.getAllByRole('checkbox').length).toEqual(6); @@ -237,7 +237,7 @@ describe('TopicTable Components', () => { ).toEqual(5); // Internal topic action buttons are disabled const internalTopicRow = screen.getByRole('row', { - name: '__internal.topic 1 0 1 0 0 Bytes N/A', + name: /__internal.topic 1 0 1 0 0 Bytes* N\/A/, }); expect(internalTopicRow).toBeInTheDocument(); expect( @@ -247,7 +247,7 @@ describe('TopicTable Components', () => { ).toBeDisabled(); // External topic action buttons are enabled const externalTopicRow = screen.getByRole('row', { - name: 'external.topic 1 0 1 0 1 KB N/A', + name: /external.topic 1 0 1 0 1 KB* N\/A/, }); expect(externalTopicRow).toBeInTheDocument(); const extBtn = within(externalTopicRow).getByRole('button', { diff --git a/kafka-ui-react-app/src/components/common/Icons/ArrowDownIcon.tsx b/kafka-ui-react-app/src/components/common/Icons/ArrowDownIcon.tsx index a026dd301b8..36c6119b2e1 100644 --- a/kafka-ui-react-app/src/components/common/Icons/ArrowDownIcon.tsx +++ b/kafka-ui-react-app/src/components/common/Icons/ArrowDownIcon.tsx @@ -8,7 +8,10 @@ const ArrowDownIcon: React.FC = () => ( height="10" > {/* Font Awesome Pro 6.1.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. */} - + ); diff --git a/kafka-ui-react-app/src/components/common/Icons/ArrowUpIcon.tsx b/kafka-ui-react-app/src/components/common/Icons/ArrowUpIcon.tsx new file mode 100644 index 00000000000..901e44ff659 --- /dev/null +++ b/kafka-ui-react-app/src/components/common/Icons/ArrowUpIcon.tsx @@ -0,0 +1,26 @@ +import React from 'react'; + +const ArrowUpIcon: React.FC = () => ( + + {/* Font Awesome Pro 6.1.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. */} + + + +); + +export default ArrowUpIcon; From d4052ee1ab3a0a8f7ffb0ae504f2760a7abb188d Mon Sep 17 00:00:00 2001 From: davitbejanyan Date: Wed, 17 May 2023 12:36:21 +0400 Subject: [PATCH 12/13] change arrow icons like in design --- .../components/Topics/List/ThroughputCell.tsx | 60 ++++++++++++++----- .../common/Icons/CircleArrowDownIcon.tsx | 28 +++++++++ .../common/Icons/CircleArrowUpIcon.tsx | 28 +++++++++ 3 files changed, 101 insertions(+), 15 deletions(-) create mode 100644 kafka-ui-react-app/src/components/common/Icons/CircleArrowDownIcon.tsx create mode 100644 kafka-ui-react-app/src/components/common/Icons/CircleArrowUpIcon.tsx diff --git a/kafka-ui-react-app/src/components/Topics/List/ThroughputCell.tsx b/kafka-ui-react-app/src/components/Topics/List/ThroughputCell.tsx index afa7d8dcda3..2716e6a312e 100644 --- a/kafka-ui-react-app/src/components/Topics/List/ThroughputCell.tsx +++ b/kafka-ui-react-app/src/components/Topics/List/ThroughputCell.tsx @@ -2,40 +2,70 @@ import React from 'react'; import { CellContext } from '@tanstack/react-table'; import { Topic } from 'generated-sources'; import BytesFormatted from 'components/common/BytesFormatted/BytesFormatted'; -import ArrowDownIcon from 'components/common/Icons/ArrowDownIcon'; -import ArrowUpIcon from 'components/common/Icons/ArrowUpIcon'; +import CircleArrowDownIcon from 'components/common/Icons/CircleArrowDownIcon'; +import CircleArrowUpIcon from 'components/common/Icons/CircleArrowUpIcon'; +import styled from 'styled-components'; +const Wrapper = styled.div` + display: flex; + span { + display: flex; + align-items: center; + &:first-child { + margin-right: 10px; + } + & > svg { + margin-right: 5px; + } + } +`; export const ThroughputCell: React.FC> = ({ row: { original }, }) => { const production = original.bytesInPerSec; const consumption = original.bytesOutPerSec; + if (production === undefined && consumption === undefined) { return ( - <> - N/A N/A - + + + + N/A + + + + N/A + + ); } if (production === undefined) { return ( - <> - - + + + + + ); } if (consumption === undefined) { return ( - <> - - + + + + + ); } return ( - <> - {' '} - - + + + + + + + + ); }; diff --git a/kafka-ui-react-app/src/components/common/Icons/CircleArrowDownIcon.tsx b/kafka-ui-react-app/src/components/common/Icons/CircleArrowDownIcon.tsx new file mode 100644 index 00000000000..2c5f43fe410 --- /dev/null +++ b/kafka-ui-react-app/src/components/common/Icons/CircleArrowDownIcon.tsx @@ -0,0 +1,28 @@ +import React from 'react'; + +const CircleArrowDownIcon: React.FC = () => { + return ( + + + + + + ); +}; +export default CircleArrowDownIcon; diff --git a/kafka-ui-react-app/src/components/common/Icons/CircleArrowUpIcon.tsx b/kafka-ui-react-app/src/components/common/Icons/CircleArrowUpIcon.tsx new file mode 100644 index 00000000000..a538c489d19 --- /dev/null +++ b/kafka-ui-react-app/src/components/common/Icons/CircleArrowUpIcon.tsx @@ -0,0 +1,28 @@ +import React from 'react'; + +const CircleArrowUpIcon: React.FC = () => { + return ( + + + + + + ); +}; +export default CircleArrowUpIcon; From 7da7d4f699d0da88905cc98e626c5fa3aa7d9298 Mon Sep 17 00:00:00 2001 From: davitbejanyan Date: Wed, 24 May 2023 15:30:55 +0400 Subject: [PATCH 13/13] refactoring ThroughputCell component --- .../components/Topics/List/ThroughputCell.tsx | 60 +++++++------------ 1 file changed, 22 insertions(+), 38 deletions(-) diff --git a/kafka-ui-react-app/src/components/Topics/List/ThroughputCell.tsx b/kafka-ui-react-app/src/components/Topics/List/ThroughputCell.tsx index 2716e6a312e..9ef3a9da82b 100644 --- a/kafka-ui-react-app/src/components/Topics/List/ThroughputCell.tsx +++ b/kafka-ui-react-app/src/components/Topics/List/ThroughputCell.tsx @@ -25,47 +25,31 @@ export const ThroughputCell: React.FC> = ({ const production = original.bytesInPerSec; const consumption = original.bytesOutPerSec; - if (production === undefined && consumption === undefined) { - return ( - - - - N/A - - - - N/A - - - ); - } - if (production === undefined) { - return ( - - - - - - ); - } - if (consumption === undefined) { - return ( - - - - - - ); - } + const isUndefinedProductionConsumption = + production === undefined && consumption === undefined; + + const circleArrowDownIcon = (isUndefinedProductionConsumption || + production !== undefined) && ( + + + {(isUndefinedProductionConsumption && 'N/A') || ( + + )} + + ); + const circleArrowUpIcon = (isUndefinedProductionConsumption || + consumption !== undefined) && ( + + + {(isUndefinedProductionConsumption && 'N/A') || ( + + )} + + ); return ( - - - - - - + {circleArrowDownIcon} {circleArrowUpIcon} ); };
N/A
out: >
in:
in:
out:
N/A
N/A
out: > + out: +
in: + in: +
in: + in: +
out: + out: +
N/A
- out: -
- in: -
- in: -
- out: -