From 0f2072f2923ee1fbf20e81930f58c29ca5237445 Mon Sep 17 00:00:00 2001
From: Sean Li <lnse@amazon.com>
Date: Tue, 22 Nov 2022 13:01:54 -0800
Subject: [PATCH 1/2] Implementing search feature

Signed-off-by: Sean Li <lnse@amazon.com>
---
 .../public/components/metrics/index.tsx       |   6 +-
 .../metrics/redux/slices/metrics_slice.ts     |  21 +++-
 .../metrics/sidebar/metric_name.tsx           |  43 ++++++++
 .../metrics/sidebar/metrics_accordion.tsx     |  40 +++++++
 .../components/metrics/sidebar/search_bar.tsx |  59 ++++-------
 .../components/metrics/sidebar/sidebar.scss   |   8 +-
 .../components/metrics/sidebar/sidebar.tsx    | 100 ++++--------------
 .../components/metrics/top_menu/top_menu.tsx  |  12 ++-
 8 files changed, 163 insertions(+), 126 deletions(-)
 create mode 100644 dashboards-observability/public/components/metrics/sidebar/metric_name.tsx
 create mode 100644 dashboards-observability/public/components/metrics/sidebar/metrics_accordion.tsx

diff --git a/dashboards-observability/public/components/metrics/index.tsx b/dashboards-observability/public/components/metrics/index.tsx
index 9d1ae0722..0647cdaba 100644
--- a/dashboards-observability/public/components/metrics/index.tsx
+++ b/dashboards-observability/public/components/metrics/index.tsx
@@ -67,6 +67,7 @@ export const Home = ({
   const resolutionSelectId = htmlIdGenerator('resolutionSelect')();
   const [toasts, setToasts] = useState<Toast[]>([]);
   const [toastRightSide, setToastRightSide] = useState<boolean>(true);
+  const [search, setSearch] = useState<boolean>(false);
 
   // Side bar constants
   const [isSidebarClosed, setIsSidebarClosed] = useState(false);
@@ -170,13 +171,16 @@ export const Home = ({
                   resolutionSelectId={resolutionSelectId}
                   savedObjects={savedObjects}
                   setToast={setToast}
+                  setSearch={setSearch}
                 />
                 <div className="dscAppContainer">
                   <div
                     className={`col-md-2 dscSidebar__container dscCollapsibleSidebar ${sidebarClassName}`}
                   >
                     <div className="">
-                      {!isSidebarClosed && <Sidebar http={http} pplService={pplService} />}
+                      {!isSidebarClosed && (
+                        <Sidebar http={http} pplService={pplService} search={search} />
+                      )}
                       <EuiButtonIcon
                         iconType={isSidebarClosed ? 'menuRight' : 'menuLeft'}
                         iconSize="m"
diff --git a/dashboards-observability/public/components/metrics/redux/slices/metrics_slice.ts b/dashboards-observability/public/components/metrics/redux/slices/metrics_slice.ts
index 4044778ee..7620e6a7e 100644
--- a/dashboards-observability/public/components/metrics/redux/slices/metrics_slice.ts
+++ b/dashboards-observability/public/components/metrics/redux/slices/metrics_slice.ts
@@ -21,6 +21,7 @@ const initialState = {
   pplService: PPLService,
   metrics: [],
   selected: [],
+  searched: [],
   metricsLayout: [],
 };
 
@@ -120,6 +121,14 @@ export const metricSlice = createSlice({
       updateLayoutByDeSelection(state, payload);
       state.selected = state.selected.filter((id) => id !== payload.id);
     },
+    searchMetric: (state, { payload }) => {
+      state.searched = state.metrics.filter(
+        (metric: any) => metric.name.includes(payload.id) && !state.selected.includes(payload.id)
+      );
+    },
+    clearSearchedMetrics: (state, { payload }) => {
+      state.searched = [];
+    },
     updateMetricsLayout: (state, { payload }) => {
       state.metricsLayout = payload;
     },
@@ -127,12 +136,19 @@ export const metricSlice = createSlice({
   extraReducers: (builder) => {
     builder.addCase(loadMetrics.fulfilled, (state, { payload }) => {
       state.metrics = payload;
+      state.searched = [];
       filterDeletedLayoutIds(state, payload);
     });
   },
 });
 
-export const { deSelectMetric, selectMetric, updateMetricsLayout } = metricSlice.actions;
+export const {
+  deSelectMetric,
+  selectMetric,
+  updateMetricsLayout,
+  searchMetric,
+  clearSearchedMetrics,
+} = metricSlice.actions;
 
 export const metricsStateSelector = (state) => state.metrics;
 
@@ -149,6 +165,9 @@ export const recentlyCreatedMetricsSelector = (state) =>
     (metric) => !state.metrics.selected.includes(metric.id) && metric.recentlyCreated
   );
 
+export const searchedMetricsSelector = (state) =>
+  state.metrics.searched.filter((metric) => !state.metrics.selected.includes(metric.id));
+
 export const allAvailableMetricsSelector = (state) =>
   state.metrics.metrics.filter((metric) => !state.metrics.selected.includes(metric.id));
 
diff --git a/dashboards-observability/public/components/metrics/sidebar/metric_name.tsx b/dashboards-observability/public/components/metrics/sidebar/metric_name.tsx
new file mode 100644
index 000000000..0998912bf
--- /dev/null
+++ b/dashboards-observability/public/components/metrics/sidebar/metric_name.tsx
@@ -0,0 +1,43 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React from 'react';
+import { EuiButtonEmpty, EuiToken } from '@elastic/eui';
+
+interface IMetricNameProps {
+  metric: any;
+  handleClick: (props: any) => void;
+}
+
+export const MetricName = (props: IMetricNameProps) => {
+  const { metric, handleClick } = props;
+
+  const title = metric.catalog === 'CUSTOM_METRICS' ? 'OpenSearch' : 'Prometheus';
+  const token =
+    metric.catalog === 'CUSTOM_METRICS'
+      ? '/ui/default_branding/opensearch_mark_default_mode.svg'
+      : 'tokenProperty';
+  const name = (metricName: string) => {
+    return metric.catalog === 'CUSTOM_METRICS' ? metricName : metricName.split('.')[1];
+  };
+
+  return (
+    <EuiButtonEmpty
+      className="eui-textTruncate"
+      title={metric.name}
+      onClick={() => handleClick(metric)}
+    >
+      <EuiToken
+        className="tokenMargin"
+        title={title}
+        iconType={token}
+        fill="light"
+        color="euiColorVis1"
+        shape="square"
+      />{' '}
+      {name(metric.name)}
+    </EuiButtonEmpty>
+  );
+};
diff --git a/dashboards-observability/public/components/metrics/sidebar/metrics_accordion.tsx b/dashboards-observability/public/components/metrics/sidebar/metrics_accordion.tsx
new file mode 100644
index 000000000..71b42e674
--- /dev/null
+++ b/dashboards-observability/public/components/metrics/sidebar/metrics_accordion.tsx
@@ -0,0 +1,40 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React from 'react';
+import { EuiAccordion, EuiTitle } from '@elastic/eui';
+import { MetricName } from './metric_name';
+
+interface IMetricNameProps {
+  metricsList: [];
+  headerName: string;
+  handleClick: (props: any) => void;
+}
+
+export const MetricsAccordion = (props: IMetricNameProps) => {
+  const { metricsList, headerName, handleClick } = props;
+
+  return (
+    <EuiAccordion
+      initialIsOpen
+      id={`${headerName}Selector`}
+      buttonContent={
+        <EuiTitle size="xxxs">
+          <span>{headerName}</span>
+        </EuiTitle>
+      }
+      paddingSize="none"
+    >
+      <ul className="metricsList">
+        {metricsList.slice(0, 100).map((metric: any) => (
+          <li key={metric.id} className="metricsListContainer">
+            <MetricName metric={metric} handleClick={handleClick} />
+          </li>
+        ))}
+      </ul>
+      {metricsList.length > 100 && <p>Use search bar for searching through all metrics.</p>}
+    </EuiAccordion>
+  );
+};
diff --git a/dashboards-observability/public/components/metrics/sidebar/search_bar.tsx b/dashboards-observability/public/components/metrics/sidebar/search_bar.tsx
index 9f3a7dafd..fc5656475 100644
--- a/dashboards-observability/public/components/metrics/sidebar/search_bar.tsx
+++ b/dashboards-observability/public/components/metrics/sidebar/search_bar.tsx
@@ -3,57 +3,40 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { EuiGlobalToastList, EuiSearchBar, EuiToast } from '@elastic/eui';
-import React, { useEffect, useState } from 'react';
-import { pplServiceRequestor } from '../helpers/utils';
+import { EuiSearchBar } from '@elastic/eui';
+import React from 'react';
+import { useDispatch } from 'react-redux';
+import { clearSearchedMetrics, searchMetric } from '../redux/slices/metrics_slice';
 
 interface ISearchBarProps {
-  allAvailableMetrics: any;
-  handleAddMetric: any;
+  setSearch: React.Dispatch<React.SetStateAction<boolean>>;
 }
 
 export const SearchBar = (props: ISearchBarProps) => {
-  const { allAvailableMetrics, handleAddMetric } = props;
+  const { setSearch } = props;
 
-  const [query, setQuery] = useState('');
-  const [error, setError] = useState(null);
+  const dispatch = useDispatch();
 
-  const [toasts, setToasts] = useState([]);
-  const addToast = (res: string) => {
-    if (res === 'success') {
-      const toast = {
-        id: 'success',
-        title: 'Metric successfully added!!',
-        color: 'success',
-      };
-      setToasts(toasts.concat(toast));
+  const onChange = ({ query }: { query: any }) => {
+    if (query.text !== '') {
+      setSearch(true);
+      dispatch(searchMetric({ id: query.text }));
     } else {
-      const toast = {
-        id: 'fail',
-        title: 'Metric not found.',
-        color: 'danger',
-      };
-      setToasts(toasts.concat(toast));
-    }
-  };
-  const removeToast = (removedToast: any) => {
-    setToasts(toasts.filter((toast: any) => toast.id !== removedToast.id));
-  };
-
-  const onChange = ({ query }) => {
-    const metric = allAvailableMetrics.find((row: any) => row.name.includes(query.text));
-    if (metric) {
-      handleAddMetric(metric);
-      addToast('success');
-    } else {
-      addToast('fail');
+      setSearch(false);
+      dispatch(clearSearchedMetrics({}));
     }
   };
 
   return (
     <div>
-      <EuiSearchBar defaultQuery={''} onChange={onChange} />
-      <EuiGlobalToastList toasts={toasts} dismissToast={removeToast} toastLifeTimeMs={6000} />
+      <EuiSearchBar
+        box={{
+          placeholder: 'Search for metrics',
+          incremental: true,
+        }}
+        defaultQuery={''}
+        onChange={onChange}
+      />
     </div>
   );
 };
diff --git a/dashboards-observability/public/components/metrics/sidebar/sidebar.scss b/dashboards-observability/public/components/metrics/sidebar/sidebar.scss
index 069c5c86c..6be02c332 100644
--- a/dashboards-observability/public/components/metrics/sidebar/sidebar.scss
+++ b/dashboards-observability/public/components/metrics/sidebar/sidebar.scss
@@ -138,7 +138,6 @@
 }
 
 .sidebarHeight {
-  // @include euiYScrollWithShadows;
   line-height:normal;
   overflow:auto;
   max-height:100vh;
@@ -146,14 +145,13 @@
 
 .metricsList {
   line-height:normal;
-  margin-top:5px;
 }
 
 .metricsListContainer {
-  margin-left:25px;
+  margin-left:15px;
   margin-right:5px;
 }
 
-.metricName {
-  margin-bottom:10px;
+.tokenMargin {
+  vertical-align:middle;
 }
diff --git a/dashboards-observability/public/components/metrics/sidebar/sidebar.tsx b/dashboards-observability/public/components/metrics/sidebar/sidebar.tsx
index f08665b79..c137dec3b 100644
--- a/dashboards-observability/public/components/metrics/sidebar/sidebar.tsx
+++ b/dashboards-observability/public/components/metrics/sidebar/sidebar.tsx
@@ -6,7 +6,7 @@
 import './sidebar.scss';
 
 import React, { useEffect } from 'react';
-import { EuiTitle, EuiSpacer, EuiAccordion, EuiLink } from '@elastic/eui';
+import { EuiSpacer } from '@elastic/eui';
 import { I18nProvider } from '@osd/i18n/react';
 import { batch, useDispatch, useSelector } from 'react-redux';
 import {
@@ -16,22 +16,26 @@ import {
   loadMetrics,
   selectedMetricsSelector,
   recentlyCreatedMetricsSelector,
+  searchedMetricsSelector,
 } from '../redux/slices/metrics_slice';
 import { CoreStart } from '../../../../../../src/core/public';
 import PPLService from '../../../services/requests/ppl';
+import { MetricsAccordion } from './metrics_accordion';
 
 interface ISidebarProps {
   http: CoreStart['http'];
   pplService: PPLService;
+  search: boolean;
 }
 
 export const Sidebar = (props: ISidebarProps) => {
-  const { http, pplService } = props;
+  const { http, pplService, search } = props;
   const dispatch = useDispatch();
 
   const availableMetrics = useSelector(availableMetricsSelector);
   const selectedMetrics = useSelector(selectedMetricsSelector);
   const recentlyCreatedMetrics = useSelector(recentlyCreatedMetricsSelector);
+  const searchedMetrics = useSelector(searchedMetricsSelector);
 
   useEffect(() => {
     batch(() => {
@@ -45,86 +49,28 @@ export const Sidebar = (props: ISidebarProps) => {
     dispatch(deSelectMetric(metric));
   };
 
+  const availableMetricsDisplay = search ? searchedMetrics : availableMetrics;
+
   return (
     <I18nProvider>
       <section className="sidebarHeight">
-        <EuiAccordion
-          initialIsOpen
-          id="recentlyCreatedMetricsSelector"
-          buttonContent={
-            <EuiTitle size="xxxs">
-              <span>Recently Created Metrics</span>
-            </EuiTitle>
-          }
-          paddingSize="none"
-        >
-          <ul className="metricsList">
-            {recentlyCreatedMetrics.map((metric: any) => (
-              <li key={metric.id} className="metricsListContainer">
-                <EuiLink
-                  className="metricName eui-textTruncate"
-                  title={metric.name}
-                  onClick={() => handleAddMetric(metric)}
-                >
-                  {metric.name}
-                </EuiLink>
-              </li>
-            ))}
-          </ul>
-        </EuiAccordion>
+        <MetricsAccordion
+          metricsList={recentlyCreatedMetrics}
+          headerName="Recently Created Metrics"
+          handleClick={handleAddMetric}
+        />
         <EuiSpacer size="s" />
-        <EuiAccordion
-          initialIsOpen
-          id="selectedMetricsSelector"
-          buttonContent={
-            <EuiTitle size="xxxs">
-              <span>Selected Metrics</span>
-            </EuiTitle>
-          }
-          paddingSize="none"
-        >
-          <ul className="metricsList">
-            {selectedMetrics.map((metric: any) => (
-              <li key={metric.id} className="metricsListContainer">
-                <EuiLink
-                  className="metricName eui-textTruncate"
-                  title={metric.name}
-                  onClick={() => handleRemoveMetric(metric)}
-                >
-                  {metric.name}
-                </EuiLink>
-              </li>
-            ))}
-          </ul>
-        </EuiAccordion>
+        <MetricsAccordion
+          metricsList={selectedMetrics}
+          headerName="Selected Metrics"
+          handleClick={handleRemoveMetric}
+        />
         <EuiSpacer size="s" />
-        <EuiAccordion
-          initialIsOpen
-          id="availableMetricsSelector"
-          buttonContent={
-            <EuiTitle size="xxxs">
-              <span>Available Metrics</span>
-            </EuiTitle>
-          }
-          paddingSize="none"
-        >
-          <ul className="metricsList">
-            {availableMetrics.slice(0, 100).map((metric: any) => (
-              <li key={metric.id} className="metricsListContainer">
-                <EuiLink
-                  className="metricName eui-textTruncate"
-                  title={metric.name}
-                  onClick={() => handleAddMetric(metric)}
-                >
-                  {metric.name}
-                </EuiLink>
-              </li>
-            ))}
-          </ul>
-          {availableMetrics.length > 100 && (
-            <p>Use search bar for searching through all metrics.</p>
-          )}
-        </EuiAccordion>
+        <MetricsAccordion
+          metricsList={availableMetricsDisplay}
+          headerName="Available Metrics"
+          handleClick={handleAddMetric}
+        />
       </section>
     </I18nProvider>
   );
diff --git a/dashboards-observability/public/components/metrics/top_menu/top_menu.tsx b/dashboards-observability/public/components/metrics/top_menu/top_menu.tsx
index c8adb9977..cd3d17e3b 100644
--- a/dashboards-observability/public/components/metrics/top_menu/top_menu.tsx
+++ b/dashboards-observability/public/components/metrics/top_menu/top_menu.tsx
@@ -1,3 +1,8 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
 import {
   EuiPageHeader,
   EuiPageHeaderSection,
@@ -52,6 +57,7 @@ interface TopMenuProps {
   resolutionSelectId: string;
   savedObjects: SavedObjects;
   setToast: (title: string, color?: string, text?: any, side?: string) => void;
+  setSearch: any;
 }
 
 export const TopMenu = ({
@@ -73,6 +79,7 @@ export const TopMenu = ({
   resolutionSelectId,
   savedObjects,
   setToast,
+  setSearch,
 }: TopMenuProps) => {
   // Redux tools
   const dispatch = useDispatch();
@@ -209,10 +216,7 @@ export const TopMenu = ({
         <EuiPageHeaderSection>
           <EuiFlexGroup className="search-bar-top-menu">
             <EuiFlexItem>
-              <SearchBar
-                allAvailableMetrics={allAvailableMetrics}
-                handleAddMetric={handleAddMetric}
-              />
+              <SearchBar setSearch={setSearch} />
             </EuiFlexItem>
           </EuiFlexGroup>
         </EuiPageHeaderSection>

From c5028f804a7ee349b4191650364b66317f53f363 Mon Sep 17 00:00:00 2001
From: Sean Li <lnse@amazon.com>
Date: Tue, 22 Nov 2022 16:06:01 -0800
Subject: [PATCH 2/2] Updating tests

Signed-off-by: Sean Li <lnse@amazon.com>
---
 .../__snapshots__/searchbar.test.tsx.snap     | 484 ++++++++---------
 .../__snapshots__/sidebar.test.tsx.snap       | 499 +++++++++---------
 .../sidebar/__tests__/searchbar.test.tsx      |  20 +-
 .../sidebar/__tests__/sidebar.test.tsx        |   3 +-
 .../__snapshots__/top_menu.test.tsx.snap      | 111 ++--
 5 files changed, 544 insertions(+), 573 deletions(-)

diff --git a/dashboards-observability/public/components/metrics/sidebar/__tests__/__snapshots__/searchbar.test.tsx.snap b/dashboards-observability/public/components/metrics/sidebar/__tests__/__snapshots__/searchbar.test.tsx.snap
index 0dd14e663..1a271b63c 100644
--- a/dashboards-observability/public/components/metrics/sidebar/__tests__/__snapshots__/searchbar.test.tsx.snap
+++ b/dashboards-observability/public/components/metrics/sidebar/__tests__/__snapshots__/searchbar.test.tsx.snap
@@ -1,323 +1,295 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Search Bar Component Search Side Bar Component with available metrics 1`] = `
-<SearchBar
-  allAvailableMetrics={
-    Array [
-      Object {
-        "catalog": "CUSTOM_METRICS",
-        "id": "HIlAQYQBiaYaSxpXJ73K",
-        "name": "[Prometheus Metric] prometheus.process_resident_memory_bytes",
-        "recentlyCreated": true,
-        "type": "line",
-      },
-      Object {
-        "catalog": "CUSTOM_METRICS",
-        "id": "Y4muP4QBiaYaSxpXk7r8",
-        "name": "new metric",
-        "recentlyCreated": false,
-        "type": "line",
-      },
-      Object {
-        "catalog": "CUSTOM_METRICS",
-        "id": "HolAQYQBiaYaSxpXKL0T",
-        "name": "[Prometheus Metric] prometheus.go_memstats_heap_sys_bytes",
-        "recentlyCreated": true,
-        "type": "line",
-      },
-      Object {
-        "catalog": "CUSTOM_METRICS",
-        "id": "tomAP4QBiaYaSxpXALls",
-        "name": "[Logs] Average ram usage per day by windows os ",
-        "recentlyCreated": false,
-        "type": "line",
-      },
-      Object {
-        "catalog": "prometheus",
-        "id": "prometheus.process_resident_memory_bytes",
-        "name": "prometheus.process_resident_memory_bytes",
-        "recentlyCreated": false,
-        "type": "gauge",
-      },
-    ]
+<Provider
+  store={
+    Object {
+      "dispatch": [Function],
+      "getState": [Function],
+      "replaceReducer": [Function],
+      "subscribe": [Function],
+      Symbol(Symbol.observable): [Function],
+    }
   }
-  handleAddMetric={[MockFunction]}
 >
-  <div>
-    <EuiSearchBar
-      defaultQuery=""
-      onChange={[Function]}
-    >
-      <EuiFlexGroup
-        alignItems="center"
-        gutterSize="m"
-        wrap={true}
+  <SearchBar
+    setSearch={[MockFunction]}
+  >
+    <div>
+      <EuiSearchBar
+        box={
+          Object {
+            "incremental": true,
+            "placeholder": "Search for metrics",
+          }
+        }
+        defaultQuery=""
+        onChange={[Function]}
       >
-        <div
-          className="euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive euiFlexGroup--wrap"
+        <EuiFlexGroup
+          alignItems="center"
+          gutterSize="m"
+          wrap={true}
         >
-          <EuiFlexItem
-            className="euiSearchBar__searchHolder"
-            grow={true}
+          <div
+            className="euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive euiFlexGroup--wrap"
           >
-            <div
-              className="euiFlexItem euiSearchBar__searchHolder"
+            <EuiFlexItem
+              className="euiSearchBar__searchHolder"
+              grow={true}
             >
-              <EuiSearchBox
-                incremental={false}
-                isInvalid={false}
-                onSearch={[Function]}
-                placeholder="Search..."
-                query=""
+              <div
+                className="euiFlexItem euiSearchBar__searchHolder"
               >
-                <EuiFieldSearch
-                  aria-label="This is a search bar. After typing your query, hit enter to filter the results lower in the page."
-                  compressed={false}
-                  defaultValue=""
-                  fullWidth={true}
-                  incremental={false}
-                  inputRef={[Function]}
-                  isClearable={true}
+                <EuiSearchBox
+                  incremental={true}
                   isInvalid={false}
-                  isLoading={false}
                   onSearch={[Function]}
-                  placeholder="Search..."
+                  placeholder="Search for metrics"
+                  query=""
                 >
-                  <EuiFormControlLayout
+                  <EuiFieldSearch
+                    aria-label="This is a search bar. As you type, the results lower in the page will automatically filter."
                     compressed={false}
+                    defaultValue=""
                     fullWidth={true}
-                    icon="search"
+                    incremental={true}
+                    inputRef={[Function]}
+                    isClearable={true}
+                    isInvalid={false}
                     isLoading={false}
+                    onSearch={[Function]}
+                    placeholder="Search for metrics"
                   >
-                    <div
-                      className="euiFormControlLayout euiFormControlLayout--fullWidth"
+                    <EuiFormControlLayout
+                      compressed={false}
+                      fullWidth={true}
+                      icon="search"
+                      isLoading={false}
                     >
                       <div
-                        className="euiFormControlLayout__childrenWrapper"
+                        className="euiFormControlLayout euiFormControlLayout--fullWidth"
                       >
-                        <EuiValidatableControl
-                          isInvalid={false}
+                        <div
+                          className="euiFormControlLayout__childrenWrapper"
                         >
-                          <input
-                            aria-label="This is a search bar. After typing your query, hit enter to filter the results lower in the page."
-                            className="euiFieldSearch euiFieldSearch--fullWidth"
-                            defaultValue=""
-                            onKeyUp={[Function]}
-                            placeholder="Search..."
-                            type="search"
-                          />
-                        </EuiValidatableControl>
-                        <EuiFormControlLayoutIcons
-                          compressed={false}
-                          icon="search"
-                          isLoading={false}
-                        >
-                          <div
-                            className="euiFormControlLayoutIcons"
+                          <EuiValidatableControl
+                            isInvalid={false}
                           >
-                            <EuiFormControlLayoutCustomIcon
-                              size="m"
+                            <input
+                              aria-label="This is a search bar. As you type, the results lower in the page will automatically filter."
+                              className="euiFieldSearch euiFieldSearch--fullWidth"
+                              defaultValue=""
+                              onKeyUp={[Function]}
+                              placeholder="Search for metrics"
                               type="search"
+                            />
+                          </EuiValidatableControl>
+                          <EuiFormControlLayoutIcons
+                            compressed={false}
+                            icon="search"
+                            isLoading={false}
+                          >
+                            <div
+                              className="euiFormControlLayoutIcons"
                             >
-                              <span
-                                className="euiFormControlLayoutCustomIcon"
+                              <EuiFormControlLayoutCustomIcon
+                                size="m"
+                                type="search"
                               >
-                                <EuiIcon
-                                  aria-hidden="true"
-                                  className="euiFormControlLayoutCustomIcon__icon"
-                                  size="m"
-                                  type="search"
+                                <span
+                                  className="euiFormControlLayoutCustomIcon"
                                 >
-                                  <EuiIconSearch
-                                    aria-hidden={true}
-                                    className="euiIcon euiIcon--medium euiFormControlLayoutCustomIcon__icon"
-                                    focusable="false"
-                                    role="img"
-                                    style={null}
+                                  <EuiIcon
+                                    aria-hidden="true"
+                                    className="euiFormControlLayoutCustomIcon__icon"
+                                    size="m"
+                                    type="search"
                                   >
-                                    <svg
+                                    <EuiIconSearch
                                       aria-hidden={true}
                                       className="euiIcon euiIcon--medium euiFormControlLayoutCustomIcon__icon"
                                       focusable="false"
-                                      height={16}
                                       role="img"
                                       style={null}
-                                      viewBox="0 0 16 16"
-                                      width={16}
-                                      xmlns="http://www.w3.org/2000/svg"
                                     >
-                                      <path
-                                        d="M11.271 11.978l3.872 3.873a.502.502 0 00.708 0 .502.502 0 000-.708l-3.565-3.564c2.38-2.747 2.267-6.923-.342-9.532-2.73-2.73-7.17-2.73-9.898 0-2.728 2.729-2.728 7.17 0 9.9a6.955 6.955 0 004.949 2.05.5.5 0 000-1 5.96 5.96 0 01-4.242-1.757 6.01 6.01 0 010-8.486c2.337-2.34 6.143-2.34 8.484 0a6.01 6.01 0 010 8.486.5.5 0 00.034.738z"
-                                      />
-                                    </svg>
-                                  </EuiIconSearch>
-                                </EuiIcon>
-                              </span>
-                            </EuiFormControlLayoutCustomIcon>
-                          </div>
-                        </EuiFormControlLayoutIcons>
+                                      <svg
+                                        aria-hidden={true}
+                                        className="euiIcon euiIcon--medium euiFormControlLayoutCustomIcon__icon"
+                                        focusable="false"
+                                        height={16}
+                                        role="img"
+                                        style={null}
+                                        viewBox="0 0 16 16"
+                                        width={16}
+                                        xmlns="http://www.w3.org/2000/svg"
+                                      >
+                                        <path
+                                          d="M11.271 11.978l3.872 3.873a.502.502 0 00.708 0 .502.502 0 000-.708l-3.565-3.564c2.38-2.747 2.267-6.923-.342-9.532-2.73-2.73-7.17-2.73-9.898 0-2.728 2.729-2.728 7.17 0 9.9a6.955 6.955 0 004.949 2.05.5.5 0 000-1 5.96 5.96 0 01-4.242-1.757 6.01 6.01 0 010-8.486c2.337-2.34 6.143-2.34 8.484 0a6.01 6.01 0 010 8.486.5.5 0 00.034.738z"
+                                        />
+                                      </svg>
+                                    </EuiIconSearch>
+                                  </EuiIcon>
+                                </span>
+                              </EuiFormControlLayoutCustomIcon>
+                            </div>
+                          </EuiFormControlLayoutIcons>
+                        </div>
                       </div>
-                    </div>
-                  </EuiFormControlLayout>
-                </EuiFieldSearch>
-              </EuiSearchBox>
-            </div>
-          </EuiFlexItem>
-        </div>
-      </EuiFlexGroup>
-    </EuiSearchBar>
-    <EuiGlobalToastList
-      dismissToast={[Function]}
-      side="right"
-      toastLifeTimeMs={6000}
-      toasts={Array []}
-    >
-      <div
-        aria-live="polite"
-        className="euiGlobalToastList euiGlobalToastList--right"
-        role="region"
-      />
-    </EuiGlobalToastList>
-  </div>
-</SearchBar>
+                    </EuiFormControlLayout>
+                  </EuiFieldSearch>
+                </EuiSearchBox>
+              </div>
+            </EuiFlexItem>
+          </div>
+        </EuiFlexGroup>
+      </EuiSearchBar>
+    </div>
+  </SearchBar>
+</Provider>
 `;
 
 exports[`Search Bar Component Search Side Bar Component with no available metrics 1`] = `
-<SearchBar
-  allAvailableMetrics={Array []}
-  handleAddMetric={[MockFunction]}
+<Provider
+  store={
+    Object {
+      "dispatch": [Function],
+      "getState": [Function],
+      "replaceReducer": [Function],
+      "subscribe": [Function],
+      Symbol(Symbol.observable): [Function],
+    }
+  }
 >
-  <div>
-    <EuiSearchBar
-      defaultQuery=""
-      onChange={[Function]}
-    >
-      <EuiFlexGroup
-        alignItems="center"
-        gutterSize="m"
-        wrap={true}
+  <SearchBar
+    setSearch={[MockFunction]}
+  >
+    <div>
+      <EuiSearchBar
+        box={
+          Object {
+            "incremental": true,
+            "placeholder": "Search for metrics",
+          }
+        }
+        defaultQuery=""
+        onChange={[Function]}
       >
-        <div
-          className="euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive euiFlexGroup--wrap"
+        <EuiFlexGroup
+          alignItems="center"
+          gutterSize="m"
+          wrap={true}
         >
-          <EuiFlexItem
-            className="euiSearchBar__searchHolder"
-            grow={true}
+          <div
+            className="euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive euiFlexGroup--wrap"
           >
-            <div
-              className="euiFlexItem euiSearchBar__searchHolder"
+            <EuiFlexItem
+              className="euiSearchBar__searchHolder"
+              grow={true}
             >
-              <EuiSearchBox
-                incremental={false}
-                isInvalid={false}
-                onSearch={[Function]}
-                placeholder="Search..."
-                query=""
+              <div
+                className="euiFlexItem euiSearchBar__searchHolder"
               >
-                <EuiFieldSearch
-                  aria-label="This is a search bar. After typing your query, hit enter to filter the results lower in the page."
-                  compressed={false}
-                  defaultValue=""
-                  fullWidth={true}
-                  incremental={false}
-                  inputRef={[Function]}
-                  isClearable={true}
+                <EuiSearchBox
+                  incremental={true}
                   isInvalid={false}
-                  isLoading={false}
                   onSearch={[Function]}
-                  placeholder="Search..."
+                  placeholder="Search for metrics"
+                  query=""
                 >
-                  <EuiFormControlLayout
+                  <EuiFieldSearch
+                    aria-label="This is a search bar. As you type, the results lower in the page will automatically filter."
                     compressed={false}
+                    defaultValue=""
                     fullWidth={true}
-                    icon="search"
+                    incremental={true}
+                    inputRef={[Function]}
+                    isClearable={true}
+                    isInvalid={false}
                     isLoading={false}
+                    onSearch={[Function]}
+                    placeholder="Search for metrics"
                   >
-                    <div
-                      className="euiFormControlLayout euiFormControlLayout--fullWidth"
+                    <EuiFormControlLayout
+                      compressed={false}
+                      fullWidth={true}
+                      icon="search"
+                      isLoading={false}
                     >
                       <div
-                        className="euiFormControlLayout__childrenWrapper"
+                        className="euiFormControlLayout euiFormControlLayout--fullWidth"
                       >
-                        <EuiValidatableControl
-                          isInvalid={false}
+                        <div
+                          className="euiFormControlLayout__childrenWrapper"
                         >
-                          <input
-                            aria-label="This is a search bar. After typing your query, hit enter to filter the results lower in the page."
-                            className="euiFieldSearch euiFieldSearch--fullWidth"
-                            defaultValue=""
-                            onKeyUp={[Function]}
-                            placeholder="Search..."
-                            type="search"
-                          />
-                        </EuiValidatableControl>
-                        <EuiFormControlLayoutIcons
-                          compressed={false}
-                          icon="search"
-                          isLoading={false}
-                        >
-                          <div
-                            className="euiFormControlLayoutIcons"
+                          <EuiValidatableControl
+                            isInvalid={false}
                           >
-                            <EuiFormControlLayoutCustomIcon
-                              size="m"
+                            <input
+                              aria-label="This is a search bar. As you type, the results lower in the page will automatically filter."
+                              className="euiFieldSearch euiFieldSearch--fullWidth"
+                              defaultValue=""
+                              onKeyUp={[Function]}
+                              placeholder="Search for metrics"
                               type="search"
+                            />
+                          </EuiValidatableControl>
+                          <EuiFormControlLayoutIcons
+                            compressed={false}
+                            icon="search"
+                            isLoading={false}
+                          >
+                            <div
+                              className="euiFormControlLayoutIcons"
                             >
-                              <span
-                                className="euiFormControlLayoutCustomIcon"
+                              <EuiFormControlLayoutCustomIcon
+                                size="m"
+                                type="search"
                               >
-                                <EuiIcon
-                                  aria-hidden="true"
-                                  className="euiFormControlLayoutCustomIcon__icon"
-                                  size="m"
-                                  type="search"
+                                <span
+                                  className="euiFormControlLayoutCustomIcon"
                                 >
-                                  <EuiIconEmpty
-                                    aria-hidden={true}
-                                    className="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
-                                    focusable="false"
-                                    role="img"
-                                    style={null}
+                                  <EuiIcon
+                                    aria-hidden="true"
+                                    className="euiFormControlLayoutCustomIcon__icon"
+                                    size="m"
+                                    type="search"
                                   >
-                                    <svg
+                                    <EuiIconEmpty
                                       aria-hidden={true}
                                       className="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
                                       focusable="false"
-                                      height={16}
                                       role="img"
                                       style={null}
-                                      viewBox="0 0 16 16"
-                                      width={16}
-                                      xmlns="http://www.w3.org/2000/svg"
-                                    />
-                                  </EuiIconEmpty>
-                                </EuiIcon>
-                              </span>
-                            </EuiFormControlLayoutCustomIcon>
-                          </div>
-                        </EuiFormControlLayoutIcons>
+                                    >
+                                      <svg
+                                        aria-hidden={true}
+                                        className="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
+                                        focusable="false"
+                                        height={16}
+                                        role="img"
+                                        style={null}
+                                        viewBox="0 0 16 16"
+                                        width={16}
+                                        xmlns="http://www.w3.org/2000/svg"
+                                      />
+                                    </EuiIconEmpty>
+                                  </EuiIcon>
+                                </span>
+                              </EuiFormControlLayoutCustomIcon>
+                            </div>
+                          </EuiFormControlLayoutIcons>
+                        </div>
                       </div>
-                    </div>
-                  </EuiFormControlLayout>
-                </EuiFieldSearch>
-              </EuiSearchBox>
-            </div>
-          </EuiFlexItem>
-        </div>
-      </EuiFlexGroup>
-    </EuiSearchBar>
-    <EuiGlobalToastList
-      dismissToast={[Function]}
-      side="right"
-      toastLifeTimeMs={6000}
-      toasts={Array []}
-    >
-      <div
-        aria-live="polite"
-        className="euiGlobalToastList euiGlobalToastList--right"
-        role="region"
-      />
-    </EuiGlobalToastList>
-  </div>
-</SearchBar>
+                    </EuiFormControlLayout>
+                  </EuiFieldSearch>
+                </EuiSearchBox>
+              </div>
+            </EuiFlexItem>
+          </div>
+        </EuiFlexGroup>
+      </EuiSearchBar>
+    </div>
+  </SearchBar>
+</Provider>
 `;
diff --git a/dashboards-observability/public/components/metrics/sidebar/__tests__/__snapshots__/sidebar.test.tsx.snap b/dashboards-observability/public/components/metrics/sidebar/__tests__/__snapshots__/sidebar.test.tsx.snap
index b7f4adfcd..b4ba2e2b7 100644
--- a/dashboards-observability/public/components/metrics/sidebar/__tests__/__snapshots__/sidebar.test.tsx.snap
+++ b/dashboards-observability/public/components/metrics/sidebar/__tests__/__snapshots__/sidebar.test.tsx.snap
@@ -20,6 +20,7 @@ exports[`Side Bar Component renders Side Bar Component 1`] = `
         "http": [MockFunction],
       }
     }
+    search={false}
   >
     <I18nProvider>
       <IntlProvider
@@ -110,104 +111,110 @@ exports[`Side Bar Component renders Side Bar Component 1`] = `
           <section
             className="sidebarHeight"
           >
-            <EuiAccordion
-              arrowDisplay="left"
-              buttonContent={
-                <EuiTitle
-                  size="xxxs"
-                >
-                  <span>
-                    Recently Created Metrics
-                  </span>
-                </EuiTitle>
-              }
-              id="recentlyCreatedMetricsSelector"
-              initialIsOpen={true}
-              isLoading={false}
-              isLoadingMessage={false}
-              paddingSize="none"
+            <MetricsAccordion
+              handleClick={[Function]}
+              headerName="Recently Created Metrics"
+              metricsList={Array []}
             >
-              <div
-                className="euiAccordion euiAccordion-isOpen"
+              <EuiAccordion
+                arrowDisplay="left"
+                buttonContent={
+                  <EuiTitle
+                    size="xxxs"
+                  >
+                    <span>
+                      Recently Created Metrics
+                    </span>
+                  </EuiTitle>
+                }
+                id="Recently Created MetricsSelector"
+                initialIsOpen={true}
+                isLoading={false}
+                isLoadingMessage={false}
+                paddingSize="none"
               >
                 <div
-                  className="euiAccordion__triggerWrapper"
+                  className="euiAccordion euiAccordion-isOpen"
                 >
-                  <button
-                    aria-controls="recentlyCreatedMetricsSelector"
-                    aria-expanded={true}
-                    className="euiAccordion__button"
-                    id="random_html_id"
-                    onClick={[Function]}
-                    type="button"
+                  <div
+                    className="euiAccordion__triggerWrapper"
                   >
-                    <span
-                      className="euiAccordion__iconWrapper"
+                    <button
+                      aria-controls="Recently Created MetricsSelector"
+                      aria-expanded={true}
+                      className="euiAccordion__button"
+                      id="random_html_id"
+                      onClick={[Function]}
+                      type="button"
                     >
-                      <EuiIcon
-                        className="euiAccordion__icon euiAccordion__icon-isOpen"
-                        size="m"
-                        type="arrowRight"
+                      <span
+                        className="euiAccordion__iconWrapper"
                       >
-                        <EuiIconEmpty
-                          aria-hidden={true}
-                          className="euiIcon euiIcon--medium euiIcon-isLoading euiAccordion__icon euiAccordion__icon-isOpen"
-                          focusable="false"
-                          role="img"
-                          style={null}
+                        <EuiIcon
+                          className="euiAccordion__icon euiAccordion__icon-isOpen"
+                          size="m"
+                          type="arrowRight"
                         >
-                          <svg
+                          <EuiIconEmpty
                             aria-hidden={true}
                             className="euiIcon euiIcon--medium euiIcon-isLoading euiAccordion__icon euiAccordion__icon-isOpen"
                             focusable="false"
-                            height={16}
                             role="img"
                             style={null}
-                            viewBox="0 0 16 16"
-                            width={16}
-                            xmlns="http://www.w3.org/2000/svg"
-                          />
-                        </EuiIconEmpty>
-                      </EuiIcon>
-                    </span>
-                    <span
-                      className="euiIEFlexWrapFix"
-                    >
-                      <EuiTitle
-                        size="xxxs"
+                          >
+                            <svg
+                              aria-hidden={true}
+                              className="euiIcon euiIcon--medium euiIcon-isLoading euiAccordion__icon euiAccordion__icon-isOpen"
+                              focusable="false"
+                              height={16}
+                              role="img"
+                              style={null}
+                              viewBox="0 0 16 16"
+                              width={16}
+                              xmlns="http://www.w3.org/2000/svg"
+                            />
+                          </EuiIconEmpty>
+                        </EuiIcon>
+                      </span>
+                      <span
+                        className="euiIEFlexWrapFix"
                       >
-                        <span
-                          className="euiTitle euiTitle--xxxsmall"
+                        <EuiTitle
+                          size="xxxs"
                         >
-                          Recently Created Metrics
-                        </span>
-                      </EuiTitle>
-                    </span>
-                  </button>
-                </div>
-                <div
-                  aria-labelledby="random_html_id"
-                  className="euiAccordion__childWrapper"
-                  id="recentlyCreatedMetricsSelector"
-                  role="region"
-                  tabIndex={-1}
-                >
-                  <EuiResizeObserver
-                    onResize={[Function]}
+                          <span
+                            className="euiTitle euiTitle--xxxsmall"
+                          >
+                            Recently Created Metrics
+                          </span>
+                        </EuiTitle>
+                      </span>
+                    </button>
+                  </div>
+                  <div
+                    aria-labelledby="random_html_id"
+                    className="euiAccordion__childWrapper"
+                    id="Recently Created MetricsSelector"
+                    role="region"
+                    tabIndex={-1}
                   >
-                    <div>
-                      <div
-                        className=""
-                      >
-                        <ul
-                          className="metricsList"
-                        />
+                    <EuiResizeObserver
+                      onResize={[Function]}
+                    >
+                      <div>
+                        <div
+                          className=""
+                        >
+                          <ul
+                            className="metricsList"
+                          />
+                        </div>
                       </div>
-                    </div>
-                  </EuiResizeObserver>
+                    </EuiResizeObserver>
+                  </div>
                 </div>
-              </div>
-            </EuiAccordion>
+              </EuiAccordion>
+            </MetricsAccordion>
             <EuiSpacer
               size="s"
             >
@@ -215,104 +222,110 @@ exports[`Side Bar Component renders Side Bar Component 1`] = `
                 className="euiSpacer euiSpacer--s"
               />
             </EuiSpacer>
-            <EuiAccordion
-              arrowDisplay="left"
-              buttonContent={
-                <EuiTitle
-                  size="xxxs"
-                >
-                  <span>
-                    Selected Metrics
-                  </span>
-                </EuiTitle>
-              }
-              id="selectedMetricsSelector"
-              initialIsOpen={true}
-              isLoading={false}
-              isLoadingMessage={false}
-              paddingSize="none"
+            <MetricsAccordion
+              handleClick={[Function]}
+              headerName="Selected Metrics"
+              metricsList={Array []}
             >
-              <div
-                className="euiAccordion euiAccordion-isOpen"
+              <EuiAccordion
+                arrowDisplay="left"
+                buttonContent={
+                  <EuiTitle
+                    size="xxxs"
+                  >
+                    <span>
+                      Selected Metrics
+                    </span>
+                  </EuiTitle>
+                }
+                id="Selected MetricsSelector"
+                initialIsOpen={true}
+                isLoading={false}
+                isLoadingMessage={false}
+                paddingSize="none"
               >
                 <div
-                  className="euiAccordion__triggerWrapper"
+                  className="euiAccordion euiAccordion-isOpen"
                 >
-                  <button
-                    aria-controls="selectedMetricsSelector"
-                    aria-expanded={true}
-                    className="euiAccordion__button"
-                    id="random_html_id"
-                    onClick={[Function]}
-                    type="button"
+                  <div
+                    className="euiAccordion__triggerWrapper"
                   >
-                    <span
-                      className="euiAccordion__iconWrapper"
+                    <button
+                      aria-controls="Selected MetricsSelector"
+                      aria-expanded={true}
+                      className="euiAccordion__button"
+                      id="random_html_id"
+                      onClick={[Function]}
+                      type="button"
                     >
-                      <EuiIcon
-                        className="euiAccordion__icon euiAccordion__icon-isOpen"
-                        size="m"
-                        type="arrowRight"
+                      <span
+                        className="euiAccordion__iconWrapper"
                       >
-                        <EuiIconEmpty
-                          aria-hidden={true}
-                          className="euiIcon euiIcon--medium euiIcon-isLoading euiAccordion__icon euiAccordion__icon-isOpen"
-                          focusable="false"
-                          role="img"
-                          style={null}
+                        <EuiIcon
+                          className="euiAccordion__icon euiAccordion__icon-isOpen"
+                          size="m"
+                          type="arrowRight"
                         >
-                          <svg
+                          <EuiIconEmpty
                             aria-hidden={true}
                             className="euiIcon euiIcon--medium euiIcon-isLoading euiAccordion__icon euiAccordion__icon-isOpen"
                             focusable="false"
-                            height={16}
                             role="img"
                             style={null}
-                            viewBox="0 0 16 16"
-                            width={16}
-                            xmlns="http://www.w3.org/2000/svg"
-                          />
-                        </EuiIconEmpty>
-                      </EuiIcon>
-                    </span>
-                    <span
-                      className="euiIEFlexWrapFix"
-                    >
-                      <EuiTitle
-                        size="xxxs"
+                          >
+                            <svg
+                              aria-hidden={true}
+                              className="euiIcon euiIcon--medium euiIcon-isLoading euiAccordion__icon euiAccordion__icon-isOpen"
+                              focusable="false"
+                              height={16}
+                              role="img"
+                              style={null}
+                              viewBox="0 0 16 16"
+                              width={16}
+                              xmlns="http://www.w3.org/2000/svg"
+                            />
+                          </EuiIconEmpty>
+                        </EuiIcon>
+                      </span>
+                      <span
+                        className="euiIEFlexWrapFix"
                       >
-                        <span
-                          className="euiTitle euiTitle--xxxsmall"
+                        <EuiTitle
+                          size="xxxs"
                         >
-                          Selected Metrics
-                        </span>
-                      </EuiTitle>
-                    </span>
-                  </button>
-                </div>
-                <div
-                  aria-labelledby="random_html_id"
-                  className="euiAccordion__childWrapper"
-                  id="selectedMetricsSelector"
-                  role="region"
-                  tabIndex={-1}
-                >
-                  <EuiResizeObserver
-                    onResize={[Function]}
+                          <span
+                            className="euiTitle euiTitle--xxxsmall"
+                          >
+                            Selected Metrics
+                          </span>
+                        </EuiTitle>
+                      </span>
+                    </button>
+                  </div>
+                  <div
+                    aria-labelledby="random_html_id"
+                    className="euiAccordion__childWrapper"
+                    id="Selected MetricsSelector"
+                    role="region"
+                    tabIndex={-1}
                   >
-                    <div>
-                      <div
-                        className=""
-                      >
-                        <ul
-                          className="metricsList"
-                        />
+                    <EuiResizeObserver
+                      onResize={[Function]}
+                    >
+                      <div>
+                        <div
+                          className=""
+                        >
+                          <ul
+                            className="metricsList"
+                          />
+                        </div>
                       </div>
-                    </div>
-                  </EuiResizeObserver>
+                    </EuiResizeObserver>
+                  </div>
                 </div>
-              </div>
-            </EuiAccordion>
+              </EuiAccordion>
+            </MetricsAccordion>
             <EuiSpacer
               size="s"
             >
@@ -320,104 +333,110 @@ exports[`Side Bar Component renders Side Bar Component 1`] = `
                 className="euiSpacer euiSpacer--s"
               />
             </EuiSpacer>
-            <EuiAccordion
-              arrowDisplay="left"
-              buttonContent={
-                <EuiTitle
-                  size="xxxs"
-                >
-                  <span>
-                    Available Metrics
-                  </span>
-                </EuiTitle>
-              }
-              id="availableMetricsSelector"
-              initialIsOpen={true}
-              isLoading={false}
-              isLoadingMessage={false}
-              paddingSize="none"
+            <MetricsAccordion
+              handleClick={[Function]}
+              headerName="Available Metrics"
+              metricsList={Array []}
             >
-              <div
-                className="euiAccordion euiAccordion-isOpen"
+              <EuiAccordion
+                arrowDisplay="left"
+                buttonContent={
+                  <EuiTitle
+                    size="xxxs"
+                  >
+                    <span>
+                      Available Metrics
+                    </span>
+                  </EuiTitle>
+                }
+                id="Available MetricsSelector"
+                initialIsOpen={true}
+                isLoading={false}
+                isLoadingMessage={false}
+                paddingSize="none"
               >
                 <div
-                  className="euiAccordion__triggerWrapper"
+                  className="euiAccordion euiAccordion-isOpen"
                 >
-                  <button
-                    aria-controls="availableMetricsSelector"
-                    aria-expanded={true}
-                    className="euiAccordion__button"
-                    id="random_html_id"
-                    onClick={[Function]}
-                    type="button"
+                  <div
+                    className="euiAccordion__triggerWrapper"
                   >
-                    <span
-                      className="euiAccordion__iconWrapper"
+                    <button
+                      aria-controls="Available MetricsSelector"
+                      aria-expanded={true}
+                      className="euiAccordion__button"
+                      id="random_html_id"
+                      onClick={[Function]}
+                      type="button"
                     >
-                      <EuiIcon
-                        className="euiAccordion__icon euiAccordion__icon-isOpen"
-                        size="m"
-                        type="arrowRight"
+                      <span
+                        className="euiAccordion__iconWrapper"
                       >
-                        <EuiIconEmpty
-                          aria-hidden={true}
-                          className="euiIcon euiIcon--medium euiIcon-isLoading euiAccordion__icon euiAccordion__icon-isOpen"
-                          focusable="false"
-                          role="img"
-                          style={null}
+                        <EuiIcon
+                          className="euiAccordion__icon euiAccordion__icon-isOpen"
+                          size="m"
+                          type="arrowRight"
                         >
-                          <svg
+                          <EuiIconEmpty
                             aria-hidden={true}
                             className="euiIcon euiIcon--medium euiIcon-isLoading euiAccordion__icon euiAccordion__icon-isOpen"
                             focusable="false"
-                            height={16}
                             role="img"
                             style={null}
-                            viewBox="0 0 16 16"
-                            width={16}
-                            xmlns="http://www.w3.org/2000/svg"
-                          />
-                        </EuiIconEmpty>
-                      </EuiIcon>
-                    </span>
-                    <span
-                      className="euiIEFlexWrapFix"
-                    >
-                      <EuiTitle
-                        size="xxxs"
+                          >
+                            <svg
+                              aria-hidden={true}
+                              className="euiIcon euiIcon--medium euiIcon-isLoading euiAccordion__icon euiAccordion__icon-isOpen"
+                              focusable="false"
+                              height={16}
+                              role="img"
+                              style={null}
+                              viewBox="0 0 16 16"
+                              width={16}
+                              xmlns="http://www.w3.org/2000/svg"
+                            />
+                          </EuiIconEmpty>
+                        </EuiIcon>
+                      </span>
+                      <span
+                        className="euiIEFlexWrapFix"
                       >
-                        <span
-                          className="euiTitle euiTitle--xxxsmall"
+                        <EuiTitle
+                          size="xxxs"
                         >
-                          Available Metrics
-                        </span>
-                      </EuiTitle>
-                    </span>
-                  </button>
-                </div>
-                <div
-                  aria-labelledby="random_html_id"
-                  className="euiAccordion__childWrapper"
-                  id="availableMetricsSelector"
-                  role="region"
-                  tabIndex={-1}
-                >
-                  <EuiResizeObserver
-                    onResize={[Function]}
+                          <span
+                            className="euiTitle euiTitle--xxxsmall"
+                          >
+                            Available Metrics
+                          </span>
+                        </EuiTitle>
+                      </span>
+                    </button>
+                  </div>
+                  <div
+                    aria-labelledby="random_html_id"
+                    className="euiAccordion__childWrapper"
+                    id="Available MetricsSelector"
+                    role="region"
+                    tabIndex={-1}
                   >
-                    <div>
-                      <div
-                        className=""
-                      >
-                        <ul
-                          className="metricsList"
-                        />
+                    <EuiResizeObserver
+                      onResize={[Function]}
+                    >
+                      <div>
+                        <div
+                          className=""
+                        >
+                          <ul
+                            className="metricsList"
+                          />
+                        </div>
                       </div>
-                    </div>
-                  </EuiResizeObserver>
+                    </EuiResizeObserver>
+                  </div>
                 </div>
-              </div>
-            </EuiAccordion>
+              </EuiAccordion>
+            </MetricsAccordion>
           </section>
         </PseudoLocaleWrapper>
       </IntlProvider>
diff --git a/dashboards-observability/public/components/metrics/sidebar/__tests__/searchbar.test.tsx b/dashboards-observability/public/components/metrics/sidebar/__tests__/searchbar.test.tsx
index de824be1a..cc84dc0eb 100644
--- a/dashboards-observability/public/components/metrics/sidebar/__tests__/searchbar.test.tsx
+++ b/dashboards-observability/public/components/metrics/sidebar/__tests__/searchbar.test.tsx
@@ -8,17 +8,22 @@ import Adapter from 'enzyme-adapter-react-16';
 import React from 'react';
 import { waitFor } from '@testing-library/react';
 import { SearchBar } from '../search_bar';
-import { sampleAllAvailableMetrics } from '../../../../../test/metrics_contants';
+import { Provider } from 'react-redux';
+import { applyMiddleware, createStore } from 'redux';
+import thunk from 'redux-thunk';
+import rootReducer from '../../../../framework/redux/reducers';
 
 describe('Search Bar Component', () => {
   configure({ adapter: new Adapter() });
+  const store = createStore(rootReducer, applyMiddleware(thunk));
 
   it('Search Side Bar Component with no available metrics', async () => {
-    const allAvailableMetrics: any = [];
-    const handleAddMetric = jest.fn();
+    const setSearch = jest.fn();
 
     const wrapper = mount(
-      <SearchBar allAvailableMetrics={allAvailableMetrics} handleAddMetric={handleAddMetric} />
+      <Provider store={store}>
+        <SearchBar setSearch={setSearch} />
+      </Provider>
     );
 
     wrapper.update();
@@ -29,11 +34,12 @@ describe('Search Bar Component', () => {
   });
 
   it('Search Side Bar Component with available metrics', async () => {
-    const allAvailableMetrics = sampleAllAvailableMetrics;
-    const handleAddMetric = jest.fn();
+    const setSearch = jest.fn();
 
     const wrapper = mount(
-      <SearchBar allAvailableMetrics={allAvailableMetrics} handleAddMetric={handleAddMetric} />
+      <Provider store={store}>
+        <SearchBar setSearch={setSearch} />
+      </Provider>
     );
 
     wrapper.update();
diff --git a/dashboards-observability/public/components/metrics/sidebar/__tests__/sidebar.test.tsx b/dashboards-observability/public/components/metrics/sidebar/__tests__/sidebar.test.tsx
index 1cf39ca1b..747201fa7 100644
--- a/dashboards-observability/public/components/metrics/sidebar/__tests__/sidebar.test.tsx
+++ b/dashboards-observability/public/components/metrics/sidebar/__tests__/sidebar.test.tsx
@@ -24,10 +24,11 @@ describe('Side Bar Component', () => {
 
     const http = httpClientMock;
     const pplService = new PPLService(httpClientMock);
+    const search = false;
 
     const wrapper = mount(
       <Provider store={store}>
-        <Sidebar http={http} pplService={pplService} />
+        <Sidebar http={http} pplService={pplService} search={search} />
       </Provider>
     );
 
diff --git a/dashboards-observability/public/components/metrics/top_menu/__tests__/__snapshots__/top_menu.test.tsx.snap b/dashboards-observability/public/components/metrics/top_menu/__tests__/__snapshots__/top_menu.test.tsx.snap
index 274f4b2f0..edf4f4490 100644
--- a/dashboards-observability/public/components/metrics/top_menu/__tests__/__snapshots__/top_menu.test.tsx.snap
+++ b/dashboards-observability/public/components/metrics/top_menu/__tests__/__snapshots__/top_menu.test.tsx.snap
@@ -84,12 +84,15 @@ exports[`Metrics Top Menu Component renders Top Menu Component when disabled in
                   <div
                     className="euiFlexItem"
                   >
-                    <SearchBar
-                      allAvailableMetrics={Array []}
-                      handleAddMetric={[Function]}
-                    >
+                    <SearchBar>
                       <div>
                         <EuiSearchBar
+                          box={
+                            Object {
+                              "incremental": true,
+                              "placeholder": "Search for metrics",
+                            }
+                          }
                           defaultQuery=""
                           onChange={[Function]}
                         >
@@ -109,24 +112,24 @@ exports[`Metrics Top Menu Component renders Top Menu Component when disabled in
                                   className="euiFlexItem euiSearchBar__searchHolder"
                                 >
                                   <EuiSearchBox
-                                    incremental={false}
+                                    incremental={true}
                                     isInvalid={false}
                                     onSearch={[Function]}
-                                    placeholder="Search..."
+                                    placeholder="Search for metrics"
                                     query=""
                                   >
                                     <EuiFieldSearch
-                                      aria-label="This is a search bar. After typing your query, hit enter to filter the results lower in the page."
+                                      aria-label="This is a search bar. As you type, the results lower in the page will automatically filter."
                                       compressed={false}
                                       defaultValue=""
                                       fullWidth={true}
-                                      incremental={false}
+                                      incremental={true}
                                       inputRef={[Function]}
                                       isClearable={true}
                                       isInvalid={false}
                                       isLoading={false}
                                       onSearch={[Function]}
-                                      placeholder="Search..."
+                                      placeholder="Search for metrics"
                                     >
                                       <EuiFormControlLayout
                                         compressed={false}
@@ -144,11 +147,11 @@ exports[`Metrics Top Menu Component renders Top Menu Component when disabled in
                                               isInvalid={false}
                                             >
                                               <input
-                                                aria-label="This is a search bar. After typing your query, hit enter to filter the results lower in the page."
+                                                aria-label="This is a search bar. As you type, the results lower in the page will automatically filter."
                                                 className="euiFieldSearch euiFieldSearch--fullWidth"
                                                 defaultValue=""
                                                 onKeyUp={[Function]}
-                                                placeholder="Search..."
+                                                placeholder="Search for metrics"
                                                 type="search"
                                               />
                                             </EuiValidatableControl>
@@ -211,18 +214,6 @@ exports[`Metrics Top Menu Component renders Top Menu Component when disabled in
                             </div>
                           </EuiFlexGroup>
                         </EuiSearchBar>
-                        <EuiGlobalToastList
-                          dismissToast={[Function]}
-                          side="right"
-                          toastLifeTimeMs={6000}
-                          toasts={Array []}
-                        >
-                          <div
-                            aria-live="polite"
-                            className="euiGlobalToastList euiGlobalToastList--right"
-                            role="region"
-                          />
-                        </EuiGlobalToastList>
                       </div>
                     </SearchBar>
                   </div>
@@ -1405,12 +1396,15 @@ exports[`Metrics Top Menu Component renders Top Menu Component when disabled wit
                   <div
                     className="euiFlexItem"
                   >
-                    <SearchBar
-                      allAvailableMetrics={Array []}
-                      handleAddMetric={[Function]}
-                    >
+                    <SearchBar>
                       <div>
                         <EuiSearchBar
+                          box={
+                            Object {
+                              "incremental": true,
+                              "placeholder": "Search for metrics",
+                            }
+                          }
                           defaultQuery=""
                           onChange={[Function]}
                         >
@@ -1430,24 +1424,24 @@ exports[`Metrics Top Menu Component renders Top Menu Component when disabled wit
                                   className="euiFlexItem euiSearchBar__searchHolder"
                                 >
                                   <EuiSearchBox
-                                    incremental={false}
+                                    incremental={true}
                                     isInvalid={false}
                                     onSearch={[Function]}
-                                    placeholder="Search..."
+                                    placeholder="Search for metrics"
                                     query=""
                                   >
                                     <EuiFieldSearch
-                                      aria-label="This is a search bar. After typing your query, hit enter to filter the results lower in the page."
+                                      aria-label="This is a search bar. As you type, the results lower in the page will automatically filter."
                                       compressed={false}
                                       defaultValue=""
                                       fullWidth={true}
-                                      incremental={false}
+                                      incremental={true}
                                       inputRef={[Function]}
                                       isClearable={true}
                                       isInvalid={false}
                                       isLoading={false}
                                       onSearch={[Function]}
-                                      placeholder="Search..."
+                                      placeholder="Search for metrics"
                                     >
                                       <EuiFormControlLayout
                                         compressed={false}
@@ -1465,11 +1459,11 @@ exports[`Metrics Top Menu Component renders Top Menu Component when disabled wit
                                               isInvalid={false}
                                             >
                                               <input
-                                                aria-label="This is a search bar. After typing your query, hit enter to filter the results lower in the page."
+                                                aria-label="This is a search bar. As you type, the results lower in the page will automatically filter."
                                                 className="euiFieldSearch euiFieldSearch--fullWidth"
                                                 defaultValue=""
                                                 onKeyUp={[Function]}
-                                                placeholder="Search..."
+                                                placeholder="Search for metrics"
                                                 type="search"
                                               />
                                             </EuiValidatableControl>
@@ -1532,18 +1526,6 @@ exports[`Metrics Top Menu Component renders Top Menu Component when disabled wit
                             </div>
                           </EuiFlexGroup>
                         </EuiSearchBar>
-                        <EuiGlobalToastList
-                          dismissToast={[Function]}
-                          side="right"
-                          toastLifeTimeMs={6000}
-                          toasts={Array []}
-                        >
-                          <div
-                            aria-live="polite"
-                            className="euiGlobalToastList euiGlobalToastList--right"
-                            role="region"
-                          />
-                        </EuiGlobalToastList>
                       </div>
                     </SearchBar>
                   </div>
@@ -2676,12 +2658,15 @@ exports[`Metrics Top Menu Component renders Top Menu Component when enabled 1`]
                   <div
                     className="euiFlexItem"
                   >
-                    <SearchBar
-                      allAvailableMetrics={Array []}
-                      handleAddMetric={[Function]}
-                    >
+                    <SearchBar>
                       <div>
                         <EuiSearchBar
+                          box={
+                            Object {
+                              "incremental": true,
+                              "placeholder": "Search for metrics",
+                            }
+                          }
                           defaultQuery=""
                           onChange={[Function]}
                         >
@@ -2701,24 +2686,24 @@ exports[`Metrics Top Menu Component renders Top Menu Component when enabled 1`]
                                   className="euiFlexItem euiSearchBar__searchHolder"
                                 >
                                   <EuiSearchBox
-                                    incremental={false}
+                                    incremental={true}
                                     isInvalid={false}
                                     onSearch={[Function]}
-                                    placeholder="Search..."
+                                    placeholder="Search for metrics"
                                     query=""
                                   >
                                     <EuiFieldSearch
-                                      aria-label="This is a search bar. After typing your query, hit enter to filter the results lower in the page."
+                                      aria-label="This is a search bar. As you type, the results lower in the page will automatically filter."
                                       compressed={false}
                                       defaultValue=""
                                       fullWidth={true}
-                                      incremental={false}
+                                      incremental={true}
                                       inputRef={[Function]}
                                       isClearable={true}
                                       isInvalid={false}
                                       isLoading={false}
                                       onSearch={[Function]}
-                                      placeholder="Search..."
+                                      placeholder="Search for metrics"
                                     >
                                       <EuiFormControlLayout
                                         compressed={false}
@@ -2736,11 +2721,11 @@ exports[`Metrics Top Menu Component renders Top Menu Component when enabled 1`]
                                               isInvalid={false}
                                             >
                                               <input
-                                                aria-label="This is a search bar. After typing your query, hit enter to filter the results lower in the page."
+                                                aria-label="This is a search bar. As you type, the results lower in the page will automatically filter."
                                                 className="euiFieldSearch euiFieldSearch--fullWidth"
                                                 defaultValue=""
                                                 onKeyUp={[Function]}
-                                                placeholder="Search..."
+                                                placeholder="Search for metrics"
                                                 type="search"
                                               />
                                             </EuiValidatableControl>
@@ -2799,18 +2784,6 @@ exports[`Metrics Top Menu Component renders Top Menu Component when enabled 1`]
                             </div>
                           </EuiFlexGroup>
                         </EuiSearchBar>
-                        <EuiGlobalToastList
-                          dismissToast={[Function]}
-                          side="right"
-                          toastLifeTimeMs={6000}
-                          toasts={Array []}
-                        >
-                          <div
-                            aria-live="polite"
-                            className="euiGlobalToastList euiGlobalToastList--right"
-                            role="region"
-                          />
-                        </EuiGlobalToastList>
                       </div>
                     </SearchBar>
                   </div>