-
Notifications
You must be signed in to change notification settings - Fork 1.4k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: consumed new 2 table merging logic for producer latency overview
- Loading branch information
1 parent
8de3782
commit bcc55f4
Showing
5 changed files
with
104 additions
and
166 deletions.
There are no files selected for viewing
14 changes: 3 additions & 11 deletions
14
...ls/MQTables/getTopicThroughputOverview.ts → ...agingQueues/getTopicThroughputOverview.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
111 changes: 27 additions & 84 deletions
111
frontend/src/pages/MessagingQueues/MQDetails/MQTables/MQTableUtils.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,92 +1,35 @@ | ||
| import { Typography } from 'antd'; | ||
| import dayjs from 'dayjs'; | ||
| import { History } from 'history'; | ||
| import { | ||
| convertToTitleCase, | ||
| RowData, | ||
| } from 'pages/MessagingQueues/MessagingQueuesUtils'; | ||
| import { RowData } from 'pages/MessagingQueues/MessagingQueuesUtils'; | ||
|
|
||
| interface ProducerLatencyOverviewColumn { | ||
| timestamp: string; | ||
| data: { | ||
| [key: string]: number | string; | ||
| }; | ||
| } | ||
|
|
||
| export interface TopicThroughputProducerOverviewResponse { | ||
| status: string; | ||
| payload: { | ||
| resultType: string; | ||
| result: { | ||
| queryName: string; | ||
| list: ProducerLatencyOverviewColumn[]; | ||
| }[]; | ||
| }; | ||
| } | ||
| import { MessagingQueuesPayloadProps } from './getConsumerLagDetails'; | ||
|
|
||
| export const getColumnsForProducerLatencyOverview = ( | ||
| list: ProducerLatencyOverviewColumn[], | ||
| history: History<unknown>, | ||
| ): RowData[] => { | ||
| if (list?.length === 0) { | ||
| export function getTableDataForProducerLatencyOverview( | ||
| data: MessagingQueuesPayloadProps['payload'], | ||
| ): RowData[] { | ||
| if (data?.result?.length === 0) { | ||
| return []; | ||
| } | ||
|
|
||
| const columns: { | ||
| title: string; | ||
| dataIndex: string; | ||
| key: string; | ||
| }[] = Object.keys(list[0].data)?.map((column) => ({ | ||
| title: convertToTitleCase(column), | ||
| dataIndex: column, | ||
| key: column, | ||
| render: (data: string | number): JSX.Element => { | ||
| if (column === 'service_name') { | ||
| return ( | ||
| <Typography.Link | ||
| onClick={(e): void => { | ||
| e.preventDefault(); | ||
| e.stopPropagation(); | ||
| history.push(`/services/${encodeURIComponent(data as string)}`); | ||
| }} | ||
| > | ||
| {data} | ||
| </Typography.Link> | ||
| ); | ||
| } | ||
|
|
||
| if (column === 'ts') { | ||
| const date = | ||
| typeof data === 'string' | ||
| ? dayjs(data).format('YYYY-MM-DD HH:mm:ss.SSS') | ||
| : dayjs(data / 1e6).format('YYYY-MM-DD HH:mm:ss.SSS'); | ||
| return <Typography.Text>{date}</Typography.Text>; | ||
| } | ||
|
|
||
| if (typeof data === 'number') { | ||
| return <Typography.Text>{data.toFixed(3)}</Typography.Text>; | ||
| } | ||
|
|
||
| return <Typography.Text>{data}</Typography.Text>; | ||
| }, | ||
| })); | ||
| const firstTableData = data.result[0].table.rows || []; | ||
| const secondTableData = data.result[1]?.table.rows || []; | ||
|
|
||
| return columns; | ||
| }; | ||
|
|
||
| export const getTableDataForProducerLatencyOverview = ( | ||
| list: ProducerLatencyOverviewColumn[], | ||
| ): RowData[] => { | ||
| if (list?.length === 0) { | ||
| return []; | ||
| } | ||
|
|
||
| const tableData: RowData[] = list?.map( | ||
| (row, index: number): RowData => ({ | ||
| ...row.data, | ||
| key: index, | ||
| }), | ||
| // Create a map for quick lookup of byte_rate using service_name and topic | ||
| const byteRateMap = new Map( | ||
| secondTableData.map((row) => [ | ||
| `${row.data.service_name}--${row.data.topic}`, | ||
| row.data.byte_rate, | ||
| ]), | ||
| ); | ||
|
|
||
| return tableData; | ||
| }; | ||
| // Merge the data from both tables | ||
| const mergedTableData: RowData[] = | ||
| firstTableData.map( | ||
| (row, index): RowData => ({ | ||
| ...row.data, | ||
| byte_rate: | ||
| byteRateMap.get(`${row.data.service_name}--${row.data.topic}`) || 0, | ||
| key: index, | ||
| }), | ||
| ) || []; | ||
|
|
||
| return mergedTableData; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.