feat: add metrics table

frontend/src/container/InfraMonitoringK8s/Namespaces/K8sNamespacesList.tsx

@@ -277,7 +277,6 @@ function K8sNamespacesList({
 	const handleRowClick = (record: K8sNamespacesRowData): void => {
 		if (groupBy.length === 0) {
 			setSelectedRowData(null);
-			console.log({ record });
 			setselectedNamespaceName(record.namespaceName);
 		} else {
 			handleGroupByRowClick(record);

frontend/src/container/InfraMonitoringK8s/Namespaces/NamespaceDetails/Metrics/NamespaceMetrics.tsx

@@ -5,6 +5,8 @@ import { K8sNamespacesData } from 'api/infraMonitoring/getK8sNamespacesList';
 import cx from 'classnames';
 import Uplot from 'components/Uplot';
 import { ENTITY_VERSION_V4 } from 'constants/app';
+import { PANEL_TYPES } from 'constants/queryBuilder';
+import GridPanelSwitch from 'container/GridPanelSwitch';
 import DateTimeSelectionV2 from 'container/TopNav/DateTimeSelectionV2';
 import {
 	CustomTimeType,
@@ -97,14 +99,32 @@ function NamespaceMetrics({
 				(query.error as Error)?.message || 'Something went wrong';
 			return <div>{errorMessage}</div>;
 		}
+
+		const { panelType } = (query.data?.params as any).compositeQuery;
+		const panelData = query.data?.payload?.data?.newResult.data.result ?? [];
+
+		const queryPayload = queryPayloads[idx];
+
 		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 ? (
+					// <GridTableComponent data={panelData} query={queryPayload.query} />
+					<GridPanelSwitch
+						panelType={PANEL_TYPES.TABLE}
+						data={chartData[idx]}
+						options={options[idx]}
+						name=""
+						panelData={panelData}
+						query={queryPayload.query}
+					/>
+				) : (
+					<Uplot options={options[idx]} data={chartData[idx]} />
+				)}
 			</div>
 		);
 	};