[Page Header] New page header for metrics (opensearch-project#2050)

* Move the save button to the header control bar Signed-off-by: Ryan Liang <[email protected]> * Update snapshots Signed-off-by: Ryan Liang <[email protected]> * Fix the save button and correct its size + position Signed-off-by: Ryan Liang <[email protected]> * Fix the date picker location Signed-off-by: Ryan Liang <[email protected]> * Rename the navigation in coreRef and switch to use compressed date picker Signed-off-by: Ryan Liang <[email protected]> * Fix the popover Signed-off-by: Ryan Liang <[email protected]> * Rename the button Signed-off-by: Ryan Liang <[email protected]> * Update to latest mockup Signed-off-by: Ryan Liang <[email protected]> * Update snapshots Signed-off-by: Ryan Liang <[email protected]> * Fix the ui issues Signed-off-by: Ryan Liang <[email protected]> * Dummy metrics Signed-off-by: Ryan Liang <[email protected]> * Remove dummy Signed-off-by: Ryan Liang <[email protected]> * update snapshots Signed-off-by: Ryan Liang <[email protected]> * minor changes to match mocks Signed-off-by: Shenoy Pratik <[email protected]> --------- Signed-off-by: Ryan Liang <[email protected]> Signed-off-by: Shenoy Pratik <[email protected]> Co-authored-by: Shenoy Pratik <[email protected]> (cherry picked from commit 65453a3)
ps48 · Aug 15, 2024 · 3af2c2e · 3af2c2e
1 parent 71f4a73
commit 3af2c2e
Show file tree

Hide file tree

Showing 25 changed files with 1,305 additions and 1,068 deletions.
diff --git a/public/components/application_analytics/__tests__/__snapshots__/log_config.test.tsx.snap b/public/components/application_analytics/__tests__/__snapshots__/log_config.test.tsx.snap
@@ -16,6 +16,7 @@ exports[`Log Config component renders empty log config 1`] = `
       "getBreadcrumbsEnricher$": [MockFunction],
       "getCustomNavLink$": [MockFunction],
       "getHeaderComponent": [MockFunction],
+      "getHeaderVariant$": [MockFunction],
       "getHelpExtension$": [MockFunction],
       "getIsNavDrawerLocked$": [MockFunction],
       "getIsVisible$": [MockFunction],
@@ -119,6 +120,7 @@ exports[`Log Config component renders empty log config 1`] = `
       "setBreadcrumbs": [MockFunction],
       "setBreadcrumbsEnricher": [MockFunction],
       "setCustomNavLink": [MockFunction],
+      "setHeaderVariant": [MockFunction],
       "setHelpExtension": [MockFunction],
       "setHelpSupportUrl": [MockFunction],
       "setIsVisible": [MockFunction],
@@ -649,6 +651,7 @@ exports[`Log Config component renders with query 1`] = `
       "getBreadcrumbsEnricher$": [MockFunction],
       "getCustomNavLink$": [MockFunction],
       "getHeaderComponent": [MockFunction],
+      "getHeaderVariant$": [MockFunction],
       "getHelpExtension$": [MockFunction],
       "getIsNavDrawerLocked$": [MockFunction],
       "getIsVisible$": [MockFunction],
@@ -752,6 +755,7 @@ exports[`Log Config component renders with query 1`] = `
       "setBreadcrumbs": [MockFunction],
       "setBreadcrumbsEnricher": [MockFunction],
       "setCustomNavLink": [MockFunction],
+      "setHeaderVariant": [MockFunction],
       "setHelpExtension": [MockFunction],
       "setHelpSupportUrl": [MockFunction],
       "setIsVisible": [MockFunction],

diff --git a/public/components/application_analytics/__tests__/__snapshots__/service_config.test.tsx.snap b/public/components/application_analytics/__tests__/__snapshots__/service_config.test.tsx.snap
@@ -16,6 +16,7 @@ exports[`Service Config component renders empty service config 1`] = `
       "getBreadcrumbsEnricher$": [MockFunction],
       "getCustomNavLink$": [MockFunction],
       "getHeaderComponent": [MockFunction],
+      "getHeaderVariant$": [MockFunction],
       "getHelpExtension$": [MockFunction],
       "getIsNavDrawerLocked$": [MockFunction],
       "getIsVisible$": [MockFunction],
@@ -119,6 +120,7 @@ exports[`Service Config component renders empty service config 1`] = `
       "setBreadcrumbs": [MockFunction],
       "setBreadcrumbsEnricher": [MockFunction],
       "setCustomNavLink": [MockFunction],
+      "setHeaderVariant": [MockFunction],
       "setHelpExtension": [MockFunction],
       "setHelpSupportUrl": [MockFunction],
       "setIsVisible": [MockFunction],
@@ -1219,6 +1221,7 @@ exports[`Service Config component renders with one service selected 1`] = `
       "getBreadcrumbsEnricher$": [MockFunction],
       "getCustomNavLink$": [MockFunction],
       "getHeaderComponent": [MockFunction],
+      "getHeaderVariant$": [MockFunction],
       "getHelpExtension$": [MockFunction],
       "getIsNavDrawerLocked$": [MockFunction],
       "getIsVisible$": [MockFunction],
@@ -1322,6 +1325,7 @@ exports[`Service Config component renders with one service selected 1`] = `
       "setBreadcrumbs": [MockFunction],
       "setBreadcrumbsEnricher": [MockFunction],
       "setCustomNavLink": [MockFunction],
+      "setHeaderVariant": [MockFunction],
       "setHelpExtension": [MockFunction],
       "setHelpSupportUrl": [MockFunction],
       "setIsVisible": [MockFunction],

diff --git a/public/components/application_analytics/__tests__/__snapshots__/trace_config.test.tsx.snap b/public/components/application_analytics/__tests__/__snapshots__/trace_config.test.tsx.snap
@@ -15,6 +15,7 @@ exports[`Trace Config component renders empty trace config 1`] = `
       "getBreadcrumbsEnricher$": [MockFunction],
       "getCustomNavLink$": [MockFunction],
       "getHeaderComponent": [MockFunction],
+      "getHeaderVariant$": [MockFunction],
       "getHelpExtension$": [MockFunction],
       "getIsNavDrawerLocked$": [MockFunction],
       "getIsVisible$": [MockFunction],
@@ -118,6 +119,7 @@ exports[`Trace Config component renders empty trace config 1`] = `
       "setBreadcrumbs": [MockFunction],
       "setBreadcrumbsEnricher": [MockFunction],
       "setCustomNavLink": [MockFunction],
+      "setHeaderVariant": [MockFunction],
       "setHelpExtension": [MockFunction],
       "setHelpSupportUrl": [MockFunction],
       "setIsVisible": [MockFunction],
@@ -931,6 +933,7 @@ exports[`Trace Config component renders with one trace selected 1`] = `
       "getBreadcrumbsEnricher$": [MockFunction],
       "getCustomNavLink$": [MockFunction],
       "getHeaderComponent": [MockFunction],
+      "getHeaderVariant$": [MockFunction],
       "getHelpExtension$": [MockFunction],
       "getIsNavDrawerLocked$": [MockFunction],
       "getIsVisible$": [MockFunction],
@@ -1034,6 +1037,7 @@ exports[`Trace Config component renders with one trace selected 1`] = `
       "setBreadcrumbs": [MockFunction],
       "setBreadcrumbsEnricher": [MockFunction],
       "setCustomNavLink": [MockFunction],
+      "setHeaderVariant": [MockFunction],
       "setHelpExtension": [MockFunction],
       "setHelpSupportUrl": [MockFunction],
       "setIsVisible": [MockFunction],

diff --git a/public/components/custom_panels/__tests__/__snapshots__/custom_panel_view.test.tsx.snap b/public/components/custom_panels/__tests__/__snapshots__/custom_panel_view.test.tsx.snap
@@ -888,6 +888,7 @@ exports[`Panels View Component renders panel view container with visualizations
         "getBreadcrumbsEnricher$": [MockFunction],
         "getCustomNavLink$": [MockFunction],
         "getHeaderComponent": [MockFunction],
+        "getHeaderVariant$": [MockFunction],
         "getHelpExtension$": [MockFunction],
         "getIsNavDrawerLocked$": [MockFunction] {
           "calls": Array [
@@ -1285,6 +1286,7 @@ exports[`Panels View Component renders panel view container with visualizations
         },
         "setBreadcrumbsEnricher": [MockFunction],
         "setCustomNavLink": [MockFunction],
+        "setHeaderVariant": [MockFunction],
         "setHelpExtension": [MockFunction],
         "setHelpSupportUrl": [MockFunction],
         "setIsVisible": [MockFunction],
@@ -2692,6 +2694,7 @@ exports[`Panels View Component renders panel view container with visualizations
                         "getBreadcrumbsEnricher$": [MockFunction],
                         "getCustomNavLink$": [MockFunction],
                         "getHeaderComponent": [MockFunction],
+                        "getHeaderVariant$": [MockFunction],
                         "getHelpExtension$": [MockFunction],
                         "getIsNavDrawerLocked$": [MockFunction] {
                           "calls": Array [
@@ -3089,6 +3092,7 @@ exports[`Panels View Component renders panel view container with visualizations
                         },
                         "setBreadcrumbsEnricher": [MockFunction],
                         "setCustomNavLink": [MockFunction],
+                        "setHeaderVariant": [MockFunction],
                         "setHelpExtension": [MockFunction],
                         "setHelpSupportUrl": [MockFunction],
                         "setIsVisible": [MockFunction],
@@ -3259,6 +3263,7 @@ exports[`Panels View Component renders panel view container without visualizatio
         "getBreadcrumbsEnricher$": [MockFunction],
         "getCustomNavLink$": [MockFunction],
         "getHeaderComponent": [MockFunction],
+        "getHeaderVariant$": [MockFunction],
         "getHelpExtension$": [MockFunction],
         "getIsNavDrawerLocked$": [MockFunction] {
           "calls": Array [
@@ -3545,6 +3550,7 @@ exports[`Panels View Component renders panel view container without visualizatio
         },
         "setBreadcrumbsEnricher": [MockFunction],
         "setCustomNavLink": [MockFunction],
+        "setHeaderVariant": [MockFunction],
         "setHelpExtension": [MockFunction],
         "setHelpSupportUrl": [MockFunction],
         "setIsVisible": [MockFunction],
@@ -4947,6 +4953,7 @@ exports[`Panels View Component renders panel view container without visualizatio
                         "getBreadcrumbsEnricher$": [MockFunction],
                         "getCustomNavLink$": [MockFunction],
                         "getHeaderComponent": [MockFunction],
+                        "getHeaderVariant$": [MockFunction],
                         "getHelpExtension$": [MockFunction],
                         "getIsNavDrawerLocked$": [MockFunction] {
                           "calls": Array [
@@ -5233,6 +5240,7 @@ exports[`Panels View Component renders panel view container without visualizatio
                         },
                         "setBreadcrumbsEnricher": [MockFunction],
                         "setCustomNavLink": [MockFunction],
+                        "setHeaderVariant": [MockFunction],
                         "setHelpExtension": [MockFunction],
                         "setHelpSupportUrl": [MockFunction],
                         "setIsVisible": [MockFunction],

diff --git a/...s/custom_panels/panel_modules/panel_grid/__tests__/__snapshots__/panel_grid.test.tsx.snap b/...s/custom_panels/panel_modules/panel_grid/__tests__/__snapshots__/panel_grid.test.tsx.snap
@@ -15,6 +15,7 @@ exports[`Panel Grid Component renders panel grid component with empty visualizat
       "getBreadcrumbsEnricher$": [MockFunction],
       "getCustomNavLink$": [MockFunction],
       "getHeaderComponent": [MockFunction],
+      "getHeaderVariant$": [MockFunction],
       "getHelpExtension$": [MockFunction],
       "getIsNavDrawerLocked$": [MockFunction] {
         "calls": Array [
@@ -276,6 +277,7 @@ exports[`Panel Grid Component renders panel grid component with empty visualizat
       "setBreadcrumbs": [MockFunction],
       "setBreadcrumbsEnricher": [MockFunction],
       "setCustomNavLink": [MockFunction],
+      "setHeaderVariant": [MockFunction],
       "setHelpExtension": [MockFunction],
       "setHelpSupportUrl": [MockFunction],
       "setIsVisible": [MockFunction],

diff --git a/...ents/event_analytics/explorer/save_panel/__tests__/__snapshots__/save_panel.test.tsx.snap b/...ents/event_analytics/explorer/save_panel/__tests__/__snapshots__/save_panel.test.tsx.snap
@@ -609,7 +609,7 @@ exports[`Saved query table component Renders saved query table 1`] = `
                 showLabel={true}
               >
                 <div
-                  className="euiSwitch euiSwitch--compressed"
+                  className="euiSwitch euiSwitch--primary euiSwitch--compressed euiSwitch-isDisabled"
                 >
                   <button
                     aria-checked={false}

diff --git a/public/components/metrics/index.tsx b/public/components/metrics/index.tsx
@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { EuiPage, EuiPageBody, EuiResizableContainer } from '@elastic/eui';
+import { EuiPage, EuiPageBody, EuiResizableContainer, EuiSpacer } from '@elastic/eui';
 import debounce from 'lodash/debounce';
 import React, { useEffect, useMemo, useState } from 'react';
 import { useDispatch } from 'react-redux';
@@ -115,11 +115,17 @@ export const Home = ({
                 <EuiPage>
                   <EuiPageBody component="div">
                     <TopMenu />
+                    <EuiSpacer size="m" />
                     <div className="metricsContainer">
                       <EuiResizableContainer>
                         {(EuiResizablePanel, EuiResizableButton) => (
                           <>
-                            <EuiResizablePanel mode="collapsible" initialSize={20} minSize="10%">
+                            <EuiResizablePanel
+                              mode="collapsible"
+                              initialSize={20}
+                              minSize="10%"
+                              paddingSize="none"
+                            >
                               <Sidebar
                                 additionalSelectedMetricId={routerProps.match.params.id}
                                 selectedDataSource={selectedDataSource}

diff --git a/public/components/metrics/sidebar/__tests__/__snapshots__/sidebar.test.tsx.snap b/public/components/metrics/sidebar/__tests__/__snapshots__/sidebar.test.tsx.snap
@@ -167,7 +167,7 @@ exports[`Side Bar Component renders Side Bar Component 1`] = `
                 </EuiTitle>
                 <EuiComboBox
                   async={false}
-                  compressed={false}
+                  compressed={true}
                   data-test-subj="metricsDataSourcePicker"
                   fullWidth={false}
                   isClearable={true}
@@ -196,14 +196,14 @@ exports[`Side Bar Component renders Side Bar Component 1`] = `
                   <div
                     aria-expanded={false}
                     aria-haspopup="listbox"
-                    className="euiComboBox"
+                    className="euiComboBox euiComboBox--compressed"
                     data-test-subj="metricsDataSourcePicker"
                     onKeyDown={[Function]}
                     role="combobox"
                   >
                     <EuiComboBoxInput
                       autoSizeInputRef={[Function]}
-                      compressed={false}
+                      compressed={true}
                       fullWidth={false}
                       hasSelectedOptions={false}
                       inputRef={[Function]}
@@ -230,7 +230,7 @@ exports[`Side Bar Component renders Side Bar Component 1`] = `
                       value=""
                     >
                       <EuiFormControlLayout
-                        compressed={false}
+                        compressed={true}
                         fullWidth={false}
                         icon={
                           Object {
@@ -245,13 +245,13 @@ exports[`Side Bar Component renders Side Bar Component 1`] = `
                         }
                       >
                         <div
-                          className="euiFormControlLayout"
+                          className="euiFormControlLayout euiFormControlLayout--compressed"
                         >
                           <div
                             className="euiFormControlLayout__childrenWrapper"
                           >
                             <div
-                              className="euiComboBox__inputWrap euiComboBox__inputWrap--noWrap euiComboBox__inputWrap-isClearable"
+                              className="euiComboBox__inputWrap euiComboBox__inputWrap--compressed euiComboBox__inputWrap--noWrap euiComboBox__inputWrap-isClearable"
                               data-test-subj="comboBoxInput"
                               onClick={[Function]}
                               tabIndex={-1}
@@ -320,7 +320,7 @@ exports[`Side Bar Component renders Side Bar Component 1`] = `
                               </AutosizeInput>
                             </div>
                             <EuiFormControlLayoutIcons
-                              compressed={false}
+                              compressed={true}
                               icon={
                                 Object {
                                   "aria-label": "Open list of options",
@@ -341,7 +341,7 @@ exports[`Side Bar Component renders Side Bar Component 1`] = `
                                   data-test-subj="comboBoxToggleListButton"
                                   iconRef={[Function]}
                                   onClick={[Function]}
-                                  size="m"
+                                  size="s"
                                   type="arrowDown"
                                 >
                                   <button
@@ -354,19 +354,19 @@ exports[`Side Bar Component renders Side Bar Component 1`] = `
                                     <EuiIcon
                                       aria-hidden="true"
                                       className="euiFormControlLayoutCustomIcon__icon"
-                                      size="m"
+                                      size="s"
                                       type="arrowDown"
                                     >
                                       <EuiIconBeaker
                                         aria-hidden={true}
-                                        className="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
+                                        className="euiIcon euiIcon--small euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
                                         focusable="false"
                                         role="img"
                                         style={null}
                                       >
                                         <svg
                                           aria-hidden={true}
-                                          className="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
+                                          className="euiIcon euiIcon--small euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
                                           focusable="false"
                                           height={16}
                                           role="img"

diff --git a/public/components/metrics/sidebar/data_source_picker.tsx b/public/components/metrics/sidebar/data_source_picker.tsx
@@ -27,6 +27,7 @@ export const DataSourcePicker = ({
         <h5>Metrics source</h5>
       </EuiTitle>
       <EuiComboBox
+        compressed
         placeholder="Select a metric source"
         singleSelection={{ asPlainText: true }}
         options={DATASOURCE_OPTIONS}

diff --git a/public/components/metrics/sidebar/search_bar.tsx b/public/components/metrics/sidebar/search_bar.tsx
@@ -4,9 +4,9 @@
  */
 
 import { EuiSearchBar } from '@elastic/eui';
-import React from 'react';
+import debounce from 'lodash/debounce';
+import React, { useEffect } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
-import { debounce } from 'lodash';
 import { searchSelector, setSearch } from '../redux/slices/metrics_slice';
 
 export const SearchBar = () => {
@@ -17,6 +17,15 @@ export const SearchBar = () => {
     dispatch(setSearch(query.text));
   }, 300);
 
+  // OUI doesn't pass down the prop
+  // Work around for OUI bug: https://github.com/opensearch-project/oui/issues/1343
+  useEffect(() => {
+    const element = document.querySelector('.euiFieldSearch');
+    if (element) {
+      element.classList.add('euiFieldSearch--compressed');
+    }
+  }, []);
+
   return (
     <div className="metrics-search-bar-input" data-test-subj="metricsSearch">
       <EuiSearchBar

diff --git a/public/components/metrics/sidebar/sidebar.scss b/public/components/metrics/sidebar/sidebar.scss
@@ -21,9 +21,9 @@ section.sidebar {
 }
 
 #metrics__mainContent {
-.dscAppContainer{
-.metricsSideBar {
-  padding: $euiSizeS;
+  .dscAppContainer {
+    .metricsSideBar {
+      padding: $euiSizeS;
       overflow: auto;
 
       &__fieldGroups {
@@ -44,8 +44,10 @@ section.sidebar {
       }
     }
     .metricsSideBar {
-  @include euiYScrollWithShadows;
-  .sidebar-list {
-    height: 100%;
+      @include euiYScrollWithShadows;
+      .sidebar-list {
+        height: 100%;
+      }
+    }
   }
-}}}
+}