From ad455008223373d08a6a685148b49122fa056614 Mon Sep 17 00:00:00 2001 From: jeyrathnam Date: Wed, 22 May 2024 21:00:57 -0500 Subject: [PATCH 1/6] save custom display columns to db, read from db on page load and update ui when columns are changed --- packages/api/src/models/logView.ts | 5 ++++ packages/api/src/routers/api/logViews.ts | 5 +++- packages/app/src/LogTable.tsx | 2 +- packages/app/src/SearchPage.tsx | 29 +++++++++++++++++++++--- packages/app/src/api.ts | 7 ++++-- packages/app/src/types.ts | 1 + 6 files changed, 42 insertions(+), 7 deletions(-) diff --git a/packages/api/src/models/logView.ts b/packages/api/src/models/logView.ts index 54ce528b7..2bec0c8f4 100644 --- a/packages/api/src/models/logView.ts +++ b/packages/api/src/models/logView.ts @@ -9,6 +9,7 @@ export interface ILogView { query: string; team: ObjectId; tags: string[]; + columns: string[]; } const LogViewSchema = new Schema( @@ -27,6 +28,10 @@ const LogViewSchema = new Schema( type: [String], default: [], }, + columns: { + type: [String], + default: [], + }, }, { timestamps: true, diff --git a/packages/api/src/routers/api/logViews.ts b/packages/api/src/routers/api/logViews.ts index 2daa0b8fd..529baa398 100644 --- a/packages/api/src/routers/api/logViews.ts +++ b/packages/api/src/routers/api/logViews.ts @@ -59,6 +59,7 @@ router.get('/', async (req, res, next) => { tags: 1, createdAt: 1, updatedAt: 1, + columns: 1, }, ).sort({ createdAt: -1 }); const allAlerts = await Promise.all( @@ -85,6 +86,7 @@ router.patch( name: z.string().max(1024).min(1).optional(), query: z.string().max(2048).optional(), tags: tagsSchema, + columns: z.array(z.string()), }), }), async (req, res, next) => { @@ -95,7 +97,7 @@ router.patch( return res.sendStatus(403); } - const { query, tags, name } = req.body; + const { query, tags, name, columns } = req.body; const logView = await LogView.findOneAndUpdate( { _id: logViewId, @@ -105,6 +107,7 @@ router.patch( ...(name && { name }), ...(query && { query }), tags: tags && uniq(tags), + columns: columns, }, { new: true }, ); diff --git a/packages/app/src/LogTable.tsx b/packages/app/src/LogTable.tsx index 251570baa..4203e27b3 100644 --- a/packages/app/src/LogTable.tsx +++ b/packages/app/src/LogTable.tsx @@ -410,7 +410,7 @@ export const RawLogTable = memo( size: columnSizeStorage[column] ?? 150, })) as ColumnDef[]), { - accessorKey: 'body', + accessorKey: 'show-pattern', header: () => ( Message{' '} diff --git a/packages/app/src/SearchPage.tsx b/packages/app/src/SearchPage.tsx index 451198bda..a8e1019a8 100644 --- a/packages/app/src/SearchPage.tsx +++ b/packages/app/src/SearchPage.tsx @@ -273,6 +273,9 @@ const LogViewerContainer = memo(function LogViewerContainer({ isUTC, setIsUTC, onShowPatternsClick, + displayedColumns, + setDisplayedColumns, + toggleColumn, }: { config: { where: string; @@ -294,6 +297,9 @@ const LogViewerContainer = memo(function LogViewerContainer({ isUTC: boolean; setIsUTC: (isUTC: boolean) => void; onShowPatternsClick: () => void; + displayedColumns: string[]; + setDisplayedColumns: () => void; + toggleColumn: (column: string) => void; }) { const [openedLogQuery, setOpenedLogQuery] = useQueryParams( { @@ -327,8 +333,9 @@ const LogViewerContainer = memo(function LogViewerContainer({ [openedLog, setOpenedLogQuery], ); - const { displayedColumns, setDisplayedColumns, toggleColumn } = - useDisplayedColumns(); + useEffect(() => { + console.log('displayed columns changed, new val: ', displayedColumns); + }, [displayedColumns]); return ( <> @@ -433,6 +440,9 @@ function SearchPage() { const [displayedSearchQuery, setDisplayedSearchQuery] = useState(''); + const { displayedColumns, setDisplayedColumns, toggleColumn } = + useDisplayedColumns(); + const doSearch = useCallback( (query: string, timeQuery: string) => { onSearch(timeQuery); @@ -474,14 +484,20 @@ function SearchPage() { const logViews = useMemo(() => logViewsData?.data ?? [], [logViewsData]); const selectedSavedSearch = logViews.find(v => v._id === savedSearchId); + console.log(selectedSavedSearch); // Populate searched query with saved query if searched query is unset (initial load) useEffect(() => { if (selectedSavedSearch != null && _searchedQuery == null) { + console.log('use effect hook:', selectedSavedSearch); setSearchedQuery(selectedSavedSearch?.query); } }, [selectedSavedSearch, setSearchedQuery, _searchedQuery]); + useEffect(() => { + setDisplayedColumns(selectedSavedSearch?.columns ?? []); + }, [selectedSavedSearch?.columns]); + useHotkeys( ['ctrl+s', 'meta+s'], () => { @@ -514,7 +530,11 @@ function SearchPage() { const onClickUpdateLogView = () => { if (selectedSavedSearch?._id && displayedSearchQuery) { updateLogView.mutate( - { id: selectedSavedSearch._id, query: displayedSearchQuery }, + { + id: selectedSavedSearch._id, + query: displayedSearchQuery, + columns: displayedColumns, + }, { onSuccess: () => { toast.success('Saved search updated.'); @@ -910,6 +930,9 @@ function SearchPage() { setIsLive={setIsLive} isUTC={isUTC} setIsUTC={setIsUTC} + displayedColumns={displayedColumns} + setDisplayedColumns={setDisplayedColumns} + toggleColumns={toggleColumn} onShowPatternsClick={() => { setIsLive(false); setResultsMode('patterns'); diff --git a/packages/app/src/api.ts b/packages/app/src/api.ts index 6cc4e1a1d..f256bce5c 100644 --- a/packages/app/src/api.ts +++ b/packages/app/src/api.ts @@ -531,7 +531,8 @@ const api = { { name: string; query: string; - tags?: string; + tags?: string[]; + columns?: string[]; } >(`log-views`, async ({ name, query, tags }) => hdxServer('log-views', { @@ -553,14 +554,16 @@ const api = { name?: string; query?: string; tags?: string[]; + columns?: string[]; } - >(`log-views`, async ({ id, name, query, tags }) => + >(`log-views`, async ({ id, name, query, tags, columns }) => hdxServer(`log-views/${id}`, { method: 'PATCH', json: { name, query, tags, + columns, }, }).json(), ); diff --git a/packages/app/src/types.ts b/packages/app/src/types.ts index 94e1fe1e4..ce53e830c 100644 --- a/packages/app/src/types.ts +++ b/packages/app/src/types.ts @@ -42,6 +42,7 @@ export type LogView = { query: string; alerts?: Alert[]; tags?: string[]; + columns?: string[]; }; export type Dashboard = { From 585677aaf27de0b71c34c3b21a706ca810ed67bf Mon Sep 17 00:00:00 2001 From: jeyrathnam Date: Wed, 22 May 2024 21:05:22 -0500 Subject: [PATCH 2/6] Remove console.log --- packages/app/src/SearchPage.tsx | 5 ----- 1 file changed, 5 deletions(-) diff --git a/packages/app/src/SearchPage.tsx b/packages/app/src/SearchPage.tsx index a8e1019a8..f5c0228e0 100644 --- a/packages/app/src/SearchPage.tsx +++ b/packages/app/src/SearchPage.tsx @@ -333,10 +333,6 @@ const LogViewerContainer = memo(function LogViewerContainer({ [openedLog, setOpenedLogQuery], ); - useEffect(() => { - console.log('displayed columns changed, new val: ', displayedColumns); - }, [displayedColumns]); - return ( <> { if (selectedSavedSearch != null && _searchedQuery == null) { - console.log('use effect hook:', selectedSavedSearch); setSearchedQuery(selectedSavedSearch?.query); } }, [selectedSavedSearch, setSearchedQuery, _searchedQuery]); From 282bae8dadb217929d4e29ea8a9e190c28e43baa Mon Sep 17 00:00:00 2001 From: jeyrathnam Date: Wed, 22 May 2024 21:08:04 -0500 Subject: [PATCH 3/6] Remove one more console.log --- packages/app/src/SearchPage.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/app/src/SearchPage.tsx b/packages/app/src/SearchPage.tsx index f5c0228e0..14db16557 100644 --- a/packages/app/src/SearchPage.tsx +++ b/packages/app/src/SearchPage.tsx @@ -480,7 +480,6 @@ function SearchPage() { const logViews = useMemo(() => logViewsData?.data ?? [], [logViewsData]); const selectedSavedSearch = logViews.find(v => v._id === savedSearchId); - console.log(selectedSavedSearch); // Populate searched query with saved query if searched query is unset (initial load) useEffect(() => { From b26d88dbca077ffe526e13b362ac047027de4a5e Mon Sep 17 00:00:00 2001 From: jeyrathnam Date: Wed, 22 May 2024 21:36:59 -0500 Subject: [PATCH 4/6] Fix ts error --- packages/app/src/SearchPage.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/app/src/SearchPage.tsx b/packages/app/src/SearchPage.tsx index 879b8f7b8..dd93f5d13 100644 --- a/packages/app/src/SearchPage.tsx +++ b/packages/app/src/SearchPage.tsx @@ -300,7 +300,7 @@ const LogViewerContainer = memo(function LogViewerContainer({ setIsUTC: (isUTC: boolean) => void; onShowPatternsClick: () => void; displayedColumns: string[]; - setDisplayedColumns: () => void; + setDisplayedColumns: (columns: string[]) => void; toggleColumn: (column: string) => void; }) { const [openedLogQuery, setOpenedLogQuery] = useQueryParams( @@ -388,7 +388,7 @@ const LogViewerContainer = memo(function LogViewerContainer({ )} onShowPatternsClick={onShowPatternsClick} displayedColumns={displayedColumns} - setDisplayedColumns={setDisplayedColumns} + setDisplayedColumns={columns => setDisplayedColumns(columns)} /> ); From 6fa36d6fc525f20c5e2faa58bdf5fd8470d20342 Mon Sep 17 00:00:00 2001 From: jeyrathnam Date: Wed, 22 May 2024 21:39:04 -0500 Subject: [PATCH 5/6] Add changeset --- .changeset/wet-buckets-eat.md | 6 ++++++ 1 file changed, 6 insertions(+) create mode 100644 .changeset/wet-buckets-eat.md diff --git a/.changeset/wet-buckets-eat.md b/.changeset/wet-buckets-eat.md new file mode 100644 index 000000000..5c7919f15 --- /dev/null +++ b/.changeset/wet-buckets-eat.md @@ -0,0 +1,6 @@ +--- +'@hyperdx/api': patch +'@hyperdx/app': patch +--- + +Persist display columns to db From 363c7c58ede6aa9f4acad462bad932d31cd2e742 Mon Sep 17 00:00:00 2001 From: jeyrathnam Date: Wed, 22 May 2024 21:50:06 -0500 Subject: [PATCH 6/6] Fix typo --- packages/app/src/SearchPage.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/app/src/SearchPage.tsx b/packages/app/src/SearchPage.tsx index dd93f5d13..19cecf3a6 100644 --- a/packages/app/src/SearchPage.tsx +++ b/packages/app/src/SearchPage.tsx @@ -1026,7 +1026,7 @@ function SearchPage() { setIsUTC={setIsUTC} displayedColumns={displayedColumns} setDisplayedColumns={setDisplayedColumns} - toggleColumns={toggleColumn} + toggleColumn={toggleColumn} onShowPatternsClick={() => { setIsLive(false); setResultsMode('patterns');