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

…5789) (#5839) * basic table working * basic styling * fix header column style * correctly display optional col header actions * move col to the right or left if applicable * add cell filter for and filter out buttons * add cell action on doc table, half working on toggle columns * sorting * Add toggling between legacy and new table According to #5739, add toggle using storage. * get rid of the console log * optimize cell filter logics * add more refactoring * remove an used line * some more table cell optimization * Initial UI fixes (#5758) * Table optimization with lazy loading (#5760) * [Discover with Legacy Table] fix copy issue and open feedbacks in a new tab (#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 * [Discover] Fix more UI (#5764) * [Discover] Fixes table optimization (#5763) * [Discover] Fixes table optimization * improved loader --------- * Change sort icon according to current sort conditions (#5772) * fix breadcrumb navigation (#5773) * Add pagination to discover embeddable (#5770) * Add pagination * fix an errir * small change * fix errors --------- * [Discover] Prevent wrapping of time series cells (#5779) * Vertically align the text in QueryStringInputUI with other elements on the page (#5780) * Use `ouiCodeFont` in Discover and reduce text size (#5783) Also: * Fix react `key` errors * vertically align source cells * Clamp the height of the cells * Make sure time-series column never grows * [Discover] Display filter buttons at top right of the cell (#5784) * [Discover] Vertically align the details toggle button (#5785) * [Discover] Fix overflow of the expanded document (#5788) * Fix vertical alignment of expand details button Fix colspan of details cells * Fix overflow problem of detailed doc --------- * update feedback msg (#5787) * Resolve sort, default sort and short dot (#5771) * [Discover] Fixes pagination style (#5778) * fixes pagination style * style-lint fix * fix react warning for unnecessary prop * Show total hit count and pass services in embeddable * removed unnecessary div --------- * add changelog * fix table column error * Fix pagination edge case * Routing for surrounding doc link should work without a question mark appending to the end (#5776) * routing for surrounding doc should work without ? * change path to not include appstate * delete optional app state for single doc link too --------- * type fixes (#5795) * Update toggle to button (#5808) * Adds support for line count (#5814) * Add swith to datagrid table and fix ciGroup1 (#5816) * add swith to datagrid table and fix ciGroup1 * fix ciGroup7 * fix ciGroup6 --------- * add missing snapshot (#5818) * fix pluign ftr tests (#5821) * update snapshot (#5824) * Fix functional 3 and 4 for discover legacy (#5822) * fix 3 and 4 * fix functional 3 and 4 * dashboard expect --------- * Solve cigroup 7 flakiness (#5826) * test hover * comment out other ci to speed up * uncomment --------- * [Discover] Simplify feedback modal (#5837) * Simplify feedback modal * renames datagrid settng to newDiscover setting * removes sub module from branch --------- * Persist line height (#5836) * Update table revert changelog (#5835) * Update table revert changelog ### Description updates changelog ### Issues Resolved   ## Screenshot  ## Testing the changes  ### Check List - [ ] 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 * nit * update changelog --------- * fix table height persist on context page --------- (cherry picked from commit e13dbff) Signed-off-by: abbyhu2000 <[email protected]> Signed-off-by: Ashwin P Chandran <[email protected]> Signed-off-by: Anan Z <[email protected]> Signed-off-by: Miki <[email protected]> Signed-off-by: Anan Zhuang <[email protected]> Signed-off-by: Anan <[email protected]> Signed-off-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> Co-authored-by: Ashwin P Chandran <[email protected]> Co-authored-by: Anan Zhuang <[email protected]> Co-authored-by: Miki <[email protected]> Co-authored-by: Ganesh0107 <[email protected]>
opensearch-project · Feb 8, 2024 · 26c5a8c · 26c5a8c
1 parent 040a7f0
commit 26c5a8c
Show file tree

Hide file tree

Showing 69 changed files with 1,981 additions and 375 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
@@ -52,4 +52,3 @@
     "webpack": "npm:@amoo-miki/[email protected]"
   }
 }
-
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
Original file line number	Diff line number	Diff line change
Expand Up		@@ -52,4 +52,3 @@
		"webpack": "npm:@amoo-miki/[email protected]"
		}
		}