chore: fix cluster metrics

frontend/src/container/InfraMonitoringK8s/Clusters/ClusterDetails/Events/ClusterEvents.tsx

@@ -155,6 +155,7 @@ export default function Events({
 					id: event.data.id,
 					key: event.data.id,
 					resources_string: event.data.resources_string,
+					attributes_string: event.data.attributes_string,
 				}),
 			);
 
@@ -174,7 +175,9 @@ export default function Events({
 	}, [eventsData]);
 
 	const handleExpandRow = (record: EventDataType): JSX.Element => (
-		<EventContents data={record.resources_string} />
+		<EventContents
+			data={{ ...record.attributes_string, ...record.resources_string }}
+		/>
 	);
 
 	const handlePrev = (): void => {

frontend/src/container/InfraMonitoringK8s/Clusters/ClusterDetails/Metrics/ClusterMetrics.tsx

@@ -5,6 +5,11 @@ import { K8sClustersData } from 'api/infraMonitoring/getK8sClustersList';
 import cx from 'classnames';
 import Uplot from 'components/Uplot';
 import { ENTITY_VERSION_V4 } from 'constants/app';
+import { PANEL_TYPES } from 'constants/queryBuilder';
+import {
+	getMetricsTableData,
+	MetricsTable,
+} from 'container/InfraMonitoringK8s/commonUtils';
 import DateTimeSelectionV2 from 'container/TopNav/DateTimeSelectionV2';
 import {
 	CustomTimeType,
@@ -19,6 +24,7 @@ import { useMemo, useRef } from 'react';
 import { useQueries, UseQueryResult } from 'react-query';
 import { SuccessResponse } from 'types/api';
 import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
+import { Options } from 'uplot';
 
 import { clusterWidgetInfo, getClusterQueryPayload } from './constants';
 
@@ -62,14 +68,24 @@ function ClusterMetrics({
 	const dimensions = useResizeObserver(graphRef);
 
 	const chartData = useMemo(
-		() => queries.map(({ data }) => getUPlotChartData(data?.payload)),
+		() =>
+			queries.map(({ data }) => {
+				const panelType = (data?.params as any)?.compositeQuery?.panelType;
+				return panelType === PANEL_TYPES.TABLE
+					? getMetricsTableData(data)
+					: getUPlotChartData(data?.payload);
+			}),
 		[queries],
 	);
 
 	const options = useMemo(
 		() =>
-			queries.map(({ data }, idx) =>
-				getUPlotChartOptions({
+			queries.map(({ data }, idx) => {
+				const panelType = (data?.params as any)?.compositeQuery?.panelType;
+				if (panelType === PANEL_TYPES.TABLE) {
+					return null;
+				}
+				return getUPlotChartOptions({
 					apiResponse: data?.payload,
 					isDarkMode,
 					dimensions,
@@ -78,8 +94,8 @@ function ClusterMetrics({
 					softMin: null,
 					minTimeScale: timeRange.startTime,
 					maxTimeScale: timeRange.endTime,
-				}),
-			),
+				});
+			}),
 		[queries, isDarkMode, dimensions, timeRange.startTime, timeRange.endTime],
 	);
 
@@ -96,14 +112,24 @@ function ClusterMetrics({
 				(query.error as Error)?.message || 'Something went wrong';
 			return <div>{errorMessage}</div>;
 		}
+
+		const { panelType } = (query.data?.params as any).compositeQuery;
+
 		return (
 			<div
 				className={cx('chart-container', {
 					'no-data-container':
 						!query.isLoading && !query?.data?.payload?.data?.result?.length,
 				})}
 			>
-				<Uplot options={options[idx]} data={chartData[idx]} />
+				{panelType === PANEL_TYPES.TABLE ? (
+					<MetricsTable
+						rows={chartData[idx][0].rows}
+						columns={chartData[idx][0].columns}
+					/>
+				) : (
+					<Uplot options={options[idx] as Options} data={chartData[idx]} />
+				)}
 			</div>
 		);
 	};

frontend/src/container/InfraMonitoringK8s/Clusters/ClusterDetails/Metrics/constants.ts

@@ -641,7 +641,7 @@ export const getClusterQueryPayload = (
 	},
 	{
 		selectedTime: 'GLOBAL_TIME',
-		graphType: PANEL_TYPES.TIME_SERIES,
+		graphType: PANEL_TYPES.TABLE,
 		query: {
 			builder: {
 				queryData: [
@@ -788,13 +788,13 @@ export const getClusterQueryPayload = (
 			queryType: EQueryType.QUERY_BUILDER,
 		},
 		variables: {},
-		formatForWeb: false,
+		formatForWeb: true,
 		start,
 		end,
 	},
 	{
 		selectedTime: 'GLOBAL_TIME',
-		graphType: PANEL_TYPES.TIME_SERIES,
+		graphType: PANEL_TYPES.TABLE,
 		query: {
 			builder: {
 				queryData: [
@@ -1061,13 +1061,13 @@ export const getClusterQueryPayload = (
 			queryType: EQueryType.QUERY_BUILDER,
 		},
 		variables: {},
-		formatForWeb: false,
+		formatForWeb: true,
 		start,
 		end,
 	},
 	{
 		selectedTime: 'GLOBAL_TIME',
-		graphType: PANEL_TYPES.TIME_SERIES,
+		graphType: PANEL_TYPES.TABLE,
 		query: {
 			builder: {
 				queryData: [
@@ -1250,13 +1250,13 @@ export const getClusterQueryPayload = (
 			queryType: EQueryType.QUERY_BUILDER,
 		},
 		variables: {},
-		formatForWeb: false,
+		formatForWeb: true,
 		start,
 		end,
 	},
 	{
 		selectedTime: 'GLOBAL_TIME',
-		graphType: PANEL_TYPES.TIME_SERIES,
+		graphType: PANEL_TYPES.TABLE,
 		query: {
 			builder: {
 				queryData: [
@@ -1523,7 +1523,7 @@ export const getClusterQueryPayload = (
 			queryType: EQueryType.QUERY_BUILDER,
 		},
 		variables: {},
-		formatForWeb: false,
+		formatForWeb: true,
 		start,
 		end,
 	},

frontend/src/container/InfraMonitoringK8s/Clusters/K8sClustersList.tsx

@@ -394,18 +394,6 @@ function K8sClustersList({
 		setselectedClusterName(null);
 	};
 
-	const showsClustersTable =
-		!isError &&
-		!isLoading &&
-		!isFetching &&
-		!(formattedClustersData.length === 0 && queryFilters.items.length > 0);
-
-	const showNoFilteredClustersMessage =
-		!isFetching &&
-		!isLoading &&
-		formattedClustersData.length === 0 &&
-		queryFilters.items.length > 0;
-
 	const handleGroupByChange = useCallback(
 		(value: IBuilderQuery['groupBy']) => {
 			const groupBy = [];
@@ -454,54 +442,53 @@ function K8sClustersList({
 			/>
 			{isError && <Typography>{data?.error || 'Something went wrong'}</Typography>}
 
-			{showNoFilteredClustersMessage && (
-				<div className="no-filtered-hosts-message-container">
-					<div className="no-filtered-hosts-message-content">
-						<img
-							src="/Icons/emptyState.svg"
-							alt="thinking-emoji"
-							className="empty-state-svg"
-						/>
-
-						<Typography.Text className="no-filtered-hosts-message">
-							This query had no results. Edit your query and try again!
-						</Typography.Text>
-					</div>
-				</div>
-			)}
+			<Table
+				className="k8s-list-table clusters-list-table"
+				dataSource={isFetching || isLoading ? [] : formattedClustersData}
+				columns={columns}
+				pagination={{
+					current: currentPage,
+					pageSize,
+					total: totalCount,
+					showSizeChanger: false,
+					hideOnSinglePage: true,
+				}}
+				scroll={{ x: true }}
+				loading={{
+					spinning: isFetching || isLoading,
+					indicator: <Spin indicator={<LoadingOutlined size={14} spin />} />,
+				}}
+				locale={{
+					emptyText:
+						isFetching || isLoading ? null : (
+							<div className="no-filtered-hosts-message-container">
+								<div className="no-filtered-hosts-message-content">
+									<img
+										src="/Icons/emptyState.svg"
+										alt="thinking-emoji"
+										className="empty-state-svg"
+									/>
+
+									<Typography.Text className="no-filtered-hosts-message">
+										This query had no results. Edit your query and try again!
+									</Typography.Text>
+								</div>
+							</div>
+						),
+				}}
+				tableLayout="fixed"
+				onChange={handleTableChange}
+				onRow={(record): { onClick: () => void; className: string } => ({
+					onClick: (): void => handleRowClick(record),
+					className: 'clickable-row',
+				})}
+				expandable={{
+					expandedRowRender: isGroupedByAttribute ? expandedRowRender : undefined,
+					expandIcon: expandRowIconRenderer,
+					expandedRowKeys,
+				}}
+			/>
 
-			{(isFetching || isLoading) && <LoadingContainer />}
-
-			{showsClustersTable && (
-				<Table
-					className="k8s-list-table clusters-list-table"
-					dataSource={isFetching || isLoading ? [] : formattedClustersData}
-					columns={columns}
-					pagination={{
-						current: currentPage,
-						pageSize,
-						total: totalCount,
-						showSizeChanger: false,
-						hideOnSinglePage: true,
-					}}
-					scroll={{ x: true }}
-					loading={{
-						spinning: isFetching || isLoading,
-						indicator: <Spin indicator={<LoadingOutlined size={14} spin />} />,
-					}}
-					tableLayout="fixed"
-					onChange={handleTableChange}
-					onRow={(record): { onClick: () => void; className: string } => ({
-						onClick: (): void => handleRowClick(record),
-						className: 'clickable-row',
-					})}
-					expandable={{
-						expandedRowRender: isGroupedByAttribute ? expandedRowRender : undefined,
-						expandIcon: expandRowIconRenderer,
-						expandedRowKeys,
-					}}
-				/>
-			)}
 			<ClusterDetails
 				cluster={selectedClusterData}
 				isModalTimeSelection

frontend/src/container/InfraMonitoringK8s/Clusters/utils.tsx

@@ -84,7 +84,7 @@ const columnsConfig = [
 		key: 'clusterName',
 		ellipsis: true,
 		width: 150,
-		sorter: true,
+		sorter: false,
 		align: 'left',
 	},
 	{

frontend/src/container/InfraMonitoringK8s/commonUtils.tsx

@@ -1,9 +1,12 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+/* eslint-disable @typescript-eslint/no-explicit-any */
 /* eslint-disable react/require-default-props */
 /* eslint-disable @typescript-eslint/explicit-function-return-type */
+/* eslint-disable prefer-destructuring */
 
 import { Color } from '@signozhq/design-tokens';
 import { Tooltip, Typography } from 'antd';
-import { ColumnsType } from 'antd/es/table';
+import Table, { ColumnsType } from 'antd/es/table';
 import { Progress } from 'antd/lib';
 import { ResizeTable } from 'components/ResizeTable';
 import FieldRenderer from 'container/LogDetailedView/FieldRenderer';
@@ -163,3 +166,61 @@ export function EventContents({
 		/>
 	);
 }
+
+export const getMetricsTableData = (data: any): any[] => {
+	console.log('Here', data);
+	if (data?.params && data?.payload?.data?.result?.length) {
+		const rowsData = (data?.payload.data.result[0] as any).table.rows;
+		const columnsData = (data?.payload.data.result[0] as any).table.columns;
+		const builderQueries = data.params?.compositeQuery?.builderQueries;
+		const columns = columnsData.map((columnData: any) => {
+			console.log({ columnData });
+			if (columnData.isValueColumn) {
+				return {
+					key: columnData.name,
+					label: builderQueries[columnData.name].legend,
+					isValueColumn: true,
+				};
+			}
+			return {
+				key: columnData.name,
+				label: columnData.name,
+				isValueColumn: false,
+			};
+		});
+
+		const rows = rowsData.map((rowData: any) => rowData.data);
+		return [{ rows, columns }];
+	}
+	return [{ rows: [], columns: [] }];
+};
+
+export function MetricsTable({
+	rows,
+	columns,
+}: {
+	rows: any[];
+	columns: any[];
+}): JSX.Element {
+	const columnsData = columns.map((col: any) => ({
+		title: <Tooltip title={col.label}>{col.label}</Tooltip>,
+		dataIndex: col.key,
+		key: col.key,
+		sorter: false,
+		ellipsis: true,
+		render: (value: string) => <Tooltip title={value}>{value}</Tooltip>,
+	}));
+
+	return (
+		<div className="metrics-table">
+			<Table
+				dataSource={rows}
+				columns={columnsData}
+				tableLayout="fixed"
+				pagination={{ pageSize: 10, showSizeChanger: false }}
+				scroll={{ y: 200 }}
+				sticky
+			/>
+		</div>
+	);
+}