Merge branch 'main' of github.com:SigNoz/signoz into feat/fixes-sprint5

Co-authored-by: Aditya Singh <adityasingh@Adityas-MacBook-Pro.local>

frontend/package.json

@@ -28,7 +28,7 @@
 	"dependencies": {
 		"@ant-design/colors": "6.0.0",
 		"@ant-design/icons": "4.8.0",
-		"@dnd-kit/core": "6.1.0",
+		"@dnd-kit/core": "6.3.1",
 		"@dnd-kit/modifiers": "7.0.0",
 		"@dnd-kit/sortable": "8.0.0",
 		"@dnd-kit/utilities": "3.2.2",

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

@@ -75,7 +75,6 @@
 				border: 0;
 				box-shadow: none;
 			}
-
 			.right-action-icon-container {
 				position: relative;
 				display: flex;
@@ -87,19 +86,12 @@
 					width: 14px;
 					cursor: pointer;
 				}
-
-				&.active,
-				&:hover {
+				
+				&.active, &:hover {
 					background: var(--bg-slate-500);
 				}
 			}
-		}
-	}
-
-	.quick-filters-skeleton {
-		.ant-skeleton-input {
-			width: 236px;
-			margin: 8px 12px;
+			
 		}
 	}
 }
@@ -125,8 +117,7 @@
 			.right-actions {
 				.right-action-icon-container {
 					background-color: var(--bg-vanilla-100);
-					&.active,
-					&:hover {
+					&.active, &:hover {
 						background-color: var(--bg-vanilla-200);
 					}
 				}

frontend/src/components/QuickFilters/QuickFilters.tsx

@@ -172,6 +172,7 @@ export default function QuickFilters(props: IQuickFiltersProps): JSX.Element {
 							<Skeleton.Input
 								active
 								size="small"
+								style={{ width: '236px', margin: '8px 12px' }}
 								// eslint-disable-next-line react/no-array-index-key
 								key={index}
 							/>

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

@@ -1,56 +1,56 @@
 .announcement-tooltip {
-	&__dot {
-		position: absolute;
-		width: 8px;
-		height: 8px;
-		border-radius: 50%;
-		background-color: var(--bg-robin-500);
-		z-index: 1000;
-	}
+    &__dot {
+        position: absolute;
+        width: 8px;
+        height: 8px;
+        border-radius: 50%;
+        background-color: var(--bg-robin-500);
+        z-index: 1000;
+    }
 
-	&__title {
-		font-weight: 500;
-		font-size: 15px;
-	}
+    &__title {
+        font-weight: 500;
+        font-size: 15px;
+    }
 
-	&__container {
-		position: absolute;
-		width: 320px;
-		background-color: var(--bg-robin-500);
-		color: var(--text-white);
-		border-radius: 8px;
-		padding: 16px;
-		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
-		z-index: 1000;
-	}
+    &__container {
+        position: absolute;
+        width: 320px;
+        background-color: var(--bg-robin-500);
+        color: var(--text-white);
+        border-radius: 8px;
+        padding: 16px;
+        box-shadow: 0 4px 12px rgba(0,0,0,0.15);
+        z-index: 1000;
+    }
 
-	&__header {
-		display: flex;
-		justify-content: space-between;
-		align-items: center;
-	}
+    &__header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+    }
 
-	&__close-icon {
-		cursor: pointer;
-		color: var(--text-white);
-	}
+    &__close-icon {
+        cursor: pointer;
+        color: var(--text-white);
+    }
 
-	&__message {
-		margin: 12px 0;
-		line-height: 20px;
-	}
+    &__message {
+        margin: 12px 0;
+        line-height: 20px;
+    }
 
-	&__footer {
-		display: flex;
-		justify-content: flex-end;
-	}
+    &__footer {
+        display: flex;
+        justify-content: flex-end;
+    }
 
-	&__button {
-		background: var(--bg-vanilla-100);
-		color: var(--bg-robin-500);
-		border: none;
-		padding: 6px 12px;
-		border-radius: 4px;
-		cursor: pointer;
-	}
+    &__button {
+        background: var(--bg-vanilla-100);
+        color: var(--bg-robin-500);
+        border: none;
+        padding: 6px 12px;
+        border-radius: 4px;
+        cursor: pointer;
+    }
 }

frontend/src/components/QuickFilters/QuickFiltersSettings/OtherFilters.tsx

@@ -2,7 +2,6 @@ import { Button, Skeleton } from 'antd';
 import OverlayScrollbar from 'components/OverlayScrollbar/OverlayScrollbar';
 import { SIGNAL_DATA_SOURCE_MAP } from 'components/QuickFilters/QuickFiltersSettings/constants';
 import { SignalType } from 'components/QuickFilters/types';
-import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
 import { useGetAttributeSuggestions } from 'hooks/queryBuilder/useGetAttributeSuggestions';
 import { useMemo } from 'react';
 import { TagFilter } from 'types/api/queryBuilder/queryBuilderData';
@@ -15,6 +14,7 @@ function OtherFiltersSkeleton(): JSX.Element {
 				<Skeleton.Input
 					active
 					size="small"
+					style={{ width: '300px', margin: '8px 12px' }}
 					// eslint-disable-next-line react/no-array-index-key
 					key={index}
 				/>
@@ -44,7 +44,7 @@ function OtherFilters({
 			filters: {} as TagFilter,
 		},
 		{
-			queryKey: [REACT_QUERY_KEY.GET_OTHER_FILTERS, inputValue],
+			queryKey: ['other-filters', inputValue],
 			enabled: !!signal,
 		},
 	);

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

@@ -1,190 +1,187 @@
 .quick-filters-settings {
-	display: flex;
+    display: flex;
 	flex-direction: column;
-	position: absolute;
+    position: absolute;
 	z-index: 999;
 	width: 342px;
 	background: var(--bg-slate-500);
 	transition: width 0.05s ease-in-out;
 	overflow: hidden;
 
-	&.qf-logs-explorer {
-		height: calc(100vh - 45px);
-	}
+    &.qf-logs-explorer {
+	    height: calc(100vh - 45px);
+    }
 
-	&.qf-exceptions {
-		height: 100vh;
-	}
+    &.qf-exceptions {
+        height: 100vh;
+    }
 
 	&.hidden {
 		width: 0;
 	}
-	.qf-header {
-		display: flex;
-		align-items: center;
-		justify-content: space-between;
-		padding: 10.5px;
+    .qf-header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 10.5px;
 
-		.qf-title {
-			display: flex;
-			align-items: center;
-			gap: 12px;
-		}
+        .qf-title {
+            display: flex;
+            align-items: center;
+            gap: 12px;
+        }
 
-		.qf-header-icon {
-			width: 16px;
-			height: 16px;
-			cursor: pointer;
-		}
-	}
+        .qf-header-icon {
+            width: 16px;
+            height: 16px;
+            cursor: pointer;
+        }
+    }
 
-	.qf-filters {
-		&.added-filters {
-			max-height: 40%;
-		}
-		&.other-filters {
-			flex: 1;
-			display: flex;
-			flex-direction: column;
-			min-height: 0;
-		}
-	}
+    .qf-filters {
+        &.added-filters {
+            max-height: 40%;
+        }
+        &.other-filters {
+            flex: 1;
+            display: flex;
+            flex-direction: column;
+            min-height: 0; 
+        }
+    }
 
-	.search {
-		.ant-input {
-			background-color: var(--bg-slate-500);
-			height: 46px;
-			border-radius: 0;
-		}
-	}
+    .search {
+        .ant-input {
+            background-color: var(--bg-slate-500);
+            height: 46px;
+            border-radius: 0;
+        }
+    }
 
-	.qf-other-filters-list {
-		.ant-skeleton-input {
-			width: 300px;
-			margin: 8px 12px;
-		}
-	}
-
-	.qf-footer {
-		display: flex;
-		gap: 12px;
-		padding: 12px;
-		border-top: 1px solid var(--bg-slate-400);
-		button {
-			display: flex;
-			align-items: center;
-			justify-content: center;
-			width: 50%;
-
-			.ant-btn-icon {
-				margin: 3px !important;
-			}
-		}
-	}
+    .qf-footer {
+        display: flex;
+        gap: 12px;
+        padding: 12px;
+        border-top: 1px solid var(--bg-slate-400);
+        button {
+            display: flex;
+            align-items: center;   
+            justify-content: center;
+            width: 50%;
+            
+            .ant-btn-icon {
+                margin: 3px !important;
+            }
+        }
+    }
 }
 
 //ADDED FILTERS AND OTHER FILTERS COMMON STYLES
 .qf-filters {
-	display: flex;
-	flex-direction: column;
-	.qf-filters-header {
-		color: var(--bg-slate-50);
-		font-family: Inter;
-		font-size: 11px;
-		font-style: normal;
-		font-weight: 500;
-		line-height: 18px;
-		letter-spacing: 0.88px;
-		text-transform: uppercase;
-		padding: 8px 12px;
-	}
+    display: flex;
+    flex-direction: column;
+    .qf-filters-header {
+        color: var(--bg-slate-50);
+        font-family: Inter;
+        font-size: 11px;
+        font-style: normal;
+        font-weight: 500;
+        line-height: 18px;
+        letter-spacing: 0.88px;
+        text-transform: uppercase;
+        padding: 8px 12px;
+    }
 }
 
 .no-values-found {
-	padding: 8px;
-	text-align: center;
+    padding: 8px;
+    text-align: center;
 }
 
 .qf-added-filters-list {
-	margin-bottom: 12px;
-	overflow: hidden;
+    margin-bottom: 12px;
+    overflow: hidden;
 }
 
 .qf-other-filters-list {
-	margin-bottom: 12px;
-	overflow: hidden;
+    margin-bottom: 12px;
+    overflow: hidden;
 }
 
+
 .qf-filter-item {
-	display: flex;
-	align-items: center;
-	justify-content: space-between;
-	padding: 8px;
-	border-radius: 4px;
-	user-select: none;
-	transition: background-color 0.2s ease-in-out;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 8px;
+    border-radius: 4px;
+    user-select: none;
+    transition: background-color 0.2s ease-in-out;
 
-	.drag-handle {
-		display: flex;
-		align-items: center;
-		gap: 8px;
-		flex-grow: 1;
-	}
+    .drag-handle {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        flex-grow: 1;
+    }
 
-	.qf-filter-content {
-		display: flex;
-		align-items: center;
-		gap: 8px;
-	}
+    .qf-filter-content{
+        display: flex;
+        align-items: center;
+        gap: 8px;
+    }
 
-	&.other-filters-item {
-		padding: 8px 12px;
-		height: 32px;
-	}
+    &.other-filters-item {
+        padding: 8px 12px;
+        height: 32px;
+    }
 
-	&.drag-enabled {
-		cursor: grab;
-		&:active {
-			cursor: grabbing;
-		}
-	}
+    &.drag-enabled {
+        cursor: grab;
+        &:active {
+            cursor: grabbing;
+        }
+    }
 
-	&.drag-disabled {
-		padding: 8px 12px;
-	}
+    &.drag-disabled {
+        padding: 8px 12px;
+    }
 
-	.remove-filter-btn,
-	.add-filter-btn {
-		padding: 6px 12px;
-		opacity: 0;
-		transition: opacity 0.2s ease-in-out;
-	}
+    .remove-filter-btn, .add-filter-btn {
+        padding: 6px 12px;
+        opacity: 0;
+        transition: opacity 0.2s ease-in-out;
+    }
 
-	&:hover {
-		background-color: var(--bg-slate-400);
-		.remove-filter-btn,
-		.add-filter-btn {
-			opacity: 1;
-		}
-	}
+    &:hover {
+        background-color: var(--bg-slate-400);
+        .remove-filter-btn, .add-filter-btn {
+            opacity: 1;
+        }
+    }
 }
 
+
+
 .lightMode {
-	.quick-filters-settings {
-		background: var(--bg-vanilla-100);
-		.search {
-			.ant-input {
-				background-color: var(--bg-vanilla-100);
-			}
-		}
-		.qf-footer {
-			border-top: 1px solid var(--bg-vanilla-300);
-		}
-	}
+    .quick-filters-settings {
+        background: var(--bg-vanilla-100);
+        .search {
+            .ant-input {
+                background-color: var(--bg-vanilla-100);
+            }
+        }
+        .qf-footer {
+           border-top: 1px solid var(--bg-vanilla-300);
+        }
+    }
 
-	.qf-filter-item {
-		&:hover {
-			background-color: var(--bg-vanilla-200);
-		}
-	}
+    .qf-filter-item {
+       &:hover {
+        background-color: var(--bg-vanilla-200);
+    }
+    }
+    
 }
+
+

frontend/src/components/QuickFilters/QuickFiltersSettings/QuickFiltersSettings.tsx

@@ -29,8 +29,7 @@ function QuickFiltersSettings({
 		handleSaveChanges,
 		isUpdatingCustomFilters,
 		inputValue,
-		handleInputChange,
-		debouncedInputValue,
+		setInputValue,
 	} = useQuickFilterSettings({
 		setIsSettingsOpen,
 		customFilters,
@@ -69,7 +68,7 @@ function QuickFiltersSettings({
 					type="text"
 					value={inputValue}
 					placeholder="Search for a filter..."
-					onChange={handleInputChange}
+					onChange={(event): void => setInputValue(event.target.value)}
 				/>
 			</section>
 			<AddedFilters
@@ -79,7 +78,7 @@ function QuickFiltersSettings({
 			/>
 			<OtherFilters
 				signal={signal}
-				inputValue={debouncedInputValue}
+				inputValue={inputValue}
 				addedFilters={addedFilters}
 				setAddedFilters={setAddedFilters}
 			/>

frontend/src/components/QuickFilters/QuickFiltersSettings/hooks/useQuickFilterSettings.tsx

@@ -2,7 +2,6 @@ import updateCustomFiltersAPI from 'api/quickFilters/updateCustomFilters';
 import axios, { AxiosError } from 'axios';
 import { SignalType } from 'components/QuickFilters/types';
 import { SOMETHING_WENT_WRONG } from 'constants/api';
-import useDebouncedFn from 'hooks/useDebouncedFunction';
 import { useNotifications } from 'hooks/useNotifications';
 import { useCallback, useState } from 'react';
 import { useMutation } from 'react-query';
@@ -24,8 +23,6 @@ interface UseQuickFilterSettingsReturn {
 	isUpdatingCustomFilters: boolean;
 	inputValue: string;
 	setInputValue: React.Dispatch<React.SetStateAction<string>>;
-	debouncedInputValue: string;
-	handleInputChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
 }
 
 const useQuickFilterSettings = ({
@@ -35,7 +32,6 @@ const useQuickFilterSettings = ({
 	signal,
 }: UseQuickFilterSettingsProps): UseQuickFilterSettingsReturn => {
 	const [inputValue, setInputValue] = useState<string>('');
-	const [debouncedInputValue, setDebouncedInputValue] = useState<string>('');
 	const [addedFilters, setAddedFilters] = useState<FilterType[]>(customFilters);
 	const { notifications } = useNotifications();
 
@@ -58,18 +54,6 @@ const useQuickFilterSettings = ({
 			});
 		},
 	});
-	const debouncedUpdate = useDebouncedFn((value) => {
-		setDebouncedInputValue(value as string);
-	}, 400);
-
-	const handleInputChange = useCallback(
-		(e: React.ChangeEvent<HTMLInputElement>): void => {
-			const value = e.target.value.trim().toLowerCase();
-			setInputValue(value);
-			debouncedUpdate(value);
-		},
-		[debouncedUpdate],
-	);
 
 	const handleSettingsClose = useCallback((): void => {
 		setIsSettingsOpen(false);
@@ -103,8 +87,6 @@ const useQuickFilterSettings = ({
 		isUpdatingCustomFilters,
 		inputValue,
 		setInputValue,
-		debouncedInputValue,
-		handleInputChange,
 	};
 };
 

frontend/src/components/QuickFilters/hooks/useFilterConfig.tsx

@@ -1,5 +1,4 @@
 import getCustomFilters from 'api/quickFilters/getCustomFilters';
-import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
 import { useMemo, useState } from 'react';
 import { useQuery } from 'react-query';
 import { ErrorResponse, SuccessResponse } from 'types/api';
@@ -36,19 +35,15 @@ const useFilterConfig = ({
 	const { isLoading: isCustomFiltersLoading } = useQuery<
 		SuccessResponse<PayloadProps> | ErrorResponse,
 		Error
-	>(
-		[REACT_QUERY_KEY.GET_CUSTOM_FILTERS, signal],
-		() => getCustomFilters({ signal: signal || '' }),
-		{
-			onSuccess: (data) => {
-				if ('payload' in data && data.payload?.filters) {
-					setCustomFilters(data.payload.filters || ([] as FilterType[]));
-				}
-				setIsStale(false);
-			},
-			enabled: !!signal && isStale,
+	>(['addedFilters', signal], () => getCustomFilters({ signal: signal || '' }), {
+		onSuccess: (data) => {
+			if ('payload' in data && data.payload?.filters) {
+				setCustomFilters(data.payload.filters || ([] as FilterType[]));
+			}
+			setIsStale(false);
 		},
-	);
+		enabled: !!signal && isStale,
+	});
 	const filterConfig = useMemo(() => getFilterConfig(customFilters, config), [
 		config,
 		customFilters,

frontend/src/components/QuickFilters/tests/QuickFilters.test.tsx

@@ -95,6 +95,7 @@ beforeAll(() => {
 
 afterEach(() => {
 	server.resetHandlers();
+	cleanup();
 });
 
 afterAll(() => {

frontend/src/container/PipelinePage/PipelineListsView/AddNewPipeline/index.tsx

@@ -1,4 +1,6 @@
 import { Button, Divider, Form, Modal } from 'antd';
+// import { renderPipelineForm } from './utils';
+import { pipelineFields } from 'container/PipelinePage/PipelineListsView/config';
 import { useAppContext } from 'providers/App/App';
 import React, { useCallback, useEffect, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -7,7 +9,6 @@ import { v4 } from 'uuid';
 
 import { ModalButtonWrapper, ModalTitle } from '../styles';
 import { getEditedDataSource, getRecordIndex } from '../utils';
-import { renderPipelineForm } from './utils';
 
 function AddNewPipeline({
 	isActionType,
@@ -20,18 +21,21 @@ function AddNewPipeline({
 	const [form] = Form.useForm();
 	const { t } = useTranslation('pipeline');
 	const { user } = useAppContext();
+	const [formValues, setFormValues] = React.useState<PipelineData | null>(null);
 
 	const isEdit = isActionType === 'edit-pipeline';
 	const isAdd = isActionType === 'add-pipeline';
 
 	useEffect(() => {
-		if (isEdit) {
+		if (isEdit && selectedPipelineData) {
+			console.log('setting fields value', selectedPipelineData);
 			form.setFieldsValue(selectedPipelineData);
-		}
-		if (isAdd) {
+			setFormValues(selectedPipelineData);
+		} else if (isAdd && !formValues) {
+			console.log('resetting fields value');
 			form.resetFields();
 		}
-	}, [form, isEdit, isAdd, selectedPipelineData]);
+	}, [form, isEdit, isAdd, selectedPipelineData, formValues]);
 
 	const onFinish = (values: PipelineData): void => {
 		const newPipeLineData: PipelineData = {
@@ -110,9 +114,17 @@ function AddNewPipeline({
 				layout="vertical"
 				onFinish={onFinish}
 				autoComplete="off"
+				onValuesChange={(changedValues, allValues): void => {
+					console.log('changedValues', changedValues);
+					console.log('allValues', allValues);
+					setFormValues(allValues as PipelineData);
+				}}
 				form={form}
 			>
-				{renderPipelineForm()}
+				{pipelineFields.map((field) => {
+					const Component = field.component;
+					return <Component key={field.id} fieldData={field} />;
+				})}
 				<Divider plain />
 				<Form.Item>
 					<ModalButtonWrapper>

frontend/yarn.lock

@@ -2491,19 +2491,19 @@
   resolved "https://registry.npmjs.org/@discoveryjs/json-ext/-/json-ext-0.5.7.tgz"
   integrity sha512-dBVuXR082gk3jsFp7Rd/JI4kytwGHecnCoTtXFb7DB6CNHp4rg5k1bhg0nWdLGLnOV71lmDzGQaLMy8iPLY0pw==
 
-"@dnd-kit/accessibility@^3.1.0":
+"@dnd-kit/accessibility@^3.1.1":
   version "3.1.1"
   resolved "https://registry.yarnpkg.com/@dnd-kit/accessibility/-/accessibility-3.1.1.tgz#3b4202bd6bb370a0730f6734867785919beac6af"
   integrity sha512-2P+YgaXF+gRsIihwwY1gCsQSYnu9Zyj2py8kY5fFvUM1qm2WA2u639R6YNVfU4GWr+ZM5mqEsfHZZLoRONbemw==
   dependencies:
     tslib "^2.0.0"
 
-"@dnd-kit/core@6.1.0":
-  version "6.1.0"
-  resolved "https://registry.yarnpkg.com/@dnd-kit/core/-/core-6.1.0.tgz#e81a3d10d9eca5d3b01cbf054171273a3fe01def"
-  integrity sha512-J3cQBClB4TVxwGo3KEjssGEXNJqGVWx17aRTZ1ob0FliR5IjYgTxl5YJbKTzA6IzrtelotH19v6y7uoIRUZPSg==
+"@dnd-kit/core@6.3.1":
+  version "6.3.1"
+  resolved "https://registry.yarnpkg.com/@dnd-kit/core/-/core-6.3.1.tgz#4c36406a62c7baac499726f899935f93f0e6d003"
+  integrity sha512-xkGBRQQab4RLwgXxoqETICr6S5JlogafbhNsidmrkVv2YRs5MLwpjoF2qpiGjQt8S9AoxtIV603s0GIUpY5eYQ==
   dependencies:
-    "@dnd-kit/accessibility" "^3.1.0"
+    "@dnd-kit/accessibility" "^3.1.1"
     "@dnd-kit/utilities" "^3.2.2"
     tslib "^2.0.0"