Merge branch 'develop' into release/v0.48.x

SigNoz · Jun 20, 2024 · 6c192f1 · 6c192f1
2 parents 5376410 + adfeaaa
commit 6c192f1
Show file tree

Hide file tree

Showing 29 changed files with 258 additions and 256 deletions.
diff --git a/frontend/src/constants/panelTypes.ts b/frontend/src/constants/panelTypes.ts
@@ -40,4 +40,5 @@ export const getComponentForPanelType = (
 export const AVAILABLE_EXPORT_PANEL_TYPES = [
 	PANEL_TYPES.TIME_SERIES,
 	PANEL_TYPES.TABLE,
+	PANEL_TYPES.LIST,
 ];
diff --git a/frontend/src/container/GridCardLayout/GridCard/index.tsx b/frontend/src/container/GridCardLayout/GridCard/index.tsx
@@ -108,6 +108,7 @@ function GridCardGraph({
 				query: updatedQuery,
 				globalSelectedInterval,
 				variables: getDashboardVariables(variables),
+				fillGaps: widget.fillSpans,
 			};
 		}
 		updatedQuery.builder.queryData[0].pageSize = 10;
@@ -122,6 +123,7 @@ function GridCardGraph({
 					limit: updatedQuery.builder.queryData[0].limit || 0,
 				},
 			},
+			fillGaps: widget.fillSpans,
 		};
 	});
 
@@ -152,6 +154,7 @@ function GridCardGraph({
 				widget?.query,
 				widget?.panelTypes,
 				widget.timePreferance,
+				widget.fillSpans,
 				requestData,
 			],
 			retry(failureCount, error): boolean {

diff --git a/frontend/src/container/LogsExplorerViews/index.tsx b/frontend/src/container/LogsExplorerViews/index.tsx
@@ -37,7 +37,7 @@ import { useNotifications } from 'hooks/useNotifications';
 import useUrlQueryData from 'hooks/useUrlQueryData';
 import { FlatLogData } from 'lib/logs/flatLogData';
 import { getPaginationQueryData } from 'lib/newQueryBuilder/getPaginationQueryData';
-import { defaultTo, isEmpty, omit } from 'lodash-es';
+import { cloneDeep, defaultTo, isEmpty, omit, set } from 'lodash-es';
 import { Sliders } from 'lucide-react';
 import { SELECTED_VIEWS } from 'pages/LogsExplorer/utils';
 import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
@@ -117,6 +117,12 @@ function LogsExplorerViews({
 		return stagedQuery.builder.queryData.find((item) => !item.disabled) || null;
 	}, [stagedQuery]);
 
+	const { options, config } = useOptionsMenu({
+		storageKey: LOCALSTORAGE.LOGS_LIST_OPTIONS,
+		dataSource: initialDataSource || DataSource.LOGS,
+		aggregateOperator: listQuery?.aggregateOperator || StringOperators.NOOP,
+	});
+
 	const orderByTimestamp: OrderByPayload | null = useMemo(() => {
 		const timestampOrderBy = listQuery?.orderBy.find(
 			(item) => item.columnName === 'timestamp',
@@ -174,10 +180,10 @@ function LogsExplorerViews({
 		() =>
 			updateAllQueriesOperators(
 				currentQuery || initialQueriesMap.logs,
-				PANEL_TYPES.TIME_SERIES,
+				selectedPanelType,
 				DataSource.LOGS,
 			),
-		[currentQuery, updateAllQueriesOperators],
+		[currentQuery, selectedPanelType, updateAllQueriesOperators],
 	);
 
 	const handleModeChange = (panelType: PANEL_TYPES): void => {
@@ -309,6 +315,14 @@ function LogsExplorerViews({
 		isLoading: isUpdateDashboardLoading,
 	} = useUpdateDashboard();
 
+	const getUpdatedQueryForExport = useCallback((): Query => {
+		const updatedQuery = cloneDeep(currentQuery);
+
+		set(updatedQuery, 'builder.queryData[0].pageSize', 10);
+
+		return updatedQuery;
+	}, [currentQuery]);
+
 	const handleExport = useCallback(
 		(dashboard: Dashboard | null): void => {
 			if (!dashboard || !panelType) return;
@@ -319,11 +333,17 @@ function LogsExplorerViews({
 
 			const widgetId = v4();
 
+			const query =
+				panelType === PANEL_TYPES.LIST
+					? getUpdatedQueryForExport()
+					: exportDefaultQuery;
+
 			const updatedDashboard = addEmptyWidgetInDashboardJSONWithQuery(
 				dashboard,
-				exportDefaultQuery,
+				query,
 				widgetId,
 				panelTypeParam,
+				options.selectColumns,
 			);
 
 			updateDashboard(updatedDashboard, {
@@ -353,7 +373,7 @@ function LogsExplorerViews({
 					}
 
 					const dashboardEditView = generateExportToDashboardLink({
-						query: exportDefaultQuery,
+						query,
 						panelType: panelTypeParam,
 						dashboardId: data.payload?.uuid || '',
 						widgetId,
@@ -365,7 +385,9 @@ function LogsExplorerViews({
 			});
 		},
 		[
+			getUpdatedQueryForExport,
 			exportDefaultQuery,
+			options.selectColumns,
 			history,
 			notifications,
 			panelType,
@@ -460,12 +482,6 @@ function LogsExplorerViews({
 		selectedView,
 	]);
 
-	const { options, config } = useOptionsMenu({
-		storageKey: LOCALSTORAGE.LOGS_LIST_OPTIONS,
-		dataSource: initialDataSource || DataSource.METRICS,
-		aggregateOperator: listQuery?.aggregateOperator || StringOperators.NOOP,
-	});
-
 	const chartData = useMemo(() => {
 		if (!stagedQuery) return [];
 

diff --git a/frontend/src/container/LogsPanelTable/LogsPanelComponent.styles.scss b/frontend/src/container/LogsPanelTable/LogsPanelComponent.styles.scss
@@ -5,7 +5,7 @@
 	height: 100%;
 
 	.resize-table {
-		height: calc(100% - 40px);
+		height: calc(100% - 70px);
 		overflow: scroll;
 		overflow-x: hidden;
 

diff --git a/...end/src/container/NewDashboard/DashboardVariablesSelection/DashboardVariableSelection.tsx b/...end/src/container/NewDashboard/DashboardVariablesSelection/DashboardVariableSelection.tsx
@@ -138,6 +138,7 @@ function DashboardVariableSelection(): JSX.Element | null {
 						}}
 						onValueUpdate={onValueUpdate}
 						variablesToGetUpdated={variablesToGetUpdated}
+						setVariablesToGetUpdated={setVariablesToGetUpdated}
 					/>
 				))}
 		</Row>

diff --git a/frontend/src/container/NewDashboard/DashboardVariablesSelection/VariableItem.test.tsx b/frontend/src/container/NewDashboard/DashboardVariablesSelection/VariableItem.test.tsx
@@ -54,6 +54,7 @@ describe('VariableItem', () => {
 					existingVariables={{}}
 					onValueUpdate={mockOnValueUpdate}
 					variablesToGetUpdated={[]}
+					setVariablesToGetUpdated={(): void => {}}
 				/>
 			</MockQueryClientProvider>,
 		);
@@ -69,6 +70,7 @@ describe('VariableItem', () => {
 					existingVariables={{}}
 					onValueUpdate={mockOnValueUpdate}
 					variablesToGetUpdated={[]}
+					setVariablesToGetUpdated={(): void => {}}
 				/>
 			</MockQueryClientProvider>,
 		);
@@ -83,6 +85,7 @@ describe('VariableItem', () => {
 					existingVariables={{}}
 					onValueUpdate={mockOnValueUpdate}
 					variablesToGetUpdated={[]}
+					setVariablesToGetUpdated={(): void => {}}
 				/>
 			</MockQueryClientProvider>,
 		);
@@ -111,6 +114,7 @@ describe('VariableItem', () => {
 					existingVariables={{}}
 					onValueUpdate={mockOnValueUpdate}
 					variablesToGetUpdated={[]}
+					setVariablesToGetUpdated={(): void => {}}
 				/>
 			</MockQueryClientProvider>,
 		);
@@ -134,6 +138,7 @@ describe('VariableItem', () => {
 					existingVariables={{}}
 					onValueUpdate={mockOnValueUpdate}
 					variablesToGetUpdated={[]}
+					setVariablesToGetUpdated={(): void => {}}
 				/>
 			</MockQueryClientProvider>,
 		);
@@ -149,6 +154,7 @@ describe('VariableItem', () => {
 					existingVariables={{}}
 					onValueUpdate={mockOnValueUpdate}
 					variablesToGetUpdated={[]}
+					setVariablesToGetUpdated={(): void => {}}
 				/>
 			</MockQueryClientProvider>,
 		);

diff --git a/frontend/src/container/NewDashboard/DashboardVariablesSelection/VariableItem.tsx b/frontend/src/container/NewDashboard/DashboardVariablesSelection/VariableItem.tsx
@@ -52,6 +52,7 @@ interface VariableItemProps {
 		allSelected: boolean,
 	) => void;
 	variablesToGetUpdated: string[];
+	setVariablesToGetUpdated: React.Dispatch<React.SetStateAction<string[]>>;
 }
 
 const getSelectValue = (
@@ -73,6 +74,7 @@ function VariableItem({
 	existingVariables,
 	onValueUpdate,
 	variablesToGetUpdated,
+	setVariablesToGetUpdated,
 }: VariableItemProps): JSX.Element {
 	const [optionsData, setOptionsData] = useState<(string | number | boolean)[]>(
 		[],
@@ -171,6 +173,10 @@ function VariableItem({
 						}
 
 						setOptionsData(newOptionsData);
+					} else {
+						setVariablesToGetUpdated((prev) =>
+							prev.filter((name) => name !== variableData.name),
+						);
 					}
 				}
 			} catch (e) {

diff --git a/frontend/src/container/NewWidget/LeftContainer/index.tsx b/frontend/src/container/NewWidget/LeftContainer/index.tsx
@@ -72,10 +72,16 @@ function LeftContainer({
 				globalSelectedInterval,
 				graphType: getGraphType(selectedGraph || selectedWidget.panelTypes),
 				query: stagedQuery,
+				fillGaps: selectedWidget.fillSpans || false,
 			}));
 		}
 		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [stagedQuery, selectedTime, globalSelectedInterval]);
+	}, [
+		stagedQuery,
+		selectedTime,
+		selectedWidget.fillSpans,
+		globalSelectedInterval,
+	]);
 
 	const queryResponse = useGetQueryRange(
 		requestData,

diff --git a/frontend/src/container/NewWidget/utils.ts b/frontend/src/container/NewWidget/utils.ts
@@ -189,50 +189,6 @@ export const panelTypeDataSourceFormValuesMap: Record<
 			},
 		},
 	},
-	[PANEL_TYPES.HISTOGRAM]: {
-		[DataSource.LOGS]: {
-			builder: {
-				queryData: [
-					'filters',
-					'aggregateOperator',
-					'aggregateAttribute',
-					'groupBy',
-					'limit',
-					'having',
-					'orderBy',
-					'functions',
-				],
-			},
-		},
-		[DataSource.METRICS]: {
-			builder: {
-				queryData: [
-					'filters',
-					'aggregateOperator',
-					'aggregateAttribute',
-					'groupBy',
-					'limit',
-					'having',
-					'orderBy',
-					'functions',
-					'spaceAggregation',
-				],
-			},
-		},
-		[DataSource.TRACES]: {
-			builder: {
-				queryData: [
-					'filters',
-					'aggregateOperator',
-					'aggregateAttribute',
-					'groupBy',
-					'limit',
-					'having',
-					'orderBy',
-				],
-			},
-		},
-	},
 	[PANEL_TYPES.TABLE]: {
 		[DataSource.LOGS]: {
 			builder: {

diff --git a/frontend/src/container/TraceDetail/TraceDetails.styles.scss b/frontend/src/container/TraceDetail/TraceDetails.styles.scss
@@ -1,7 +1,17 @@
 .span-details-sider {
+	padding-top: 16px;
+
+	::-webkit-scrollbar {
+		width: 0.2em;
+	}
+
+	::-webkit-scrollbar-track {
+		box-shadow: inset 0 0 6px rgba(18, 18, 18, 0.3);
+	}
+
 	&.dark {
 		.ant-layout-sider-trigger {
-			background-color: black !important;
+			background-color: #0b0c0e !important;
 		}
 	}
 

diff --git a/frontend/src/container/TraceDetail/index.tsx b/frontend/src/container/TraceDetail/index.tsx
@@ -246,13 +246,14 @@ function TraceDetail({ response }: TraceDetailProps): JSX.Element {
 
 			<Sider
 				className={cx('span-details-sider', isDarkMode ? 'dark' : 'light')}
-				style={{ background: isDarkMode ? '#000' : '#fff' }}
+				style={{ background: isDarkMode ? '#0b0c0e' : '#fff' }}
 				theme={isDarkMode ? 'dark' : 'light'}
 				collapsible
 				collapsed={collapsed}
 				reverseArrow
 				width={300}
 				collapsedWidth={40}
+				defaultCollapsed
 				onCollapse={(value): void => setCollapsed(value)}
 			>
 				{!collapsed && (

diff --git a/frontend/src/container/TracesExplorer/TracesView/configs.tsx b/frontend/src/container/TracesExplorer/TracesView/configs.tsx
@@ -3,7 +3,7 @@ import { ColumnsType } from 'antd/es/table';
 import ROUTES from 'constants/routes';
 import { getMs } from 'container/Trace/Filters/Panel/PanelBody/Duration/util';
 import { DEFAULT_PER_PAGE_OPTIONS } from 'hooks/queryPagination';
-import { generatePath } from 'react-router-dom';
+import { generatePath, Link } from 'react-router-dom';
 import { ListItem } from 'types/api/widgets/getQuery';
 
 export const PER_PAGE_OPTIONS: number[] = [10, ...DEFAULT_PER_PAGE_OPTIONS];
@@ -38,14 +38,14 @@ export const columns: ColumnsType<ListItem['data']> = [
 		dataIndex: 'traceID',
 		key: 'traceID',
 		render: (traceID: string): JSX.Element => (
-			<Typography.Link
-				href={generatePath(ROUTES.TRACE_DETAIL, {
+			<Link
+				to={generatePath(ROUTES.TRACE_DETAIL, {
 					id: traceID,
 				})}
 				data-testid="trace-id"
 			>
 				{traceID}
-			</Typography.Link>
+			</Link>
 		),
 	},
 ];
diff --git a/frontend/src/container/TracesTableComponent/TracesTableComponent.styles.scss b/frontend/src/container/TracesTableComponent/TracesTableComponent.styles.scss
@@ -5,7 +5,7 @@
 	height: 100%;
 
 	.resize-table {
-		height: calc(100% - 40px);
+		height: calc(100% - 70px);
 		overflow: scroll;
 		overflow-x: hidden;
-Original file line number
+Diff line change
@@ Expand Up / @@ -138,6 +138,7 @@ function DashboardVariableSelection(): JSX.Element | null { @@
     						}}
     						onValueUpdate={onValueUpdate}
     						variablesToGetUpdated={variablesToGetUpdated}
+    						setVariablesToGetUpdated={setVariablesToGetUpdated}
     					/>
     				))}
     		</Row>
@@ Expand Down @@