+
{children}
@@ -33,6 +36,7 @@ export interface AddToQueryHOCProps {
fieldKey: string;
fieldValue: string;
onAddToQuery: (fieldKey: string, fieldValue: string, operator: string) => void;
+ fontSize: FontSize;
children: ReactNode;
}
diff --git a/frontend/src/components/Logs/CopyClipboardHOC.tsx b/frontend/src/components/Logs/CopyClipboardHOC.tsx
index a12208bf77..65cb6fc854 100644
--- a/frontend/src/components/Logs/CopyClipboardHOC.tsx
+++ b/frontend/src/components/Logs/CopyClipboardHOC.tsx
@@ -4,6 +4,7 @@ import { ReactNode, useCallback, useEffect } from 'react';
import { useCopyToClipboard } from 'react-use';
function CopyClipboardHOC({
+ entityKey,
textToCopy,
children,
}: CopyClipboardHOCProps): JSX.Element {
@@ -11,11 +12,15 @@ function CopyClipboardHOC({
const { notifications } = useNotifications();
useEffect(() => {
if (value.value) {
+ const key = entityKey || '';
+
+ const notificationMessage = `${key} copied to clipboard`;
+
notifications.success({
- message: 'Copied to clipboard',
+ message: notificationMessage,
});
}
- }, [value, notifications]);
+ }, [value, notifications, entityKey]);
const onClick = useCallback((): void => {
setCopy(textToCopy);
@@ -34,6 +39,7 @@ function CopyClipboardHOC({
}
interface CopyClipboardHOCProps {
+ entityKey: string | undefined;
textToCopy: string;
children: ReactNode;
}
diff --git a/frontend/src/components/Logs/ListLogView/ListLogView.styles.scss b/frontend/src/components/Logs/ListLogView/ListLogView.styles.scss
index 3caf6a3282..21dcf171ce 100644
--- a/frontend/src/components/Logs/ListLogView/ListLogView.styles.scss
+++ b/frontend/src/components/Logs/ListLogView/ListLogView.styles.scss
@@ -6,6 +6,21 @@
font-weight: 400;
line-height: 18px; /* 128.571% */
letter-spacing: -0.07px;
+
+ &.small {
+ font-size: 11px;
+ line-height: 16px;
+ }
+
+ &.medium {
+ font-size: 13px;
+ line-height: 20px;
+ }
+
+ &.large {
+ font-size: 14px;
+ line-height: 24px;
+ }
}
.log-value {
color: var(--text-vanilla-400, #c0c1c3);
@@ -14,6 +29,21 @@
font-weight: 400;
line-height: 18px; /* 128.571% */
letter-spacing: -0.07px;
+
+ &.small {
+ font-size: 11px;
+ line-height: 16px;
+ }
+
+ &.medium {
+ font-size: 13px;
+ line-height: 20px;
+ }
+
+ &.large {
+ font-size: 14px;
+ line-height: 24px;
+ }
}
.log-line {
display: flex;
@@ -40,6 +70,20 @@
font-weight: 400;
line-height: 18px; /* 128.571% */
letter-spacing: -0.07px;
+ &.small {
+ font-size: 11px;
+ line-height: 16px;
+ }
+
+ &.medium {
+ font-size: 13px;
+ line-height: 20px;
+ }
+
+ &.large {
+ font-size: 14px;
+ line-height: 24px;
+ }
}
.selected-log-value {
@@ -52,12 +96,37 @@
line-height: 18px;
letter-spacing: -0.07px;
font-size: 14px;
+ &.small {
+ font-size: 11px;
+ line-height: 16px;
+ }
+
+ &.medium {
+ font-size: 13px;
+ line-height: 20px;
+ }
+
+ &.large {
+ font-size: 14px;
+ line-height: 24px;
+ }
}
.selected-log-kv {
min-height: 24px;
display: flex;
align-items: center;
+ &.small {
+ min-height: 16px;
+ }
+
+ &.medium {
+ min-height: 20px;
+ }
+
+ &.large {
+ min-height: 24px;
+ }
}
}
diff --git a/frontend/src/components/Logs/ListLogView/index.tsx b/frontend/src/components/Logs/ListLogView/index.tsx
index fa8a2fb608..ed2627552d 100644
--- a/frontend/src/components/Logs/ListLogView/index.tsx
+++ b/frontend/src/components/Logs/ListLogView/index.tsx
@@ -3,8 +3,11 @@ import './ListLogView.styles.scss';
import { blue } from '@ant-design/colors';
import Convert from 'ansi-to-html';
import { Typography } from 'antd';
+import cx from 'classnames';
import LogDetail from 'components/LogDetail';
import { VIEW_TYPES } from 'components/LogDetail/constants';
+import { unescapeString } from 'container/LogDetailedView/utils';
+import { FontSize } from 'container/OptionsMenu/types';
import dayjs from 'dayjs';
import dompurify from 'dompurify';
import { useActiveLog } from 'hooks/logs/useActiveLog';
@@ -39,6 +42,7 @@ interface LogFieldProps {
fieldKey: string;
fieldValue: string;
linesPerRow?: number;
+ fontSize: FontSize;
}
type LogSelectedFieldProps = Omit &
@@ -48,11 +52,12 @@ function LogGeneralField({
fieldKey,
fieldValue,
linesPerRow = 1,
+ fontSize,
}: LogFieldProps): JSX.Element {
const html = useMemo(
() => ({
__html: convert.toHtml(
- dompurify.sanitize(fieldValue, {
+ dompurify.sanitize(unescapeString(fieldValue), {
FORBID_TAGS: [...FORBID_DOM_PURIFY_TAGS],
}),
),
@@ -62,12 +67,12 @@ function LogGeneralField({
return (
-
+
{`${fieldKey} : `}
1 ? linesPerRow : undefined}
/>
@@ -78,6 +83,7 @@ function LogSelectedField({
fieldKey = '',
fieldValue = '',
onAddToQuery,
+ fontSize,
}: LogSelectedFieldProps): JSX.Element {
return (
(maxLinesNumber);
+ const [fontSizeValue, setFontSizeValue] = useState(
+ fontSize?.value || FontSize.SMALL,
+ );
+ const [isFontSizeOptionsOpen, setIsFontSizeOptionsOpen] = useState(
+ false,
+ );
const [addNewColumn, setAddNewColumn] = useState(false);
@@ -88,6 +94,12 @@ export default function LogsFormatOptionsMenu({
}
}, [maxLinesPerRow]);
+ useEffect(() => {
+ if (fontSizeValue && config && config.fontSize?.onChange) {
+ config.fontSize.onChange(fontSizeValue);
+ }
+ }, [fontSizeValue]);
+
return (
diff --git a/frontend/src/container/LogsExplorerViews/tests/LogsExplorerViews.test.tsx b/frontend/src/container/LogsExplorerViews/tests/LogsExplorerViews.test.tsx
index a1ae308efd..8262d6f9bc 100644
--- a/frontend/src/container/LogsExplorerViews/tests/LogsExplorerViews.test.tsx
+++ b/frontend/src/container/LogsExplorerViews/tests/LogsExplorerViews.test.tsx
@@ -46,6 +46,10 @@ jest.mock(
},
);
+jest.mock('api/common/getQueryStats', () => ({
+ getQueryStats: jest.fn(),
+}));
+
jest.mock('constants/panelTypes', () => ({
AVAILABLE_EXPORT_PANEL_TYPES: ['graph', 'table'],
}));
@@ -79,6 +83,9 @@ const renderer = (): RenderResult =>
{}}
+ listQueryKeyRef={{ current: {} }}
+ chartQueryKeyRef={{ current: {} }}
/>
diff --git a/frontend/src/container/LogsPanelTable/LogsPanelComponent.tsx b/frontend/src/container/LogsPanelTable/LogsPanelComponent.tsx
index 3835386cd3..a7598b5c76 100644
--- a/frontend/src/container/LogsPanelTable/LogsPanelComponent.tsx
+++ b/frontend/src/container/LogsPanelTable/LogsPanelComponent.tsx
@@ -108,6 +108,7 @@ function LogsPanelComponent({
onSetActiveLog,
onClearActiveLog,
onAddToQuery,
+ onGroupByAttribute,
} = useActiveLog();
const handleRow = useCallback(
@@ -244,6 +245,7 @@ function LogsPanelComponent({
onClose={onClearActiveLog}
onAddToQuery={onAddToQuery}
onClickActionItem={onAddToQuery}
+ onGroupByAttribute={onGroupByAttribute}
isListViewPanel
listViewPanelSelectedFields={widget?.selectedLogFields}
/>
diff --git a/frontend/src/container/LogsTable/index.tsx b/frontend/src/container/LogsTable/index.tsx
index 6b20986d1f..577533adcf 100644
--- a/frontend/src/container/LogsTable/index.tsx
+++ b/frontend/src/container/LogsTable/index.tsx
@@ -10,11 +10,14 @@ import LogsTableView from 'components/Logs/TableView';
import OverlayScrollbar from 'components/OverlayScrollbar/OverlayScrollbar';
import Spinner from 'components/Spinner';
import { CARD_BODY_STYLE } from 'constants/card';
+import { LOCALSTORAGE } from 'constants/localStorage';
+import { useOptionsMenu } from 'container/OptionsMenu';
import { useActiveLog } from 'hooks/logs/useActiveLog';
import { memo, useCallback, useMemo } from 'react';
import { useSelector } from 'react-redux';
import { Virtuoso } from 'react-virtuoso';
import { AppState } from 'store/reducers';
+import { DataSource, StringOperators } from 'types/common/queryBuilder';
// interfaces
import { ILogsReducer } from 'types/reducer/logs';
@@ -35,6 +38,7 @@ function LogsTable(props: LogsTableProps): JSX.Element {
activeLog,
onClearActiveLog,
onAddToQuery,
+ onGroupByAttribute,
onSetActiveLog,
} = useActiveLog();
@@ -55,6 +59,14 @@ function LogsTable(props: LogsTableProps): JSX.Element {
liveTail,
]);
+ const { options } = useOptionsMenu({
+ storageKey: LOCALSTORAGE.LOGS_LIST_OPTIONS,
+ // this component will alwyays be called on old logs explorer page itself!
+ dataSource: DataSource.LOGS,
+ // and we do not have table / timeseries aggregated views in the old logs explorer!
+ aggregateOperator: StringOperators.NOOP,
+ });
+
const getItemContent = useCallback(
(index: number): JSX.Element => {
const log = logs[index];
@@ -66,6 +78,7 @@ function LogsTable(props: LogsTableProps): JSX.Element {
data={log}
linesPerRow={linesPerRow}
selectedFields={selected}
+ fontSize={options.fontSize}
/>
);
}
@@ -78,10 +91,19 @@ function LogsTable(props: LogsTableProps): JSX.Element {
linesPerRow={linesPerRow}
onAddToQuery={onAddToQuery}
onSetActiveLog={onSetActiveLog}
+ fontSize={options.fontSize}
/>
);
},
- [logs, viewMode, selected, onAddToQuery, onSetActiveLog, linesPerRow],
+ [
+ logs,
+ viewMode,
+ selected,
+ linesPerRow,
+ onAddToQuery,
+ onSetActiveLog,
+ options.fontSize,
+ ],
);
const renderContent = useMemo(() => {
@@ -92,6 +114,7 @@ function LogsTable(props: LogsTableProps): JSX.Element {
logs={logs}
fields={selected}
linesPerRow={linesPerRow}
+ fontSize={options.fontSize}
/>
);
}
@@ -103,7 +126,15 @@ function LogsTable(props: LogsTableProps): JSX.Element {
);
- }, [getItemContent, linesPerRow, logs, onSetActiveLog, selected, viewMode]);
+ }, [
+ getItemContent,
+ linesPerRow,
+ logs,
+ onSetActiveLog,
+ options.fontSize,
+ selected,
+ viewMode,
+ ]);
if (isLoading) {
return (0);
const { queries } = useResourceAttribute();
+ const urlQuery = useUrlQuery();
+ const { pathname } = useLocation();
+ const dispatch = useDispatch();
+
+ const onDragSelect = useCallback(
+ (start: number, end: number) => {
+ const startTimestamp = Math.trunc(start);
+ const endTimestamp = Math.trunc(end);
+
+ urlQuery.set(QueryParams.startTime, startTimestamp.toString());
+ urlQuery.set(QueryParams.endTime, endTimestamp.toString());
+ const generatedUrl = `${pathname}?${urlQuery.toString()}`;
+ history.push(generatedUrl);
+
+ if (startTimestamp !== endTimestamp) {
+ dispatch(UpdateTimeInterval('custom', [startTimestamp, endTimestamp]));
+ }
+ },
+ [dispatch, pathname, urlQuery],
+ );
const tagFilterItems: TagFilterItem[] = useMemo(
() =>
@@ -150,6 +175,7 @@ function DBCall(): JSX.Element {
'database_call_rps',
);
}}
+ onDragSelect={onDragSelect}
version={ENTITY_VERSION_V4}
/>
@@ -185,6 +211,7 @@ function DBCall(): JSX.Element {
'database_call_avg_duration',
);
}}
+ onDragSelect={onDragSelect}
version={ENTITY_VERSION_V4}
/>
diff --git a/frontend/src/container/MetricsApplication/Tabs/External.tsx b/frontend/src/container/MetricsApplication/Tabs/External.tsx
index 69abd6696d..5ba3d3df6c 100644
--- a/frontend/src/container/MetricsApplication/Tabs/External.tsx
+++ b/frontend/src/container/MetricsApplication/Tabs/External.tsx
@@ -1,6 +1,7 @@
import { Col } from 'antd';
import logEvent from 'api/common/logEvent';
import { ENTITY_VERSION_V4 } from 'constants/app';
+import { QueryParams } from 'constants/query';
import { PANEL_TYPES } from 'constants/queryBuilder';
import Graph from 'container/GridCardLayout/GridCard';
import {
@@ -14,8 +15,12 @@ import {
convertRawQueriesToTraceSelectedTags,
resourceAttributesToTagFilterItems,
} from 'hooks/useResourceAttribute/utils';
-import { useEffect, useMemo, useRef, useState } from 'react';
-import { useParams } from 'react-router-dom';
+import useUrlQuery from 'hooks/useUrlQuery';
+import history from 'lib/history';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useDispatch } from 'react-redux';
+import { useLocation, useParams } from 'react-router-dom';
+import { UpdateTimeInterval } from 'store/actions';
import { DataTypes } from 'types/api/queryBuilder/queryAutocompleteResponse';
import { EQueryType } from 'types/common/dashboard';
import { v4 as uuid } from 'uuid';
@@ -40,6 +45,27 @@ function External(): JSX.Element {
const servicename = decodeURIComponent(encodedServiceName);
const { queries } = useResourceAttribute();
+ const urlQuery = useUrlQuery();
+ const { pathname } = useLocation();
+ const dispatch = useDispatch();
+
+ const onDragSelect = useCallback(
+ (start: number, end: number) => {
+ const startTimestamp = Math.trunc(start);
+ const endTimestamp = Math.trunc(end);
+
+ urlQuery.set(QueryParams.startTime, startTimestamp.toString());
+ urlQuery.set(QueryParams.endTime, endTimestamp.toString());
+ const generatedUrl = `${pathname}?${urlQuery.toString()}`;
+ history.push(generatedUrl);
+
+ if (startTimestamp !== endTimestamp) {
+ dispatch(UpdateTimeInterval('custom', [startTimestamp, endTimestamp]));
+ }
+ },
+ [dispatch, pathname, urlQuery],
+ );
+
const tagFilterItems = useMemo(
() =>
handleNonInQueryRange(resourceAttributesToTagFilterItems(queries)) || [],
@@ -214,6 +240,7 @@ function External(): JSX.Element {
'external_call_error_percentage',
);
}}
+ onDragSelect={onDragSelect}
version={ENTITY_VERSION_V4}
/>
@@ -249,6 +276,7 @@ function External(): JSX.Element {
'external_call_duration',
);
}}
+ onDragSelect={onDragSelect}
version={ENTITY_VERSION_V4}
/>
@@ -285,6 +313,7 @@ function External(): JSX.Element {
'external_call_rps_by_address',
)
}
+ onDragSelect={onDragSelect}
version={ENTITY_VERSION_V4}
/>
@@ -320,6 +349,7 @@ function External(): JSX.Element {
'external_call_duration_by_address',
);
}}
+ onDragSelect={onDragSelect}
version={ENTITY_VERSION_V4}
/>
diff --git a/frontend/src/container/MetricsApplication/Tabs/Overview.tsx b/frontend/src/container/MetricsApplication/Tabs/Overview.tsx
index 916c3435b5..241395b23a 100644
--- a/frontend/src/container/MetricsApplication/Tabs/Overview.tsx
+++ b/frontend/src/container/MetricsApplication/Tabs/Overview.tsx
@@ -185,7 +185,7 @@ function Application(): JSX.Element {
urlQuery.set(QueryParams.startTime, startTimestamp.toString());
urlQuery.set(QueryParams.endTime, endTimestamp.toString());
const generatedUrl = `${pathname}?${urlQuery.toString()}`;
- history.replace(generatedUrl);
+ history.push(generatedUrl);
if (startTimestamp !== endTimestamp) {
dispatch(UpdateTimeInterval('custom', [startTimestamp, endTimestamp]));
diff --git a/frontend/src/container/MySettings/index.tsx b/frontend/src/container/MySettings/index.tsx
index 234911796e..de6c12eb53 100644
--- a/frontend/src/container/MySettings/index.tsx
+++ b/frontend/src/container/MySettings/index.tsx
@@ -26,7 +26,9 @@ function MySettings(): JSX.Element {
label: (
Beta
+
+ Beta
+
),
value: 'light',
diff --git a/frontend/src/container/OnboardingContainer/OnboardingContainer.tsx b/frontend/src/container/OnboardingContainer/OnboardingContainer.tsx
index 3129d76c8e..c1275ff115 100644
--- a/frontend/src/container/OnboardingContainer/OnboardingContainer.tsx
+++ b/frontend/src/container/OnboardingContainer/OnboardingContainer.tsx
@@ -247,8 +247,7 @@ export default function Onboarding(): JSX.Element {
const handleNext = (): void => {
if (activeStep <= 3) {
- handleNextStep();
- history.replace(moduleRouteMap[selectedModule.id as ModulesMap]);
+ history.push(moduleRouteMap[selectedModule.id as ModulesMap]);
}
};
@@ -258,6 +257,13 @@ export default function Onboarding(): JSX.Element {
updateSelectedDataSource(null);
};
+ const handleBackNavigation = (): void => {
+ setCurrent(0);
+ setActiveStep(1);
+ setSelectedModule(useCases.APM);
+ resetProgress();
+ };
+
useEffect(() => {
const { pathname } = location;
@@ -277,9 +283,11 @@ export default function Onboarding(): JSX.Element {
} else if (pathname === ROUTES.GET_STARTED_AZURE_MONITORING) {
handleModuleSelect(useCases.AzureMonitoring);
handleNextStep();
+ } else {
+ handleBackNavigation();
}
// eslint-disable-next-line react-hooks/exhaustive-deps
- }, []);
+ }, [location.pathname]);
const [form] = Form.useForm();
const [
diff --git a/frontend/src/container/OnboardingContainer/Steps/DataSource/DataSource.tsx b/frontend/src/container/OnboardingContainer/Steps/DataSource/DataSource.tsx
index 138aac775c..f2f7028bdc 100644
--- a/frontend/src/container/OnboardingContainer/Steps/DataSource/DataSource.tsx
+++ b/frontend/src/container/OnboardingContainer/Steps/DataSource/DataSource.tsx
@@ -131,6 +131,11 @@ export default function DataSource(): JSX.Element {
};
const goToIntegrationsPage = (): void => {
+ logEvent('Onboarding V2: Go to integrations', {
+ module: selectedModule?.id,
+ dataSource: selectedDataSource?.name,
+ framework: selectedFramework,
+ });
history.push(ROUTES.INTEGRATIONS);
};
diff --git a/frontend/src/container/OnboardingContainer/common/ModuleStepsContainer/ModuleStepsContainer.tsx b/frontend/src/container/OnboardingContainer/common/ModuleStepsContainer/ModuleStepsContainer.tsx
index ae74930d57..f9efa061f7 100644
--- a/frontend/src/container/OnboardingContainer/common/ModuleStepsContainer/ModuleStepsContainer.tsx
+++ b/frontend/src/container/OnboardingContainer/common/ModuleStepsContainer/ModuleStepsContainer.tsx
@@ -11,13 +11,15 @@ import {
} from '@ant-design/icons';
import { Button, Space, Steps, Typography } from 'antd';
import logEvent from 'api/common/logEvent';
+import LaunchChatSupport from 'components/LaunchChatSupport/LaunchChatSupport';
+import { onboardingHelpMessage } from 'components/LaunchChatSupport/util';
import ROUTES from 'constants/routes';
import { stepsMap } from 'container/OnboardingContainer/constants/stepsConfig';
import { DataSourceType } from 'container/OnboardingContainer/Steps/DataSource/DataSource';
import { hasFrameworks } from 'container/OnboardingContainer/utils/dataSourceUtils';
import history from 'lib/history';
import { isEmpty, isNull } from 'lodash-es';
-import { HelpCircle, UserPlus } from 'lucide-react';
+import { UserPlus } from 'lucide-react';
import { SetStateAction, useState } from 'react';
import { useOnboardingContext } from '../../context/OnboardingContext';
@@ -381,31 +383,6 @@ export default function ModuleStepsContainer({
history.push('/');
};
- const handleFacingIssuesClick = (): void => {
- logEvent('Onboarding V2: Facing Issues Sending Data to SigNoz', {
- dataSource: selectedDataSource?.id,
- framework: selectedFramework,
- environment: selectedEnvironment,
- module: activeStep?.module?.id,
- step: activeStep?.step?.id,
- });
-
- const message = `Hi Team,
-
-I am facing issues sending data to SigNoz. Here are my application details
-
-Data Source: ${selectedDataSource?.name}
-Framework:
-Environment:
-Module: ${activeStep?.module?.id}
-
-Thanks
-`;
- if (window.Intercom) {
- window.Intercom('showNewMessage', message);
- }
- };
-
return (
diff --git a/frontend/src/container/OptionsMenu/constants.ts b/frontend/src/container/OptionsMenu/constants.ts
index 2db02f85b8..7b591cd4c5 100644
--- a/frontend/src/container/OptionsMenu/constants.ts
+++ b/frontend/src/container/OptionsMenu/constants.ts
@@ -1,6 +1,6 @@
import { DataTypes } from 'types/api/queryBuilder/queryAutocompleteResponse';
-import { OptionsQuery } from './types';
+import { FontSize, OptionsQuery } from './types';
export const URL_OPTIONS = 'options';
@@ -8,6 +8,7 @@ export const defaultOptionsQuery: OptionsQuery = {
selectColumns: [],
maxLines: 2,
format: 'list',
+ fontSize: FontSize.SMALL,
};
export const defaultTraceSelectedColumns = [
@@ -18,6 +19,7 @@ export const defaultTraceSelectedColumns = [
isColumn: true,
isJSON: false,
id: 'serviceName--string--tag--true',
+ isIndexed: false,
},
{
key: 'name',
@@ -26,6 +28,7 @@ export const defaultTraceSelectedColumns = [
isColumn: true,
isJSON: false,
id: 'name--string--tag--true',
+ isIndexed: false,
},
{
key: 'durationNano',
@@ -34,6 +37,7 @@ export const defaultTraceSelectedColumns = [
isColumn: true,
isJSON: false,
id: 'durationNano--float64--tag--true',
+ isIndexed: false,
},
{
key: 'httpMethod',
@@ -42,6 +46,7 @@ export const defaultTraceSelectedColumns = [
isColumn: true,
isJSON: false,
id: 'httpMethod--string--tag--true',
+ isIndexed: false,
},
{
key: 'responseStatusCode',
@@ -50,5 +55,6 @@ export const defaultTraceSelectedColumns = [
isColumn: true,
isJSON: false,
id: 'responseStatusCode--string--tag--true',
+ isIndexed: false,
},
];
diff --git a/frontend/src/container/OptionsMenu/types.ts b/frontend/src/container/OptionsMenu/types.ts
index 57b81364d6..2c57d66b28 100644
--- a/frontend/src/container/OptionsMenu/types.ts
+++ b/frontend/src/container/OptionsMenu/types.ts
@@ -2,10 +2,21 @@ import { InputNumberProps, RadioProps, SelectProps } from 'antd';
import { LogViewMode } from 'container/LogsTable';
import { BaseAutocompleteData } from 'types/api/queryBuilder/queryAutocompleteResponse';
+export enum FontSize {
+ SMALL = 'small',
+ MEDIUM = 'medium',
+ LARGE = 'large',
+}
+
+interface FontSizeProps {
+ value: FontSize;
+ onChange: (val: FontSize) => void;
+}
export interface OptionsQuery {
selectColumns: BaseAutocompleteData[];
maxLines: number;
format: LogViewMode;
+ fontSize: FontSize;
}
export interface InitialOptions
@@ -18,6 +29,7 @@ export type OptionsMenuConfig = {
onChange: (value: LogViewMode) => void;
};
maxLines?: Pick;
+ fontSize?: FontSizeProps;
addColumn?: Pick<
SelectProps,
'options' | 'onSelect' | 'onFocus' | 'onSearch' | 'onBlur'
diff --git a/frontend/src/container/OptionsMenu/useOptionsMenu.ts b/frontend/src/container/OptionsMenu/useOptionsMenu.ts
index 97fbbbb006..7b3cfce035 100644
--- a/frontend/src/container/OptionsMenu/useOptionsMenu.ts
+++ b/frontend/src/container/OptionsMenu/useOptionsMenu.ts
@@ -7,6 +7,10 @@ import { useGetAggregateKeys } from 'hooks/queryBuilder/useGetAggregateKeys';
import useDebounce from 'hooks/useDebounce';
import { useNotifications } from 'hooks/useNotifications';
import useUrlQueryData from 'hooks/useUrlQueryData';
+import {
+ AllTraceFilterKeys,
+ AllTraceFilterKeyValue,
+} from 'pages/TracesExplorer/Filter/filterUtils';
import { useCallback, useEffect, useMemo, useState } from 'react';
import { useQueries } from 'react-query';
import { ErrorResponse, SuccessResponse } from 'types/api';
@@ -21,7 +25,12 @@ import {
defaultTraceSelectedColumns,
URL_OPTIONS,
} from './constants';
-import { InitialOptions, OptionsMenuConfig, OptionsQuery } from './types';
+import {
+ FontSize,
+ InitialOptions,
+ OptionsMenuConfig,
+ OptionsQuery,
+} from './types';
import { getOptionsFromKeys } from './utils';
interface UseOptionsMenuProps {
@@ -106,15 +115,40 @@ const useOptionsMenu = ({
[] as BaseAutocompleteData[],
);
- return (
- (initialOptions.selectColumns
- ?.map((column) => attributesData.find(({ key }) => key === column))
- .filter(Boolean) as BaseAutocompleteData[]) || []
- );
+ let initialSelected = initialOptions.selectColumns
+ ?.map((column) => attributesData.find(({ key }) => key === column))
+ .filter(Boolean) as BaseAutocompleteData[];
+
+ if (dataSource === DataSource.TRACES) {
+ initialSelected = initialSelected
+ ?.map((col) => {
+ if (col && Object.keys(AllTraceFilterKeyValue).includes(col?.key)) {
+ const metaData = defaultTraceSelectedColumns.find(
+ (coln) => coln.key === (col.key as AllTraceFilterKeys),
+ );
+
+ return {
+ ...metaData,
+ key: metaData?.key,
+ dataType: metaData?.dataType,
+ type: metaData?.type,
+ isColumn: metaData?.isColumn,
+ isJSON: metaData?.isJSON,
+ id: metaData?.id,
+ };
+ }
+ return col;
+ })
+ .filter(Boolean) as BaseAutocompleteData[];
+ }
+
+ return initialSelected || [];
+ // eslint-disable-next-line react-hooks/exhaustive-deps
}, [
isFetchedInitialAttributes,
initialOptions?.selectColumns,
initialAttributesResult,
+ dataSource,
]);
const {
@@ -248,6 +282,17 @@ const useOptionsMenu = ({
},
[handleRedirectWithOptionsData, optionsQueryData],
);
+ const handleFontSizeChange = useCallback(
+ (value: FontSize) => {
+ const optionsData: OptionsQuery = {
+ ...optionsQueryData,
+ fontSize: value,
+ };
+
+ handleRedirectWithOptionsData(optionsData);
+ },
+ [handleRedirectWithOptionsData, optionsQueryData],
+ );
const handleSearchAttribute = useCallback((value: string) => {
setSearchText(value);
@@ -282,18 +327,24 @@ const useOptionsMenu = ({
value: optionsQueryData.maxLines || defaultOptionsQuery.maxLines,
onChange: handleMaxLinesChange,
},
+ fontSize: {
+ value: optionsQueryData?.fontSize || defaultOptionsQuery.fontSize,
+ onChange: handleFontSizeChange,
+ },
}),
[
- optionsFromAttributeKeys,
- optionsQueryData?.maxLines,
- optionsQueryData?.format,
- optionsQueryData?.selectColumns,
isSearchedAttributesFetching,
- handleSearchAttribute,
+ optionsQueryData?.selectColumns,
+ optionsQueryData.format,
+ optionsQueryData.maxLines,
+ optionsQueryData?.fontSize,
+ optionsFromAttributeKeys,
handleSelectColumns,
handleRemoveSelectedColumn,
+ handleSearchAttribute,
handleFormatChange,
handleMaxLinesChange,
+ handleFontSizeChange,
],
);
diff --git a/frontend/src/container/PanelWrapper/PanelWrapper.tsx b/frontend/src/container/PanelWrapper/PanelWrapper.tsx
index fdc20f7d30..ed105b3948 100644
--- a/frontend/src/container/PanelWrapper/PanelWrapper.tsx
+++ b/frontend/src/container/PanelWrapper/PanelWrapper.tsx
@@ -15,6 +15,7 @@ function PanelWrapper({
onDragSelect,
selectedGraph,
tableProcessedDataRef,
+ customTooltipElement,
}: PanelWrapperProps): JSX.Element {
const Component = PanelTypeVsPanelWrapper[
selectedGraph || widget.panelTypes
@@ -37,6 +38,7 @@ function PanelWrapper({
onDragSelect={onDragSelect}
selectedGraph={selectedGraph}
tableProcessedDataRef={tableProcessedDataRef}
+ customTooltipElement={customTooltipElement}
/>
);
}
diff --git a/frontend/src/container/PanelWrapper/UplotPanelWrapper.tsx b/frontend/src/container/PanelWrapper/UplotPanelWrapper.tsx
index dc404adabb..ff231b563a 100644
--- a/frontend/src/container/PanelWrapper/UplotPanelWrapper.tsx
+++ b/frontend/src/container/PanelWrapper/UplotPanelWrapper.tsx
@@ -30,6 +30,7 @@ function UplotPanelWrapper({
onClickHandler,
onDragSelect,
selectedGraph,
+ customTooltipElement,
}: PanelWrapperProps): JSX.Element {
const { toScrollWidgetId, setToScrollWidgetId } = useDashboard();
const isDarkMode = useIsDarkMode();
@@ -126,6 +127,7 @@ function UplotPanelWrapper({
stackBarChart: widget?.stackedBarChart,
hiddenGraph,
setHiddenGraph,
+ customTooltipElement,
}),
[
widget?.id,
@@ -147,6 +149,7 @@ function UplotPanelWrapper({
selectedGraph,
currentQuery,
hiddenGraph,
+ customTooltipElement,
],
);
diff --git a/frontend/src/container/PanelWrapper/panelWrapper.types.ts b/frontend/src/container/PanelWrapper/panelWrapper.types.ts
index 6fd993f377..7d5e3122e8 100644
--- a/frontend/src/container/PanelWrapper/panelWrapper.types.ts
+++ b/frontend/src/container/PanelWrapper/panelWrapper.types.ts
@@ -23,6 +23,7 @@ export type PanelWrapperProps = {
onDragSelect: (start: number, end: number) => void;
selectedGraph?: PANEL_TYPES;
tableProcessedDataRef?: React.MutableRefObject;
+ customTooltipElement?: HTMLDivElement;
};
export type TooltipData = {
diff --git a/frontend/src/container/PipelinePage/PipelineListsView/Preview/components/LogsList/index.tsx b/frontend/src/container/PipelinePage/PipelineListsView/Preview/components/LogsList/index.tsx
index f7d3af3a88..5bbe6de737 100644
--- a/frontend/src/container/PipelinePage/PipelineListsView/Preview/components/LogsList/index.tsx
+++ b/frontend/src/container/PipelinePage/PipelineListsView/Preview/components/LogsList/index.tsx
@@ -13,6 +13,7 @@ function LogsList({ logs }: LogsListProps): JSX.Element {
onSetActiveLog,
onClearActiveLog,
onAddToQuery,
+ onGroupByAttribute,
} = useActiveLog();
const makeLogDetailsHandler = (log: ILog) => (): void => onSetActiveLog(log);
@@ -42,6 +43,7 @@ function LogsList({ logs }: LogsListProps): JSX.Element {
onClose={onClearActiveLog}
onAddToQuery={onAddToQuery}
onClickActionItem={onAddToQuery}
+ onGroupByAttribute={onGroupByAttribute}
/>
);
diff --git a/frontend/src/container/QueryBuilder/components/ToolbarActions/RightToolbarActions.tsx b/frontend/src/container/QueryBuilder/components/ToolbarActions/RightToolbarActions.tsx
index aea205d569..f5106dffbe 100644
--- a/frontend/src/container/QueryBuilder/components/ToolbarActions/RightToolbarActions.tsx
+++ b/frontend/src/container/QueryBuilder/components/ToolbarActions/RightToolbarActions.tsx
@@ -3,18 +3,27 @@ import './ToolbarActions.styles.scss';
import { Button } from 'antd';
import { LogsExplorerShortcuts } from 'constants/shortcuts/logsExplorerShortcuts';
import { useKeyboardHotkeys } from 'hooks/hotkeys/useKeyboardHotkeys';
-import { Play } from 'lucide-react';
-import { useEffect } from 'react';
+import { Play, X } from 'lucide-react';
+import { MutableRefObject, useEffect } from 'react';
+import { useQueryClient } from 'react-query';
interface RightToolbarActionsProps {
onStageRunQuery: () => void;
+ isLoadingQueries?: boolean;
+ listQueryKeyRef?: MutableRefObject
@@ -85,16 +91,22 @@ function LogSelectedField({
fieldKey={fieldKey}
fieldValue={fieldValue}
onAddToQuery={onAddToQuery}
+ fontSize={fontSize}
>
-
+
{fieldKey}
-
- {': '}
- {fieldValue || "''"}
+
+ {': '}
+
+ {fieldValue || "''"}
+
);
@@ -107,6 +119,7 @@ type ListLogViewProps = {
onAddToQuery: AddToQueryHOCProps['onAddToQuery'];
activeLog?: ILog | null;
linesPerRow: number;
+ fontSize: FontSize;
};
function ListLogView({
@@ -116,6 +129,7 @@ function ListLogView({
onAddToQuery,
activeLog,
linesPerRow,
+ fontSize,
}: ListLogViewProps): JSX.Element {
const flattenLogData = useMemo(() => FlatLogData(logData), [logData]);
@@ -128,6 +142,7 @@ function ListLogView({
onAddToQuery: handleAddToQuery,
onSetActiveLog: handleSetActiveContextLog,
onClearActiveLog: handleClearActiveContextLog,
+ onGroupByAttribute,
} = useActiveLog();
const isDarkMode = useIsDarkMode();
@@ -185,6 +200,7 @@ function ListLogView({
onMouseEnter={handleMouseEnter}
onMouseLeave={handleMouseLeave}
onClick={handleDetailedView}
+ fontSize={fontSize}
>
-
+
`
margin-left: 0.5rem;
display: flex;
flex-direction: column;
gap: 6px;
+ ${({ fontSize }): string =>
+ fontSize === FontSize.SMALL
+ ? `gap: 2px;`
+ : fontSize === FontSize.MEDIUM
+ ? ` gap:4px;`
+ : `gap:6px;`}
`;
export const LogText = styled.div`
diff --git a/frontend/src/components/Logs/LogStateIndicator/LogStateIndicator.styles.scss b/frontend/src/components/Logs/LogStateIndicator/LogStateIndicator.styles.scss
index a00c7f6761..61870abc71 100644
--- a/frontend/src/components/Logs/LogStateIndicator/LogStateIndicator.styles.scss
+++ b/frontend/src/components/Logs/LogStateIndicator/LogStateIndicator.styles.scss
@@ -9,11 +9,24 @@
border-radius: 50px;
background-color: transparent;
+ &.small {
+ min-height: 16px;
+ }
+
+ &.medium {
+ min-height: 20px;
+ }
+
+ &.large {
+ min-height: 24px;
+ }
+
&.INFO {
background-color: var(--bg-slate-400);
}
- &.WARNING, &.WARN {
+ &.WARNING,
+ &.WARN {
background-color: var(--bg-amber-500);
}
diff --git a/frontend/src/components/Logs/LogStateIndicator/LogStateIndicator.test.tsx b/frontend/src/components/Logs/LogStateIndicator/LogStateIndicator.test.tsx
index d924c27426..06cc9d3ec4 100644
--- a/frontend/src/components/Logs/LogStateIndicator/LogStateIndicator.test.tsx
+++ b/frontend/src/components/Logs/LogStateIndicator/LogStateIndicator.test.tsx
@@ -1,10 +1,13 @@
import { render } from '@testing-library/react';
+import { FontSize } from 'container/OptionsMenu/types';
import LogStateIndicator from './LogStateIndicator';
describe('LogStateIndicator', () => {
it('renders correctly with default props', () => {
- const { container } = render((false);
@@ -143,7 +146,9 @@ function RawLogView({
const html = useMemo(
() => ({
__html: convert.toHtml(
- dompurify.sanitize(text, { FORBID_TAGS: [...FORBID_DOM_PURIFY_TAGS] }),
+ dompurify.sanitize(unescapeString(text), {
+ FORBID_TAGS: [...FORBID_DOM_PURIFY_TAGS],
+ }),
),
}),
[text],
@@ -160,6 +165,7 @@ function RawLogView({
$isActiveLog={isActiveLog}
onMouseEnter={handleMouseEnter}
onMouseLeave={handleMouseLeave}
+ fontSize={fontSize}
>
`
margin-bottom: 0;
font-family: 'SF Mono', monospace;
font-family: 'Geist Mono';
- font-size: 13px;
- font-weight: 400;
+ letter-spacing: -0.07px;
+ padding: 4px;
text-align: left;
color: ${({ $isDarkMode }): string =>
$isDarkMode ? Color.BG_VANILLA_400 : Color.BG_INK_400};
@@ -66,9 +76,15 @@ export const RawLogContent = styled.div`
line-clamp: ${linesPerRow};
-webkit-box-orient: vertical;`};
+ font-size: 13px;
+ font-weight: 400;
line-height: 24px;
- letter-spacing: -0.07px;
- padding: 4px;
+ ${({ fontSize }): string =>
+ fontSize === FontSize.SMALL
+ ? `font-size:11px; line-height:16px; padding:1px;`
+ : fontSize === FontSize.MEDIUM
+ ? `font-size:13px; line-height:20px; padding:1px;`
+ : `font-size:14px; line-height:24px; padding:2px;`}
cursor: ${({ $isActiveLog, $isReadOnly }): string =>
$isActiveLog || $isReadOnly ? 'initial' : 'pointer'};
diff --git a/frontend/src/components/Logs/RawLogView/types.ts b/frontend/src/components/Logs/RawLogView/types.ts
index a9c85c2ad6..ed73725dcc 100644
--- a/frontend/src/components/Logs/RawLogView/types.ts
+++ b/frontend/src/components/Logs/RawLogView/types.ts
@@ -1,3 +1,4 @@
+import { FontSize } from 'container/OptionsMenu/types';
import { IField } from 'types/api/logs/fields';
import { ILog } from 'types/api/logs/log';
@@ -7,11 +8,13 @@ export interface RawLogViewProps {
isTextOverflowEllipsisDisabled?: boolean;
data: ILog;
linesPerRow: number;
+ fontSize: FontSize;
selectedFields?: IField[];
}
export interface RawLogContentProps {
linesPerRow: number;
+ fontSize: FontSize;
$isReadOnly?: boolean;
$isActiveLog?: boolean;
$isDarkMode?: boolean;
diff --git a/frontend/src/components/Logs/TableView/styles.ts b/frontend/src/components/Logs/TableView/styles.ts
index 9213021971..a79db04a76 100644
--- a/frontend/src/components/Logs/TableView/styles.ts
+++ b/frontend/src/components/Logs/TableView/styles.ts
@@ -1,7 +1,10 @@
+/* eslint-disable no-nested-ternary */
+import { FontSize } from 'container/OptionsMenu/types';
import styled from 'styled-components';
interface TableBodyContentProps {
linesPerRow: number;
+ fontSize: FontSize;
isDarkMode?: boolean;
}
@@ -20,4 +23,10 @@ export const TableBodyContent = styled.div`
-webkit-line-clamp: ${(props): number => props.linesPerRow};
line-clamp: ${(props): number => props.linesPerRow};
-webkit-box-orient: vertical;
+ ${({ fontSize }): string =>
+ fontSize === FontSize.SMALL
+ ? `font-size:11px; line-height:16px;`
+ : fontSize === FontSize.MEDIUM
+ ? `font-size:13px; line-height:20px;`
+ : `font-size:14px; line-height:24px;`}
`;
diff --git a/frontend/src/components/Logs/TableView/types.ts b/frontend/src/components/Logs/TableView/types.ts
index 36a796ac0f..b2d3670dd8 100644
--- a/frontend/src/components/Logs/TableView/types.ts
+++ b/frontend/src/components/Logs/TableView/types.ts
@@ -1,4 +1,5 @@
import { ColumnsType, ColumnType } from 'antd/es/table';
+import { FontSize } from 'container/OptionsMenu/types';
import { IField } from 'types/api/logs/fields';
import { ILog } from 'types/api/logs/log';
@@ -10,6 +11,7 @@ export type LogsTableViewProps = {
logs: ILog[];
fields: IField[];
linesPerRow: number;
+ fontSize: FontSize;
onClickExpand?: (log: ILog) => void;
};
diff --git a/frontend/src/components/Logs/TableView/useTableView.styles.scss b/frontend/src/components/Logs/TableView/useTableView.styles.scss
index 3723ecc705..9592d0ae12 100644
--- a/frontend/src/components/Logs/TableView/useTableView.styles.scss
+++ b/frontend/src/components/Logs/TableView/useTableView.styles.scss
@@ -5,6 +5,21 @@
font-weight: 400;
line-height: 18px; /* 128.571% */
letter-spacing: -0.07px;
+
+ &.small {
+ font-size: 11px;
+ line-height: 16px;
+ }
+
+ &.medium {
+ font-size: 13px;
+ line-height: 20px;
+ }
+
+ &.large {
+ font-size: 14px;
+ line-height: 24px;
+ }
}
.table-timestamp {
@@ -25,3 +40,21 @@
color: var(--bg-slate-400);
}
}
+
+.paragraph {
+ padding: 0px !important;
+ &.small {
+ font-size: 11px !important;
+ line-height: 16px !important;
+ }
+
+ &.medium {
+ font-size: 13px !important;
+ line-height: 20px !important;
+ }
+
+ &.large {
+ font-size: 14px !important;
+ line-height: 24px !important;
+ }
+}
diff --git a/frontend/src/components/Logs/TableView/useTableView.tsx b/frontend/src/components/Logs/TableView/useTableView.tsx
index fd37132110..43b4ba2628 100644
--- a/frontend/src/components/Logs/TableView/useTableView.tsx
+++ b/frontend/src/components/Logs/TableView/useTableView.tsx
@@ -3,6 +3,8 @@ import './useTableView.styles.scss';
import Convert from 'ansi-to-html';
import { Typography } from 'antd';
import { ColumnsType } from 'antd/es/table';
+import cx from 'classnames';
+import { unescapeString } from 'container/LogDetailedView/utils';
import dayjs from 'dayjs';
import dompurify from 'dompurify';
import { useIsDarkMode } from 'hooks/useDarkMode';
@@ -31,6 +33,7 @@ export const useTableView = (props: UseTableViewProps): UseTableViewResult => {
logs,
fields,
linesPerRow,
+ fontSize,
appendTo = 'center',
activeContextLog,
activeLog,
@@ -57,7 +60,10 @@ export const useTableView = (props: UseTableViewProps): UseTableViewResult => {
: getDefaultCellStyle(isDarkMode),
},
children: (
-
+
{field}
),
@@ -87,8 +93,9 @@ export const useTableView = (props: UseTableViewProps): UseTableViewResult => {
isActive={
activeLog?.id === item.id || activeContextLog?.id === item.id
}
+ fontSize={fontSize}
/>
-
+
{date}
@@ -109,11 +116,12 @@ export const useTableView = (props: UseTableViewProps): UseTableViewResult => {
-
+
);
}
diff --git a/frontend/src/components/Logs/RawLogView/index.tsx b/frontend/src/components/Logs/RawLogView/index.tsx
index d1ae19fe99..2cda9c7247 100644
--- a/frontend/src/components/Logs/RawLogView/index.tsx
+++ b/frontend/src/components/Logs/RawLogView/index.tsx
@@ -4,6 +4,7 @@ import Convert from 'ansi-to-html';
import { DrawerProps } from 'antd';
import LogDetail from 'components/LogDetail';
import { VIEW_TYPES, VIEWS } from 'components/LogDetail/constants';
+import { unescapeString } from 'container/LogDetailedView/utils';
import LogsExplorerContext from 'container/LogsExplorerContext';
import dayjs from 'dayjs';
import dompurify from 'dompurify';
@@ -39,6 +40,7 @@ function RawLogView({
linesPerRow,
isTextOverflowEllipsisDisabled,
selectedFields = [],
+ fontSize,
}: RawLogViewProps): JSX.Element {
const { isHighlighted, isLogsExplorerPage, onLogCopy } = useCopyLogLink(
data.id,
@@ -54,6 +56,7 @@ function RawLogView({
onSetActiveLog,
onClearActiveLog,
onAddToQuery,
+ onGroupByAttribute,
} = useActiveLog();
const [hasActionButtons, setHasActionButtons] = useState
-
- >;
onClickHandler?: OnClickPluginOpts['onClick'];
onDragSelect: (start: number, end: number) => void;
+ customTooltipElement?: HTMLDivElement;
}
export interface GridCardGraphProps {
@@ -42,6 +43,7 @@ export interface GridCardGraphProps {
variables?: Dashboard['data']['variables'];
version?: string;
onDragSelect: (start: number, end: number) => void;
+ customTooltipElement?: HTMLDivElement;
}
export interface GetGraphVisibilityStateOnLegendClickProps {
diff --git a/frontend/src/container/GridCardLayout/GridCardLayout.tsx b/frontend/src/container/GridCardLayout/GridCardLayout.tsx
index 75fde3ce7a..a96599b127 100644
--- a/frontend/src/container/GridCardLayout/GridCardLayout.tsx
+++ b/frontend/src/container/GridCardLayout/GridCardLayout.tsx
@@ -194,7 +194,7 @@ function GraphLayout(props: GraphLayoutProps): JSX.Element {
urlQuery.set(QueryParams.startTime, startTimestamp.toString());
urlQuery.set(QueryParams.endTime, endTimestamp.toString());
const generatedUrl = `${pathname}?${urlQuery.toString()}`;
- history.replace(generatedUrl);
+ history.push(generatedUrl);
if (startTimestamp !== endTimestamp) {
dispatch(UpdateTimeInterval('custom', [startTimestamp, endTimestamp]));
diff --git a/frontend/src/container/ListOfDashboard/DashboardList.styles.scss b/frontend/src/container/ListOfDashboard/DashboardList.styles.scss
index 7fff109d2a..cf9ec283d2 100644
--- a/frontend/src/container/ListOfDashboard/DashboardList.styles.scss
+++ b/frontend/src/container/ListOfDashboard/DashboardList.styles.scss
@@ -590,6 +590,8 @@
}
.new-dashboard-menu {
+ width: 200px;
+
.create-dashboard-menu-item {
display: flex;
align-items: center;
@@ -1067,7 +1069,7 @@
color: var(--bg-ink-500);
}
.subtitle {
- color: var(--bg-vanilla-400);
+ color: var(--bg-ink-300);
}
.ant-table-row {
@@ -1087,6 +1089,10 @@
.dashboard-title {
color: var(--bg-slate-300);
+
+ .title {
+ color: var(--bg-ink-500);
+ }
}
.title-with-action {
diff --git a/frontend/src/container/ListOfDashboard/DashboardsList.tsx b/frontend/src/container/ListOfDashboard/DashboardsList.tsx
index 8de34fdaf1..421c7e31c4 100644
--- a/frontend/src/container/ListOfDashboard/DashboardsList.tsx
+++ b/frontend/src/container/ListOfDashboard/DashboardsList.tsx
@@ -45,6 +45,8 @@ import {
Ellipsis,
EllipsisVertical,
Expand,
+ ExternalLink,
+ Github,
HdmiPort,
LayoutGrid,
Link2,
@@ -53,6 +55,8 @@ import {
RotateCw,
Search,
} from 'lucide-react';
+// #TODO: lucide will be removing brand icons like Github in future, in that case we can use simple icons
+// see more: https://github.com/lucide-icons/lucide/issues/94
import { handleContactSupport } from 'pages/Integrations/utils';
import { useDashboard } from 'providers/Dashboard/Dashboard';
import {
@@ -600,6 +604,28 @@ function DashboardsList(): JSX.Element {
),
key: '1',
},
+ {
+ label: (
+
+
+
+
+ ),
+ key: '2',
+ },
];
if (createNewDashboard) {
diff --git a/frontend/src/container/ListOfDashboard/ImportJSON/index.tsx b/frontend/src/container/ListOfDashboard/ImportJSON/index.tsx
index 9bf1db2051..62767e6799 100644
--- a/frontend/src/container/ListOfDashboard/ImportJSON/index.tsx
+++ b/frontend/src/container/ListOfDashboard/ImportJSON/index.tsx
@@ -4,7 +4,15 @@ import { red } from '@ant-design/colors';
import { ExclamationCircleTwoTone } from '@ant-design/icons';
import MEditor, { Monaco } from '@monaco-editor/react';
import { Color } from '@signozhq/design-tokens';
-import { Button, Modal, Space, Typography, Upload, UploadProps } from 'antd';
+import {
+ Button,
+ Flex,
+ Modal,
+ Space,
+ Typography,
+ Upload,
+ UploadProps,
+} from 'antd';
import logEvent from 'api/common/logEvent';
import createDashboard from 'api/dashboard/create';
import ROUTES from 'constants/routes';
@@ -13,7 +21,9 @@ import { MESSAGE } from 'hooks/useFeatureFlag';
import { useNotifications } from 'hooks/useNotifications';
import { getUpdatedLayout } from 'lib/dashboard/getUpdatedLayout';
import history from 'lib/history';
-import { MonitorDot, MoveRight, X } from 'lucide-react';
+import { ExternalLink, Github, MonitorDot, MoveRight, X } from 'lucide-react';
+// #TODO: Lucide will be removing brand icons like GitHub in the future. In that case, we can use Simple Icons. https://simpleicons.org/
+// See more: https://github.com/lucide-icons/lucide/issues/94
import { useState } from 'react';
import { useTranslation } from 'react-i18next';
import { generatePath } from 'react-router-dom';
@@ -174,27 +184,43 @@ function ImportJSON({
)}
)}
+ {(selectedPanelType === PANEL_TYPES.TIME_SERIES ||
+ selectedPanelType === PANEL_TYPES.TABLE) && (
+ {title}
-
-
- {items.map(
- (item: any): JSX.Element => (
-
-
- {selectedItem && (
+ ) : (
<>
- <>
-
- handleMenuItemClick(item.key)}
- >
-
- ),
- )}
+ {isFontSizeOptionsOpen ? (
+
- {item.label}
-
- {selectedItem === item.key &&
-
+
+
+
-
+
+
+
+
-
-
+ max lines per row
-
-
-
-
+
+
+ Font Size
+
+
+ ();
@@ -215,6 +216,7 @@ function GridCardGraph({
setRequestData={setRequestData}
onClickHandler={onClickHandler}
onDragSelect={onDragSelect}
+ customTooltipElement={customTooltipElement}
/>
)}
diff --git a/frontend/src/container/GridCardLayout/GridCard/types.ts b/frontend/src/container/GridCardLayout/GridCard/types.ts
index 1235a26440..d0edede5a1 100644
--- a/frontend/src/container/GridCardLayout/GridCard/types.ts
+++ b/frontend/src/container/GridCardLayout/GridCard/types.ts
@@ -31,6 +31,7 @@ export interface WidgetGraphComponentProps {
setRequestData?: Dispatch {title}
-
- {!addNewColumn && }
+
)}
diff --git a/frontend/src/container/GridCardLayout/GridCard/index.tsx b/frontend/src/container/GridCardLayout/GridCard/index.tsx
index 8e34e32879..d7d2e729cb 100644
--- a/frontend/src/container/GridCardLayout/GridCard/index.tsx
+++ b/frontend/src/container/GridCardLayout/GridCard/index.tsx
@@ -33,6 +33,7 @@ function GridCardGraph({
version,
onClickHandler,
onDragSelect,
+ customTooltipElement,
}: GridCardGraphProps): JSX.Element {
const dispatch = useDispatch();
const [errorMessage, setErrorMessage] = useState
+ {items.map(
+ (item: any): JSX.Element => (
+ = {
@@ -71,6 +71,7 @@ export const alphabet: string[] = alpha.map((str) => String.fromCharCode(str));
export enum QueryBuilderKeys {
GET_AGGREGATE_ATTRIBUTE = 'GET_AGGREGATE_ATTRIBUTE',
GET_AGGREGATE_KEYS = 'GET_AGGREGATE_KEYS',
+ GET_ATTRIBUTE_SUGGESTIONS = 'GET_ATTRIBUTE_SUGGESTIONS',
}
export const mapOfOperators = {
diff --git a/frontend/src/constants/reactQueryKeys.ts b/frontend/src/constants/reactQueryKeys.ts
index 63fc205d81..52ae235ef6 100644
--- a/frontend/src/constants/reactQueryKeys.ts
+++ b/frontend/src/constants/reactQueryKeys.ts
@@ -8,4 +8,5 @@ export const REACT_QUERY_KEY = {
GET_FEATURES_FLAGS: 'GET_FEATURES_FLAGS',
DELETE_DASHBOARD: 'DELETE_DASHBOARD',
LOGS_PIPELINE_PREVIEW: 'LOGS_PIPELINE_PREVIEW',
+ GET_CONSUMER_LAG_DETAILS: 'GET_CONSUMER_LAG_DETAILS',
};
diff --git a/frontend/src/constants/routes.ts b/frontend/src/constants/routes.ts
index ef73184a86..8f76cd0386 100644
--- a/frontend/src/constants/routes.ts
+++ b/frontend/src/constants/routes.ts
@@ -54,6 +54,8 @@ const ROUTES = {
WORKSPACE_LOCKED: '/workspace-locked',
SHORTCUTS: '/shortcuts',
INTEGRATIONS: '/integrations',
+ MESSAGING_QUEUES: '/messaging-queues',
+ MESSAGING_QUEUES_DETAIL: '/messaging-queues/detail',
} as const;
export default ROUTES;
diff --git a/frontend/src/constants/shortcuts/globalShortcuts.ts b/frontend/src/constants/shortcuts/globalShortcuts.ts
index 81420fc830..4ab7752fac 100644
--- a/frontend/src/constants/shortcuts/globalShortcuts.ts
+++ b/frontend/src/constants/shortcuts/globalShortcuts.ts
@@ -9,6 +9,7 @@ export const GlobalShortcuts = {
NavigateToDashboards: 'd+shift',
NavigateToAlerts: 'a+shift',
NavigateToExceptions: 'e+shift',
+ NavigateToMessagingQueues: 'm+shift',
};
export const GlobalShortcutsName = {
@@ -19,6 +20,7 @@ export const GlobalShortcutsName = {
NavigateToDashboards: 'shift+d',
NavigateToAlerts: 'shift+a',
NavigateToExceptions: 'shift+e',
+ NavigateToMessagingQueues: 'shift+m',
};
export const GlobalShortcutsDescription = {
@@ -29,4 +31,5 @@ export const GlobalShortcutsDescription = {
NavigateToDashboards: 'Navigate to dashboards page',
NavigateToAlerts: 'Navigate to alerts page',
NavigateToExceptions: 'Navigate to Exceptions page',
+ NavigateToMessagingQueues: 'Navigate to Messaging Queues page',
};
diff --git a/frontend/src/constants/shortcuts/logsExplorerShortcuts.ts b/frontend/src/constants/shortcuts/logsExplorerShortcuts.ts
index 33c2b4061f..68331a4c2d 100644
--- a/frontend/src/constants/shortcuts/logsExplorerShortcuts.ts
+++ b/frontend/src/constants/shortcuts/logsExplorerShortcuts.ts
@@ -4,6 +4,7 @@ const userOS = getUserOperatingSystem();
export const LogsExplorerShortcuts = {
StageAndRunQuery: 'enter+meta',
FocusTheSearchBar: 's',
+ ShowAllFilters: '/+meta',
};
export const LogsExplorerShortcutsName = {
@@ -11,9 +12,11 @@ export const LogsExplorerShortcutsName = {
userOS === UserOperatingSystem.MACOS ? 'cmd' : 'ctrl'
}+enter`,
FocusTheSearchBar: 's',
+ ShowAllFilters: `${userOS === UserOperatingSystem.MACOS ? 'cmd' : 'ctrl'}+/`,
};
export const LogsExplorerShortcutsDescription = {
StageAndRunQuery: 'Stage and Run the current query',
FocusTheSearchBar: 'Shift the focus to the last query filter bar',
+ ShowAllFilters: 'Toggle all filters in the filters dropdown',
};
diff --git a/frontend/src/container/AppLayout/index.tsx b/frontend/src/container/AppLayout/index.tsx
index 0f267976d2..e821e67104 100644
--- a/frontend/src/container/AppLayout/index.tsx
+++ b/frontend/src/container/AppLayout/index.tsx
@@ -47,6 +47,7 @@ import {
UPDATE_LATEST_VERSION_ERROR,
} from 'types/actions/app';
import AppReducer from 'types/reducer/app';
+import { isCloudUser } from 'utils/app';
import { getFormattedDate, getRemainingDays } from 'utils/timeUtils';
import { ChildrenContainer, Layout, LayoutContent } from './styles';
@@ -71,7 +72,14 @@ function AppLayout(props: AppLayoutProps): JSX.Element {
const isPremiumChatSupportEnabled =
useFeatureFlags(FeatureKeys.PREMIUM_SUPPORT)?.active || false;
+ const isChatSupportEnabled =
+ useFeatureFlags(FeatureKeys.CHAT_SUPPORT)?.active || false;
+
+ const isCloudUserVal = isCloudUser();
+
const showAddCreditCardModal =
+ isChatSupportEnabled &&
+ isCloudUserVal &&
!isPremiumChatSupportEnabled &&
!licenseData?.payload?.trialConvertedToSubscription;
@@ -241,6 +249,9 @@ function AppLayout(props: AppLayoutProps): JSX.Element {
const isTracesView = (): boolean =>
routeKey === 'TRACES_EXPLORER' || routeKey === 'TRACES_SAVE_VIEWS';
+ const isMessagingQueues = (): boolean =>
+ routeKey === 'MESSAGING_QUEUES' || routeKey === 'MESSAGING_QUEUES_DETAIL';
+
const isDashboardListView = (): boolean => routeKey === 'ALL_DASHBOARD';
const isDashboardView = (): boolean => {
/**
@@ -329,7 +340,8 @@ function AppLayout(props: AppLayoutProps): JSX.Element {
isTracesView() ||
isDashboardView() ||
isDashboardWidgetView() ||
- isDashboardListView()
+ isDashboardListView() ||
+ isMessagingQueues()
? 0
: '0 1rem',
}}
diff --git a/frontend/src/container/ExplorerOptions/ExplorerOptions.tsx b/frontend/src/container/ExplorerOptions/ExplorerOptions.tsx
index 138694058e..44378e602b 100644
--- a/frontend/src/container/ExplorerOptions/ExplorerOptions.tsx
+++ b/frontend/src/container/ExplorerOptions/ExplorerOptions.tsx
@@ -33,6 +33,7 @@ import useErrorNotification from 'hooks/useErrorNotification';
import { useHandleExplorerTabChange } from 'hooks/useHandleExplorerTabChange';
import { useNotifications } from 'hooks/useNotifications';
import { mapCompositeQueryFromQuery } from 'lib/newQueryBuilder/queryBuilderMappers/mapCompositeQueryFromQuery';
+import { cloneDeep } from 'lodash-es';
import {
Check,
ConciergeBell,
@@ -56,7 +57,7 @@ import { useHistory } from 'react-router-dom';
import { AppState } from 'store/reducers';
import { Dashboard } from 'types/api/dashboard/getAll';
import { Query } from 'types/api/queryBuilder/queryBuilderData';
-import { DataSource } from 'types/common/queryBuilder';
+import { DataSource, StringOperators } from 'types/common/queryBuilder';
import AppReducer from 'types/reducer/app';
import { USER_ROLES } from 'types/roles';
@@ -120,6 +121,21 @@ function ExplorerOptions({
const { role } = useSelector((state) => state.app);
+ const handleConditionalQueryModification = useCallback((): string => {
+ if (
+ query?.builder?.queryData?.[0]?.aggregateOperator !== StringOperators.NOOP
+ ) {
+ return JSON.stringify(query);
+ }
+
+ // Modify aggregateOperator to count, as noop is not supported in alerts
+ const modifiedQuery = cloneDeep(query);
+
+ modifiedQuery.builder.queryData[0].aggregateOperator = StringOperators.COUNT;
+
+ return JSON.stringify(modifiedQuery);
+ }, [query]);
+
const onCreateAlertsHandler = useCallback(() => {
if (sourcepage === DataSource.TRACES) {
logEvent('Traces Explorer: Create alert', {
@@ -130,13 +146,16 @@ function ExplorerOptions({
panelType,
});
}
+
+ const stringifiedQuery = handleConditionalQueryModification();
+
history.push(
`${ROUTES.ALERTS_NEW}?${QueryParams.compositeQuery}=${encodeURIComponent(
- JSON.stringify(query),
+ stringifiedQuery,
)}`,
);
// eslint-disable-next-line react-hooks/exhaustive-deps
- }, [history, query]);
+ }, [handleConditionalQueryModification, history]);
const onCancel = (value: boolean) => (): void => {
onModalToggle(value);
@@ -482,6 +501,7 @@ function ExplorerOptions({
shape="circle"
onClick={hideToolbar}
icon={
@@ -511,6 +531,7 @@ function ExplorerOptions({
icon={ handleMenuItemClick(item.key)}
+ >
+
diff --git a/frontend/src/constants/env.ts b/frontend/src/constants/env.ts
index 2c5230dfcc..cf75739eff 100644
--- a/frontend/src/constants/env.ts
+++ b/frontend/src/constants/env.ts
@@ -3,4 +3,5 @@ export const ENVIRONMENT = {
process?.env?.FRONTEND_API_ENDPOINT ||
process?.env?.GITPOD_WORKSPACE_URL?.replace('://', '://8080-') ||
'',
+ wsURL: process?.env?.WEBSOCKET_API_ENDPOINT || '',
};
diff --git a/frontend/src/constants/query.ts b/frontend/src/constants/query.ts
index 9b731ca089..3ee0a39634 100644
--- a/frontend/src/constants/query.ts
+++ b/frontend/src/constants/query.ts
@@ -32,4 +32,8 @@ export enum QueryParams {
relativeTime = 'relativeTime',
alertType = 'alertType',
ruleId = 'ruleId',
+ consumerGrp = 'consumerGrp',
+ topic = 'topic',
+ partition = 'partition',
+ selectedTimelineQuery = 'selectedTimelineQuery',
}
diff --git a/frontend/src/constants/queryBuilder.ts b/frontend/src/constants/queryBuilder.ts
index 7b7b464b3e..5fe7112796 100644
--- a/frontend/src/constants/queryBuilder.ts
+++ b/frontend/src/constants/queryBuilder.ts
@@ -52,7 +52,7 @@ export const selectValueDivider = '__';
export const baseAutoCompleteIdKeysOrder: (keyof Omit<
BaseAutocompleteData,
- 'id' | 'isJSON'
+ 'id' | 'isJSON' | 'isIndexed'
>)[] = ['key', 'dataType', 'type', 'isColumn'];
export const autocompleteType: Record
+ {item.label}
- {addNewColumn && (
-
+
+ {selectedItem && (
+ <>
+ <>
+
+
-
- )}
-
-
- {' '}
- columns
-
-
-
-
- {!addNewColumn && (
-
- columns
-
- )}
-
-
- {addColumn?.value?.map(({ key, id }) => (
-
-
- {addColumn?.isFetching && (
-
- addColumn.onRemove(id as string)}
- />
- ))}
-
-
- {key}
-
+ {selectedItem === item.key &&
- Loading ...
- )}
-
- {addNewColumn &&
- addColumn &&
- addColumn.value.length > 0 &&
- addColumn.options &&
- addColumn?.options?.length > 0 && (
-
- {addColumn?.options?.map(({ label, value }) => (
-
+ ),
)}
{
- eve.stopPropagation();
-
- if (addColumn && addColumn?.onSelect) {
- addColumn?.onSelect(value, { label, disabled: false });
- }
- }}
- >
-
- ))}
-
-
- {label}
-
-
-
+
+
+
+ max lines per row
+
+
+
+
+ {!addNewColumn && }
+
+ {addNewColumn && (
+
+
+ )}
)}
+
+ )}
+
+
+ {' '}
+ columns
+
+
+
+
+ {!addNewColumn && (
+
+
+ columns
+
+ )}
+
+
+ {addColumn?.value?.map(({ key, id }) => (
+
+
+ {addColumn?.isFetching && (
+
+ addColumn.onRemove(id as string)}
+ />
+
+ ))}
+
+
+ {key}
+
+
+ Loading ...
+ )}
+
+ {addNewColumn &&
+ addColumn &&
+ addColumn.value.length > 0 &&
+ addColumn.options &&
+ addColumn?.options?.length > 0 && (
+
+ {addColumn?.options?.map(({ label, value }) => (
+
+ )}
+ {
+ eve.stopPropagation();
+
+ if (addColumn && addColumn?.onSelect) {
+ addColumn?.onSelect(value, { label, disabled: false });
+ }
+ }}
+ >
+
+ ))}
+
+
+ {label}
+
+
+
+
+
- false}
- action="none"
- data={jsonData}
- >
- }
- onClick={(): void => {
- logEvent('Dashboard List: Upload JSON file clicked', {});
- }}
+
+ false}
+ action="none"
+ data={jsonData}
>
- {' '}
- {t('upload_json_file')}
-
-
+ }
+ onClick={(): void => {
+ logEvent('Dashboard List: Upload JSON file clicked', {});
+ }}
+ >
+ {' '}
+ {t('upload_json_file')}
+
+
+
+ }
+ >
+ {t('view_template')}
+ (1);
const [logs, setLogs] = useState([log]);
+ const { initialDataSource, stagedQuery } = useQueryBuilder();
+
+ const listQuery = useMemo(() => {
+ if (!stagedQuery || stagedQuery.builder.queryData.length < 1) return null;
+
+ return stagedQuery.builder.queryData.find((item) => !item.disabled) || null;
+ }, [stagedQuery]);
+
+ const { options } = useOptionsMenu({
+ storageKey: LOCALSTORAGE.LOGS_LIST_OPTIONS,
+ dataSource: initialDataSource || DataSource.METRICS,
+ aggregateOperator: listQuery?.aggregateOperator || StringOperators.NOOP,
+ });
+
const {
logs: previousLogs,
isFetching: isPreviousLogsFetching,
@@ -34,6 +53,7 @@ function ContextLogRenderer({
order: ORDERBY_FILTERS.ASC,
page: prevLogPage,
setPage: setPrevLogPage,
+ fontSize: options.fontSize,
});
const {
@@ -48,6 +68,7 @@ function ContextLogRenderer({
order: ORDERBY_FILTERS.DESC,
page: afterLogPage,
setPage: setAfterLogPage,
+ fontSize: options.fontSize,
});
useEffect(() => {
@@ -65,6 +86,19 @@ function ContextLogRenderer({
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [filters]);
+ const lengthMultipier = useMemo(() => {
+ switch (options.fontSize) {
+ case FontSize.SMALL:
+ return 24;
+ case FontSize.MEDIUM:
+ return 28;
+ case FontSize.LARGE:
+ return 32;
+ default:
+ return 32;
+ }
+ }, [options.fontSize]);
+
const getItemContent = useCallback(
(_: number, logTorender: ILog): JSX.Element => (
>;
+ fontSize?: FontSize;
}): {
logs: ILog[];
handleShowNextLines: () => void;
@@ -54,9 +58,14 @@ export const useContextLogData = ({
const logsMorePageSize = useMemo(() => (page - 1) * LOGS_MORE_PAGE_SIZE, [
page,
]);
+
+ const initialPageSize =
+ fontSize && fontSize === FontSize.SMALL
+ ? INITIAL_PAGE_SIZE_SMALL_FONT
+ : INITIAL_PAGE_SIZE;
const pageSize = useMemo(
- () => (page <= 1 ? INITIAL_PAGE_SIZE : logsMorePageSize + INITIAL_PAGE_SIZE),
- [page, logsMorePageSize],
+ () => (page <= 1 ? initialPageSize : logsMorePageSize + initialPageSize),
+ [page, initialPageSize, logsMorePageSize],
);
const isDisabledFetch = useMemo(() => logs.length < pageSize, [
logs.length,
@@ -77,8 +86,16 @@ export const useContextLogData = ({
log: lastLog,
orderByTimestamp,
page,
+ pageSize: initialPageSize,
}),
- [currentStagedQueryData, query, lastLog, orderByTimestamp, page],
+ [
+ currentStagedQueryData,
+ query,
+ lastLog,
+ orderByTimestamp,
+ page,
+ initialPageSize,
+ ],
);
const [requestData, setRequestData] = useState(
diff --git a/frontend/src/container/LogDetailedView/FieldRenderer.styles.scss b/frontend/src/container/LogDetailedView/FieldRenderer.styles.scss
index 7e43e1caf3..96d72cad81 100644
--- a/frontend/src/container/LogDetailedView/FieldRenderer.styles.scss
+++ b/frontend/src/container/LogDetailedView/FieldRenderer.styles.scss
@@ -18,6 +18,7 @@
.tags {
display: flex;
- gap: 8;
+ flex-wrap: wrap;
+ gap: 8px;
}
}
diff --git a/frontend/src/container/LogDetailedView/LogContext.tsx b/frontend/src/container/LogDetailedView/LogContext.tsx
index 90d4a6e5bb..6997c65171 100644
--- a/frontend/src/container/LogDetailedView/LogContext.tsx
+++ b/frontend/src/container/LogDetailedView/LogContext.tsx
@@ -2,6 +2,7 @@ import './LogContext.styles.scss';
import RawLogView from 'components/Logs/RawLogView';
import LogsContextList from 'container/LogsContextList';
+import { FontSize } from 'container/OptionsMenu/types';
import { ORDERBY_FILTERS } from 'container/QueryBuilder/filters/OrderByFilter/config';
import { ILog } from 'types/api/logs/log';
import { Query, TagFilter } from 'types/api/queryBuilder/queryBuilderData';
@@ -37,6 +38,7 @@ function LogContext({
isTextOverflowEllipsisDisabled={false}
data={log}
linesPerRow={1}
+ fontSize={FontSize.SMALL}
/>
Promise;
}
type Props = OverviewProps &
@@ -39,6 +46,7 @@ function Overview({
onClickActionItem,
isListViewPanel = false,
selectedOptions,
+ onGroupByAttribute,
listViewPanelSelectedFields,
}: Props): JSX.Element {
const [isWrapWord, setIsWrapWord] = useState(true);
@@ -117,7 +125,7 @@ function Overview({
children: (
{}}
@@ -204,6 +212,7 @@ function Overview({
logData={logData}
onAddToQuery={onAddToQuery}
fieldSearchInput={fieldSearchInput}
+ onGroupByAttribute={onGroupByAttribute}
onClickActionItem={onClickActionItem}
isListViewPanel={isListViewPanel}
selectedOptions={selectedOptions}
@@ -222,6 +231,7 @@ function Overview({
Overview.defaultProps = {
isListViewPanel: false,
listViewPanelSelectedFields: null,
+ onGroupByAttribute: undefined,
};
export default Overview;
diff --git a/frontend/src/container/LogDetailedView/TableView.styles.scss b/frontend/src/container/LogDetailedView/TableView.styles.scss
index 2f092dc04d..322a5cd638 100644
--- a/frontend/src/container/LogDetailedView/TableView.styles.scss
+++ b/frontend/src/container/LogDetailedView/TableView.styles.scss
@@ -11,7 +11,7 @@
top: 50%;
right: 16px;
transform: translateY(-50%);
- gap: 8px;
+ gap: 4px;
}
}
}
@@ -76,8 +76,10 @@
box-shadow: none;
border-radius: 2px;
background: var(--bg-slate-400);
-
- height: 24px;
+ padding: 2px 3px;
+ gap: 3px;
+ height: 18px;
+ width: 20px;
}
}
}
diff --git a/frontend/src/container/LogDetailedView/TableView.tsx b/frontend/src/container/LogDetailedView/TableView.tsx
index 58b3779eda..591109ac3c 100644
--- a/frontend/src/container/LogDetailedView/TableView.tsx
+++ b/frontend/src/container/LogDetailedView/TableView.tsx
@@ -4,23 +4,21 @@ import './TableView.styles.scss';
import { LinkOutlined } from '@ant-design/icons';
import { Color } from '@signozhq/design-tokens';
-import { Button, Space, Spin, Tooltip, Tree, Typography } from 'antd';
+import { Button, Space, Tooltip, Typography } from 'antd';
import { ColumnsType } from 'antd/es/table';
import cx from 'classnames';
import AddToQueryHOC, {
AddToQueryHOCProps,
} from 'components/Logs/AddToQueryHOC';
-import CopyClipboardHOC from 'components/Logs/CopyClipboardHOC';
import { ResizeTable } from 'components/ResizeTable';
import { OPERATORS } from 'constants/queryBuilder';
import ROUTES from 'constants/routes';
-import { OptionsQuery } from 'container/OptionsMenu/types';
+import { FontSize, OptionsQuery } from 'container/OptionsMenu/types';
import { useIsDarkMode } from 'hooks/useDarkMode';
import history from 'lib/history';
import { fieldSearchFilter } from 'lib/logs/fieldSearch';
import { removeJSONStringifyQuotes } from 'lib/removeJSONStringifyQuotes';
-import { isEmpty } from 'lodash-es';
-import { ArrowDownToDot, ArrowUpFromDot, Pin } from 'lucide-react';
+import { Pin } from 'lucide-react';
import { useEffect, useMemo, useState } from 'react';
import { useDispatch } from 'react-redux';
import { generatePath } from 'react-router-dom';
@@ -29,17 +27,12 @@ import AppActions from 'types/actions';
import { SET_DETAILED_LOG_DATA } from 'types/actions/logs';
import { IField } from 'types/api/logs/fields';
import { ILog } from 'types/api/logs/log';
+import { DataTypes } from 'types/api/queryBuilder/queryAutocompleteResponse';
import { ActionItemProps } from './ActionItem';
import FieldRenderer from './FieldRenderer';
-import {
- filterKeyForField,
- findKeyPath,
- flattenObject,
- jsonToDataNodes,
- recursiveParseJSON,
- removeEscapeCharacters,
-} from './utils';
+import { TableViewActions } from './TableView/TableViewActions';
+import { filterKeyForField, findKeyPath, flattenObject } from './utils';
// Fields which should be restricted from adding it to query
const RESTRICTED_FIELDS = ['timestamp'];
@@ -50,6 +43,11 @@ interface TableViewProps {
selectedOptions: OptionsQuery;
isListViewPanel?: boolean;
listViewPanelSelectedFields?: IField[] | null;
+ onGroupByAttribute?: (
+ fieldKey: string,
+ isJSON?: boolean,
+ dataType?: DataTypes,
+ ) => Promise;
}
type Props = TableViewProps &
@@ -63,6 +61,7 @@ function TableView({
onClickActionItem,
isListViewPanel = false,
selectedOptions,
+ onGroupByAttribute,
listViewPanelSelectedFields,
}: Props): JSX.Element | null {
const dispatch = useDispatch>();
@@ -256,6 +255,7 @@ function TableView({
fieldKey={fieldFilterKey}
fieldValue={flattenLogData[field]}
onAddToQuery={onAddToQuery}
+ fontSize={FontSize.SMALL}
>
{renderedField}
@@ -270,75 +270,17 @@ function TableView({
width: 70,
ellipsis: false,
className: 'value-field-container attribute-value',
- render: (fieldData: Record, record): JSX.Element => {
- const textToCopy = fieldData.value.slice(1, -1);
-
- if (record.field === 'body') {
- const parsedBody = recursiveParseJSON(fieldData.value);
- if (!isEmpty(parsedBody)) {
- return (
- , record): JSX.Element => (
+ ;
+ record: DataType;
+ isListViewPanel: boolean;
+ isfilterInLoading: boolean;
+ isfilterOutLoading: boolean;
+ onGroupByAttribute?: (
+ fieldKey: string,
+ isJSON?: boolean,
+ dataType?: DataTypes,
+ ) => Promise;
+ onClickHandler: (
+ operator: string,
+ fieldKey: string,
+ fieldValue: string,
+ ) => () => void;
+}
+
+const convert = new Convert();
+
+export function TableViewActions(
+ props: ITableViewActionsProps,
+): React.ReactElement {
+ const {
+ fieldData,
+ record,
+ isListViewPanel,
+ isfilterInLoading,
+ isfilterOutLoading,
+ onClickHandler,
+ onGroupByAttribute,
+ } = props;
+
+ const { pathname } = useLocation();
+
+ // there is no option for where clause in old logs explorer and live logs page
+ const isOldLogsExplorerOrLiveLogsPage = useMemo(
+ () => pathname === ROUTES.OLD_LOGS_EXPLORER || pathname === ROUTES.LIVE_LOGS,
+ [pathname],
+ );
+
+ const [isOpen, setIsOpen] = useState(false);
+ const textToCopy = fieldData.value;
+
+ if (record.field === 'body') {
+ const parsedBody = recursiveParseJSON(fieldData.value);
+ if (!isEmpty(parsedBody)) {
+ return (
+
+ );
+}
+
+TableViewActions.defaultProps = {
+ onGroupByAttribute: undefined,
+};
diff --git a/frontend/src/container/LogDetailedView/utils.tsx b/frontend/src/container/LogDetailedView/utils.tsx
index 8418e13893..766bb8b5bf 100644
--- a/frontend/src/container/LogDetailedView/utils.tsx
+++ b/frontend/src/container/LogDetailedView/utils.tsx
@@ -250,19 +250,37 @@ export const getDataTypes = (value: unknown): DataTypes => {
return determineType(value);
};
+// now we do not want to render colors everywhere like in tooltip and monaco editor hence we remove such codes to make
+// the log line readable
export const removeEscapeCharacters = (str: string): string =>
- str.replace(/\\([ntfr'"\\])/g, (_: string, char: string) => {
- const escapeMap: Record = {
- n: '\n',
- t: '\t',
- f: '\f',
- r: '\r',
- "'": "'",
- '"': '"',
- '\\': '\\',
- };
- return escapeMap[char as keyof typeof escapeMap];
- });
+ str
+ .replace(/\\x1[bB][[0-9;]*m/g, '')
+ .replace(/\\u001[bB][[0-9;]*m/g, '')
+ .replace(/\\x[0-9A-Fa-f]{2}/g, '')
+ .replace(/\\u[0-9A-Fa-f]{4}/g, '')
+ .replace(/\\[btnfrv0'"\\]/g, '');
+
+// we need to remove the escape from the escaped characters as some recievers like file log escape the unicode escape characters.
+// example: Log [\u001B[32;1mThis is bright green\u001B[0m] is being sent as [\\u001B[32;1mThis is bright green\\u001B[0m]
+//
+// so we need to remove this escapes to render the color properly
+export const unescapeString = (str: string): string =>
+ str
+ .replace(/\\n/g, '\n') // Replaces escaped newlines
+ .replace(/\\r/g, '\r') // Replaces escaped carriage returns
+ .replace(/\\t/g, '\t') // Replaces escaped tabs
+ .replace(/\\b/g, '\b') // Replaces escaped backspaces
+ .replace(/\\f/g, '\f') // Replaces escaped form feeds
+ .replace(/\\v/g, '\v') // Replaces escaped vertical tabs
+ .replace(/\\'/g, "'") // Replaces escaped single quotes
+ .replace(/\\"/g, '"') // Replaces escaped double quotes
+ .replace(/\\\\/g, '\\') // Replaces escaped backslashes
+ .replace(/\\x([0-9A-Fa-f]{2})/g, (_, hex) =>
+ String.fromCharCode(parseInt(hex, 16)),
+ ) // Replaces hexadecimal escape sequences
+ .replace(/\\u([0-9A-Fa-f]{4})/g, (_, hex) =>
+ String.fromCharCode(parseInt(hex, 16)),
+ ); // Replaces Unicode escape sequences
export function removeExtraSpaces(input: string): string {
return input.replace(/\s+/g, ' ').trim();
diff --git a/frontend/src/container/LogsContextList/configs.ts b/frontend/src/container/LogsContextList/configs.ts
index baa3b39420..9b70dfc5be 100644
--- a/frontend/src/container/LogsContextList/configs.ts
+++ b/frontend/src/container/LogsContextList/configs.ts
@@ -1,6 +1,7 @@
import { OrderByPayload } from 'types/api/queryBuilder/queryBuilderData';
export const INITIAL_PAGE_SIZE = 10;
+export const INITIAL_PAGE_SIZE_SMALL_FONT = 12;
export const LOGS_MORE_PAGE_SIZE = 10;
export const getOrderByTimestamp = (order: string): OrderByPayload => ({
diff --git a/frontend/src/container/LogsContextList/index.tsx b/frontend/src/container/LogsContextList/index.tsx
index 270291a33e..d215386c03 100644
--- a/frontend/src/container/LogsContextList/index.tsx
+++ b/frontend/src/container/LogsContextList/index.tsx
@@ -5,6 +5,7 @@ import OverlayScrollbar from 'components/OverlayScrollbar/OverlayScrollbar';
import Spinner from 'components/Spinner';
import { DEFAULT_ENTITY_VERSION } from 'constants/app';
import { PANEL_TYPES } from 'constants/queryBuilder';
+import { FontSize } from 'container/OptionsMenu/types';
import { ORDERBY_FILTERS } from 'container/QueryBuilder/filters/OrderByFilter/config';
import { useGetExplorerQueryRange } from 'hooks/queryBuilder/useGetExplorerQueryRange';
import { useIsDarkMode } from 'hooks/useDarkMode';
@@ -167,6 +168,7 @@ function LogsContextList({
key={log.id}
data={log}
linesPerRow={1}
+ fontSize={FontSize.SMALL}
/>
),
[],
diff --git a/frontend/src/container/LogsExplorerContext/index.tsx b/frontend/src/container/LogsExplorerContext/index.tsx
index d62cdb274b..32075097e5 100644
--- a/frontend/src/container/LogsExplorerContext/index.tsx
+++ b/frontend/src/container/LogsExplorerContext/index.tsx
@@ -2,6 +2,7 @@ import { EditFilled } from '@ant-design/icons';
import { Modal, Typography } from 'antd';
import RawLogView from 'components/Logs/RawLogView';
import LogsContextList from 'container/LogsContextList';
+import { FontSize } from 'container/OptionsMenu/types';
import { ORDERBY_FILTERS } from 'container/QueryBuilder/filters/OrderByFilter/config';
import QueryBuilderSearch from 'container/QueryBuilder/filters/QueryBuilderSearch';
import { useIsDarkMode } from 'hooks/useDarkMode';
@@ -99,6 +100,7 @@ function LogsExplorerContext({
isTextOverflowEllipsisDisabled
data={log}
linesPerRow={1}
+ fontSize={FontSize.SMALL}
/>
void;
logs: ILog[];
hasActions: boolean;
+ fontSize: FontSize;
}
export default function TableRow({
@@ -33,6 +35,7 @@ export default function TableRow({
handleSetActiveContextLog,
logs,
hasActions,
+ fontSize,
}: TableRowProps): JSX.Element {
const isDarkMode = useIsDarkMode();
@@ -78,6 +81,7 @@ export default function TableRow({
$isDragColumn={false}
$isDarkMode={isDarkMode}
key={column.key}
+ fontSize={fontSize}
>
{cloneElement(children, props)}
diff --git a/frontend/src/container/LogsExplorerList/InfinityTableView/config.ts b/frontend/src/container/LogsExplorerList/InfinityTableView/config.ts
index ec16ba1024..c235cbd5e7 100644
--- a/frontend/src/container/LogsExplorerList/InfinityTableView/config.ts
+++ b/frontend/src/container/LogsExplorerList/InfinityTableView/config.ts
@@ -1,3 +1,5 @@
+/* eslint-disable no-nested-ternary */
+import { FontSize } from 'container/OptionsMenu/types';
import { CSSProperties } from 'react';
export const infinityDefaultStyles: CSSProperties = {
@@ -5,3 +7,16 @@ export const infinityDefaultStyles: CSSProperties = {
overflowX: 'scroll',
marginTop: '15px',
};
+
+export function getInfinityDefaultStyles(fontSize: FontSize): CSSProperties {
+ return {
+ width: '100%',
+ overflowX: 'scroll',
+ marginTop:
+ fontSize === FontSize.SMALL
+ ? '10px'
+ : fontSize === FontSize.MEDIUM
+ ? '12px'
+ : '15px',
+ };
+}
diff --git a/frontend/src/container/LogsExplorerList/InfinityTableView/index.tsx b/frontend/src/container/LogsExplorerList/InfinityTableView/index.tsx
index 2875575162..fe2d2ba1d4 100644
--- a/frontend/src/container/LogsExplorerList/InfinityTableView/index.tsx
+++ b/frontend/src/container/LogsExplorerList/InfinityTableView/index.tsx
@@ -15,7 +15,7 @@ import {
} from 'react-virtuoso';
import { ILog } from 'types/api/logs/log';
-import { infinityDefaultStyles } from './config';
+import { getInfinityDefaultStyles } from './config';
import { LogsCustomTable } from './LogsCustomTable';
import { TableHeaderCellStyled, TableRowStyled } from './styles';
import TableRow from './TableRow';
@@ -59,6 +59,7 @@ const InfinityTable = forwardRef(
onSetActiveLog,
onClearActiveLog,
onAddToQuery,
+ onGroupByAttribute,
} = useActiveLog();
const { dataSource, columns } = useTableView({
@@ -95,9 +96,15 @@ const InfinityTable = forwardRef(
handleSetActiveContextLog={handleSetActiveContextLog}
logs={tableViewProps.logs}
hasActions
+ fontSize={tableViewProps.fontSize}
/>
),
- [handleSetActiveContextLog, tableColumns, tableViewProps.logs],
+ [
+ handleSetActiveContextLog,
+ tableColumns,
+ tableViewProps.fontSize,
+ tableViewProps.logs,
+ ],
);
const tableHeader = useCallback(
@@ -112,6 +119,7 @@ const InfinityTable = forwardRef(
$isDarkMode={isDarkMode}
$isDragColumn={isDragColumn}
key={column.key}
+ fontSize={tableViewProps?.fontSize}
// eslint-disable-next-line react/jsx-props-no-spreading
{...(isDragColumn && { className: 'dragHandler' })}
>
@@ -121,7 +129,7 @@ const InfinityTable = forwardRef(
})}
),
- [tableColumns, isDarkMode],
+ [tableColumns, isDarkMode, tableViewProps?.fontSize],
);
const handleClickExpand = (index: number): void => {
@@ -137,7 +145,7 @@ const InfinityTable = forwardRef(
initialTopMostItemIndex={
tableViewProps.activeLogIndex !== -1 ? tableViewProps.activeLogIndex : 0
}
- style={infinityDefaultStyles}
+ style={getInfinityDefaultStyles(tableViewProps.fontSize)}
data={dataSource}
components={{
// eslint-disable-next-line react/jsx-props-no-spreading
@@ -165,6 +173,7 @@ const InfinityTable = forwardRef(
onClose={handleClearActiveContextLog}
onAddToQuery={handleAddToQuery}
selectedTab={VIEW_TYPES.CONTEXT}
+ onGroupByAttribute={onGroupByAttribute}
/>
)}
(
onClose={onClearActiveLog}
onAddToQuery={onAddToQuery}
onClickActionItem={onAddToQuery}
+ onGroupByAttribute={onGroupByAttribute}
/>
);
diff --git a/frontend/src/container/LogsExplorerList/InfinityTableView/styles.ts b/frontend/src/container/LogsExplorerList/InfinityTableView/styles.ts
index e2719dbc3f..89c9592dd4 100644
--- a/frontend/src/container/LogsExplorerList/InfinityTableView/styles.ts
+++ b/frontend/src/container/LogsExplorerList/InfinityTableView/styles.ts
@@ -1,5 +1,7 @@
+/* eslint-disable no-nested-ternary */
import { Color } from '@signozhq/design-tokens';
import { themeColors } from 'constants/theme';
+import { FontSize } from 'container/OptionsMenu/types';
import styled from 'styled-components';
import { getActiveLogBackground } from 'utils/logs';
@@ -7,6 +9,7 @@ interface TableHeaderCellStyledProps {
$isDragColumn: boolean;
$isDarkMode: boolean;
$isTimestamp?: boolean;
+ fontSize?: FontSize;
}
export const TableStyled = styled.table`
@@ -15,6 +18,14 @@ export const TableStyled = styled.table`
export const TableCellStyled = styled.td`
padding: 0.5rem;
+ ${({ fontSize }): string =>
+ fontSize === FontSize.SMALL
+ ? `padding:0.3rem;`
+ : fontSize === FontSize.MEDIUM
+ ? `padding:0.4rem;`
+ : fontSize === FontSize.LARGE
+ ? `padding:0.5rem;`
+ : ``}
background-color: ${(props): string =>
props.$isDarkMode ? 'inherit' : themeColors.whiteCream};
@@ -33,7 +44,7 @@ export const TableRowStyled = styled.tr<{
? `background-color: ${
$isDarkMode ? Color.BG_SLATE_500 : Color.BG_VANILLA_300
} !important`
- : ''}
+ : ''};
}
cursor: pointer;
@@ -66,9 +77,17 @@ export const TableHeaderCellStyled = styled.th`
line-height: 18px;
letter-spacing: -0.07px;
background: ${(props): string => (props.$isDarkMode ? '#0b0c0d' : '#fdfdfd')};
- ${({ $isTimestamp }): string => ($isTimestamp ? 'padding-left: 24px;' : '')}
${({ $isDragColumn }): string => ($isDragColumn ? 'cursor: col-resize;' : '')}
+ ${({ fontSize }): string =>
+ fontSize === FontSize.SMALL
+ ? `font-size:11px; line-height:16px; padding: 0.1rem;`
+ : fontSize === FontSize.MEDIUM
+ ? `font-size:13px; line-height:20px; padding:0.3rem;`
+ : fontSize === FontSize.LARGE
+ ? `font-size:14px; line-height:24px; padding: 0.5rem;`
+ : ``};
+ ${({ $isTimestamp }): string => ($isTimestamp ? 'padding-left: 24px;' : '')}
color: ${(props): string =>
props.$isDarkMode ? 'var(--bg-vanilla-100, #fff)' : themeColors.bckgGrey};
`;
diff --git a/frontend/src/container/LogsExplorerList/index.tsx b/frontend/src/container/LogsExplorerList/index.tsx
index 760f3fea30..dd97916ce6 100644
--- a/frontend/src/container/LogsExplorerList/index.tsx
+++ b/frontend/src/container/LogsExplorerList/index.tsx
@@ -14,6 +14,7 @@ import EmptyLogsSearch from 'container/EmptyLogsSearch/EmptyLogsSearch';
import LogsError from 'container/LogsError/LogsError';
import { LogsLoading } from 'container/LogsLoading/LogsLoading';
import { useOptionsMenu } from 'container/OptionsMenu';
+import { FontSize } from 'container/OptionsMenu/types';
import { useActiveLog } from 'hooks/logs/useActiveLog';
import { useCopyLogLink } from 'hooks/logs/useCopyLogLink';
import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
@@ -50,6 +51,7 @@ function LogsExplorerList({
activeLog,
onClearActiveLog,
onAddToQuery,
+ onGroupByAttribute,
onSetActiveLog,
} = useActiveLog();
@@ -79,6 +81,7 @@ function LogsExplorerList({
data={log}
linesPerRow={options.maxLines}
selectedFields={selectedFields}
+ fontSize={options.fontSize}
/>
);
}
@@ -91,6 +94,7 @@ function LogsExplorerList({
onAddToQuery={onAddToQuery}
onSetActiveLog={onSetActiveLog}
activeLog={activeLog}
+ fontSize={options.fontSize}
linesPerRow={options.maxLines}
/>
);
@@ -99,6 +103,7 @@ function LogsExplorerList({
activeLog,
onAddToQuery,
onSetActiveLog,
+ options.fontSize,
options.format,
options.maxLines,
selectedFields,
@@ -121,6 +126,7 @@ function LogsExplorerList({
logs,
fields: selectedFields,
linesPerRow: options.maxLines,
+ fontSize: options.fontSize,
appendTo: 'end',
activeLogIndex,
}}
@@ -129,13 +135,27 @@ function LogsExplorerList({
);
}
+ function getMarginTop(): string {
+ switch (options.fontSize) {
+ case FontSize.SMALL:
+ return '10px';
+ case FontSize.MEDIUM:
+ return '12px';
+ case FontSize.LARGE:
+ return '15px';
+ default:
+ return '15px';
+ }
+ }
+
return (
+ );
+ }
+ if (success) {
+ return (
+ >;
+ listQueryKeyRef: MutableRefObject;
+ chartQueryKeyRef: MutableRefObject;
}): JSX.Element {
const { notifications } = useNotifications();
const history = useHistory();
@@ -82,14 +100,14 @@ function LogsExplorerViews({
// this is to respect the panel type present in the URL rather than defaulting it to list always.
const panelTypes = useGetPanelTypesQueryParam(PANEL_TYPES.LIST);
- const { activeLogId, timeRange, onTimeRangeChange } = useCopyLogLink();
+ const { activeLogId, onTimeRangeChange } = useCopyLogLink();
const { queryData: pageSize } = useUrlQueryData(
QueryParams.pageSize,
DEFAULT_PER_PAGE_VALUE,
);
- const { minTime } = useSelector(
+ const { minTime, maxTime } = useSelector(
(state) => state.globalTime,
);
@@ -116,6 +134,8 @@ function LogsExplorerViews({
const [logs, setLogs] = useState([]);
const [requestData, setRequestData] = useState(null);
const [showFormatMenuItems, setShowFormatMenuItems] = useState(false);
+ const [queryId, setQueryId] = useState(v4());
+ const [queryStats, setQueryStats] = useState();
const handleAxisError = useAxiosError();
@@ -214,9 +234,18 @@ function LogsExplorerViews({
{
enabled: !!listChartQuery && panelType === PANEL_TYPES.LIST,
},
+ {},
+ undefined,
+ chartQueryKeyRef,
);
- const { data, isLoading, isFetching, isError } = useGetExplorerQueryRange(
+ const {
+ data,
+ isLoading,
+ isFetching,
+ isError,
+ isSuccess,
+ } = useGetExplorerQueryRange(
requestData,
panelType,
DEFAULT_ENTITY_VERSION,
@@ -225,13 +254,18 @@ function LogsExplorerViews({
enabled: !isLimit && !!requestData,
},
{
- ...(timeRange &&
- activeLogId &&
+ ...(activeLogId &&
!logs.length && {
- start: timeRange.start,
- end: timeRange.end,
+ start: minTime,
+ end: maxTime,
}),
},
+ undefined,
+ listQueryKeyRef,
+ {
+ ...(!isEmpty(queryId) &&
+ selectedPanelType !== PANEL_TYPES.LIST && { 'X-SIGNOZ-QUERY-ID': queryId }),
+ },
);
const getRequestData = useCallback(
@@ -318,6 +352,23 @@ function LogsExplorerViews({
],
);
+ useEffect(() => {
+ setQueryId(v4());
+ }, [data]);
+
+ useEffect(() => {
+ if (
+ !isEmpty(queryId) &&
+ (isLoading || isFetching) &&
+ selectedPanelType !== PANEL_TYPES.LIST
+ ) {
+ setQueryStats(undefined);
+ setTimeout(() => {
+ getQueryStats({ queryId, setData: setQueryStats });
+ }, 500);
+ }
+ }, [queryId, isLoading, isFetching, selectedPanelType]);
+
const logEventCalledRef = useRef(false);
useEffect(() => {
if (!logEventCalledRef.current && !isUndefined(data?.payload)) {
@@ -469,7 +520,7 @@ function LogsExplorerViews({
setLogs(newLogs);
onTimeRangeChange({
start: currentParams?.start,
- end: timeRange?.end || currentParams?.end,
+ end: currentParams?.end,
pageSize: newLogs.length,
});
}
@@ -486,8 +537,7 @@ function LogsExplorerViews({
filters: listQuery?.filters || initialFilters,
page: 1,
log: null,
- pageSize:
- timeRange?.pageSize && activeLogId ? timeRange?.pageSize : pageSize,
+ pageSize,
});
setLogs([]);
@@ -502,7 +552,6 @@ function LogsExplorerViews({
listQuery,
pageSize,
minTime,
- timeRange,
activeLogId,
onTimeRangeChange,
panelType,
@@ -569,6 +618,25 @@ function LogsExplorerViews({
},
});
+ useEffect(() => {
+ if (
+ isLoading ||
+ isFetching ||
+ isLoadingListChartData ||
+ isFetchingListChartData
+ ) {
+ setIsLoadingQueries(true);
+ } else {
+ setIsLoadingQueries(false);
+ }
+ }, [
+ isLoading,
+ isFetching,
+ isFetchingListChartData,
+ isLoadingListChartData,
+ setIsLoadingQueries,
+ ]);
+
const flattenLogData = useMemo(
() =>
logs.map((log) => {
@@ -665,6 +733,30 @@ function LogsExplorerViews({
-
-
- {removeEscapeCharacters(fieldData.value)}
-
-
-
- {!isListViewPanel && (
-
-
-
- ) : (
-
-
-
- ) : (
-
-
- )}
-
- );
- },
+ render: (fieldData: Record
+ {record.field === 'body' ? (
+
+
+
+ ) : (
+
+
+ {removeEscapeCharacters(fieldData.value)}
+
+
+ )}
+
+ {!isListViewPanel && (
+
+
+
+ ) : (
+
+
+
+ ) : (
+
+ {!isOldLogsExplorerOrLiveLogsPage && (
+
+ }
+ onClick={(): Promise | void =>
+ onGroupByAttribute?.(fieldFilterKey)
+ }
+ >
+ Group By Attribute
+
+
+ }
+ rootClassName="table-view-actions-content"
+ trigger="hover"
+ placement="bottomLeft"
+ >
+ }
+ className="filter-btn periscope-btn"
+ />
+
+ )}
+
+ )}
+
+ );
+ }
+ if (success) {
+ return (
+ {content}
;
+}
diff --git a/frontend/src/container/LogsExplorerViews/index.tsx b/frontend/src/container/LogsExplorerViews/index.tsx
index 6318e1da71..06a39a4da4 100644
--- a/frontend/src/container/LogsExplorerViews/index.tsx
+++ b/frontend/src/container/LogsExplorerViews/index.tsx
@@ -1,8 +1,10 @@
/* eslint-disable sonarjs/cognitive-complexity */
import './LogsExplorerViews.styles.scss';
-import { Button } from 'antd';
+import { Button, Typography } from 'antd';
+import { getQueryStats, WsDataEvent } from 'api/common/getQueryStats';
import logEvent from 'api/common/logEvent';
+import { getYAxisFormattedValue } from 'components/Graph/yAxisConfig';
import LogsFormatOptionsMenu from 'components/LogsFormatOptionsMenu/LogsFormatOptionsMenu';
import { DEFAULT_ENTITY_VERSION } from 'constants/app';
import { LOCALSTORAGE } from 'constants/localStorage';
@@ -48,7 +50,15 @@ import {
} from 'lodash-es';
import { Sliders } from 'lucide-react';
import { SELECTED_VIEWS } from 'pages/LogsExplorer/utils';
-import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import {
+ memo,
+ MutableRefObject,
+ useCallback,
+ useEffect,
+ useMemo,
+ useRef,
+ useState,
+} from 'react';
import { useSelector } from 'react-redux';
import { useHistory } from 'react-router-dom';
import { AppState } from 'store/reducers';
@@ -69,12 +79,20 @@ import { GlobalReducer } from 'types/reducer/globalTime';
import { generateExportToDashboardLink } from 'utils/dashboard/generateExportToDashboardLink';
import { v4 } from 'uuid';
+import QueryStatus from './QueryStatus';
+
function LogsExplorerViews({
selectedView,
showFrequencyChart,
+ setIsLoadingQueries,
+ listQueryKeyRef,
+ chartQueryKeyRef,
}: {
selectedView: SELECTED_VIEWS;
showFrequencyChart: boolean;
+ setIsLoadingQueries: React.Dispatch
+
+ {getYAxisFormattedValue(queryStats.read_rows?.toString(), 'short')}{' '}
+ rows
+
+ )}
+ {queryStats?.elapsed_ms && (
+ <>
+
+
+ {getYAxisFormattedValue(queryStats?.elapsed_ms?.toString(), 'ms')}
+
+
+ )}
+
+ )}
@@ -493,19 +470,26 @@ Thanks
>
Back
-
}>
{current < lastStepIndex ? 'Continue to next step' : 'Done'}
-
- }
- >
- Facing issues sending data to SigNoz?
-
+
- }
- >
- Stage & Run Query
-
+ {isLoadingQueries ? (
+
);
}
+
+RightToolbarActions.defaultProps = {
+ isLoadingQueries: false,
+ listQueryKeyRef: null,
+ chartQueryKeyRef: null,
+};
diff --git a/frontend/src/container/QueryBuilder/components/ToolbarActions/ToolbarActions.styles.scss b/frontend/src/container/QueryBuilder/components/ToolbarActions/ToolbarActions.styles.scss
index a848cf8680..2eda1b7c86 100644
--- a/frontend/src/container/QueryBuilder/components/ToolbarActions/ToolbarActions.styles.scss
+++ b/frontend/src/container/QueryBuilder/components/ToolbarActions/ToolbarActions.styles.scss
@@ -5,8 +5,8 @@
.left-toolbar-query-actions {
display: flex;
border-radius: 2px;
- border: 1px solid var(--bg-slate-400, #1d212d);
- background: var(--bg-ink-300, #16181d);
+ border: 1px solid var(--bg-slate-400);
+ background: var(--bg-ink-300);
flex-direction: row;
.prom-ql-icon {
@@ -24,7 +24,7 @@
border-radius: 0;
&.active-tab {
- background-color: #1d212d;
+ background-color: var(--bg-slate-400);
}
&:disabled {
@@ -33,7 +33,7 @@
}
}
.action-btn + .action-btn {
- border-left: 1px solid var(--bg-slate-400, #1d212d);
+ border-left: 1px solid var(--bg-slate-400);
}
}
@@ -51,6 +51,50 @@
background-color: var(--bg-robin-600);
}
+.right-actions {
+ display: flex;
+ align-items: center;
+}
+
+.loading-container {
+ display: flex;
+ gap: 8px;
+ align-items: center;
+
+ .loading-btn {
+ display: flex;
+ width: 32px;
+ height: 33px;
+ padding: 4px 10px;
+ justify-content: center;
+ align-items: center;
+ gap: 6px;
+ flex-shrink: 0;
+ border-radius: 2px;
+ background: var(--bg-slate-300);
+ box-shadow: none;
+ border: none;
+ }
+
+ .cancel-run {
+ display: flex;
+ height: 33px;
+ padding: 4px 10px;
+ justify-content: center;
+ align-items: center;
+ gap: 6px;
+ flex: 1 0 0;
+ border-radius: 2px;
+ background: var(--bg-cherry-500);
+ border-color: none;
+ }
+ .cancel-run:hover {
+ background-color: #ff7875 !important;
+ color: var(--bg-vanilla-100) !important;
+ border: none;
+ }
+}
+
.lightMode {
.left-toolbar {
.left-toolbar-query-actions {
@@ -68,4 +112,17 @@
}
}
}
+ .loading-container {
+ .loading-btn {
+ background: var(--bg-vanilla-300);
+ }
+
+ .cancel-run {
+ color: var(--bg-vanilla-100);
+ }
+
+ .cancel-run:hover {
+ background-color: #ff7875;
+ }
+ }
}
diff --git a/frontend/src/container/QueryBuilder/components/ToolbarActions/tests/ToolbarActions.test.tsx b/frontend/src/container/QueryBuilder/components/ToolbarActions/tests/ToolbarActions.test.tsx
index 751bdbf99d..79ee020802 100644
--- a/frontend/src/container/QueryBuilder/components/ToolbarActions/tests/ToolbarActions.test.tsx
+++ b/frontend/src/container/QueryBuilder/components/ToolbarActions/tests/ToolbarActions.test.tsx
@@ -1,6 +1,7 @@
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { SELECTED_VIEWS } from 'pages/LogsExplorer/utils';
+import MockQueryClientProvider from 'providers/test/MockQueryClientProvider';
import LeftToolbarActions from '../LeftToolbarActions';
import RightToolbarActions from '../RightToolbarActions';
@@ -94,7 +95,9 @@ describe('ToolbarActions', () => {
it('RightToolbarActions - render correctly with props', async () => {
const onStageRunQuery = jest.fn();
const { queryByText } = render(
-
+
+ }
+ className="cancel-run"
+ onClick={(): void => {
+ if (listQueryKeyRef?.current) {
+ queryClient.cancelQueries(listQueryKeyRef.current);
+ }
+ if (chartQueryKeyRef?.current) {
+ queryClient.cancelQueries(chartQueryKeyRef.current);
+ }
+ }}
+ >
+ Cancel Run
+
+
+ ) : (
+ }
+ >
+ Stage & Run Query
+
+ )}
{
+ handleAddTag(value);
+ }}
+ >
+ {label}
+
+ );
+}
+
+interface ExampleQueriesRendererForLogsProps {
+ label: string;
+ value: TagFilter;
+ handleAddTag: (value: TagFilter) => void;
+}
+
+export default ExampleQueriesRendererForLogs;
diff --git a/frontend/src/container/QueryBuilder/filters/QueryBuilderSearch/OptionRendererForLogs.tsx b/frontend/src/container/QueryBuilder/filters/QueryBuilderSearch/OptionRendererForLogs.tsx
new file mode 100644
index 0000000000..a1b5149a05
--- /dev/null
+++ b/frontend/src/container/QueryBuilder/filters/QueryBuilderSearch/OptionRendererForLogs.tsx
@@ -0,0 +1,77 @@
+import './QueryBuilderSearch.styles.scss';
+
+import { Color } from '@signozhq/design-tokens';
+import { Tooltip, Typography } from 'antd';
+import cx from 'classnames';
+import { Zap } from 'lucide-react';
+import { useState } from 'react';
+
+import { getOptionType } from './utils';
+
+function OptionRendererForLogs({
+ label,
+ value,
+ dataType,
+ isIndexed,
+ setDynamicPlaceholder,
+}: OptionRendererProps): JSX.Element {
+ const [truncated, setTruncated] = useState
+
+ {isIndexed ? (
+ setTruncated(ellipsis) }}
+ >
+ {value}
+
+
+
+
+
+ {dataType}
+
+
+ {optionType}
+
+
+
+ setTruncated(ellipsis) }}
+ >
+ {label}
+
+
+ 3 && !key ? 'hide-scroll' : '',
+ )}
rootClassName="query-builder-search"
disabled={isMetricsDataSource && !query.aggregateAttribute.key}
style={selectStyle}
@@ -259,20 +321,99 @@ function QueryBuilderSearch({
onDeselect={handleDeselect}
onInputKeyDown={onInputKeyDownHandler}
notFoundContent={isFetching ?
-
- ))}
+ {isLogsExplorerPage
+ ? customRendererForLogsExplorer
+ : options.map((option) => (
+
+
+ ))}
);
diff --git a/frontend/src/container/QueryBuilder/filters/QueryBuilderSearch/utils.ts b/frontend/src/container/QueryBuilder/filters/QueryBuilderSearch/utils.ts
index ec7eba3973..04d8a0f77d 100644
--- a/frontend/src/container/QueryBuilder/filters/QueryBuilderSearch/utils.ts
+++ b/frontend/src/container/QueryBuilder/filters/QueryBuilderSearch/utils.ts
@@ -1,6 +1,8 @@
import { OPERATORS } from 'constants/queryBuilder';
import { MetricsType } from 'container/MetricsApplication/constant';
+import { queryFilterTags } from 'hooks/queryBuilder/useTag';
import { parse } from 'papaparse';
+import { TagFilter } from 'types/api/queryBuilder/queryBuilderData';
import { orderByValueDelimiter } from '../OrderByFilter/utils';
@@ -162,3 +164,17 @@ export function getOptionType(label: string): MetricsType | undefined {
return optionType;
}
+
+/**
+ *
+ * @param exampleQueries the example queries based on recommendation engine
+ * @returns the data formatted to the Option[]
+ */
+export function convertExampleQueriesToOptions(
+ exampleQueries: TagFilter[],
+): { label: string; value: TagFilter }[] {
+ return exampleQueries.map((query) => ({
+ value: query,
+ label: queryFilterTags(query).join(' , '),
+ }));
+}
diff --git a/frontend/src/container/QueryBuilder/filters/QueryBuilderSearchV2/QueryBuilderSearchDropdown.tsx b/frontend/src/container/QueryBuilder/filters/QueryBuilderSearchV2/QueryBuilderSearchDropdown.tsx
new file mode 100644
index 0000000000..c910ca1be4
--- /dev/null
+++ b/frontend/src/container/QueryBuilder/filters/QueryBuilderSearchV2/QueryBuilderSearchDropdown.tsx
@@ -0,0 +1,112 @@
+/* eslint-disable no-nested-ternary */
+import { Typography } from 'antd';
+import {
+ ArrowDown,
+ ArrowUp,
+ ChevronUp,
+ Command,
+ CornerDownLeft,
+ Slash,
+} from 'lucide-react';
+import { TagFilter } from 'types/api/queryBuilder/queryBuilderData';
+import { getUserOperatingSystem, UserOperatingSystem } from 'utils/getUserOS';
+
+import ExampleQueriesRendererForLogs from '../QueryBuilderSearch/ExampleQueriesRendererForLogs';
+import { convertExampleQueriesToOptions } from '../QueryBuilderSearch/utils';
+import { ITag, Option } from './QueryBuilderSearchV2';
+
+interface ICustomDropdownProps {
+ menu: React.ReactElement;
+ searchValue: string;
+ tags: ITag[];
+ options: Option[];
+ exampleQueries: TagFilter[];
+ onChange: (value: TagFilter) => void;
+ currentFilterItem?: ITag;
+}
+
+export default function QueryBuilderSearchDropdown(
+ props: ICustomDropdownProps,
+): React.ReactElement {
+ const {
+ menu,
+ currentFilterItem,
+ searchValue,
+ tags,
+ exampleQueries,
+ options,
+ onChange,
+ } = props;
+ const userOs = getUserOperatingSystem();
+ return (
+ <>
+
+ {!searchKey && isLogsExplorerPage && (
+
+ )}
>
- {options.map((option) => (
- Suggested Filters
+ )}
+ {menu}
+ {isLogsExplorerPage && (
+
+ {!searchKey && tags.length === 0 && (
+
+ )}
+
+
+ )}
+ {!key && !isFetching && !showAllFilters && options.length > 3 && (
+
+ )}
+ Example Queries
+
+ {convertExampleQueriesToOptions(exampleQueries).map((query) => (
+
+
+
+
+
+
+
+
+ {!currentFilterItem?.key ? (
+
+
+ Suggested Filters
+ ) : !currentFilterItem?.op ? (
+
+
+ Operator for{' '}
+
+
+ {currentFilterItem?.key?.key}
+
+
+ ) : (
+
+
+ Value(s) for{' '}
+
+
+ {currentFilterItem?.key?.key} {currentFilterItem?.op}
+
+
+ )}
+ {menu}
+ {!searchValue && tags.length === 0 && (
+
+
+ )}
+ Example Queries
+
+ {convertExampleQueriesToOptions(exampleQueries).map((query) => (
+
+
+
+
+
+
+ {!currentFilterItem?.key && options.length > 3 && (
+
+ {userOs === UserOperatingSystem.MACOS ? (
+
+ )}
+
+
+ );
+}
+
+QueryBuilderSearchDropdown.defaultProps = {
+ currentFilterItem: undefined,
+};
diff --git a/frontend/src/container/QueryBuilder/filters/QueryBuilderSearchV2/QueryBuilderSearchV2.styles.scss b/frontend/src/container/QueryBuilder/filters/QueryBuilderSearchV2/QueryBuilderSearchV2.styles.scss
new file mode 100644
index 0000000000..1ca8bd7529
--- /dev/null
+++ b/frontend/src/container/QueryBuilder/filters/QueryBuilderSearchV2/QueryBuilderSearchV2.styles.scss
@@ -0,0 +1,261 @@
+.query-builder-search-v2 {
+ display: flex;
+ gap: 4px;
+
+ .show-all-filters {
+ .content {
+ .rc-virtual-list-holder {
+ height: 100px;
+ }
+ }
+ }
+
+ .content {
+ .suggested-filters {
+ color: var(--bg-slate-50);
+ font-family: Inter;
+ font-size: 11px;
+ font-style: normal;
+ font-weight: 600;
+ line-height: 18px;
+ letter-spacing: 0.88px;
+ text-transform: uppercase;
+ padding: 12px 0px 8px 14px;
+ }
+
+ .operator-for {
+ display: flex;
+ align-items: center;
+ gap: 6px;
+ padding: 12px 0px 8px 14px;
+
+ .operator-for-text {
+ color: var(--bg-slate-200);
+ font-family: Inter;
+ font-size: 11px;
+ font-style: normal;
+ font-weight: 600;
+ line-height: 18px; /* 163.636% */
+ letter-spacing: 0.88px;
+ text-transform: uppercase;
+ }
+
+ .operator-for-value {
+ display: flex;
+ align-items: center;
+ height: 20px;
+ padding: 0px 8px;
+ justify-content: center;
+ gap: 4px;
+ border-radius: 50px;
+ background: rgba(255, 255, 255, 0.1);
+ color: var(--bg-vanilla-400);
+ font-family: Inter;
+ font-size: 12px;
+ font-style: normal;
+ font-weight: 400;
+ line-height: 18px; /* 150% */
+ letter-spacing: -0.06px;
+ }
+ }
+
+ .value-for {
+ display: flex;
+ align-items: center;
+ gap: 6px;
+ padding: 12px 0px 8px 14px;
+ .value-for-text {
+ color: var(--bg-slate-200);
+ font-family: Inter;
+ font-size: 11px;
+ font-style: normal;
+ font-weight: 600;
+ line-height: 18px; /* 163.636% */
+ letter-spacing: 0.88px;
+ text-transform: uppercase;
+ }
+
+ .value-for-value {
+ display: flex;
+ align-items: center;
+ height: 20px;
+ padding: 0px 8px;
+ justify-content: center;
+ gap: 4px;
+ border-radius: 50px;
+ background: rgba(255, 255, 255, 0.1);
+ color: var(--bg-vanilla-400);
+ font-family: Inter;
+ font-size: 12px;
+ font-style: normal;
+ font-weight: 400;
+ line-height: 18px; /* 150% */
+ letter-spacing: -0.06px;
+ }
+ }
+ .example-queries {
+ cursor: default;
+ .heading {
+ padding: 12px 14px 8px 14px;
+ color: var(--bg-slate-50);
+ font-family: Inter;
+ font-size: 11px;
+ font-style: normal;
+ font-weight: 500;
+ line-height: 18px; /* 163.636% */
+ letter-spacing: 0.88px;
+ text-transform: uppercase;
+ }
+
+ .query-container {
+ display: flex;
+ flex-direction: column;
+ gap: 12px;
+ padding: 0px 12px 12px 12px;
+ cursor: pointer;
+
+ .example-query {
+ display: flex;
+ padding: 4px 8px;
+ justify-content: center;
+ align-items: center;
+ gap: 10px;
+ border-radius: 2px;
+ background: var(--bg-ink-200);
+ color: var(--bg-vanilla-400);
+ font-family: Inter;
+ font-size: 14px;
+ font-style: normal;
+ font-weight: 400;
+ line-height: normal;
+ letter-spacing: -0.07px;
+ width: fit-content;
+ }
+
+ .example-query:hover {
+ color: var(--bg-vanilla-100);
+ }
+ }
+ }
+ }
+
+ .keyboard-shortcuts {
+ display: flex;
+ align-items: center;
+ border-radius: 0px 0px 4px 4px;
+ border: 1px solid var(--bg-slate-400);
+ background: var(--bg-ink-300);
+ padding: 11px 16px;
+ cursor: default;
+
+ .icons {
+ width: 16px;
+ height: 16px;
+ flex-shrink: 0;
+ border-radius: 2.286px;
+ border-top: 1.143px solid var(--bg-ink-200);
+ border-right: 1.143px solid var(--bg-ink-200);
+ border-bottom: 2.286px solid var(--bg-ink-200);
+ border-left: 1.143px solid var(--bg-ink-200);
+ background: var(--Ink-400, #121317);
+ }
+
+ .keyboard-text {
+ color: var(--bg-vanilla-400);
+ font-family: Inter;
+ font-size: 12px;
+ font-style: normal;
+ font-weight: 400;
+ line-height: 18px; /* 142.857% */
+ letter-spacing: -0.07px;
+ }
+
+ .navigate {
+ display: flex;
+ align-items: center;
+ padding-right: 12px;
+ gap: 4px;
+ border-right: 1px solid #1d212d;
+ }
+
+ .update-query {
+ display: flex;
+ align-items: center;
+ margin-left: 12px;
+ gap: 4px;
+ }
+ .show-all-filter-items {
+ padding-left: 12px;
+ border-left: 1px solid #1d212d;
+ display: flex;
+ align-items: center;
+ margin-left: 12px;
+ gap: 4px;
+ }
+ }
+
+ .search-bar {
+ width: 100%;
+ }
+
+ .qb-search-bar-tokenised-tags {
+ .ant-tag {
+ display: flex;
+ align-items: center;
+ border-radius: 2px 0px 0px 2px;
+ border: 1px solid var(--bg-slate-300);
+ background: var(--bg-slate-300);
+ box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);
+ padding: 0px;
+
+ .ant-typography {
+ color: var(--bg-vanilla-100);
+ font-family: Inter;
+ font-size: 14px !important;
+ font-style: normal;
+ font-weight: 400;
+ line-height: 20px; /* 142.857% */
+ padding: 2px 6px;
+ }
+
+ .ant-tag-close-icon {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ border-radius: 0px 2px 2px 0px;
+ width: 20px;
+ height: 24px;
+ flex-shrink: 0;
+ margin-inline-start: 0px !important;
+ margin-inline-end: 0px !important;
+ }
+
+ &.resource {
+ border: 1px solid rgba(242, 71, 105, 0.2);
+
+ .ant-typography {
+ color: var(--bg-sakura-400);
+ background: rgba(245, 108, 135, 0.1);
+ font-size: 14px;
+ }
+
+ .ant-tag-close-icon {
+ background: rgba(245, 108, 135, 0.1);
+ }
+ }
+ &.tag {
+ border: 1px solid rgba(189, 153, 121, 0.2);
+
+ .ant-typography {
+ color: var(--bg-sienna-400);
+ background: rgba(189, 153, 121, 0.1);
+ font-size: 14px;
+ }
+
+ .ant-tag-close-icon {
+ background: rgba(189, 153, 121, 0.1);
+ }
+ }
+ }
+ }
+}
diff --git a/frontend/src/container/QueryBuilder/filters/QueryBuilderSearchV2/QueryBuilderSearchV2.tsx b/frontend/src/container/QueryBuilder/filters/QueryBuilderSearchV2/QueryBuilderSearchV2.tsx
new file mode 100644
index 0000000000..d53a517c48
--- /dev/null
+++ b/frontend/src/container/QueryBuilder/filters/QueryBuilderSearchV2/QueryBuilderSearchV2.tsx
@@ -0,0 +1,862 @@
+/* eslint-disable sonarjs/cognitive-complexity */
+import './QueryBuilderSearchV2.styles.scss';
+
+import { Select, Spin, Tag, Tooltip } from 'antd';
+import cx from 'classnames';
+import {
+ OPERATORS,
+ QUERY_BUILDER_OPERATORS_BY_TYPES,
+ QUERY_BUILDER_SEARCH_VALUES,
+} from 'constants/queryBuilder';
+import { DEBOUNCE_DELAY } from 'constants/queryBuilderFilterConfig';
+import ROUTES from 'constants/routes';
+import { LogsExplorerShortcuts } from 'constants/shortcuts/logsExplorerShortcuts';
+import { useKeyboardHotkeys } from 'hooks/hotkeys/useKeyboardHotkeys';
+import { WhereClauseConfig } from 'hooks/queryBuilder/useAutoComplete';
+import { useGetAggregateKeys } from 'hooks/queryBuilder/useGetAggregateKeys';
+import { useGetAggregateValues } from 'hooks/queryBuilder/useGetAggregateValues';
+import { useGetAttributeSuggestions } from 'hooks/queryBuilder/useGetAttributeSuggestions';
+import { validationMapper } from 'hooks/queryBuilder/useIsValidTag';
+import { operatorTypeMapper } from 'hooks/queryBuilder/useOperatorType';
+import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
+import useDebounceValue from 'hooks/useDebounce';
+import {
+ cloneDeep,
+ isArray,
+ isEmpty,
+ isEqual,
+ isObject,
+ isUndefined,
+ unset,
+} from 'lodash-es';
+import { ChevronDown, ChevronUp } from 'lucide-react';
+import type { BaseSelectRef } from 'rc-select';
+import {
+ KeyboardEvent,
+ ReactElement,
+ useCallback,
+ useEffect,
+ useMemo,
+ useRef,
+ useState,
+} from 'react';
+import { useLocation } from 'react-router-dom';
+import {
+ BaseAutocompleteData,
+ DataTypes,
+} from 'types/api/queryBuilder/queryAutocompleteResponse';
+import {
+ IBuilderQuery,
+ TagFilter,
+} from 'types/api/queryBuilder/queryBuilderData';
+import { DataSource } from 'types/common/queryBuilder';
+import { popupContainer } from 'utils/selectPopupContainer';
+import { v4 as uuid } from 'uuid';
+
+import { selectStyle } from '../QueryBuilderSearch/config';
+import { PLACEHOLDER } from '../QueryBuilderSearch/constant';
+import { TypographyText } from '../QueryBuilderSearch/style';
+import { getTagToken, isInNInOperator } from '../QueryBuilderSearch/utils';
+import QueryBuilderSearchDropdown from './QueryBuilderSearchDropdown';
+import Suggestions from './Suggestions';
+
+export interface ITag {
+ id?: string;
+ key: BaseAutocompleteData;
+ op: string;
+ value: string[] | string | number | boolean;
+}
+
+interface CustomTagProps {
+ label: React.ReactNode;
+ value: string;
+ disabled: boolean;
+ onClose: () => void;
+ closable: boolean;
+}
+
+interface QueryBuilderSearchV2Props {
+ query: IBuilderQuery;
+ onChange: (value: TagFilter) => void;
+ whereClauseConfig?: WhereClauseConfig;
+ placeholder?: string;
+ className?: string;
+ suffixIcon?: React.ReactNode;
+}
+
+export interface Option {
+ label: string;
+ value: BaseAutocompleteData | string;
+}
+
+export enum DropdownState {
+ ATTRIBUTE_KEY = 'ATTRIBUTE_KEY',
+ OPERATOR = 'OPERATOR',
+ ATTRIBUTE_VALUE = 'ATTRIBUTE_VALUE',
+}
+
+function getInitTags(query: IBuilderQuery): ITag[] {
+ return query.filters.items.map((item) => ({
+ id: item.id,
+ key: item.key as BaseAutocompleteData,
+ op: item.op,
+ value: `${item.value}`,
+ }));
+}
+
+function QueryBuilderSearchV2(
+ props: QueryBuilderSearchV2Props,
+): React.ReactElement {
+ const {
+ query,
+ onChange,
+ placeholder,
+ className,
+ suffixIcon,
+ whereClauseConfig,
+ } = props;
+
+ const { registerShortcut, deregisterShortcut } = useKeyboardHotkeys();
+
+ const { handleRunQuery, currentQuery } = useQueryBuilder();
+
+ const selectRef = useRef
+
+ ) : (
+ {
+ setTags((prev) => [...prev, ...(val.items as ITag[])]);
+ }}
+ searchValue={searchValue}
+ exampleQueries={suggestionsData?.payload?.example_queries || []}
+ tags={tags}
+ currentFilterItem={currentFilterItem}
+ />
+ )}
+ >
+ {dropdownOptions.map((option) => {
+ let val = option.value;
+ try {
+ if (isObject(option.value)) {
+ val = JSON.stringify(option.value);
+ } else {
+ val = option.value;
+ }
+ } catch {
+ val = option.value;
+ }
+ return (
+
+
+ );
+ })}
+
+
+ );
+}
+
+QueryBuilderSearchV2.defaultProps = {
+ placeholder: PLACEHOLDER,
+ className: '',
+ suffixIcon: null,
+ whereClauseConfig: {},
+};
+
+export default QueryBuilderSearchV2;
diff --git a/frontend/src/container/QueryBuilder/filters/QueryBuilderSearchV2/Suggestions.styles.scss b/frontend/src/container/QueryBuilder/filters/QueryBuilderSearchV2/Suggestions.styles.scss
new file mode 100644
index 0000000000..362d6e4c6a
--- /dev/null
+++ b/frontend/src/container/QueryBuilder/filters/QueryBuilderSearchV2/Suggestions.styles.scss
@@ -0,0 +1,147 @@
+.text {
+ color: var(--bg-vanilla-400);
+ font-family: Inter;
+ font-size: 14px;
+ font-style: normal;
+ font-weight: 400;
+ line-height: 20px;
+ letter-spacing: -0.07px;
+}
+
+.dot {
+ height: 5px;
+ width: 5px;
+ border-radius: 50%;
+ background-color: var(--bg-slate-300);
+}
+
+.option {
+ .container {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+
+ .left-section {
+ display: flex;
+ align-items: center;
+ width: 90%;
+ gap: 8px;
+
+ .value {
+ }
+ }
+ .right-section {
+ display: flex;
+ align-items: center;
+ gap: 4px;
+
+ .data-type {
+ display: flex;
+ height: 20px;
+ padding: 4px 8px;
+ justify-content: center;
+ align-items: center;
+ gap: 4px;
+ border-radius: 20px;
+ background: rgba(255, 255, 255, 0.08);
+ }
+
+ .type-tag {
+ display: flex;
+ align-items: center;
+ height: 20px;
+ padding: 0px 6px;
+ justify-content: center;
+ gap: 4px;
+ border-radius: 50px;
+ text-transform: capitalize;
+
+ &.tag {
+ border-radius: 50px;
+ background: rgba(189, 153, 121, 0.1) !important;
+ color: var(--bg-sienna-400) !important;
+
+ .dot {
+ background-color: var(--bg-sienna-400);
+ }
+ .text {
+ color: var(--bg-sienna-400);
+ font-family: Inter;
+ font-size: 12px;
+ font-style: normal;
+ font-weight: 400;
+ line-height: 18px; /* 150% */
+ letter-spacing: -0.06px;
+ }
+ }
+
+ &.resource {
+ border-radius: 50px;
+ background: rgba(245, 108, 135, 0.1) !important;
+ color: var(--bg-sakura-400) !important;
+
+ .dot {
+ background-color: var(--bg-sakura-400);
+ }
+ .text {
+ color: var(--bg-sakura-400);
+ font-family: Inter;
+ font-size: 12px;
+ font-style: normal;
+ font-weight: 400;
+ line-height: 18px; /* 150% */
+ letter-spacing: -0.06px;
+ }
+ }
+ }
+ }
+ .option-meta-data-container {
+ display: flex;
+ gap: 8px;
+ }
+ }
+
+ .container-without-tag {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+
+ .OPERATOR {
+ color: var(--bg-vanilla-400);
+ font-family: 'Space Mono';
+ font-size: 14px;
+ font-style: normal;
+ font-weight: 500;
+ line-height: 20px; /* 142.857% */
+ letter-spacing: -0.07px;
+ text-transform: uppercase;
+ width: 100%;
+ }
+
+ .VALUE {
+ color: var(--bg-vanilla-400);
+ font-family: 'Space Mono';
+ font-size: 14px;
+ font-style: normal;
+ font-weight: 500;
+ line-height: 20px; /* 142.857% */
+ letter-spacing: -0.07px;
+ text-transform: uppercase;
+ width: 100%;
+ }
+ }
+}
+.option:hover {
+ .container {
+ .left-section {
+ .value {
+ color: var(--bg-vanilla-100);
+ }
+ }
+ }
+ .container-without-tag {
+ .value {
+ color: var(--bg-vanilla-100);
+ }
+ }
+}
diff --git a/frontend/src/container/QueryBuilder/filters/QueryBuilderSearchV2/Suggestions.tsx b/frontend/src/container/QueryBuilder/filters/QueryBuilderSearchV2/Suggestions.tsx
new file mode 100644
index 0000000000..49d6040b7b
--- /dev/null
+++ b/frontend/src/container/QueryBuilder/filters/QueryBuilderSearchV2/Suggestions.tsx
@@ -0,0 +1,75 @@
+import './Suggestions.styles.scss';
+
+import { Color } from '@signozhq/design-tokens';
+import { Tooltip, Typography } from 'antd';
+import cx from 'classnames';
+import { isEmpty, isObject } from 'lodash-es';
+import { Zap } from 'lucide-react';
+import { useMemo, useState } from 'react';
+import { BaseAutocompleteData } from 'types/api/queryBuilder/queryAutocompleteResponse';
+
+import { DropdownState } from './QueryBuilderSearchV2';
+
+interface ISuggestionsProps {
+ label: string;
+ value: BaseAutocompleteData | string;
+ option: DropdownState;
+}
+
+function Suggestions(props: ISuggestionsProps): React.ReactElement {
+ const { label, value, option } = props;
+
+ const optionType = useMemo(() => {
+ if (isObject(value)) {
+ return value.type;
+ }
+ return '';
+ }, [value]);
+
+ const [truncated, setTruncated] = useState
+ {!isEmpty(optionType) && isObject(value) ? (
+
+
+ ) : (
+
+
+ )}
+
+ );
+}
+
+export default Suggestions;
diff --git a/frontend/src/container/QueryBuilder/type.ts b/frontend/src/container/QueryBuilder/type.ts
index 892330ebdd..183dd157f8 100644
--- a/frontend/src/container/QueryBuilder/type.ts
+++ b/frontend/src/container/QueryBuilder/type.ts
@@ -15,4 +15,5 @@ export type Option = {
label: string;
selected?: boolean;
dataType?: string;
+ isIndexed?: boolean;
};
diff --git a/frontend/src/container/SideNav/NavItem/NavItem.styles.scss b/frontend/src/container/SideNav/NavItem/NavItem.styles.scss
index aea7b3a0ee..ede4376033 100644
--- a/frontend/src/container/SideNav/NavItem/NavItem.styles.scss
+++ b/frontend/src/container/SideNav/NavItem/NavItem.styles.scss
@@ -75,6 +75,10 @@
text-overflow: ellipsis;
}
}
+
+ .beta-tag {
+ padding-right: 0;
+ }
}
.lightMode {
diff --git a/frontend/src/container/SideNav/NavItem/NavItem.tsx b/frontend/src/container/SideNav/NavItem/NavItem.tsx
index aa9b57707e..97a8cdb0ed 100644
--- a/frontend/src/container/SideNav/NavItem/NavItem.tsx
+++ b/frontend/src/container/SideNav/NavItem/NavItem.tsx
@@ -24,14 +24,16 @@ export default function NavItem({
onClick={(event): void => onClick(event)}
>
-
+
+ {value.isIndexed ? (
+ setTruncated(ellipsis) }}
+ >
+ {label}
+
+
+
+ {value.dataType}
+
+
+ {value.type}
+
+
+
+
+
+ setTruncated(ellipsis) }}
+ >
+ {`${label}`}
+
+
+
+
diff --git a/frontend/src/container/SideNav/SideNav.tsx b/frontend/src/container/SideNav/SideNav.tsx
index d4ad27908c..1ba863d8ec 100644
--- a/frontend/src/container/SideNav/SideNav.tsx
+++ b/frontend/src/container/SideNav/SideNav.tsx
@@ -347,6 +347,10 @@ function SideNav({
onClickHandler(ROUTES.ALL_DASHBOARD, null),
);
+ registerShortcut(GlobalShortcuts.NavigateToMessagingQueues, () =>
+ onClickHandler(ROUTES.MESSAGING_QUEUES, null),
+ );
+
registerShortcut(GlobalShortcuts.NavigateToAlerts, () =>
onClickHandler(ROUTES.LIST_ALL_ALERT, null),
);
@@ -362,6 +366,7 @@ function SideNav({
deregisterShortcut(GlobalShortcuts.NavigateToDashboards);
deregisterShortcut(GlobalShortcuts.NavigateToAlerts);
deregisterShortcut(GlobalShortcuts.NavigateToExceptions);
+ deregisterShortcut(GlobalShortcuts.NavigateToMessagingQueues);
};
}, [deregisterShortcut, onClickHandler, onCollapse, registerShortcut]);
diff --git a/frontend/src/container/SideNav/config.ts b/frontend/src/container/SideNav/config.ts
index 95028b0a05..37e9db4d9f 100644
--- a/frontend/src/container/SideNav/config.ts
+++ b/frontend/src/container/SideNav/config.ts
@@ -48,4 +48,6 @@ export const routeConfig: Record = {
[ROUTES.TRACE_EXPLORER]: [QueryParams.resourceAttributes],
[ROUTES.LOGS_PIPELINES]: [QueryParams.resourceAttributes],
[ROUTES.WORKSPACE_LOCKED]: [QueryParams.resourceAttributes],
+ [ROUTES.MESSAGING_QUEUES]: [QueryParams.resourceAttributes],
+ [ROUTES.MESSAGING_QUEUES_DETAIL]: [QueryParams.resourceAttributes],
};
diff --git a/frontend/src/container/SideNav/menuItems.tsx b/frontend/src/container/SideNav/menuItems.tsx
index 2039e4df8e..be694227a1 100644
--- a/frontend/src/container/SideNav/menuItems.tsx
+++ b/frontend/src/container/SideNav/menuItems.tsx
@@ -10,6 +10,7 @@ import {
FileKey2,
Layers2,
LayoutGrid,
+ ListMinus,
MessageSquare,
Receipt,
Route,
@@ -86,6 +87,12 @@ const menuItems: SidebarItem[] = [
label: 'Dashboards',
icon: = {
[ROUTES.BILLING]: 'Billing',
[ROUTES.SUPPORT]: 'Support',
[ROUTES.WORKSPACE_LOCKED]: 'Workspace Locked',
+ [ROUTES.MESSAGING_QUEUES]: 'Messaging Queues',
};
function ShowBreadcrumbs(props: RouteComponentProps): JSX.Element {
diff --git a/frontend/src/container/TopNav/DateTimeSelectionV2/config.ts b/frontend/src/container/TopNav/DateTimeSelectionV2/config.ts
index 473107265e..b652a68202 100644
--- a/frontend/src/container/TopNav/DateTimeSelectionV2/config.ts
+++ b/frontend/src/container/TopNav/DateTimeSelectionV2/config.ts
@@ -208,6 +208,8 @@ export const routesToSkip = [
ROUTES.DASHBOARD,
ROUTES.DASHBOARD_WIDGET,
ROUTES.SERVICE_TOP_LEVEL_OPERATIONS,
+ ROUTES.MESSAGING_QUEUES,
+ ROUTES.MESSAGING_QUEUES_DETAIL,
];
export const routesToDisable = [ROUTES.LOGS_EXPLORER, ROUTES.LIVE_LOGS];
diff --git a/frontend/src/container/TopNav/DateTimeSelectionV2/index.tsx b/frontend/src/container/TopNav/DateTimeSelectionV2/index.tsx
index 2b553f8017..3895d8b38c 100644
--- a/frontend/src/container/TopNav/DateTimeSelectionV2/index.tsx
+++ b/frontend/src/container/TopNav/DateTimeSelectionV2/index.tsx
@@ -468,7 +468,6 @@ function DateTimeSelection({
if (updatedTime !== 'custom') {
urlQuery.delete('startTime');
urlQuery.delete('endTime');
-
urlQuery.set(QueryParams.relativeTime, updatedTime);
} else {
const startTime = preStartTime.toString();
@@ -476,6 +475,7 @@ function DateTimeSelection({
urlQuery.set(QueryParams.startTime, startTime);
urlQuery.set(QueryParams.endTime, endTime);
+ urlQuery.delete(QueryParams.relativeTime);
}
const generatedUrl = `${location.pathname}?${urlQuery.toString()}`;
diff --git a/frontend/src/container/TraceDetail/index.tsx b/frontend/src/container/TraceDetail/index.tsx
index 38f6db7c08..096b648acf 100644
--- a/frontend/src/container/TraceDetail/index.tsx
+++ b/frontend/src/container/TraceDetail/index.tsx
@@ -219,10 +219,18 @@ function TraceDetail({ response }: TraceDetailProps): JSX.Element {
- }>
+ }
+ data-testid="span-focus-btn"
+ >
Focus on selected span
-
@@ -262,6 +270,7 @@ function TraceDetail({ response }: TraceDetailProps): JSX.Element {
collapsedWidth={40}
defaultCollapsed
onCollapse={(value): void => setCollapsed(value)}
+ data-testid="span-details-sider"
>
{!collapsed && (
diff --git a/frontend/src/hooks/logs/types.ts b/frontend/src/hooks/logs/types.ts
index 3dbcbb61f1..e76e2de794 100644
--- a/frontend/src/hooks/logs/types.ts
+++ b/frontend/src/hooks/logs/types.ts
@@ -12,7 +12,6 @@ export type UseCopyLogLink = {
isHighlighted: boolean;
isLogsExplorerPage: boolean;
activeLogId: string | null;
- timeRange: LogTimeRange | null;
onLogCopy: MouseEventHandler;
onTimeRangeChange: (newTimeRange: LogTimeRange | null) => void;
};
@@ -28,4 +27,9 @@ export type UseActiveLog = {
isJSON?: boolean,
dataType?: DataTypes,
) => void;
+ onGroupByAttribute: (
+ fieldKey: string,
+ isJSON?: boolean,
+ dataType?: DataTypes,
+ ) => Promise;
};
diff --git a/frontend/src/hooks/logs/useActiveLog.ts b/frontend/src/hooks/logs/useActiveLog.ts
index a56c13c72e..0a968c4650 100644
--- a/frontend/src/hooks/logs/useActiveLog.ts
+++ b/frontend/src/hooks/logs/useActiveLog.ts
@@ -128,6 +128,54 @@ export const useActiveLog = (): UseActiveLog => {
[currentQuery, notifications, queryClient, redirectWithQueryBuilderData],
);
+ const onGroupByAttribute = useCallback(
+ async (
+ fieldKey: string,
+ isJSON?: boolean,
+ dataType?: DataTypes,
+ ): Promise => {
+ try {
+ const keysAutocompleteResponse = await queryClient.fetchQuery(
+ [QueryBuilderKeys.GET_AGGREGATE_KEYS, fieldKey],
+ // eslint-disable-next-line sonarjs/no-identical-functions
+ async () =>
+ getAggregateKeys({
+ searchText: fieldKey,
+ aggregateOperator: currentQuery.builder.queryData[0].aggregateOperator,
+ dataSource: currentQuery.builder.queryData[0].dataSource,
+ aggregateAttribute:
+ currentQuery.builder.queryData[0].aggregateAttribute.key,
+ }),
+ );
+
+ const keysAutocomplete: BaseAutocompleteData[] =
+ keysAutocompleteResponse.payload?.attributeKeys || [];
+
+ const existAutocompleteKey = chooseAutocompleteFromCustomValue(
+ keysAutocomplete,
+ fieldKey,
+ isJSON,
+ dataType,
+ );
+
+ const nextQuery: Query = {
+ ...currentQuery,
+ builder: {
+ ...currentQuery.builder,
+ queryData: currentQuery.builder.queryData.map((item) => ({
+ ...item,
+ groupBy: [...item.groupBy, existAutocompleteKey],
+ })),
+ },
+ };
+
+ redirectWithQueryBuilderData(nextQuery);
+ } catch {
+ notifications.error({ message: SOMETHING_WENT_WRONG });
+ }
+ },
+ [currentQuery, notifications, queryClient, redirectWithQueryBuilderData],
+ );
const onAddToQueryLogs = useCallback(
(fieldKey: string, fieldValue: string, operator: string) => {
const updatedQueryString = getGeneratedFilterQueryString(
@@ -147,5 +195,6 @@ export const useActiveLog = (): UseActiveLog => {
onSetActiveLog,
onClearActiveLog,
onAddToQuery: isLogsPage ? onAddToQueryLogs : onAddToQueryExplorer,
+ onGroupByAttribute,
};
};
diff --git a/frontend/src/hooks/logs/useCopyLogLink.ts b/frontend/src/hooks/logs/useCopyLogLink.ts
index 8dee58c710..b3b512f380 100644
--- a/frontend/src/hooks/logs/useCopyLogLink.ts
+++ b/frontend/src/hooks/logs/useCopyLogLink.ts
@@ -26,33 +26,25 @@ export const useCopyLogLink = (logId?: string): UseCopyLogLink => {
const [, setCopy] = useCopyToClipboard();
const { notifications } = useNotifications();
- const { queryData: timeRange } = useUrlQueryData(
- QueryParams.timeRange,
- null,
- );
-
const { queryData: activeLogId } = useUrlQueryData(
QueryParams.activeLogId,
null,
);
- const { selectedTime } = useSelector(
- (state) => state.globalTime,
- );
+ const { selectedTime, minTime, maxTime } = useSelector<
+ AppState,
+ GlobalReducer
+ >((state) => state.globalTime);
const onTimeRangeChange = useCallback(
(newTimeRange: LogTimeRange | null): void => {
- urlQuery.set(QueryParams.timeRange, JSON.stringify(newTimeRange));
-
if (selectedTime !== 'custom') {
urlQuery.delete(QueryParams.startTime);
urlQuery.delete(QueryParams.endTime);
-
urlQuery.set(QueryParams.relativeTime, selectedTime);
} else {
urlQuery.set(QueryParams.startTime, newTimeRange?.start.toString() || '');
urlQuery.set(QueryParams.endTime, newTimeRange?.end.toString() || '');
-
urlQuery.delete(QueryParams.relativeTime);
}
@@ -76,14 +68,12 @@ export const useCopyLogLink = (logId?: string): UseCopyLogLink => {
event.preventDefault();
event.stopPropagation();
- const range = JSON.stringify(timeRange);
-
urlQuery.delete(QueryParams.activeLogId);
- urlQuery.delete(QueryParams.timeRange);
+ urlQuery.delete(QueryParams.relativeTime);
+
urlQuery.set(QueryParams.activeLogId, `"${logId}"`);
- urlQuery.set(QueryParams.timeRange, range);
- urlQuery.set(QueryParams.startTime, timeRange?.start.toString() || '');
- urlQuery.set(QueryParams.endTime, timeRange?.end.toString() || '');
+ urlQuery.set(QueryParams.startTime, minTime?.toString() || '');
+ urlQuery.set(QueryParams.endTime, maxTime?.toString() || '');
const link = `${window.location.origin}${pathname}?${urlQuery.toString()}`;
@@ -92,7 +82,7 @@ export const useCopyLogLink = (logId?: string): UseCopyLogLink => {
message: 'Copied to clipboard',
});
},
- [logId, timeRange, urlQuery, pathname, setCopy, notifications],
+ [logId, urlQuery, minTime, maxTime, pathname, setCopy, notifications],
);
useEffect(() => {
@@ -110,7 +100,6 @@ export const useCopyLogLink = (logId?: string): UseCopyLogLink => {
isHighlighted,
isLogsExplorerPage,
activeLogId,
- timeRange,
onLogCopy,
onTimeRangeChange,
};
diff --git a/frontend/src/hooks/queryBuilder/useAutoComplete.ts b/frontend/src/hooks/queryBuilder/useAutoComplete.ts
index 8872b2dc02..ed1836a0fa 100644
--- a/frontend/src/hooks/queryBuilder/useAutoComplete.ts
+++ b/frontend/src/hooks/queryBuilder/useAutoComplete.ts
@@ -8,7 +8,10 @@ import {
import { Option } from 'container/QueryBuilder/type';
import { parse } from 'papaparse';
import { KeyboardEvent, useCallback, useState } from 'react';
-import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData';
+import {
+ IBuilderQuery,
+ TagFilter,
+} from 'types/api/queryBuilder/queryBuilderData';
import { useFetchKeysAndValues } from './useFetchKeysAndValues';
import { useOptions, WHERE_CLAUSE_CUSTOM_SUFFIX } from './useOptions';
@@ -24,14 +27,16 @@ export type WhereClauseConfig = {
export const useAutoComplete = (
query: IBuilderQuery,
whereClauseConfig?: WhereClauseConfig,
+ shouldUseSuggestions?: boolean,
): IAutoComplete => {
const [searchValue, setSearchValue] = useState('');
const [searchKey, setSearchKey] = useState('');
- const { keys, results, isFetching } = useFetchKeysAndValues(
+ const { keys, results, isFetching, exampleQueries } = useFetchKeysAndValues(
searchValue,
query,
searchKey,
+ shouldUseSuggestions,
);
const [key, operator, result] = useSetCurrentKeyAndOperator(searchValue, keys);
@@ -144,6 +149,8 @@ export const useAutoComplete = (
isFetching,
setSearchKey,
searchKey,
+ key,
+ exampleQueries,
};
};
@@ -161,4 +168,6 @@ interface IAutoComplete {
isFetching: boolean;
setSearchKey: (value: string) => void;
searchKey: string;
+ key: string;
+ exampleQueries: TagFilter[];
}
diff --git a/frontend/src/hooks/queryBuilder/useFetchKeysAndValues.ts b/frontend/src/hooks/queryBuilder/useFetchKeysAndValues.ts
index db54685b8e..6fd42175ad 100644
--- a/frontend/src/hooks/queryBuilder/useFetchKeysAndValues.ts
+++ b/frontend/src/hooks/queryBuilder/useFetchKeysAndValues.ts
@@ -6,17 +6,21 @@ import {
isInNInOperator,
} from 'container/QueryBuilder/filters/QueryBuilderSearch/utils';
import useDebounceValue from 'hooks/useDebounce';
-import { isEqual, uniqWith } from 'lodash-es';
+import { cloneDeep, isEqual, uniqWith, unset } from 'lodash-es';
import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
import { useDebounce } from 'react-use';
import {
BaseAutocompleteData,
DataTypes,
} from 'types/api/queryBuilder/queryAutocompleteResponse';
-import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData';
+import {
+ IBuilderQuery,
+ TagFilter,
+} from 'types/api/queryBuilder/queryBuilderData';
import { DataSource } from 'types/common/queryBuilder';
import { useGetAggregateKeys } from './useGetAggregateKeys';
+import { useGetAttributeSuggestions } from './useGetAttributeSuggestions';
type IuseFetchKeysAndValues = {
keys: BaseAutocompleteData[];
@@ -24,6 +28,7 @@ type IuseFetchKeysAndValues = {
isFetching: boolean;
sourceKeys: BaseAutocompleteData[];
handleRemoveSourceKey: (newSourceKey: string) => void;
+ exampleQueries: TagFilter[];
};
/**
@@ -37,8 +42,10 @@ export const useFetchKeysAndValues = (
searchValue: string,
query: IBuilderQuery,
searchKey: string,
+ shouldUseSuggestions?: boolean,
): IuseFetchKeysAndValues => {
const [keys, setKeys] = useState([]);
+ const [exampleQueries, setExampleQueries] = useState([]);
const [sourceKeys, setSourceKeys] = useState([]);
const [results, setResults] = useState([]);
const [isAggregateFetching, setAggregateFetching] = useState(false);
@@ -60,18 +67,34 @@ export const useFetchKeysAndValues = (
const searchParams = useDebounceValue(memoizedSearchParams, DEBOUNCE_DELAY);
+ const queryFiltersWithoutId = useMemo(
+ () => ({
+ ...query.filters,
+ items: query.filters.items.map((item) => {
+ const filterWithoutId = cloneDeep(item);
+ unset(filterWithoutId, 'id');
+ return filterWithoutId;
+ }),
+ }),
+ [query.filters],
+ );
+
+ const memoizedSuggestionsParams = useMemo(
+ () => [searchKey, query.dataSource, queryFiltersWithoutId],
+ [query.dataSource, queryFiltersWithoutId, searchKey],
+ );
+
+ const suggestionsParams = useDebounceValue(
+ memoizedSuggestionsParams,
+ DEBOUNCE_DELAY,
+ );
+
const isQueryEnabled = useMemo(
() =>
query.dataSource === DataSource.METRICS
- ? !!query.aggregateOperator &&
- !!query.dataSource &&
- !!query.aggregateAttribute.dataType
+ ? !!query.dataSource && !!query.aggregateAttribute.dataType
: true,
- [
- query.aggregateAttribute.dataType,
- query.aggregateOperator,
- query.dataSource,
- ],
+ [query.aggregateAttribute.dataType, query.dataSource],
);
const { data, isFetching, status } = useGetAggregateKeys(
@@ -82,7 +105,26 @@ export const useFetchKeysAndValues = (
aggregateAttribute: query.aggregateAttribute.key,
tagType: query.aggregateAttribute.type ?? null,
},
- { queryKey: [searchParams], enabled: isQueryEnabled },
+ {
+ queryKey: [searchParams],
+ enabled: isQueryEnabled && !shouldUseSuggestions,
+ },
+ );
+
+ const {
+ data: suggestionsData,
+ isFetching: isFetchingSuggestions,
+ status: fetchingSuggestionsStatus,
+ } = useGetAttributeSuggestions(
+ {
+ searchText: searchKey,
+ dataSource: query.dataSource,
+ filters: query.filters,
+ },
+ {
+ queryKey: [suggestionsParams],
+ enabled: isQueryEnabled && shouldUseSuggestions,
+ },
);
/**
@@ -162,11 +204,41 @@ export const useFetchKeysAndValues = (
}
}, [data?.payload?.attributeKeys, status]);
+ useEffect(() => {
+ if (
+ fetchingSuggestionsStatus === 'success' &&
+ suggestionsData?.payload?.attributes
+ ) {
+ setKeys(suggestionsData.payload.attributes);
+ setSourceKeys((prevState) =>
+ uniqWith(
+ [...(suggestionsData.payload.attributes ?? []), ...prevState],
+ isEqual,
+ ),
+ );
+ } else {
+ setKeys([]);
+ }
+ if (
+ fetchingSuggestionsStatus === 'success' &&
+ suggestionsData?.payload?.example_queries
+ ) {
+ setExampleQueries(suggestionsData.payload.example_queries);
+ } else {
+ setExampleQueries([]);
+ }
+ }, [
+ suggestionsData?.payload?.attributes,
+ fetchingSuggestionsStatus,
+ suggestionsData?.payload?.example_queries,
+ ]);
+
return {
keys,
results,
- isFetching: isFetching || isAggregateFetching,
+ isFetching: isFetching || isAggregateFetching || isFetchingSuggestions,
sourceKeys,
handleRemoveSourceKey,
+ exampleQueries,
};
};
diff --git a/frontend/src/hooks/queryBuilder/useGetAggregateValues.ts b/frontend/src/hooks/queryBuilder/useGetAggregateValues.ts
new file mode 100644
index 0000000000..d749e5ec9a
--- /dev/null
+++ b/frontend/src/hooks/queryBuilder/useGetAggregateValues.ts
@@ -0,0 +1,33 @@
+import { getAttributesValues } from 'api/queryBuilder/getAttributesValues';
+import { useMemo } from 'react';
+import { useQuery, UseQueryOptions, UseQueryResult } from 'react-query';
+import { ErrorResponse, SuccessResponse } from 'types/api';
+import {
+ IAttributeValuesResponse,
+ IGetAttributeValuesPayload,
+} from 'types/api/queryBuilder/getAttributesValues';
+
+type UseGetAttributeValues = (
+ requestData: IGetAttributeValuesPayload,
+ options?: UseQueryOptions<
+ SuccessResponse | ErrorResponse
+ >,
+) => UseQueryResult | ErrorResponse>;
+
+export const useGetAggregateValues: UseGetAttributeValues = (
+ requestData,
+ options,
+) => {
+ const queryKey = useMemo(() => {
+ if (options?.queryKey && Array.isArray(options.queryKey)) {
+ return [...options.queryKey];
+ }
+ return [requestData];
+ }, [options?.queryKey, requestData]);
+
+ return useQuery | ErrorResponse>({
+ queryKey,
+ queryFn: () => getAttributesValues(requestData),
+ ...options,
+ });
+};
diff --git a/frontend/src/hooks/queryBuilder/useGetAttributeSuggestions.ts b/frontend/src/hooks/queryBuilder/useGetAttributeSuggestions.ts
new file mode 100644
index 0000000000..d2ee7042cd
--- /dev/null
+++ b/frontend/src/hooks/queryBuilder/useGetAttributeSuggestions.ts
@@ -0,0 +1,38 @@
+import { getAttributeSuggestions } from 'api/queryBuilder/getAttributeSuggestions';
+import { QueryBuilderKeys } from 'constants/queryBuilder';
+import { useMemo } from 'react';
+import { useQuery, UseQueryOptions, UseQueryResult } from 'react-query';
+import { ErrorResponse, SuccessResponse } from 'types/api';
+import {
+ IGetAttributeSuggestionsPayload,
+ IGetAttributeSuggestionsSuccessResponse,
+} from 'types/api/queryBuilder/getAttributeSuggestions';
+
+type UseGetAttributeSuggestions = (
+ requestData: IGetAttributeSuggestionsPayload,
+ options?: UseQueryOptions<
+ SuccessResponse | ErrorResponse
+ >,
+) => UseQueryResult<
+ SuccessResponse | ErrorResponse
+>;
+
+export const useGetAttributeSuggestions: UseGetAttributeSuggestions = (
+ requestData,
+ options,
+) => {
+ const queryKey = useMemo(() => {
+ if (options?.queryKey && Array.isArray(options.queryKey)) {
+ return [QueryBuilderKeys.GET_ATTRIBUTE_SUGGESTIONS, ...options.queryKey];
+ }
+ return [QueryBuilderKeys.GET_ATTRIBUTE_SUGGESTIONS, requestData];
+ }, [options?.queryKey, requestData]);
+
+ return useQuery<
+ SuccessResponse | ErrorResponse
+ >({
+ queryKey,
+ queryFn: () => getAttributeSuggestions(requestData),
+ ...options,
+ });
+};
diff --git a/frontend/src/hooks/queryBuilder/useGetExplorerQueryRange.ts b/frontend/src/hooks/queryBuilder/useGetExplorerQueryRange.ts
index cdcfb3e0c7..13093ab254 100644
--- a/frontend/src/hooks/queryBuilder/useGetExplorerQueryRange.ts
+++ b/frontend/src/hooks/queryBuilder/useGetExplorerQueryRange.ts
@@ -1,6 +1,6 @@
import { initialQueriesMap, PANEL_TYPES } from 'constants/queryBuilder';
import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
-import { useMemo } from 'react';
+import { MutableRefObject, useMemo } from 'react';
import { UseQueryOptions, UseQueryResult } from 'react-query';
import { useSelector } from 'react-redux';
import { AppState } from 'store/reducers';
@@ -19,6 +19,8 @@ export const useGetExplorerQueryRange = (
options?: UseQueryOptions, Error>,
params?: Record,
isDependentOnQB = true,
+ keyRef?: MutableRefObject,
+ headers?: Record,
): UseQueryResult, Error> => {
const { isEnabledQuery } = useQueryBuilder();
const { selectedTime: globalSelectedInterval, minTime, maxTime } = useSelector<
@@ -40,6 +42,11 @@ export const useGetExplorerQueryRange = (
return isEnabledQuery;
}, [options, isEnabledQuery, isDependentOnQB]);
+ if (keyRef) {
+ // eslint-disable-next-line no-param-reassign
+ keyRef.current = [key, globalSelectedInterval, requestData, minTime, maxTime];
+ }
+
return useGetQueryRange(
{
graphType: panelType || PANEL_TYPES.LIST,
@@ -55,5 +62,6 @@ export const useGetExplorerQueryRange = (
queryKey: [key, globalSelectedInterval, requestData, minTime, maxTime],
enabled: isEnabled,
},
+ headers,
);
};
diff --git a/frontend/src/hooks/queryBuilder/useGetQueryRange.ts b/frontend/src/hooks/queryBuilder/useGetQueryRange.ts
index 334ee7f628..e0c6ea3172 100644
--- a/frontend/src/hooks/queryBuilder/useGetQueryRange.ts
+++ b/frontend/src/hooks/queryBuilder/useGetQueryRange.ts
@@ -13,12 +13,14 @@ type UseGetQueryRange = (
requestData: GetQueryResultsProps,
version: string,
options?: UseQueryOptions, Error>,
+ headers?: Record,
) => UseQueryResult, Error>;
export const useGetQueryRange: UseGetQueryRange = (
requestData,
version,
options,
+ headers,
) => {
const newRequestData: GetQueryResultsProps = useMemo(
() => ({
@@ -45,7 +47,7 @@ export const useGetQueryRange: UseGetQueryRange = (
return useQuery, Error>({
queryFn: async ({ signal }) =>
- GetMetricQueryRange(requestData, version, signal),
+ GetMetricQueryRange(requestData, version, signal, headers),
...options,
queryKey,
});
diff --git a/frontend/src/hooks/queryBuilder/useIsValidTag.ts b/frontend/src/hooks/queryBuilder/useIsValidTag.ts
index 216971b0ac..d4e2b58080 100644
--- a/frontend/src/hooks/queryBuilder/useIsValidTag.ts
+++ b/frontend/src/hooks/queryBuilder/useIsValidTag.ts
@@ -2,7 +2,7 @@ import { useMemo } from 'react';
import { OperatorType } from './useOperatorType';
-const validationMapper: Record<
+export const validationMapper: Record<
OperatorType,
(resultLength: number) => boolean
> = {
diff --git a/frontend/src/hooks/queryBuilder/useOperatorType.ts b/frontend/src/hooks/queryBuilder/useOperatorType.ts
index 94de55df92..1ff0619506 100644
--- a/frontend/src/hooks/queryBuilder/useOperatorType.ts
+++ b/frontend/src/hooks/queryBuilder/useOperatorType.ts
@@ -6,7 +6,7 @@ export type OperatorType =
| 'NON_VALUE'
| 'NOT_VALID';
-const operatorTypeMapper: Record = {
+export const operatorTypeMapper: Record = {
[OPERATORS.IN]: 'MULTIPLY_VALUE',
[OPERATORS.NIN]: 'MULTIPLY_VALUE',
[OPERATORS.EXISTS]: 'NON_VALUE',
diff --git a/frontend/src/hooks/queryBuilder/useOptions.ts b/frontend/src/hooks/queryBuilder/useOptions.ts
index f050d19f82..2f24dd0d21 100644
--- a/frontend/src/hooks/queryBuilder/useOptions.ts
+++ b/frontend/src/hooks/queryBuilder/useOptions.ts
@@ -45,6 +45,7 @@ export const useOptions = (
label: `${getLabel(item)}`,
value: item.key,
dataType: item.dataType,
+ isIndexed: item?.isIndexed,
})),
[getLabel],
);
diff --git a/frontend/src/hooks/useLogsData.ts b/frontend/src/hooks/useLogsData.ts
index 16e550ba56..a26e57abfa 100644
--- a/frontend/src/hooks/useLogsData.ts
+++ b/frontend/src/hooks/useLogsData.ts
@@ -7,6 +7,8 @@ import {
import { DEFAULT_PER_PAGE_VALUE } from 'container/Controls/config';
import { getPaginationQueryData } from 'lib/newQueryBuilder/getPaginationQueryData';
import { useEffect, useMemo, useState } from 'react';
+import { useSelector } from 'react-redux';
+import { AppState } from 'store/reducers';
import { ILog } from 'types/api/logs/log';
import {
IBuilderQuery,
@@ -15,6 +17,7 @@ import {
TagFilter,
} from 'types/api/queryBuilder/queryBuilderData';
import { QueryDataV3 } from 'types/api/widgets/getQuery';
+import { GlobalReducer } from 'types/reducer/globalTime';
import { LogTimeRange } from './logs/types';
import { useCopyLogLink } from './logs/useCopyLogLink';
@@ -39,6 +42,10 @@ export const useLogsData = ({
const [requestData, setRequestData] = useState(null);
const [shouldLoadMoreLogs, setShouldLoadMoreLogs] = useState(false);
+ const { minTime, maxTime } = useSelector(
+ (state) => state.globalTime,
+ );
+
const { queryData: pageSize } = useUrlQueryData(
QueryParams.pageSize,
DEFAULT_PER_PAGE_VALUE,
@@ -122,7 +129,7 @@ export const useLogsData = ({
return data;
};
- const { activeLogId, timeRange, onTimeRangeChange } = useCopyLogLink();
+ const { activeLogId, onTimeRangeChange } = useCopyLogLink();
const { data, isFetching } = useGetExplorerQueryRange(
requestData,
@@ -133,11 +140,10 @@ export const useLogsData = ({
enabled: !isLimit && !!requestData,
},
{
- ...(timeRange &&
- activeLogId &&
+ ...(activeLogId &&
!logs.length && {
- start: timeRange.start,
- end: timeRange.end,
+ start: minTime,
+ end: maxTime,
}),
},
shouldLoadMoreLogs,
@@ -156,7 +162,7 @@ export const useLogsData = ({
setLogs(newLogs);
onTimeRangeChange({
start: currentParams?.start,
- end: timeRange?.end || currentParams?.end,
+ end: currentParams?.end,
pageSize: newLogs.length,
});
}
diff --git a/frontend/src/lib/dashboard/getQueryResults.ts b/frontend/src/lib/dashboard/getQueryResults.ts
index 50e6648924..03ad5f8caa 100644
--- a/frontend/src/lib/dashboard/getQueryResults.ts
+++ b/frontend/src/lib/dashboard/getQueryResults.ts
@@ -23,6 +23,7 @@ export async function GetMetricQueryRange(
props: GetQueryResultsProps,
version: string,
signal?: AbortSignal,
+ headers?: Record,
): Promise> {
const { legendMap, queryPayload } = prepareQueryRangePayload(props);
@@ -30,6 +31,7 @@ export async function GetMetricQueryRange(
queryPayload,
version || 'v3',
signal,
+ headers,
);
if (response.statusCode >= 400) {
diff --git a/frontend/src/lib/uPlotLib/getUplotChartOptions.ts b/frontend/src/lib/uPlotLib/getUplotChartOptions.ts
index 29904f0d6a..5000b0f0d8 100644
--- a/frontend/src/lib/uPlotLib/getUplotChartOptions.ts
+++ b/frontend/src/lib/uPlotLib/getUplotChartOptions.ts
@@ -53,6 +53,7 @@ export interface GetUPlotChartOptions {
[key: string]: boolean;
}>
>;
+ customTooltipElement?: HTMLDivElement;
}
/** the function converts series A , series B , series C to
@@ -154,6 +155,7 @@ export const getUPlotChartOptions = ({
stackBarChart: stackChart,
hiddenGraph,
setHiddenGraph,
+ customTooltipElement,
}: GetUPlotChartOptions): uPlot.Options => {
const timeScaleProps = getXAxisScale(minTimeScale, maxTimeScale);
@@ -209,9 +211,16 @@ export const getUPlotChartOptions = ({
},
},
plugins: [
- tooltipPlugin({ apiResponse, yAxisUnit, stackBarChart, isDarkMode }),
+ tooltipPlugin({
+ apiResponse,
+ yAxisUnit,
+ stackBarChart,
+ isDarkMode,
+ customTooltipElement,
+ }),
onClickPlugin({
onClick: onClickHandler,
+ apiResponse,
}),
],
hooks: {
diff --git a/frontend/src/lib/uPlotLib/plugins/onClickPlugin.ts b/frontend/src/lib/uPlotLib/plugins/onClickPlugin.ts
index 7dfbbe9b47..fafc4afe64 100644
--- a/frontend/src/lib/uPlotLib/plugins/onClickPlugin.ts
+++ b/frontend/src/lib/uPlotLib/plugins/onClickPlugin.ts
@@ -1,10 +1,16 @@
+import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
+
export interface OnClickPluginOpts {
onClick: (
xValue: number,
yValue: number,
mouseX: number,
mouseY: number,
+ data?: {
+ [key: string]: string;
+ },
) => void;
+ apiResponse?: MetricRangePayloadProps;
}
function onClickPlugin(opts: OnClickPluginOpts): uPlot.Plugin {
@@ -22,9 +28,24 @@ function onClickPlugin(opts: OnClickPluginOpts): uPlot.Plugin {
const xValue = u.posToVal(event.offsetX, 'x');
const yValue = u.posToVal(event.offsetY, 'y');
- opts.onClick(xValue, yValue, mouseX, mouseY);
- };
+ let metric = {};
+ const { series } = u;
+ const apiResult = opts.apiResponse?.data?.result || [];
+ // this is to get the metric value of the focused series
+ if (Array.isArray(series) && series.length > 0) {
+ series.forEach((item, index) => {
+ // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+ // @ts-ignore
+ if (item?.show && item?._focus) {
+ const { metric: focusedMetric } = apiResult[index - 1] || [];
+ metric = focusedMetric;
+ }
+ });
+ }
+
+ opts.onClick(xValue, yValue, mouseX, mouseY, metric);
+ };
u.over.addEventListener('click', handleClick);
},
destroy: (u: uPlot) => {
diff --git a/frontend/src/lib/uPlotLib/plugins/tooltipPlugin.ts b/frontend/src/lib/uPlotLib/plugins/tooltipPlugin.ts
index 16178fe5f0..882bf73db0 100644
--- a/frontend/src/lib/uPlotLib/plugins/tooltipPlugin.ts
+++ b/frontend/src/lib/uPlotLib/plugins/tooltipPlugin.ts
@@ -222,6 +222,7 @@ type ToolTipPluginProps = {
isMergedSeries?: boolean;
stackBarChart?: boolean;
isDarkMode: boolean;
+ customTooltipElement?: HTMLDivElement;
};
const tooltipPlugin = ({
@@ -232,7 +233,9 @@ const tooltipPlugin = ({
isMergedSeries,
stackBarChart,
isDarkMode,
-}: ToolTipPluginProps): any => {
+ customTooltipElement,
+}: // eslint-disable-next-line sonarjs/cognitive-complexity
+ToolTipPluginProps): any => {
let over: HTMLElement;
let bound: HTMLElement;
let bLeft: any;
@@ -298,6 +301,9 @@ const tooltipPlugin = ({
isMergedSeries,
stackBarChart,
);
+ if (customTooltipElement) {
+ content.appendChild(customTooltipElement);
+ }
overlay.appendChild(content);
placement(overlay, anchor, 'right', 'start', { bound });
}
diff --git a/frontend/src/mocks-server/__mockdata__/explorer_views.ts b/frontend/src/mocks-server/__mockdata__/explorer_views.ts
index ae88071e55..4719e77697 100644
--- a/frontend/src/mocks-server/__mockdata__/explorer_views.ts
+++ b/frontend/src/mocks-server/__mockdata__/explorer_views.ts
@@ -77,5 +77,67 @@ export const explorerView = {
},
extraData: '{"color":"#00ffd0"}',
},
+ {
+ uuid: '8c4bf492-d54d-4ab2-a8d6-9c1563f46e1f',
+ name: 'R-test panel',
+ category: '',
+ createdAt: '2024-07-01T13:45:57.924686766Z',
+ createdBy: 'test-user-test',
+ updatedAt: '2024-07-01T13:48:31.032106578Z',
+ updatedBy: 'test-user-test',
+ sourcePage: 'traces',
+ tags: [''],
+ compositeQuery: {
+ builderQueries: {
+ A: {
+ queryName: 'A',
+ stepInterval: 60,
+ dataSource: 'traces',
+ aggregateOperator: 'noop',
+ aggregateAttribute: {
+ key: '',
+ dataType: '',
+ type: '',
+ isColumn: false,
+ isJSON: false,
+ },
+ filters: {
+ op: 'AND',
+ items: [
+ {
+ key: {
+ key: 'httpMethod',
+ dataType: 'string',
+ type: 'tag',
+ isColumn: true,
+ isJSON: false,
+ },
+ value: 'GET',
+ op: '=',
+ },
+ ],
+ },
+ expression: 'A',
+ disabled: false,
+ limit: 0,
+ offset: 0,
+ pageSize: 0,
+ orderBy: [
+ {
+ columnName: 'timestamp',
+ order: 'desc',
+ },
+ ],
+ reduceTo: 'avg',
+ timeAggregation: 'rate',
+ spaceAggregation: 'sum',
+ ShiftBy: 0,
+ },
+ },
+ panelType: 'list',
+ queryType: 'builder',
+ },
+ extraData: '{"color":"#AD7F58"}',
+ },
],
};
diff --git a/frontend/src/mocks-server/__mockdata__/query_range.ts b/frontend/src/mocks-server/__mockdata__/query_range.ts
index 69ff7bfb66..ef55283a96 100644
--- a/frontend/src/mocks-server/__mockdata__/query_range.ts
+++ b/frontend/src/mocks-server/__mockdata__/query_range.ts
@@ -1,3 +1,4 @@
+/* eslint-disable sonarjs/no-duplicate-string */
import { PANEL_TYPES } from 'constants/queryBuilder';
import { QueryRangePayload } from 'types/api/metrics/getQueryRange';
import { EQueryType } from 'types/common/dashboard';
@@ -77,3 +78,245 @@ export const queryRangeSuccessResponse: QueryRangePayload = {
start: 0,
step: 0,
};
+
+export const queryRangeForTimeSeries = {
+ status: 'success',
+ data: {
+ resultType: '',
+ result: [
+ {
+ queryName: 'A',
+ series: [
+ {
+ labels: {},
+ labelsArray: null,
+ values: [
+ {
+ timestamp: 1721378340000,
+ value: '3074',
+ },
+ {
+ timestamp: 1721378100000,
+ value: '2983',
+ },
+ {
+ timestamp: 1721378040000,
+ value: '2978',
+ },
+ {
+ timestamp: 1721378160000,
+ value: '2940',
+ },
+ {
+ timestamp: 1721377980000,
+ value: '2904',
+ },
+ {
+ timestamp: 1721378280000,
+ value: '2874',
+ },
+ {
+ timestamp: 1721378220000,
+ value: '2667',
+ },
+ ],
+ },
+ ],
+ },
+ ],
+ },
+};
+
+export const queryRangeForListView = {
+ status: 'success',
+ data: {
+ resultType: '',
+ result: [
+ {
+ queryName: 'A',
+ list: [
+ {
+ timestamp: '2024-07-19T08:39:59.949129915Z',
+ data: {
+ dbName: '',
+ durationNano: 790949390,
+ httpMethod: '',
+ name: 'authenticate_check_db',
+ responseStatusCode: '',
+ serviceName: 'demo-app',
+ spanID: '5704353737b6778e',
+ statusCode: 0,
+ traceID: 'a364a8e15af3e9a8c866e0528db8b637',
+ },
+ },
+ {
+ timestamp: '2024-07-19T08:39:59.506524482Z',
+ data: {
+ dbName: '',
+ durationNano: 1375203118,
+ httpMethod: '',
+ name: 'check cart in cache',
+ responseStatusCode: '',
+ serviceName: 'demo-app',
+ spanID: '2134bb1165c928aa',
+ statusCode: 0,
+ traceID: '7b565bc351bac2a12c004d92d3a809b1',
+ },
+ },
+ {
+ timestamp: '2024-07-19T08:39:58.735245Z',
+ data: {
+ dbName: '',
+ durationNano: 55306000,
+ httpMethod: 'GET',
+ name: 'HTTP GET',
+ responseStatusCode: '200',
+ serviceName: 'frontend',
+ spanID: '772c4d29dd9076ac',
+ statusCode: 0,
+ traceID: '0000000000000000344ded1387b08a7e',
+ },
+ },
+ ],
+ },
+ ],
+ },
+};
+
+export const queryRangeForTableView = {
+ status: 'success',
+ data: {
+ resultType: '',
+ result: [
+ {
+ queryName: 'A',
+ series: [
+ {
+ labels: {},
+ labelsArray: null,
+ values: [
+ {
+ timestamp: 1721583834000,
+ value: '87798',
+ },
+ ],
+ },
+ ],
+ },
+ ],
+ },
+};
+
+export const queryRangeForTraceView = {
+ status: 'success',
+ data: {
+ resultType: '',
+ result: [
+ {
+ queryName: 'A',
+ list: [
+ {
+ timestamp: '0001-01-01T00:00:00Z',
+ data: {
+ span_count: 8,
+ 'subQuery.durationNano': 7245231266,
+ 'subQuery.name': 'home',
+ 'subQuery.serviceName': 'demo-app',
+ traceID: '5765b60ba7cc4ddafe8bdaa9c1b4b246',
+ },
+ },
+ {
+ timestamp: '0001-01-01T00:00:00Z',
+ data: {
+ span_count: 8,
+ 'subQuery.durationNano': 7218609120,
+ 'subQuery.name': 'home',
+ 'subQuery.serviceName': 'demo-app',
+ traceID: '1593c896d96cc6b2478bb95dcc01e3f5',
+ },
+ },
+ {
+ timestamp: '0001-01-01T00:00:00Z',
+ data: {
+ span_count: 8,
+ 'subQuery.durationNano': 7217156051,
+ 'subQuery.name': 'home',
+ 'subQuery.serviceName': 'demo-app',
+ traceID: 'dcd145ed13937795c5e2ee8618ec7e32',
+ },
+ },
+ {
+ timestamp: '0001-01-01T00:00:00Z',
+ data: {
+ span_count: 8,
+ 'subQuery.durationNano': 7054152134,
+ 'subQuery.name': 'home',
+ 'subQuery.serviceName': 'demo-app',
+ traceID: 'd9ceed0a6b23ed4b3bff664e2b303382',
+ },
+ },
+ {
+ timestamp: '0001-01-01T00:00:00Z',
+ data: {
+ span_count: 8,
+ 'subQuery.durationNano': 7052324178,
+ 'subQuery.name': 'home',
+ 'subQuery.serviceName': 'demo-app',
+ traceID: 'f76f1acc10a9149121c2bf715d1f92c5',
+ },
+ },
+ {
+ timestamp: '0001-01-01T00:00:00Z',
+ data: {
+ span_count: 8,
+ 'subQuery.durationNano': 6998186102,
+ 'subQuery.name': 'home',
+ 'subQuery.serviceName': 'demo-app',
+ traceID: '1e3acf6649147117836cfdde66e2bde5',
+ },
+ },
+ {
+ timestamp: '0001-01-01T00:00:00Z',
+ data: {
+ span_count: 8,
+ 'subQuery.durationNano': 6898849195,
+ 'subQuery.name': 'home',
+ 'subQuery.serviceName': 'demo-app',
+ traceID: '035b210595493adcef4c7f297a427bb0',
+ },
+ },
+ {
+ timestamp: '0001-01-01T00:00:00Z',
+ data: {
+ span_count: 8,
+ 'subQuery.durationNano': 6829435795,
+ 'subQuery.name': 'home',
+ 'subQuery.serviceName': 'demo-app',
+ traceID: '4ae4d4d082fc6d7a20d90ae0b1d0fff1',
+ },
+ },
+ {
+ timestamp: '0001-01-01T00:00:00Z',
+ data: {
+ span_count: 8,
+ 'subQuery.durationNano': 6790765891,
+ 'subQuery.name': 'home',
+ 'subQuery.serviceName': 'demo-app',
+ traceID: '7975c032b430ac63479e5d578c1f0edd',
+ },
+ },
+ {
+ timestamp: '0001-01-01T00:00:00Z',
+ data: {
+ span_count: 8,
+ 'subQuery.durationNano': 6786616927,
+ 'subQuery.name': 'home',
+ 'subQuery.serviceName': 'demo-app',
+ traceID: 'ce9d3e5d66dbdd41d46d519b615cce52',
+ },
+ },
+ ],
+ },
+ ],
+ },
+};
diff --git a/frontend/src/mocks-server/__mockdata__/tracedetail.ts b/frontend/src/mocks-server/__mockdata__/tracedetail.ts
new file mode 100644
index 0000000000..c0e439f65f
--- /dev/null
+++ b/frontend/src/mocks-server/__mockdata__/tracedetail.ts
@@ -0,0 +1,2089 @@
+/* eslint-disable sonarjs/no-duplicate-string */
+export const traceDetailResponse = [
+ {
+ startTimestampMillis: 1721304358677,
+ endTimestampMillis: 1721304360928,
+ columns: [
+ '__time',
+ 'SpanId',
+ 'TraceId',
+ 'ServiceName',
+ 'Name',
+ 'Kind',
+ 'DurationNano',
+ 'TagsKeys',
+ 'TagsValues',
+ 'References',
+ 'Events',
+ 'HasError',
+ 'StatusMessage',
+ 'StatusCodeString',
+ 'SpanKind',
+ ],
+ events: [
+ [
+ 1721304359454,
+ '74fff7b42cbc923b',
+ '000000000000000071dc9b0a338729b4',
+ 'customer',
+ 'HTTP GET /customer',
+ '2',
+ '348950000',
+ [
+ 'signoz.collector.id',
+ 'client-uuid',
+ 'component',
+ 'host.name',
+ 'http.method',
+ 'http.url',
+ 'ip',
+ 'http.status_code',
+ 'opencensus.exporterversion',
+ 'service.name',
+ ],
+ [
+ '70d440fb-4875-4371-9a13-1bf5117c99e7',
+ '7cd5f22c2034bc4e',
+ 'net/http',
+ '4f6ec470feea',
+ 'GET',
+ '/customer?customer=731',
+ '172.25.0.2',
+ '200',
+ 'Jaeger-Go-2.30.0',
+ 'customer',
+ ],
+ [
+ '{TraceId=000000000000000071dc9b0a338729b4, SpanId=1518282c4475a6d7, RefType=CHILD_OF}',
+ ],
+ [
+ '{"name":"HTTP request received","timeUnixNano":1721304359454282000,"attributeMap":{"level":"info","method":"GET","url":"/customer?customer=731"}}',
+ '{"name":"Loading customer","timeUnixNano":1721304359454308000,"attributeMap":{"customer_id":"731","level":"info"}}',
+ ],
+ false,
+ '',
+ 'Unset',
+ 'Server',
+ ],
+ [
+ 1721304359454,
+ '1518282c4475a6d7',
+ '000000000000000071dc9b0a338729b4',
+ 'frontend',
+ 'HTTP GET',
+ '3',
+ '349380000',
+ [
+ 'net/http.was_idle',
+ 'client-uuid',
+ 'host.name',
+ 'http.status_code',
+ 'net/http.reused',
+ 'opencensus.exporterversion',
+ 'service.name',
+ 'signoz.collector.id',
+ 'component',
+ 'http.method',
+ 'http.url',
+ 'ip',
+ ],
+ [
+ 'true',
+ '6fb81b8ca91b2b4d',
+ '4f6ec470feea',
+ '200',
+ 'true',
+ 'Jaeger-Go-2.30.0',
+ 'frontend',
+ '70d440fb-4875-4371-9a13-1bf5117c99e7',
+ 'net/http',
+ 'GET',
+ '0.0.0.0:8081',
+ '172.25.0.2',
+ ],
+ [
+ '{TraceId=000000000000000071dc9b0a338729b4, SpanId=51a3062c3456cd26, RefType=CHILD_OF}',
+ ],
+ [
+ '{"name":"GetConn","timeUnixNano":1721304359454120000}',
+ '{"name":"GotConn","timeUnixNano":1721304359454129000}',
+ '{"name":"WroteHeaders","timeUnixNano":1721304359454156000}',
+ '{"name":"WroteRequest","timeUnixNano":1721304359454158000}',
+ '{"name":"GotFirstResponseByte","timeUnixNano":1721304359803413000}',
+ '{"name":"PutIdleConn","timeUnixNano":1721304359803452000}',
+ '{"name":"ClosedBody","timeUnixNano":1721304359803472000}',
+ ],
+ false,
+ '',
+ 'Unset',
+ 'Client',
+ ],
+ [
+ 1721304359454,
+ '51a3062c3456cd26',
+ '000000000000000071dc9b0a338729b4',
+ 'frontend',
+ 'HTTP GET: /customer',
+ '0',
+ '349435000',
+ [
+ 'opencensus.exporterversion',
+ 'service.name',
+ 'signoz.collector.id',
+ 'client-uuid',
+ 'host.name',
+ 'ip',
+ ],
+ [
+ 'Jaeger-Go-2.30.0',
+ 'frontend',
+ '70d440fb-4875-4371-9a13-1bf5117c99e7',
+ '6fb81b8ca91b2b4d',
+ '4f6ec470feea',
+ '172.25.0.2',
+ ],
+ [
+ '{TraceId=000000000000000071dc9b0a338729b4, SpanId=71dc9b0a338729b4, RefType=CHILD_OF}',
+ ],
+ [],
+ false,
+ '',
+ 'Unset',
+ 'Unspecified',
+ ],
+ [
+ 1721304359454,
+ '67e901d53c8f11d4',
+ '000000000000000071dc9b0a338729b4',
+ 'mysql',
+ 'SQL SELECT',
+ '3',
+ '348855000',
+ [
+ 'host.name',
+ 'peer.service',
+ 'request',
+ 'signoz.collector.id',
+ 'sql.query',
+ 'client-uuid',
+ 'ip',
+ 'opencensus.exporterversion',
+ 'service.name',
+ ],
+ [
+ '4f6ec470feea',
+ 'mysql',
+ '',
+ '70d440fb-4875-4371-9a13-1bf5117c99e7',
+ 'SELECT * FROM customer WHERE customer_id=731',
+ '3441c794741337d0',
+ '172.25.0.2',
+ 'Jaeger-Go-2.30.0',
+ 'mysql',
+ ],
+ [
+ '{TraceId=000000000000000071dc9b0a338729b4, SpanId=74fff7b42cbc923b, RefType=CHILD_OF}',
+ ],
+ [
+ '{"name":"Waiting for lock behind 1 transactions","timeUnixNano":1721304359454335000,"attributeMap":{"blockers":"[]"}}',
+ '{"name":"Acquired lock with 0 transactions waiting behind","timeUnixNano":1721304359529107000}',
+ ],
+ false,
+ '',
+ 'Unset',
+ 'Client',
+ ],
+ [
+ 1721304359803,
+ '541274ec900e06ae',
+ '000000000000000071dc9b0a338729b4',
+ 'redis',
+ 'FindDriverIDs',
+ '3',
+ '15030000',
+ [
+ 'service.name',
+ 'signoz.collector.id',
+ 'client-uuid',
+ 'host.name',
+ 'ip',
+ 'opencensus.exporterversion',
+ 'param.location',
+ ],
+ [
+ 'redis',
+ '70d440fb-4875-4371-9a13-1bf5117c99e7',
+ '1b45eecbdc9fca62',
+ '4f6ec470feea',
+ '172.25.0.2',
+ 'Jaeger-Go-2.30.0',
+ '728,326',
+ ],
+ [
+ '{TraceId=000000000000000071dc9b0a338729b4, SpanId=22eadd8a0f27a552, RefType=CHILD_OF}',
+ ],
+ [
+ '{"name":"Found drivers","timeUnixNano":1721304359818819000,"attributeMap":{"level":"info"}}',
+ ],
+ false,
+ '',
+ 'Unset',
+ 'Client',
+ ],
+ [
+ 1721304359818,
+ '14a6cad2442f62ae',
+ '000000000000000071dc9b0a338729b4',
+ 'redis',
+ 'GetDriver',
+ '3',
+ '7524000',
+ [
+ 'client-uuid',
+ 'host.name',
+ 'ip',
+ 'opencensus.exporterversion',
+ 'param.driverID',
+ 'service.name',
+ 'signoz.collector.id',
+ ],
+ [
+ '1b45eecbdc9fca62',
+ '4f6ec470feea',
+ '172.25.0.2',
+ 'Jaeger-Go-2.30.0',
+ 'T746480C',
+ 'redis',
+ '70d440fb-4875-4371-9a13-1bf5117c99e7',
+ ],
+ [
+ '{TraceId=000000000000000071dc9b0a338729b4, SpanId=22eadd8a0f27a552, RefType=CHILD_OF}',
+ ],
+ [],
+ false,
+ '',
+ 'Unset',
+ 'Client',
+ ],
+ [
+ 1721304359826,
+ '49771a34b0287913',
+ '000000000000000071dc9b0a338729b4',
+ 'redis',
+ 'GetDriver',
+ '3',
+ '10207000',
+ [
+ 'param.driverID',
+ 'service.name',
+ 'signoz.collector.id',
+ 'client-uuid',
+ 'host.name',
+ 'ip',
+ 'opencensus.exporterversion',
+ ],
+ [
+ 'T787177C',
+ 'redis',
+ '70d440fb-4875-4371-9a13-1bf5117c99e7',
+ '1b45eecbdc9fca62',
+ '4f6ec470feea',
+ '172.25.0.2',
+ 'Jaeger-Go-2.30.0',
+ ],
+ [
+ '{TraceId=000000000000000071dc9b0a338729b4, SpanId=22eadd8a0f27a552, RefType=CHILD_OF}',
+ ],
+ [],
+ false,
+ '',
+ 'Unset',
+ 'Client',
+ ],
+ [
+ 1721304359836,
+ '53e1096a98361b25',
+ '000000000000000071dc9b0a338729b4',
+ 'redis',
+ 'GetDriver',
+ '3',
+ '32032000',
+ [
+ 'param.driverID',
+ 'service.name',
+ 'signoz.collector.id',
+ 'client-uuid',
+ 'host.name',
+ 'ip',
+ 'opencensus.exporterversion',
+ ],
+ [
+ 'T718678C',
+ 'redis',
+ '70d440fb-4875-4371-9a13-1bf5117c99e7',
+ '1b45eecbdc9fca62',
+ '4f6ec470feea',
+ '172.25.0.2',
+ 'Jaeger-Go-2.30.0',
+ ],
+ [
+ '{TraceId=000000000000000071dc9b0a338729b4, SpanId=22eadd8a0f27a552, RefType=CHILD_OF}',
+ ],
+ [
+ '{"name":"redis timeout","timeUnixNano":1721304359868650000,"attributeMap":{"driver_id":"T718678C","error":"redis timeout","level":"error"}}',
+ ],
+ true,
+ '',
+ 'Error',
+ 'Client',
+ ],
+ [
+ 1721304359868,
+ '62f28274cd882905',
+ '000000000000000071dc9b0a338729b4',
+ 'redis',
+ 'GetDriver',
+ '3',
+ '9969000',
+ [
+ 'client-uuid',
+ 'host.name',
+ 'ip',
+ 'opencensus.exporterversion',
+ 'param.driverID',
+ 'service.name',
+ 'signoz.collector.id',
+ ],
+ [
+ '1b45eecbdc9fca62',
+ '4f6ec470feea',
+ '172.25.0.2',
+ 'Jaeger-Go-2.30.0',
+ 'T718678C',
+ 'redis',
+ '70d440fb-4875-4371-9a13-1bf5117c99e7',
+ ],
+ [
+ '{TraceId=000000000000000071dc9b0a338729b4, SpanId=22eadd8a0f27a552, RefType=CHILD_OF}',
+ ],
+ [],
+ false,
+ '',
+ 'Unset',
+ 'Client',
+ ],
+ [
+ 1721304359878,
+ '273c24835b4733f7',
+ '000000000000000071dc9b0a338729b4',
+ 'redis',
+ 'GetDriver',
+ '3',
+ '6974000',
+ [
+ 'opencensus.exporterversion',
+ 'param.driverID',
+ 'service.name',
+ 'signoz.collector.id',
+ 'client-uuid',
+ 'host.name',
+ 'ip',
+ ],
+ [
+ 'Jaeger-Go-2.30.0',
+ 'T778818C',
+ 'redis',
+ '70d440fb-4875-4371-9a13-1bf5117c99e7',
+ '1b45eecbdc9fca62',
+ '4f6ec470feea',
+ '172.25.0.2',
+ ],
+ [
+ '{TraceId=000000000000000071dc9b0a338729b4, SpanId=22eadd8a0f27a552, RefType=CHILD_OF}',
+ ],
+ [],
+ false,
+ '',
+ 'Unset',
+ 'Client',
+ ],
+ [
+ 1721304359885,
+ '1fee566b7d89250d',
+ '000000000000000071dc9b0a338729b4',
+ 'redis',
+ 'GetDriver',
+ '3',
+ '11594000',
+ [
+ 'host.name',
+ 'ip',
+ 'opencensus.exporterversion',
+ 'param.driverID',
+ 'service.name',
+ 'signoz.collector.id',
+ 'client-uuid',
+ ],
+ [
+ '4f6ec470feea',
+ '172.25.0.2',
+ 'Jaeger-Go-2.30.0',
+ 'T730205C',
+ 'redis',
+ '70d440fb-4875-4371-9a13-1bf5117c99e7',
+ '1b45eecbdc9fca62',
+ ],
+ [
+ '{TraceId=000000000000000071dc9b0a338729b4, SpanId=22eadd8a0f27a552, RefType=CHILD_OF}',
+ ],
+ [],
+ false,
+ '',
+ 'Unset',
+ 'Client',
+ ],
+ [
+ 1721304359897,
+ '6b7bfcbede8a2e10',
+ '000000000000000071dc9b0a338729b4',
+ 'redis',
+ 'GetDriver',
+ '3',
+ '9198000',
+ [
+ 'client-uuid',
+ 'host.name',
+ 'ip',
+ 'opencensus.exporterversion',
+ 'param.driverID',
+ 'service.name',
+ 'signoz.collector.id',
+ ],
+ [
+ '1b45eecbdc9fca62',
+ '4f6ec470feea',
+ '172.25.0.2',
+ 'Jaeger-Go-2.30.0',
+ 'T708669C',
+ 'redis',
+ '70d440fb-4875-4371-9a13-1bf5117c99e7',
+ ],
+ [
+ '{TraceId=000000000000000071dc9b0a338729b4, SpanId=22eadd8a0f27a552, RefType=CHILD_OF}',
+ ],
+ [],
+ false,
+ '',
+ 'Unset',
+ 'Client',
+ ],
+ [
+ 1721304359906,
+ '707b2e18e9f4b36d',
+ '000000000000000071dc9b0a338729b4',
+ 'redis',
+ 'GetDriver',
+ '3',
+ '28706000',
+ [
+ 'client-uuid',
+ 'host.name',
+ 'ip',
+ 'opencensus.exporterversion',
+ 'param.driverID',
+ 'service.name',
+ 'signoz.collector.id',
+ ],
+ [
+ '1b45eecbdc9fca62',
+ '4f6ec470feea',
+ '172.25.0.2',
+ 'Jaeger-Go-2.30.0',
+ 'T740153C',
+ 'redis',
+ '70d440fb-4875-4371-9a13-1bf5117c99e7',
+ ],
+ [
+ '{TraceId=000000000000000071dc9b0a338729b4, SpanId=22eadd8a0f27a552, RefType=CHILD_OF}',
+ ],
+ [
+ '{"name":"redis timeout","timeUnixNano":1721304359935174000,"attributeMap":{"driver_id":"T740153C","error":"redis timeout","level":"error"}}',
+ ],
+ true,
+ '',
+ 'Error',
+ 'Client',
+ ],
+ [
+ 1721304359935,
+ '759867234892fa23',
+ '000000000000000071dc9b0a338729b4',
+ 'redis',
+ 'GetDriver',
+ '3',
+ '10115000',
+ [
+ 'ip',
+ 'opencensus.exporterversion',
+ 'param.driverID',
+ 'service.name',
+ 'signoz.collector.id',
+ 'client-uuid',
+ 'host.name',
+ ],
+ [
+ '172.25.0.2',
+ 'Jaeger-Go-2.30.0',
+ 'T740153C',
+ 'redis',
+ '70d440fb-4875-4371-9a13-1bf5117c99e7',
+ '1b45eecbdc9fca62',
+ '4f6ec470feea',
+ ],
+ [
+ '{TraceId=000000000000000071dc9b0a338729b4, SpanId=22eadd8a0f27a552, RefType=CHILD_OF}',
+ ],
+ [],
+ false,
+ '',
+ 'Unset',
+ 'Client',
+ ],
+ [
+ 1721304359945,
+ '40e021cf08a5849d',
+ '000000000000000071dc9b0a338729b4',
+ 'redis',
+ 'GetDriver',
+ '3',
+ '13283000',
+ [
+ 'client-uuid',
+ 'host.name',
+ 'ip',
+ 'opencensus.exporterversion',
+ 'param.driverID',
+ 'service.name',
+ 'signoz.collector.id',
+ ],
+ [
+ '1b45eecbdc9fca62',
+ '4f6ec470feea',
+ '172.25.0.2',
+ 'Jaeger-Go-2.30.0',
+ 'T739323C',
+ 'redis',
+ '70d440fb-4875-4371-9a13-1bf5117c99e7',
+ ],
+ [
+ '{TraceId=000000000000000071dc9b0a338729b4, SpanId=22eadd8a0f27a552, RefType=CHILD_OF}',
+ ],
+ [],
+ false,
+ '',
+ 'Unset',
+ 'Client',
+ ],
+ [
+ 1721304359958,
+ '53a1db7583207833',
+ '000000000000000071dc9b0a338729b4',
+ 'redis',
+ 'GetDriver',
+ '3',
+ '7573000',
+ [
+ 'opencensus.exporterversion',
+ 'param.driverID',
+ 'service.name',
+ 'signoz.collector.id',
+ 'client-uuid',
+ 'host.name',
+ 'ip',
+ ],
+ [
+ 'Jaeger-Go-2.30.0',
+ 'T731135C',
+ 'redis',
+ '70d440fb-4875-4371-9a13-1bf5117c99e7',
+ '1b45eecbdc9fca62',
+ '4f6ec470feea',
+ '172.25.0.2',
+ ],
+ [
+ '{TraceId=000000000000000071dc9b0a338729b4, SpanId=22eadd8a0f27a552, RefType=CHILD_OF}',
+ ],
+ [],
+ false,
+ '',
+ 'Unset',
+ 'Client',
+ ],
+ [
+ 1721304359966,
+ '46aaaa6f2a2fc84f',
+ '000000000000000071dc9b0a338729b4',
+ 'redis',
+ 'GetDriver',
+ '3',
+ '9238000',
+ [
+ 'param.driverID',
+ 'service.name',
+ 'signoz.collector.id',
+ 'client-uuid',
+ 'host.name',
+ 'ip',
+ 'opencensus.exporterversion',
+ ],
+ [
+ 'T760263C',
+ 'redis',
+ '70d440fb-4875-4371-9a13-1bf5117c99e7',
+ '1b45eecbdc9fca62',
+ '4f6ec470feea',
+ '172.25.0.2',
+ 'Jaeger-Go-2.30.0',
+ ],
+ [
+ '{TraceId=000000000000000071dc9b0a338729b4, SpanId=22eadd8a0f27a552, RefType=CHILD_OF}',
+ ],
+ [],
+ false,
+ '',
+ 'Unset',
+ 'Client',
+ ],
+ [
+ 1721304359803,
+ '22eadd8a0f27a552',
+ '000000000000000071dc9b0a338729b4',
+ 'driver',
+ '/driver.DriverService/FindNearest',
+ '2',
+ '172564000',
+ [
+ 'opencensus.exporterversion',
+ 'service.name',
+ 'signoz.collector.id',
+ 'client-uuid',
+ 'component',
+ 'host.name',
+ 'ip',
+ ],
+ [
+ 'Jaeger-Go-2.30.0',
+ 'driver',
+ '70d440fb-4875-4371-9a13-1bf5117c99e7',
+ '46ade24719771fcb',
+ 'gRPC',
+ '4f6ec470feea',
+ '172.25.0.2',
+ ],
+ [
+ '{TraceId=000000000000000071dc9b0a338729b4, SpanId=0b67082081caa21d, RefType=CHILD_OF}',
+ ],
+ [
+ '{"name":"Searching for nearby drivers","timeUnixNano":1721304359803853000,"attributeMap":{"level":"info","location":"728,326"}}',
+ '{"name":"Retrying GetDriver after error","timeUnixNano":1721304359868728000,"attributeMap":{"error":"redis timeout","level":"error","retry_no":"1"}}',
+ '{"name":"Retrying GetDriver after error","timeUnixNano":1721304359935265000,"attributeMap":{"error":"redis timeout","level":"error","retry_no":"1"}}',
+ '{"name":"Search successful","timeUnixNano":1721304359975617000,"attributeMap":{"level":"info","num_drivers":"10"}}',
+ ],
+ false,
+ '',
+ 'Unset',
+ 'Server',
+ ],
+ [
+ 1721304359803,
+ '0b67082081caa21d',
+ '000000000000000071dc9b0a338729b4',
+ 'frontend',
+ '/driver.DriverService/FindNearest',
+ '3',
+ '173105000',
+ [
+ 'component',
+ 'host.name',
+ 'ip',
+ 'opencensus.exporterversion',
+ 'service.name',
+ 'signoz.collector.id',
+ 'client-uuid',
+ ],
+ [
+ 'gRPC',
+ '4f6ec470feea',
+ '172.25.0.2',
+ 'Jaeger-Go-2.30.0',
+ 'frontend',
+ '70d440fb-4875-4371-9a13-1bf5117c99e7',
+ '6fb81b8ca91b2b4d',
+ ],
+ [
+ '{TraceId=000000000000000071dc9b0a338729b4, SpanId=71dc9b0a338729b4, RefType=CHILD_OF}',
+ ],
+ [],
+ false,
+ '',
+ 'Unset',
+ 'Client',
+ ],
+ [
+ 1721304359978,
+ '3ed7b128c9d765bf',
+ '000000000000000071dc9b0a338729b4',
+ 'frontend',
+ 'HTTP GET',
+ '3',
+ '54072000',
+ [
+ 'component',
+ 'http.method',
+ 'http.status_code',
+ 'http.url',
+ 'net/http.reused',
+ 'net/http.was_idle',
+ 'service.name',
+ 'client-uuid',
+ 'signoz.collector.id',
+ 'ip',
+ 'opencensus.exporterversion',
+ 'host.name',
+ ],
+ [
+ 'net/http',
+ 'GET',
+ '200',
+ '0.0.0.0:8083',
+ 'true',
+ 'true',
+ 'frontend',
+ '6fb81b8ca91b2b4d',
+ '70d440fb-4875-4371-9a13-1bf5117c99e7',
+ '172.25.0.2',
+ 'Jaeger-Go-2.30.0',
+ '4f6ec470feea',
+ ],
+ [
+ '{TraceId=000000000000000071dc9b0a338729b4, SpanId=0ac9396a0836beef, RefType=CHILD_OF}',
+ ],
+ [
+ '{"name":"GetConn","timeUnixNano":1721304359978461000}',
+ '{"name":"GotConn","timeUnixNano":1721304359978470000}',
+ '{"name":"WroteHeaders","timeUnixNano":1721304359978490000}',
+ '{"name":"WroteRequest","timeUnixNano":1721304359978492000}',
+ '{"name":"GotFirstResponseByte","timeUnixNano":1721304360032438000}',
+ '{"name":"PutIdleConn","timeUnixNano":1721304360032487000}',
+ '{"name":"ClosedBody","timeUnixNano":1721304360032511000}',
+ ],
+ false,
+ '',
+ 'Unset',
+ 'Client',
+ ],
+ [
+ 1721304359978,
+ '0ac9396a0836beef',
+ '000000000000000071dc9b0a338729b4',
+ 'frontend',
+ 'HTTP GET: /route',
+ '0',
+ '54081000',
+ [
+ 'service.name',
+ 'signoz.collector.id',
+ 'client-uuid',
+ 'host.name',
+ 'ip',
+ 'opencensus.exporterversion',
+ ],
+ [
+ 'frontend',
+ '70d440fb-4875-4371-9a13-1bf5117c99e7',
+ '6fb81b8ca91b2b4d',
+ '4f6ec470feea',
+ '172.25.0.2',
+ 'Jaeger-Go-2.30.0',
+ ],
+ [
+ '{TraceId=000000000000000071dc9b0a338729b4, SpanId=71dc9b0a338729b4, RefType=CHILD_OF}',
+ ],
+ [],
+ false,
+ '',
+ 'Unset',
+ 'Unspecified',
+ ],
+ [
+ 1721304359978,
+ '2b837048c74fc169',
+ '000000000000000071dc9b0a338729b4',
+ 'frontend',
+ 'HTTP GET',
+ '3',
+ '64945000',
+ [
+ 'ip',
+ 'service.name',
+ 'client-uuid',
+ 'component',
+ 'http.method',
+ 'http.status_code',
+ 'opencensus.exporterversion',
+ 'signoz.collector.id',
+ 'host.name',
+ 'http.url',
+ 'net/http.reused',
+ 'net/http.was_idle',
+ ],
+ [
+ '172.25.0.2',
+ 'frontend',
+ '6fb81b8ca91b2b4d',
+ 'net/http',
+ 'GET',
+ '200',
+ 'Jaeger-Go-2.30.0',
+ '70d440fb-4875-4371-9a13-1bf5117c99e7',
+ '4f6ec470feea',
+ '0.0.0.0:8083',
+ 'false',
+ 'false',
+ ],
+ [
+ '{TraceId=000000000000000071dc9b0a338729b4, SpanId=1e320f1c93026e9d, RefType=CHILD_OF}',
+ ],
+ [
+ '{"name":"GetConn","timeUnixNano":1721304359979001000}',
+ '{"name":"ConnectStart","timeUnixNano":1721304359979065000,"attributeMap":{"addr":"0.0.0.0:8083","network":"tcp"}}',
+ '{"name":"ConnectDone","timeUnixNano":1721304359979262000,"attributeMap":{"addr":"0.0.0.0:8083","network":"tcp"}}',
+ '{"name":"GotConn","timeUnixNano":1721304359979287000}',
+ '{"name":"WroteHeaders","timeUnixNano":1721304359979341000}',
+ '{"name":"WroteRequest","timeUnixNano":1721304359979342000}',
+ '{"name":"GotFirstResponseByte","timeUnixNano":1721304360043858000}',
+ '{"name":"PutIdleConn","timeUnixNano":1721304360043897000}',
+ '{"name":"ClosedBody","timeUnixNano":1721304360043919000}',
+ ],
+ false,
+ '',
+ 'Unset',
+ 'Client',
+ ],
+ [
+ 1721304359978,
+ '1e320f1c93026e9d',
+ '000000000000000071dc9b0a338729b4',
+ 'frontend',
+ 'HTTP GET: /route',
+ '0',
+ '64954000',
+ [
+ 'client-uuid',
+ 'host.name',
+ 'ip',
+ 'opencensus.exporterversion',
+ 'service.name',
+ 'signoz.collector.id',
+ ],
+ [
+ '6fb81b8ca91b2b4d',
+ '4f6ec470feea',
+ '172.25.0.2',
+ 'Jaeger-Go-2.30.0',
+ 'frontend',
+ '70d440fb-4875-4371-9a13-1bf5117c99e7',
+ ],
+ [
+ '{TraceId=000000000000000071dc9b0a338729b4, SpanId=71dc9b0a338729b4, RefType=CHILD_OF}',
+ ],
+ [],
+ false,
+ '',
+ 'Unset',
+ 'Unspecified',
+ ],
+ [
+ 1721304359977,
+ '3d559df27da11f0f',
+ '000000000000000071dc9b0a338729b4',
+ 'frontend',
+ 'HTTP GET',
+ '3',
+ '76137000',
+ [
+ 'net/http.reused',
+ 'net/http.was_idle',
+ 'component',
+ 'host.name',
+ 'http.url',
+ 'ip',
+ 'service.name',
+ 'signoz.collector.id',
+ 'client-uuid',
+ 'http.method',
+ 'http.status_code',
+ 'opencensus.exporterversion',
+ ],
+ [
+ 'true',
+ 'true',
+ 'net/http',
+ '4f6ec470feea',
+ '0.0.0.0:8083',
+ '172.25.0.2',
+ 'frontend',
+ '70d440fb-4875-4371-9a13-1bf5117c99e7',
+ '6fb81b8ca91b2b4d',
+ 'GET',
+ '200',
+ 'Jaeger-Go-2.30.0',
+ ],
+ [
+ '{TraceId=000000000000000071dc9b0a338729b4, SpanId=6acf3a3fd51f294a, RefType=CHILD_OF}',
+ ],
+ [
+ '{"name":"GetConn","timeUnixNano":1721304359977905000}',
+ '{"name":"GotConn","timeUnixNano":1721304359977914000}',
+ '{"name":"WroteHeaders","timeUnixNano":1721304359977939000}',
+ '{"name":"WroteRequest","timeUnixNano":1721304359977941000}',
+ '{"name":"GotFirstResponseByte","timeUnixNano":1721304360053941000}',
+ '{"name":"PutIdleConn","timeUnixNano":1721304360053982000}',
+ '{"name":"ClosedBody","timeUnixNano":1721304360054009000}',
+ ],
+ false,
+ '',
+ 'Unset',
+ 'Client',
+ ],
+ [
+ 1721304359977,
+ '6acf3a3fd51f294a',
+ '000000000000000071dc9b0a338729b4',
+ 'frontend',
+ 'HTTP GET: /route',
+ '0',
+ '76161000',
+ [
+ 'host.name',
+ 'ip',
+ 'opencensus.exporterversion',
+ 'service.name',
+ 'signoz.collector.id',
+ 'client-uuid',
+ ],
+ [
+ '4f6ec470feea',
+ '172.25.0.2',
+ 'Jaeger-Go-2.30.0',
+ 'frontend',
+ '70d440fb-4875-4371-9a13-1bf5117c99e7',
+ '6fb81b8ca91b2b4d',
+ ],
+ [
+ '{TraceId=000000000000000071dc9b0a338729b4, SpanId=71dc9b0a338729b4, RefType=CHILD_OF}',
+ ],
+ [],
+ false,
+ '',
+ 'Unset',
+ 'Unspecified',
+ ],
+ [
+ 1721304360033,
+ '4f50f3f099502699',
+ '000000000000000071dc9b0a338729b4',
+ 'frontend',
+ 'HTTP GET',
+ '3',
+ '69683000',
+ [
+ 'client-uuid',
+ 'component',
+ 'http.status_code',
+ 'http.url',
+ 'net/http.reused',
+ 'net/http.was_idle',
+ 'signoz.collector.id',
+ 'host.name',
+ 'http.method',
+ 'ip',
+ 'opencensus.exporterversion',
+ 'service.name',
+ ],
+ [
+ '6fb81b8ca91b2b4d',
+ 'net/http',
+ '200',
+ '0.0.0.0:8083',
+ 'true',
+ 'true',
+ '70d440fb-4875-4371-9a13-1bf5117c99e7',
+ '4f6ec470feea',
+ 'GET',
+ '172.25.0.2',
+ 'Jaeger-Go-2.30.0',
+ 'frontend',
+ ],
+ [
+ '{TraceId=000000000000000071dc9b0a338729b4, SpanId=0f064e2af29e5e3d, RefType=CHILD_OF}',
+ ],
+ [
+ '{"name":"GetConn","timeUnixNano":1721304360033336000}',
+ '{"name":"GotConn","timeUnixNano":1721304360033345000}',
+ '{"name":"WroteHeaders","timeUnixNano":1721304360033369000}',
+ '{"name":"WroteRequest","timeUnixNano":1721304360033372000}',
+ '{"name":"GotFirstResponseByte","timeUnixNano":1721304360102925000}',
+ '{"name":"PutIdleConn","timeUnixNano":1721304360102965000}',
+ '{"name":"ClosedBody","timeUnixNano":1721304360102988000}',
+ ],
+ false,
+ '',
+ 'Unset',
+ 'Client',
+ ],
+ [
+ 1721304360033,
+ '0f064e2af29e5e3d',
+ '000000000000000071dc9b0a338729b4',
+ 'frontend',
+ 'HTTP GET: /route',
+ '0',
+ '69697000',
+ [
+ 'client-uuid',
+ 'host.name',
+ 'ip',
+ 'opencensus.exporterversion',
+ 'service.name',
+ 'signoz.collector.id',
+ ],
+ [
+ '6fb81b8ca91b2b4d',
+ '4f6ec470feea',
+ '172.25.0.2',
+ 'Jaeger-Go-2.30.0',
+ 'frontend',
+ '70d440fb-4875-4371-9a13-1bf5117c99e7',
+ ],
+ [
+ '{TraceId=000000000000000071dc9b0a338729b4, SpanId=71dc9b0a338729b4, RefType=CHILD_OF}',
+ ],
+ [],
+ false,
+ '',
+ 'Unset',
+ 'Unspecified',
+ ],
+ [
+ 1721304360054,
+ '1968d4e502b91ac4',
+ '000000000000000071dc9b0a338729b4',
+ 'frontend',
+ 'HTTP GET',
+ '3',
+ '54187000',
+ [
+ 'client-uuid',
+ 'component',
+ 'http.status_code',
+ 'net/http.was_idle',
+ 'opencensus.exporterversion',
+ 'signoz.collector.id',
+ 'host.name',
+ 'http.method',
+ 'http.url',
+ 'ip',
+ 'net/http.reused',
+ 'service.name',
+ ],
+ [
+ '6fb81b8ca91b2b4d',
+ 'net/http',
+ '200',
+ 'true',
+ 'Jaeger-Go-2.30.0',
+ '70d440fb-4875-4371-9a13-1bf5117c99e7',
+ '4f6ec470feea',
+ 'GET',
+ '0.0.0.0:8083',
+ '172.25.0.2',
+ 'true',
+ 'frontend',
+ ],
+ [
+ '{TraceId=000000000000000071dc9b0a338729b4, SpanId=4984e1953fd99760, RefType=CHILD_OF}',
+ ],
+ [
+ '{"name":"GetConn","timeUnixNano":1721304360054823000}',
+ '{"name":"GotConn","timeUnixNano":1721304360054831000}',
+ '{"name":"WroteHeaders","timeUnixNano":1721304360054855000}',
+ '{"name":"WroteRequest","timeUnixNano":1721304360054857000}',
+ '{"name":"GotFirstResponseByte","timeUnixNano":1721304360108921000}',
+ '{"name":"PutIdleConn","timeUnixNano":1721304360108961000}',
+ '{"name":"ClosedBody","timeUnixNano":1721304360108984000}',
+ ],
+ false,
+ '',
+ 'Unset',
+ 'Client',
+ ],
+ [
+ 1721304360054,
+ '4984e1953fd99760',
+ '000000000000000071dc9b0a338729b4',
+ 'frontend',
+ 'HTTP GET: /route',
+ '0',
+ '54200000',
+ [
+ 'client-uuid',
+ 'host.name',
+ 'ip',
+ 'opencensus.exporterversion',
+ 'service.name',
+ 'signoz.collector.id',
+ ],
+ [
+ '6fb81b8ca91b2b4d',
+ '4f6ec470feea',
+ '172.25.0.2',
+ 'Jaeger-Go-2.30.0',
+ 'frontend',
+ '70d440fb-4875-4371-9a13-1bf5117c99e7',
+ ],
+ [
+ '{TraceId=000000000000000071dc9b0a338729b4, SpanId=71dc9b0a338729b4, RefType=CHILD_OF}',
+ ],
+ [],
+ false,
+ '',
+ 'Unset',
+ 'Unspecified',
+ ],
+ [
+ 1721304360044,
+ '032263185bbbf38c',
+ '000000000000000071dc9b0a338729b4',
+ 'frontend',
+ 'HTTP GET',
+ '3',
+ '69252000',
+ [
+ 'host.name',
+ 'ip',
+ 'net/http.was_idle',
+ 'service.name',
+ 'client-uuid',
+ 'component',
+ 'http.method',
+ 'http.status_code',
+ 'http.url',
+ 'net/http.reused',
+ 'opencensus.exporterversion',
+ 'signoz.collector.id',
+ ],
+ [
+ '4f6ec470feea',
+ '172.25.0.2',
+ 'true',
+ 'frontend',
+ '6fb81b8ca91b2b4d',
+ 'net/http',
+ 'GET',
+ '200',
+ '0.0.0.0:8083',
+ 'true',
+ 'Jaeger-Go-2.30.0',
+ '70d440fb-4875-4371-9a13-1bf5117c99e7',
+ ],
+ [
+ '{TraceId=000000000000000071dc9b0a338729b4, SpanId=54965682749b13bf, RefType=CHILD_OF}',
+ ],
+ [
+ '{"name":"GetConn","timeUnixNano":1721304360044759000}',
+ '{"name":"GotConn","timeUnixNano":1721304360044768000}',
+ '{"name":"WroteHeaders","timeUnixNano":1721304360044793000}',
+ '{"name":"WroteRequest","timeUnixNano":1721304360044796000}',
+ '{"name":"GotFirstResponseByte","timeUnixNano":1721304360113908000}',
+ '{"name":"PutIdleConn","timeUnixNano":1721304360113948000}',
+ '{"name":"ClosedBody","timeUnixNano":1721304360113971000}',
+ ],
+ false,
+ '',
+ 'Unset',
+ 'Client',
+ ],
+ [
+ 1721304360044,
+ '54965682749b13bf',
+ '000000000000000071dc9b0a338729b4',
+ 'frontend',
+ 'HTTP GET: /route',
+ '0',
+ '69266000',
+ [
+ 'client-uuid',
+ 'host.name',
+ 'ip',
+ 'opencensus.exporterversion',
+ 'service.name',
+ 'signoz.collector.id',
+ ],
+ [
+ '6fb81b8ca91b2b4d',
+ '4f6ec470feea',
+ '172.25.0.2',
+ 'Jaeger-Go-2.30.0',
+ 'frontend',
+ '70d440fb-4875-4371-9a13-1bf5117c99e7',
+ ],
+ [
+ '{TraceId=000000000000000071dc9b0a338729b4, SpanId=71dc9b0a338729b4, RefType=CHILD_OF}',
+ ],
+ [],
+ false,
+ '',
+ 'Unset',
+ 'Unspecified',
+ ],
+ [
+ 1721304360109,
+ '255866d4d4b6ec08',
+ '000000000000000071dc9b0a338729b4',
+ 'frontend',
+ 'HTTP GET',
+ '3',
+ '41317000',
+ [
+ 'component',
+ 'host.name',
+ 'http.method',
+ 'http.status_code',
+ 'net/http.reused',
+ 'net/http.was_idle',
+ 'opencensus.exporterversion',
+ 'client-uuid',
+ 'http.url',
+ 'ip',
+ 'service.name',
+ 'signoz.collector.id',
+ ],
+ [
+ 'net/http',
+ '4f6ec470feea',
+ 'GET',
+ '200',
+ 'true',
+ 'true',
+ 'Jaeger-Go-2.30.0',
+ '6fb81b8ca91b2b4d',
+ '0.0.0.0:8083',
+ '172.25.0.2',
+ 'frontend',
+ '70d440fb-4875-4371-9a13-1bf5117c99e7',
+ ],
+ [
+ '{TraceId=000000000000000071dc9b0a338729b4, SpanId=690f0b793f302403, RefType=CHILD_OF}',
+ ],
+ [
+ '{"name":"GetConn","timeUnixNano":1721304360109790000}',
+ '{"name":"GotConn","timeUnixNano":1721304360109798000}',
+ '{"name":"WroteHeaders","timeUnixNano":1721304360109823000}',
+ '{"name":"WroteRequest","timeUnixNano":1721304360109826000}',
+ '{"name":"GotFirstResponseByte","timeUnixNano":1721304360151018000}',
+ '{"name":"PutIdleConn","timeUnixNano":1721304360151059000}',
+ '{"name":"ClosedBody","timeUnixNano":1721304360151081000}',
+ ],
+ false,
+ '',
+ 'Unset',
+ 'Client',
+ ],
+ [
+ 1721304360109,
+ '690f0b793f302403',
+ '000000000000000071dc9b0a338729b4',
+ 'frontend',
+ 'HTTP GET: /route',
+ '0',
+ '41332000',
+ [
+ 'service.name',
+ 'signoz.collector.id',
+ 'client-uuid',
+ 'host.name',
+ 'ip',
+ 'opencensus.exporterversion',
+ ],
+ [
+ 'frontend',
+ '70d440fb-4875-4371-9a13-1bf5117c99e7',
+ '6fb81b8ca91b2b4d',
+ '4f6ec470feea',
+ '172.25.0.2',
+ 'Jaeger-Go-2.30.0',
+ ],
+ [
+ '{TraceId=000000000000000071dc9b0a338729b4, SpanId=71dc9b0a338729b4, RefType=CHILD_OF}',
+ ],
+ [],
+ false,
+ '',
+ 'Unset',
+ 'Unspecified',
+ ],
+ [
+ 1721304360103,
+ '26fbd8f91831c199',
+ '000000000000000071dc9b0a338729b4',
+ 'frontend',
+ 'HTTP GET',
+ '3',
+ '48308000',
+ [
+ 'http.method',
+ 'ip',
+ 'opencensus.exporterversion',
+ 'service.name',
+ 'signoz.collector.id',
+ 'client-uuid',
+ 'component',
+ 'http.url',
+ 'net/http.reused',
+ 'net/http.was_idle',
+ 'host.name',
+ 'http.status_code',
+ ],
+ [
+ 'GET',
+ '172.25.0.2',
+ 'Jaeger-Go-2.30.0',
+ 'frontend',
+ '70d440fb-4875-4371-9a13-1bf5117c99e7',
+ '6fb81b8ca91b2b4d',
+ 'net/http',
+ '0.0.0.0:8083',
+ 'true',
+ 'true',
+ '4f6ec470feea',
+ '200',
+ ],
+ [
+ '{TraceId=000000000000000071dc9b0a338729b4, SpanId=55e1875d184a70fe, RefType=CHILD_OF}',
+ ],
+ [
+ '{"name":"GetConn","timeUnixNano":1721304360103810000}',
+ '{"name":"GotConn","timeUnixNano":1721304360103818000}',
+ '{"name":"WroteHeaders","timeUnixNano":1721304360103842000}',
+ '{"name":"WroteRequest","timeUnixNano":1721304360103844000}',
+ '{"name":"GotFirstResponseByte","timeUnixNano":1721304360152042000}',
+ '{"name":"PutIdleConn","timeUnixNano":1721304360152070000}',
+ '{"name":"ClosedBody","timeUnixNano":1721304360152091000}',
+ ],
+ false,
+ '',
+ 'Unset',
+ 'Client',
+ ],
+ [
+ 1721304360103,
+ '55e1875d184a70fe',
+ '000000000000000071dc9b0a338729b4',
+ 'frontend',
+ 'HTTP GET: /route',
+ '0',
+ '48325000',
+ [
+ 'client-uuid',
+ 'host.name',
+ 'ip',
+ 'opencensus.exporterversion',
+ 'service.name',
+ 'signoz.collector.id',
+ ],
+ [
+ '6fb81b8ca91b2b4d',
+ '4f6ec470feea',
+ '172.25.0.2',
+ 'Jaeger-Go-2.30.0',
+ 'frontend',
+ '70d440fb-4875-4371-9a13-1bf5117c99e7',
+ ],
+ [
+ '{TraceId=000000000000000071dc9b0a338729b4, SpanId=71dc9b0a338729b4, RefType=CHILD_OF}',
+ ],
+ [],
+ false,
+ '',
+ 'Unset',
+ 'Unspecified',
+ ],
+ [
+ 1721304360114,
+ '2903e6c8cbe5f8c6',
+ '000000000000000071dc9b0a338729b4',
+ 'frontend',
+ 'HTTP GET',
+ '3',
+ '65640000',
+ [
+ 'http.status_code',
+ 'ip',
+ 'signoz.collector.id',
+ 'client-uuid',
+ 'component',
+ 'http.method',
+ 'net/http.was_idle',
+ 'opencensus.exporterversion',
+ 'service.name',
+ 'host.name',
+ 'http.url',
+ 'net/http.reused',
+ ],
+ [
+ '200',
+ '172.25.0.2',
+ '70d440fb-4875-4371-9a13-1bf5117c99e7',
+ '6fb81b8ca91b2b4d',
+ 'net/http',
+ 'GET',
+ 'true',
+ 'Jaeger-Go-2.30.0',
+ 'frontend',
+ '4f6ec470feea',
+ '0.0.0.0:8083',
+ 'true',
+ ],
+ [
+ '{TraceId=000000000000000071dc9b0a338729b4, SpanId=5bcb6dfccf311afe, RefType=CHILD_OF}',
+ ],
+ [
+ '{"name":"GetConn","timeUnixNano":1721304360114775000}',
+ '{"name":"GotConn","timeUnixNano":1721304360114783000}',
+ '{"name":"WroteHeaders","timeUnixNano":1721304360114809000}',
+ '{"name":"WroteRequest","timeUnixNano":1721304360114812000}',
+ '{"name":"GotFirstResponseByte","timeUnixNano":1721304360180281000}',
+ '{"name":"PutIdleConn","timeUnixNano":1721304360180362000}',
+ '{"name":"ClosedBody","timeUnixNano":1721304360180389000}',
+ ],
+ false,
+ '',
+ 'Unset',
+ 'Client',
+ ],
+ [
+ 1721304360114,
+ '5bcb6dfccf311afe',
+ '000000000000000071dc9b0a338729b4',
+ 'frontend',
+ 'HTTP GET: /route',
+ '0',
+ '65664000',
+ [
+ 'client-uuid',
+ 'host.name',
+ 'ip',
+ 'opencensus.exporterversion',
+ 'service.name',
+ 'signoz.collector.id',
+ ],
+ [
+ '6fb81b8ca91b2b4d',
+ '4f6ec470feea',
+ '172.25.0.2',
+ 'Jaeger-Go-2.30.0',
+ 'frontend',
+ '70d440fb-4875-4371-9a13-1bf5117c99e7',
+ ],
+ [
+ '{TraceId=000000000000000071dc9b0a338729b4, SpanId=71dc9b0a338729b4, RefType=CHILD_OF}',
+ ],
+ [],
+ false,
+ '',
+ 'Unset',
+ 'Unspecified',
+ ],
+ [
+ 1721304360151,
+ '3ed0b66560a03e14',
+ '000000000000000071dc9b0a338729b4',
+ 'frontend',
+ 'HTTP GET',
+ '3',
+ '78546000',
+ [
+ 'http.status_code',
+ 'service.name',
+ 'signoz.collector.id',
+ 'client-uuid',
+ 'component',
+ 'host.name',
+ 'http.method',
+ 'http.url',
+ 'ip',
+ 'net/http.reused',
+ 'net/http.was_idle',
+ 'opencensus.exporterversion',
+ ],
+ [
+ '200',
+ 'frontend',
+ '70d440fb-4875-4371-9a13-1bf5117c99e7',
+ '6fb81b8ca91b2b4d',
+ 'net/http',
+ '4f6ec470feea',
+ 'GET',
+ '0.0.0.0:8083',
+ '172.25.0.2',
+ 'true',
+ 'true',
+ 'Jaeger-Go-2.30.0',
+ ],
+ [
+ '{TraceId=000000000000000071dc9b0a338729b4, SpanId=352ac0b61c8c826f, RefType=CHILD_OF}',
+ ],
+ [
+ '{"name":"GetConn","timeUnixNano":1721304360151933000}',
+ '{"name":"GotConn","timeUnixNano":1721304360151942000}',
+ '{"name":"WroteHeaders","timeUnixNano":1721304360151967000}',
+ '{"name":"WroteRequest","timeUnixNano":1721304360151969000}',
+ '{"name":"GotFirstResponseByte","timeUnixNano":1721304360230321000}',
+ '{"name":"PutIdleConn","timeUnixNano":1721304360230365000}',
+ '{"name":"ClosedBody","timeUnixNano":1721304360230449000}',
+ ],
+ false,
+ '',
+ 'Unset',
+ 'Client',
+ ],
+ [
+ 1721304360151,
+ '352ac0b61c8c826f',
+ '000000000000000071dc9b0a338729b4',
+ 'frontend',
+ 'HTTP GET: /route',
+ '0',
+ '78561000',
+ [
+ 'client-uuid',
+ 'host.name',
+ 'ip',
+ 'opencensus.exporterversion',
+ 'service.name',
+ 'signoz.collector.id',
+ ],
+ [
+ '6fb81b8ca91b2b4d',
+ '4f6ec470feea',
+ '172.25.0.2',
+ 'Jaeger-Go-2.30.0',
+ 'frontend',
+ '70d440fb-4875-4371-9a13-1bf5117c99e7',
+ ],
+ [
+ '{TraceId=000000000000000071dc9b0a338729b4, SpanId=71dc9b0a338729b4, RefType=CHILD_OF}',
+ ],
+ [],
+ false,
+ '',
+ 'Unset',
+ 'Unspecified',
+ ],
+ [
+ 1721304359453,
+ '71dc9b0a338729b4',
+ '000000000000000071dc9b0a338729b4',
+ 'frontend',
+ 'HTTP GET /dispatch',
+ '2',
+ '776756000',
+ [
+ 'http.status_code',
+ 'http.url',
+ 'opencensus.exporterversion',
+ 'sampler.param',
+ 'client-uuid',
+ 'component',
+ 'host.name',
+ 'http.method',
+ 'signoz.collector.id',
+ 'ip',
+ 'sampler.type',
+ 'service.name',
+ ],
+ [
+ '200',
+ '/dispatch?customer=731\u0026nonse=0.8022286220408668',
+ 'Jaeger-Go-2.30.0',
+ 'true',
+ '6fb81b8ca91b2b4d',
+ 'net/http',
+ '4f6ec470feea',
+ 'GET',
+ '70d440fb-4875-4371-9a13-1bf5117c99e7',
+ '172.25.0.2',
+ 'const',
+ 'frontend',
+ ],
+ ['{TraceId=000000000000000071dc9b0a338729b4, SpanId=, RefType=CHILD_OF}'],
+ [
+ '{"name":"HTTP request received","timeUnixNano":1721304359453904000,"attributeMap":{"level":"info","method":"GET","url":"/dispatch?customer=731\\u0026nonse=0.8022286220408668"}}',
+ '{"name":"Getting customer","timeUnixNano":1721304359453990000,"attributeMap":{"customer_id":"731","level":"info"}}',
+ '{"name":"Found customer","timeUnixNano":1721304359803486000,"attributeMap":{"level":"info"}}',
+ '{"name":"baggage","timeUnixNano":1721304359803546000,"attributeMap":{"key":"customer","value":"Japanese Desserts"}}',
+ '{"name":"Finding nearest drivers","timeUnixNano":1721304359803551000,"attributeMap":{"level":"info","location":"728,326"}}',
+ '{"name":"Found drivers","timeUnixNano":1721304359976695000,"attributeMap":{"level":"info"}}',
+ '{"name":"Finding route","timeUnixNano":1721304359977409000,"attributeMap":{"dropoff":"728,326","level":"info","pickup":"165,543"}}',
+ '{"name":"Finding route","timeUnixNano":1721304359977989000,"attributeMap":{"dropoff":"728,326","level":"info","pickup":"720,72"}}',
+ '{"name":"Finding route","timeUnixNano":1721304359978530000,"attributeMap":{"dropoff":"728,326","level":"info","pickup":"530,911"}}',
+ '{"name":"Finding route","timeUnixNano":1721304360032532000,"attributeMap":{"dropoff":"728,326","level":"info","pickup":"686,946"}}',
+ '{"name":"Finding route","timeUnixNano":1721304360043941000,"attributeMap":{"dropoff":"728,326","level":"info","pickup":"222,675"}}',
+ '{"name":"Finding route","timeUnixNano":1721304360054028000,"attributeMap":{"dropoff":"728,326","level":"info","pickup":"660,997"}}',
+ '{"name":"Finding route","timeUnixNano":1721304360103005000,"attributeMap":{"dropoff":"728,326","level":"info","pickup":"609,233"}}',
+ '{"name":"Finding route","timeUnixNano":1721304360109005000,"attributeMap":{"dropoff":"728,326","level":"info","pickup":"516,970"}}',
+ '{"name":"Finding route","timeUnixNano":1721304360113986000,"attributeMap":{"dropoff":"728,326","level":"info","pickup":"524,763"}}',
+ '{"name":"Finding route","timeUnixNano":1721304360151099000,"attributeMap":{"dropoff":"728,326","level":"info","pickup":"267,822"}}',
+ '{"name":"Found routes","timeUnixNano":1721304360230473000,"attributeMap":{"level":"info"}}',
+ '{"name":"Dispatch successful","timeUnixNano":1721304360230582000,"attributeMap":{"driver":"T718678C","eta":"2m0s","level":"info"}}',
+ ],
+ false,
+ '',
+ 'Unset',
+ 'Server',
+ ],
+ [
+ 1721304359980,
+ '472ffaa577ce6b0e',
+ '000000000000000071dc9b0a338729b4',
+ 'route',
+ 'HTTP GET /route',
+ '2',
+ '52268000',
+ [
+ 'component',
+ 'host.name',
+ 'http.url',
+ 'opencensus.exporterversion',
+ 'service.name',
+ 'client-uuid',
+ 'http.method',
+ 'http.status_code',
+ 'ip',
+ 'signoz.collector.id',
+ ],
+ [
+ 'net/http',
+ '4f6ec470feea',
+ '/route?dropoff=728%2C326\u0026pickup=720%2C72',
+ 'Jaeger-Go-2.30.0',
+ 'route',
+ '64a18ffd5f8adbfb',
+ 'GET',
+ '200',
+ '172.25.0.2',
+ '70d440fb-4875-4371-9a13-1bf5117c99e7',
+ ],
+ [
+ '{TraceId=000000000000000071dc9b0a338729b4, SpanId=3ed7b128c9d765bf, RefType=CHILD_OF}',
+ ],
+ [
+ '{"name":"HTTP request received","timeUnixNano":1721304359980063000,"attributeMap":{"level":"info","method":"GET","url":"/route?dropoff=728%2C326\\u0026pickup=720%2C72"}}',
+ ],
+ false,
+ '',
+ 'Unset',
+ 'Server',
+ ],
+ [
+ 1721304359979,
+ '2a835737138b4671',
+ '000000000000000071dc9b0a338729b4',
+ 'route',
+ 'HTTP GET /route',
+ '2',
+ '64209000',
+ [
+ 'service.name',
+ 'signoz.collector.id',
+ 'client-uuid',
+ 'component',
+ 'host.name',
+ 'http.url',
+ 'opencensus.exporterversion',
+ 'http.method',
+ 'http.status_code',
+ 'ip',
+ ],
+ [
+ 'route',
+ '70d440fb-4875-4371-9a13-1bf5117c99e7',
+ '64a18ffd5f8adbfb',
+ 'net/http',
+ '4f6ec470feea',
+ '/route?dropoff=728%2C326\u0026pickup=530%2C911',
+ 'Jaeger-Go-2.30.0',
+ 'GET',
+ '200',
+ '172.25.0.2',
+ ],
+ [
+ '{TraceId=000000000000000071dc9b0a338729b4, SpanId=2b837048c74fc169, RefType=CHILD_OF}',
+ ],
+ [
+ '{"name":"HTTP request received","timeUnixNano":1721304359979511000,"attributeMap":{"level":"info","method":"GET","url":"/route?dropoff=728%2C326\\u0026pickup=530%2C911"}}',
+ ],
+ false,
+ '',
+ 'Unset',
+ 'Server',
+ ],
+ [
+ 1721304359980,
+ '28a8a67365d0bd8b',
+ '000000000000000071dc9b0a338729b4',
+ 'route',
+ 'HTTP GET /route',
+ '2',
+ '73145000',
+ [
+ 'http.method',
+ 'http.status_code',
+ 'opencensus.exporterversion',
+ 'signoz.collector.id',
+ 'component',
+ 'host.name',
+ 'ip',
+ 'service.name',
+ 'client-uuid',
+ 'http.url',
+ ],
+ [
+ 'GET',
+ '200',
+ 'Jaeger-Go-2.30.0',
+ '70d440fb-4875-4371-9a13-1bf5117c99e7',
+ 'net/http',
+ '4f6ec470feea',
+ '172.25.0.2',
+ 'route',
+ '64a18ffd5f8adbfb',
+ '/route?dropoff=728%2C326\u0026pickup=165%2C543',
+ ],
+ [
+ '{TraceId=000000000000000071dc9b0a338729b4, SpanId=3d559df27da11f0f, RefType=CHILD_OF}',
+ ],
+ [
+ '{"name":"HTTP request received","timeUnixNano":1721304359980599000,"attributeMap":{"level":"info","method":"GET","url":"/route?dropoff=728%2C326\\u0026pickup=165%2C543"}}',
+ ],
+ false,
+ '',
+ 'Unset',
+ 'Server',
+ ],
+ [
+ 1721304360033,
+ '38de18f04671e5db',
+ '000000000000000071dc9b0a338729b4',
+ 'route',
+ 'HTTP GET /route',
+ '2',
+ '69230000',
+ [
+ 'http.status_code',
+ 'ip',
+ 'opencensus.exporterversion',
+ 'service.name',
+ 'signoz.collector.id',
+ 'client-uuid',
+ 'component',
+ 'http.method',
+ 'host.name',
+ 'http.url',
+ ],
+ [
+ '200',
+ '172.25.0.2',
+ 'Jaeger-Go-2.30.0',
+ 'route',
+ '70d440fb-4875-4371-9a13-1bf5117c99e7',
+ '64a18ffd5f8adbfb',
+ 'net/http',
+ 'GET',
+ '4f6ec470feea',
+ '/route?dropoff=728%2C326\u0026pickup=686%2C946',
+ ],
+ [
+ '{TraceId=000000000000000071dc9b0a338729b4, SpanId=4f50f3f099502699, RefType=CHILD_OF}',
+ ],
+ [
+ '{"name":"HTTP request received","timeUnixNano":1721304360033555000,"attributeMap":{"level":"info","method":"GET","url":"/route?dropoff=728%2C326\\u0026pickup=686%2C946"}}',
+ ],
+ false,
+ '',
+ 'Unset',
+ 'Server',
+ ],
+ [
+ 1721304360054,
+ '3420998a476237ce',
+ '000000000000000071dc9b0a338729b4',
+ 'route',
+ 'HTTP GET /route',
+ '2',
+ '53811000',
+ [
+ 'client-uuid',
+ 'host.name',
+ 'http.status_code',
+ 'http.url',
+ 'opencensus.exporterversion',
+ 'service.name',
+ 'component',
+ 'http.method',
+ 'ip',
+ 'signoz.collector.id',
+ ],
+ [
+ '64a18ffd5f8adbfb',
+ '4f6ec470feea',
+ '200',
+ '/route?dropoff=728%2C326\u0026pickup=660%2C997',
+ 'Jaeger-Go-2.30.0',
+ 'route',
+ 'net/http',
+ 'GET',
+ '172.25.0.2',
+ '70d440fb-4875-4371-9a13-1bf5117c99e7',
+ ],
+ [
+ '{TraceId=000000000000000071dc9b0a338729b4, SpanId=1968d4e502b91ac4, RefType=CHILD_OF}',
+ ],
+ [
+ '{"name":"HTTP request received","timeUnixNano":1721304360054989000,"attributeMap":{"level":"info","method":"GET","url":"/route?dropoff=728%2C326\\u0026pickup=660%2C997"}}',
+ ],
+ false,
+ '',
+ 'Unset',
+ 'Server',
+ ],
+ [
+ 1721304360044,
+ '0c5a7edd2e365047',
+ '000000000000000071dc9b0a338729b4',
+ 'route',
+ 'HTTP GET /route',
+ '2',
+ '68850000',
+ [
+ 'opencensus.exporterversion',
+ 'service.name',
+ 'signoz.collector.id',
+ 'client-uuid',
+ 'ip',
+ 'http.method',
+ 'http.status_code',
+ 'http.url',
+ 'component',
+ 'host.name',
+ ],
+ [
+ 'Jaeger-Go-2.30.0',
+ 'route',
+ '70d440fb-4875-4371-9a13-1bf5117c99e7',
+ '64a18ffd5f8adbfb',
+ '172.25.0.2',
+ 'GET',
+ '200',
+ '/route?dropoff=728%2C326\u0026pickup=222%2C675',
+ 'net/http',
+ '4f6ec470feea',
+ ],
+ [
+ '{TraceId=000000000000000071dc9b0a338729b4, SpanId=032263185bbbf38c, RefType=CHILD_OF}',
+ ],
+ [
+ '{"name":"HTTP request received","timeUnixNano":1721304360044934000,"attributeMap":{"level":"info","method":"GET","url":"/route?dropoff=728%2C326\\u0026pickup=222%2C675"}}',
+ ],
+ false,
+ '',
+ 'Unset',
+ 'Server',
+ ],
+ [
+ 1721304360103,
+ '538b56106b402474',
+ '000000000000000071dc9b0a338729b4',
+ 'route',
+ 'HTTP GET /route',
+ '2',
+ '46813000',
+ [
+ 'http.url',
+ 'opencensus.exporterversion',
+ 'client-uuid',
+ 'component',
+ 'host.name',
+ 'http.method',
+ 'http.status_code',
+ 'ip',
+ 'service.name',
+ 'signoz.collector.id',
+ ],
+ [
+ '/route?dropoff=728%2C326\u0026pickup=609%2C233',
+ 'Jaeger-Go-2.30.0',
+ '64a18ffd5f8adbfb',
+ 'net/http',
+ '4f6ec470feea',
+ 'GET',
+ '200',
+ '172.25.0.2',
+ 'route',
+ '70d440fb-4875-4371-9a13-1bf5117c99e7',
+ ],
+ [
+ '{TraceId=000000000000000071dc9b0a338729b4, SpanId=26fbd8f91831c199, RefType=CHILD_OF}',
+ ],
+ [
+ '{"name":"HTTP request received","timeUnixNano":1721304360103976000,"attributeMap":{"level":"info","method":"GET","url":"/route?dropoff=728%2C326\\u0026pickup=609%2C233"}}',
+ ],
+ false,
+ '',
+ 'Unset',
+ 'Server',
+ ],
+ [
+ 1721304360109,
+ '668e5fc06e78796b',
+ '000000000000000071dc9b0a338729b4',
+ 'route',
+ 'HTTP GET /route',
+ '2',
+ '41012000',
+ [
+ 'component',
+ 'http.method',
+ 'service.name',
+ 'signoz.collector.id',
+ 'client-uuid',
+ 'host.name',
+ 'http.status_code',
+ 'http.url',
+ 'ip',
+ 'opencensus.exporterversion',
+ ],
+ [
+ 'net/http',
+ 'GET',
+ 'route',
+ '70d440fb-4875-4371-9a13-1bf5117c99e7',
+ '64a18ffd5f8adbfb',
+ '4f6ec470feea',
+ '200',
+ '/route?dropoff=728%2C326\u0026pickup=516%2C970',
+ '172.25.0.2',
+ 'Jaeger-Go-2.30.0',
+ ],
+ [
+ '{TraceId=000000000000000071dc9b0a338729b4, SpanId=255866d4d4b6ec08, RefType=CHILD_OF}',
+ ],
+ [
+ '{"name":"HTTP request received","timeUnixNano":1721304360109961000,"attributeMap":{"level":"info","method":"GET","url":"/route?dropoff=728%2C326\\u0026pickup=516%2C970"}}',
+ ],
+ false,
+ '',
+ 'Unset',
+ 'Server',
+ ],
+ [
+ 1721304360114,
+ '7eda7467eedf3b92',
+ '000000000000000071dc9b0a338729b4',
+ 'route',
+ 'HTTP GET /route',
+ '2',
+ '65157000',
+ [
+ 'host.name',
+ 'ip',
+ 'service.name',
+ 'http.status_code',
+ 'http.url',
+ 'opencensus.exporterversion',
+ 'signoz.collector.id',
+ 'client-uuid',
+ 'component',
+ 'http.method',
+ ],
+ [
+ '4f6ec470feea',
+ '172.25.0.2',
+ 'route',
+ '200',
+ '/route?dropoff=728%2C326\u0026pickup=524%2C763',
+ 'Jaeger-Go-2.30.0',
+ '70d440fb-4875-4371-9a13-1bf5117c99e7',
+ '64a18ffd5f8adbfb',
+ 'net/http',
+ 'GET',
+ ],
+ [
+ '{TraceId=000000000000000071dc9b0a338729b4, SpanId=2903e6c8cbe5f8c6, RefType=CHILD_OF}',
+ ],
+ [
+ '{"name":"HTTP request received","timeUnixNano":1721304360114939000,"attributeMap":{"level":"info","method":"GET","url":"/route?dropoff=728%2C326\\u0026pickup=524%2C763"}}',
+ ],
+ false,
+ '',
+ 'Unset',
+ 'Server',
+ ],
+ [
+ 1721304360152,
+ '231d5099ef1d826f',
+ '000000000000000071dc9b0a338729b4',
+ 'route',
+ 'HTTP GET /route',
+ '2',
+ '77985000',
+ [
+ 'host.name',
+ 'http.method',
+ 'http.status_code',
+ 'component',
+ 'http.url',
+ 'ip',
+ 'opencensus.exporterversion',
+ 'service.name',
+ 'signoz.collector.id',
+ 'client-uuid',
+ ],
+ [
+ '4f6ec470feea',
+ 'GET',
+ '200',
+ 'net/http',
+ '/route?dropoff=728%2C326\u0026pickup=267%2C822',
+ '172.25.0.2',
+ 'Jaeger-Go-2.30.0',
+ 'route',
+ '70d440fb-4875-4371-9a13-1bf5117c99e7',
+ '64a18ffd5f8adbfb',
+ ],
+ [
+ '{TraceId=000000000000000071dc9b0a338729b4, SpanId=3ed0b66560a03e14, RefType=CHILD_OF}',
+ ],
+ [
+ '{"name":"HTTP request received","timeUnixNano":1721304360152182000,"attributeMap":{"level":"info","method":"GET","url":"/route?dropoff=728%2C326\\u0026pickup=267%2C822"}}',
+ ],
+ false,
+ '',
+ 'Unset',
+ 'Server',
+ ],
+ ],
+ isSubTree: false,
+ },
+];
diff --git a/frontend/src/mocks-server/handlers.ts b/frontend/src/mocks-server/handlers.ts
index 87287a0d1a..55b5842612 100644
--- a/frontend/src/mocks-server/handlers.ts
+++ b/frontend/src/mocks-server/handlers.ts
@@ -13,6 +13,7 @@ import { membersResponse } from './__mockdata__/members';
import { queryRangeSuccessResponse } from './__mockdata__/query_range';
import { serviceSuccessResponse } from './__mockdata__/services';
import { topLevelOperationSuccessResponse } from './__mockdata__/top_level_operations';
+import { traceDetailResponse } from './__mockdata__/tracedetail';
export const handlers = [
rest.post('http://localhost/api/v3/query_range', (req, res, ctx) =>
@@ -210,6 +211,16 @@ export const handlers = [
res(ctx.status(200), ctx.json(explorerView)),
),
+ rest.post('http://localhost/api/v1/explorer/views', (req, res, ctx) =>
+ res(
+ ctx.status(200),
+ ctx.json({
+ status: 'success',
+ data: '7731ece1-3fa3-4ed4-8b1c-58b4c28723b2',
+ }),
+ ),
+ ),
+
rest.post('http://localhost/api/v1/event', (req, res, ctx) =>
res(
ctx.status(200),
@@ -220,6 +231,12 @@ export const handlers = [
}),
),
),
+
+ rest.get(
+ 'http://localhost/api/v1/traces/000000000000000071dc9b0a338729b4',
+ (req, res, ctx) => res(ctx.status(200), ctx.json(traceDetailResponse)),
+ ),
+
rest.post('http://localhost/api/v1//channels', (_, res, ctx) =>
res(ctx.status(200), ctx.json(allAlertChannels)),
),
diff --git a/frontend/src/pages/LogsExplorer/index.tsx b/frontend/src/pages/LogsExplorer/index.tsx
index d4422f58fe..8873d04e39 100644
--- a/frontend/src/pages/LogsExplorer/index.tsx
+++ b/frontend/src/pages/LogsExplorer/index.tsx
@@ -9,7 +9,7 @@ import RightToolbarActions from 'container/QueryBuilder/components/ToolbarAction
import Toolbar from 'container/Toolbar/Toolbar';
import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
import ErrorBoundaryFallback from 'pages/ErrorBoundaryFallback/ErrorBoundaryFallback';
-import { useEffect, useMemo, useState } from 'react';
+import { useEffect, useMemo, useRef, useState } from 'react';
import { DataSource } from 'types/common/queryBuilder';
import { WrapperStyled } from './styles';
@@ -23,6 +23,12 @@ function LogsExplorer(): JSX.Element {
const { handleRunQuery, currentQuery } = useQueryBuilder();
+ const listQueryKeyRef = useRef();
+
+ const chartQueryKeyRef = useRef();
+
+ const [isLoadingQueries, setIsLoadingQueries] = useState(false);
+
const handleToggleShowFrequencyChart = (): void => {
setShowFrequencyChart(!showFrequencyChart);
};
@@ -36,21 +42,34 @@ function LogsExplorer(): JSX.Element {
if (currentQuery.builder.queryData.length > 1) {
handleChangeSelectedView(SELECTED_VIEWS.QUERY_BUILDER);
}
- }, [currentQuery.builder.queryData.length]);
+ if (
+ currentQuery.builder.queryData.length === 1 &&
+ currentQuery.builder.queryData[0].groupBy.length > 0
+ ) {
+ handleChangeSelectedView(SELECTED_VIEWS.QUERY_BUILDER);
+ }
+ }, [currentQuery.builder.queryData, currentQuery.builder.queryData.length]);
const isMultipleQueries = useMemo(
() =>
- currentQuery.builder.queryData.length > 1 ||
- currentQuery.builder.queryFormulas.length > 0,
+ currentQuery.builder.queryData?.length > 1 ||
+ currentQuery.builder.queryFormulas?.length > 0,
[currentQuery],
);
+ const isGroupByPresent = useMemo(
+ () =>
+ currentQuery.builder.queryData?.length === 1 &&
+ currentQuery.builder.queryData?.[0]?.groupBy?.length > 0,
+ [currentQuery.builder.queryData],
+ );
+
const toolbarViews = useMemo(
() => ({
search: {
name: 'search',
label: 'Search',
- disabled: isMultipleQueries,
+ disabled: isMultipleQueries || isGroupByPresent,
show: true,
},
queryBuilder: {
@@ -66,7 +85,7 @@ function LogsExplorer(): JSX.Element {
show: false,
},
}),
- [isMultipleQueries],
+ [isGroupByPresent, isMultipleQueries],
);
return (
@@ -82,7 +101,14 @@ function LogsExplorer(): JSX.Element {
showFrequencyChart={showFrequencyChart}
/>
}
- rightActions={
{icon}
{label}
{isBeta && (
- Beta
+
+ Beta
+
)}
+
+ Coming Soon
+
+
+
+ {label}
+ );
+}
diff --git a/frontend/src/pages/MessagingQueues/MQDetailPage/MQDetailPage.tsx b/frontend/src/pages/MessagingQueues/MQDetailPage/MQDetailPage.tsx
new file mode 100644
index 0000000000..f82a2f605d
--- /dev/null
+++ b/frontend/src/pages/MessagingQueues/MQDetailPage/MQDetailPage.tsx
@@ -0,0 +1,84 @@
+import '../MessagingQueues.styles.scss';
+
+import { Select, Typography } from 'antd';
+import ROUTES from 'constants/routes';
+import DateTimeSelectionV2 from 'container/TopNav/DateTimeSelectionV2';
+import { ListMinus } from 'lucide-react';
+import { useHistory } from 'react-router-dom';
+
+import { MessagingQueuesViewType } from '../MessagingQueuesUtils';
+import { SelectLabelWithComingSoon } from '../MQCommon/MQCommon';
+import MessagingQueuesDetails from '../MQDetails/MQDetails';
+import MessagingQueuesConfigOptions from '../MQGraph/MQConfigOptions';
+import MessagingQueuesGraph from '../MQGraph/MQGraph';
+
+function MQDetailPage(): JSX.Element {
+ const history = useHistory();
+
+ return (
+
+
+ );
+}
+
+export default MQDetailPage;
diff --git a/frontend/src/pages/MessagingQueues/MQDetailPage/index.tsx b/frontend/src/pages/MessagingQueues/MQDetailPage/index.tsx
new file mode 100644
index 0000000000..eb2c41cb9b
--- /dev/null
+++ b/frontend/src/pages/MessagingQueues/MQDetailPage/index.tsx
@@ -0,0 +1,3 @@
+import MQDetailPage from './MQDetailPage';
+
+export default MQDetailPage;
diff --git a/frontend/src/pages/MessagingQueues/MQDetails/MQDetails.style.scss b/frontend/src/pages/MessagingQueues/MQDetails/MQDetails.style.scss
new file mode 100644
index 0000000000..68014823da
--- /dev/null
+++ b/frontend/src/pages/MessagingQueues/MQDetails/MQDetails.style.scss
@@ -0,0 +1,6 @@
+.mq-details {
+ width: 100%;
+ display: flex;
+ flex-direction: column;
+ gap: 24px;
+}
diff --git a/frontend/src/pages/MessagingQueues/MQDetails/MQDetails.tsx b/frontend/src/pages/MessagingQueues/MQDetails/MQDetails.tsx
new file mode 100644
index 0000000000..df1f643daa
--- /dev/null
+++ b/frontend/src/pages/MessagingQueues/MQDetails/MQDetails.tsx
@@ -0,0 +1,67 @@
+import './MQDetails.style.scss';
+
+import { Radio } from 'antd';
+import { Dispatch, SetStateAction, useState } from 'react';
+
+import {
+ ConsumerLagDetailTitle,
+ ConsumerLagDetailType,
+} from '../MessagingQueuesUtils';
+import { ComingSoon } from '../MQCommon/MQCommon';
+import MessagingQueuesTable from './MQTables/MQTables';
+
+function MessagingQueuesOptions({
+ currentTab,
+ setCurrentTab,
+}: {
+ currentTab: ConsumerLagDetailType;
+ setCurrentTab: Dispatch
+ history.push(ROUTES.MESSAGING_QUEUES)}
+ className="message-queue-text"
+ >
+ Messaging Queues
+
+
+
+
+
+ Kafka / views /
+
+ ),
+ value: MessagingQueuesViewType.partitionLatency.value,
+ disabled: true,
+ },
+ {
+ label: (
+
+
+
+
+
+
+
+ );
+}
+
+export default MessagingQueuesDetails;
diff --git a/frontend/src/pages/MessagingQueues/MQDetails/MQTables/MQTables.styles.scss b/frontend/src/pages/MessagingQueues/MQDetails/MQTables/MQTables.styles.scss
new file mode 100644
index 0000000000..e02e19e890
--- /dev/null
+++ b/frontend/src/pages/MessagingQueues/MQDetails/MQTables/MQTables.styles.scss
@@ -0,0 +1,99 @@
+.mq-tables-container {
+ .mq-table-title {
+ display: flex;
+ align-items: center;
+ gap: 12px;
+ padding-bottom: 16px;
+
+ color: var(--bg-vanilla-100);
+ font-family: Inter;
+ font-size: 18px;
+ font-style: normal;
+ font-weight: 500;
+ line-height: 28px;
+ letter-spacing: -0.09px;
+
+ .mq-table-subtitle {
+ color: var(--bg-vanilla-400);
+ font-size: 14px;
+ }
+ }
+
+ .mq-table {
+ width: 100%;
+
+ .ant-table-content {
+ border-radius: 6px;
+ border: 1px solid var(--bg-slate-500);
+ box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.1);
+ }
+
+ .ant-table-tbody {
+ .ant-table-cell {
+ max-width: 250px;
+
+ background-color: var(--bg-ink-400);
+
+ border-bottom: none;
+ }
+ }
+
+ .ant-table-thead {
+ .ant-table-cell {
+ background-color: var(--bg-ink-500);
+ border-bottom: 1px solid var(--bg-slate-500);
+ }
+ }
+ }
+
+ .no-data-style {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ height: 100%;
+ flex-direction: column;
+ gap: 24px;
+ padding: 24px;
+ border: 1px solid var(--bg-slate-500);
+ border-radius: 6px;
+
+ .ant-typography {
+ font-size: 14px;
+ }
+ }
+}
+
+.lightMode {
+ .mq-tables-container {
+ .mq-table-title {
+ color: var(--bg-slate-200);
+
+ .mq-table-subtitle {
+ color: var(--bg-slate-300);
+ }
+ }
+
+ .mq-table {
+ .ant-table-content {
+ border: 1px solid var(--bg-vanilla-300);
+ }
+
+ .ant-table-tbody {
+ .ant-table-cell {
+ background-color: var(--bg-vanilla-100);
+ }
+ }
+
+ .ant-table-thead {
+ .ant-table-cell {
+ background-color: var(--bg-vanilla-100);
+ border-bottom: 1px solid var(--bg-vanilla-300);
+ }
+ }
+ }
+
+ .no-data-style {
+ border: 1px solid var(--bg-vanilla-300);
+ }
+ }
+}
diff --git a/frontend/src/pages/MessagingQueues/MQDetails/MQTables/MQTables.tsx b/frontend/src/pages/MessagingQueues/MQDetails/MQTables/MQTables.tsx
new file mode 100644
index 0000000000..3de380cc2d
--- /dev/null
+++ b/frontend/src/pages/MessagingQueues/MQDetails/MQTables/MQTables.tsx
@@ -0,0 +1,210 @@
+import './MQTables.styles.scss';
+
+import { Skeleton, Table, Typography } from 'antd';
+import axios from 'axios';
+import { isNumber } from 'chart.js/helpers';
+import { ColumnTypeRender } from 'components/Logs/TableView/types';
+import { SOMETHING_WENT_WRONG } from 'constants/api';
+import { QueryParams } from 'constants/query';
+import { History } from 'history';
+import { useNotifications } from 'hooks/useNotifications';
+import useUrlQuery from 'hooks/useUrlQuery';
+import { isEmpty } from 'lodash-es';
+import {
+ ConsumerLagDetailTitle,
+ ConsumerLagDetailType,
+ convertToTitleCase,
+ RowData,
+ SelectedTimelineQuery,
+} from 'pages/MessagingQueues/MessagingQueuesUtils';
+import { useEffect, useMemo, useState } from 'react';
+import { useMutation } from 'react-query';
+import { useHistory } from 'react-router-dom';
+
+import {
+ ConsumerLagPayload,
+ getConsumerLagDetails,
+ MessagingQueuesPayloadProps,
+} from './getConsumerLagDetails';
+
+// eslint-disable-next-line sonarjs/cognitive-complexity
+export function getColumns(
+ data: MessagingQueuesPayloadProps['payload'],
+ history: History
+ {isEmptyDetails(timelineQueryData) ? (
+
+
+ )}
+
+ );
+}
+
+export default MessagingQueuesTable;
diff --git a/frontend/src/pages/MessagingQueues/MQDetails/MQTables/getConsumerLagDetails.ts b/frontend/src/pages/MessagingQueues/MQDetails/MQTables/getConsumerLagDetails.ts
new file mode 100644
index 0000000000..fc6a273e5d
--- /dev/null
+++ b/frontend/src/pages/MessagingQueues/MQDetails/MQTables/getConsumerLagDetails.ts
@@ -0,0 +1,61 @@
+import axios from 'api';
+import { ErrorResponseHandler } from 'api/ErrorResponseHandler';
+import { AxiosError } from 'axios';
+import { SOMETHING_WENT_WRONG } from 'constants/api';
+import { ConsumerLagDetailType } from 'pages/MessagingQueues/MessagingQueuesUtils';
+import { ErrorResponse, SuccessResponse } from 'types/api';
+
+export interface ConsumerLagPayload {
+ start?: number | string;
+ end?: number | string;
+ variables: {
+ partition?: string;
+ topic?: string;
+ consumer_group?: string;
+ };
+ detailType: ConsumerLagDetailType;
+}
+
+export interface MessagingQueuesPayloadProps {
+ status: string;
+ payload: {
+ resultType: string;
+ result: {
+ table: {
+ columns: {
+ name: string;
+ queryName: string;
+ isValueColumn: boolean;
+ }[];
+ rows: {
+ data: Record
+
+ Click on a co-ordinate above to see the details
+
+
+ ) : (
+ <>
+
+ {ConsumerLagDetailTitle[currentTab]}
+
+ {`${timelineQueryData?.group || ''} ${
+ timelineQueryData?.topic || ''
+ } ${timelineQueryData?.partition || ''}`}
+
+
+
+
+ );
+}
+
+export default MessagingQueuesConfigOptions;
diff --git a/frontend/src/pages/MessagingQueues/MQGraph/MQGraph.tsx b/frontend/src/pages/MessagingQueues/MQGraph/MQGraph.tsx
new file mode 100644
index 0000000000..cd7cdd74c4
--- /dev/null
+++ b/frontend/src/pages/MessagingQueues/MQGraph/MQGraph.tsx
@@ -0,0 +1,88 @@
+import { QueryParams } from 'constants/query';
+import { PANEL_TYPES } from 'constants/queryBuilder';
+import { ViewMenuAction } from 'container/GridCardLayout/config';
+import GridCard from 'container/GridCardLayout/GridCard';
+import { Card } from 'container/GridCardLayout/styles';
+import { getWidgetQueryBuilder } from 'container/MetricsApplication/MetricsApplication.factory';
+import { useIsDarkMode } from 'hooks/useDarkMode';
+import useUrlQuery from 'hooks/useUrlQuery';
+import { useCallback, useMemo } from 'react';
+import { useDispatch } from 'react-redux';
+import { useHistory, useLocation } from 'react-router-dom';
+import { UpdateTimeInterval } from 'store/actions';
+
+import {
+ getFiltersFromConfigOptions,
+ getWidgetQuery,
+ setSelectedTimelineQuery,
+} from '../MessagingQueuesUtils';
+
+function MessagingQueuesGraph(): JSX.Element {
+ const isDarkMode = useIsDarkMode();
+
+ const urlQuery = useUrlQuery();
+ const consumerGrp = urlQuery.get(QueryParams.consumerGrp) || '';
+ const topic = urlQuery.get(QueryParams.topic) || '';
+ const partition = urlQuery.get(QueryParams.partition) || '';
+
+ const filterItems = useMemo(
+ () => getFiltersFromConfigOptions(consumerGrp, topic, partition),
+ [consumerGrp, topic, partition],
+ );
+
+ const widgetData = useMemo(
+ () => getWidgetQueryBuilder(getWidgetQuery({ filterItems })),
+ [filterItems],
+ );
+ const history = useHistory();
+ const location = useLocation();
+
+ const messagingQueueCustomTooltipText = (): HTMLDivElement => {
+ const customText = document.createElement('div');
+ customText.textContent = 'Click on co-ordinate to view details';
+ customText.style.paddingTop = '8px';
+ customText.style.paddingBottom = '2px';
+ customText.style.color = '#fff';
+ return customText;
+ };
+
+ const { pathname } = useLocation();
+ const dispatch = useDispatch();
+
+ const onDragSelect = useCallback(
+ (start: number, end: number) => {
+ const startTimestamp = Math.trunc(start);
+ const endTimestamp = Math.trunc(end);
+
+ urlQuery.set(QueryParams.startTime, startTimestamp.toString());
+ urlQuery.set(QueryParams.endTime, endTimestamp.toString());
+ const generatedUrl = `${pathname}?${urlQuery.toString()}`;
+ history.push(generatedUrl);
+
+ if (startTimestamp !== endTimestamp) {
+ dispatch(UpdateTimeInterval('custom', [startTimestamp, endTimestamp]));
+ }
+ },
+ [dispatch, history, pathname, urlQuery],
+ );
+
+ return (
+
+
+
+
+ );
+}
+
+export default MessagingQueues;
diff --git a/frontend/src/pages/MessagingQueues/MessagingQueuesUtils.ts b/frontend/src/pages/MessagingQueues/MessagingQueuesUtils.ts
new file mode 100644
index 0000000000..b0855ce524
--- /dev/null
+++ b/frontend/src/pages/MessagingQueues/MessagingQueuesUtils.ts
@@ -0,0 +1,225 @@
+import { QueryParams } from 'constants/query';
+import { PANEL_TYPES } from 'constants/queryBuilder';
+import { GetWidgetQueryBuilderProps } from 'container/MetricsApplication/types';
+import { History, Location } from 'history';
+import { isEmpty } from 'lodash-es';
+import { DataTypes } from 'types/api/queryBuilder/queryAutocompleteResponse';
+import { TagFilterItem } from 'types/api/queryBuilder/queryBuilderData';
+import { EQueryType } from 'types/common/dashboard';
+import { DataSource } from 'types/common/queryBuilder';
+import { v4 as uuid } from 'uuid';
+
+export const KAFKA_SETUP_DOC_LINK =
+ 'https://github.com/shivanshuraj1333/kafka-opentelemetry-instrumentation/tree/master';
+
+export function convertToTitleCase(text: string): string {
+ return text
+ .split('_')
+ .map((word) => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase())
+ .join(' ');
+}
+
+export type RowData = {
+ key: string | number;
+ [key: string]: string | number;
+};
+
+export enum ConsumerLagDetailType {
+ ConsumerDetails = 'consumer-details',
+ ProducerDetails = 'producer-details',
+ NetworkLatency = 'network-latency',
+ PartitionHostMetrics = 'partition-host-metric',
+}
+
+export const ConsumerLagDetailTitle: Record
+
+
+
+ Kafka / Overview
+
+
+ + Start sending data in as little as 20 minutes +
+Connect and Monitor Your Data Streams
+
+
+
+
+
+
+ Configure Consumer
++ Connect your consumer and producer data sources to start monitoring. +
+
+
+
+
+
+
+
+ Configure Producer
++ Connect your consumer and producer data sources to start monitoring. +
+
+
+
+
+
+
+
+ Monitor kafka
++ Set up your Kafka monitoring to track consumer and producer activities. +
+
+
+
+
+
+
+
+
+
+ {MessagingQueuesViewType.consumerLag.label}
+
+
+ 1D
+
+
+
+
+
+
+
+ {MessagingQueuesViewType.partitionLatency.label}
+
+
+ 1D
+
+
+
+
+
+
+ {MessagingQueuesViewType.producerLatency.label}
+
+
+ 1D
+
+
+
+
+
+
+ {MessagingQueuesViewType.consumerLatency.label}
+
+
+ 1D
+
+
+ TraceFlameGraph
,
+}));
+
+describe('TraceDetail', () => {
+ it('should render tracedetail', async () => {
+ const { findByText, getByText, getAllByText, getByPlaceholderText } = render(
+ MockUplot
;
+ },
+);
+
+const successNotification = jest.fn();
+jest.mock('hooks/useNotifications', () => ({
+ __esModule: true,
+ useNotifications: jest.fn(() => ({
+ notifications: {
+ success: successNotification,
+ error: jest.fn(),
+ },
+ })),
+}));
+
jest.mock(
'container/TopNav/DateTimeSelectionV2/index.tsx',
() =>
@@ -48,84 +96,12 @@ jest.mock(
},
);
-function checkIfSectionIsOpen(
- getByTestId: (testId: string) => HTMLElement,
- panelName: string,
-): void {
- const section = getByTestId(`collapse-${panelName}`);
- expect(section.querySelector('.ant-collapse-item-active')).not.toBeNull();
-}
+jest.mock('container/OptionsMenu/useOptionsMenu', () => ({
+ __esModule: true,
+ default: (): any => optionMenuReturn,
+}));
-function checkIfSectionIsNotOpen(
- getByTestId: (testId: string) => HTMLElement,
- panelName: string,
-): void {
- const section = getByTestId(`collapse-${panelName}`);
- expect(section.querySelector('.ant-collapse-item-active')).toBeNull();
-}
-
-const defaultOpenSections = ['hasError', 'durationNano', 'serviceName'];
-
-const defaultClosedSections = Object.keys(AllTraceFilterKeyValue).filter(
- (section) =>
- ![...defaultOpenSections, 'durationNanoMin', 'durationNanoMax'].includes(
- section,
- ),
-);
-
-async function checkForSectionContent(values: string[]): Promise