feat: ui fixes

SigNoz · Dec 18, 2024 · 14eb19a · 14eb19a
1 parent c044f31
commit 14eb19a
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 25 deletions.
diff --git a/frontend/src/container/InfraMonitoringK8s/InfraMonitoringK8s.styles.scss b/frontend/src/container/InfraMonitoringK8s/InfraMonitoringK8s.styles.scss
@@ -106,19 +106,14 @@
 	}
 
 	.periscope-btn {
-		&.ghost {
+		&.ghost:not(:disabled) {
 			border: none;
 			background: transparent;
 
 			&:hover {
 				background: transparent;
-				color: var(--bg-robin-500);
+				color: var(--bg-robin-500) !important;
 				font-weight: 500;
-
-				svg {
-					height: 16px;
-					width: 16px;
-				}
 			}
 		}
 	}
@@ -271,13 +266,9 @@
 		.periscope-btn {
 			padding: 4px 8px;
 
-			&.ghost {
+			&.ghost:not(:disabled) {
 				border: none;
 				background: transparent;
-
-				&:hover {
-					color: var(--bg-vanilla-100);
-				}
 			}
 		}
 	}

diff --git a/frontend/src/container/InfraMonitoringK8s/K8sHeader.tsx b/frontend/src/container/InfraMonitoringK8s/K8sHeader.tsx
@@ -6,12 +6,29 @@ import DateTimeSelectionV2 from 'container/TopNav/DateTimeSelectionV2';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { Filter, SlidersHorizontal } from 'lucide-react';
 import { useCallback, useMemo, useState } from 'react';
+import { BaseAutocompleteData } from 'types/api/queryBuilder/queryAutocompleteResponse';
 import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData';
 
 import K8sFiltersSidePanel from './K8sFiltersSidePanel/K8sFiltersSidePanel';
 import { IPodColumn } from './utils';
 
+interface K8sHeaderProps {
+	selectedGroupBy: BaseAutocompleteData[];
+	defaultAddedColumns: IPodColumn[];
+	groupByOptions: { value: string; label: string }[];
+	addedColumns: IPodColumn[];
+	isLoadingGroupByFilters: boolean;
+	availableColumns: IPodColumn[];
+	handleFiltersChange: (value: IBuilderQuery['filters']) => void;
+	handleGroupByChange: (value: IBuilderQuery['groupBy']) => void;
+	onAddColumn: (column: IPodColumn) => void;
+	onRemoveColumn: (column: IPodColumn) => void;
+	handleFilterVisibilityChange: () => void;
+	isFiltersVisible: boolean;
+}
+
 function K8sHeader({
+	selectedGroupBy,
 	defaultAddedColumns,
 	groupByOptions,
 	isLoadingGroupByFilters,
@@ -23,22 +40,13 @@ function K8sHeader({
 	onRemoveColumn,
 	handleFilterVisibilityChange,
 	isFiltersVisible,
-}: {
-	defaultAddedColumns: IPodColumn[];
-	groupByOptions: { value: string; label: string }[];
-	addedColumns: IPodColumn[];
-	isLoadingGroupByFilters: boolean;
-	availableColumns: IPodColumn[];
-	handleFiltersChange: (value: IBuilderQuery['filters']) => void;
-	handleGroupByChange: (value: IBuilderQuery['groupBy']) => void;
-	onAddColumn: (column: IPodColumn) => void;
-	onRemoveColumn: (column: IPodColumn) => void;
-	handleFilterVisibilityChange: () => void;
-	isFiltersVisible: boolean;
-}): JSX.Element {
+}: K8sHeaderProps): JSX.Element {
 	const [isFiltersSidePanelOpen, setIsFiltersSidePanelOpen] = useState(false);
 
 	const { currentQuery } = useQueryBuilder();
+
+	console.log('selectedGroupBy', selectedGroupBy);
+
 	const updatedCurrentQuery = useMemo(
 		() => ({
 			...currentQuery,
@@ -117,6 +125,7 @@ function K8sHeader({
 				<Button
 					type="text"
 					className="periscope-btn ghost"
+					disabled={selectedGroupBy.length > 0}
 					onClick={(): void => setIsFiltersSidePanelOpen(true)}
 				>
 					<SlidersHorizontal size={14} />

diff --git a/frontend/src/container/InfraMonitoringK8s/Pods/K8sPodLists.tsx b/frontend/src/container/InfraMonitoringK8s/Pods/K8sPodLists.tsx