Persist display columns

.changeset/wet-buckets-eat.md

@@ -0,0 +1,6 @@
+---
+'@hyperdx/api': patch
+'@hyperdx/app': patch
+---
+
+Persist display columns to db

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<ILogView>(
@@ -27,6 +28,10 @@ const LogViewSchema = new Schema<ILogView>(
       type: [String],
       default: [],
     },
+    columns: {
+      type: [String],
+      default: [],
+    },
   },
   {
     timestamps: true,

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 },
       );

packages/app/src/LogTable.tsx

@@ -410,7 +410,7 @@ export const RawLogTable = memo(
           size: columnSizeStorage[column] ?? 150,
         })) as ColumnDef<any>[]),
         {
-          accessorKey: 'body',
+          accessorKey: 'show-pattern',
           header: () => (
             <span>
               Message{' '}

packages/app/src/SearchPage.tsx

@@ -275,6 +275,9 @@ const LogViewerContainer = memo(function LogViewerContainer({
   isUTC,
   setIsUTC,
   onShowPatternsClick,
+  displayedColumns,
+  setDisplayedColumns,
+  toggleColumn,
 }: {
   config: {
     where: string;
@@ -296,6 +299,9 @@ const LogViewerContainer = memo(function LogViewerContainer({
   isUTC: boolean;
   setIsUTC: (isUTC: boolean) => void;
   onShowPatternsClick: () => void;
+  displayedColumns: string[];
+  setDisplayedColumns: (columns: string[]) => void;
+  toggleColumn: (column: string) => void;
 }) {
   const [openedLogQuery, setOpenedLogQuery] = useQueryParams(
     {
@@ -329,9 +335,6 @@ const LogViewerContainer = memo(function LogViewerContainer({
     [openedLog, setOpenedLogQuery],
   );
 
-  const { displayedColumns, setDisplayedColumns, toggleColumn } =
-    useDisplayedColumns();
-
   return (
     <>
       <ErrorBoundary
@@ -385,7 +388,7 @@ const LogViewerContainer = memo(function LogViewerContainer({
         )}
         onShowPatternsClick={onShowPatternsClick}
         displayedColumns={displayedColumns}
-        setDisplayedColumns={setDisplayedColumns}
+        setDisplayedColumns={columns => setDisplayedColumns(columns)}
       />
     </>
   );
@@ -435,6 +438,9 @@ function SearchPage() {
 
   const [displayedSearchQuery, setDisplayedSearchQuery] = useState('');
 
+  const { displayedColumns, setDisplayedColumns, toggleColumn } =
+    useDisplayedColumns();
+
   const doSearch = useCallback(
     (query: string, timeQuery: string) => {
       onSearch(timeQuery);
@@ -484,6 +490,10 @@ function SearchPage() {
     }
   }, [selectedSavedSearch, setSearchedQuery, _searchedQuery]);
 
+  useEffect(() => {
+    setDisplayedColumns(selectedSavedSearch?.columns ?? []);
+  }, [selectedSavedSearch?.columns]);
+
   const isArcBrowser =
     typeof window !== 'undefined' &&
     window
@@ -528,7 +538,11 @@ function SearchPage() {
   const onClickUpdateLogView = () => {
     if (selectedSavedSearch?._id && displayedSearchQuery) {
       updateLogView.mutate(
-        { id: selectedSavedSearch._id, query: displayedSearchQuery },
+        {
+          id: selectedSavedSearch._id,
+          query: displayedSearchQuery,
+          columns: displayedColumns,
+        },
         {
           onSuccess: () => {
             notifications.show({
@@ -1010,6 +1024,9 @@ function SearchPage() {
                 setIsLive={setIsLive}
                 isUTC={isUTC}
                 setIsUTC={setIsUTC}
+                displayedColumns={displayedColumns}
+                setDisplayedColumns={setDisplayedColumns}
+                toggleColumn={toggleColumn}
                 onShowPatternsClick={() => {
                   setIsLive(false);
                   setResultsMode('patterns');

packages/app/src/api.ts

@@ -549,7 +549,8 @@ const api = {
       {
         name: string;
         query: string;
-        tags?: string;
+        tags?: string[];
+        columns?: string[];
       }
     >(`log-views`, async ({ name, query, tags }) =>
       hdxServer('log-views', {
@@ -571,14 +572,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(),
     );

packages/app/src/types.ts

@@ -42,6 +42,7 @@ export type LogView = {
   query: string;
   alerts?: Alert[];
   tags?: string[];
+  columns?: string[];
 };
 
 export type Dashboard = {