FE: Design update for log context tab

frontend/src/components/Logs/RawLogView/index.tsx

@@ -164,7 +164,11 @@ function RawLogView({
  >
  <LogStateIndicator
  type={logType}
- isActive={activeLog?.id === data.id || activeContextLog?.id === data.id}
+ isActive={
+ activeLog?.id === data.id ||
+ activeContextLog?.id === data.id ||
+ isActiveLog
+ }
  />
 
  <RawLogContent

frontend/src/container/LogDetailedView/ContextView/ContextLogRenderer.styles.scss

@@ -0,0 +1,26 @@
+.context-log-renderer {
+ .virtuoso-list {
+ overflow-y: hidden !important;
+ &::-webkit-scrollbar {
+ width: 0.3rem;
+ height: 0.3rem;
+ }
+
+ &::-webkit-scrollbar-track {
+ background: transparent;
+ }
+
+ &::-webkit-scrollbar-thumb {
+ background: var(--bg-slate-300);
+ }
+
+ &::-webkit-scrollbar-thumb:hover {
+ background: var(--bg-slate-200);
+ }
+
+ /* Adjust width to fit content for accessing the third descendant, which renders logs */
+ > div > div > div {
+ width: fit-content;
+ }
+ }
+}

frontend/src/container/LogDetailedView/ContextView/ContextLogRenderer.tsx

@@ -0,0 +1,120 @@
+import './ContextLogRenderer.styles.scss';
+
+import RawLogView from 'components/Logs/RawLogView';
+import Spinner from 'components/Spinner';
+import ShowButton from 'container/LogsContextList/ShowButton';
+import { ORDERBY_FILTERS } from 'container/QueryBuilder/filters/OrderByFilter/config';
+import { useCallback, useEffect, useState } from 'react';
+import { Virtuoso } from 'react-virtuoso';
+import { ILog } from 'types/api/logs/log';
+import { Query, TagFilter } from 'types/api/queryBuilder/queryBuilderData';
+
+import { useContextLogData } from './useContextLogData';
+
+function ContextLogRenderer({
+ isEdit,
+ query,
+ log,
+ filters,
+}: ContextLogRendererProps): JSX.Element {
+ const [firstLog, setFirstLog] = useState<ILog>(log);
+ const [lastLog, setLastLog] = useState<ILog>(log);
+ const [prevLogPage, setPrevLogPage] = useState<number>(1);
+ const [afterLogPage, setAfterLogPage] = useState<number>(1);
+ const [logs, setLogs] = useState<ILog[]>([log]);
+
+ const {
+ logs: previousLogs,
+ isFetching: isPreviousLogsFetching,
+ handleShowNextLines: handlePreviousLogsShowNextLine,
+ } = useContextLogData({
+ log: firstLog,
+ filters,
+ isEdit,
+ query,
+ order: ORDERBY_FILTERS.ASC,
+ page: prevLogPage,
+ setPage: setPrevLogPage,
+ });
+
+ const {
+ logs: afterLogs,
+ isFetching: isAfterLogsFetching,
+ handleShowNextLines: handleAfterLogsShowNextLine,
+ } = useContextLogData({
+ log: lastLog,
+ filters,
+ isEdit,
+ query,
+ order: ORDERBY_FILTERS.DESC,
+ page: afterLogPage,
+ setPage: setAfterLogPage,
+ });
+
+ useEffect(() => {
+ setLogs((prev) => [...previousLogs, ...prev]);
+ setFirstLog(logs[0]);
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, [previousLogs]);
+
+ useEffect(() => {
+ setLogs((prev) => [...prev, ...afterLogs]);
+ setLastLog(logs[logs.length - 1]);
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, [afterLogs]);
+
+ useEffect(() => {
+ setLogs([log]);
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, [filters]);
+
+ const getItemContent = useCallback(
+ (_: number, logTorender: ILog): JSX.Element => (
+ <RawLogView
+ isActiveLog={logTorender.id === log.id}
+ isReadOnly
+ isTextOverflowEllipsisDisabled
+ key={logTorender.id}
+ data={logTorender}
+ linesPerRow={1}
+ />
+ ),
+ [log.id],
+ );
+
+ return (
+ <div className="context-log-renderer">
+ <ShowButton
+ isLoading={isPreviousLogsFetching}
+ isDisabled={false}
+ order={ORDERBY_FILTERS.ASC}
+ onClick={handlePreviousLogsShowNextLine}
+ />
+ {isPreviousLogsFetching && <Spinner size="large" height="20rem" />}
+ <Virtuoso
+ className="virtuoso-list"
+ initialTopMostItemIndex={0}
+ data={logs}
+ itemContent={getItemContent}
+ style={{ height: `calc(${logs.length} * 32px)` }}
+ // followOutput={order === ORDERBY_FILTERS.DESC}
+ />
+ {isAfterLogsFetching && <Spinner size="large" height="20rem" />}
+ <ShowButton
+ isLoading={isAfterLogsFetching}
+ isDisabled={false}
+ order={ORDERBY_FILTERS.DESC}
+ onClick={handleAfterLogsShowNextLine}
+ />
+ </div>
+ );
+}
+
+interface ContextLogRendererProps {
+ isEdit: boolean;
+ query: Query;
+ log: ILog;
+ filters: TagFilter | null;
+}
+
+export default ContextLogRenderer;

frontend/src/container/LogDetailedView/ContextView/ContextView.styles.scss

@@ -1,3 +1,27 @@
 .log-context-container {
  border: 1px solid var(--bg-slate-400);
-}
+ height: 80vh;
+ position: relative;
+ overflow: scroll;
+ overflow-x: hidden;
+
+ &::-webkit-scrollbar {
+ width: 0.3rem;
+ }
+
+ &::-webkit-scrollbar-track {
+ background: transparent; 
+ }
+
+ &::-webkit-scrollbar-thumb {
+ background: var(--bg-slate-300);
+ }
+
+ &::-webkit-scrollbar-thumb:hover {
+ background: var(--bg-slate-200);
+ }
+}
+
+.isEditable {
+ height: 73vh; // when edit is true, reducing the size of log-context-container for avoiding extra scroll bars
+}

frontend/src/container/LogDetailedView/ContextView/ContextView.tsx

@@ -1,11 +1,11 @@
 import './ContextView.styles.scss';
 
-import RawLogView from 'components/Logs/RawLogView';
-import LogsContextList from 'container/LogsContextList';
-import { ORDERBY_FILTERS } from 'container/QueryBuilder/filters/OrderByFilter/config';
+import cx from 'classnames';
 import { ILog } from 'types/api/logs/log';
 import { Query, TagFilter } from 'types/api/queryBuilder/queryBuilderData';
 
+import ContextLogRenderer from './ContextLogRenderer';
+
 interface LogContextProps {
  log: ILog;
  contextQuery: Query | undefined;
@@ -23,29 +23,12 @@ function ContextView({
  if (!contextQuery) return <></>;
 
  return (
- <div className="log-context-container">
- <LogsContextList
- className="logs-context-list-asc"
- order={ORDERBY_FILTERS.ASC}
+ <div className={cx('log-context-container', { isEditable: isEdit })}>
+ <ContextLogRenderer
  filters={filters}
- isEdit={isEdit}
  log={log}
  query={contextQuery}
- />
- <RawLogView
- isActiveLog
- isReadOnly
- isTextOverflowEllipsisDisabled={false}
- data={log}
- linesPerRow={1}
- />
- <LogsContextList
- className="logs-context-list-desc"
- order={ORDERBY_FILTERS.DESC}
- filters={filters}
  isEdit={isEdit}
- log={log}
- query={contextQuery}
  />
  </div>
  );