feat: set width for table columns

SigNoz · Jan 3, 2025 · aad4cb1 · aad4cb1
1 parent 9615fbc
commit aad4cb1
Show file tree

Hide file tree

Showing 3 changed files with 66 additions and 24 deletions.
diff --git a/frontend/src/container/InfraMonitoringK8s/InfraMonitoringK8s.styles.scss b/frontend/src/container/InfraMonitoringK8s/InfraMonitoringK8s.styles.scss
@@ -122,6 +122,7 @@
 		display: flex;
 		align-items: center;
 		gap: 16px;
+		font-size: 11px;
 
 		&.pod-group-header {
 			padding-left: 12px;
@@ -142,14 +143,39 @@
 	}
 
 	.k8s-list {
+		.column {
+			min-width: 180px;
+			max-width: 180px;
+
+			font-size: 12px !important;
+		}
+
+		.column-pod-name {
+			min-width: 200px;
+			max-width: 200px;
+		}
+
+		.column-pod-group {
+			min-width: 200px;
+			max-width: 200px;
+		}
+
+		.column-progress-bar {
+			min-width: 180px;
+			max-width: 180px;
+		}
+
+		.column-dummy {
+			min-width: 32px;
+			max-width: 32px;
+		}
+
 		.pod-group {
 			display: flex;
 			align-items: center;
 			gap: 4px;
 			flex-wrap: wrap;
 
-			min-width: 120px;
-			max-width: 120px;
 			overflow: hidden;
 			text-overflow: ellipsis;
 			white-space: nowrap;
@@ -169,13 +195,7 @@
 		}
 
 		.pod-name {
-			display: flex;
-			align-items: center;
-			gap: 4px;
-			flex-wrap: wrap;
-
-			min-width: 120px;
-			max-width: 120px;
+			width: 100%;
 			overflow: hidden;
 			text-overflow: ellipsis;
 			white-space: nowrap;
@@ -305,6 +325,7 @@
 	.progress-container {
 		display: flex;
 		align-items: center;
+		flex-direction: column;
 	}
 
 	.progress-bar {
@@ -495,12 +516,22 @@
 			.expanded-table-footer {
 				display: flex;
 				justify-content: flex-start;
+				gap: 8px;
 				padding: 8px;
-				padding-left: 56px;
+				padding-left: 42px;
 				margin-top: 8px;
 
 				.periscope-btn {
-					font-size: 11px;
+					font-size: 10px;
+
+					display: flex;
+					align-items: center;
+					gap: 4px;
+				}
+
+				.view-all-text {
+					font-size: 10px;
+					color: var(--bg-vanilla-400);
 				}
 			}
 		}

diff --git a/frontend/src/container/InfraMonitoringK8s/Pods/K8sPodLists.tsx b/frontend/src/container/InfraMonitoringK8s/Pods/K8sPodLists.tsx
diff --git a/frontend/src/container/InfraMonitoringK8s/utils.tsx b/frontend/src/container/InfraMonitoringK8s/utils.tsx
@@ -27,6 +27,8 @@ export interface IPodColumn {
 	canRemove: boolean;
 }
 
+const columnProgressBarClassName = 'column-progress-bar';
+
 export const defaultAddedColumns: IPodColumn[] = [
 	{
 		label: 'Pod name',
@@ -129,34 +131,31 @@ const podGroupColumnConfig = {
 	),
 	dataIndex: 'podGroup',
 	key: 'podGroup',
-	ellipsis: {
-		showTitle: false,
-	},
-	width: 120,
-	align: 'left',
+	ellipsis: true,
+	width: 180,
 	sorter: false,
+	className: 'column column-pod-group',
 };
 
 export const dummyColumnConfig = {
 	title: <div className="column-header dummy-column">&nbsp;</div>,
 	dataIndex: 'dummy',
 	key: 'dummy',
-	width: 25,
+	width: 26,
 	sorter: false,
 	align: 'left',
+	className: 'column column-dummy',
 };
 
 const columnsConfig = [
 	{
 		title: <div className="column-header pod-name-header">Pod Name</div>,
 		dataIndex: 'podName',
 		key: 'podName',
-		ellipsis: {
-			showTitle: false,
-		},
-		width: 120,
+		width: 180,
+		ellipsis: true,
 		sorter: true,
-		align: 'left',
+		className: 'column column-pod-name',
 	},
 	{
 		title: (
@@ -168,9 +167,11 @@ const columnsConfig = [
 		),
 		dataIndex: 'cpu_request',
 		key: 'cpu_request',
-		width: 150,
+		width: 180,
+		ellipsis: true,
 		sorter: true,
 		align: 'left',
+		className: `column ${columnProgressBarClassName}`,
 	},
 	{
 		title: (
@@ -185,6 +186,7 @@ const columnsConfig = [
 		width: 150,
 		sorter: true,
 		align: 'left',
+		className: `column ${columnProgressBarClassName}`,
 	},
 	{
 		title: (
@@ -199,6 +201,7 @@ const columnsConfig = [
 		width: 80,
 		sorter: true,
 		align: 'left',
+		className: `column ${columnProgressBarClassName}`,
 	},
 	{
 		title: (
@@ -213,6 +216,7 @@ const columnsConfig = [
 		width: 150,
 		sorter: true,
 		align: 'left',
+		className: `column ${columnProgressBarClassName}`,
 	},
 	{
 		title: (
@@ -227,6 +231,7 @@ const columnsConfig = [
 		width: 150,
 		sorter: true,
 		align: 'left',
+		className: `column ${columnProgressBarClassName}`,
 	},
 	{
 		title: (
@@ -242,6 +247,7 @@ const columnsConfig = [
 		ellipsis: true,
 		sorter: true,
 		align: 'left',
+		className: `column ${columnProgressBarClassName}`,
 	},
 	{
 		title: (
@@ -255,6 +261,7 @@ const columnsConfig = [
 		ellipsis: true,
 		sorter: true,
 		align: 'left',
+		className: `column ${columnProgressBarClassName}`,
 	},
 ];
 
@@ -266,6 +273,7 @@ export const namespaceColumnConfig = {
 	sorter: true,
 	ellipsis: true,
 	align: 'left',
+	className: 'column column-namespace',
 };
 
 export const nodeColumnConfig = {
@@ -276,6 +284,7 @@ export const nodeColumnConfig = {
 	sorter: true,
 	ellipsis: true,
 	align: 'left',
+	className: 'column column-node',
 };
 
 export const clusterColumnConfig = {
@@ -286,6 +295,7 @@ export const clusterColumnConfig = {
 	sorter: true,
 	ellipsis: true,
 	align: 'left',
+	className: 'column column-cluster',
 };
 
 export const columnConfigMap = {