Reusable DBSqlRowTableWithSideBar Component

.changeset/bright-suns-prove.md

@@ -0,0 +1,5 @@
+---
+"@hyperdx/app": patch
+---
+
+Reusable DBSqlRowTableWithSideBar Component

packages/app/src/ClickhousePage.tsx

@@ -7,6 +7,8 @@ import {
   useQueryStates,
 } from 'nuqs';
 import { useForm } from 'react-hook-form';
+import { sql } from '@codemirror/lang-sql';
+import { format as formatSql } from '@hyperdx/common-utils/dist/sqlFormatter';
 import { DisplayType } from '@hyperdx/common-utils/dist/types';
 import {
   Box,
@@ -19,6 +21,7 @@ import {
   Tabs,
   Text,
 } from '@mantine/core';
+import ReactCodeMirror from '@uiw/react-codemirror';
 
 import { ConnectionSelectControlled } from '@/components/ConnectionSelect';
 import { DBTimeChart } from '@/components/DBTimeChart';
@@ -702,9 +705,18 @@ function ClickhousePage() {
                   Slowest Queries
                 </Text>
                 <DBSqlRowTable
-                  highlightedLineId={undefined}
-                  onRowExpandClick={() => {}}
-                  showExpandButton={false}
+                  renderRowDetails={row => {
+                    return (
+                      <ReactCodeMirror
+                        extensions={[sql()]}
+                        editable={false}
+                        value={formatSql(row.query)}
+                        theme="dark"
+                        lang="sql"
+                        maxHeight="200px"
+                      />
+                    );
+                  }}
                   config={{
                     select: `event_time, query_kind, 
                 read_rows,
@@ -735,7 +747,6 @@ function ClickhousePage() {
                     ],
                     limit: { limit: 100 },
                   }}
-                  onScroll={() => {}}
                 />
               </ChartBox>
             </Grid.Col>

packages/app/src/DBDashboardPage.tsx

@@ -49,12 +49,10 @@ import {
 } from '@mantine/core';
 import { useHover, usePrevious } from '@mantine/hooks';
 import { notifications } from '@mantine/notifications';
-import { useQueryClient } from '@tanstack/react-query';
 
 import { ContactSupportText } from '@/components/ContactSupportText';
 import EditTimeChartForm from '@/components/DBEditTimeChartForm';
 import DBNumberChart from '@/components/DBNumberChart';
-import { DBSqlRowTable } from '@/components/DBRowTable';
 import DBTableChart from '@/components/DBTableChart';
 import { DBTimeChart } from '@/components/DBTimeChart';
 import { SQLInlineEditorControlled } from '@/components/SQLInlineEditor';
@@ -66,11 +64,10 @@ import {
   useDeleteDashboard,
 } from '@/dashboard';
 
-import DBRowSidePanel from './components/DBRowSidePanel';
+import DBSqlRowTableWithSideBar from './components/DBSqlRowTableWithSidebar';
 import OnboardingModal from './components/OnboardingModal';
 import { Tags } from './components/Tags';
 import { useDashboardRefresh } from './hooks/useDashboardRefresh';
-import { useAllFields } from './hooks/useMetadata';
 import api from './api';
 import { DEFAULT_CHART_CONFIG } from './ChartUtils';
 import { IS_LOCAL_MODE } from './config';
@@ -89,7 +86,7 @@ import {
 import { parseTimeQuery, useNewTimeQuery } from './timeQuery';
 import { useConfirm } from './useConfirm';
 import { getMetricTableName, hashCode, omit } from './utils';
-import { ZIndexContext } from './zIndex';
+import { useZIndex, ZIndexContext } from './zIndex';
 
 import 'react-grid-layout/css/styles.css';
 import 'react-resizable/css/styles.css';
@@ -197,17 +194,6 @@ const Tile = forwardRef(
 
     const [hovered, setHovered] = useState(false);
 
-    // Search tile
-    const [rowId, setRowId] = useQueryState('rowWhere');
-    const [_, setRowSource] = useQueryState('rowSource');
-    const handleRowExpandClick = useCallback(
-      (rowWhere: string) => {
-        setRowId(rowWhere);
-        setRowSource(chart.config.source);
-      },
-      [chart.config.source, setRowId, setRowSource],
-    );
-
     const alert = chart.config.alert;
     const alertIndicatorColor = useMemo(() => {
       if (!alert) {
@@ -351,7 +337,7 @@ const Tile = forwardRef(
               <HDXMarkdownChart config={queriedConfig} />
             )}
             {queriedConfig?.displayType === DisplayType.Search && (
-              <DBSqlRowTable
+              <DBSqlRowTableWithSideBar
                 enabled
                 sourceId={chart.config.source}
                 config={{
@@ -372,9 +358,6 @@ const Tile = forwardRef(
                   groupBy: undefined,
                   granularity: undefined,
                 }}
-                onRowExpandClick={handleRowExpandClick}
-                highlightedLineId={rowId ?? undefined}
-                onScroll={() => {}}
                 isLive={false}
                 queryKeyPrefix={'search'}
               />
@@ -402,6 +385,8 @@ const EditTileModal = ({
   isSaving?: boolean;
   onSave: (chart: Tile) => void;
 }) => {
+  const contextZIndex = useZIndex();
+  const modalZIndex = contextZIndex + 10;
   return (
     <Modal
       opened={chart != null}
@@ -410,22 +395,25 @@ const EditTileModal = ({
       centered
       size="90%"
       padding="xs"
+      zIndex={modalZIndex}
     >
       {chart != null && (
-        <EditTimeChartForm
-          dashboardId={dashboardId}
-          chartConfig={chart.config}
-          setChartConfig={config => {}}
-          dateRange={dateRange}
-          isSaving={isSaving}
-          onSave={config => {
-            onSave({
-              ...chart,
-              config: config,
-            });
-          }}
-          onClose={onClose}
-        />
+        <ZIndexContext.Provider value={modalZIndex + 10}>
+          <EditTimeChartForm
+            dashboardId={dashboardId}
+            chartConfig={chart.config}
+            setChartConfig={config => {}}
+            dateRange={dateRange}
+            isSaving={isSaving}
+            onSave={config => {
+              onSave({
+                ...chart,
+                config: config,
+              });
+            }}
+            onClose={onClose}
+          />
+        </ZIndexContext.Provider>
       )}
     </Modal>
   );
@@ -1068,13 +1056,6 @@ function DBDashboardPage({ presetConfig }: { presetConfig?: Dashboard }) {
       >
         + Add New Tile
       </Button>
-      {rowId && rowSidePanelSource && (
-        <DBRowSidePanel
-          source={rowSidePanelSource}
-          rowId={rowId}
-          onClose={handleSidePanelClose}
-        />
-      )}
     </Box>
   );
 }

packages/app/src/DBSearchPage.tsx

@@ -58,13 +58,9 @@ import { notifications } from '@mantine/notifications';
 import { useIsFetching } from '@tanstack/react-query';
 import CodeMirror from '@uiw/react-codemirror';
 
-import { useTimeChartSettings } from '@/ChartUtils';
 import { ContactSupportText } from '@/components/ContactSupportText';
 import DBDeltaChart from '@/components/DBDeltaChart';
 import DBHeatmapChart from '@/components/DBHeatmapChart';
-import DBRowSidePanel from '@/components/DBRowSidePanel';
-import { RowSidePanelContext } from '@/components/DBRowSidePanel';
-import { DBSqlRowTable } from '@/components/DBRowTable';
 import { DBSearchPageFilters } from '@/components/DBSearchPageFilters';
 import { DBTimeChart } from '@/components/DBTimeChart';
 import { ErrorBoundary } from '@/components/ErrorBoundary';
@@ -103,6 +99,7 @@ import { parseTimeQuery, useNewTimeQuery } from '@/timeQuery';
 import { QUERY_LOCAL_STORAGE, useLocalStorage, usePrevious } from '@/utils';
 
 import { SQLPreview } from './components/ChartSQLPreview';
+import DBSqlRowTableWithSideBar from './components/DBSqlRowTableWithSidebar';
 import PatternTable from './components/PatternTable';
 import { useTableMetadata } from './hooks/useMetadata';
 import { useSqlSuggestions } from './hooks/useSqlSuggestions';
@@ -696,7 +693,6 @@ function DBSearchPage() {
   const inputSourceObj = inputSourceObjs?.find(s => s.id === inputSource);
 
   const defaultOrderBy = useDefaultOrderBy(inputSource);
-  const [rowId, setRowId] = useQueryState('rowWhere');
 
   const [displayedTimeInputValue, setDisplayedTimeInputValue] =
     useState('Live Tail');
@@ -880,13 +876,9 @@ function DBSearchPage() {
     [isLive, setIsLive],
   );
 
-  const onRowExpandClick = useCallback(
-    (rowWhere: string) => {
-      setIsLive(false);
-      setRowId(rowWhere);
-    },
-    [setRowId, setIsLive],
-  );
+  const onSidebarOpen = useCallback(() => {
+    setIsLive(false);
+  }, [setIsLive]);
 
   const [modelFormExpanded, setModelFormExpanded] = useState(false); // Used in local mode
   const [saveSearchModalState, setSaveSearchModalState] = useState<
@@ -1010,7 +1002,7 @@ function DBSearchPage() {
   const { data: me } = api.useMe();
 
   // Callback to handle when rows are expanded - kick user out of live tail
-  const handleExpandedRowsChange = useCallback(
+  const onExpandedRowsChange = useCallback(
     (hasExpandedRows: boolean) => {
       if (hasExpandedRows && isLive) {
         setIsLive(false);
@@ -1472,25 +1464,6 @@ function DBSearchPage() {
           </Button>
         </Flex>
       </form>
-      <RowSidePanelContext.Provider
-        value={{
-          onPropertyAddClick: searchFilters.setFilterValue,
-          displayedColumns,
-          toggleColumn,
-          generateSearchUrl,
-          dbSqlRowTableConfig,
-          isChildModalOpen: isDrawerChildModalOpen,
-          setChildModalOpen: setDrawerChildModalOpen,
-        }}
-      >
-        {searchedSource && (
-          <DBRowSidePanel
-            source={searchedSource}
-            rowId={rowId ?? undefined}
-            onClose={() => setRowId(null)}
-          />
-        )}
-      </RowSidePanelContext.Provider>
       {searchedConfig != null && searchedSource != null && (
         <SaveSearchModal
           opened={saveSearchModalState != null}
@@ -1837,32 +1810,31 @@ function DBSearchPage() {
                         </div>
                       )}
                     {chartConfig &&
+                      searchedConfig.source &&
                       dbSqlRowTableConfig &&
                       analysisMode === 'results' && (
-                        <RowSidePanelContext.Provider
-                          value={{
+                        <DBSqlRowTableWithSideBar
+                          context={{
                             onPropertyAddClick: searchFilters.setFilterValue,
                             displayedColumns,
                             toggleColumn,
                             generateSearchUrl,
                             dbSqlRowTableConfig,
+                            isChildModalOpen: isDrawerChildModalOpen,
+                            setChildModalOpen: setDrawerChildModalOpen,
                           }}
-                        >
-                          <DBSqlRowTable
-                            config={dbSqlRowTableConfig}
-                            sourceId={searchedConfig.source ?? ''}
-                            onRowExpandClick={onRowExpandClick}
-                            highlightedLineId={rowId ?? undefined}
-                            enabled={isReady}
-                            isLive={isLive ?? true}
-                            queryKeyPrefix={QUERY_KEY_PREFIX}
-                            onScroll={onTableScroll}
-                            onError={handleTableError}
-                            denoiseResults={denoiseResults}
-                            onExpandedRowsChange={handleExpandedRowsChange}
-                            collapseAllRows={collapseAllRows}
-                          />
-                        </RowSidePanelContext.Provider>
+                          config={dbSqlRowTableConfig}
+                          sourceId={searchedConfig.source}
+                          onSidebarOpen={onSidebarOpen}
+                          onExpandedRowsChange={onExpandedRowsChange}
+                          enabled={isReady}
+                          isLive={isLive ?? true}
+                          queryKeyPrefix={QUERY_KEY_PREFIX}
+                          onScroll={onTableScroll}
+                          onError={handleTableError}
+                          denoiseResults={denoiseResults}
+                          collapseAllRows={collapseAllRows}
+                        />
                       )}
                   </>
                 )}

packages/app/src/KubernetesDashboardPage.tsx

@@ -38,8 +38,7 @@ import {
 import { TimePicker } from '@/components/TimePicker';
 
 import { ConnectionSelectControlled } from './components/ConnectionSelect';
-import DBRowSidePanel from './components/DBRowSidePanel';
-import { DBSqlRowTable } from './components/DBRowTable';
+import DBSqlRowTableWithSideBar from './components/DBSqlRowTableWithSidebar';
 import { DBTimeChart } from './components/DBTimeChart';
 import { FormatPodStatus } from './components/KubeComponents';
 import { KubernetesFilters } from './components/KubernetesFilters';
@@ -830,24 +829,6 @@ function KubernetesDashboardPage() {
     [_searchQuery, setSearchQuery],
   );
 
-  // Row details side panel
-  const [rowId, setRowId] = useQueryState('rowWhere');
-  const [rowSource, setRowSource] = useQueryState('rowSource');
-  const { data: rowSidePanelSource } = useSource({ id: rowSource || '' });
-
-  const handleSidePanelClose = React.useCallback(() => {
-    setRowId(null);
-    setRowSource(null);
-  }, [setRowId, setRowSource]);
-
-  const handleRowExpandClick = React.useCallback(
-    (rowWhere: string) => {
-      setRowId(rowWhere);
-      setRowSource(logSource?.id ?? null);
-    },
-    [logSource?.id, setRowId, setRowSource],
-  );
-
   return (
     <Box data-testid="kubernetes-dashboard-page" p="sm">
       <OnboardingModal requireSource={false} />
@@ -869,13 +850,6 @@ function KubernetesDashboardPage() {
           logSource={logSource}
         />
       )}
-      {rowId && rowSidePanelSource && (
-        <DBRowSidePanel
-          source={rowSidePanelSource}
-          rowId={rowId}
-          onClose={handleSidePanelClose}
-        />
-      )}
       <Group justify="space-between">
         <Group>
           <Text c="gray.4" size="xl">
@@ -1047,7 +1021,7 @@ function KubernetesDashboardPage() {
                   </Card.Section>
                   <Card.Section p="md" py="sm" h={CHART_HEIGHT}>
                     {logSource && (
-                      <DBSqlRowTable
+                      <DBSqlRowTableWithSideBar
                         sourceId={logSource.id}
                         config={{
                           ...logSource,
@@ -1090,11 +1064,8 @@ function KubernetesDashboardPage() {
                           limit: { limit: 200, offset: 0 },
                           dateRange,
                         }}
-                        onRowExpandClick={handleRowExpandClick}
-                        highlightedLineId={rowId ?? undefined}
                         isLive={false}
                         queryKeyPrefix="k8s-dashboard-events"
-                        onScroll={() => {}}
                       />
                     )}
                   </Card.Section>