Revert to legacy discover table and add toggle to new discover table (o…

…pensearch-project#5789) * basic table working Signed-off-by: abbyhu2000 <abigailhu2000@gmail.com> * basic styling Signed-off-by: abbyhu2000 <abigailhu2000@gmail.com> * fix header column style Signed-off-by: abbyhu2000 <abigailhu2000@gmail.com> * correctly display optional col header actions Signed-off-by: abbyhu2000 <abigailhu2000@gmail.com> * move col to the right or left if applicable Signed-off-by: abbyhu2000 <abigailhu2000@gmail.com> * add cell filter for and filter out buttons Signed-off-by: abbyhu2000 <abigailhu2000@gmail.com> * add cell action on doc table, half working on toggle columns Signed-off-by: abbyhu2000 <abigailhu2000@gmail.com> * sorting Signed-off-by: abbyhu2000 <abigailhu2000@gmail.com> * Add toggling between legacy and new table According to opensearch-project#5739, add toggle using storage. Signed-off-by: abbyhu2000 <abigailhu2000@gmail.com> * get rid of the console log Signed-off-by: abbyhu2000 <abigailhu2000@gmail.com> * optimize cell filter logics Signed-off-by: abbyhu2000 <abigailhu2000@gmail.com> * add more refactoring Signed-off-by: abbyhu2000 <abigailhu2000@gmail.com> * remove an used line Signed-off-by: abbyhu2000 <abigailhu2000@gmail.com> * some more table cell optimization Signed-off-by: abbyhu2000 <abigailhu2000@gmail.com> * Initial UI fixes (opensearch-project#5758) Signed-off-by: Ashwin P Chandran <ashwinpc@amazon.com> * Table optimization with lazy loading (opensearch-project#5760) Signed-off-by: abbyhu2000 <abigailhu2000@gmail.com> * [Discover with Legacy Table] fix copy issue and open feedbacks in a new tab (opensearch-project#5761) * add a colon (:) after the key * ensure there's a space between each key-value pair * allow feedback url to open in a new tab Signed-off-by: Anan Z <ananzh@amazon.com> * [Discover] Fix more UI (opensearch-project#5764) Signed-off-by: Ashwin P Chandran <ashwinpc@amazon.com> * [Discover] Fixes table optimization (opensearch-project#5763) * [Discover] Fixes table optimization Signed-off-by: Ashwin P Chandran <ashwinpc@amazon.com> * improved loader Signed-off-by: Ashwin P Chandran <ashwinpc@amazon.com> --------- Signed-off-by: Ashwin P Chandran <ashwinpc@amazon.com> * Change sort icon according to current sort conditions (opensearch-project#5772) Signed-off-by: abbyhu2000 <abigailhu2000@gmail.com> * fix breadcrumb navigation (opensearch-project#5773) Signed-off-by: abbyhu2000 <abigailhu2000@gmail.com> * Add pagination to discover embeddable (opensearch-project#5770) * Add pagination Signed-off-by: abbyhu2000 <abigailhu2000@gmail.com> * fix an errir Signed-off-by: abbyhu2000 <abigailhu2000@gmail.com> * small change Signed-off-by: abbyhu2000 <abigailhu2000@gmail.com> * fix errors Signed-off-by: abbyhu2000 <abigailhu2000@gmail.com> --------- Signed-off-by: abbyhu2000 <abigailhu2000@gmail.com> * [Discover] Prevent wrapping of time series cells (opensearch-project#5779) Signed-off-by: Miki <miki@amazon.com> * Vertically align the text in QueryStringInputUI with other elements on the page (opensearch-project#5780) Signed-off-by: Miki <miki@amazon.com> * Use `ouiCodeFont` in Discover and reduce text size (opensearch-project#5783) Also: * Fix react `key` errors * vertically align source cells * Clamp the height of the cells * Make sure time-series column never grows Signed-off-by: Miki <miki@amazon.com> * [Discover] Display filter buttons at top right of the cell (opensearch-project#5784) Signed-off-by: Miki <miki@amazon.com> * [Discover] Vertically align the details toggle button (opensearch-project#5785) Signed-off-by: Miki <miki@amazon.com> * [Discover] Fix overflow of the expanded document (opensearch-project#5788) * Fix vertical alignment of expand details button Fix colspan of details cells Signed-off-by: Miki <miki@amazon.com> * Fix overflow problem of detailed doc Signed-off-by: Miki <miki@amazon.com> --------- Signed-off-by: Miki <miki@amazon.com> * update feedback msg (opensearch-project#5787) Signed-off-by: Anan Z <ananzh@amazon.com> * Resolve sort, default sort and short dot (opensearch-project#5771) Signed-off-by: Anan Z <ananzh@amazon.com> Signed-off-by: Anan Zhuang <ananzh@amazon.com> * [Discover] Fixes pagination style (opensearch-project#5778) * fixes pagination style Signed-off-by: Ashwin P Chandran <ashwinpc@amazon.com> * style-lint fix Signed-off-by: Ashwin P Chandran <ashwinpc@amazon.com> * fix react warning for unnecessary prop Signed-off-by: Ashwin P Chandran <ashwinpc@amazon.com> * Show total hit count and pass services in embeddable Signed-off-by: Ashwin P Chandran <ashwinpc@amazon.com> * removed unnecessary div Signed-off-by: Ashwin P Chandran <ashwinpc@amazon.com> --------- Signed-off-by: Ashwin P Chandran <ashwinpc@amazon.com> Signed-off-by: Anan Zhuang <ananzh@amazon.com> Co-authored-by: Anan Zhuang <ananzh@amazon.com> * add changelog Signed-off-by: abbyhu2000 <abigailhu2000@gmail.com> * fix table column error Signed-off-by: abbyhu2000 <abigailhu2000@gmail.com> * Fix pagination edge case Signed-off-by: abbyhu2000 <abigailhu2000@gmail.com> * Routing for surrounding doc link should work without a question mark appending to the end (opensearch-project#5776) * routing for surrounding doc should work without ? Signed-off-by: abbyhu2000 <abigailhu2000@gmail.com> * change path to not include appstate Signed-off-by: abbyhu2000 <abigailhu2000@gmail.com> * delete optional app state for single doc link too Signed-off-by: abbyhu2000 <abigailhu2000@gmail.com> --------- Signed-off-by: abbyhu2000 <abigailhu2000@gmail.com> * type fixes (opensearch-project#5795) Signed-off-by: Ashwin P Chandran <ashwinpc@amazon.com> * Update toggle to button (opensearch-project#5808) Signed-off-by: Ashwin P Chandran <ashwinpc@amazon.com> * Adds support for line count (opensearch-project#5814) Signed-off-by: Ashwin P Chandran <ashwinpc@amazon.com> * Add swith to datagrid table and fix ciGroup1 (opensearch-project#5816) * add swith to datagrid table and fix ciGroup1 Signed-off-by: Anan <ananzh@amazon.com> * fix ciGroup7 Signed-off-by: Anan Z <ananzh@amazon.com> * fix ciGroup6 Signed-off-by: Anan Z <ananzh@amazon.com> --------- Signed-off-by: Anan <ananzh@amazon.com> Signed-off-by: Anan Z <ananzh@amazon.com> * add missing snapshot (opensearch-project#5818) Signed-off-by: Anan Z <ananzh@amazon.com> * fix pluign ftr tests (opensearch-project#5821) Signed-off-by: Anan Z <ananzh@amazon.com> * update snapshot (opensearch-project#5824) Signed-off-by: abbyhu2000 <abigailhu2000@gmail.com> * Fix functional 3 and 4 for discover legacy (opensearch-project#5822) * fix 3 and 4 Signed-off-by: abbyhu2000 <abigailhu2000@gmail.com> * fix functional 3 and 4 Signed-off-by: abbyhu2000 <abigailhu2000@gmail.com> * dashboard expect Signed-off-by: abbyhu2000 <abigailhu2000@gmail.com> --------- Signed-off-by: abbyhu2000 <abigailhu2000@gmail.com> * Solve cigroup 7 flakiness (opensearch-project#5826) * test hover Signed-off-by: abbyhu2000 <abigailhu2000@gmail.com> * comment out other ci to speed up Signed-off-by: abbyhu2000 <abigailhu2000@gmail.com> * uncomment Signed-off-by: abbyhu2000 <abigailhu2000@gmail.com> --------- Signed-off-by: abbyhu2000 <abigailhu2000@gmail.com> * [Discover] Simplify feedback modal (opensearch-project#5837) * Simplify feedback modal Signed-off-by: Ashwin P Chandran <ashwinpc@amazon.com> * renames datagrid settng to newDiscover setting Signed-off-by: Ashwin P Chandran <ashwinpc@amazon.com> * removes sub module from branch Signed-off-by: Ashwin P Chandran <ashwinpc@amazon.com> --------- Signed-off-by: Ashwin P Chandran <ashwinpc@amazon.com> * Persist line height (opensearch-project#5836) Signed-off-by: Ashwin P Chandran <ashwinpc@amazon.com> * Update table revert changelog (opensearch-project#5835) * Update table revert changelog updates changelog     - [ ] All tests pass - [ ] `yarn test:jest` - [ ] `yarn test:jest_integration` - [ ] New functionality includes testing. - [ ] New functionality has been documented. - [ ] Update [CHANGELOG.md](./../CHANGELOG.md) - [ ] Commits are signed per the DCO using --signoff * revert dependency change Signed-off-by: Ashwin P Chandran <ashwinpc@amazon.com> * nit Signed-off-by: Ashwin P Chandran <ashwinpc@amazon.com> * update changelog Signed-off-by: Ashwin P Chandran <ashwinpc@amazon.com> --------- Signed-off-by: Ashwin P Chandran <ashwinpc@amazon.com> * fix table height persist on context page Signed-off-by: Ashwin P Chandran <ashwinpc@amazon.com> --------- Signed-off-by: abbyhu2000 <abigailhu2000@gmail.com> Signed-off-by: Ashwin P Chandran <ashwinpc@amazon.com> Signed-off-by: Anan Z <ananzh@amazon.com> Signed-off-by: Miki <miki@amazon.com> Signed-off-by: Anan Zhuang <ananzh@amazon.com> Signed-off-by: Anan <ananzh@amazon.com> Co-authored-by: Ashwin P Chandran <ashwinpc@amazon.com> Co-authored-by: Anan Zhuang <ananzh@amazon.com> Co-authored-by: Miki <miki@amazon.com> Co-authored-by: Ganesh0107 <ganesh.gopal@freshworks.com>
ananzh · Feb 21, 2024 · c222e82 · c222e82
1 parent 5ba2127
commit c222e82
Show file tree

Hide file tree

Showing 69 changed files with 1,983 additions and 370 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/packages/osd-ui-shared-deps/package.json b/packages/osd-ui-shared-deps/package.json
@@ -51,4 +51,4 @@
     "val-loader": "^2.1.2",
     "webpack": "npm:@amoo-miki/webpack@4.46.0-rc.2"
   }
-}
+}
diff --git a/src/core/server/core_app/assets/legacy_dark_theme.css b/src/core/server/core_app/assets/legacy_dark_theme.css
@@ -802,7 +802,7 @@
   width: 100%;
   max-width: 100%;
   margin-bottom: 20px;
-  font-size: 14px;
+  font-size: 12px;
 }
 .table thead {
   font-size: 12px;

diff --git a/src/core/server/core_app/assets/legacy_light_theme.css b/src/core/server/core_app/assets/legacy_light_theme.css
@@ -802,7 +802,7 @@
   width: 100%;
   max-width: 100%;
   margin-bottom: 20px;
-  font-size: 14px;
+  font-size: 12px;
 }
 .table thead {
   font-size: 12px;

diff --git a/src/plugins/data/public/data_sources/datasource_selector/datasource_selectable.tsx b/src/plugins/data/public/data_sources/datasource_selector/datasource_selectable.tsx
@@ -103,6 +103,7 @@ export const DataSourceSelectable = ({
   setDataSourceOptionList,
   onGetDataSetError, //   onGetDataSetError, Callback for handling get data set errors. Ensure it's memoized.
   singleSelection = { asPlainText: true },
+  ...comboBoxProps
 }: DataSourceSelectableProps) => {
   // This effect gets data sets and prepares the datasource list for UI rendering.
   useEffect(() => {
@@ -131,6 +132,7 @@ export const DataSourceSelectable = ({
 
   return (
     <EuiComboBox
+      {...comboBoxProps}
       data-test-subj="dataExplorerDSSelect"
       placeholder={i18n.translate('data.datasource.selectADatasource', {
         defaultMessage: 'Select a datasource',

diff --git a/src/plugins/data/public/data_sources/datasource_selector/types.ts b/src/plugins/data/public/data_sources/datasource_selector/types.ts
@@ -7,7 +7,7 @@
  * @experimental These interfaces are experimental and might change in future releases.
  */
 
-import { EuiComboBoxSingleSelectionShape } from '@elastic/eui';
+import { EuiComboBoxProps, EuiComboBoxSingleSelectionShape } from '@elastic/eui';
 import { GenericDataSource } from '../datasource_services';
 
 export interface DataSourceGroup {
@@ -22,7 +22,7 @@ export interface DataSourceOption {
   ds: GenericDataSource;
 }
 
-export interface DataSourceSelectableProps {
+export interface DataSourceSelectableProps extends Pick<EuiComboBoxProps<unknown>, 'fullWidth'> {
   dataSources: GenericDataSource[];
   onDataSourceSelect: (dataSourceOption: DataSourceOption[]) => void;
   singleSelection?: boolean | EuiComboBoxSingleSelectionShape;

diff --git a/src/plugins/data/public/ui/query_string_input/_query_bar.scss b/src/plugins/data/public/ui/query_string_input/_query_bar.scss
@@ -33,9 +33,8 @@
 
   // Unlike most inputs within layout control groups, the text area still needs a border.
   // These adjusts help it sit above the control groups shadow to line up correctly.
-  padding: $euiSizeS;
-  padding-top: $euiSizeS + 3px;
-  transform: translateY(-1px) translateX(-1px);
+  padding: ($euiSizeS + 2px) $euiSizeS $euiSizeS;
+  transform: translateY(-2px) translateX(-1px);
 
   &:not(:focus):not(:invalid) {
     @include euiYScrollWithShadows;

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', { position: 'top' }]}
+                  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,18 +92,29 @@ 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}
             setDataSourceOptionList={setDataSourceOptionList}
             onDataSourceSelect={handleSourceSelection}
             selectedSources={selectedSources}
             onGetDataSetError={handleGetDataSetError}
+            fullWidth
           />
         </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/constants.ts b/src/plugins/discover/public/application/components/data_grid/constants.ts