fixes layout

Signed-off-by: Ashwin P Chandran <ashwinpc@amazon.com>
opensearch-project · Aug 6, 2023 · 4b7498b · 4b7498b
1 parent 1debbf0
commit 4b7498b
Show file tree

Hide file tree

Showing 4 changed files with 54 additions and 24 deletions.
diff --git a/src/plugins/data_explorer/public/components/app_container.scss b/src/plugins/data_explorer/public/components/app_container.scss
@@ -1,4 +1,18 @@
+$osdHeaderOffset: $euiHeaderHeightCompensation;
+
 .deSidebar {
   max-width: 462px;
   min-width: 400px;
 }
+
+.deLayout {
+  height: calc(100vh - #{$osdHeaderOffset});
+
+  &__canvas {
+    height: 100%;
+  }
+}
+
+.headerIsExpanded .deLayout {
+  height: calc(100vh - #{$osdHeaderOffset * 2});
+}
diff --git a/src/plugins/data_explorer/public/components/app_container.tsx b/src/plugins/data_explorer/public/components/app_container.tsx
@@ -22,14 +22,14 @@ export const AppContainer = ({ view, params }: { view?: View; params: AppMountPa
 
   // Render the application DOM.
   return (
-    <EuiPage className="dePage eui-fullHeight" paddingSize="none">
-      {/* TODO: improve loading state */}
+    <EuiPage className="deLayout" paddingSize="none">
+      {/* TODO: improve fallback state */}
       <Suspense fallback={<div>Loading...</div>}>
         <Context {...params}>
           <Sidebar>
             <Panel {...params} />
           </Sidebar>
-          <EuiPageBody className="eui-fullHeight">
+          <EuiPageBody className="deLayout__canvas">
             <Canvas {...params} />
           </EuiPageBody>
         </Context>

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
@@ -4,7 +4,7 @@
  */
 
 import React, { useState, useMemo, useCallback } from 'react';
-import { EuiDataGrid } from '@elastic/eui';
+import { EuiDataGrid, EuiPanel } from '@elastic/eui';
 import { IndexPattern } from '../../../opensearch_dashboards_services';
 import { fetchTableDataCell } from './data_grid_table_cell_value';
 import { buildDataGridColumns, computeVisibleColumns } from './data_grid_table_columns';
@@ -104,18 +104,22 @@ export const DataGridTable = ({
       }}
     >
       <>
-        <EuiDataGrid
-          aria-labelledby="aria-labelledby"
-          columns={dataGridTableColumns}
-          columnVisibility={dataGridTableColumnsVisibility}
-          leadingControlColumns={leadingControlColumns}
-          data-test-subj="docTable"
-          pagination={pagination}
-          renderCellValue={renderCellValue}
-          rowCount={rowCount}
-          sorting={sorting}
-          toolbarVisibility={toolbarVisibility}
-        />
+        <EuiPanel hasBorder={false} hasShadow={false} paddingSize="s" color="transparent">
+          <EuiPanel paddingSize="s" style={{ height: '100%' }}>
+            <EuiDataGrid
+              aria-labelledby="aria-labelledby"
+              columns={dataGridTableColumns}
+              columnVisibility={dataGridTableColumnsVisibility}
+              leadingControlColumns={leadingControlColumns}
+              data-test-subj="docTable"
+              pagination={pagination}
+              renderCellValue={renderCellValue}
+              rowCount={rowCount}
+              sorting={sorting}
+              toolbarVisibility={toolbarVisibility}
+            />
+          </EuiPanel>
+        </EuiPanel>
         {expandedHit && (
           <DataGridFlyout
             indexPattern={indexPattern}

diff --git a/src/plugins/discover/public/application/view_components/canvas/index.tsx b/src/plugins/discover/public/application/view_components/canvas/index.tsx
@@ -4,20 +4,32 @@
  */
 
 import React from 'react';
+import { EuiFlexGroup, EuiFlexItem, EuiLoadingChart, EuiPanel } from '@elastic/eui';
 import { TopNav } from './top_nav';
 import { ViewProps } from '../../../../../data_explorer/public';
 import { DiscoverTable } from './discover_table';
 
 // eslint-disable-next-line import/no-default-export
 export default function DiscoverCanvas({ setHeaderActionMenu, history }: ViewProps) {
   return (
-    <div>
-      <TopNav
-        opts={{
-          setHeaderActionMenu,
-        }}
-      />
-      <DiscoverTable history={history} />
-    </div>
+    <EuiFlexGroup direction="column" gutterSize="none">
+      <EuiFlexItem grow={false}>
+        <TopNav
+          opts={{
+            setHeaderActionMenu,
+          }}
+        />
+      </EuiFlexItem>
+      <EuiFlexItem grow={false}>
+        <EuiPanel hasBorder={false} hasShadow={false} color="transparent" paddingSize="s">
+          <EuiPanel>
+            <EuiLoadingChart />
+          </EuiPanel>
+        </EuiPanel>
+      </EuiFlexItem>
+      <EuiFlexItem>
+        <DiscoverTable history={history} />
+      </EuiFlexItem>
+    </EuiFlexGroup>
   );
 }