feat: implement nodes list table in infra monitoring (#6615)

* feat: implement nodes list table in infra-monitoring * chore: update header props * chore: update columns * chore: add cluster name column * chore: update props * feat: implement group-by and quick select in node list table * feat: implement nested view * chore: styling changes * chore: fix expand issues * chore: fix bugs in node listing * feat: implement node details page (#6641) feat: implement node details page * chore: fix issues in pods * chore: fix issues in nodes * chore: fix table alignment issues * chore: fix filters issue * feat: update query for nodes section * chore: fix column alignment issues and show event expand data * chore: remove comments * chore: update node events logic --------- Co-authored-by: Yunus M <[email protected]>
SigNoz · Jan 3, 2025 · 79cae2d · 79cae2d
1 parent aad4cb1
commit 79cae2d
Show file tree

Hide file tree

Showing 46 changed files with 6,064 additions and 372 deletions.
diff --git a/frontend/src/api/infra/getHostAttributeKeys.ts b/frontend/src/api/infra/getHostAttributeKeys.ts
@@ -19,6 +19,11 @@ export const getHostAttributeKeys = async (
 			data: IQueryAutocompleteResponse;
 		}> = await ApiBaseInstance.get(
 			`/${entity}/attribute_keys?dataSource=metrics&searchText=${searchText}`,
+			{
+				params: {
+					limit: 500,
+				},
+			},
 		);
 
 		const payload: BaseAutocompleteData[] =

diff --git a/frontend/src/api/infraMonitoring/getK8sNodesList.ts b/frontend/src/api/infraMonitoring/getK8sNodesList.ts
@@ -0,0 +1,65 @@
+import { ApiBaseInstance } from 'api';
+import { ErrorResponseHandler } from 'api/ErrorResponseHandler';
+import { AxiosError } from 'axios';
+import { ErrorResponse, SuccessResponse } from 'types/api';
+import { BaseAutocompleteData } from 'types/api/queryBuilder/queryAutocompleteResponse';
+import { TagFilter } from 'types/api/queryBuilder/queryBuilderData';
+
+export interface K8sNodesListPayload {
+	filters: TagFilter;
+	groupBy?: BaseAutocompleteData[];
+	offset?: number;
+	limit?: number;
+	orderBy?: {
+		columnName: string;
+		order: 'asc' | 'desc';
+	};
+}
+
+export interface K8sNodesData {
+	nodeUID: string;
+	nodeCPUUsage: number;
+	nodeCPUAllocatable: number;
+	nodeMemoryUsage: number;
+	nodeMemoryAllocatable: number;
+	meta: {
+		k8s_node_name: string;
+		k8s_node_uid: string;
+		k8s_cluster_name: string;
+	};
+}
+
+export interface K8sNodesListResponse {
+	status: string;
+	data: {
+		type: string;
+		records: K8sNodesData[];
+		groups: null;
+		total: number;
+		sentAnyHostMetricsData: boolean;
+		isSendingK8SAgentMetrics: boolean;
+	};
+}
+
+export const getK8sNodesList = async (
+	props: K8sNodesListPayload,
+	signal?: AbortSignal,
+	headers?: Record<string, string>,
+): Promise<SuccessResponse<K8sNodesListResponse> | ErrorResponse> => {
+	try {
+		const response = await ApiBaseInstance.post('/nodes/list', props, {
+			signal,
+			headers,
+		});
+
+		return {
+			statusCode: 200,
+			error: null,
+			message: 'Success',
+			payload: response.data,
+			params: props,
+		};
+	} catch (error) {
+		return ErrorResponseHandler(error as AxiosError);
+	}
+};
diff --git a/frontend/src/container/InfraMonitoringK8s/InfraMonitoringK8s.styles.scss b/frontend/src/container/InfraMonitoringK8s/InfraMonitoringK8s.styles.scss
@@ -325,13 +325,19 @@
 	.progress-container {
 		display: flex;
 		align-items: center;
-		flex-direction: column;
+		justify-content: center;
+	}
+
+	.entity-progress-bar {
+		display: flex;
+		align-items: center;
 	}
 
 	.progress-bar {
 		flex: 1;
 		margin-right: 8px;
 		margin-bottom: 0px;
+		min-width: 100px;
 	}
 
 	.clickable-row {
@@ -482,7 +488,7 @@
 		.expanded-table-container {
 			border: 1px solid var(--bg-ink-400);
 			overflow-x: auto;
-			padding: 8px;
+			padding-left: 16px;
 
 			&::-webkit-scrollbar {
 				width: 0.1rem;
@@ -702,3 +708,127 @@
 		}
 	}
 }
+
+.ant-table-cell {
+	min-width: 170px !important;
+	max-width: 170px !important;
+}
+
+.ant-table-row-expand-icon-cell {
+	min-width: 30px !important;
+	max-width: 30px !important;
+}
+
+.event-content-container {
+	.ant-table {
+		background: var(--bg-ink-400);
+
+		.ant-table-row:hover {
+			.ant-table-cell {
+				.value-field {
+					.action-btn {
+						display: flex;
+						position: absolute;
+						top: 50%;
+						right: 16px;
+						transform: translateY(-50%);
+						gap: 4px;
+					}
+				}
+			}
+		}
+
+		.ant-table-cell {
+			border: 1px solid var(--bg-slate-500);
+		}
+
+		.attribute-name {
+			.ant-btn {
+				&:hover {
+					background-color: none !important;
+				}
+			}
+		}
+
+		.attribute-pin {
+			cursor: pointer;
+
+			padding: 0;
+			vertical-align: middle;
+			text-align: center;
+
+			.log-attribute-pin {
+				padding: 8px;
+
+				display: flex;
+				justify-content: center;
+				align-items: center;
+
+				.pin-attribute-icon {
+					border: none;
+
+					&.pinned svg {
+						fill: var(--bg-robin-500);
+					}
+				}
+			}
+		}
+
+		.value-field-container {
+			background: rgba(22, 25, 34, 0.4);
+
+			.value-field {
+				font-family: 'Geist Mono';
+
+				position: relative;
+			}
+
+			.action-btn {
+				display: none;
+				width: max-content;
+				position: absolute;
+				// padding: 0 16px;
+				right: 0;
+
+				.filter-btn {
+					display: flex;
+					align-items: center;
+					border: none;
+					box-shadow: none;
+					border-radius: 2px;
+					background: var(--bg-slate-400);
+					padding: 2px 3px;
+					gap: 3px;
+					height: 18px;
+					width: 20px;
+				}
+			}
+		}
+	}
+}
+
+.lightMode {
+	.event-content-container {
+		.ant-table {
+			background: var(--bg-vanilla-100);
+		}
+
+		.ant-table-cell {
+			border: 1px solid var(--bg-vanilla-200);
+		}
+
+		.value-field-container {
+			background: var(--bg-vanilla-300);
+
+			&.attribute-pin {
+				background: var(--bg-vanilla-100);
+			}
+
+			.action-btn {
+				.filter-btn {
+					background: var(--bg-vanilla-300);
+				}
+			}
+		}
+	}
+}