diff --git a/src/pages/Stream/Views/Explore/LogsViewConfig.tsx b/src/pages/Stream/Views/Explore/LogsViewConfig.tsx index e1636ca4..f8cfc614 100644 --- a/src/pages/Stream/Views/Explore/LogsViewConfig.tsx +++ b/src/pages/Stream/Views/Explore/LogsViewConfig.tsx @@ -210,10 +210,6 @@ const ColumnsList = (props: { isLoading: boolean }) => { setLogsStore((store) => setDisabledColumns(store, [])); }, [orderedHeaders]); - // const onToggleWordWrap = useCallback(() => { - // setLogsStore((store) => toggleWordWrap(store)); - // }, []); - const handleOnlyClick = useCallback( (column: string) => { const filteredHeaders = orderedHeaders.filter((el) => el !== column); @@ -245,15 +241,6 @@ const ColumnsList = (props: { isLoading: boolean }) => { return ( <> - {/* - - */} { }; const Table = (props: { primaryHeaderHeight: number }) => { - const [{ orderedHeaders, disabledColumns, pinnedColumns, pageData, enableWordWrap }, setLogsStore] = useLogsStore( + const [{ orderedHeaders, disabledColumns, pinnedColumns, pageData, wrapDisabledColumns }, setLogsStore] = useLogsStore( (store) => store.tableOpts, ); const [isSecureHTTPContext] = useAppStore((store) => store.isSecureHTTPContext); @@ -71,12 +71,10 @@ const Table = (props: { primaryHeaderHeight: number }) => { setLogsStore((store) => setSelectedLog(store, log)); }, []); - return ( - { + return { className: tableStyles.customCell, style: { padding: '0.5rem 1rem', @@ -84,9 +82,19 @@ const Table = (props: { primaryHeaderHeight: number }) => { overflow: 'hidden', textOverflow: 'ellipsis', display: 'table-cell', - ...(enableWordWrap ? { whiteSpace: 'nowrap' } : {}), + ...(!_.includes(wrapDisabledColumns, columnName) ? { whiteSpace: 'nowrap' as 'nowrap' } : {}), }, - }} + }; + }, + [wrapDisabledColumns], + ); + + return ( + makeCellCustomStyles(id)} mantineTableHeadRowProps={{ style: { border: 'none' } }} mantineTableHeadCellProps={{ style: { diff --git a/src/pages/Stream/components/Column.tsx b/src/pages/Stream/components/Column.tsx index 66ca7d52..28ef47da 100644 --- a/src/pages/Stream/components/Column.tsx +++ b/src/pages/Stream/components/Column.tsx @@ -1,5 +1,5 @@ import { Log } from '@/@types/parseable/api/query'; -import { Box, Checkbox, Menu, ScrollArea, Stack, TextInput, Tooltip, px } from '@mantine/core'; +import { Checkbox, Menu, ScrollArea, Stack, Switch, TextInput, Tooltip, px } from '@mantine/core'; import { type ChangeEvent, type FC, Fragment, useRef, useCallback, useState, useEffect } from 'react'; import { IconFilter, IconSearch } from '@tabler/icons-react'; import EmptyBox from '@/components/Empty'; @@ -9,7 +9,7 @@ import { Text } from '@mantine/core'; import { useLogsStore, logsStoreReducers } from '../providers/LogsProvider'; import _ from 'lodash'; -const { getUniqueValues, setAndFilterData } = logsStoreReducers; +const { getUniqueValues, setAndFilterData, toggleWrapDisabledColumns } = logsStoreReducers; type Column = { columnName: string; @@ -21,6 +21,7 @@ const Column: FC = (props) => { const [filteredValues, setFilteredValues] = useState([]); const [selectedValues, setSelectedValues] = useState([]); const [rawData, setLogsStore] = useLogsStore((store) => store.data.rawData); + const [wrapDisabledColumns] = useLogsStore((store) => store.tableOpts.wrapDisabledColumns); const inputValueRef = useRef(''); useEffect(() => { @@ -53,38 +54,55 @@ const Column: FC = (props) => { const checkboxList = filteredValues.length === 0 ? (inputValueRef.current.length === 0 ? uniqueValues : []) : filteredValues; + + const onToggleWrap = () => { + setLogsStore((store) => toggleWrapDisabledColumns(store, columnName)); + }; + const wordWrapEnabled = _.includes(wrapDisabledColumns, columnName); return (
- - - - Filter by values: + + + Word Wrap + + + + + + Filter by values: + + } + onChange={onSearch} + mt={8} + /> + {checkboxList.length ? ( + + + + + + + ) : ( + + )} - } - onChange={onSearch} - mt={8} - /> - {checkboxList.length ? ( - - - - - - - ) : ( - - )} - +
); }; diff --git a/src/pages/Stream/providers/LogsProvider.tsx b/src/pages/Stream/providers/LogsProvider.tsx index 0a81054e..6d7e7ff7 100644 --- a/src/pages/Stream/providers/LogsProvider.tsx +++ b/src/pages/Stream/providers/LogsProvider.tsx @@ -196,6 +196,7 @@ type LogsStore = { tableOpts: { disabledColumns: string[]; + wrapDisabledColumns: string[]; pinnedColumns: string[]; pageData: Log[]; totalPages: number; @@ -252,6 +253,7 @@ type LogsStoreReducers = { // table opts reducers toggleDisabledColumns: (store: LogsStore, columnName: string) => ReducerOutput; + toggleWrapDisabledColumns: (store: LogsStore, columnName: string) => ReducerOutput; togglePinnedColumns: (store: LogsStore, columnName: string) => ReducerOutput; setCurrentOffset: (store: LogsStore, offset: number) => ReducerOutput; setPerPage: (store: LogsStore, perPage: number) => ReducerOutput; @@ -309,6 +311,7 @@ const initialState: LogsStore = { tableOpts: { disabledColumns: [], + wrapDisabledColumns: [], pinnedColumns: [], pageData: [], perPage: 50, @@ -487,6 +490,16 @@ const toggleDisabledColumns = (store: LogsStore, columnName: string) => { }; }; +const toggleWrapDisabledColumns = (store: LogsStore, columnName: string) => { + const { tableOpts } = store; + return { + tableOpts: { + ...tableOpts, + wrapDisabledColumns: addOrRemoveElement(tableOpts.wrapDisabledColumns, columnName), + }, + }; +}; + const setDisabledColumns = (store: LogsStore, columns: string[]) => { return { tableOpts: { @@ -688,6 +701,7 @@ const setCleanStoreForStreamChange = (store: LogsStore) => { totalPages: 0, orderedHeaders: [], disabledColumns: [], + wrapDisabledColumns: [], pinnedColumns: [], filters: {}, }, @@ -981,6 +995,7 @@ const logsStoreReducers: LogsStoreReducers = { setDisabledColumns, setOrderedHeaders, toggleWordWrap, + toggleWrapDisabledColumns }; export { LogsProvider, useLogsStore, logsStoreReducers };