From 9a31cc33d7deb560545b04d867fe947c1356a51e Mon Sep 17 00:00:00 2001 From: Ernest Iliiasov Date: Fri, 3 Nov 2023 22:42:05 -0400 Subject: [PATCH 1/5] feat: Toggle columns from LogSidePanel --- packages/app/src/LogSidePanel.tsx | 38 +++++++++++++++++++ packages/app/src/LogTable.tsx | 5 ++- packages/app/src/SearchPage.tsx | 8 ++++ packages/app/src/hooks/useDisplayedColumns.ts | 16 ++++++++ 4 files changed, 66 insertions(+), 1 deletion(-) create mode 100644 packages/app/src/hooks/useDisplayedColumns.ts diff --git a/packages/app/src/LogSidePanel.tsx b/packages/app/src/LogSidePanel.tsx index 3e4bc48ac..cfe178888 100644 --- a/packages/app/src/LogSidePanel.tsx +++ b/packages/app/src/LogSidePanel.tsx @@ -482,6 +482,8 @@ function TraceSubpanel({ onPropertyAddClick, generateChartUrl, generateSearchUrl, + displayedColumns, + toggleColumn, }: { logData: any; onClose: () => void; @@ -493,6 +495,8 @@ function TraceSubpanel({ }) => string; onPropertyAddClick?: (name: string, value: string) => void; + displayedColumns: string[]; + toggleColumn: (column: string) => void; }) { const date = new Date(logData.timestamp); const start = add(date, { minutes: -240 }); @@ -681,6 +685,8 @@ function TraceSubpanel({ generateSearchUrl={generateSearchUrl} onClose={onClose} generateChartUrl={generateChartUrl} + displayedColumns={displayedColumns} + toggleColumn={toggleColumn} /> @@ -1300,6 +1306,8 @@ function PropertySubpanel({ generateSearchUrl, onClose, generateChartUrl, + displayedColumns, + toggleColumn, }: { logData: any; generateSearchUrl: (query?: string, timeRange?: [Date, Date]) => string; @@ -1312,6 +1320,8 @@ function PropertySubpanel({ }) => string; onPropertyAddClick?: (key: string, value: string) => void; + displayedColumns?: string[]; + toggleColumn?: (column: string) => void; }) { const [propertySearchValue, setPropertySearchValue] = useState(''); const [isNestedView, setIsNestedView] = useLocalStorage( @@ -1582,6 +1592,8 @@ function PropertySubpanel({ }} valueRenderer={(raw, value, ...rawKeyPath) => { const keyPath = rawKeyPath.slice().reverse(); + const keyPathString = keyPath.join('.'); + return ( 
                   
                 ) : null}
+
+                {!!toggleColumn && keyPath.length === 1 ? (
+                  
+                ) : null}
+
                  {
@@ -2032,6 +2062,8 @@ export default function LogSidePanel({
   generateChartUrl,
   sortKey,
   isNestedPanel = false,
+  displayedColumns,
+  toggleColumn,
 }: {
   logId: string | undefined;
   onClose: () => void;
@@ -2048,6 +2080,8 @@ export default function LogSidePanel({
   }) => string;
   sortKey: string | undefined;
   isNestedPanel?: boolean;
+  displayedColumns: string[];
+  toggleColumn: (column: string) => void;
 }) {
   const contextZIndex = useZIndex();
 
@@ -2222,6 +2256,8 @@ export default function LogSidePanel({
                       generateSearchUrl={generateSearchUrl}
                       generateChartUrl={generateChartUrl}
                       onClose={_onClose}
+                      displayedColumns={displayedColumns}
+                      toggleColumn={toggleColumn}
                     />
) : null} diff --git a/packages/app/src/LogTable.tsx b/packages/app/src/LogTable.tsx index 71e2187df..e0aad4eda 100644 --- a/packages/app/src/LogTable.tsx +++ b/packages/app/src/LogTable.tsx @@ -784,6 +784,8 @@ export default function LogTable({ onEnd, onShowPatternsClick, tableId, + displayedColumns, + setDisplayedColumns, }: { config: { where: string; @@ -802,10 +804,11 @@ export default function LogTable({ onEnd?: () => void; onShowPatternsClick?: () => void; tableId?: string; + displayedColumns: string[]; + setDisplayedColumns: (columns: string[]) => void; }) { const [instructionsOpen, setInstructionsOpen] = useState(false); const [settingsOpen, setSettingsOpen] = useState(false); - const [displayedColumns, setDisplayedColumns] = useState([]); const [wrapLines, setWrapLines] = useState(false); const prevQueryConfig = usePrevious({ searchedQuery, isLive }); diff --git a/packages/app/src/SearchPage.tsx b/packages/app/src/SearchPage.tsx index de6efcffc..7e763ddf6 100644 --- a/packages/app/src/SearchPage.tsx +++ b/packages/app/src/SearchPage.tsx @@ -45,6 +45,7 @@ import SearchPageActionBar from './SearchPageActionBar'; import { useTimeQuery } from './timeQuery'; import { MemoPatternTableWithSidePanel } from './PatternTableWithSidePanel'; import { ErrorBoundary } from 'react-error-boundary'; +import { useDisplayedColumns } from './hooks/useDisplayedColumns'; const formatDate = ( date: Date, @@ -323,6 +324,9 @@ const LogViewerContainer = memo(function LogViewerContainer({ [setOpenedLogQuery], ); + const { displayedColumns, setDisplayedColumns, toggleColumn } = + useDisplayedColumns(); + return ( <> ); diff --git a/packages/app/src/hooks/useDisplayedColumns.ts b/packages/app/src/hooks/useDisplayedColumns.ts new file mode 100644 index 000000000..bf9978b43 --- /dev/null +++ b/packages/app/src/hooks/useDisplayedColumns.ts @@ -0,0 +1,16 @@ +import { useState } from 'react'; + +// TODO: Instead of prop drilling additional columns, we can consider using React.Context or Jotai +export const useDisplayedColumns = () => { + const [displayedColumns, setDisplayedColumns] = useState([]); + + const toggleColumn = (column: string) => { + if (displayedColumns.includes(column)) { + setDisplayedColumns(displayedColumns.filter(c => c !== column)); + } else { + setDisplayedColumns([...displayedColumns, column]); + } + }; + + return { displayedColumns, setDisplayedColumns, toggleColumn }; +}; From 63a7bf6c901274dbc3184eca3fef58e4e0b4733d Mon Sep 17 00:00:00 2001 From: Ernest Iliiasov Date: Fri, 3 Nov 2023 22:48:17 -0400 Subject: [PATCH 2/5] add changeset --- packages/app/.changeset/README.md | 11 +++++++++++ packages/app/.changeset/config.json | 11 +++++++++++ packages/app/.changeset/gold-jokes-warn.md | 5 +++++ 3 files changed, 27 insertions(+) create mode 100644 packages/app/.changeset/README.md create mode 100644 packages/app/.changeset/config.json create mode 100644 packages/app/.changeset/gold-jokes-warn.md diff --git a/packages/app/.changeset/README.md b/packages/app/.changeset/README.md new file mode 100644 index 000000000..468dd170c --- /dev/null +++ b/packages/app/.changeset/README.md @@ -0,0 +1,11 @@ +# Changesets + +Hello and welcome! This folder has been automatically generated by +`@changesets/cli`, a build tool that works with multi-package repos, or +single-package repos to help you version and publish your code. You can find the +full documentation for it +[in our repository](https://github.com/changesets/changesets) + +We have a quick list of common questions to get you started engaging with this +project in +[our documentation](https://github.com/changesets/changesets/blob/main/docs/common-questions.md) diff --git a/packages/app/.changeset/config.json b/packages/app/.changeset/config.json new file mode 100644 index 000000000..ab848d1a1 --- /dev/null +++ b/packages/app/.changeset/config.json @@ -0,0 +1,11 @@ +{ + "$schema": "https://unpkg.com/@changesets/config@2.3.1/schema.json", + "changelog": "@changesets/cli/changelog", + "commit": false, + "fixed": [], + "linked": [], + "access": "restricted", + "baseBranch": "main", + "updateInternalDependencies": "patch", + "ignore": [] +} diff --git a/packages/app/.changeset/gold-jokes-warn.md b/packages/app/.changeset/gold-jokes-warn.md new file mode 100644 index 000000000..8db7ac93d --- /dev/null +++ b/packages/app/.changeset/gold-jokes-warn.md @@ -0,0 +1,5 @@ +--- +'@hyperdx/app': minor +--- + +feat: Toggle columns from LogSidePanel From 20031e92ae27c81fd32ecb2168a6900dcf7695b0 Mon Sep 17 00:00:00 2001 From: Ernest Iliiasov Date: Fri, 3 Nov 2023 22:51:46 -0400 Subject: [PATCH 3/5] fix changeset --- .../famous-files-attend.md | 0 packages/app/.changeset/README.md | 11 ----------- packages/app/.changeset/config.json | 11 ----------- 3 files changed, 22 deletions(-) rename packages/app/.changeset/gold-jokes-warn.md => .changeset/famous-files-attend.md (100%) delete mode 100644 packages/app/.changeset/README.md delete mode 100644 packages/app/.changeset/config.json diff --git a/packages/app/.changeset/gold-jokes-warn.md b/.changeset/famous-files-attend.md similarity index 100% rename from packages/app/.changeset/gold-jokes-warn.md rename to .changeset/famous-files-attend.md diff --git a/packages/app/.changeset/README.md b/packages/app/.changeset/README.md deleted file mode 100644 index 468dd170c..000000000 --- a/packages/app/.changeset/README.md +++ /dev/null @@ -1,11 +0,0 @@ -# Changesets - -Hello and welcome! This folder has been automatically generated by -`@changesets/cli`, a build tool that works with multi-package repos, or -single-package repos to help you version and publish your code. You can find the -full documentation for it -[in our repository](https://github.com/changesets/changesets) - -We have a quick list of common questions to get you started engaging with this -project in -[our documentation](https://github.com/changesets/changesets/blob/main/docs/common-questions.md) diff --git a/packages/app/.changeset/config.json b/packages/app/.changeset/config.json deleted file mode 100644 index ab848d1a1..000000000 --- a/packages/app/.changeset/config.json +++ /dev/null @@ -1,11 +0,0 @@ -{ - "$schema": "https://unpkg.com/@changesets/config@2.3.1/schema.json", - "changelog": "@changesets/cli/changelog", - "commit": false, - "fixed": [], - "linked": [], - "access": "restricted", - "baseBranch": "main", - "updateInternalDependencies": "patch", - "ignore": [] -} From 62868784e663e1d8929f33523e428c554cbac6ab Mon Sep 17 00:00:00 2001 From: Ernest Iliiasov Date: Fri, 3 Nov 2023 22:59:50 -0400 Subject: [PATCH 4/5] add displayedColumns hook to LogTableWithSidePanel --- packages/app/src/LogTableWithSidePanel.tsx | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/packages/app/src/LogTableWithSidePanel.tsx b/packages/app/src/LogTableWithSidePanel.tsx index cc5d1f3c4..cc2df21ab 100644 --- a/packages/app/src/LogTableWithSidePanel.tsx +++ b/packages/app/src/LogTableWithSidePanel.tsx @@ -4,6 +4,7 @@ import usePortal from 'react-useportal'; import type { LogView } from './types'; import LogSidePanel from './LogSidePanel'; import LogTable from './LogTable'; +import { useDisplayedColumns } from './hooks/useDisplayedColumns'; export function LogTableWithSidePanel({ config, @@ -82,6 +83,9 @@ export function LogTableWithSidePanel({ const voidFn = useCallback(() => {}, []); + const { displayedColumns, setDisplayedColumns, toggleColumn } = + useDisplayedColumns(); + return ( <> {openedLog != null ? ( @@ -95,6 +99,8 @@ export function LogTableWithSidePanel({ onPropertyAddClick={onPropertyAddClick} generateSearchUrl={generateSearchUrl} generateChartUrl={generateChartUrl} + displayedColumns={displayedColumns} + toggleColumn={toggleColumn} /> ) : null} @@ -114,6 +120,8 @@ export function LogTableWithSidePanel({ [setOpenedLog, onRowExpandClick], )} onEnd={onSettled} + displayedColumns={displayedColumns} + setDisplayedColumns={setDisplayedColumns} /> ); From f9c657d1efd400b182b4da8354226660b903e614 Mon Sep 17 00:00:00 2001 From: Ernest Iliiasov Date: Sat, 4 Nov 2023 13:08:54 -0400 Subject: [PATCH 5/5] Address comments --- packages/app/src/LogSidePanel.tsx | 16 ++++++++-------- packages/app/src/LogTableWithSidePanel.tsx | 2 +- packages/app/src/SearchPage.tsx | 2 +- .../app/src/{hooks => }/useDisplayedColumns.ts | 0 4 files changed, 10 insertions(+), 10 deletions(-) rename packages/app/src/{hooks => }/useDisplayedColumns.ts (100%) diff --git a/packages/app/src/LogSidePanel.tsx b/packages/app/src/LogSidePanel.tsx index cfe178888..1d5dae4c5 100644 --- a/packages/app/src/LogSidePanel.tsx +++ b/packages/app/src/LogSidePanel.tsx @@ -495,8 +495,8 @@ function TraceSubpanel({ }) => string; onPropertyAddClick?: (name: string, value: string) => void; - displayedColumns: string[]; - toggleColumn: (column: string) => void; + displayedColumns?: string[]; + toggleColumn?: (column: string) => void; }) { const date = new Date(logData.timestamp); const start = add(date, { minutes: -240 }); @@ -1666,11 +1666,11 @@ function PropertySubpanel({ className="fs-8 text-muted-hover child-hover-trigger p-0" variant="link" as="a" - title={`${ + title={ displayedColumns?.includes(keyPathString) - ? 'Remove' - : 'Add' - } ${keyPathString} column`} + ? `Remove ${keyPathString} column from results table` + : `Add ${keyPathString} column to results table` + } style={{ width: 20 }} onClick={() => toggleColumn(keyPathString)} > @@ -2080,8 +2080,8 @@ export default function LogSidePanel({ }) => string; sortKey: string | undefined; isNestedPanel?: boolean; - displayedColumns: string[]; - toggleColumn: (column: string) => void; + displayedColumns?: string[]; + toggleColumn?: (column: string) => void; }) { const contextZIndex = useZIndex(); diff --git a/packages/app/src/LogTableWithSidePanel.tsx b/packages/app/src/LogTableWithSidePanel.tsx index cc2df21ab..730ad9097 100644 --- a/packages/app/src/LogTableWithSidePanel.tsx +++ b/packages/app/src/LogTableWithSidePanel.tsx @@ -4,7 +4,7 @@ import usePortal from 'react-useportal'; import type { LogView } from './types'; import LogSidePanel from './LogSidePanel'; import LogTable from './LogTable'; -import { useDisplayedColumns } from './hooks/useDisplayedColumns'; +import { useDisplayedColumns } from './useDisplayedColumns'; export function LogTableWithSidePanel({ config, diff --git a/packages/app/src/SearchPage.tsx b/packages/app/src/SearchPage.tsx index 7e763ddf6..69ea95049 100644 --- a/packages/app/src/SearchPage.tsx +++ b/packages/app/src/SearchPage.tsx @@ -45,7 +45,7 @@ import SearchPageActionBar from './SearchPageActionBar'; import { useTimeQuery } from './timeQuery'; import { MemoPatternTableWithSidePanel } from './PatternTableWithSidePanel'; import { ErrorBoundary } from 'react-error-boundary'; -import { useDisplayedColumns } from './hooks/useDisplayedColumns'; +import { useDisplayedColumns } from './useDisplayedColumns'; const formatDate = ( date: Date, diff --git a/packages/app/src/hooks/useDisplayedColumns.ts b/packages/app/src/useDisplayedColumns.ts similarity index 100% rename from packages/app/src/hooks/useDisplayedColumns.ts rename to packages/app/src/useDisplayedColumns.ts