feat: logs explorer context log line redirection (#7142)

* feat: display select columns from user preferences for context log line

* feat: add support for redirecting context log line to logs explorer

* feat: open context log line in new tab

* feat: pass all the filters on opening context log line in a new tab

* chore: make log context line cursor pointer
This commit is contained in:
Shaheer Kochai 2025-03-05 09:09:41 +04:30 committed by GitHub
parent 8a01312967
commit 2f3cee814e
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 53 additions and 13 deletions

View File

@ -22,4 +22,10 @@
width: fit-content;
}
}
&__item {
width: 100%;
.raw-log-content {
cursor: pointer;
}
}
}

View File

@ -1,9 +1,10 @@
import './ContextLogRenderer.styles.scss';
import { Skeleton } from 'antd';
import { Button, Skeleton } from 'antd';
import RawLogView from 'components/Logs/RawLogView';
import OverlayScrollbar from 'components/OverlayScrollbar/OverlayScrollbar';
import { LOCALSTORAGE } from 'constants/localStorage';
import { QueryParams } from 'constants/query';
import ShowButton from 'container/LogsContextList/ShowButton';
import { convertKeysToColumnFields } from 'container/LogsExplorerList/utils';
import { useOptionsMenu } from 'container/OptionsMenu';
@ -11,7 +12,9 @@ import { defaultLogsSelectedColumns } from 'container/OptionsMenu/constants';
import { FontSize } from 'container/OptionsMenu/types';
import { ORDERBY_FILTERS } from 'container/QueryBuilder/filters/OrderByFilter/config';
import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
import useUrlQuery from 'hooks/useUrlQuery';
import { useCallback, useEffect, useMemo, useState } from 'react';
import { useLocation } from 'react-router-dom';
import { Virtuoso } from 'react-virtuoso';
import { ILog } from 'types/api/logs/log';
import { Query, TagFilter } from 'types/api/queryBuilder/queryBuilderData';
@ -101,20 +104,51 @@ function ContextLogRenderer({
}
}, [options.fontSize]);
const urlQuery = useUrlQuery();
const { pathname } = useLocation();
const handleLogClick = useCallback(
(logId: string): void => {
urlQuery.set(QueryParams.activeLogId, `"${logId}"`);
urlQuery.set(
QueryParams.compositeQuery,
encodeURIComponent(JSON.stringify(query)),
);
const link = `${pathname}?${urlQuery.toString()}`;
window.open(link, '_blank', 'noopener,noreferrer');
},
[pathname, query, urlQuery],
);
const getItemContent = useCallback(
(_: number, logTorender: ILog): JSX.Element => (
<RawLogView
isActiveLog={logTorender.id === log.id}
isReadOnly
isTextOverflowEllipsisDisabled
key={logTorender.id}
data={logTorender}
linesPerRow={1}
fontSize={options.fontSize}
selectedFields={convertKeysToColumnFields(defaultLogsSelectedColumns)}
/>
<Button
type="text"
size="small"
className="context-log-renderer__item"
onClick={(): void => {
handleLogClick(logTorender.id);
}}
>
<RawLogView
isActiveLog={logTorender.id === log.id}
isReadOnly
isTextOverflowEllipsisDisabled
key={logTorender.id}
data={logTorender}
linesPerRow={1}
fontSize={options.fontSize}
selectedFields={convertKeysToColumnFields(
options.selectColumns ?? defaultLogsSelectedColumns,
)}
/>
</Button>
),
[log.id, options.fontSize],
[handleLogClick, log.id, options.fontSize, options.selectColumns],
);
return (