Initial UI fixes (#5758)

Signed-off-by: Ashwin P Chandran <ashwinpc@amazon.com>
opensearch-project · Jan 31, 2024 · b40fc54 · b40fc54
1 parent f1cbc71
commit b40fc54
Show file tree

Hide file tree

Showing 20 changed files with 403 additions and 372 deletions.
diff --git a/packages/osd-stylelint-config/config/global_selectors.json b/packages/osd-stylelint-config/config/global_selectors.json
@@ -24,7 +24,8 @@
       "src/plugins/vis_builder/public/application/components/side_nav.scss",
       "packages/osd-ui-framework/src/components/button/button_group/_button_group.scss",
       "src/plugins/discover/public/application/components/data_grid/data_grid_table_cell_value.scss",
-      "src/plugins/discover/public/application/view_components/canvas/discover_canvas.scss"
+      "src/plugins/discover/public/application/view_components/canvas/discover_canvas.scss",
+      "src/plugins/discover/public/application/components/sidebar/discover_sidebar.scss"
     ]
   }
 }
diff --git a/src/plugins/data_explorer/public/components/app_container.scss b/src/plugins/data_explorer/public/components/app_container.scss
@@ -1,8 +1,7 @@
 $osdHeaderOffset: $euiHeaderHeightCompensation;
 
 .deSidebar {
-  max-width: 462px;
-  min-width: 400px;
+  height: 100%;
 
   @include ouiBreakpoint("xs", "s", "m") {
     max-width: initial;

diff --git a/src/plugins/data_explorer/public/components/app_container.tsx b/src/plugins/data_explorer/public/components/app_container.tsx
@@ -3,8 +3,8 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import React from 'react';
-import { EuiPage, EuiPageBody } from '@elastic/eui';
+import React, { memo } from 'react';
+import { EuiPage, EuiPageBody, EuiResizableContainer, useIsWithinBreakpoints } from '@elastic/eui';
 import { Suspense } from 'react';
 import { AppMountParameters } from '../../../../core/public';
 import { Sidebar } from './sidebar';
@@ -13,25 +13,46 @@ import { View } from '../services/view_service/view';
 import './app_container.scss';
 
 export const AppContainer = ({ view, params }: { view?: View; params: AppMountParameters }) => {
+  const isMobile = useIsWithinBreakpoints(['xs', 's', 'm']);
   // TODO: Make this more robust.
   if (!view) {
     return <NoView />;
   }
 
   const { Canvas, Panel, Context } = view;
 
+  const MemoizedPanel = memo(Panel);
+  const MemoizedCanvas = memo(Canvas);
+
   // Render the application DOM.
   return (
     <EuiPage className="deLayout" paddingSize="none">
       {/* TODO: improve fallback state */}
       <Suspense fallback={<div>Loading...</div>}>
         <Context {...params}>
-          <Sidebar>
-            <Panel {...params} />
-          </Sidebar>
-          <EuiPageBody className="deLayout__canvas">
-            <Canvas {...params} />
-          </EuiPageBody>
+          <EuiResizableContainer direction={isMobile ? 'vertical' : 'horizontal'}>
+            {(EuiResizablePanel, EuiResizableButton) => (
+              <>
+                <EuiResizablePanel
+                  initialSize={20}
+                  minSize="260px"
+                  mode="collapsible"
+                  paddingSize="none"
+                >
+                  <Sidebar>
+                    <MemoizedPanel {...params} />
+                  </Sidebar>
+                </EuiResizablePanel>
+                <EuiResizableButton />
+
+                <EuiResizablePanel initialSize={80} minSize="65%" mode="main" paddingSize="none">
+                  <EuiPageBody className="deLayout__canvas">
+                    <MemoizedCanvas {...params} />
+                  </EuiPageBody>
+                </EuiResizablePanel>
+              </>
+            )}
+          </EuiResizableContainer>
         </Context>
       </Suspense>
     </EuiPage>

diff --git a/src/plugins/data_explorer/public/components/no_view.tsx b/src/plugins/data_explorer/public/components/no_view.tsx
@@ -11,7 +11,7 @@ export const NoView = () => {
   return (
     <EuiPageTemplate
       template="centeredContent"
-      className="dePageTemplate"
+      className="deLayout"
       pageContentProps={{
         role: 'alertdialog',
         color: 'plain',

diff --git a/src/plugins/data_explorer/public/components/sidebar/index.scss b/src/plugins/data_explorer/public/components/sidebar/index.scss
@@ -0,0 +1,9 @@
+.deSidebar {
+  &_panel {
+    border-top: 0;
+  }
+
+  &_dataSource {
+    border-bottom: $euiBorderThin !important;
+  }
+}
diff --git a/src/plugins/data_explorer/public/components/sidebar/index.tsx b/src/plugins/data_explorer/public/components/sidebar/index.tsx
@@ -11,6 +11,7 @@ import { DataSourceOption } from '../../../../data/public/';
 import { useOpenSearchDashboards } from '../../../../opensearch_dashboards_react/public';
 import { DataExplorerServices } from '../../types';
 import { setIndexPattern, useTypedDispatch, useTypedSelector } from '../../utils/state_management';
+import './index.scss';
 
 export const Sidebar: FC = ({ children }) => {
   const { indexPattern: indexPatternId } = useTypedSelector((state) => state.metadata);
@@ -91,8 +92,18 @@ export const Sidebar: FC = ({ children }) => {
 
   return (
     <EuiPageSideBar className="deSidebar" sticky>
-      <EuiSplitPanel.Outer className="eui-yScroll" hasBorder={true} borderRadius="none">
-        <EuiSplitPanel.Inner paddingSize="s" color="subdued" grow={false}>
+      <EuiSplitPanel.Outer
+        className="eui-yScroll deSidebar_panel"
+        hasBorder={true}
+        borderRadius="none"
+        color="transparent"
+      >
+        <EuiSplitPanel.Inner
+          paddingSize="s"
+          grow={false}
+          color="transparent"
+          className="deSidebar_dataSource"
+        >
           <DataSourceSelectable
             dataSources={activeDataSources}
             dataSourceOptionList={dataSourceOptionList}
@@ -102,7 +113,7 @@ export const Sidebar: FC = ({ children }) => {
             onGetDataSetError={handleGetDataSetError}
           />
         </EuiSplitPanel.Inner>
-        <EuiSplitPanel.Inner paddingSize="none" color="subdued" className="eui-yScroll">
+        <EuiSplitPanel.Inner paddingSize="none" color="transparent" className="eui-yScroll">
           {children}
         </EuiSplitPanel.Inner>
       </EuiSplitPanel.Outer>

diff --git a/src/plugins/data_explorer/public/index.scss b/src/plugins/data_explorer/public/index.scss
diff --git a/src/plugins/data_explorer/public/index.ts b/src/plugins/data_explorer/public/index.ts
@@ -3,8 +3,6 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import './index.scss';
-
 import { DataExplorerPlugin } from './plugin';
 
 // This exports static code and TypeScript types,

diff --git a/src/plugins/discover/public/application/components/chart/histogram/histogram.tsx b/src/plugins/discover/public/application/components/chart/histogram/histogram.tsx
@@ -306,6 +306,14 @@ export class DiscoverHistogram extends Component<DiscoverHistogramProps, Discove
       type: TooltipType.VerticalCursor,
     };
 
+    // These styles override the chartsTheme so that the correct base chart colors are used
+    delete chartsTheme.axes?.gridLine?.horizontal?.stroke;
+    delete chartsTheme.axes?.gridLine?.vertical?.stroke;
+    delete chartsTheme.axes?.axisLine;
+    chartsTheme.axes!.axisTitle = {
+      fill: euiThemeVars.euiTextColor,
+    };
+
     return (
       <Chart size="100%">
         <Settings

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
@@ -21,6 +21,7 @@ import { SAMPLE_SIZE_SETTING } from '../../../../common';
 import { LegacyDiscoverTable } from '../default_discover_table/default_discover_table';
 import { toolbarVisibility } from './constants';
 import { getDataGridTableSetting } from '../utils/local_storage';
+import { Storage } from '../../../../../opensearch_dashboards_utils/public';
 
 export interface DataGridTableProps {
   columns: string[];
@@ -39,7 +40,7 @@ export interface DataGridTableProps {
   isToolbarVisible?: boolean;
   isContextView?: boolean;
   isLoading?: boolean;
-  storage: any;
+  storage: Storage;
 }
 
 export const DataGridTable = ({
@@ -143,6 +144,8 @@ export const DataGridTable = ({
     ];
   }, []);
 
+  const datagridActive = getDataGridTableSetting(storage);
+
   const legacyDiscoverTable = useMemo(
     () => (
       <LegacyDiscoverTable
@@ -202,6 +205,23 @@ export const DataGridTable = ({
     ]
   );
 
+  const tablePanelProps = datagridActive
+    ? {
+        paddingSize: 'none' as const,
+        style: {
+          margin: '8px',
+        },
+        color: 'transparent' as const,
+      }
+    : {
+        paddingSize: 'none' as const,
+        style: {
+          margin: '0px',
+          marginLeft: '8px',
+        },
+        color: 'transparent' as const,
+      };
+
   return (
     <DiscoverGridContextProvider
       value={{
@@ -218,11 +238,12 @@ export const DataGridTable = ({
         data-title={title}
         data-description={description}
         data-test-subj="discoverTable"
+        className="eui-xScrollWithShadows"
       >
-        <EuiPanel hasBorder={false} hasShadow={true} paddingSize="s" style={{ margin: '8px' }}>
-          {getDataGridTableSetting(storage) ? dataGridTable : legacyDiscoverTable}
+        <EuiPanel hasBorder={false} hasShadow={false} {...tablePanelProps}>
+          {datagridActive ? dataGridTable : legacyDiscoverTable}
         </EuiPanel>
-        {getDataGridTableSetting(storage) && inspectedHit && (
+        {datagridActive && inspectedHit && (
           <DataGridFlyout
             indexPattern={indexPattern}
             hit={inspectedHit}