chore: address comments

frontend/src/components/HostMetricsDetail/constants.ts

@@ -4,6 +4,7 @@ export enum VIEWS {
 	TRACES = 'traces',
 	CONTAINERS = 'containers',
 	PROCESSES = 'processes',
+	EVENTS = 'events',
 }
 
 export const VIEW_TYPES = {
@@ -12,4 +13,5 @@ export const VIEW_TYPES = {
 	TRACES: VIEWS.TRACES,
 	CONTAINERS: VIEWS.CONTAINERS,
 	PROCESSES: VIEWS.PROCESSES,
+	EVENTS: VIEWS.EVENTS,
 };

frontend/src/container/InfraMonitoringHosts/InfraMonitoring.styles.scss

@@ -93,7 +93,7 @@
 			}
 
 			.hostname-column-value {
-				color: var(--Vanilla-100, #fff);
+				color: var(--bg-vanilla-100);
 				font-family: 'Geist Mono';
 				font-style: normal;
 				font-weight: 600;

frontend/src/container/InfraMonitoringK8s/InfraMonitoringK8s.styles.scss

@@ -272,17 +272,17 @@
 				.group-by-label {
 					min-width: max-content;
 
-					color: var(--Vanilla-400, #c0c1c3);
+					color: var(--bg-vanilla-100, #c0c1c3);
 					font-size: 13px;
 					font-style: normal;
 					font-weight: 400;
 					line-height: 18px; /* 128.571% */
 					letter-spacing: -0.07px;
 
 					border-radius: 2px 0px 0px 2px;
-					border: 1px solid var(--Slate-400, #1d212d);
+					border: 1px solid var(--bg-slate-400, #1d212d);
 					border-right: none;
-					background: var(--Ink-300, #16181d);
+					background: var(--bg-ink-100, #16181d);
 					border-top-right-radius: 0px;
 					border-bottom-right-radius: 0px;
 
@@ -387,7 +387,7 @@
 			}
 
 			.hostname-column-value {
-				color: var(--Vanilla-100, #fff);
+				color: var(--bg-vanilla-100);
 				font-family: 'Geist Mono';
 				font-style: normal;
 				font-weight: 600;

frontend/src/container/InfraMonitoringK8s/InfraMonitoringK8s.tsx

@@ -19,7 +19,6 @@ import {
 } from './constants';
 import K8sNodesList from './Nodes/K8sNodesList';
 import K8sPodLists from './Pods/K8sPodLists';
-import Volumes from './Volumes/Volumes';
 
 export default function InfraMonitoringK8s(): JSX.Element {
 	const [showFilters, setShowFilters] = useState(true);
@@ -312,8 +311,6 @@ export default function InfraMonitoringK8s(): JSX.Element {
 								handleFilterVisibilityChange={handleFilterVisibilityChange}
 							/>
 						)}
-
-						{selectedCategory === K8sCategories.VOLUMES && <Volumes />}
 					</div>
 				</div>
 			</div>

frontend/src/container/InfraMonitoringK8s/Nodes/K8sNodesList.tsx

@@ -93,9 +93,11 @@ function K8sNodesList({
 			baseFilters.items.push({
 				key: {
 					key: key.key,
+					type: null,
 				},
 				op: '=',
 				value: groupedByMeta[key.key],
+				id: key.key,
 			});
 		}
 

frontend/src/container/InfraMonitoringK8s/Nodes/NodeDetails/Events/NodeEvents.styles.scss

@@ -105,7 +105,7 @@
 		}
 
 		.nodename-column-value {
-			color: var(--Vanilla-100, #fff);
+			color: var(--bg-vanilla-100);
 			font-family: 'Geist Mono';
 			font-style: normal;
 			font-weight: 600;

frontend/src/container/InfraMonitoringK8s/Nodes/NodeDetails/NodeDetails.tsx

@@ -5,6 +5,7 @@ import { Color, Spacing } from '@signozhq/design-tokens';
 import { Button, Divider, Drawer, Radio, Tooltip, Typography } from 'antd';
 import { RadioChangeEvent } from 'antd/lib';
 import logEvent from 'api/common/logEvent';
+import { VIEW_TYPES, VIEWS } from 'components/HostMetricsDetail/constants';
 import { QueryParams } from 'constants/query';
 import {
 	initialQueryBuilderFormValuesMap,
@@ -41,7 +42,7 @@ import {
 import { GlobalReducer } from 'types/reducer/globalTime';
 import { v4 as uuidv4 } from 'uuid';
 
-import { QUERY_KEYS, VIEW_TYPES, VIEWS } from './constants';
+import { QUERY_KEYS } from './constants';
 import NodeEvents from './Events';
 import NodeLogs from './Logs';
 import NodeMetrics from './Metrics';

frontend/src/container/InfraMonitoringK8s/Nodes/NodeDetails/Traces/NodeTraces.tsx

@@ -1,5 +1,6 @@
 import './NodeTraces.styles.scss';
 
+import { getListColumns } from 'components/HostMetricsDetail/HostMetricTraces/utils';
 import { ResizeTable } from 'components/ResizeTable';
 import { DEFAULT_ENTITY_VERSION } from 'constants/app';
 import { QueryParams } from 'constants/query';
@@ -25,7 +26,6 @@ import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData';
 import { DataSource } from 'types/common/queryBuilder';
 
 import { getNodeTracesQueryPayload, selectedColumns } from './constants';
-import { getListColumns } from './utils';
 
 interface Props {
 	timeRange: {

frontend/src/container/InfraMonitoringK8s/Nodes/NodeDetails/constants.ts

@@ -1,17 +1,3 @@
-export enum VIEWS {
-	METRICS = 'metrics',
-	LOGS = 'logs',
-	TRACES = 'traces',
-	EVENTS = 'events',
-}
-
-export const VIEW_TYPES = {
-	METRICS: VIEWS.METRICS,
-	LOGS: VIEWS.LOGS,
-	TRACES: VIEWS.TRACES,
-	EVENTS: VIEWS.EVENTS,
-};
-
 export const QUERY_KEYS = {
 	K8S_OBJECT_KIND: 'k8s.object.kind',
 	K8S_OBJECT_NAME: 'k8s.object.name',

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

@@ -1,3 +1,4 @@
+import { Color } from '@signozhq/design-tokens';
 import { Tag, Tooltip } from 'antd';
 import { ColumnType } from 'antd/es/table';
 import {
@@ -163,7 +164,7 @@ const getGroupByEle = (
 	return (
 		<div className="pod-group">
 			{groupByValues.map((value) => (
-				<Tag key={value} color="#1D212D" className="pod-group-tag-item">
+				<Tag key={value} color={Color.BG_SLATE_400} className="pod-group-tag-item">
 					{value === '' ? '<no-value>' : value}
 				</Tag>
 			))}