GitHub-Proxy/signoz
1
0
Fork 0
mirror of https://git.mirrors.martin98.com/https://github.com/SigNoz/signoz synced 2025-08-11 22:39:01 +08:00
Code Issues Packages Projects Releases Wiki Activity

chore: clean out the logs time range issues / old logs explorer routes issue (#5590)

Browse Source 
* chore: clean out the logs time range async issues

* chore: correct the permissions for old logs explorer
This commit is contained in:
Vikrant Gupta 2024-08-26 19:26:34 +05:30 committed by GitHub
parent 2ca10bb87c
commit c2f607ab6b
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
8 changed files with 63 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
frontend/src/container/LogsExplorerList/index.tsx
View File

@ -155,6 +155,7 @@ function LogsExplorerList({
>
<OverlayScrollbar isVirtuoso>
<Virtuoso
key={activeLogIndex || 'logs-virtuoso'}
ref={ref}
initialTopMostItemIndex={activeLogIndex !== -1 ? activeLogIndex : 0}
data={logs}

17
frontend/src/container/LogsExplorerViews/index.tsx
View File

@ -100,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<AppState, GlobalReducer>(
const { minTime, maxTime } = useSelector<AppState, GlobalReducer>(
(state) => state.globalTime,
);
@ -254,11 +254,10 @@ function LogsExplorerViews({
enabled: !isLimit && !!requestData,
},
{
...(timeRange &&
activeLogId &&
...(activeLogId &&
!logs.length && {
start: timeRange.start,
end: timeRange.end,
start: minTime,
end: maxTime,
}),
},
undefined,
@ -521,7 +520,7 @@ function LogsExplorerViews({
setLogs(newLogs);
onTimeRangeChange({
start: currentParams?.start,
end: timeRange?.end || currentParams?.end,
end: currentParams?.end,
pageSize: newLogs.length,
});
}
@ -538,8 +537,7 @@ function LogsExplorerViews({
filters: listQuery?.filters || initialFilters,
page: 1,
log: null,
pageSize:
timeRange?.pageSize && activeLogId ? timeRange?.pageSize : pageSize,
pageSize,
});
setLogs([]);
@ -554,7 +552,6 @@ function LogsExplorerViews({
listQuery,
pageSize,
minTime,
timeRange,
activeLogId,
onTimeRangeChange,
panelType,

38
frontend/src/container/LogsTable/index.tsx
View File

@ -10,12 +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 { FontSize } from 'container/OptionsMenu/types';
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';
@ -57,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];
@ -68,7 +78,7 @@ function LogsTable(props: LogsTableProps): JSX.Element {
data={log}
linesPerRow={linesPerRow}
selectedFields={selected}
fontSize={FontSize.SMALL}
fontSize={options.fontSize}
/>
);
}
@ -81,11 +91,19 @@ function LogsTable(props: LogsTableProps): JSX.Element {
linesPerRow={linesPerRow}
onAddToQuery={onAddToQuery}
onSetActiveLog={onSetActiveLog}
fontSize={FontSize.SMALL}
fontSize={options.fontSize}
/>
);
},
[logs, viewMode, selected, onAddToQuery, onSetActiveLog, linesPerRow],
[
logs,
viewMode,
selected,
linesPerRow,
onAddToQuery,
onSetActiveLog,
options.fontSize,
],
);
const renderContent = useMemo(() => {
@ -96,7 +114,7 @@ function LogsTable(props: LogsTableProps): JSX.Element {
logs={logs}
fields={selected}
linesPerRow={linesPerRow}
fontSize={FontSize.SMALL}
fontSize={options.fontSize}
/>
);
}
@ -108,7 +126,15 @@ function LogsTable(props: LogsTableProps): JSX.Element {
</OverlayScrollbar>
</Card>
);
}, [getItemContent, linesPerRow, logs, onSetActiveLog, selected, viewMode]);
}, [
getItemContent,
linesPerRow,
logs,
onSetActiveLog,
options.fontSize,
selected,
viewMode,
]);
if (isLoading) {
return <Spinner height={20} tip="Getting Logs" />;

2
frontend/src/container/TopNav/DateTimeSelectionV2/index.tsx
View File

@ -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()}`;

1
frontend/src/hooks/logs/types.ts
View File

@ -12,7 +12,6 @@ export type UseCopyLogLink = {
isHighlighted: boolean;
isLogsExplorerPage: boolean;
activeLogId: string | null;
timeRange: LogTimeRange | null;
onLogCopy: MouseEventHandler<HTMLElement>;
onTimeRangeChange: (newTimeRange: LogTimeRange | null) => void;
};

29
frontend/src/hooks/logs/useCopyLogLink.ts
View File

@ -26,33 +26,25 @@ export const useCopyLogLink = (logId?: string): UseCopyLogLink => {
const [, setCopy] = useCopyToClipboard();
const { notifications } = useNotifications();
const { queryData: timeRange } = useUrlQueryData<LogTimeRange | null>(
QueryParams.timeRange,
null,
);
const { queryData: activeLogId } = useUrlQueryData<string | null>(
QueryParams.activeLogId,
null,
);
const { selectedTime } = useSelector<AppState, GlobalReducer>(
(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,
};

18
frontend/src/hooks/useLogsData.ts
View File

@ -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<Query | null>(null);
const [shouldLoadMoreLogs, setShouldLoadMoreLogs] = useState<boolean>(false);
const { minTime, maxTime } = useSelector<AppState, GlobalReducer>(
(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,
});
}

2
frontend/src/utils/permission/index.ts
View File

@ -95,7 +95,7 @@ export const routePermission: Record<keyof typeof ROUTES, ROLES[]> = {
TRACES_SAVE_VIEWS: ['ADMIN', 'EDITOR', 'VIEWER'],
API_KEYS: ['ADMIN'],
LOGS_BASE: [],
OLD_LOGS_EXPLORER: [],
OLD_LOGS_EXPLORER: ['ADMIN', 'EDITOR', 'VIEWER'],
SHORTCUTS: ['ADMIN', 'EDITOR', 'VIEWER'],
INTEGRATIONS: ['ADMIN', 'EDITOR', 'VIEWER'],
SERVICE_TOP_LEVEL_OPERATIONS: ['ADMIN', 'EDITOR', 'VIEWER'],