a

Signed-off-by: Anan Zhuang <[email protected]>
ananzh · Mar 3, 2024 · 7e3a204 · 7e3a204
1 parent 2c8d9d3
commit 7e3a204
Show file tree

Hide file tree

Showing 5 changed files with 50 additions and 30 deletions.
diff --git a/src/plugins/discover/public/application/components/data_grid/data_grid_table.tsx b/src/plugins/discover/public/application/components/data_grid/data_grid_table.tsx
@@ -46,6 +46,7 @@ export interface DataGridTableProps {
   isContextView?: boolean;
   isLoading?: boolean;
   showPagination?: boolean;
+  scrollToTop?: () => void;
 }
 
 export const DataGridTable = ({
@@ -67,6 +68,7 @@ export const DataGridTable = ({
   isContextView = false,
   isLoading = false,
   showPagination,
+  scrollToTop,
 }: DataGridTableProps) => {
   const services = getServices();
   const [inspectedHit, setInspectedHit] = useState<OpenSearchSearchHit | undefined>();
@@ -179,6 +181,7 @@ export const DataGridTable = ({
         isShortDots={isShortDots}
         hideTimeColumn={hideTimeColumn}
         defaultSortOrder={defaultSortOrder}
+        scrollToTop={scrollToTop}
       />
     ),
     [
@@ -197,6 +200,7 @@ export const DataGridTable = ({
       defaultSortOrder,
       hideTimeColumn,
       isShortDots,
+      scrollToTop,
     ]
   );
 

diff --git a/.../discover/public/application/components/default_discover_table/default_discover_table.tsx b/.../discover/public/application/components/default_discover_table/default_discover_table.tsx
@@ -33,6 +33,7 @@ export interface DefaultDiscoverTableProps {
   hideTimeColumn: boolean;
   defaultSortOrder: SortDirection;
   showPagination?: boolean;
+  scrollToTop?: () => void;
 }
 
 export const LegacyDiscoverTable = ({
@@ -52,6 +53,7 @@ export const LegacyDiscoverTable = ({
   hideTimeColumn,
   defaultSortOrder,
   showPagination,
+  scrollToTop,
 }: DefaultDiscoverTableProps) => {
   const displayedColumns = getLegacyDisplayedColumns(
     columns,
@@ -173,7 +175,7 @@ export const LegacyDiscoverTable = ({
               values={{ sampleSize }}
             />
 
-            <EuiButtonEmpty onClick={() => window.scrollTo(0, 0)}>
+            <EuiButtonEmpty onClick={scrollToTop}>
               <FormattedMessage id="discover.backToTopLinkText" defaultMessage="Back to top." />
             </EuiButtonEmpty>
           </EuiCallOut>

diff --git a/src/plugins/discover/public/application/view_components/canvas/discover_canvas.scss b/src/plugins/discover/public/application/view_components/canvas/discover_canvas.scss
@@ -1,3 +1,8 @@
+.dscCanvasContainer {
+  height: 100%;
+  overflow: auto;
+}
+
 .dscCanvas {
   @include euiYScrollWithShadows;
 

diff --git a/src/plugins/discover/public/application/view_components/canvas/discover_table.tsx b/src/plugins/discover/public/application/view_components/canvas/discover_table.tsx
@@ -12,7 +12,6 @@ import {
   addColumn,
   moveColumn,
   removeColumn,
-  reorderColumn,
   setColumns,
   setSort,
   useDispatch,
@@ -27,9 +26,10 @@ import { popularizeField } from '../../helpers/popularize_field';
 
 interface Props {
   rows?: OpenSearchSearchHit[];
+  scrollToTop?: () => void;
 }
 
-export const DiscoverTable = ({ rows }: Props) => {
+export const DiscoverTable = ({ rows, scrollToTop }: Props) => {
   const { services } = useOpenSearchDashboards<DiscoverViewServices>();
   const {
     uiSettings,
@@ -115,6 +115,7 @@ export const DiscoverTable = ({ rows }: Props) => {
       displayTimeColumn={displayTimeColumn}
       title={savedSearch?.id ? savedSearch.title : ''}
       description={savedSearch?.id ? savedSearch.description : ''}
+      scrollToTop={scrollToTop}
     />
   );
 };
diff --git a/src/plugins/discover/public/application/view_components/canvas/index.tsx b/src/plugins/discover/public/application/view_components/canvas/index.tsx
@@ -24,6 +24,7 @@ import './discover_canvas.scss';
 
 // eslint-disable-next-line import/no-default-export
 export default function DiscoverCanvas({ setHeaderActionMenu, history }: ViewProps) {
+  const containerRef = useRef<HTMLDivElement>(null);
   const { data$, refetch$, indexPattern } = useDiscoverContext();
   const {
     services: { uiSettings },
@@ -89,35 +90,42 @@ export default function DiscoverCanvas({ setHeaderActionMenu, history }: ViewPro
   }, [dispatch, filteredColumns, indexPattern]);
 
   const timeField = indexPattern?.timeFieldName ? indexPattern.timeFieldName : undefined;
+  const scrollToTop = useCallback(() => {
+    if (containerRef.current) {
+      containerRef.current.scrollTop = 0;
+    }
+  }, []);
 
   return (
-    <EuiPanel
-      hasBorder={false}
-      hasShadow={false}
-      color="transparent"
-      paddingSize="none"
-      className="dscCanvas"
-    >
-      <TopNav
-        opts={{
-          setHeaderActionMenu,
-          onQuerySubmit,
-        }}
-      />
-      {fetchState.status === ResultStatus.NO_RESULTS && (
-        <DiscoverNoResults timeFieldName={timeField} queryLanguage={''} />
-      )}
-      {fetchState.status === ResultStatus.UNINITIALIZED && (
-        <DiscoverUninitialized onRefresh={() => refetch$.next()} />
-      )}
-      {fetchState.status === ResultStatus.LOADING && <LoadingSpinner />}
-      {fetchState.status === ResultStatus.READY && (
-        <EuiPanel hasShadow={false} paddingSize="none" className="dscCanvas_results">
-          <MemoizedDiscoverChartContainer {...fetchState} />
-          <MemoizedDiscoverTable rows={rows} />
-        </EuiPanel>
-      )}
-    </EuiPanel>
+    <div ref={containerRef} className="dscCanvasContainer">
+      <EuiPanel
+        hasBorder={false}
+        hasShadow={false}
+        color="transparent"
+        paddingSize="none"
+        className="dscCanvas"
+      >
+        <TopNav
+          opts={{
+            setHeaderActionMenu,
+            onQuerySubmit,
+          }}
+        />
+        {fetchState.status === ResultStatus.NO_RESULTS && (
+          <DiscoverNoResults timeFieldName={timeField} queryLanguage={''} />
+        )}
+        {fetchState.status === ResultStatus.UNINITIALIZED && (
+          <DiscoverUninitialized onRefresh={() => refetch$.next()} />
+        )}
+        {fetchState.status === ResultStatus.LOADING && <LoadingSpinner />}
+        {fetchState.status === ResultStatus.READY && (
+          <EuiPanel hasShadow={false} paddingSize="none" className="dscCanvas_results">
+            <MemoizedDiscoverChartContainer {...fetchState} />
+            <MemoizedDiscoverTable rows={rows} scrollToTop={scrollToTop} />
+          </EuiPanel>
+        )}
+      </EuiPanel>
+    </div>
   );
 }