feat: events tab integration

frontend/src/api/infraMonitoring/getK8sPodsList.ts

@@ -46,6 +46,7 @@ export interface K8sPodsData {
 		k8s_pod_name: string;
 		k8s_pod_uid: string;
 		k8s_statefulset_name: string;
+		k8s_cluster_name: string;
 	};
 	countByPhase: {
 		pending: number;

frontend/src/components/QuickFilters/FilterRenderers/Checkbox/Checkbox.styles.scss

@@ -53,7 +53,7 @@
 				display: flex;
 				align-items: center;
 				justify-content: space-between;
-				width: 100%;
+				width: calc(100% - 24px);
 				cursor: pointer;
 
 				&.filter-disabled {

frontend/src/components/QuickFilters/QuickFilters.styles.scss

@@ -15,6 +15,8 @@
 			display: flex;
 			align-items: center;
 			gap: 6px;
+			width: 100%;
+			justify-content: flex-start;
 
 			.text {
 				color: var(--bg-vanilla-400);
@@ -50,6 +52,8 @@
 			display: flex;
 			align-items: center;
 			gap: 12px;
+			width: 100%;
+			justify-content: flex-end;
 
 			.divider-filter {
 				width: 1px;

frontend/src/components/QuickFilters/QuickFilters.tsx

@@ -40,10 +40,11 @@ export interface IQuickFiltersConfig {
 interface IQuickFiltersProps {
 	config: IQuickFiltersConfig[];
 	handleFilterVisibilityChange: () => void;
+	source?: string | null;
 }
 
 export default function QuickFilters(props: IQuickFiltersProps): JSX.Element {
-	const { config, handleFilterVisibilityChange } = props;
+	const { config, handleFilterVisibilityChange, source } = props;
 
 	const {
 		currentQuery,
@@ -83,16 +84,22 @@ export default function QuickFilters(props: IQuickFiltersProps): JSX.Element {
 
 	const lastQueryName =
 		currentQuery.builder.queryData?.[lastUsedQuery || 0]?.queryName;
+
+	const isInfraMonitoring = source === 'infra-monitoring';
+
 	return (
 		<div className="quick-filters">
 			<section className="header">
-				<section className="left-actions">
-					<FilterOutlined />
-					<Typography.Text className="text">Filters for</Typography.Text>
-					<Tooltip title={`Filter currently in sync with query ${lastQueryName}`}>
-						<Typography.Text className="sync-tag">{lastQueryName}</Typography.Text>
-					</Tooltip>
-				</section>
+				{!isInfraMonitoring && (
+					<section className="left-actions">
+						<FilterOutlined />
+						<Typography.Text className="text">Filters for</Typography.Text>
+						<Tooltip title={`Filter currently in sync with query ${lastQueryName}`}>
+							<Typography.Text className="sync-tag">{lastQueryName}</Typography.Text>
+						</Tooltip>
+					</section>
+				)}
+
 				<section className="right-actions">
 					<Tooltip title="Reset All">
 						<SyncOutlined className="sync-icon" onClick={handleReset} />
@@ -122,3 +129,7 @@ export default function QuickFilters(props: IQuickFiltersProps): JSX.Element {
 		</div>
 	);
 }
+
+QuickFilters.defaultProps = {
+	source: null,
+};

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

@@ -9,6 +9,23 @@
 		.quick-filters {
 			overflow-y: auto;
 			overflow-x: hidden;
+
+			&::-webkit-scrollbar {
+				width: 0.1rem;
+				height: 0.1rem;
+			}
+
+			&::-webkit-scrollbar-track {
+				background: transparent;
+			}
+
+			&::-webkit-scrollbar-thumb {
+				background: var(--bg-slate-300);
+			}
+
+			&::-webkit-scrollbar-thumb:hover {
+				background: var(--bg-slate-200);
+			}
 		}
 	}
 
@@ -55,6 +72,7 @@
 			flex: 1;
 
 			display: flex;
+			align-items: center;
 			gap: 8px;
 
 			.k8s-qb-search-container {
@@ -72,17 +90,17 @@
 			display: flex;
 			align-items: center;
 			gap: 4px;
+		}
 
-			.periscope-btn {
-				padding: 4px 8px;
+		.periscope-btn {
+			padding: 4px 8px;
 
-				&.ghost {
-					border: none;
-					background: transparent;
+			&.ghost {
+				border: none;
+				background: transparent;
 
-					&:hover {
-						color: var(--bg-vanilla-100);
-					}
+				&:hover {
+					color: var(--bg-vanilla-100);
 				}
 			}
 		}
@@ -228,6 +246,14 @@
 			}
 		}
 	}
+
+	.k8s-list-container-filters-visible {
+		.k8s-list-table {
+			.ant-pagination {
+				width: calc(100% - 340px);
+			}
+		}
+	}
 }
 
 .infra-monitoring-tags {

frontend/src/container/InfraMonitoringK8s/InfraMonitoringK8s.tsx

@@ -1,26 +1,43 @@
 import './InfraMonitoringK8s.styles.scss';
 
 import * as Sentry from '@sentry/react';
+import QuickFilters from 'components/QuickFilters/QuickFilters';
 import ErrorBoundaryFallback from 'pages/ErrorBoundaryFallback/ErrorBoundaryFallback';
+import { useState } from 'react';
 
 import K8sPodLists from './Pods/K8sPodLists';
+import { K8sQuickFiltersConfig } from './utils';
 
 export default function InfraMonitoringK8s(): JSX.Element {
+	const [showFilters, setShowFilters] = useState(true);
+
+	const handleFilterVisibilityChange = (): void => {
+		setShowFilters(!showFilters);
+	};
+
 	return (
 		<Sentry.ErrorBoundary fallback={<ErrorBoundaryFallback />}>
 			<div className="infra-monitoring-container">
 				<div className="k8s-container">
-					{/* <div className="k8s-quick-filters-container">
-						<QuickFilters
-							config={K8sQuickFiltersConfig}
-							handleFilterVisibilityChange={(): void => {
-								console.log('filter visibility changed');
-							}}
-						/>
-					</div> */}
+					{showFilters && (
+						<div className="k8s-quick-filters-container">
+							<QuickFilters
+								source="infra-monitoring"
+								config={K8sQuickFiltersConfig}
+								handleFilterVisibilityChange={handleFilterVisibilityChange}
+							/>
+						</div>
+					)}
 
-					<div className="k8s-list-container">
-						<K8sPodLists />
+					<div
+						className={`k8s-list-container ${
+							showFilters ? 'k8s-list-container-filters-visible' : ''
+						}`}
+					>
+						<K8sPodLists
+							isFiltersVisible={showFilters}
+							handleFilterVisibilityChange={handleFilterVisibilityChange}
+						/>
 					</div>
 				</div>
 			</div>

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

@@ -18,7 +18,7 @@
 
 	position: absolute;
 	width: 320px;
-	right: 12px;
+	right: 4px;
 	top: 48px;
 	z-index: 2;
 

frontend/src/container/InfraMonitoringK8s/K8sHeader.tsx

@@ -4,7 +4,7 @@ import { Button, Input } from 'antd';
 import QueryBuilderSearch from 'container/QueryBuilder/filters/QueryBuilderSearch';
 import DateTimeSelectionV2 from 'container/TopNav/DateTimeSelectionV2';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
-import { SlidersHorizontal } from 'lucide-react';
+import { Filter, SlidersHorizontal } from 'lucide-react';
 import { useCallback, useMemo, useState } from 'react';
 import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData';
 
@@ -18,13 +18,17 @@ function K8sHeader({
 	handleFiltersChange,
 	onAddColumn,
 	onRemoveColumn,
+	handleFilterVisibilityChange,
+	isFiltersVisible,
 }: {
 	defaultAddedColumns: IPodColumn[];
 	addedColumns: IPodColumn[];
 	availableColumns: IPodColumn[];
 	handleFiltersChange: (value: IBuilderQuery['filters']) => void;
 	onAddColumn: (column: IPodColumn) => void;
 	onRemoveColumn: (column: IPodColumn) => void;
+	handleFilterVisibilityChange: () => void;
+	isFiltersVisible: boolean;
 }): JSX.Element {
 	const [isFiltersSidePanelOpen, setIsFiltersSidePanelOpen] = useState(false);
 
@@ -59,6 +63,19 @@ function K8sHeader({
 	return (
 		<div className="k8s-list-controls">
 			<div className="k8s-list-controls-left">
+				{!isFiltersVisible && (
+					<div className="quick-filters-toggle-container">
+						<Button
+							className="periscope-btn ghost"
+							type="text"
+							size="small"
+							onClick={handleFilterVisibilityChange}
+						>
+							<Filter size={14} />
+						</Button>
+					</div>
+				)}
+
 				<div className="k8s-qb-search-container">
 					<QueryBuilderSearch
 						query={query}