From 96b81817e03fe8fb3c1abac6f32e82f7e1d355ba Mon Sep 17 00:00:00 2001 From: Vikrant Gupta Date: Thu, 22 Aug 2024 23:56:51 +0530 Subject: [PATCH] feat: add support for changing the font size in logs (#5739) * feat: add support for changing the font size in logs * fix: build issues and logs context * chore: fix build issues * feat: scale all the spaces * chore: handle light mode designs * feat: set small as the default --- .../components/Logs/AddToQueryHOC.styles.scss | 13 + .../src/components/Logs/AddToQueryHOC.tsx | 6 +- .../Logs/ListLogView/ListLogView.styles.scss | 69 ++++ .../src/components/Logs/ListLogView/index.tsx | 43 ++- .../src/components/Logs/ListLogView/styles.ts | 33 +- .../LogStateIndicator.styles.scss | 15 +- .../LogStateIndicator.test.tsx | 15 +- .../LogStateIndicator/LogStateIndicator.tsx | 5 +- .../src/components/Logs/RawLogView/index.tsx | 3 + .../src/components/Logs/RawLogView/styles.ts | 16 +- .../src/components/Logs/RawLogView/types.ts | 3 + .../src/components/Logs/TableView/styles.ts | 9 + .../src/components/Logs/TableView/types.ts | 2 + .../Logs/TableView/useTableView.styles.scss | 33 ++ .../Logs/TableView/useTableView.tsx | 12 +- .../LogsFormatOptionsMenu.styles.scss | 153 +++++++- .../LogsFormatOptionsMenu.tsx | 348 +++++++++++------- .../container/LiveLogs/LiveLogsList/index.tsx | 4 + .../ContextView/ContextLogRenderer.tsx | 41 ++- .../ContextView/useContextLogData.ts | 23 +- .../container/LogDetailedView/LogContext.tsx | 2 + .../container/LogDetailedView/TableView.tsx | 3 +- .../src/container/LogsContextList/configs.ts | 1 + .../src/container/LogsContextList/index.tsx | 2 + .../container/LogsExplorerContext/index.tsx | 2 + .../InfinityTableView/TableRow.tsx | 4 + .../InfinityTableView/config.ts | 15 + .../InfinityTableView/index.tsx | 15 +- .../InfinityTableView/styles.ts | 23 +- .../src/container/LogsExplorerList/index.tsx | 21 +- frontend/src/container/LogsTable/index.tsx | 4 + .../src/container/OptionsMenu/constants.ts | 3 +- frontend/src/container/OptionsMenu/types.ts | 12 + .../container/OptionsMenu/useOptionsMenu.ts | 34 +- 34 files changed, 803 insertions(+), 184 deletions(-) diff --git a/frontend/src/components/Logs/AddToQueryHOC.styles.scss b/frontend/src/components/Logs/AddToQueryHOC.styles.scss index 42baabd0..b65c3cb1 100644 --- a/frontend/src/components/Logs/AddToQueryHOC.styles.scss +++ b/frontend/src/components/Logs/AddToQueryHOC.styles.scss @@ -1,3 +1,16 @@ .addToQueryContainer { cursor: pointer; + display: flex; + align-items: center; + &.small { + height: 16px; + } + + &.medium { + height: 20px; + } + + &.large { + height: 24px; + } } diff --git a/frontend/src/components/Logs/AddToQueryHOC.tsx b/frontend/src/components/Logs/AddToQueryHOC.tsx index 8391a23b..df222b75 100644 --- a/frontend/src/components/Logs/AddToQueryHOC.tsx +++ b/frontend/src/components/Logs/AddToQueryHOC.tsx @@ -1,13 +1,16 @@ import './AddToQueryHOC.styles.scss'; import { Popover } from 'antd'; +import cx from 'classnames'; import { OPERATORS } from 'constants/queryBuilder'; +import { FontSize } from 'container/OptionsMenu/types'; import { memo, MouseEvent, ReactNode, useMemo } from 'react'; function AddToQueryHOC({ fieldKey, fieldValue, onAddToQuery, + fontSize, children, }: AddToQueryHOCProps): JSX.Element { const handleQueryAdd = (event: MouseEvent): void => { @@ -21,7 +24,7 @@ function AddToQueryHOC({ return ( // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions -
+
{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/ListLogView/ListLogView.styles.scss b/frontend/src/components/Logs/ListLogView/ListLogView.styles.scss index 3caf6a32..21dcf171 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 fa8a2fb6..d1461b0c 100644 --- a/frontend/src/components/Logs/ListLogView/index.tsx +++ b/frontend/src/components/Logs/ListLogView/index.tsx @@ -3,8 +3,10 @@ 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 { FontSize } from 'container/OptionsMenu/types'; import dayjs from 'dayjs'; import dompurify from 'dompurify'; import { useActiveLog } from 'hooks/logs/useActiveLog'; @@ -39,6 +41,7 @@ interface LogFieldProps { fieldKey: string; fieldValue: string; linesPerRow?: number; + fontSize: FontSize; } type LogSelectedFieldProps = Omit & @@ -48,6 +51,7 @@ function LogGeneralField({ fieldKey, fieldValue, linesPerRow = 1, + fontSize, }: LogFieldProps): JSX.Element { const html = useMemo( () => ({ @@ -62,12 +66,12 @@ function LogGeneralField({ return ( - + {`${fieldKey} : `} 1 ? linesPerRow : undefined} /> @@ -78,6 +82,7 @@ function LogSelectedField({ fieldKey = '', fieldValue = '', onAddToQuery, + fontSize, }: LogSelectedFieldProps): JSX.Element { return (
@@ -85,16 +90,22 @@ function LogSelectedField({ fieldKey={fieldKey} fieldValue={fieldValue} onAddToQuery={onAddToQuery} + fontSize={fontSize} > - + {fieldKey} - - {': '} - {fieldValue || "''"} + + {': '} + + {fieldValue || "''"} +
); @@ -107,6 +118,7 @@ type ListLogViewProps = { onAddToQuery: AddToQueryHOCProps['onAddToQuery']; activeLog?: ILog | null; linesPerRow: number; + fontSize: FontSize; }; function ListLogView({ @@ -116,6 +128,7 @@ function ListLogView({ onAddToQuery, activeLog, linesPerRow, + fontSize, }: ListLogViewProps): JSX.Element { const flattenLogData = useMemo(() => FlatLogData(logData), [logData]); @@ -185,6 +198,7 @@ function ListLogView({ onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave} onClick={handleDetailedView} + fontSize={fontSize} >
- + {flattenLogData.stream && ( - + )} - + {updatedSelecedFields.map((field) => isValidLogField(flattenLogData[field.name] as never) ? ( @@ -212,6 +236,7 @@ function ListLogView({ fieldKey={field.name} fieldValue={flattenLogData[field.name] as never} onAddToQuery={onAddToQuery} + fontSize={fontSize} /> ) : null, )} diff --git a/frontend/src/components/Logs/ListLogView/styles.ts b/frontend/src/components/Logs/ListLogView/styles.ts index 52cc2b20..d2a6342c 100644 --- a/frontend/src/components/Logs/ListLogView/styles.ts +++ b/frontend/src/components/Logs/ListLogView/styles.ts @@ -1,21 +1,46 @@ +/* eslint-disable no-nested-ternary */ import { Color } from '@signozhq/design-tokens'; import { Card, Typography } from 'antd'; +import { FontSize } from 'container/OptionsMenu/types'; import styled from 'styled-components'; interface LogTextProps { linesPerRow?: number; } +interface LogContainerProps { + fontSize: FontSize; +} + export const Container = styled(Card)<{ $isActiveLog: boolean; $isDarkMode: boolean; + fontSize: FontSize; }>` width: 100% !important; margin-bottom: 0.3rem; + + ${({ fontSize }): string => + fontSize === FontSize.SMALL + ? `margin-bottom:0.1rem;` + : fontSize === FontSize.MEDIUM + ? `margin-bottom: 0.2rem;` + : fontSize === FontSize.LARGE + ? `margin-bottom:0.3rem;` + : ``} cursor: pointer; .ant-card-body { padding: 0.3rem 0.6rem; + ${({ fontSize }): string => + fontSize === FontSize.SMALL + ? `padding:0.1rem 0.6rem;` + : fontSize === FontSize.MEDIUM + ? `padding: 0.2rem 0.6rem;` + : fontSize === FontSize.LARGE + ? `padding:0.3rem 0.6rem;` + : ``} + ${({ $isActiveLog, $isDarkMode }): string => $isActiveLog ? `background-color: ${ @@ -38,11 +63,17 @@ export const TextContainer = styled.div` width: 100%; `; -export const LogContainer = styled.div` +export const LogContainer = styled.div` 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 a00c7f67..61870abc 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 d924c274..06cc9d3e 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(); + const { container } = render( + , + ); const indicator = container.firstChild as HTMLElement; expect(indicator.classList.contains('log-state-indicator')).toBe(true); expect(indicator.classList.contains('isActive')).toBe(false); @@ -15,28 +18,30 @@ describe('LogStateIndicator', () => { }); it('renders correctly when isActive is true', () => { - const { container } = render(); + const { container } = render( + , + ); const indicator = container.firstChild as HTMLElement; expect(indicator.classList.contains('isActive')).toBe(true); }); it('renders correctly with different types', () => { const { container: containerInfo } = render( - , + , ); expect(containerInfo.querySelector('.line')?.classList.contains('INFO')).toBe( true, ); const { container: containerWarning } = render( - , + , ); expect( containerWarning.querySelector('.line')?.classList.contains('WARNING'), ).toBe(true); const { container: containerError } = render( - , + , ); expect( containerError.querySelector('.line')?.classList.contains('ERROR'), diff --git a/frontend/src/components/Logs/LogStateIndicator/LogStateIndicator.tsx b/frontend/src/components/Logs/LogStateIndicator/LogStateIndicator.tsx index ebad7bd1..b9afa5b7 100644 --- a/frontend/src/components/Logs/LogStateIndicator/LogStateIndicator.tsx +++ b/frontend/src/components/Logs/LogStateIndicator/LogStateIndicator.tsx @@ -1,6 +1,7 @@ import './LogStateIndicator.styles.scss'; import cx from 'classnames'; +import { FontSize } from 'container/OptionsMenu/types'; export const SEVERITY_TEXT_TYPE = { TRACE: 'TRACE', @@ -44,13 +45,15 @@ export const LogType = { function LogStateIndicator({ type, isActive, + fontSize, }: { type: string; + fontSize: FontSize; isActive?: boolean; }): JSX.Element { return (
-
+
); } diff --git a/frontend/src/components/Logs/RawLogView/index.tsx b/frontend/src/components/Logs/RawLogView/index.tsx index d1ae19fe..b4b3eb77 100644 --- a/frontend/src/components/Logs/RawLogView/index.tsx +++ b/frontend/src/components/Logs/RawLogView/index.tsx @@ -39,6 +39,7 @@ function RawLogView({ linesPerRow, isTextOverflowEllipsisDisabled, selectedFields = [], + fontSize, }: RawLogViewProps): JSX.Element { const { isHighlighted, isLogsExplorerPage, onLogCopy } = useCopyLogLink( data.id, @@ -168,6 +169,7 @@ function RawLogView({ activeContextLog?.id === data.id || isActiveLog } + fontSize={fontSize} /> diff --git a/frontend/src/components/Logs/RawLogView/styles.ts b/frontend/src/components/Logs/RawLogView/styles.ts index d86de435..35b853d9 100644 --- a/frontend/src/components/Logs/RawLogView/styles.ts +++ b/frontend/src/components/Logs/RawLogView/styles.ts @@ -1,6 +1,8 @@ +/* eslint-disable no-nested-ternary */ import { blue } from '@ant-design/colors'; import { Color } from '@signozhq/design-tokens'; import { Col, Row, Space } from 'antd'; +import { FontSize } from 'container/OptionsMenu/types'; import styled from 'styled-components'; import { getActiveLogBackground, getDefaultLogBackground } from 'utils/logs'; @@ -48,10 +50,15 @@ export const ExpandIconWrapper = styled(Col)` export const RawLogContent = styled.div` margin-bottom: 0; + display: flex !important; + align-items: center; font-family: 'SF Mono', monospace; font-family: 'Geist Mono'; font-size: 13px; font-weight: 400; + line-height: 24px; + letter-spacing: -0.07px; + padding: 4px; text-align: left; color: ${({ $isDarkMode }): string => $isDarkMode ? Color.BG_VANILLA_400 : Color.BG_INK_400}; @@ -66,9 +73,12 @@ export const RawLogContent = styled.div` line-clamp: ${linesPerRow}; -webkit-box-orient: vertical;`}; - 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 a9c85c2a..ed73725d 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 92130219..a79db04a 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 36a796ac..b2d3670d 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 3723ecc7..9592d0ae 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 fd371321..3a3ad54e 100644 --- a/frontend/src/components/Logs/TableView/useTableView.tsx +++ b/frontend/src/components/Logs/TableView/useTableView.tsx @@ -3,6 +3,7 @@ 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 dayjs from 'dayjs'; import dompurify from 'dompurify'; import { useIsDarkMode } from 'hooks/useDarkMode'; @@ -31,6 +32,7 @@ export const useTableView = (props: UseTableViewProps): UseTableViewResult => { logs, fields, linesPerRow, + fontSize, appendTo = 'center', activeContextLog, activeLog, @@ -57,7 +59,10 @@ export const useTableView = (props: UseTableViewProps): UseTableViewResult => { : getDefaultCellStyle(isDarkMode), }, children: ( - + {field} ), @@ -87,8 +92,9 @@ export const useTableView = (props: UseTableViewProps): UseTableViewResult => { isActive={ activeLog?.id === item.id || activeContextLog?.id === item.id } + fontSize={fontSize} /> - + {date}
@@ -114,6 +120,7 @@ export const useTableView = (props: UseTableViewProps): UseTableViewResult => { }), ), }} + fontSize={fontSize} linesPerRow={linesPerRow} isDarkMode={isDarkMode} /> @@ -130,6 +137,7 @@ export const useTableView = (props: UseTableViewProps): UseTableViewResult => { linesPerRow, activeLog?.id, activeContextLog?.id, + fontSize, ]); return { columns, dataSource: flattenLogData }; diff --git a/frontend/src/components/LogsFormatOptionsMenu/LogsFormatOptionsMenu.styles.scss b/frontend/src/components/LogsFormatOptionsMenu/LogsFormatOptionsMenu.styles.scss index af325a2d..070d4407 100644 --- a/frontend/src/components/LogsFormatOptionsMenu/LogsFormatOptionsMenu.styles.scss +++ b/frontend/src/components/LogsFormatOptionsMenu/LogsFormatOptionsMenu.styles.scss @@ -17,17 +17,126 @@ box-shadow: 4px 10px 16px 2px rgba(0, 0, 0, 0.2); backdrop-filter: blur(20px); + .font-size-dropdown { + display: flex; + flex-direction: column; + + .back-btn { + display: flex; + align-items: center; + gap: 6px; + padding: 12px; + border: none !important; + box-shadow: none !important; + + .icon { + flex-shrink: 0; + } + .text { + color: var(--bg-vanilla-400); + font-family: Inter; + font-size: 13px; + font-style: normal; + font-weight: 400; + line-height: 20px; /* 142.857% */ + letter-spacing: 0.14px; + } + } + + .back-btn:hover { + background-color: unset !important; + } + + .content { + display: flex; + flex-direction: column; + .option-btn { + display: flex; + align-items: center; + padding: 12px; + border: none !important; + box-shadow: none !important; + justify-content: space-between; + + .icon { + flex-shrink: 0; + } + .text { + color: var(--bg-vanilla-400); + font-family: Inter; + font-size: 13px; + font-style: normal; + font-weight: 400; + line-height: normal; /* 142.857% */ + letter-spacing: 0.14px; + text-transform: capitalize; + } + + .text:hover { + color: var(--bg-vanilla-300); + } + } + + .option-btn:hover { + background-color: unset !important; + } + } + } + + .font-size-container { + padding: 12px; + display: flex; + flex-direction: column; + gap: 12px; + + .title { + 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; + } + + .value { + display: flex; + height: 20px; + padding: 4px 0px; + justify-content: space-between; + align-items: center; + border: none !important; + .font-value { + color: var(--bg-vanilla-400); + font-family: Inter; + font-size: 13px; + font-style: normal; + font-weight: 400; + line-height: normal; + letter-spacing: 0.14px; + text-transform: capitalize; + } + .icon { + } + } + + .value:hover { + background-color: unset !important; + } + } + .menu-container { padding: 12px; .title { font-family: Inter; font-size: 11px; - font-weight: 600; + font-weight: 500; line-height: 18px; letter-spacing: 0.08em; text-align: left; - color: #52575c; + color: var(--bg-slate-50); } .menu-items { @@ -65,11 +174,11 @@ padding: 12px; .title { - color: #52575c; + color: var(--bg-slate-50); font-family: Inter; font-size: 11px; font-style: normal; - font-weight: 600; + font-weight: 500; line-height: 18px; /* 163.636% */ letter-spacing: 0.88px; text-transform: uppercase; @@ -149,11 +258,11 @@ } .title { - color: #52575c; + color: var(--bg-slate-50); font-family: Inter; font-size: 11px; font-style: normal; - font-weight: 600; + font-weight: 500; line-height: 18px; /* 163.636% */ letter-spacing: 0.88px; text-transform: uppercase; @@ -299,6 +408,38 @@ box-shadow: 4px 10px 16px 2px rgba(255, 255, 255, 0.2); + .font-size-dropdown { + .back-btn { + .text { + color: var(--bg-ink-400); + } + } + + .content { + .option-btn { + .text { + color: var(--bg-ink-400); + } + + .text:hover { + color: var(--bg-ink-300); + } + } + } + } + + .font-size-container { + .title { + color: var(--bg-ink-100); + } + + .value { + .font-value { + color: var(--bg-ink-400); + } + } + } + .horizontal-line { background: var(--bg-vanilla-300); } diff --git a/frontend/src/components/LogsFormatOptionsMenu/LogsFormatOptionsMenu.tsx b/frontend/src/components/LogsFormatOptionsMenu/LogsFormatOptionsMenu.tsx index 3a42e9a0..527c77c6 100644 --- a/frontend/src/components/LogsFormatOptionsMenu/LogsFormatOptionsMenu.tsx +++ b/frontend/src/components/LogsFormatOptionsMenu/LogsFormatOptionsMenu.tsx @@ -3,12 +3,12 @@ /* eslint-disable jsx-a11y/click-events-have-key-events */ import './LogsFormatOptionsMenu.styles.scss'; -import { Divider, Input, InputNumber, Tooltip } from 'antd'; +import { Button, Divider, Input, InputNumber, Tooltip, Typography } from 'antd'; import cx from 'classnames'; import { LogViewMode } from 'container/LogsTable'; -import { OptionsMenuConfig } from 'container/OptionsMenu/types'; +import { FontSize, OptionsMenuConfig } from 'container/OptionsMenu/types'; import useDebouncedFn from 'hooks/useDebouncedFunction'; -import { Check, Minus, Plus, X } from 'lucide-react'; +import { Check, ChevronLeft, ChevronRight, Minus, Plus, X } from 'lucide-react'; import { useCallback, useEffect, useState } from 'react'; interface LogsFormatOptionsMenuProps { @@ -24,10 +24,16 @@ export default function LogsFormatOptionsMenu({ selectedOptionFormat, config, }: LogsFormatOptionsMenuProps): JSX.Element { - const { maxLines, format, addColumn } = config; + const { maxLines, format, addColumn, fontSize } = config; const [selectedItem, setSelectedItem] = useState(selectedOptionFormat); const maxLinesNumber = (maxLines?.value as number) || 1; const [maxLinesPerRow, setMaxLinesPerRow] = useState(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 (
-
-
{title}
- -
- {items.map( - (item: any): JSX.Element => ( -
handleMenuItemClick(item.key)} - > -
- {item.label} - - {selectedItem === item.key && } -
-
- ), - )} + {isFontSizeOptionsOpen ? ( +
+ +
+
+ + + +
-
- - {selectedItem && ( + ) : ( <> - <> -
-
-
max lines per row
-
- - - -
-
- +
+
Font Size
+ +
+
+
+
{title}
-
- {!addNewColumn &&
} +
+ {items.map( + (item: any): JSX.Element => ( +
handleMenuItemClick(item.key)} + > +
+ {item.label} - {addNewColumn && ( -
-
- {' '} - columns - {' '} -
- - -
- )} - -
- {!addNewColumn && ( -
- columns - {' '} -
- )} - -
- {addColumn?.value?.map(({ key, id }) => ( -
-
- - {key} - + {selectedItem === item.key && }
- addColumn.onRemove(id as string)} - />
- ))} -
- - {addColumn?.isFetching && ( -
Loading ...
- )} - - {addNewColumn && - addColumn && - addColumn.value.length > 0 && - addColumn.options && - addColumn?.options?.length > 0 && ( - - )} - - {addNewColumn && ( -
- {addColumn?.options?.map(({ label, value }) => ( -
{ - eve.stopPropagation(); - - if (addColumn && addColumn?.onSelect) { - addColumn?.onSelect(value, { label, disabled: false }); - } - }} - > -
- - {label} - -
-
- ))} -
+ ), )}
+ + {selectedItem && ( + <> + <> +
+
+
max lines per row
+
+ + + +
+
+ + +
+ {!addNewColumn &&
} + + {addNewColumn && ( +
+
+ {' '} + columns + {' '} +
+ + +
+ )} + +
+ {!addNewColumn && ( +
+ columns + {' '} +
+ )} + +
+ {addColumn?.value?.map(({ key, id }) => ( +
+
+ + {key} + +
+ addColumn.onRemove(id as string)} + /> +
+ ))} +
+ + {addColumn?.isFetching && ( +
Loading ...
+ )} + + {addNewColumn && + addColumn && + addColumn.value.length > 0 && + addColumn.options && + addColumn?.options?.length > 0 && ( + + )} + + {addNewColumn && ( +
+ {addColumn?.options?.map(({ label, value }) => ( +
{ + eve.stopPropagation(); + + if (addColumn && addColumn?.onSelect) { + addColumn?.onSelect(value, { label, disabled: false }); + } + }} + > +
+ + {label} + +
+
+ ))} +
+ )} +
+
+ + )} )}
diff --git a/frontend/src/container/LiveLogs/LiveLogsList/index.tsx b/frontend/src/container/LiveLogs/LiveLogsList/index.tsx index f872b55d..50beda29 100644 --- a/frontend/src/container/LiveLogs/LiveLogsList/index.tsx +++ b/frontend/src/container/LiveLogs/LiveLogsList/index.tsx @@ -63,6 +63,7 @@ function LiveLogsList({ logs }: LiveLogsListProps): JSX.Element { data={log} linesPerRow={options.maxLines} selectedFields={selectedFields} + fontSize={options.fontSize} /> ); } @@ -75,12 +76,14 @@ function LiveLogsList({ logs }: LiveLogsListProps): JSX.Element { linesPerRow={options.maxLines} onAddToQuery={onAddToQuery} onSetActiveLog={onSetActiveLog} + fontSize={options.fontSize} /> ); }, [ onAddToQuery, onSetActiveLog, + options.fontSize, options.format, options.maxLines, selectedFields, @@ -123,6 +126,7 @@ function LiveLogsList({ logs }: LiveLogsListProps): JSX.Element { logs, fields: selectedFields, linesPerRow: options.maxLines, + fontSize: options.fontSize, appendTo: 'end', activeLogIndex, }} diff --git a/frontend/src/container/LogDetailedView/ContextView/ContextLogRenderer.tsx b/frontend/src/container/LogDetailedView/ContextView/ContextLogRenderer.tsx index d5c9f685..39b55d21 100644 --- a/frontend/src/container/LogDetailedView/ContextView/ContextLogRenderer.tsx +++ b/frontend/src/container/LogDetailedView/ContextView/ContextLogRenderer.tsx @@ -3,12 +3,17 @@ import './ContextLogRenderer.styles.scss'; import { Skeleton } from 'antd'; import RawLogView from 'components/Logs/RawLogView'; import OverlayScrollbar from 'components/OverlayScrollbar/OverlayScrollbar'; +import { LOCALSTORAGE } from 'constants/localStorage'; import ShowButton from 'container/LogsContextList/ShowButton'; +import { useOptionsMenu } from 'container/OptionsMenu'; +import { FontSize } from 'container/OptionsMenu/types'; import { ORDERBY_FILTERS } from 'container/QueryBuilder/filters/OrderByFilter/config'; -import { useCallback, useEffect, useState } from 'react'; +import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder'; +import { useCallback, useEffect, useMemo, useState } from 'react'; import { Virtuoso } from 'react-virtuoso'; import { ILog } from 'types/api/logs/log'; import { Query, TagFilter } from 'types/api/queryBuilder/queryBuilderData'; +import { DataSource, StringOperators } from 'types/common/queryBuilder'; import { useContextLogData } from './useContextLogData'; @@ -22,6 +27,20 @@ function ContextLogRenderer({ const [afterLogPage, setAfterLogPage] = useState(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 => ( ), - [log.id], + [log.id, options.fontSize], ); return ( @@ -101,7 +136,7 @@ function ContextLogRenderer({ initialTopMostItemIndex={0} data={logs} itemContent={getItemContent} - style={{ height: `calc(${logs.length} * 32px)` }} + style={{ height: `calc(${logs.length} * ${lengthMultipier}px)` }} /> {isAfterLogsFetching && ( diff --git a/frontend/src/container/LogDetailedView/ContextView/useContextLogData.ts b/frontend/src/container/LogDetailedView/ContextView/useContextLogData.ts index 91c7fdf3..3d07ea0a 100644 --- a/frontend/src/container/LogDetailedView/ContextView/useContextLogData.ts +++ b/frontend/src/container/LogDetailedView/ContextView/useContextLogData.ts @@ -4,9 +4,11 @@ import { PANEL_TYPES } from 'constants/queryBuilder'; import { getOrderByTimestamp, INITIAL_PAGE_SIZE, + INITIAL_PAGE_SIZE_SMALL_FONT, LOGS_MORE_PAGE_SIZE, } from 'container/LogsContextList/configs'; import { getRequestData } from 'container/LogsContextList/utils'; +import { FontSize } from 'container/OptionsMenu/types'; import { ORDERBY_FILTERS } from 'container/QueryBuilder/filters/OrderByFilter/config'; import { useGetExplorerQueryRange } from 'hooks/queryBuilder/useGetExplorerQueryRange'; import { @@ -30,6 +32,7 @@ export const useContextLogData = ({ filters, page, setPage, + fontSize, }: { log: ILog; query: Query; @@ -38,6 +41,7 @@ export const useContextLogData = ({ filters: TagFilter | null; page: number; setPage: Dispatch>; + 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/LogContext.tsx b/frontend/src/container/LogDetailedView/LogContext.tsx index 90d4a6e5..6997c651 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} /> {renderedField} diff --git a/frontend/src/container/LogsContextList/configs.ts b/frontend/src/container/LogsContextList/configs.ts index baa3b394..9b70dfc5 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 270291a3..d215386c 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 d62cdb27..32075097 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 ec16ba10..c235cbd5 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 28755751..c678da49 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'; @@ -95,9 +95,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 +118,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 +128,7 @@ const InfinityTable = forwardRef( })} ), - [tableColumns, isDarkMode], + [tableColumns, isDarkMode, tableViewProps?.fontSize], ); const handleClickExpand = (index: number): void => { @@ -137,7 +144,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 diff --git a/frontend/src/container/LogsExplorerList/InfinityTableView/styles.ts b/frontend/src/container/LogsExplorerList/InfinityTableView/styles.ts index e2719dbc..89c9592d 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 760f3fea..18f6ba6d 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'; @@ -79,6 +80,7 @@ function LogsExplorerList({ data={log} linesPerRow={options.maxLines} selectedFields={selectedFields} + fontSize={options.fontSize} /> ); } @@ -91,6 +93,7 @@ function LogsExplorerList({ onAddToQuery={onAddToQuery} onSetActiveLog={onSetActiveLog} activeLog={activeLog} + fontSize={options.fontSize} linesPerRow={options.maxLines} /> ); @@ -99,6 +102,7 @@ function LogsExplorerList({ activeLog, onAddToQuery, onSetActiveLog, + options.fontSize, options.format, options.maxLines, selectedFields, @@ -121,6 +125,7 @@ function LogsExplorerList({ logs, fields: selectedFields, linesPerRow: options.maxLines, + fontSize: options.fontSize, appendTo: 'end', activeLogIndex, }} @@ -129,9 +134,22 @@ 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 ( @@ -151,6 +169,7 @@ function LogsExplorerList({ isLoading, options.format, options.maxLines, + options.fontSize, activeLogIndex, logs, onEndReached, diff --git a/frontend/src/container/LogsTable/index.tsx b/frontend/src/container/LogsTable/index.tsx index 6b20986d..b7b9de84 100644 --- a/frontend/src/container/LogsTable/index.tsx +++ b/frontend/src/container/LogsTable/index.tsx @@ -10,6 +10,7 @@ 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 { useActiveLog } from 'hooks/logs/useActiveLog'; import { memo, useCallback, useMemo } from 'react'; import { useSelector } from 'react-redux'; @@ -66,6 +67,7 @@ function LogsTable(props: LogsTableProps): JSX.Element { data={log} linesPerRow={linesPerRow} selectedFields={selected} + fontSize={FontSize.SMALL} /> ); } @@ -78,6 +80,7 @@ function LogsTable(props: LogsTableProps): JSX.Element { linesPerRow={linesPerRow} onAddToQuery={onAddToQuery} onSetActiveLog={onSetActiveLog} + fontSize={FontSize.SMALL} /> ); }, @@ -92,6 +95,7 @@ function LogsTable(props: LogsTableProps): JSX.Element { logs={logs} fields={selected} linesPerRow={linesPerRow} + fontSize={FontSize.SMALL} /> ); } diff --git a/frontend/src/container/OptionsMenu/constants.ts b/frontend/src/container/OptionsMenu/constants.ts index 7a454de8..7b591cd4 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 = [ diff --git a/frontend/src/container/OptionsMenu/types.ts b/frontend/src/container/OptionsMenu/types.ts index 57b81364..2c57d66b 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 97fbbbb0..6ed445a7 100644 --- a/frontend/src/container/OptionsMenu/useOptionsMenu.ts +++ b/frontend/src/container/OptionsMenu/useOptionsMenu.ts @@ -21,7 +21,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 { @@ -248,6 +253,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 +298,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, ], );