QB - Logs - Enable TimeShift function (#4792)

* feat: qb - logs - enable time shift function

* feat: qb - logs - enable time shift function

* feat: show functions for logs in v3 version too

frontend/src/constants/queryFunctionOptions.ts

@@ -2,7 +2,7 @@
 import { QueryFunctionsTypes } from 'types/common/queryBuilder';
 import { SelectOption } from 'types/common/select';
 
-export const queryFunctionOptions: SelectOption<string, string>[] = [
+export const metricQueryFunctionOptions: SelectOption<string, string>[] = [
 	{
 		value: QueryFunctionsTypes.CUTOFF_MIN,
 		label: 'Cut Off Min',
@@ -65,6 +65,12 @@ export const queryFunctionOptions: SelectOption<string, string>[] = [
 	},
 ];
 
+export const logsQueryFunctionOptions: SelectOption<string, string>[] = [
+	{
+		value: QueryFunctionsTypes.TIME_SHIFT,
+		label: 'Time Shift',
+	},
+];
 interface QueryFunctionConfigType {
 	[key: string]: {
 		showInput: boolean;

frontend/src/container/FormAlertRules/QuerySection.tsx

@@ -56,8 +56,9 @@ function QuerySection({
 				initialDataSource: ALERTS_DATA_SOURCE_MAP[alertType],
 			}}
 			showFunctions={
-				alertType === AlertTypes.METRICS_BASED_ALERT &&
+				(alertType === AlertTypes.METRICS_BASED_ALERT &&
-				alertDef.version === ENTITY_VERSION_V4
+					alertDef.version === ENTITY_VERSION_V4) ||
+				alertType === AlertTypes.LOGS_BASED_ALERT
 			}
 			version={alertDef.version || 'v3'}
 		/>

frontend/src/container/QueryBuilder/components/QBEntityOptions/QBEntityOptions.styles.scss

@@ -77,6 +77,7 @@
 	.qb-entity-options {
 		.options {
 			border-color: var(--bg-vanilla-300);
+			box-shadow: none;
 
 			.periscope-btn {
 				border-color: var(--bg-vanilla-300);

frontend/src/container/QueryBuilder/components/QBEntityOptions/QBEntityOptions.tsx

@@ -17,6 +17,7 @@ import {
 	IBuilderQuery,
 	QueryFunctionProps,
 } from 'types/api/queryBuilder/queryBuilderData';
+import { DataSource } from 'types/common/queryBuilder';
 
 import QueryFunctions from '../QueryFunctions/QueryFunctions';
 
@@ -57,6 +58,8 @@ export default function QBEntityOptions({
 		}
 	};
 
+	const isLogsDataSource = query?.dataSource === DataSource.LOGS;
+
 	return (
 		<Col span={24}>
 			<div className="qb-entity-options">
@@ -97,12 +100,14 @@ export default function QBEntityOptions({
 							</Button>
 
 							{showFunctions &&
-								isMetricsDataSource &&
+								(isMetricsDataSource || isLogsDataSource) &&
 								query &&
 								onQueryFunctionsUpdates && (
 									<QueryFunctions
+										query={query}
 										queryFunctions={query.functions}
 										onChange={onQueryFunctionsUpdates}
+										maxFunctions={isLogsDataSource ? 1 : 3}
 									/>
 								)}
 						</Button.Group>

frontend/src/container/QueryBuilder/components/Query/Query.tsx

@@ -36,6 +36,7 @@ import {
 } from 'react';
 import { useLocation } from 'react-use';
 import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData';
+import { DataSource } from 'types/common/queryBuilder';
 import { transformToUpperCase } from 'utils/transformToUpperCase';
 
 import QBEntityOptions from '../QBEntityOptions/QBEntityOptions';
@@ -324,7 +325,10 @@ export const Query = memo(function Query({
 			<QBEntityOptions
 				isMetricsDataSource={isMetricsDataSource}
 				showFunctions={
-					(version && version === ENTITY_VERSION_V4) || showFunctions || false
+					(version && version === ENTITY_VERSION_V4) ||
+					query.dataSource === DataSource.LOGS ||
+					showFunctions ||
+					false
 				}
 				isCollapsed={isCollapse}
 				entityType="query"

frontend/src/container/QueryBuilder/components/QueryFunctions/Function.tsx

@@ -2,15 +2,21 @@
 import { Button, Flex, Input, Select } from 'antd';
 import cx from 'classnames';
 import {
-	queryFunctionOptions,
+	logsQueryFunctionOptions,
+	metricQueryFunctionOptions,
 	queryFunctionsTypesConfig,
 } from 'constants/queryFunctionOptions';
 import { useIsDarkMode } from 'hooks/useDarkMode';
 import { debounce, isNil } from 'lodash-es';
 import { X } from 'lucide-react';
-import { QueryFunctionProps } from 'types/api/queryBuilder/queryBuilderData';
+import {
+	IBuilderQuery,
+	QueryFunctionProps,
+} from 'types/api/queryBuilder/queryBuilderData';
+import { DataSource } from 'types/common/queryBuilder';
 
 interface FunctionProps {
+	query: IBuilderQuery;
 	funcData: QueryFunctionProps;
 	index: any;
 	handleUpdateFunctionArgs: any;
@@ -19,6 +25,7 @@ interface FunctionProps {
 }
 
 export default function Function({
+	query,
 	funcData,
 	index,
 	handleUpdateFunctionArgs,
@@ -44,6 +51,12 @@ export default function Function({
 		500,
 	);
 
+	// update the logic when we start supporting functions for traces
+	const functionOptions =
+		query.dataSource === DataSource.LOGS
+			? logsQueryFunctionOptions
+			: metricQueryFunctionOptions;
+
 	return (
 		<Flex className="query-function">
 			<Select
@@ -62,7 +75,7 @@ export default function Function({
 					boxShadow: `4px 10px 16px 2px rgba(0, 0, 0, 0.20)`,
 				}}
 				placement="bottomRight"
-				options={queryFunctionOptions}
+				options={functionOptions}
 			/>
 
 			{showInput && (

frontend/src/container/QueryBuilder/components/QueryFunctions/QueryFunctions.tsx

@@ -6,19 +6,29 @@ import { useIsDarkMode } from 'hooks/useDarkMode';
 import { cloneDeep, pullAt } from 'lodash-es';
 import { Plus } from 'lucide-react';
 import { useState } from 'react';
-import { QueryFunctionProps } from 'types/api/queryBuilder/queryBuilderData';
+import {
-import { QueryFunctionsTypes } from 'types/common/queryBuilder';
+	IBuilderQuery,
+	QueryFunctionProps,
+} from 'types/api/queryBuilder/queryBuilderData';
+import { DataSource, QueryFunctionsTypes } from 'types/common/queryBuilder';
 
 import Function from './Function';
 
-const defaultFunctionStruct: QueryFunctionProps = {
+const defaultMetricFunctionStruct: QueryFunctionProps = {
 	name: QueryFunctionsTypes.CUTOFF_MIN,
 	args: [],
 };
 
+const defaultLogFunctionStruct: QueryFunctionProps = {
+	name: QueryFunctionsTypes.TIME_SHIFT,
+	args: [],
+};
+
 interface QueryFunctionsProps {
+	query: IBuilderQuery;
 	queryFunctions: QueryFunctionProps[];
 	onChange: (functions: QueryFunctionProps[]) => void;
+	maxFunctions: number;
 }
 
 // SVG component
@@ -71,8 +81,10 @@ function FunctionIcon({
 }
 
 export default function QueryFunctions({
+	query,
 	queryFunctions,
 	onChange,
+	maxFunctions = 3,
 }: QueryFunctionsProps): JSX.Element {
 	const [functions, setFunctions] = useState<QueryFunctionProps[]>(
 		queryFunctions,
@@ -81,6 +93,11 @@ export default function QueryFunctions({
 	const isDarkMode = useIsDarkMode();
 
 	const handleAddNewFunction = (): void => {
+		const defaultFunctionStruct =
+			query.dataSource === DataSource.LOGS
+				? defaultLogFunctionStruct
+				: defaultMetricFunctionStruct;
+
 		const updatedFunctionsArr = [
 			...functions,
 			{
@@ -149,6 +166,7 @@ export default function QueryFunctions({
 			<div className="query-functions-list">
 				{functions.map((func, index) => (
 					<Function
+						query={query}
 						funcData={func}
 						index={index}
 						// eslint-disable-next-line react/no-array-index-key
@@ -170,7 +188,7 @@ export default function QueryFunctions({
 			>
 				<Button
 					className="periscope-btn add-function-btn"
-					disabled={functions && functions.length >= 3}
+					disabled={functions && functions.length >= maxFunctions}
 					onClick={handleAddNewFunction}
 				>
 					<Plus size={14} color={!isDarkMode ? '#0B0C0E' : 'white'} />

frontend/src/hooks/queryBuilder/useQueryBuilderOperations.ts

@@ -294,7 +294,10 @@ export const useQueryOperations: UseQueryOperations = ({
 				...query,
 			};
 
-			if (newQuery.dataSource === DataSource.METRICS) {
+			if (
+				newQuery.dataSource === DataSource.METRICS ||
+				newQuery.dataSource === DataSource.LOGS
+			) {
 				newQuery.functions = functions;
 			}
 
@@ -304,6 +307,7 @@ export const useQueryOperations: UseQueryOperations = ({
 	);
 
 	const isMetricsDataSource = query.dataSource === DataSource.METRICS;
+	const isLogsDataSource = query.dataSource === DataSource.LOGS;
 
 	const isTracePanelType = panelType === PANEL_TYPES.TRACE;
 
@@ -346,6 +350,7 @@ export const useQueryOperations: UseQueryOperations = ({
 	return {
 		isTracePanelType,
 		isMetricsDataSource,
+		isLogsDataSource,
 		operators,
 		spaceAggregationOptions,
 		listOfAdditionalFilters,