diff --git a/public/components/metrics/sidebar/__tests__/__snapshots__/searchbar.test.tsx.snap b/public/components/metrics/sidebar/__tests__/__snapshots__/searchbar.test.tsx.snap
index c4fcb663bf..9232c58180 100644
--- a/public/components/metrics/sidebar/__tests__/__snapshots__/searchbar.test.tsx.snap
+++ b/public/components/metrics/sidebar/__tests__/__snapshots__/searchbar.test.tsx.snap
@@ -15,7 +15,9 @@ exports[`Search Bar Component Search Side Bar Component with available metrics 1
   <Component
     setSearch={[MockFunction]}
   >
-    <div>
+    <div
+      className="metrics-search-bar-input"
+    >
       <EuiSearchBar
         box={
           Object {
@@ -164,7 +166,9 @@ exports[`Search Bar Component Search Side Bar Component with no available metric
   <Component
     setSearch={[MockFunction]}
   >
-    <div>
+    <div
+      className="metrics-search-bar-input"
+    >
       <EuiSearchBar
         box={
           Object {
diff --git a/public/components/metrics/sidebar/search_bar.tsx b/public/components/metrics/sidebar/search_bar.tsx
index fc56564750..26c564b4df 100644
--- a/public/components/metrics/sidebar/search_bar.tsx
+++ b/public/components/metrics/sidebar/search_bar.tsx
@@ -28,7 +28,7 @@ export const SearchBar = (props: ISearchBarProps) => {
   };
 
   return (
-    <div>
+    <div className="metrics-search-bar-input">
       <EuiSearchBar
         box={{
           placeholder: 'Search for metrics',
diff --git a/public/components/metrics/top_menu/__tests__/__snapshots__/top_menu.test.tsx.snap b/public/components/metrics/top_menu/__tests__/__snapshots__/top_menu.test.tsx.snap
index 1e637705f6..3e603d391b 100644
--- a/public/components/metrics/top_menu/__tests__/__snapshots__/top_menu.test.tsx.snap
+++ b/public/components/metrics/top_menu/__tests__/__snapshots__/top_menu.test.tsx.snap
@@ -66,394 +66,102 @@ exports[`Metrics Top Menu Component renders Top Menu Component when disabled in
     spanValue={1}
     startTime="now-1d"
   >
-    <EuiPageHeader>
-      <header
-        className="euiPageHeader euiPageHeader--responsive euiPageHeader--center"
+    <EuiFlexGroup
+      gutterSize="s"
+    >
+      <div
+        className="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--directionRow euiFlexGroup--responsive"
       >
-        <EuiPageHeaderSection>
-          <div
-            className="euiPageHeaderSection"
-          >
-            <EuiFlexGroup
-              className="search-bar-top-menu"
-            >
-              <div
-                className="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive search-bar-top-menu"
-              >
-                <EuiFlexItem>
-                  <div
-                    className="euiFlexItem"
-                  >
-                    <Component>
-                      <div>
-                        <EuiSearchBar
-                          box={
-                            Object {
-                              "incremental": true,
-                              "placeholder": "Search for metrics",
-                            }
-                          }
-                          defaultQuery=""
-                          onChange={[Function]}
-                        >
-                          <EuiFlexGroup
-                            alignItems="center"
-                            gutterSize="m"
-                            wrap={true}
-                          >
-                            <div
-                              className="euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive euiFlexGroup--wrap"
-                            >
-                              <EuiFlexItem
-                                className="euiSearchBar__searchHolder"
-                                grow={true}
-                              >
-                                <div
-                                  className="euiFlexItem euiSearchBar__searchHolder"
-                                >
-                                  <EuiSearchBox
-                                    incremental={true}
-                                    isInvalid={false}
-                                    onSearch={[Function]}
-                                    placeholder="Search for metrics"
-                                    query=""
-                                  >
-                                    <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}
-                                      incremental={true}
-                                      inputRef={[Function]}
-                                      isClearable={true}
-                                      isInvalid={false}
-                                      isLoading={false}
-                                      onSearch={[Function]}
-                                      placeholder="Search for metrics"
-                                    >
-                                      <EuiFormControlLayout
-                                        compressed={false}
-                                        fullWidth={true}
-                                        icon="search"
-                                        isLoading={false}
-                                      >
-                                        <div
-                                          className="euiFormControlLayout euiFormControlLayout--fullWidth"
-                                        >
-                                          <div
-                                            className="euiFormControlLayout__childrenWrapper"
-                                          >
-                                            <EuiValidatableControl
-                                              isInvalid={false}
-                                            >
-                                              <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"
-                                              >
-                                                <EuiFormControlLayoutCustomIcon
-                                                  size="m"
-                                                  type="search"
-                                                >
-                                                  <span
-                                                    className="euiFormControlLayoutCustomIcon"
-                                                  >
-                                                    <EuiIcon
-                                                      aria-hidden="true"
-                                                      className="euiFormControlLayoutCustomIcon__icon"
-                                                      size="m"
-                                                      type="search"
-                                                    >
-                                                      <EuiIconSearch
-                                                        aria-hidden={true}
-                                                        className="euiIcon euiIcon--medium euiFormControlLayoutCustomIcon__icon"
-                                                        focusable="false"
-                                                        role="img"
-                                                        style={null}
-                                                      >
-                                                        <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>
-                                      </EuiFormControlLayout>
-                                    </EuiFieldSearch>
-                                  </EuiSearchBox>
-                                </div>
-                              </EuiFlexItem>
-                            </div>
-                          </EuiFlexGroup>
-                        </EuiSearchBar>
-                      </div>
-                    </Component>
-                  </div>
-                </EuiFlexItem>
-              </div>
-            </EuiFlexGroup>
-          </div>
-        </EuiPageHeaderSection>
-        <EuiPageHeaderSection>
+        <EuiFlexItem
+          grow={10}
+        >
           <div
-            className="euiPageHeaderSection"
+            className="euiFlexItem euiFlexItem--flexGrow10"
           >
-            <EuiFlexGroup
-              gutterSize="s"
-            >
+            <Component>
               <div
-                className="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--directionRow euiFlexGroup--responsive"
+                className="metrics-search-bar-input"
               >
-                <EuiFlexItem
-                  grow={false}
+                <EuiSearchBar
+                  box={
+                    Object {
+                      "incremental": true,
+                      "placeholder": "Search for metrics",
+                    }
+                  }
+                  defaultQuery=""
+                  onChange={[Function]}
                 >
-                  <div
-                    className="euiFlexItem euiFlexItem--flexGrowZero"
+                  <EuiFlexGroup
+                    alignItems="center"
+                    gutterSize="m"
+                    wrap={true}
                   >
                     <div
-                      className="resolutionSelect"
+                      className="euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive euiFlexGroup--wrap"
                     >
-                      <EuiFieldText
-                        append={
-                          <EuiSelect
-                            aria-label="resolutionSelect"
-                            id="select_123"
-                            onChange={[Function]}
-                            options={
-                              Array [
-                                Object {
-                                  "text": "seconds",
-                                  "value": "s",
-                                },
-                                Object {
-                                  "text": "minutes",
-                                  "value": "m",
-                                },
-                                Object {
-                                  "text": "hours",
-                                  "value": "h",
-                                },
-                                Object {
-                                  "text": "days",
-                                  "value": "d",
-                                },
-                                Object {
-                                  "text": "years",
-                                  "value": "y",
-                                },
-                              ]
-                            }
-                            value="h"
-                          />
-                        }
-                        aria-label="resolutionField"
-                        className="resolutionSelectText"
-                        disabled={true}
-                        isInvalid={false}
-                        onChange={[Function]}
-                        prepend="Span Interval"
-                        value={1}
+                      <EuiFlexItem
+                        className="euiSearchBar__searchHolder"
+                        grow={true}
                       >
-                        <EuiFormControlLayout
-                          append={
-                            <EuiSelect
-                              aria-label="resolutionSelect"
-                              id="select_123"
-                              onChange={[Function]}
-                              options={
-                                Array [
-                                  Object {
-                                    "text": "seconds",
-                                    "value": "s",
-                                  },
-                                  Object {
-                                    "text": "minutes",
-                                    "value": "m",
-                                  },
-                                  Object {
-                                    "text": "hours",
-                                    "value": "h",
-                                  },
-                                  Object {
-                                    "text": "days",
-                                    "value": "d",
-                                  },
-                                  Object {
-                                    "text": "years",
-                                    "value": "y",
-                                  },
-                                ]
-                              }
-                              value="h"
-                            />
-                          }
-                          fullWidth={false}
-                          prepend="Span Interval"
+                        <div
+                          className="euiFlexItem euiSearchBar__searchHolder"
                         >
-                          <div
-                            className="euiFormControlLayout euiFormControlLayout--group"
+                          <EuiSearchBox
+                            incremental={true}
+                            isInvalid={false}
+                            onSearch={[Function]}
+                            placeholder="Search for metrics"
+                            query=""
                           >
-                            <EuiFormLabel
-                              className="euiFormControlLayout__prepend"
-                            >
-                              <label
-                                className="euiFormLabel euiFormControlLayout__prepend"
-                              >
-                                Span Interval
-                              </label>
-                            </EuiFormLabel>
-                            <div
-                              className="euiFormControlLayout__childrenWrapper"
-                            >
-                              <EuiValidatableControl
-                                isInvalid={false}
-                              >
-                                <input
-                                  aria-label="resolutionField"
-                                  className="euiFieldText resolutionSelectText euiFieldText--inGroup"
-                                  disabled={true}
-                                  onChange={[Function]}
-                                  type="text"
-                                  value={1}
-                                />
-                              </EuiValidatableControl>
-                              <EuiFormControlLayoutIcons />
-                            </div>
-                            <EuiSelect
-                              aria-label="resolutionSelect"
-                              className="euiFormControlLayout__append"
-                              id="select_123"
-                              key="0/.0"
-                              onChange={[Function]}
-                              options={
-                                Array [
-                                  Object {
-                                    "text": "seconds",
-                                    "value": "s",
-                                  },
-                                  Object {
-                                    "text": "minutes",
-                                    "value": "m",
-                                  },
-                                  Object {
-                                    "text": "hours",
-                                    "value": "h",
-                                  },
-                                  Object {
-                                    "text": "days",
-                                    "value": "d",
-                                  },
-                                  Object {
-                                    "text": "years",
-                                    "value": "y",
-                                  },
-                                ]
-                              }
-                              value="h"
+                            <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}
+                              incremental={true}
+                              inputRef={[Function]}
+                              isClearable={true}
+                              isInvalid={false}
+                              isLoading={false}
+                              onSearch={[Function]}
+                              placeholder="Search for metrics"
                             >
                               <EuiFormControlLayout
                                 compressed={false}
-                                fullWidth={false}
-                                icon={
-                                  Object {
-                                    "side": "right",
-                                    "type": "arrowDown",
-                                  }
-                                }
-                                inputId="select_123"
+                                fullWidth={true}
+                                icon="search"
                                 isLoading={false}
                               >
                                 <div
-                                  className="euiFormControlLayout"
+                                  className="euiFormControlLayout euiFormControlLayout--fullWidth"
                                 >
                                   <div
                                     className="euiFormControlLayout__childrenWrapper"
                                   >
-                                    <EuiValidatableControl>
-                                      <select
-                                        aria-label="resolutionSelect"
-                                        className="euiSelect euiFormControlLayout__append"
-                                        id="select_123"
-                                        onChange={[Function]}
-                                        onMouseUp={[Function]}
-                                        value="h"
-                                      >
-                                        <option
-                                          key="0"
-                                          value="s"
-                                        >
-                                          seconds
-                                        </option>
-                                        <option
-                                          key="1"
-                                          value="m"
-                                        >
-                                          minutes
-                                        </option>
-                                        <option
-                                          key="2"
-                                          value="h"
-                                        >
-                                          hours
-                                        </option>
-                                        <option
-                                          key="3"
-                                          value="d"
-                                        >
-                                          days
-                                        </option>
-                                        <option
-                                          key="4"
-                                          value="y"
-                                        >
-                                          years
-                                        </option>
-                                      </select>
+                                    <EuiValidatableControl
+                                      isInvalid={false}
+                                    >
+                                      <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={
-                                        Object {
-                                          "side": "right",
-                                          "type": "arrowDown",
-                                        }
-                                      }
+                                      icon="search"
                                       isLoading={false}
                                     >
                                       <div
-                                        className="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
+                                        className="euiFormControlLayoutIcons"
                                       >
                                         <EuiFormControlLayoutCustomIcon
                                           size="m"
-                                          type="arrowDown"
+                                          type="search"
                                         >
                                           <span
                                             className="euiFormControlLayoutCustomIcon"
@@ -462,9 +170,9 @@ exports[`Metrics Top Menu Component renders Top Menu Component when disabled in
                                               aria-hidden="true"
                                               className="euiFormControlLayoutCustomIcon__icon"
                                               size="m"
-                                              type="arrowDown"
+                                              type="search"
                                             >
-                                              <EuiIconArrowDown
+                                              <EuiIconSearch
                                                 aria-hidden={true}
                                                 className="euiIcon euiIcon--medium euiFormControlLayoutCustomIcon__icon"
                                                 focusable="false"
@@ -483,11 +191,10 @@ exports[`Metrics Top Menu Component renders Top Menu Component when disabled in
                                                   xmlns="http://www.w3.org/2000/svg"
                                                 >
                                                   <path
-                                                    d="M13.069 5.157L8.384 9.768a.546.546 0 01-.768 0L2.93 5.158a.552.552 0 00-.771 0 .53.53 0 000 .759l4.684 4.61c.641.631 1.672.63 2.312 0l4.684-4.61a.53.53 0 000-.76.552.552 0 00-.771 0z"
-                                                    fillRule="non-zero"
+                                                    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>
-                                              </EuiIconArrowDown>
+                                              </EuiIconSearch>
                                             </EuiIcon>
                                           </span>
                                         </EuiFormControlLayoutCustomIcon>
@@ -496,635 +203,261 @@ exports[`Metrics Top Menu Component renders Top Menu Component when disabled in
                                   </div>
                                 </div>
                               </EuiFormControlLayout>
-                            </EuiSelect>
-                          </div>
-                        </EuiFormControlLayout>
-                      </EuiFieldText>
+                            </EuiFieldSearch>
+                          </EuiSearchBox>
+                        </div>
+                      </EuiFlexItem>
                     </div>
-                  </div>
-                </EuiFlexItem>
-                <EuiFlexItem
-                  grow={false}
-                >
-                  <div
-                    className="euiFlexItem euiFlexItem--flexGrowZero"
-                  >
-                    <EuiSuperDatePicker
-                      commonlyUsedRanges={
+                  </EuiFlexGroup>
+                </EuiSearchBar>
+              </div>
+            </Component>
+          </div>
+        </EuiFlexItem>
+        <EuiFlexItem
+          grow={false}
+        >
+          <div
+            className="euiFlexItem euiFlexItem--flexGrowZero"
+          >
+            <div
+              className="resolutionSelect"
+            >
+              <EuiFieldText
+                append={
+                  <EuiSelect
+                    aria-label="resolutionSelect"
+                    className="resolutionSelectOption"
+                    id="select_123"
+                    onChange={[Function]}
+                    options={
+                      Array [
+                        Object {
+                          "text": "seconds",
+                          "value": "s",
+                        },
+                        Object {
+                          "text": "minutes",
+                          "value": "m",
+                        },
+                        Object {
+                          "text": "hours",
+                          "value": "h",
+                        },
+                        Object {
+                          "text": "days",
+                          "value": "d",
+                        },
+                        Object {
+                          "text": "years",
+                          "value": "y",
+                        },
+                      ]
+                    }
+                    value="h"
+                  />
+                }
+                aria-label="resolutionField"
+                className="resolutionSelectText"
+                disabled={true}
+                isInvalid={false}
+                onChange={[Function]}
+                prepend="Span Interval"
+                value={1}
+              >
+                <EuiFormControlLayout
+                  append={
+                    <EuiSelect
+                      aria-label="resolutionSelect"
+                      className="resolutionSelectOption"
+                      id="select_123"
+                      onChange={[Function]}
+                      options={
                         Array [
                           Object {
-                            "end": "now/d",
-                            "label": "Today",
-                            "start": "now/d",
+                            "text": "seconds",
+                            "value": "s",
+                          },
+                          Object {
+                            "text": "minutes",
+                            "value": "m",
+                          },
+                          Object {
+                            "text": "hours",
+                            "value": "h",
                           },
                           Object {
-                            "end": "now/w",
-                            "label": "This week",
-                            "start": "now/w",
+                            "text": "days",
+                            "value": "d",
                           },
                           Object {
-                            "end": "now/M",
-                            "label": "This month",
-                            "start": "now/M",
+                            "text": "years",
+                            "value": "y",
                           },
+                        ]
+                      }
+                      value="h"
+                    />
+                  }
+                  fullWidth={false}
+                  prepend="Span Interval"
+                >
+                  <div
+                    className="euiFormControlLayout euiFormControlLayout--group"
+                  >
+                    <EuiFormLabel
+                      className="euiFormControlLayout__prepend"
+                    >
+                      <label
+                        className="euiFormLabel euiFormControlLayout__prepend"
+                      >
+                        Span Interval
+                      </label>
+                    </EuiFormLabel>
+                    <div
+                      className="euiFormControlLayout__childrenWrapper"
+                    >
+                      <EuiValidatableControl
+                        isInvalid={false}
+                      >
+                        <input
+                          aria-label="resolutionField"
+                          className="euiFieldText resolutionSelectText euiFieldText--inGroup"
+                          disabled={true}
+                          onChange={[Function]}
+                          type="text"
+                          value={1}
+                        />
+                      </EuiValidatableControl>
+                      <EuiFormControlLayoutIcons />
+                    </div>
+                    <EuiSelect
+                      aria-label="resolutionSelect"
+                      className="euiFormControlLayout__append resolutionSelectOption"
+                      id="select_123"
+                      key="0/.0"
+                      onChange={[Function]}
+                      options={
+                        Array [
                           Object {
-                            "end": "now/y",
-                            "label": "This year",
-                            "start": "now/y",
+                            "text": "seconds",
+                            "value": "s",
                           },
                           Object {
-                            "end": "now-1d/d",
-                            "label": "Yesterday",
-                            "start": "now-1d/d",
+                            "text": "minutes",
+                            "value": "m",
                           },
                           Object {
-                            "end": "now",
-                            "label": "Week to date",
-                            "start": "now/w",
+                            "text": "hours",
+                            "value": "h",
                           },
                           Object {
-                            "end": "now",
-                            "label": "Month to date",
-                            "start": "now/M",
+                            "text": "days",
+                            "value": "d",
                           },
                           Object {
-                            "end": "now",
-                            "label": "Year to date",
-                            "start": "now/y",
+                            "text": "years",
+                            "value": "y",
                           },
                         ]
                       }
-                      dateFormat=""
-                      end="now"
-                      isAutoRefreshOnly={false}
-                      isDisabled={true}
-                      isPaused={true}
-                      onTimeChange={[MockFunction]}
-                      recentlyUsedRanges={Array []}
-                      refreshInterval={0}
-                      showUpdateButton={true}
-                      start="now-1d"
-                      timeFormat="HH:mm"
+                      value="h"
                     >
-                      <EuiFlexGroup
-                        className="euiSuperDatePicker__flexWrapper"
-                        gutterSize="s"
-                        responsive={false}
+                      <EuiFormControlLayout
+                        compressed={false}
+                        fullWidth={false}
+                        icon={
+                          Object {
+                            "side": "right",
+                            "type": "arrowDown",
+                          }
+                        }
+                        inputId="select_123"
+                        isLoading={false}
                       >
                         <div
-                          className="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--directionRow euiSuperDatePicker__flexWrapper"
+                          className="euiFormControlLayout"
                         >
-                          <EuiFlexItem>
-                            <div
-                              className="euiFlexItem"
-                            >
-                              <EuiFormControlLayout
-                                className="euiSuperDatePicker"
-                                isDisabled={true}
-                                prepend={
-                                  <EuiQuickSelectPopover
-                                    applyTime={[Function]}
-                                    commonlyUsedRanges={
-                                      Array [
-                                        Object {
-                                          "end": "now/d",
-                                          "label": "Today",
-                                          "start": "now/d",
-                                        },
-                                        Object {
-                                          "end": "now/w",
-                                          "label": "This week",
-                                          "start": "now/w",
-                                        },
-                                        Object {
-                                          "end": "now/M",
-                                          "label": "This month",
-                                          "start": "now/M",
-                                        },
-                                        Object {
-                                          "end": "now/y",
-                                          "label": "This year",
-                                          "start": "now/y",
-                                        },
-                                        Object {
-                                          "end": "now-1d/d",
-                                          "label": "Yesterday",
-                                          "start": "now-1d/d",
-                                        },
-                                        Object {
-                                          "end": "now",
-                                          "label": "Week to date",
-                                          "start": "now/w",
-                                        },
-                                        Object {
-                                          "end": "now",
-                                          "label": "Month to date",
-                                          "start": "now/M",
-                                        },
-                                        Object {
-                                          "end": "now",
-                                          "label": "Year to date",
-                                          "start": "now/y",
-                                        },
-                                      ]
-                                    }
-                                    dateFormat=""
-                                    end="now"
-                                    isAutoRefreshOnly={false}
-                                    isDisabled={true}
-                                    isPaused={true}
-                                    recentlyUsedRanges={Array []}
-                                    refreshInterval={0}
-                                    start="now-1d"
-                                  />
-                                }
-                              >
-                                <div
-                                  className="euiFormControlLayout euiFormControlLayout--group euiFormControlLayout-isDisabled euiSuperDatePicker"
-                                >
-                                  <EuiQuickSelectPopover
-                                    applyTime={[Function]}
-                                    className="euiFormControlLayout__prepend"
-                                    commonlyUsedRanges={
-                                      Array [
-                                        Object {
-                                          "end": "now/d",
-                                          "label": "Today",
-                                          "start": "now/d",
-                                        },
-                                        Object {
-                                          "end": "now/w",
-                                          "label": "This week",
-                                          "start": "now/w",
-                                        },
-                                        Object {
-                                          "end": "now/M",
-                                          "label": "This month",
-                                          "start": "now/M",
-                                        },
-                                        Object {
-                                          "end": "now/y",
-                                          "label": "This year",
-                                          "start": "now/y",
-                                        },
-                                        Object {
-                                          "end": "now-1d/d",
-                                          "label": "Yesterday",
-                                          "start": "now-1d/d",
-                                        },
-                                        Object {
-                                          "end": "now",
-                                          "label": "Week to date",
-                                          "start": "now/w",
-                                        },
-                                        Object {
-                                          "end": "now",
-                                          "label": "Month to date",
-                                          "start": "now/M",
-                                        },
-                                        Object {
-                                          "end": "now",
-                                          "label": "Year to date",
-                                          "start": "now/y",
-                                        },
-                                      ]
-                                    }
-                                    dateFormat=""
-                                    end="now"
-                                    isAutoRefreshOnly={false}
-                                    isDisabled={true}
-                                    isPaused={true}
-                                    key="0/.0"
-                                    recentlyUsedRanges={Array []}
-                                    refreshInterval={0}
-                                    start="now-1d"
-                                  >
-                                    <EuiPopover
-                                      anchorClassName="euiQuickSelectPopover__anchor"
-                                      anchorPosition="downLeft"
-                                      button={
-                                        <EuiButtonEmpty
-                                          aria-label="Date quick select"
-                                          className="euiFormControlLayout__prepend"
-                                          data-test-subj="superDatePickerToggleQuickMenuButton"
-                                          iconSide="right"
-                                          iconType="arrowDown"
-                                          isDisabled={true}
-                                          onClick={[Function]}
-                                          size="xs"
-                                          textProps={
-                                            Object {
-                                              "className": "euiQuickSelectPopover__buttonText",
-                                            }
-                                          }
-                                        >
-                                          <EuiIcon
-                                            type="calendar"
-                                          />
-                                        </EuiButtonEmpty>
-                                      }
-                                      closePopover={[Function]}
-                                      display="inlineBlock"
-                                      hasArrow={true}
-                                      isOpen={false}
-                                      ownFocus={true}
-                                      panelPaddingSize="m"
-                                    >
-                                      <div
-                                        className="euiPopover euiPopover--anchorDownLeft"
-                                      >
-                                        <div
-                                          className="euiPopover__anchor euiQuickSelectPopover__anchor"
-                                        >
-                                          <EuiButtonEmpty
-                                            aria-label="Date quick select"
-                                            className="euiFormControlLayout__prepend"
-                                            data-test-subj="superDatePickerToggleQuickMenuButton"
-                                            iconSide="right"
-                                            iconType="arrowDown"
-                                            isDisabled={true}
-                                            onClick={[Function]}
-                                            size="xs"
-                                            textProps={
-                                              Object {
-                                                "className": "euiQuickSelectPopover__buttonText",
-                                              }
-                                            }
-                                          >
-                                            <button
-                                              aria-label="Date quick select"
-                                              className="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--xSmall euiButtonEmpty-isDisabled euiFormControlLayout__prepend"
-                                              data-test-subj="superDatePickerToggleQuickMenuButton"
-                                              disabled={true}
-                                              onClick={[Function]}
-                                              type="button"
-                                            >
-                                              <EuiButtonContent
-                                                className="euiButtonEmpty__content"
-                                                iconSide="right"
-                                                iconSize="s"
-                                                iconType="arrowDown"
-                                                textProps={
-                                                  Object {
-                                                    "className": "euiButtonEmpty__text euiQuickSelectPopover__buttonText",
-                                                  }
-                                                }
-                                              >
-                                                <span
-                                                  className="euiButtonContent euiButtonContent--iconRight euiButtonEmpty__content"
-                                                >
-                                                  <EuiIcon
-                                                    className="euiButtonContent__icon"
-                                                    color="inherit"
-                                                    size="s"
-                                                    type="arrowDown"
-                                                  >
-                                                    <EuiIconArrowDown
-                                                      aria-hidden={true}
-                                                      className="euiIcon euiIcon--small euiIcon--inherit euiButtonContent__icon"
-                                                      focusable="false"
-                                                      role="img"
-                                                      style={null}
-                                                    >
-                                                      <svg
-                                                        aria-hidden={true}
-                                                        className="euiIcon euiIcon--small euiIcon--inherit euiButtonContent__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="M13.069 5.157L8.384 9.768a.546.546 0 01-.768 0L2.93 5.158a.552.552 0 00-.771 0 .53.53 0 000 .759l4.684 4.61c.641.631 1.672.63 2.312 0l4.684-4.61a.53.53 0 000-.76.552.552 0 00-.771 0z"
-                                                          fillRule="non-zero"
-                                                        />
-                                                      </svg>
-                                                    </EuiIconArrowDown>
-                                                  </EuiIcon>
-                                                  <span
-                                                    className="euiButtonEmpty__text euiQuickSelectPopover__buttonText"
-                                                  >
-                                                    <EuiIcon
-                                                      type="calendar"
-                                                    >
-                                                      <EuiIconCalendar
-                                                        aria-hidden={true}
-                                                        className="euiIcon euiIcon--medium"
-                                                        focusable="false"
-                                                        role="img"
-                                                        style={null}
-                                                      >
-                                                        <svg
-                                                          aria-hidden={true}
-                                                          className="euiIcon euiIcon--medium"
-                                                          focusable="false"
-                                                          height={16}
-                                                          role="img"
-                                                          style={null}
-                                                          viewBox="0 0 16 16"
-                                                          width={16}
-                                                          xmlns="http://www.w3.org/2000/svg"
-                                                        >
-                                                          <path
-                                                            d="M14 4v-.994C14 2.45 13.55 2 12.994 2H11v1h-1V2H6v1H5V2H3.006C2.45 2 2 2.45 2 3.006v9.988C2 13.55 2.45 14 3.006 14h9.988C13.55 14 14 13.55 14 12.994V5H2V4h12zm-3-3h1.994C14.102 1 15 1.897 15 3.006v9.988A2.005 2.005 0 0112.994 15H3.006A2.005 2.005 0 011 12.994V3.006C1 1.898 1.897 1 3.006 1H5V0h1v1h4V0h1v1zM4 7h2v1H4V7zm3 0h2v1H7V7zm3 0h2v1h-2V7zM4 9h2v1H4V9zm3 0h2v1H7V9zm3 0h2v1h-2V9zm-6 2h2v1H4v-1zm3 0h2v1H7v-1zm3 0h2v1h-2v-1z"
-                                                            fillRule="evenodd"
-                                                          />
-                                                        </svg>
-                                                      </EuiIconCalendar>
-                                                    </EuiIcon>
-                                                  </span>
-                                                </span>
-                                              </EuiButtonContent>
-                                            </button>
-                                          </EuiButtonEmpty>
-                                        </div>
-                                      </div>
-                                    </EuiPopover>
-                                  </EuiQuickSelectPopover>
-                                  <div
-                                    className="euiFormControlLayout__childrenWrapper"
-                                  >
-                                    <EuiDatePickerRange
-                                      className="euiDatePickerRange--inGroup"
-                                      endDateControl={<div />}
-                                      iconType={false}
-                                      isCustom={true}
-                                      startDateControl={<div />}
-                                    >
-                                      <div
-                                        className="euiDatePickerRange euiDatePickerRange--inGroup"
-                                      >
-                                        <button
-                                          className="euiSuperDatePicker__prettyFormat euiSuperDatePicker__prettyFormat--disabled"
-                                          data-test-subj="superDatePickerShowDatesButton"
-                                          disabled={true}
-                                          onClick={[Function]}
-                                        >
-                                          Last 1 day
-                                          <span
-                                            className="euiSuperDatePicker__prettyFormatLink"
-                                          >
-                                            <EuiI18n
-                                              default="Show dates"
-                                              token="euiSuperDatePicker.showDatesButtonLabel"
-                                            >
-                                              Show dates
-                                            </EuiI18n>
-                                          </span>
-                                        </button>
-                                      </div>
-                                    </EuiDatePickerRange>
-                                    <EuiFormControlLayoutIcons />
-                                  </div>
-                                </div>
-                              </EuiFormControlLayout>
-                            </div>
-                          </EuiFlexItem>
-                          <EuiFlexItem
-                            grow={false}
+                          <div
+                            className="euiFormControlLayout__childrenWrapper"
                           >
-                            <div
-                              className="euiFlexItem euiFlexItem--flexGrowZero"
-                            >
-                              <EuiSuperUpdateButton
-                                data-test-subj="superDatePickerApplyTimeButton"
-                                isDisabled={true}
-                                isLoading={false}
-                                needsUpdate={false}
-                                onClick={[Function]}
-                                showTooltip={true}
+                            <EuiValidatableControl>
+                              <select
+                                aria-label="resolutionSelect"
+                                className="euiSelect euiFormControlLayout__append resolutionSelectOption"
+                                id="select_123"
+                                onChange={[Function]}
+                                onMouseUp={[Function]}
+                                value="h"
                               >
-                                <EuiToolTip
-                                  content={
-                                    <EuiI18n
-                                      default="Cannot update"
-                                      token="euiSuperUpdateButton.cannotUpdateTooltip"
-                                    />
-                                  }
-                                  delay="regular"
-                                  position="bottom"
+                                <option
+                                  key="0"
+                                  value="s"
                                 >
-                                  <span
-                                    className="euiToolTipAnchor"
-                                    onKeyUp={[Function]}
-                                    onMouseOut={[Function]}
-                                    onMouseOver={[Function]}
-                                  >
-                                    <EuiButton
-                                      className="euiSuperUpdateButton"
-                                      color="primary"
-                                      data-test-subj="superDatePickerApplyTimeButton"
-                                      fill={true}
-                                      iconType="refresh"
-                                      isDisabled={true}
-                                      isLoading={false}
-                                      onBlur={[Function]}
-                                      onClick={[Function]}
-                                      onFocus={[Function]}
-                                      textProps={
-                                        Object {
-                                          "className": "euiSuperUpdateButton__text",
-                                        }
-                                      }
-                                    >
-                                      <EuiButtonDisplay
-                                        baseClassName="euiButton"
-                                        className="euiSuperUpdateButton"
-                                        color="primary"
-                                        data-test-subj="superDatePickerApplyTimeButton"
-                                        disabled={true}
-                                        element="button"
-                                        fill={true}
-                                        iconType="refresh"
-                                        isDisabled={true}
-                                        isLoading={false}
-                                        onBlur={[Function]}
-                                        onClick={[Function]}
-                                        onFocus={[Function]}
-                                        textProps={
-                                          Object {
-                                            "className": "euiSuperUpdateButton__text",
-                                          }
-                                        }
-                                        type="button"
-                                      >
-                                        <button
-                                          className="euiButton euiButton--primary euiButton--fill euiButton-isDisabled euiSuperUpdateButton"
-                                          data-test-subj="superDatePickerApplyTimeButton"
-                                          disabled={true}
-                                          onBlur={[Function]}
-                                          onClick={[Function]}
-                                          onFocus={[Function]}
-                                          style={
-                                            Object {
-                                              "minWidth": undefined,
-                                            }
-                                          }
-                                          type="button"
-                                        >
-                                          <EuiButtonContent
-                                            className="euiButton__content"
-                                            iconSide="left"
-                                            iconType="refresh"
-                                            isLoading={false}
-                                            textProps={
-                                              Object {
-                                                "className": "euiButton__text euiSuperUpdateButton__text",
-                                              }
-                                            }
-                                          >
-                                            <span
-                                              className="euiButtonContent euiButton__content"
-                                            >
-                                              <EuiIcon
-                                                className="euiButtonContent__icon"
-                                                color="inherit"
-                                                size="m"
-                                                type="refresh"
-                                              >
-                                                <EuiIconRefresh
-                                                  aria-hidden={true}
-                                                  className="euiIcon euiIcon--medium euiIcon--inherit euiButtonContent__icon"
-                                                  focusable="false"
-                                                  role="img"
-                                                  style={null}
-                                                >
-                                                  <svg
-                                                    aria-hidden={true}
-                                                    className="euiIcon euiIcon--medium euiIcon--inherit euiButtonContent__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.228 2.942a.5.5 0 11-.538.842A5 5 0 1013 8a.5.5 0 111 0 6 6 0 11-2.772-5.058zM14 1.5v3A1.5 1.5 0 0112.5 6h-3a.5.5 0 010-1h3a.5.5 0 00.5-.5v-3a.5.5 0 111 0z"
-                                                    />
-                                                  </svg>
-                                                </EuiIconRefresh>
-                                              </EuiIcon>
-                                              <span
-                                                className="euiButton__text euiSuperUpdateButton__text"
-                                              >
-                                                <EuiI18n
-                                                  default="Refresh"
-                                                  token="euiSuperUpdateButton.refreshButtonLabel"
-                                                >
-                                                  Refresh
-                                                </EuiI18n>
-                                              </span>
-                                            </span>
-                                          </EuiButtonContent>
-                                        </button>
-                                      </EuiButtonDisplay>
-                                    </EuiButton>
-                                  </span>
-                                </EuiToolTip>
-                              </EuiSuperUpdateButton>
-                            </div>
-                          </EuiFlexItem>
-                        </div>
-                      </EuiFlexGroup>
-                    </EuiSuperDatePicker>
-                  </div>
-                </EuiFlexItem>
-                <EuiFlexItem
-                  grow={false}
-                >
-                  <div
-                    className="euiFlexItem euiFlexItem--flexGrowZero"
-                  >
-                    <EuiPopover
-                      anchorPosition="downCenter"
-                      button={
-                        <EuiButton
-                          data-test-subj="metrics__saveManagementPopover"
-                          iconSide="right"
-                          iconType="arrowDown"
-                          isDisabled={true}
-                          onClick={[Function]}
-                        >
-                          Save
-                        </EuiButton>
-                      }
-                      closePopover={[Function]}
-                      display="inlineBlock"
-                      hasArrow={true}
-                      isOpen={false}
-                      ownFocus={true}
-                      panelPaddingSize="m"
-                    >
-                      <div
-                        className="euiPopover euiPopover--anchorDownCenter"
-                      >
-                        <div
-                          className="euiPopover__anchor"
-                        >
-                          <EuiButton
-                            data-test-subj="metrics__saveManagementPopover"
-                            iconSide="right"
-                            iconType="arrowDown"
-                            isDisabled={true}
-                            onClick={[Function]}
-                          >
-                            <EuiButtonDisplay
-                              baseClassName="euiButton"
-                              data-test-subj="metrics__saveManagementPopover"
-                              disabled={true}
-                              element="button"
-                              iconSide="right"
-                              iconType="arrowDown"
-                              isDisabled={true}
-                              onClick={[Function]}
-                              type="button"
-                            >
-                              <button
-                                className="euiButton euiButton--primary euiButton-isDisabled"
-                                data-test-subj="metrics__saveManagementPopover"
-                                disabled={true}
-                                onClick={[Function]}
-                                style={
-                                  Object {
-                                    "minWidth": undefined,
-                                  }
+                                  seconds
+                                </option>
+                                <option
+                                  key="1"
+                                  value="m"
+                                >
+                                  minutes
+                                </option>
+                                <option
+                                  key="2"
+                                  value="h"
+                                >
+                                  hours
+                                </option>
+                                <option
+                                  key="3"
+                                  value="d"
+                                >
+                                  days
+                                </option>
+                                <option
+                                  key="4"
+                                  value="y"
+                                >
+                                  years
+                                </option>
+                              </select>
+                            </EuiValidatableControl>
+                            <EuiFormControlLayoutIcons
+                              compressed={false}
+                              icon={
+                                Object {
+                                  "side": "right",
+                                  "type": "arrowDown",
                                 }
-                                type="button"
+                              }
+                              isLoading={false}
+                            >
+                              <div
+                                className="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
                               >
-                                <EuiButtonContent
-                                  className="euiButton__content"
-                                  iconSide="right"
-                                  iconType="arrowDown"
-                                  textProps={
-                                    Object {
-                                      "className": "euiButton__text",
-                                    }
-                                  }
+                                <EuiFormControlLayoutCustomIcon
+                                  size="m"
+                                  type="arrowDown"
                                 >
                                   <span
-                                    className="euiButtonContent euiButtonContent--iconRight euiButton__content"
+                                    className="euiFormControlLayoutCustomIcon"
                                   >
                                     <EuiIcon
-                                      className="euiButtonContent__icon"
-                                      color="inherit"
+                                      aria-hidden="true"
+                                      className="euiFormControlLayoutCustomIcon__icon"
                                       size="m"
                                       type="arrowDown"
                                     >
                                       <EuiIconArrowDown
                                         aria-hidden={true}
-                                        className="euiIcon euiIcon--medium euiIcon--inherit euiButtonContent__icon"
+                                        className="euiIcon euiIcon--medium euiFormControlLayoutCustomIcon__icon"
                                         focusable="false"
                                         role="img"
                                         style={null}
                                       >
                                         <svg
                                           aria-hidden={true}
-                                          className="euiIcon euiIcon--medium euiIcon--inherit euiButtonContent__icon"
+                                          className="euiIcon euiIcon--medium euiFormControlLayoutCustomIcon__icon"
                                           focusable="false"
                                           height={16}
                                           role="img"
@@ -1140,27 +473,681 @@ exports[`Metrics Top Menu Component renders Top Menu Component when disabled in
                                         </svg>
                                       </EuiIconArrowDown>
                                     </EuiIcon>
-                                    <span
-                                      className="euiButton__text"
-                                    >
-                                      Save
-                                    </span>
                                   </span>
-                                </EuiButtonContent>
-                              </button>
-                            </EuiButtonDisplay>
-                          </EuiButton>
+                                </EuiFormControlLayoutCustomIcon>
+                              </div>
+                            </EuiFormControlLayoutIcons>
+                          </div>
                         </div>
-                      </div>
-                    </EuiPopover>
+                      </EuiFormControlLayout>
+                    </EuiSelect>
                   </div>
-                </EuiFlexItem>
+                </EuiFormControlLayout>
+              </EuiFieldText>
+            </div>
+          </div>
+        </EuiFlexItem>
+        <EuiFlexItem
+          className="metrics-search-bar-datepicker"
+        >
+          <div
+            className="euiFlexItem metrics-search-bar-datepicker"
+          >
+            <EuiSuperDatePicker
+              commonlyUsedRanges={
+                Array [
+                  Object {
+                    "end": "now/d",
+                    "label": "Today",
+                    "start": "now/d",
+                  },
+                  Object {
+                    "end": "now/w",
+                    "label": "This week",
+                    "start": "now/w",
+                  },
+                  Object {
+                    "end": "now/M",
+                    "label": "This month",
+                    "start": "now/M",
+                  },
+                  Object {
+                    "end": "now/y",
+                    "label": "This year",
+                    "start": "now/y",
+                  },
+                  Object {
+                    "end": "now-1d/d",
+                    "label": "Yesterday",
+                    "start": "now-1d/d",
+                  },
+                  Object {
+                    "end": "now",
+                    "label": "Week to date",
+                    "start": "now/w",
+                  },
+                  Object {
+                    "end": "now",
+                    "label": "Month to date",
+                    "start": "now/M",
+                  },
+                  Object {
+                    "end": "now",
+                    "label": "Year to date",
+                    "start": "now/y",
+                  },
+                ]
+              }
+              dateFormat=""
+              end="now"
+              isAutoRefreshOnly={false}
+              isDisabled={true}
+              isPaused={true}
+              onTimeChange={[MockFunction]}
+              recentlyUsedRanges={Array []}
+              refreshInterval={0}
+              showUpdateButton={true}
+              start="now-1d"
+              timeFormat="HH:mm"
+            >
+              <EuiFlexGroup
+                className="euiSuperDatePicker__flexWrapper"
+                gutterSize="s"
+                responsive={false}
+              >
+                <div
+                  className="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--directionRow euiSuperDatePicker__flexWrapper"
+                >
+                  <EuiFlexItem>
+                    <div
+                      className="euiFlexItem"
+                    >
+                      <EuiFormControlLayout
+                        className="euiSuperDatePicker"
+                        isDisabled={true}
+                        prepend={
+                          <EuiQuickSelectPopover
+                            applyTime={[Function]}
+                            commonlyUsedRanges={
+                              Array [
+                                Object {
+                                  "end": "now/d",
+                                  "label": "Today",
+                                  "start": "now/d",
+                                },
+                                Object {
+                                  "end": "now/w",
+                                  "label": "This week",
+                                  "start": "now/w",
+                                },
+                                Object {
+                                  "end": "now/M",
+                                  "label": "This month",
+                                  "start": "now/M",
+                                },
+                                Object {
+                                  "end": "now/y",
+                                  "label": "This year",
+                                  "start": "now/y",
+                                },
+                                Object {
+                                  "end": "now-1d/d",
+                                  "label": "Yesterday",
+                                  "start": "now-1d/d",
+                                },
+                                Object {
+                                  "end": "now",
+                                  "label": "Week to date",
+                                  "start": "now/w",
+                                },
+                                Object {
+                                  "end": "now",
+                                  "label": "Month to date",
+                                  "start": "now/M",
+                                },
+                                Object {
+                                  "end": "now",
+                                  "label": "Year to date",
+                                  "start": "now/y",
+                                },
+                              ]
+                            }
+                            dateFormat=""
+                            end="now"
+                            isAutoRefreshOnly={false}
+                            isDisabled={true}
+                            isPaused={true}
+                            recentlyUsedRanges={Array []}
+                            refreshInterval={0}
+                            start="now-1d"
+                          />
+                        }
+                      >
+                        <div
+                          className="euiFormControlLayout euiFormControlLayout--group euiFormControlLayout-isDisabled euiSuperDatePicker"
+                        >
+                          <EuiQuickSelectPopover
+                            applyTime={[Function]}
+                            className="euiFormControlLayout__prepend"
+                            commonlyUsedRanges={
+                              Array [
+                                Object {
+                                  "end": "now/d",
+                                  "label": "Today",
+                                  "start": "now/d",
+                                },
+                                Object {
+                                  "end": "now/w",
+                                  "label": "This week",
+                                  "start": "now/w",
+                                },
+                                Object {
+                                  "end": "now/M",
+                                  "label": "This month",
+                                  "start": "now/M",
+                                },
+                                Object {
+                                  "end": "now/y",
+                                  "label": "This year",
+                                  "start": "now/y",
+                                },
+                                Object {
+                                  "end": "now-1d/d",
+                                  "label": "Yesterday",
+                                  "start": "now-1d/d",
+                                },
+                                Object {
+                                  "end": "now",
+                                  "label": "Week to date",
+                                  "start": "now/w",
+                                },
+                                Object {
+                                  "end": "now",
+                                  "label": "Month to date",
+                                  "start": "now/M",
+                                },
+                                Object {
+                                  "end": "now",
+                                  "label": "Year to date",
+                                  "start": "now/y",
+                                },
+                              ]
+                            }
+                            dateFormat=""
+                            end="now"
+                            isAutoRefreshOnly={false}
+                            isDisabled={true}
+                            isPaused={true}
+                            key="0/.0"
+                            recentlyUsedRanges={Array []}
+                            refreshInterval={0}
+                            start="now-1d"
+                          >
+                            <EuiPopover
+                              anchorClassName="euiQuickSelectPopover__anchor"
+                              anchorPosition="downLeft"
+                              button={
+                                <EuiButtonEmpty
+                                  aria-label="Date quick select"
+                                  className="euiFormControlLayout__prepend"
+                                  data-test-subj="superDatePickerToggleQuickMenuButton"
+                                  iconSide="right"
+                                  iconType="arrowDown"
+                                  isDisabled={true}
+                                  onClick={[Function]}
+                                  size="xs"
+                                  textProps={
+                                    Object {
+                                      "className": "euiQuickSelectPopover__buttonText",
+                                    }
+                                  }
+                                >
+                                  <EuiIcon
+                                    type="calendar"
+                                  />
+                                </EuiButtonEmpty>
+                              }
+                              closePopover={[Function]}
+                              display="inlineBlock"
+                              hasArrow={true}
+                              isOpen={false}
+                              ownFocus={true}
+                              panelPaddingSize="m"
+                            >
+                              <div
+                                className="euiPopover euiPopover--anchorDownLeft"
+                              >
+                                <div
+                                  className="euiPopover__anchor euiQuickSelectPopover__anchor"
+                                >
+                                  <EuiButtonEmpty
+                                    aria-label="Date quick select"
+                                    className="euiFormControlLayout__prepend"
+                                    data-test-subj="superDatePickerToggleQuickMenuButton"
+                                    iconSide="right"
+                                    iconType="arrowDown"
+                                    isDisabled={true}
+                                    onClick={[Function]}
+                                    size="xs"
+                                    textProps={
+                                      Object {
+                                        "className": "euiQuickSelectPopover__buttonText",
+                                      }
+                                    }
+                                  >
+                                    <button
+                                      aria-label="Date quick select"
+                                      className="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--xSmall euiButtonEmpty-isDisabled euiFormControlLayout__prepend"
+                                      data-test-subj="superDatePickerToggleQuickMenuButton"
+                                      disabled={true}
+                                      onClick={[Function]}
+                                      type="button"
+                                    >
+                                      <EuiButtonContent
+                                        className="euiButtonEmpty__content"
+                                        iconSide="right"
+                                        iconSize="s"
+                                        iconType="arrowDown"
+                                        textProps={
+                                          Object {
+                                            "className": "euiButtonEmpty__text euiQuickSelectPopover__buttonText",
+                                          }
+                                        }
+                                      >
+                                        <span
+                                          className="euiButtonContent euiButtonContent--iconRight euiButtonEmpty__content"
+                                        >
+                                          <EuiIcon
+                                            className="euiButtonContent__icon"
+                                            color="inherit"
+                                            size="s"
+                                            type="arrowDown"
+                                          >
+                                            <EuiIconArrowDown
+                                              aria-hidden={true}
+                                              className="euiIcon euiIcon--small euiIcon--inherit euiButtonContent__icon"
+                                              focusable="false"
+                                              role="img"
+                                              style={null}
+                                            >
+                                              <svg
+                                                aria-hidden={true}
+                                                className="euiIcon euiIcon--small euiIcon--inherit euiButtonContent__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="M13.069 5.157L8.384 9.768a.546.546 0 01-.768 0L2.93 5.158a.552.552 0 00-.771 0 .53.53 0 000 .759l4.684 4.61c.641.631 1.672.63 2.312 0l4.684-4.61a.53.53 0 000-.76.552.552 0 00-.771 0z"
+                                                  fillRule="non-zero"
+                                                />
+                                              </svg>
+                                            </EuiIconArrowDown>
+                                          </EuiIcon>
+                                          <span
+                                            className="euiButtonEmpty__text euiQuickSelectPopover__buttonText"
+                                          >
+                                            <EuiIcon
+                                              type="calendar"
+                                            >
+                                              <EuiIconCalendar
+                                                aria-hidden={true}
+                                                className="euiIcon euiIcon--medium"
+                                                focusable="false"
+                                                role="img"
+                                                style={null}
+                                              >
+                                                <svg
+                                                  aria-hidden={true}
+                                                  className="euiIcon euiIcon--medium"
+                                                  focusable="false"
+                                                  height={16}
+                                                  role="img"
+                                                  style={null}
+                                                  viewBox="0 0 16 16"
+                                                  width={16}
+                                                  xmlns="http://www.w3.org/2000/svg"
+                                                >
+                                                  <path
+                                                    d="M14 4v-.994C14 2.45 13.55 2 12.994 2H11v1h-1V2H6v1H5V2H3.006C2.45 2 2 2.45 2 3.006v9.988C2 13.55 2.45 14 3.006 14h9.988C13.55 14 14 13.55 14 12.994V5H2V4h12zm-3-3h1.994C14.102 1 15 1.897 15 3.006v9.988A2.005 2.005 0 0112.994 15H3.006A2.005 2.005 0 011 12.994V3.006C1 1.898 1.897 1 3.006 1H5V0h1v1h4V0h1v1zM4 7h2v1H4V7zm3 0h2v1H7V7zm3 0h2v1h-2V7zM4 9h2v1H4V9zm3 0h2v1H7V9zm3 0h2v1h-2V9zm-6 2h2v1H4v-1zm3 0h2v1H7v-1zm3 0h2v1h-2v-1z"
+                                                    fillRule="evenodd"
+                                                  />
+                                                </svg>
+                                              </EuiIconCalendar>
+                                            </EuiIcon>
+                                          </span>
+                                        </span>
+                                      </EuiButtonContent>
+                                    </button>
+                                  </EuiButtonEmpty>
+                                </div>
+                              </div>
+                            </EuiPopover>
+                          </EuiQuickSelectPopover>
+                          <div
+                            className="euiFormControlLayout__childrenWrapper"
+                          >
+                            <EuiDatePickerRange
+                              className="euiDatePickerRange--inGroup"
+                              endDateControl={<div />}
+                              iconType={false}
+                              isCustom={true}
+                              startDateControl={<div />}
+                            >
+                              <div
+                                className="euiDatePickerRange euiDatePickerRange--inGroup"
+                              >
+                                <button
+                                  className="euiSuperDatePicker__prettyFormat euiSuperDatePicker__prettyFormat--disabled"
+                                  data-test-subj="superDatePickerShowDatesButton"
+                                  disabled={true}
+                                  onClick={[Function]}
+                                >
+                                  Last 1 day
+                                  <span
+                                    className="euiSuperDatePicker__prettyFormatLink"
+                                  >
+                                    <EuiI18n
+                                      default="Show dates"
+                                      token="euiSuperDatePicker.showDatesButtonLabel"
+                                    >
+                                      Show dates
+                                    </EuiI18n>
+                                  </span>
+                                </button>
+                              </div>
+                            </EuiDatePickerRange>
+                            <EuiFormControlLayoutIcons />
+                          </div>
+                        </div>
+                      </EuiFormControlLayout>
+                    </div>
+                  </EuiFlexItem>
+                  <EuiFlexItem
+                    grow={false}
+                  >
+                    <div
+                      className="euiFlexItem euiFlexItem--flexGrowZero"
+                    >
+                      <EuiSuperUpdateButton
+                        data-test-subj="superDatePickerApplyTimeButton"
+                        isDisabled={true}
+                        isLoading={false}
+                        needsUpdate={false}
+                        onClick={[Function]}
+                        showTooltip={true}
+                      >
+                        <EuiToolTip
+                          content={
+                            <EuiI18n
+                              default="Cannot update"
+                              token="euiSuperUpdateButton.cannotUpdateTooltip"
+                            />
+                          }
+                          delay="regular"
+                          position="bottom"
+                        >
+                          <span
+                            className="euiToolTipAnchor"
+                            onKeyUp={[Function]}
+                            onMouseOut={[Function]}
+                            onMouseOver={[Function]}
+                          >
+                            <EuiButton
+                              className="euiSuperUpdateButton"
+                              color="primary"
+                              data-test-subj="superDatePickerApplyTimeButton"
+                              fill={true}
+                              iconType="refresh"
+                              isDisabled={true}
+                              isLoading={false}
+                              onBlur={[Function]}
+                              onClick={[Function]}
+                              onFocus={[Function]}
+                              textProps={
+                                Object {
+                                  "className": "euiSuperUpdateButton__text",
+                                }
+                              }
+                            >
+                              <EuiButtonDisplay
+                                baseClassName="euiButton"
+                                className="euiSuperUpdateButton"
+                                color="primary"
+                                data-test-subj="superDatePickerApplyTimeButton"
+                                disabled={true}
+                                element="button"
+                                fill={true}
+                                iconType="refresh"
+                                isDisabled={true}
+                                isLoading={false}
+                                onBlur={[Function]}
+                                onClick={[Function]}
+                                onFocus={[Function]}
+                                textProps={
+                                  Object {
+                                    "className": "euiSuperUpdateButton__text",
+                                  }
+                                }
+                                type="button"
+                              >
+                                <button
+                                  className="euiButton euiButton--primary euiButton--fill euiButton-isDisabled euiSuperUpdateButton"
+                                  data-test-subj="superDatePickerApplyTimeButton"
+                                  disabled={true}
+                                  onBlur={[Function]}
+                                  onClick={[Function]}
+                                  onFocus={[Function]}
+                                  style={
+                                    Object {
+                                      "minWidth": undefined,
+                                    }
+                                  }
+                                  type="button"
+                                >
+                                  <EuiButtonContent
+                                    className="euiButton__content"
+                                    iconSide="left"
+                                    iconType="refresh"
+                                    isLoading={false}
+                                    textProps={
+                                      Object {
+                                        "className": "euiButton__text euiSuperUpdateButton__text",
+                                      }
+                                    }
+                                  >
+                                    <span
+                                      className="euiButtonContent euiButton__content"
+                                    >
+                                      <EuiIcon
+                                        className="euiButtonContent__icon"
+                                        color="inherit"
+                                        size="m"
+                                        type="refresh"
+                                      >
+                                        <EuiIconRefresh
+                                          aria-hidden={true}
+                                          className="euiIcon euiIcon--medium euiIcon--inherit euiButtonContent__icon"
+                                          focusable="false"
+                                          role="img"
+                                          style={null}
+                                        >
+                                          <svg
+                                            aria-hidden={true}
+                                            className="euiIcon euiIcon--medium euiIcon--inherit euiButtonContent__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.228 2.942a.5.5 0 11-.538.842A5 5 0 1013 8a.5.5 0 111 0 6 6 0 11-2.772-5.058zM14 1.5v3A1.5 1.5 0 0112.5 6h-3a.5.5 0 010-1h3a.5.5 0 00.5-.5v-3a.5.5 0 111 0z"
+                                            />
+                                          </svg>
+                                        </EuiIconRefresh>
+                                      </EuiIcon>
+                                      <span
+                                        className="euiButton__text euiSuperUpdateButton__text"
+                                      >
+                                        <EuiI18n
+                                          default="Refresh"
+                                          token="euiSuperUpdateButton.refreshButtonLabel"
+                                        >
+                                          Refresh
+                                        </EuiI18n>
+                                      </span>
+                                    </span>
+                                  </EuiButtonContent>
+                                </button>
+                              </EuiButtonDisplay>
+                            </EuiButton>
+                          </span>
+                        </EuiToolTip>
+                      </EuiSuperUpdateButton>
+                    </div>
+                  </EuiFlexItem>
+                </div>
+              </EuiFlexGroup>
+            </EuiSuperDatePicker>
+          </div>
+        </EuiFlexItem>
+        <EuiFlexItem
+          grow={false}
+        >
+          <div
+            className="euiFlexItem euiFlexItem--flexGrowZero"
+          >
+            <EuiPopover
+              anchorPosition="downCenter"
+              button={
+                <EuiButton
+                  data-test-subj="metrics__saveManagementPopover"
+                  iconSide="right"
+                  iconType="arrowDown"
+                  isDisabled={true}
+                  onClick={[Function]}
+                >
+                  Save
+                </EuiButton>
+              }
+              closePopover={[Function]}
+              display="inlineBlock"
+              hasArrow={true}
+              isOpen={false}
+              ownFocus={true}
+              panelPaddingSize="m"
+            >
+              <div
+                className="euiPopover euiPopover--anchorDownCenter"
+              >
+                <div
+                  className="euiPopover__anchor"
+                >
+                  <EuiButton
+                    data-test-subj="metrics__saveManagementPopover"
+                    iconSide="right"
+                    iconType="arrowDown"
+                    isDisabled={true}
+                    onClick={[Function]}
+                  >
+                    <EuiButtonDisplay
+                      baseClassName="euiButton"
+                      data-test-subj="metrics__saveManagementPopover"
+                      disabled={true}
+                      element="button"
+                      iconSide="right"
+                      iconType="arrowDown"
+                      isDisabled={true}
+                      onClick={[Function]}
+                      type="button"
+                    >
+                      <button
+                        className="euiButton euiButton--primary euiButton-isDisabled"
+                        data-test-subj="metrics__saveManagementPopover"
+                        disabled={true}
+                        onClick={[Function]}
+                        style={
+                          Object {
+                            "minWidth": undefined,
+                          }
+                        }
+                        type="button"
+                      >
+                        <EuiButtonContent
+                          className="euiButton__content"
+                          iconSide="right"
+                          iconType="arrowDown"
+                          textProps={
+                            Object {
+                              "className": "euiButton__text",
+                            }
+                          }
+                        >
+                          <span
+                            className="euiButtonContent euiButtonContent--iconRight euiButton__content"
+                          >
+                            <EuiIcon
+                              className="euiButtonContent__icon"
+                              color="inherit"
+                              size="m"
+                              type="arrowDown"
+                            >
+                              <EuiIconArrowDown
+                                aria-hidden={true}
+                                className="euiIcon euiIcon--medium euiIcon--inherit euiButtonContent__icon"
+                                focusable="false"
+                                role="img"
+                                style={null}
+                              >
+                                <svg
+                                  aria-hidden={true}
+                                  className="euiIcon euiIcon--medium euiIcon--inherit euiButtonContent__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="M13.069 5.157L8.384 9.768a.546.546 0 01-.768 0L2.93 5.158a.552.552 0 00-.771 0 .53.53 0 000 .759l4.684 4.61c.641.631 1.672.63 2.312 0l4.684-4.61a.53.53 0 000-.76.552.552 0 00-.771 0z"
+                                    fillRule="non-zero"
+                                  />
+                                </svg>
+                              </EuiIconArrowDown>
+                            </EuiIcon>
+                            <span
+                              className="euiButton__text"
+                            >
+                              Save
+                            </span>
+                          </span>
+                        </EuiButtonContent>
+                      </button>
+                    </EuiButtonDisplay>
+                  </EuiButton>
+                </div>
               </div>
-            </EuiFlexGroup>
+            </EuiPopover>
           </div>
-        </EuiPageHeaderSection>
-      </header>
-    </EuiPageHeader>
+        </EuiFlexItem>
+      </div>
+    </EuiFlexGroup>
+    <EuiSpacer
+      size="m"
+    >
+      <div
+        className="euiSpacer euiSpacer--m"
+      />
+    </EuiSpacer>
     <EuiFlexGroup
       gutterSize="s"
       justifyContent="flexEnd"
@@ -1378,405 +1365,113 @@ exports[`Metrics Top Menu Component renders Top Menu Component when disabled wit
     spanValue={1}
     startTime="now-1d"
   >
-    <EuiPageHeader>
-      <header
-        className="euiPageHeader euiPageHeader--responsive euiPageHeader--center"
+    <EuiFlexGroup
+      gutterSize="s"
+    >
+      <div
+        className="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--directionRow euiFlexGroup--responsive"
       >
-        <EuiPageHeaderSection>
+        <EuiFlexItem
+          grow={10}
+        >
           <div
-            className="euiPageHeaderSection"
+            className="euiFlexItem euiFlexItem--flexGrow10"
           >
-            <EuiFlexGroup
-              className="search-bar-top-menu"
-            >
+            <Component>
               <div
-                className="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive search-bar-top-menu"
+                className="metrics-search-bar-input"
               >
-                <EuiFlexItem>
-                  <div
-                    className="euiFlexItem"
+                <EuiSearchBar
+                  box={
+                    Object {
+                      "incremental": true,
+                      "placeholder": "Search for metrics",
+                    }
+                  }
+                  defaultQuery=""
+                  onChange={[Function]}
+                >
+                  <EuiFlexGroup
+                    alignItems="center"
+                    gutterSize="m"
+                    wrap={true}
                   >
-                    <Component>
-                      <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"
+                    >
+                      <EuiFlexItem
+                        className="euiSearchBar__searchHolder"
+                        grow={true}
+                      >
+                        <div
+                          className="euiFlexItem euiSearchBar__searchHolder"
                         >
-                          <EuiFlexGroup
-                            alignItems="center"
-                            gutterSize="m"
-                            wrap={true}
+                          <EuiSearchBox
+                            incremental={true}
+                            isInvalid={false}
+                            onSearch={[Function]}
+                            placeholder="Search for metrics"
+                            query=""
                           >
-                            <div
-                              className="euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive euiFlexGroup--wrap"
+                            <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}
+                              incremental={true}
+                              inputRef={[Function]}
+                              isClearable={true}
+                              isInvalid={false}
+                              isLoading={false}
+                              onSearch={[Function]}
+                              placeholder="Search for metrics"
                             >
-                              <EuiFlexItem
-                                className="euiSearchBar__searchHolder"
-                                grow={true}
+                              <EuiFormControlLayout
+                                compressed={false}
+                                fullWidth={true}
+                                icon="search"
+                                isLoading={false}
                               >
                                 <div
-                                  className="euiFlexItem euiSearchBar__searchHolder"
+                                  className="euiFormControlLayout euiFormControlLayout--fullWidth"
                                 >
-                                  <EuiSearchBox
-                                    incremental={true}
-                                    isInvalid={false}
-                                    onSearch={[Function]}
-                                    placeholder="Search for metrics"
-                                    query=""
+                                  <div
+                                    className="euiFormControlLayout__childrenWrapper"
                                   >
-                                    <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}
-                                      incremental={true}
-                                      inputRef={[Function]}
-                                      isClearable={true}
+                                    <EuiValidatableControl
                                       isInvalid={false}
+                                    >
+                                      <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}
-                                      onSearch={[Function]}
-                                      placeholder="Search for metrics"
                                     >
-                                      <EuiFormControlLayout
-                                        compressed={false}
-                                        fullWidth={true}
-                                        icon="search"
-                                        isLoading={false}
+                                      <div
+                                        className="euiFormControlLayoutIcons"
                                       >
-                                        <div
-                                          className="euiFormControlLayout euiFormControlLayout--fullWidth"
+                                        <EuiFormControlLayoutCustomIcon
+                                          size="m"
+                                          type="search"
                                         >
-                                          <div
-                                            className="euiFormControlLayout__childrenWrapper"
+                                          <span
+                                            className="euiFormControlLayoutCustomIcon"
                                           >
-                                            <EuiValidatableControl
-                                              isInvalid={false}
+                                            <EuiIcon
+                                              aria-hidden="true"
+                                              className="euiFormControlLayoutCustomIcon__icon"
+                                              size="m"
+                                              type="search"
                                             >
-                                              <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"
-                                              >
-                                                <EuiFormControlLayoutCustomIcon
-                                                  size="m"
-                                                  type="search"
-                                                >
-                                                  <span
-                                                    className="euiFormControlLayoutCustomIcon"
-                                                  >
-                                                    <EuiIcon
-                                                      aria-hidden="true"
-                                                      className="euiFormControlLayoutCustomIcon__icon"
-                                                      size="m"
-                                                      type="search"
-                                                    >
-                                                      <EuiIconSearch
-                                                        aria-hidden={true}
-                                                        className="euiIcon euiIcon--medium euiFormControlLayoutCustomIcon__icon"
-                                                        focusable="false"
-                                                        role="img"
-                                                        style={null}
-                                                      >
-                                                        <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>
-                                      </EuiFormControlLayout>
-                                    </EuiFieldSearch>
-                                  </EuiSearchBox>
-                                </div>
-                              </EuiFlexItem>
-                            </div>
-                          </EuiFlexGroup>
-                        </EuiSearchBar>
-                      </div>
-                    </Component>
-                  </div>
-                </EuiFlexItem>
-              </div>
-            </EuiFlexGroup>
-          </div>
-        </EuiPageHeaderSection>
-        <EuiPageHeaderSection>
-          <div
-            className="euiPageHeaderSection"
-          >
-            <EuiFlexGroup
-              gutterSize="s"
-            >
-              <div
-                className="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--directionRow euiFlexGroup--responsive"
-              >
-                <EuiFlexItem
-                  grow={false}
-                >
-                  <div
-                    className="euiFlexItem euiFlexItem--flexGrowZero"
-                  >
-                    <div
-                      className="resolutionSelect"
-                    >
-                      <EuiFieldText
-                        append={
-                          <EuiSelect
-                            aria-label="resolutionSelect"
-                            id="select_123"
-                            onChange={[Function]}
-                            options={
-                              Array [
-                                Object {
-                                  "text": "seconds",
-                                  "value": "s",
-                                },
-                                Object {
-                                  "text": "minutes",
-                                  "value": "m",
-                                },
-                                Object {
-                                  "text": "hours",
-                                  "value": "h",
-                                },
-                                Object {
-                                  "text": "days",
-                                  "value": "d",
-                                },
-                                Object {
-                                  "text": "years",
-                                  "value": "y",
-                                },
-                              ]
-                            }
-                            value="h"
-                          />
-                        }
-                        aria-label="resolutionField"
-                        className="resolutionSelectText"
-                        disabled={true}
-                        isInvalid={false}
-                        onChange={[Function]}
-                        prepend="Span Interval"
-                        value={1}
-                      >
-                        <EuiFormControlLayout
-                          append={
-                            <EuiSelect
-                              aria-label="resolutionSelect"
-                              id="select_123"
-                              onChange={[Function]}
-                              options={
-                                Array [
-                                  Object {
-                                    "text": "seconds",
-                                    "value": "s",
-                                  },
-                                  Object {
-                                    "text": "minutes",
-                                    "value": "m",
-                                  },
-                                  Object {
-                                    "text": "hours",
-                                    "value": "h",
-                                  },
-                                  Object {
-                                    "text": "days",
-                                    "value": "d",
-                                  },
-                                  Object {
-                                    "text": "years",
-                                    "value": "y",
-                                  },
-                                ]
-                              }
-                              value="h"
-                            />
-                          }
-                          fullWidth={false}
-                          prepend="Span Interval"
-                        >
-                          <div
-                            className="euiFormControlLayout euiFormControlLayout--group"
-                          >
-                            <EuiFormLabel
-                              className="euiFormControlLayout__prepend"
-                            >
-                              <label
-                                className="euiFormLabel euiFormControlLayout__prepend"
-                              >
-                                Span Interval
-                              </label>
-                            </EuiFormLabel>
-                            <div
-                              className="euiFormControlLayout__childrenWrapper"
-                            >
-                              <EuiValidatableControl
-                                isInvalid={false}
-                              >
-                                <input
-                                  aria-label="resolutionField"
-                                  className="euiFieldText resolutionSelectText euiFieldText--inGroup"
-                                  disabled={true}
-                                  onChange={[Function]}
-                                  type="text"
-                                  value={1}
-                                />
-                              </EuiValidatableControl>
-                              <EuiFormControlLayoutIcons />
-                            </div>
-                            <EuiSelect
-                              aria-label="resolutionSelect"
-                              className="euiFormControlLayout__append"
-                              id="select_123"
-                              key="0/.0"
-                              onChange={[Function]}
-                              options={
-                                Array [
-                                  Object {
-                                    "text": "seconds",
-                                    "value": "s",
-                                  },
-                                  Object {
-                                    "text": "minutes",
-                                    "value": "m",
-                                  },
-                                  Object {
-                                    "text": "hours",
-                                    "value": "h",
-                                  },
-                                  Object {
-                                    "text": "days",
-                                    "value": "d",
-                                  },
-                                  Object {
-                                    "text": "years",
-                                    "value": "y",
-                                  },
-                                ]
-                              }
-                              value="h"
-                            >
-                              <EuiFormControlLayout
-                                compressed={false}
-                                fullWidth={false}
-                                icon={
-                                  Object {
-                                    "side": "right",
-                                    "type": "arrowDown",
-                                  }
-                                }
-                                inputId="select_123"
-                                isLoading={false}
-                              >
-                                <div
-                                  className="euiFormControlLayout"
-                                >
-                                  <div
-                                    className="euiFormControlLayout__childrenWrapper"
-                                  >
-                                    <EuiValidatableControl>
-                                      <select
-                                        aria-label="resolutionSelect"
-                                        className="euiSelect euiFormControlLayout__append"
-                                        id="select_123"
-                                        onChange={[Function]}
-                                        onMouseUp={[Function]}
-                                        value="h"
-                                      >
-                                        <option
-                                          key="0"
-                                          value="s"
-                                        >
-                                          seconds
-                                        </option>
-                                        <option
-                                          key="1"
-                                          value="m"
-                                        >
-                                          minutes
-                                        </option>
-                                        <option
-                                          key="2"
-                                          value="h"
-                                        >
-                                          hours
-                                        </option>
-                                        <option
-                                          key="3"
-                                          value="d"
-                                        >
-                                          days
-                                        </option>
-                                        <option
-                                          key="4"
-                                          value="y"
-                                        >
-                                          years
-                                        </option>
-                                      </select>
-                                    </EuiValidatableControl>
-                                    <EuiFormControlLayoutIcons
-                                      compressed={false}
-                                      icon={
-                                        Object {
-                                          "side": "right",
-                                          "type": "arrowDown",
-                                        }
-                                      }
-                                      isLoading={false}
-                                    >
-                                      <div
-                                        className="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
-                                      >
-                                        <EuiFormControlLayoutCustomIcon
-                                          size="m"
-                                          type="arrowDown"
-                                        >
-                                          <span
-                                            className="euiFormControlLayoutCustomIcon"
-                                          >
-                                            <EuiIcon
-                                              aria-hidden="true"
-                                              className="euiFormControlLayoutCustomIcon__icon"
-                                              size="m"
-                                              type="arrowDown"
-                                            >
-                                              <EuiIconArrowDown
+                                              <EuiIconSearch
                                                 aria-hidden={true}
                                                 className="euiIcon euiIcon--medium euiFormControlLayoutCustomIcon__icon"
                                                 focusable="false"
@@ -1795,11 +1490,10 @@ exports[`Metrics Top Menu Component renders Top Menu Component when disabled wit
                                                   xmlns="http://www.w3.org/2000/svg"
                                                 >
                                                   <path
-                                                    d="M13.069 5.157L8.384 9.768a.546.546 0 01-.768 0L2.93 5.158a.552.552 0 00-.771 0 .53.53 0 000 .759l4.684 4.61c.641.631 1.672.63 2.312 0l4.684-4.61a.53.53 0 000-.76.552.552 0 00-.771 0z"
-                                                    fillRule="non-zero"
+                                                    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>
-                                              </EuiIconArrowDown>
+                                              </EuiIconSearch>
                                             </EuiIcon>
                                           </span>
                                         </EuiFormControlLayoutCustomIcon>
@@ -1808,635 +1502,261 @@ exports[`Metrics Top Menu Component renders Top Menu Component when disabled wit
                                   </div>
                                 </div>
                               </EuiFormControlLayout>
-                            </EuiSelect>
-                          </div>
-                        </EuiFormControlLayout>
-                      </EuiFieldText>
+                            </EuiFieldSearch>
+                          </EuiSearchBox>
+                        </div>
+                      </EuiFlexItem>
                     </div>
-                  </div>
-                </EuiFlexItem>
-                <EuiFlexItem
-                  grow={false}
-                >
-                  <div
-                    className="euiFlexItem euiFlexItem--flexGrowZero"
-                  >
-                    <EuiSuperDatePicker
-                      commonlyUsedRanges={
+                  </EuiFlexGroup>
+                </EuiSearchBar>
+              </div>
+            </Component>
+          </div>
+        </EuiFlexItem>
+        <EuiFlexItem
+          grow={false}
+        >
+          <div
+            className="euiFlexItem euiFlexItem--flexGrowZero"
+          >
+            <div
+              className="resolutionSelect"
+            >
+              <EuiFieldText
+                append={
+                  <EuiSelect
+                    aria-label="resolutionSelect"
+                    className="resolutionSelectOption"
+                    id="select_123"
+                    onChange={[Function]}
+                    options={
+                      Array [
+                        Object {
+                          "text": "seconds",
+                          "value": "s",
+                        },
+                        Object {
+                          "text": "minutes",
+                          "value": "m",
+                        },
+                        Object {
+                          "text": "hours",
+                          "value": "h",
+                        },
+                        Object {
+                          "text": "days",
+                          "value": "d",
+                        },
+                        Object {
+                          "text": "years",
+                          "value": "y",
+                        },
+                      ]
+                    }
+                    value="h"
+                  />
+                }
+                aria-label="resolutionField"
+                className="resolutionSelectText"
+                disabled={true}
+                isInvalid={false}
+                onChange={[Function]}
+                prepend="Span Interval"
+                value={1}
+              >
+                <EuiFormControlLayout
+                  append={
+                    <EuiSelect
+                      aria-label="resolutionSelect"
+                      className="resolutionSelectOption"
+                      id="select_123"
+                      onChange={[Function]}
+                      options={
                         Array [
                           Object {
-                            "end": "now/d",
-                            "label": "Today",
-                            "start": "now/d",
+                            "text": "seconds",
+                            "value": "s",
+                          },
+                          Object {
+                            "text": "minutes",
+                            "value": "m",
+                          },
+                          Object {
+                            "text": "hours",
+                            "value": "h",
                           },
                           Object {
-                            "end": "now/w",
-                            "label": "This week",
-                            "start": "now/w",
+                            "text": "days",
+                            "value": "d",
                           },
                           Object {
-                            "end": "now/M",
-                            "label": "This month",
-                            "start": "now/M",
+                            "text": "years",
+                            "value": "y",
                           },
+                        ]
+                      }
+                      value="h"
+                    />
+                  }
+                  fullWidth={false}
+                  prepend="Span Interval"
+                >
+                  <div
+                    className="euiFormControlLayout euiFormControlLayout--group"
+                  >
+                    <EuiFormLabel
+                      className="euiFormControlLayout__prepend"
+                    >
+                      <label
+                        className="euiFormLabel euiFormControlLayout__prepend"
+                      >
+                        Span Interval
+                      </label>
+                    </EuiFormLabel>
+                    <div
+                      className="euiFormControlLayout__childrenWrapper"
+                    >
+                      <EuiValidatableControl
+                        isInvalid={false}
+                      >
+                        <input
+                          aria-label="resolutionField"
+                          className="euiFieldText resolutionSelectText euiFieldText--inGroup"
+                          disabled={true}
+                          onChange={[Function]}
+                          type="text"
+                          value={1}
+                        />
+                      </EuiValidatableControl>
+                      <EuiFormControlLayoutIcons />
+                    </div>
+                    <EuiSelect
+                      aria-label="resolutionSelect"
+                      className="euiFormControlLayout__append resolutionSelectOption"
+                      id="select_123"
+                      key="0/.0"
+                      onChange={[Function]}
+                      options={
+                        Array [
                           Object {
-                            "end": "now/y",
-                            "label": "This year",
-                            "start": "now/y",
+                            "text": "seconds",
+                            "value": "s",
                           },
                           Object {
-                            "end": "now-1d/d",
-                            "label": "Yesterday",
-                            "start": "now-1d/d",
+                            "text": "minutes",
+                            "value": "m",
                           },
                           Object {
-                            "end": "now",
-                            "label": "Week to date",
-                            "start": "now/w",
+                            "text": "hours",
+                            "value": "h",
                           },
                           Object {
-                            "end": "now",
-                            "label": "Month to date",
-                            "start": "now/M",
+                            "text": "days",
+                            "value": "d",
                           },
                           Object {
-                            "end": "now",
-                            "label": "Year to date",
-                            "start": "now/y",
+                            "text": "years",
+                            "value": "y",
                           },
                         ]
                       }
-                      dateFormat=""
-                      end="now"
-                      isAutoRefreshOnly={false}
-                      isDisabled={true}
-                      isPaused={true}
-                      onTimeChange={[MockFunction]}
-                      recentlyUsedRanges={Array []}
-                      refreshInterval={0}
-                      showUpdateButton={true}
-                      start="now-1d"
-                      timeFormat="HH:mm"
+                      value="h"
                     >
-                      <EuiFlexGroup
-                        className="euiSuperDatePicker__flexWrapper"
-                        gutterSize="s"
-                        responsive={false}
+                      <EuiFormControlLayout
+                        compressed={false}
+                        fullWidth={false}
+                        icon={
+                          Object {
+                            "side": "right",
+                            "type": "arrowDown",
+                          }
+                        }
+                        inputId="select_123"
+                        isLoading={false}
                       >
                         <div
-                          className="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--directionRow euiSuperDatePicker__flexWrapper"
+                          className="euiFormControlLayout"
                         >
-                          <EuiFlexItem>
-                            <div
-                              className="euiFlexItem"
-                            >
-                              <EuiFormControlLayout
-                                className="euiSuperDatePicker"
-                                isDisabled={true}
-                                prepend={
-                                  <EuiQuickSelectPopover
-                                    applyTime={[Function]}
-                                    commonlyUsedRanges={
-                                      Array [
-                                        Object {
-                                          "end": "now/d",
-                                          "label": "Today",
-                                          "start": "now/d",
-                                        },
-                                        Object {
-                                          "end": "now/w",
-                                          "label": "This week",
-                                          "start": "now/w",
-                                        },
-                                        Object {
-                                          "end": "now/M",
-                                          "label": "This month",
-                                          "start": "now/M",
-                                        },
-                                        Object {
-                                          "end": "now/y",
-                                          "label": "This year",
-                                          "start": "now/y",
-                                        },
-                                        Object {
-                                          "end": "now-1d/d",
-                                          "label": "Yesterday",
-                                          "start": "now-1d/d",
-                                        },
-                                        Object {
-                                          "end": "now",
-                                          "label": "Week to date",
-                                          "start": "now/w",
-                                        },
-                                        Object {
-                                          "end": "now",
-                                          "label": "Month to date",
-                                          "start": "now/M",
-                                        },
-                                        Object {
-                                          "end": "now",
-                                          "label": "Year to date",
-                                          "start": "now/y",
-                                        },
-                                      ]
-                                    }
-                                    dateFormat=""
-                                    end="now"
-                                    isAutoRefreshOnly={false}
-                                    isDisabled={true}
-                                    isPaused={true}
-                                    recentlyUsedRanges={Array []}
-                                    refreshInterval={0}
-                                    start="now-1d"
-                                  />
-                                }
-                              >
-                                <div
-                                  className="euiFormControlLayout euiFormControlLayout--group euiFormControlLayout-isDisabled euiSuperDatePicker"
-                                >
-                                  <EuiQuickSelectPopover
-                                    applyTime={[Function]}
-                                    className="euiFormControlLayout__prepend"
-                                    commonlyUsedRanges={
-                                      Array [
-                                        Object {
-                                          "end": "now/d",
-                                          "label": "Today",
-                                          "start": "now/d",
-                                        },
-                                        Object {
-                                          "end": "now/w",
-                                          "label": "This week",
-                                          "start": "now/w",
-                                        },
-                                        Object {
-                                          "end": "now/M",
-                                          "label": "This month",
-                                          "start": "now/M",
-                                        },
-                                        Object {
-                                          "end": "now/y",
-                                          "label": "This year",
-                                          "start": "now/y",
-                                        },
-                                        Object {
-                                          "end": "now-1d/d",
-                                          "label": "Yesterday",
-                                          "start": "now-1d/d",
-                                        },
-                                        Object {
-                                          "end": "now",
-                                          "label": "Week to date",
-                                          "start": "now/w",
-                                        },
-                                        Object {
-                                          "end": "now",
-                                          "label": "Month to date",
-                                          "start": "now/M",
-                                        },
-                                        Object {
-                                          "end": "now",
-                                          "label": "Year to date",
-                                          "start": "now/y",
-                                        },
-                                      ]
-                                    }
-                                    dateFormat=""
-                                    end="now"
-                                    isAutoRefreshOnly={false}
-                                    isDisabled={true}
-                                    isPaused={true}
-                                    key="0/.0"
-                                    recentlyUsedRanges={Array []}
-                                    refreshInterval={0}
-                                    start="now-1d"
-                                  >
-                                    <EuiPopover
-                                      anchorClassName="euiQuickSelectPopover__anchor"
-                                      anchorPosition="downLeft"
-                                      button={
-                                        <EuiButtonEmpty
-                                          aria-label="Date quick select"
-                                          className="euiFormControlLayout__prepend"
-                                          data-test-subj="superDatePickerToggleQuickMenuButton"
-                                          iconSide="right"
-                                          iconType="arrowDown"
-                                          isDisabled={true}
-                                          onClick={[Function]}
-                                          size="xs"
-                                          textProps={
-                                            Object {
-                                              "className": "euiQuickSelectPopover__buttonText",
-                                            }
-                                          }
-                                        >
-                                          <EuiIcon
-                                            type="calendar"
-                                          />
-                                        </EuiButtonEmpty>
-                                      }
-                                      closePopover={[Function]}
-                                      display="inlineBlock"
-                                      hasArrow={true}
-                                      isOpen={false}
-                                      ownFocus={true}
-                                      panelPaddingSize="m"
-                                    >
-                                      <div
-                                        className="euiPopover euiPopover--anchorDownLeft"
-                                      >
-                                        <div
-                                          className="euiPopover__anchor euiQuickSelectPopover__anchor"
-                                        >
-                                          <EuiButtonEmpty
-                                            aria-label="Date quick select"
-                                            className="euiFormControlLayout__prepend"
-                                            data-test-subj="superDatePickerToggleQuickMenuButton"
-                                            iconSide="right"
-                                            iconType="arrowDown"
-                                            isDisabled={true}
-                                            onClick={[Function]}
-                                            size="xs"
-                                            textProps={
-                                              Object {
-                                                "className": "euiQuickSelectPopover__buttonText",
-                                              }
-                                            }
-                                          >
-                                            <button
-                                              aria-label="Date quick select"
-                                              className="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--xSmall euiButtonEmpty-isDisabled euiFormControlLayout__prepend"
-                                              data-test-subj="superDatePickerToggleQuickMenuButton"
-                                              disabled={true}
-                                              onClick={[Function]}
-                                              type="button"
-                                            >
-                                              <EuiButtonContent
-                                                className="euiButtonEmpty__content"
-                                                iconSide="right"
-                                                iconSize="s"
-                                                iconType="arrowDown"
-                                                textProps={
-                                                  Object {
-                                                    "className": "euiButtonEmpty__text euiQuickSelectPopover__buttonText",
-                                                  }
-                                                }
-                                              >
-                                                <span
-                                                  className="euiButtonContent euiButtonContent--iconRight euiButtonEmpty__content"
-                                                >
-                                                  <EuiIcon
-                                                    className="euiButtonContent__icon"
-                                                    color="inherit"
-                                                    size="s"
-                                                    type="arrowDown"
-                                                  >
-                                                    <EuiIconArrowDown
-                                                      aria-hidden={true}
-                                                      className="euiIcon euiIcon--small euiIcon--inherit euiButtonContent__icon"
-                                                      focusable="false"
-                                                      role="img"
-                                                      style={null}
-                                                    >
-                                                      <svg
-                                                        aria-hidden={true}
-                                                        className="euiIcon euiIcon--small euiIcon--inherit euiButtonContent__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="M13.069 5.157L8.384 9.768a.546.546 0 01-.768 0L2.93 5.158a.552.552 0 00-.771 0 .53.53 0 000 .759l4.684 4.61c.641.631 1.672.63 2.312 0l4.684-4.61a.53.53 0 000-.76.552.552 0 00-.771 0z"
-                                                          fillRule="non-zero"
-                                                        />
-                                                      </svg>
-                                                    </EuiIconArrowDown>
-                                                  </EuiIcon>
-                                                  <span
-                                                    className="euiButtonEmpty__text euiQuickSelectPopover__buttonText"
-                                                  >
-                                                    <EuiIcon
-                                                      type="calendar"
-                                                    >
-                                                      <EuiIconCalendar
-                                                        aria-hidden={true}
-                                                        className="euiIcon euiIcon--medium"
-                                                        focusable="false"
-                                                        role="img"
-                                                        style={null}
-                                                      >
-                                                        <svg
-                                                          aria-hidden={true}
-                                                          className="euiIcon euiIcon--medium"
-                                                          focusable="false"
-                                                          height={16}
-                                                          role="img"
-                                                          style={null}
-                                                          viewBox="0 0 16 16"
-                                                          width={16}
-                                                          xmlns="http://www.w3.org/2000/svg"
-                                                        >
-                                                          <path
-                                                            d="M14 4v-.994C14 2.45 13.55 2 12.994 2H11v1h-1V2H6v1H5V2H3.006C2.45 2 2 2.45 2 3.006v9.988C2 13.55 2.45 14 3.006 14h9.988C13.55 14 14 13.55 14 12.994V5H2V4h12zm-3-3h1.994C14.102 1 15 1.897 15 3.006v9.988A2.005 2.005 0 0112.994 15H3.006A2.005 2.005 0 011 12.994V3.006C1 1.898 1.897 1 3.006 1H5V0h1v1h4V0h1v1zM4 7h2v1H4V7zm3 0h2v1H7V7zm3 0h2v1h-2V7zM4 9h2v1H4V9zm3 0h2v1H7V9zm3 0h2v1h-2V9zm-6 2h2v1H4v-1zm3 0h2v1H7v-1zm3 0h2v1h-2v-1z"
-                                                            fillRule="evenodd"
-                                                          />
-                                                        </svg>
-                                                      </EuiIconCalendar>
-                                                    </EuiIcon>
-                                                  </span>
-                                                </span>
-                                              </EuiButtonContent>
-                                            </button>
-                                          </EuiButtonEmpty>
-                                        </div>
-                                      </div>
-                                    </EuiPopover>
-                                  </EuiQuickSelectPopover>
-                                  <div
-                                    className="euiFormControlLayout__childrenWrapper"
-                                  >
-                                    <EuiDatePickerRange
-                                      className="euiDatePickerRange--inGroup"
-                                      endDateControl={<div />}
-                                      iconType={false}
-                                      isCustom={true}
-                                      startDateControl={<div />}
-                                    >
-                                      <div
-                                        className="euiDatePickerRange euiDatePickerRange--inGroup"
-                                      >
-                                        <button
-                                          className="euiSuperDatePicker__prettyFormat euiSuperDatePicker__prettyFormat--disabled"
-                                          data-test-subj="superDatePickerShowDatesButton"
-                                          disabled={true}
-                                          onClick={[Function]}
-                                        >
-                                          Last 1 day
-                                          <span
-                                            className="euiSuperDatePicker__prettyFormatLink"
-                                          >
-                                            <EuiI18n
-                                              default="Show dates"
-                                              token="euiSuperDatePicker.showDatesButtonLabel"
-                                            >
-                                              Show dates
-                                            </EuiI18n>
-                                          </span>
-                                        </button>
-                                      </div>
-                                    </EuiDatePickerRange>
-                                    <EuiFormControlLayoutIcons />
-                                  </div>
-                                </div>
-                              </EuiFormControlLayout>
-                            </div>
-                          </EuiFlexItem>
-                          <EuiFlexItem
-                            grow={false}
+                          <div
+                            className="euiFormControlLayout__childrenWrapper"
                           >
-                            <div
-                              className="euiFlexItem euiFlexItem--flexGrowZero"
-                            >
-                              <EuiSuperUpdateButton
-                                data-test-subj="superDatePickerApplyTimeButton"
-                                isDisabled={true}
-                                isLoading={false}
-                                needsUpdate={false}
-                                onClick={[Function]}
-                                showTooltip={true}
+                            <EuiValidatableControl>
+                              <select
+                                aria-label="resolutionSelect"
+                                className="euiSelect euiFormControlLayout__append resolutionSelectOption"
+                                id="select_123"
+                                onChange={[Function]}
+                                onMouseUp={[Function]}
+                                value="h"
                               >
-                                <EuiToolTip
-                                  content={
-                                    <EuiI18n
-                                      default="Cannot update"
-                                      token="euiSuperUpdateButton.cannotUpdateTooltip"
-                                    />
-                                  }
-                                  delay="regular"
-                                  position="bottom"
+                                <option
+                                  key="0"
+                                  value="s"
                                 >
-                                  <span
-                                    className="euiToolTipAnchor"
-                                    onKeyUp={[Function]}
-                                    onMouseOut={[Function]}
-                                    onMouseOver={[Function]}
-                                  >
-                                    <EuiButton
-                                      className="euiSuperUpdateButton"
-                                      color="primary"
-                                      data-test-subj="superDatePickerApplyTimeButton"
-                                      fill={true}
-                                      iconType="refresh"
-                                      isDisabled={true}
-                                      isLoading={false}
-                                      onBlur={[Function]}
-                                      onClick={[Function]}
-                                      onFocus={[Function]}
-                                      textProps={
-                                        Object {
-                                          "className": "euiSuperUpdateButton__text",
-                                        }
-                                      }
-                                    >
-                                      <EuiButtonDisplay
-                                        baseClassName="euiButton"
-                                        className="euiSuperUpdateButton"
-                                        color="primary"
-                                        data-test-subj="superDatePickerApplyTimeButton"
-                                        disabled={true}
-                                        element="button"
-                                        fill={true}
-                                        iconType="refresh"
-                                        isDisabled={true}
-                                        isLoading={false}
-                                        onBlur={[Function]}
-                                        onClick={[Function]}
-                                        onFocus={[Function]}
-                                        textProps={
-                                          Object {
-                                            "className": "euiSuperUpdateButton__text",
-                                          }
-                                        }
-                                        type="button"
-                                      >
-                                        <button
-                                          className="euiButton euiButton--primary euiButton--fill euiButton-isDisabled euiSuperUpdateButton"
-                                          data-test-subj="superDatePickerApplyTimeButton"
-                                          disabled={true}
-                                          onBlur={[Function]}
-                                          onClick={[Function]}
-                                          onFocus={[Function]}
-                                          style={
-                                            Object {
-                                              "minWidth": undefined,
-                                            }
-                                          }
-                                          type="button"
-                                        >
-                                          <EuiButtonContent
-                                            className="euiButton__content"
-                                            iconSide="left"
-                                            iconType="refresh"
-                                            isLoading={false}
-                                            textProps={
-                                              Object {
-                                                "className": "euiButton__text euiSuperUpdateButton__text",
-                                              }
-                                            }
-                                          >
-                                            <span
-                                              className="euiButtonContent euiButton__content"
-                                            >
-                                              <EuiIcon
-                                                className="euiButtonContent__icon"
-                                                color="inherit"
-                                                size="m"
-                                                type="refresh"
-                                              >
-                                                <EuiIconRefresh
-                                                  aria-hidden={true}
-                                                  className="euiIcon euiIcon--medium euiIcon--inherit euiButtonContent__icon"
-                                                  focusable="false"
-                                                  role="img"
-                                                  style={null}
-                                                >
-                                                  <svg
-                                                    aria-hidden={true}
-                                                    className="euiIcon euiIcon--medium euiIcon--inherit euiButtonContent__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.228 2.942a.5.5 0 11-.538.842A5 5 0 1013 8a.5.5 0 111 0 6 6 0 11-2.772-5.058zM14 1.5v3A1.5 1.5 0 0112.5 6h-3a.5.5 0 010-1h3a.5.5 0 00.5-.5v-3a.5.5 0 111 0z"
-                                                    />
-                                                  </svg>
-                                                </EuiIconRefresh>
-                                              </EuiIcon>
-                                              <span
-                                                className="euiButton__text euiSuperUpdateButton__text"
-                                              >
-                                                <EuiI18n
-                                                  default="Refresh"
-                                                  token="euiSuperUpdateButton.refreshButtonLabel"
-                                                >
-                                                  Refresh
-                                                </EuiI18n>
-                                              </span>
-                                            </span>
-                                          </EuiButtonContent>
-                                        </button>
-                                      </EuiButtonDisplay>
-                                    </EuiButton>
-                                  </span>
-                                </EuiToolTip>
-                              </EuiSuperUpdateButton>
-                            </div>
-                          </EuiFlexItem>
-                        </div>
-                      </EuiFlexGroup>
-                    </EuiSuperDatePicker>
-                  </div>
-                </EuiFlexItem>
-                <EuiFlexItem
-                  grow={false}
-                >
-                  <div
-                    className="euiFlexItem euiFlexItem--flexGrowZero"
-                  >
-                    <EuiPopover
-                      anchorPosition="downCenter"
-                      button={
-                        <EuiButton
-                          data-test-subj="metrics__saveManagementPopover"
-                          iconSide="right"
-                          iconType="arrowDown"
-                          isDisabled={true}
-                          onClick={[Function]}
-                        >
-                          Save
-                        </EuiButton>
-                      }
-                      closePopover={[Function]}
-                      display="inlineBlock"
-                      hasArrow={true}
-                      isOpen={false}
-                      ownFocus={true}
-                      panelPaddingSize="m"
-                    >
-                      <div
-                        className="euiPopover euiPopover--anchorDownCenter"
-                      >
-                        <div
-                          className="euiPopover__anchor"
-                        >
-                          <EuiButton
-                            data-test-subj="metrics__saveManagementPopover"
-                            iconSide="right"
-                            iconType="arrowDown"
-                            isDisabled={true}
-                            onClick={[Function]}
-                          >
-                            <EuiButtonDisplay
-                              baseClassName="euiButton"
-                              data-test-subj="metrics__saveManagementPopover"
-                              disabled={true}
-                              element="button"
-                              iconSide="right"
-                              iconType="arrowDown"
-                              isDisabled={true}
-                              onClick={[Function]}
-                              type="button"
-                            >
-                              <button
-                                className="euiButton euiButton--primary euiButton-isDisabled"
-                                data-test-subj="metrics__saveManagementPopover"
-                                disabled={true}
-                                onClick={[Function]}
-                                style={
-                                  Object {
-                                    "minWidth": undefined,
-                                  }
+                                  seconds
+                                </option>
+                                <option
+                                  key="1"
+                                  value="m"
+                                >
+                                  minutes
+                                </option>
+                                <option
+                                  key="2"
+                                  value="h"
+                                >
+                                  hours
+                                </option>
+                                <option
+                                  key="3"
+                                  value="d"
+                                >
+                                  days
+                                </option>
+                                <option
+                                  key="4"
+                                  value="y"
+                                >
+                                  years
+                                </option>
+                              </select>
+                            </EuiValidatableControl>
+                            <EuiFormControlLayoutIcons
+                              compressed={false}
+                              icon={
+                                Object {
+                                  "side": "right",
+                                  "type": "arrowDown",
                                 }
-                                type="button"
+                              }
+                              isLoading={false}
+                            >
+                              <div
+                                className="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
                               >
-                                <EuiButtonContent
-                                  className="euiButton__content"
-                                  iconSide="right"
-                                  iconType="arrowDown"
-                                  textProps={
-                                    Object {
-                                      "className": "euiButton__text",
-                                    }
-                                  }
+                                <EuiFormControlLayoutCustomIcon
+                                  size="m"
+                                  type="arrowDown"
                                 >
                                   <span
-                                    className="euiButtonContent euiButtonContent--iconRight euiButton__content"
+                                    className="euiFormControlLayoutCustomIcon"
                                   >
                                     <EuiIcon
-                                      className="euiButtonContent__icon"
-                                      color="inherit"
+                                      aria-hidden="true"
+                                      className="euiFormControlLayoutCustomIcon__icon"
                                       size="m"
                                       type="arrowDown"
                                     >
                                       <EuiIconArrowDown
                                         aria-hidden={true}
-                                        className="euiIcon euiIcon--medium euiIcon--inherit euiButtonContent__icon"
+                                        className="euiIcon euiIcon--medium euiFormControlLayoutCustomIcon__icon"
                                         focusable="false"
                                         role="img"
                                         style={null}
                                       >
                                         <svg
                                           aria-hidden={true}
-                                          className="euiIcon euiIcon--medium euiIcon--inherit euiButtonContent__icon"
+                                          className="euiIcon euiIcon--medium euiFormControlLayoutCustomIcon__icon"
                                           focusable="false"
                                           height={16}
                                           role="img"
@@ -2452,27 +1772,681 @@ exports[`Metrics Top Menu Component renders Top Menu Component when disabled wit
                                         </svg>
                                       </EuiIconArrowDown>
                                     </EuiIcon>
-                                    <span
-                                      className="euiButton__text"
-                                    >
-                                      Save
-                                    </span>
                                   </span>
-                                </EuiButtonContent>
-                              </button>
-                            </EuiButtonDisplay>
-                          </EuiButton>
+                                </EuiFormControlLayoutCustomIcon>
+                              </div>
+                            </EuiFormControlLayoutIcons>
+                          </div>
                         </div>
-                      </div>
-                    </EuiPopover>
+                      </EuiFormControlLayout>
+                    </EuiSelect>
                   </div>
-                </EuiFlexItem>
+                </EuiFormControlLayout>
+              </EuiFieldText>
+            </div>
+          </div>
+        </EuiFlexItem>
+        <EuiFlexItem
+          className="metrics-search-bar-datepicker"
+        >
+          <div
+            className="euiFlexItem metrics-search-bar-datepicker"
+          >
+            <EuiSuperDatePicker
+              commonlyUsedRanges={
+                Array [
+                  Object {
+                    "end": "now/d",
+                    "label": "Today",
+                    "start": "now/d",
+                  },
+                  Object {
+                    "end": "now/w",
+                    "label": "This week",
+                    "start": "now/w",
+                  },
+                  Object {
+                    "end": "now/M",
+                    "label": "This month",
+                    "start": "now/M",
+                  },
+                  Object {
+                    "end": "now/y",
+                    "label": "This year",
+                    "start": "now/y",
+                  },
+                  Object {
+                    "end": "now-1d/d",
+                    "label": "Yesterday",
+                    "start": "now-1d/d",
+                  },
+                  Object {
+                    "end": "now",
+                    "label": "Week to date",
+                    "start": "now/w",
+                  },
+                  Object {
+                    "end": "now",
+                    "label": "Month to date",
+                    "start": "now/M",
+                  },
+                  Object {
+                    "end": "now",
+                    "label": "Year to date",
+                    "start": "now/y",
+                  },
+                ]
+              }
+              dateFormat=""
+              end="now"
+              isAutoRefreshOnly={false}
+              isDisabled={true}
+              isPaused={true}
+              onTimeChange={[MockFunction]}
+              recentlyUsedRanges={Array []}
+              refreshInterval={0}
+              showUpdateButton={true}
+              start="now-1d"
+              timeFormat="HH:mm"
+            >
+              <EuiFlexGroup
+                className="euiSuperDatePicker__flexWrapper"
+                gutterSize="s"
+                responsive={false}
+              >
+                <div
+                  className="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--directionRow euiSuperDatePicker__flexWrapper"
+                >
+                  <EuiFlexItem>
+                    <div
+                      className="euiFlexItem"
+                    >
+                      <EuiFormControlLayout
+                        className="euiSuperDatePicker"
+                        isDisabled={true}
+                        prepend={
+                          <EuiQuickSelectPopover
+                            applyTime={[Function]}
+                            commonlyUsedRanges={
+                              Array [
+                                Object {
+                                  "end": "now/d",
+                                  "label": "Today",
+                                  "start": "now/d",
+                                },
+                                Object {
+                                  "end": "now/w",
+                                  "label": "This week",
+                                  "start": "now/w",
+                                },
+                                Object {
+                                  "end": "now/M",
+                                  "label": "This month",
+                                  "start": "now/M",
+                                },
+                                Object {
+                                  "end": "now/y",
+                                  "label": "This year",
+                                  "start": "now/y",
+                                },
+                                Object {
+                                  "end": "now-1d/d",
+                                  "label": "Yesterday",
+                                  "start": "now-1d/d",
+                                },
+                                Object {
+                                  "end": "now",
+                                  "label": "Week to date",
+                                  "start": "now/w",
+                                },
+                                Object {
+                                  "end": "now",
+                                  "label": "Month to date",
+                                  "start": "now/M",
+                                },
+                                Object {
+                                  "end": "now",
+                                  "label": "Year to date",
+                                  "start": "now/y",
+                                },
+                              ]
+                            }
+                            dateFormat=""
+                            end="now"
+                            isAutoRefreshOnly={false}
+                            isDisabled={true}
+                            isPaused={true}
+                            recentlyUsedRanges={Array []}
+                            refreshInterval={0}
+                            start="now-1d"
+                          />
+                        }
+                      >
+                        <div
+                          className="euiFormControlLayout euiFormControlLayout--group euiFormControlLayout-isDisabled euiSuperDatePicker"
+                        >
+                          <EuiQuickSelectPopover
+                            applyTime={[Function]}
+                            className="euiFormControlLayout__prepend"
+                            commonlyUsedRanges={
+                              Array [
+                                Object {
+                                  "end": "now/d",
+                                  "label": "Today",
+                                  "start": "now/d",
+                                },
+                                Object {
+                                  "end": "now/w",
+                                  "label": "This week",
+                                  "start": "now/w",
+                                },
+                                Object {
+                                  "end": "now/M",
+                                  "label": "This month",
+                                  "start": "now/M",
+                                },
+                                Object {
+                                  "end": "now/y",
+                                  "label": "This year",
+                                  "start": "now/y",
+                                },
+                                Object {
+                                  "end": "now-1d/d",
+                                  "label": "Yesterday",
+                                  "start": "now-1d/d",
+                                },
+                                Object {
+                                  "end": "now",
+                                  "label": "Week to date",
+                                  "start": "now/w",
+                                },
+                                Object {
+                                  "end": "now",
+                                  "label": "Month to date",
+                                  "start": "now/M",
+                                },
+                                Object {
+                                  "end": "now",
+                                  "label": "Year to date",
+                                  "start": "now/y",
+                                },
+                              ]
+                            }
+                            dateFormat=""
+                            end="now"
+                            isAutoRefreshOnly={false}
+                            isDisabled={true}
+                            isPaused={true}
+                            key="0/.0"
+                            recentlyUsedRanges={Array []}
+                            refreshInterval={0}
+                            start="now-1d"
+                          >
+                            <EuiPopover
+                              anchorClassName="euiQuickSelectPopover__anchor"
+                              anchorPosition="downLeft"
+                              button={
+                                <EuiButtonEmpty
+                                  aria-label="Date quick select"
+                                  className="euiFormControlLayout__prepend"
+                                  data-test-subj="superDatePickerToggleQuickMenuButton"
+                                  iconSide="right"
+                                  iconType="arrowDown"
+                                  isDisabled={true}
+                                  onClick={[Function]}
+                                  size="xs"
+                                  textProps={
+                                    Object {
+                                      "className": "euiQuickSelectPopover__buttonText",
+                                    }
+                                  }
+                                >
+                                  <EuiIcon
+                                    type="calendar"
+                                  />
+                                </EuiButtonEmpty>
+                              }
+                              closePopover={[Function]}
+                              display="inlineBlock"
+                              hasArrow={true}
+                              isOpen={false}
+                              ownFocus={true}
+                              panelPaddingSize="m"
+                            >
+                              <div
+                                className="euiPopover euiPopover--anchorDownLeft"
+                              >
+                                <div
+                                  className="euiPopover__anchor euiQuickSelectPopover__anchor"
+                                >
+                                  <EuiButtonEmpty
+                                    aria-label="Date quick select"
+                                    className="euiFormControlLayout__prepend"
+                                    data-test-subj="superDatePickerToggleQuickMenuButton"
+                                    iconSide="right"
+                                    iconType="arrowDown"
+                                    isDisabled={true}
+                                    onClick={[Function]}
+                                    size="xs"
+                                    textProps={
+                                      Object {
+                                        "className": "euiQuickSelectPopover__buttonText",
+                                      }
+                                    }
+                                  >
+                                    <button
+                                      aria-label="Date quick select"
+                                      className="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--xSmall euiButtonEmpty-isDisabled euiFormControlLayout__prepend"
+                                      data-test-subj="superDatePickerToggleQuickMenuButton"
+                                      disabled={true}
+                                      onClick={[Function]}
+                                      type="button"
+                                    >
+                                      <EuiButtonContent
+                                        className="euiButtonEmpty__content"
+                                        iconSide="right"
+                                        iconSize="s"
+                                        iconType="arrowDown"
+                                        textProps={
+                                          Object {
+                                            "className": "euiButtonEmpty__text euiQuickSelectPopover__buttonText",
+                                          }
+                                        }
+                                      >
+                                        <span
+                                          className="euiButtonContent euiButtonContent--iconRight euiButtonEmpty__content"
+                                        >
+                                          <EuiIcon
+                                            className="euiButtonContent__icon"
+                                            color="inherit"
+                                            size="s"
+                                            type="arrowDown"
+                                          >
+                                            <EuiIconArrowDown
+                                              aria-hidden={true}
+                                              className="euiIcon euiIcon--small euiIcon--inherit euiButtonContent__icon"
+                                              focusable="false"
+                                              role="img"
+                                              style={null}
+                                            >
+                                              <svg
+                                                aria-hidden={true}
+                                                className="euiIcon euiIcon--small euiIcon--inherit euiButtonContent__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="M13.069 5.157L8.384 9.768a.546.546 0 01-.768 0L2.93 5.158a.552.552 0 00-.771 0 .53.53 0 000 .759l4.684 4.61c.641.631 1.672.63 2.312 0l4.684-4.61a.53.53 0 000-.76.552.552 0 00-.771 0z"
+                                                  fillRule="non-zero"
+                                                />
+                                              </svg>
+                                            </EuiIconArrowDown>
+                                          </EuiIcon>
+                                          <span
+                                            className="euiButtonEmpty__text euiQuickSelectPopover__buttonText"
+                                          >
+                                            <EuiIcon
+                                              type="calendar"
+                                            >
+                                              <EuiIconCalendar
+                                                aria-hidden={true}
+                                                className="euiIcon euiIcon--medium"
+                                                focusable="false"
+                                                role="img"
+                                                style={null}
+                                              >
+                                                <svg
+                                                  aria-hidden={true}
+                                                  className="euiIcon euiIcon--medium"
+                                                  focusable="false"
+                                                  height={16}
+                                                  role="img"
+                                                  style={null}
+                                                  viewBox="0 0 16 16"
+                                                  width={16}
+                                                  xmlns="http://www.w3.org/2000/svg"
+                                                >
+                                                  <path
+                                                    d="M14 4v-.994C14 2.45 13.55 2 12.994 2H11v1h-1V2H6v1H5V2H3.006C2.45 2 2 2.45 2 3.006v9.988C2 13.55 2.45 14 3.006 14h9.988C13.55 14 14 13.55 14 12.994V5H2V4h12zm-3-3h1.994C14.102 1 15 1.897 15 3.006v9.988A2.005 2.005 0 0112.994 15H3.006A2.005 2.005 0 011 12.994V3.006C1 1.898 1.897 1 3.006 1H5V0h1v1h4V0h1v1zM4 7h2v1H4V7zm3 0h2v1H7V7zm3 0h2v1h-2V7zM4 9h2v1H4V9zm3 0h2v1H7V9zm3 0h2v1h-2V9zm-6 2h2v1H4v-1zm3 0h2v1H7v-1zm3 0h2v1h-2v-1z"
+                                                    fillRule="evenodd"
+                                                  />
+                                                </svg>
+                                              </EuiIconCalendar>
+                                            </EuiIcon>
+                                          </span>
+                                        </span>
+                                      </EuiButtonContent>
+                                    </button>
+                                  </EuiButtonEmpty>
+                                </div>
+                              </div>
+                            </EuiPopover>
+                          </EuiQuickSelectPopover>
+                          <div
+                            className="euiFormControlLayout__childrenWrapper"
+                          >
+                            <EuiDatePickerRange
+                              className="euiDatePickerRange--inGroup"
+                              endDateControl={<div />}
+                              iconType={false}
+                              isCustom={true}
+                              startDateControl={<div />}
+                            >
+                              <div
+                                className="euiDatePickerRange euiDatePickerRange--inGroup"
+                              >
+                                <button
+                                  className="euiSuperDatePicker__prettyFormat euiSuperDatePicker__prettyFormat--disabled"
+                                  data-test-subj="superDatePickerShowDatesButton"
+                                  disabled={true}
+                                  onClick={[Function]}
+                                >
+                                  Last 1 day
+                                  <span
+                                    className="euiSuperDatePicker__prettyFormatLink"
+                                  >
+                                    <EuiI18n
+                                      default="Show dates"
+                                      token="euiSuperDatePicker.showDatesButtonLabel"
+                                    >
+                                      Show dates
+                                    </EuiI18n>
+                                  </span>
+                                </button>
+                              </div>
+                            </EuiDatePickerRange>
+                            <EuiFormControlLayoutIcons />
+                          </div>
+                        </div>
+                      </EuiFormControlLayout>
+                    </div>
+                  </EuiFlexItem>
+                  <EuiFlexItem
+                    grow={false}
+                  >
+                    <div
+                      className="euiFlexItem euiFlexItem--flexGrowZero"
+                    >
+                      <EuiSuperUpdateButton
+                        data-test-subj="superDatePickerApplyTimeButton"
+                        isDisabled={true}
+                        isLoading={false}
+                        needsUpdate={false}
+                        onClick={[Function]}
+                        showTooltip={true}
+                      >
+                        <EuiToolTip
+                          content={
+                            <EuiI18n
+                              default="Cannot update"
+                              token="euiSuperUpdateButton.cannotUpdateTooltip"
+                            />
+                          }
+                          delay="regular"
+                          position="bottom"
+                        >
+                          <span
+                            className="euiToolTipAnchor"
+                            onKeyUp={[Function]}
+                            onMouseOut={[Function]}
+                            onMouseOver={[Function]}
+                          >
+                            <EuiButton
+                              className="euiSuperUpdateButton"
+                              color="primary"
+                              data-test-subj="superDatePickerApplyTimeButton"
+                              fill={true}
+                              iconType="refresh"
+                              isDisabled={true}
+                              isLoading={false}
+                              onBlur={[Function]}
+                              onClick={[Function]}
+                              onFocus={[Function]}
+                              textProps={
+                                Object {
+                                  "className": "euiSuperUpdateButton__text",
+                                }
+                              }
+                            >
+                              <EuiButtonDisplay
+                                baseClassName="euiButton"
+                                className="euiSuperUpdateButton"
+                                color="primary"
+                                data-test-subj="superDatePickerApplyTimeButton"
+                                disabled={true}
+                                element="button"
+                                fill={true}
+                                iconType="refresh"
+                                isDisabled={true}
+                                isLoading={false}
+                                onBlur={[Function]}
+                                onClick={[Function]}
+                                onFocus={[Function]}
+                                textProps={
+                                  Object {
+                                    "className": "euiSuperUpdateButton__text",
+                                  }
+                                }
+                                type="button"
+                              >
+                                <button
+                                  className="euiButton euiButton--primary euiButton--fill euiButton-isDisabled euiSuperUpdateButton"
+                                  data-test-subj="superDatePickerApplyTimeButton"
+                                  disabled={true}
+                                  onBlur={[Function]}
+                                  onClick={[Function]}
+                                  onFocus={[Function]}
+                                  style={
+                                    Object {
+                                      "minWidth": undefined,
+                                    }
+                                  }
+                                  type="button"
+                                >
+                                  <EuiButtonContent
+                                    className="euiButton__content"
+                                    iconSide="left"
+                                    iconType="refresh"
+                                    isLoading={false}
+                                    textProps={
+                                      Object {
+                                        "className": "euiButton__text euiSuperUpdateButton__text",
+                                      }
+                                    }
+                                  >
+                                    <span
+                                      className="euiButtonContent euiButton__content"
+                                    >
+                                      <EuiIcon
+                                        className="euiButtonContent__icon"
+                                        color="inherit"
+                                        size="m"
+                                        type="refresh"
+                                      >
+                                        <EuiIconRefresh
+                                          aria-hidden={true}
+                                          className="euiIcon euiIcon--medium euiIcon--inherit euiButtonContent__icon"
+                                          focusable="false"
+                                          role="img"
+                                          style={null}
+                                        >
+                                          <svg
+                                            aria-hidden={true}
+                                            className="euiIcon euiIcon--medium euiIcon--inherit euiButtonContent__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.228 2.942a.5.5 0 11-.538.842A5 5 0 1013 8a.5.5 0 111 0 6 6 0 11-2.772-5.058zM14 1.5v3A1.5 1.5 0 0112.5 6h-3a.5.5 0 010-1h3a.5.5 0 00.5-.5v-3a.5.5 0 111 0z"
+                                            />
+                                          </svg>
+                                        </EuiIconRefresh>
+                                      </EuiIcon>
+                                      <span
+                                        className="euiButton__text euiSuperUpdateButton__text"
+                                      >
+                                        <EuiI18n
+                                          default="Refresh"
+                                          token="euiSuperUpdateButton.refreshButtonLabel"
+                                        >
+                                          Refresh
+                                        </EuiI18n>
+                                      </span>
+                                    </span>
+                                  </EuiButtonContent>
+                                </button>
+                              </EuiButtonDisplay>
+                            </EuiButton>
+                          </span>
+                        </EuiToolTip>
+                      </EuiSuperUpdateButton>
+                    </div>
+                  </EuiFlexItem>
+                </div>
+              </EuiFlexGroup>
+            </EuiSuperDatePicker>
+          </div>
+        </EuiFlexItem>
+        <EuiFlexItem
+          grow={false}
+        >
+          <div
+            className="euiFlexItem euiFlexItem--flexGrowZero"
+          >
+            <EuiPopover
+              anchorPosition="downCenter"
+              button={
+                <EuiButton
+                  data-test-subj="metrics__saveManagementPopover"
+                  iconSide="right"
+                  iconType="arrowDown"
+                  isDisabled={true}
+                  onClick={[Function]}
+                >
+                  Save
+                </EuiButton>
+              }
+              closePopover={[Function]}
+              display="inlineBlock"
+              hasArrow={true}
+              isOpen={false}
+              ownFocus={true}
+              panelPaddingSize="m"
+            >
+              <div
+                className="euiPopover euiPopover--anchorDownCenter"
+              >
+                <div
+                  className="euiPopover__anchor"
+                >
+                  <EuiButton
+                    data-test-subj="metrics__saveManagementPopover"
+                    iconSide="right"
+                    iconType="arrowDown"
+                    isDisabled={true}
+                    onClick={[Function]}
+                  >
+                    <EuiButtonDisplay
+                      baseClassName="euiButton"
+                      data-test-subj="metrics__saveManagementPopover"
+                      disabled={true}
+                      element="button"
+                      iconSide="right"
+                      iconType="arrowDown"
+                      isDisabled={true}
+                      onClick={[Function]}
+                      type="button"
+                    >
+                      <button
+                        className="euiButton euiButton--primary euiButton-isDisabled"
+                        data-test-subj="metrics__saveManagementPopover"
+                        disabled={true}
+                        onClick={[Function]}
+                        style={
+                          Object {
+                            "minWidth": undefined,
+                          }
+                        }
+                        type="button"
+                      >
+                        <EuiButtonContent
+                          className="euiButton__content"
+                          iconSide="right"
+                          iconType="arrowDown"
+                          textProps={
+                            Object {
+                              "className": "euiButton__text",
+                            }
+                          }
+                        >
+                          <span
+                            className="euiButtonContent euiButtonContent--iconRight euiButton__content"
+                          >
+                            <EuiIcon
+                              className="euiButtonContent__icon"
+                              color="inherit"
+                              size="m"
+                              type="arrowDown"
+                            >
+                              <EuiIconArrowDown
+                                aria-hidden={true}
+                                className="euiIcon euiIcon--medium euiIcon--inherit euiButtonContent__icon"
+                                focusable="false"
+                                role="img"
+                                style={null}
+                              >
+                                <svg
+                                  aria-hidden={true}
+                                  className="euiIcon euiIcon--medium euiIcon--inherit euiButtonContent__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="M13.069 5.157L8.384 9.768a.546.546 0 01-.768 0L2.93 5.158a.552.552 0 00-.771 0 .53.53 0 000 .759l4.684 4.61c.641.631 1.672.63 2.312 0l4.684-4.61a.53.53 0 000-.76.552.552 0 00-.771 0z"
+                                    fillRule="non-zero"
+                                  />
+                                </svg>
+                              </EuiIconArrowDown>
+                            </EuiIcon>
+                            <span
+                              className="euiButton__text"
+                            >
+                              Save
+                            </span>
+                          </span>
+                        </EuiButtonContent>
+                      </button>
+                    </EuiButtonDisplay>
+                  </EuiButton>
+                </div>
               </div>
-            </EuiFlexGroup>
+            </EuiPopover>
           </div>
-        </EuiPageHeaderSection>
-      </header>
-    </EuiPageHeader>
+        </EuiFlexItem>
+      </div>
+    </EuiFlexGroup>
+    <EuiSpacer
+      size="m"
+    >
+      <div
+        className="euiSpacer euiSpacer--m"
+      />
+    </EuiSpacer>
     <EuiFlexGroup
       gutterSize="s"
       justifyContent="flexEnd"
@@ -2640,399 +2614,111 @@ exports[`Metrics Top Menu Component renders Top Menu Component when enabled 1`]
     spanValue={1}
     startTime="now-1d"
   >
-    <EuiPageHeader>
-      <header
-        className="euiPageHeader euiPageHeader--responsive euiPageHeader--center"
+    <EuiFlexGroup
+      gutterSize="s"
+    >
+      <div
+        className="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--directionRow euiFlexGroup--responsive"
       >
-        <EuiPageHeaderSection>
+        <EuiFlexItem
+          grow={10}
+        >
           <div
-            className="euiPageHeaderSection"
+            className="euiFlexItem euiFlexItem--flexGrow10"
           >
-            <EuiFlexGroup
-              className="search-bar-top-menu"
-            >
+            <Component>
               <div
-                className="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive search-bar-top-menu"
+                className="metrics-search-bar-input"
               >
-                <EuiFlexItem>
-                  <div
-                    className="euiFlexItem"
+                <EuiSearchBar
+                  box={
+                    Object {
+                      "incremental": true,
+                      "placeholder": "Search for metrics",
+                    }
+                  }
+                  defaultQuery=""
+                  onChange={[Function]}
+                >
+                  <EuiFlexGroup
+                    alignItems="center"
+                    gutterSize="m"
+                    wrap={true}
                   >
-                    <Component>
-                      <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"
+                    >
+                      <EuiFlexItem
+                        className="euiSearchBar__searchHolder"
+                        grow={true}
+                      >
+                        <div
+                          className="euiFlexItem euiSearchBar__searchHolder"
                         >
-                          <EuiFlexGroup
-                            alignItems="center"
-                            gutterSize="m"
-                            wrap={true}
+                          <EuiSearchBox
+                            incremental={true}
+                            isInvalid={false}
+                            onSearch={[Function]}
+                            placeholder="Search for metrics"
+                            query=""
                           >
-                            <div
-                              className="euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive euiFlexGroup--wrap"
+                            <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}
+                              incremental={true}
+                              inputRef={[Function]}
+                              isClearable={true}
+                              isInvalid={false}
+                              isLoading={false}
+                              onSearch={[Function]}
+                              placeholder="Search for metrics"
                             >
-                              <EuiFlexItem
-                                className="euiSearchBar__searchHolder"
-                                grow={true}
+                              <EuiFormControlLayout
+                                compressed={false}
+                                fullWidth={true}
+                                icon="search"
+                                isLoading={false}
                               >
                                 <div
-                                  className="euiFlexItem euiSearchBar__searchHolder"
+                                  className="euiFormControlLayout euiFormControlLayout--fullWidth"
                                 >
-                                  <EuiSearchBox
-                                    incremental={true}
-                                    isInvalid={false}
-                                    onSearch={[Function]}
-                                    placeholder="Search for metrics"
-                                    query=""
+                                  <div
+                                    className="euiFormControlLayout__childrenWrapper"
                                   >
-                                    <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}
-                                      incremental={true}
-                                      inputRef={[Function]}
-                                      isClearable={true}
+                                    <EuiValidatableControl
                                       isInvalid={false}
+                                    >
+                                      <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}
-                                      onSearch={[Function]}
-                                      placeholder="Search for metrics"
                                     >
-                                      <EuiFormControlLayout
-                                        compressed={false}
-                                        fullWidth={true}
-                                        icon="search"
-                                        isLoading={false}
+                                      <div
+                                        className="euiFormControlLayoutIcons"
                                       >
-                                        <div
-                                          className="euiFormControlLayout euiFormControlLayout--fullWidth"
+                                        <EuiFormControlLayoutCustomIcon
+                                          size="m"
+                                          type="search"
                                         >
-                                          <div
-                                            className="euiFormControlLayout__childrenWrapper"
-                                          >
-                                            <EuiValidatableControl
-                                              isInvalid={false}
-                                            >
-                                              <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"
-                                              >
-                                                <EuiFormControlLayoutCustomIcon
-                                                  size="m"
-                                                  type="search"
-                                                >
-                                                  <span
-                                                    className="euiFormControlLayoutCustomIcon"
-                                                  >
-                                                    <EuiIcon
-                                                      aria-hidden="true"
-                                                      className="euiFormControlLayoutCustomIcon__icon"
-                                                      size="m"
-                                                      type="search"
-                                                    >
-                                                      <EuiIconEmpty
-                                                        aria-hidden={true}
-                                                        className="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
-                                                        focusable="false"
-                                                        role="img"
-                                                        style={null}
-                                                      >
-                                                        <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>
-                                      </EuiFormControlLayout>
-                                    </EuiFieldSearch>
-                                  </EuiSearchBox>
-                                </div>
-                              </EuiFlexItem>
-                            </div>
-                          </EuiFlexGroup>
-                        </EuiSearchBar>
-                      </div>
-                    </Component>
-                  </div>
-                </EuiFlexItem>
-              </div>
-            </EuiFlexGroup>
-          </div>
-        </EuiPageHeaderSection>
-        <EuiPageHeaderSection>
-          <div
-            className="euiPageHeaderSection"
-          >
-            <EuiFlexGroup
-              gutterSize="s"
-            >
-              <div
-                className="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--directionRow euiFlexGroup--responsive"
-              >
-                <EuiFlexItem
-                  grow={false}
-                >
-                  <div
-                    className="euiFlexItem euiFlexItem--flexGrowZero"
-                  >
-                    <div
-                      className="resolutionSelect"
-                    >
-                      <EuiFieldText
-                        append={
-                          <EuiSelect
-                            aria-label="resolutionSelect"
-                            id="select_123"
-                            onChange={[Function]}
-                            options={
-                              Array [
-                                Object {
-                                  "text": "seconds",
-                                  "value": "s",
-                                },
-                                Object {
-                                  "text": "minutes",
-                                  "value": "m",
-                                },
-                                Object {
-                                  "text": "hours",
-                                  "value": "h",
-                                },
-                                Object {
-                                  "text": "days",
-                                  "value": "d",
-                                },
-                                Object {
-                                  "text": "years",
-                                  "value": "y",
-                                },
-                              ]
-                            }
-                            value="h"
-                          />
-                        }
-                        aria-label="resolutionField"
-                        className="resolutionSelectText"
-                        disabled={false}
-                        isInvalid={false}
-                        onChange={[Function]}
-                        prepend="Span Interval"
-                        value={1}
-                      >
-                        <EuiFormControlLayout
-                          append={
-                            <EuiSelect
-                              aria-label="resolutionSelect"
-                              id="select_123"
-                              onChange={[Function]}
-                              options={
-                                Array [
-                                  Object {
-                                    "text": "seconds",
-                                    "value": "s",
-                                  },
-                                  Object {
-                                    "text": "minutes",
-                                    "value": "m",
-                                  },
-                                  Object {
-                                    "text": "hours",
-                                    "value": "h",
-                                  },
-                                  Object {
-                                    "text": "days",
-                                    "value": "d",
-                                  },
-                                  Object {
-                                    "text": "years",
-                                    "value": "y",
-                                  },
-                                ]
-                              }
-                              value="h"
-                            />
-                          }
-                          fullWidth={false}
-                          prepend="Span Interval"
-                        >
-                          <div
-                            className="euiFormControlLayout euiFormControlLayout--group"
-                          >
-                            <EuiFormLabel
-                              className="euiFormControlLayout__prepend"
-                            >
-                              <label
-                                className="euiFormLabel euiFormControlLayout__prepend"
-                              >
-                                Span Interval
-                              </label>
-                            </EuiFormLabel>
-                            <div
-                              className="euiFormControlLayout__childrenWrapper"
-                            >
-                              <EuiValidatableControl
-                                isInvalid={false}
-                              >
-                                <input
-                                  aria-label="resolutionField"
-                                  className="euiFieldText resolutionSelectText euiFieldText--inGroup"
-                                  disabled={false}
-                                  onChange={[Function]}
-                                  type="text"
-                                  value={1}
-                                />
-                              </EuiValidatableControl>
-                              <EuiFormControlLayoutIcons />
-                            </div>
-                            <EuiSelect
-                              aria-label="resolutionSelect"
-                              className="euiFormControlLayout__append"
-                              id="select_123"
-                              key="0/.0"
-                              onChange={[Function]}
-                              options={
-                                Array [
-                                  Object {
-                                    "text": "seconds",
-                                    "value": "s",
-                                  },
-                                  Object {
-                                    "text": "minutes",
-                                    "value": "m",
-                                  },
-                                  Object {
-                                    "text": "hours",
-                                    "value": "h",
-                                  },
-                                  Object {
-                                    "text": "days",
-                                    "value": "d",
-                                  },
-                                  Object {
-                                    "text": "years",
-                                    "value": "y",
-                                  },
-                                ]
-                              }
-                              value="h"
-                            >
-                              <EuiFormControlLayout
-                                compressed={false}
-                                fullWidth={false}
-                                icon={
-                                  Object {
-                                    "side": "right",
-                                    "type": "arrowDown",
-                                  }
-                                }
-                                inputId="select_123"
-                                isLoading={false}
-                              >
-                                <div
-                                  className="euiFormControlLayout"
-                                >
-                                  <div
-                                    className="euiFormControlLayout__childrenWrapper"
-                                  >
-                                    <EuiValidatableControl>
-                                      <select
-                                        aria-label="resolutionSelect"
-                                        className="euiSelect euiFormControlLayout__append"
-                                        id="select_123"
-                                        onChange={[Function]}
-                                        onMouseUp={[Function]}
-                                        value="h"
-                                      >
-                                        <option
-                                          key="0"
-                                          value="s"
-                                        >
-                                          seconds
-                                        </option>
-                                        <option
-                                          key="1"
-                                          value="m"
-                                        >
-                                          minutes
-                                        </option>
-                                        <option
-                                          key="2"
-                                          value="h"
-                                        >
-                                          hours
-                                        </option>
-                                        <option
-                                          key="3"
-                                          value="d"
-                                        >
-                                          days
-                                        </option>
-                                        <option
-                                          key="4"
-                                          value="y"
-                                        >
-                                          years
-                                        </option>
-                                      </select>
-                                    </EuiValidatableControl>
-                                    <EuiFormControlLayoutIcons
-                                      compressed={false}
-                                      icon={
-                                        Object {
-                                          "side": "right",
-                                          "type": "arrowDown",
-                                        }
-                                      }
-                                      isLoading={false}
-                                    >
-                                      <div
-                                        className="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
-                                      >
-                                        <EuiFormControlLayoutCustomIcon
-                                          size="m"
-                                          type="arrowDown"
-                                        >
-                                          <span
-                                            className="euiFormControlLayoutCustomIcon"
+                                          <span
+                                            className="euiFormControlLayoutCustomIcon"
                                           >
                                             <EuiIcon
                                               aria-hidden="true"
                                               className="euiFormControlLayoutCustomIcon__icon"
                                               size="m"
-                                              type="arrowDown"
+                                              type="search"
                                             >
                                               <EuiIconEmpty
                                                 aria-hidden={true}
@@ -3061,646 +2747,921 @@ exports[`Metrics Top Menu Component renders Top Menu Component when enabled 1`]
                                   </div>
                                 </div>
                               </EuiFormControlLayout>
-                            </EuiSelect>
-                          </div>
-                        </EuiFormControlLayout>
-                      </EuiFieldText>
+                            </EuiFieldSearch>
+                          </EuiSearchBox>
+                        </div>
+                      </EuiFlexItem>
                     </div>
-                  </div>
-                </EuiFlexItem>
-                <EuiFlexItem
-                  grow={false}
-                >
-                  <div
-                    className="euiFlexItem euiFlexItem--flexGrowZero"
-                  >
-                    <EuiSuperDatePicker
-                      commonlyUsedRanges={
+                  </EuiFlexGroup>
+                </EuiSearchBar>
+              </div>
+            </Component>
+          </div>
+        </EuiFlexItem>
+        <EuiFlexItem
+          grow={false}
+        >
+          <div
+            className="euiFlexItem euiFlexItem--flexGrowZero"
+          >
+            <div
+              className="resolutionSelect"
+            >
+              <EuiFieldText
+                append={
+                  <EuiSelect
+                    aria-label="resolutionSelect"
+                    className="resolutionSelectOption"
+                    id="select_123"
+                    onChange={[Function]}
+                    options={
+                      Array [
+                        Object {
+                          "text": "seconds",
+                          "value": "s",
+                        },
+                        Object {
+                          "text": "minutes",
+                          "value": "m",
+                        },
+                        Object {
+                          "text": "hours",
+                          "value": "h",
+                        },
+                        Object {
+                          "text": "days",
+                          "value": "d",
+                        },
+                        Object {
+                          "text": "years",
+                          "value": "y",
+                        },
+                      ]
+                    }
+                    value="h"
+                  />
+                }
+                aria-label="resolutionField"
+                className="resolutionSelectText"
+                disabled={false}
+                isInvalid={false}
+                onChange={[Function]}
+                prepend="Span Interval"
+                value={1}
+              >
+                <EuiFormControlLayout
+                  append={
+                    <EuiSelect
+                      aria-label="resolutionSelect"
+                      className="resolutionSelectOption"
+                      id="select_123"
+                      onChange={[Function]}
+                      options={
                         Array [
                           Object {
-                            "end": "now/d",
-                            "label": "Today",
-                            "start": "now/d",
+                            "text": "seconds",
+                            "value": "s",
                           },
                           Object {
-                            "end": "now/w",
-                            "label": "This week",
-                            "start": "now/w",
+                            "text": "minutes",
+                            "value": "m",
                           },
                           Object {
-                            "end": "now/M",
-                            "label": "This month",
-                            "start": "now/M",
+                            "text": "hours",
+                            "value": "h",
                           },
                           Object {
-                            "end": "now/y",
-                            "label": "This year",
-                            "start": "now/y",
+                            "text": "days",
+                            "value": "d",
+                          },
+                          Object {
+                            "text": "years",
+                            "value": "y",
+                          },
+                        ]
+                      }
+                      value="h"
+                    />
+                  }
+                  fullWidth={false}
+                  prepend="Span Interval"
+                >
+                  <div
+                    className="euiFormControlLayout euiFormControlLayout--group"
+                  >
+                    <EuiFormLabel
+                      className="euiFormControlLayout__prepend"
+                    >
+                      <label
+                        className="euiFormLabel euiFormControlLayout__prepend"
+                      >
+                        Span Interval
+                      </label>
+                    </EuiFormLabel>
+                    <div
+                      className="euiFormControlLayout__childrenWrapper"
+                    >
+                      <EuiValidatableControl
+                        isInvalid={false}
+                      >
+                        <input
+                          aria-label="resolutionField"
+                          className="euiFieldText resolutionSelectText euiFieldText--inGroup"
+                          disabled={false}
+                          onChange={[Function]}
+                          type="text"
+                          value={1}
+                        />
+                      </EuiValidatableControl>
+                      <EuiFormControlLayoutIcons />
+                    </div>
+                    <EuiSelect
+                      aria-label="resolutionSelect"
+                      className="euiFormControlLayout__append resolutionSelectOption"
+                      id="select_123"
+                      key="0/.0"
+                      onChange={[Function]}
+                      options={
+                        Array [
+                          Object {
+                            "text": "seconds",
+                            "value": "s",
                           },
                           Object {
-                            "end": "now-1d/d",
-                            "label": "Yesterday",
-                            "start": "now-1d/d",
+                            "text": "minutes",
+                            "value": "m",
                           },
                           Object {
-                            "end": "now",
-                            "label": "Week to date",
-                            "start": "now/w",
+                            "text": "hours",
+                            "value": "h",
                           },
                           Object {
-                            "end": "now",
-                            "label": "Month to date",
-                            "start": "now/M",
+                            "text": "days",
+                            "value": "d",
                           },
                           Object {
-                            "end": "now",
-                            "label": "Year to date",
-                            "start": "now/y",
+                            "text": "years",
+                            "value": "y",
                           },
                         ]
                       }
-                      dateFormat=""
-                      end="now"
-                      isAutoRefreshOnly={false}
-                      isDisabled={false}
-                      isPaused={true}
-                      onTimeChange={[MockFunction]}
-                      recentlyUsedRanges={Array []}
-                      refreshInterval={0}
-                      showUpdateButton={true}
-                      start="now-1d"
-                      timeFormat="HH:mm"
+                      value="h"
                     >
-                      <EuiFlexGroup
-                        className="euiSuperDatePicker__flexWrapper"
-                        gutterSize="s"
-                        responsive={false}
+                      <EuiFormControlLayout
+                        compressed={false}
+                        fullWidth={false}
+                        icon={
+                          Object {
+                            "side": "right",
+                            "type": "arrowDown",
+                          }
+                        }
+                        inputId="select_123"
+                        isLoading={false}
                       >
                         <div
-                          className="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--directionRow euiSuperDatePicker__flexWrapper"
+                          className="euiFormControlLayout"
                         >
-                          <EuiFlexItem>
-                            <div
-                              className="euiFlexItem"
-                            >
-                              <EuiFormControlLayout
-                                className="euiSuperDatePicker"
-                                isDisabled={false}
-                                prepend={
-                                  <EuiQuickSelectPopover
-                                    applyTime={[Function]}
-                                    commonlyUsedRanges={
-                                      Array [
-                                        Object {
-                                          "end": "now/d",
-                                          "label": "Today",
-                                          "start": "now/d",
-                                        },
-                                        Object {
-                                          "end": "now/w",
-                                          "label": "This week",
-                                          "start": "now/w",
-                                        },
-                                        Object {
-                                          "end": "now/M",
-                                          "label": "This month",
-                                          "start": "now/M",
-                                        },
-                                        Object {
-                                          "end": "now/y",
-                                          "label": "This year",
-                                          "start": "now/y",
-                                        },
-                                        Object {
-                                          "end": "now-1d/d",
-                                          "label": "Yesterday",
-                                          "start": "now-1d/d",
-                                        },
-                                        Object {
-                                          "end": "now",
-                                          "label": "Week to date",
-                                          "start": "now/w",
-                                        },
-                                        Object {
-                                          "end": "now",
-                                          "label": "Month to date",
-                                          "start": "now/M",
-                                        },
-                                        Object {
-                                          "end": "now",
-                                          "label": "Year to date",
-                                          "start": "now/y",
-                                        },
-                                      ]
-                                    }
-                                    dateFormat=""
-                                    end="now"
-                                    isAutoRefreshOnly={false}
-                                    isDisabled={false}
-                                    isPaused={true}
-                                    recentlyUsedRanges={Array []}
-                                    refreshInterval={0}
-                                    start="now-1d"
-                                  />
+                          <div
+                            className="euiFormControlLayout__childrenWrapper"
+                          >
+                            <EuiValidatableControl>
+                              <select
+                                aria-label="resolutionSelect"
+                                className="euiSelect euiFormControlLayout__append resolutionSelectOption"
+                                id="select_123"
+                                onChange={[Function]}
+                                onMouseUp={[Function]}
+                                value="h"
+                              >
+                                <option
+                                  key="0"
+                                  value="s"
+                                >
+                                  seconds
+                                </option>
+                                <option
+                                  key="1"
+                                  value="m"
+                                >
+                                  minutes
+                                </option>
+                                <option
+                                  key="2"
+                                  value="h"
+                                >
+                                  hours
+                                </option>
+                                <option
+                                  key="3"
+                                  value="d"
+                                >
+                                  days
+                                </option>
+                                <option
+                                  key="4"
+                                  value="y"
+                                >
+                                  years
+                                </option>
+                              </select>
+                            </EuiValidatableControl>
+                            <EuiFormControlLayoutIcons
+                              compressed={false}
+                              icon={
+                                Object {
+                                  "side": "right",
+                                  "type": "arrowDown",
                                 }
+                              }
+                              isLoading={false}
+                            >
+                              <div
+                                className="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
                               >
-                                <div
-                                  className="euiFormControlLayout euiFormControlLayout--group euiSuperDatePicker"
+                                <EuiFormControlLayoutCustomIcon
+                                  size="m"
+                                  type="arrowDown"
                                 >
-                                  <EuiQuickSelectPopover
-                                    applyTime={[Function]}
-                                    className="euiFormControlLayout__prepend"
-                                    commonlyUsedRanges={
-                                      Array [
-                                        Object {
-                                          "end": "now/d",
-                                          "label": "Today",
-                                          "start": "now/d",
-                                        },
-                                        Object {
-                                          "end": "now/w",
-                                          "label": "This week",
-                                          "start": "now/w",
-                                        },
-                                        Object {
-                                          "end": "now/M",
-                                          "label": "This month",
-                                          "start": "now/M",
-                                        },
-                                        Object {
-                                          "end": "now/y",
-                                          "label": "This year",
-                                          "start": "now/y",
-                                        },
-                                        Object {
-                                          "end": "now-1d/d",
-                                          "label": "Yesterday",
-                                          "start": "now-1d/d",
-                                        },
-                                        Object {
-                                          "end": "now",
-                                          "label": "Week to date",
-                                          "start": "now/w",
-                                        },
-                                        Object {
-                                          "end": "now",
-                                          "label": "Month to date",
-                                          "start": "now/M",
-                                        },
-                                        Object {
-                                          "end": "now",
-                                          "label": "Year to date",
-                                          "start": "now/y",
-                                        },
-                                      ]
-                                    }
-                                    dateFormat=""
-                                    end="now"
-                                    isAutoRefreshOnly={false}
-                                    isDisabled={false}
-                                    isPaused={true}
-                                    key="0/.0"
-                                    recentlyUsedRanges={Array []}
-                                    refreshInterval={0}
-                                    start="now-1d"
-                                  >
-                                    <EuiPopover
-                                      anchorClassName="euiQuickSelectPopover__anchor"
-                                      anchorPosition="downLeft"
-                                      button={
-                                        <EuiButtonEmpty
-                                          aria-label="Date quick select"
-                                          className="euiFormControlLayout__prepend"
-                                          data-test-subj="superDatePickerToggleQuickMenuButton"
-                                          iconSide="right"
-                                          iconType="arrowDown"
-                                          isDisabled={false}
-                                          onClick={[Function]}
-                                          size="xs"
-                                          textProps={
-                                            Object {
-                                              "className": "euiQuickSelectPopover__buttonText",
-                                            }
-                                          }
-                                        >
-                                          <EuiIcon
-                                            type="calendar"
-                                          />
-                                        </EuiButtonEmpty>
-                                      }
-                                      closePopover={[Function]}
-                                      display="inlineBlock"
-                                      hasArrow={true}
-                                      isOpen={false}
-                                      ownFocus={true}
-                                      panelPaddingSize="m"
-                                    >
-                                      <div
-                                        className="euiPopover euiPopover--anchorDownLeft"
-                                      >
-                                        <div
-                                          className="euiPopover__anchor euiQuickSelectPopover__anchor"
-                                        >
-                                          <EuiButtonEmpty
-                                            aria-label="Date quick select"
-                                            className="euiFormControlLayout__prepend"
-                                            data-test-subj="superDatePickerToggleQuickMenuButton"
-                                            iconSide="right"
-                                            iconType="arrowDown"
-                                            isDisabled={false}
-                                            onClick={[Function]}
-                                            size="xs"
-                                            textProps={
-                                              Object {
-                                                "className": "euiQuickSelectPopover__buttonText",
-                                              }
-                                            }
-                                          >
-                                            <button
-                                              aria-label="Date quick select"
-                                              className="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--xSmall euiFormControlLayout__prepend"
-                                              data-test-subj="superDatePickerToggleQuickMenuButton"
-                                              disabled={false}
-                                              onClick={[Function]}
-                                              type="button"
-                                            >
-                                              <EuiButtonContent
-                                                className="euiButtonEmpty__content"
-                                                iconSide="right"
-                                                iconSize="s"
-                                                iconType="arrowDown"
-                                                textProps={
-                                                  Object {
-                                                    "className": "euiButtonEmpty__text euiQuickSelectPopover__buttonText",
-                                                  }
-                                                }
-                                              >
-                                                <span
-                                                  className="euiButtonContent euiButtonContent--iconRight euiButtonEmpty__content"
-                                                >
-                                                  <EuiIcon
-                                                    className="euiButtonContent__icon"
-                                                    color="inherit"
-                                                    size="s"
-                                                    type="arrowDown"
-                                                  >
-                                                    <EuiIconEmpty
-                                                      aria-hidden={true}
-                                                      className="euiIcon euiIcon--small euiIcon--inherit euiIcon-isLoading euiButtonContent__icon"
-                                                      focusable="false"
-                                                      role="img"
-                                                      style={null}
-                                                    >
-                                                      <svg
-                                                        aria-hidden={true}
-                                                        className="euiIcon euiIcon--small euiIcon--inherit euiIcon-isLoading euiButtonContent__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
-                                                    className="euiButtonEmpty__text euiQuickSelectPopover__buttonText"
-                                                  >
-                                                    <EuiIcon
-                                                      type="calendar"
-                                                    >
-                                                      <EuiIconEmpty
-                                                        aria-hidden={true}
-                                                        className="euiIcon euiIcon--medium euiIcon-isLoading"
-                                                        focusable="false"
-                                                        role="img"
-                                                        style={null}
-                                                      >
-                                                        <svg
-                                                          aria-hidden={true}
-                                                          className="euiIcon euiIcon--medium euiIcon-isLoading"
-                                                          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>
-                                              </EuiButtonContent>
-                                            </button>
-                                          </EuiButtonEmpty>
-                                        </div>
-                                      </div>
-                                    </EuiPopover>
-                                  </EuiQuickSelectPopover>
-                                  <div
-                                    className="euiFormControlLayout__childrenWrapper"
+                                  <span
+                                    className="euiFormControlLayoutCustomIcon"
                                   >
-                                    <EuiDatePickerRange
-                                      className="euiDatePickerRange--inGroup"
-                                      endDateControl={<div />}
-                                      iconType={false}
-                                      isCustom={true}
-                                      startDateControl={<div />}
+                                    <EuiIcon
+                                      aria-hidden="true"
+                                      className="euiFormControlLayoutCustomIcon__icon"
+                                      size="m"
+                                      type="arrowDown"
                                     >
-                                      <div
-                                        className="euiDatePickerRange euiDatePickerRange--inGroup"
+                                      <EuiIconEmpty
+                                        aria-hidden={true}
+                                        className="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
+                                        focusable="false"
+                                        role="img"
+                                        style={null}
                                       >
-                                        <button
-                                          className="euiSuperDatePicker__prettyFormat"
-                                          data-test-subj="superDatePickerShowDatesButton"
-                                          disabled={false}
-                                          onClick={[Function]}
-                                        >
-                                          Last 1 day
-                                          <span
-                                            className="euiSuperDatePicker__prettyFormatLink"
-                                          >
-                                            <EuiI18n
-                                              default="Show dates"
-                                              token="euiSuperDatePicker.showDatesButtonLabel"
-                                            >
-                                              Show dates
-                                            </EuiI18n>
-                                          </span>
-                                        </button>
-                                      </div>
-                                    </EuiDatePickerRange>
-                                    <EuiFormControlLayoutIcons />
-                                  </div>
-                                </div>
-                              </EuiFormControlLayout>
-                            </div>
-                          </EuiFlexItem>
-                          <EuiFlexItem
-                            grow={false}
+                                        <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>
+                      </EuiFormControlLayout>
+                    </EuiSelect>
+                  </div>
+                </EuiFormControlLayout>
+              </EuiFieldText>
+            </div>
+          </div>
+        </EuiFlexItem>
+        <EuiFlexItem
+          className="metrics-search-bar-datepicker"
+        >
+          <div
+            className="euiFlexItem metrics-search-bar-datepicker"
+          >
+            <EuiSuperDatePicker
+              commonlyUsedRanges={
+                Array [
+                  Object {
+                    "end": "now/d",
+                    "label": "Today",
+                    "start": "now/d",
+                  },
+                  Object {
+                    "end": "now/w",
+                    "label": "This week",
+                    "start": "now/w",
+                  },
+                  Object {
+                    "end": "now/M",
+                    "label": "This month",
+                    "start": "now/M",
+                  },
+                  Object {
+                    "end": "now/y",
+                    "label": "This year",
+                    "start": "now/y",
+                  },
+                  Object {
+                    "end": "now-1d/d",
+                    "label": "Yesterday",
+                    "start": "now-1d/d",
+                  },
+                  Object {
+                    "end": "now",
+                    "label": "Week to date",
+                    "start": "now/w",
+                  },
+                  Object {
+                    "end": "now",
+                    "label": "Month to date",
+                    "start": "now/M",
+                  },
+                  Object {
+                    "end": "now",
+                    "label": "Year to date",
+                    "start": "now/y",
+                  },
+                ]
+              }
+              dateFormat=""
+              end="now"
+              isAutoRefreshOnly={false}
+              isDisabled={false}
+              isPaused={true}
+              onTimeChange={[MockFunction]}
+              recentlyUsedRanges={Array []}
+              refreshInterval={0}
+              showUpdateButton={true}
+              start="now-1d"
+              timeFormat="HH:mm"
+            >
+              <EuiFlexGroup
+                className="euiSuperDatePicker__flexWrapper"
+                gutterSize="s"
+                responsive={false}
+              >
+                <div
+                  className="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--directionRow euiSuperDatePicker__flexWrapper"
+                >
+                  <EuiFlexItem>
+                    <div
+                      className="euiFlexItem"
+                    >
+                      <EuiFormControlLayout
+                        className="euiSuperDatePicker"
+                        isDisabled={false}
+                        prepend={
+                          <EuiQuickSelectPopover
+                            applyTime={[Function]}
+                            commonlyUsedRanges={
+                              Array [
+                                Object {
+                                  "end": "now/d",
+                                  "label": "Today",
+                                  "start": "now/d",
+                                },
+                                Object {
+                                  "end": "now/w",
+                                  "label": "This week",
+                                  "start": "now/w",
+                                },
+                                Object {
+                                  "end": "now/M",
+                                  "label": "This month",
+                                  "start": "now/M",
+                                },
+                                Object {
+                                  "end": "now/y",
+                                  "label": "This year",
+                                  "start": "now/y",
+                                },
+                                Object {
+                                  "end": "now-1d/d",
+                                  "label": "Yesterday",
+                                  "start": "now-1d/d",
+                                },
+                                Object {
+                                  "end": "now",
+                                  "label": "Week to date",
+                                  "start": "now/w",
+                                },
+                                Object {
+                                  "end": "now",
+                                  "label": "Month to date",
+                                  "start": "now/M",
+                                },
+                                Object {
+                                  "end": "now",
+                                  "label": "Year to date",
+                                  "start": "now/y",
+                                },
+                              ]
+                            }
+                            dateFormat=""
+                            end="now"
+                            isAutoRefreshOnly={false}
+                            isDisabled={false}
+                            isPaused={true}
+                            recentlyUsedRanges={Array []}
+                            refreshInterval={0}
+                            start="now-1d"
+                          />
+                        }
+                      >
+                        <div
+                          className="euiFormControlLayout euiFormControlLayout--group euiSuperDatePicker"
+                        >
+                          <EuiQuickSelectPopover
+                            applyTime={[Function]}
+                            className="euiFormControlLayout__prepend"
+                            commonlyUsedRanges={
+                              Array [
+                                Object {
+                                  "end": "now/d",
+                                  "label": "Today",
+                                  "start": "now/d",
+                                },
+                                Object {
+                                  "end": "now/w",
+                                  "label": "This week",
+                                  "start": "now/w",
+                                },
+                                Object {
+                                  "end": "now/M",
+                                  "label": "This month",
+                                  "start": "now/M",
+                                },
+                                Object {
+                                  "end": "now/y",
+                                  "label": "This year",
+                                  "start": "now/y",
+                                },
+                                Object {
+                                  "end": "now-1d/d",
+                                  "label": "Yesterday",
+                                  "start": "now-1d/d",
+                                },
+                                Object {
+                                  "end": "now",
+                                  "label": "Week to date",
+                                  "start": "now/w",
+                                },
+                                Object {
+                                  "end": "now",
+                                  "label": "Month to date",
+                                  "start": "now/M",
+                                },
+                                Object {
+                                  "end": "now",
+                                  "label": "Year to date",
+                                  "start": "now/y",
+                                },
+                              ]
+                            }
+                            dateFormat=""
+                            end="now"
+                            isAutoRefreshOnly={false}
+                            isDisabled={false}
+                            isPaused={true}
+                            key="0/.0"
+                            recentlyUsedRanges={Array []}
+                            refreshInterval={0}
+                            start="now-1d"
                           >
-                            <div
-                              className="euiFlexItem euiFlexItem--flexGrowZero"
+                            <EuiPopover
+                              anchorClassName="euiQuickSelectPopover__anchor"
+                              anchorPosition="downLeft"
+                              button={
+                                <EuiButtonEmpty
+                                  aria-label="Date quick select"
+                                  className="euiFormControlLayout__prepend"
+                                  data-test-subj="superDatePickerToggleQuickMenuButton"
+                                  iconSide="right"
+                                  iconType="arrowDown"
+                                  isDisabled={false}
+                                  onClick={[Function]}
+                                  size="xs"
+                                  textProps={
+                                    Object {
+                                      "className": "euiQuickSelectPopover__buttonText",
+                                    }
+                                  }
+                                >
+                                  <EuiIcon
+                                    type="calendar"
+                                  />
+                                </EuiButtonEmpty>
+                              }
+                              closePopover={[Function]}
+                              display="inlineBlock"
+                              hasArrow={true}
+                              isOpen={false}
+                              ownFocus={true}
+                              panelPaddingSize="m"
                             >
-                              <EuiSuperUpdateButton
-                                data-test-subj="superDatePickerApplyTimeButton"
-                                isDisabled={false}
-                                isLoading={false}
-                                needsUpdate={false}
-                                onClick={[Function]}
-                                showTooltip={true}
+                              <div
+                                className="euiPopover euiPopover--anchorDownLeft"
                               >
-                                <EuiToolTip
-                                  delay="regular"
-                                  position="bottom"
+                                <div
+                                  className="euiPopover__anchor euiQuickSelectPopover__anchor"
                                 >
-                                  <span
-                                    className="euiToolTipAnchor"
-                                    onKeyUp={[Function]}
-                                    onMouseOut={[Function]}
-                                    onMouseOver={[Function]}
+                                  <EuiButtonEmpty
+                                    aria-label="Date quick select"
+                                    className="euiFormControlLayout__prepend"
+                                    data-test-subj="superDatePickerToggleQuickMenuButton"
+                                    iconSide="right"
+                                    iconType="arrowDown"
+                                    isDisabled={false}
+                                    onClick={[Function]}
+                                    size="xs"
+                                    textProps={
+                                      Object {
+                                        "className": "euiQuickSelectPopover__buttonText",
+                                      }
+                                    }
                                   >
-                                    <EuiButton
-                                      className="euiSuperUpdateButton"
-                                      color="primary"
-                                      data-test-subj="superDatePickerApplyTimeButton"
-                                      fill={true}
-                                      iconType="refresh"
-                                      isDisabled={false}
-                                      isLoading={false}
-                                      onBlur={[Function]}
+                                    <button
+                                      aria-label="Date quick select"
+                                      className="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--xSmall euiFormControlLayout__prepend"
+                                      data-test-subj="superDatePickerToggleQuickMenuButton"
+                                      disabled={false}
                                       onClick={[Function]}
-                                      onFocus={[Function]}
-                                      textProps={
-                                        Object {
-                                          "className": "euiSuperUpdateButton__text",
-                                        }
-                                      }
+                                      type="button"
                                     >
-                                      <EuiButtonDisplay
-                                        baseClassName="euiButton"
-                                        className="euiSuperUpdateButton"
-                                        color="primary"
-                                        data-test-subj="superDatePickerApplyTimeButton"
-                                        disabled={false}
-                                        element="button"
-                                        fill={true}
-                                        iconType="refresh"
-                                        isDisabled={false}
-                                        isLoading={false}
-                                        onBlur={[Function]}
-                                        onClick={[Function]}
-                                        onFocus={[Function]}
+                                      <EuiButtonContent
+                                        className="euiButtonEmpty__content"
+                                        iconSide="right"
+                                        iconSize="s"
+                                        iconType="arrowDown"
                                         textProps={
                                           Object {
-                                            "className": "euiSuperUpdateButton__text",
+                                            "className": "euiButtonEmpty__text euiQuickSelectPopover__buttonText",
                                           }
                                         }
-                                        type="button"
                                       >
-                                        <button
-                                          className="euiButton euiButton--primary euiButton--fill euiSuperUpdateButton"
-                                          data-test-subj="superDatePickerApplyTimeButton"
-                                          disabled={false}
-                                          onBlur={[Function]}
-                                          onClick={[Function]}
-                                          onFocus={[Function]}
-                                          style={
-                                            Object {
-                                              "minWidth": undefined,
-                                            }
-                                          }
-                                          type="button"
+                                        <span
+                                          className="euiButtonContent euiButtonContent--iconRight euiButtonEmpty__content"
                                         >
-                                          <EuiButtonContent
-                                            className="euiButton__content"
-                                            iconSide="left"
-                                            iconType="refresh"
-                                            isLoading={false}
-                                            textProps={
-                                              Object {
-                                                "className": "euiButton__text euiSuperUpdateButton__text",
-                                              }
-                                            }
+                                          <EuiIcon
+                                            className="euiButtonContent__icon"
+                                            color="inherit"
+                                            size="s"
+                                            type="arrowDown"
                                           >
-                                            <span
-                                              className="euiButtonContent euiButton__content"
+                                            <EuiIconEmpty
+                                              aria-hidden={true}
+                                              className="euiIcon euiIcon--small euiIcon--inherit euiIcon-isLoading euiButtonContent__icon"
+                                              focusable="false"
+                                              role="img"
+                                              style={null}
                                             >
-                                              <EuiIcon
-                                                className="euiButtonContent__icon"
-                                                color="inherit"
-                                                size="m"
-                                                type="refresh"
+                                              <svg
+                                                aria-hidden={true}
+                                                className="euiIcon euiIcon--small euiIcon--inherit euiIcon-isLoading euiButtonContent__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
+                                            className="euiButtonEmpty__text euiQuickSelectPopover__buttonText"
+                                          >
+                                            <EuiIcon
+                                              type="calendar"
+                                            >
+                                              <EuiIconEmpty
+                                                aria-hidden={true}
+                                                className="euiIcon euiIcon--medium euiIcon-isLoading"
+                                                focusable="false"
+                                                role="img"
+                                                style={null}
                                               >
-                                                <EuiIconEmpty
+                                                <svg
                                                   aria-hidden={true}
-                                                  className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonContent__icon"
+                                                  className="euiIcon euiIcon--medium euiIcon-isLoading"
                                                   focusable="false"
+                                                  height={16}
                                                   role="img"
                                                   style={null}
-                                                >
-                                                  <svg
-                                                    aria-hidden={true}
-                                                    className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonContent__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
-                                                className="euiButton__text euiSuperUpdateButton__text"
-                                              >
-                                                <EuiI18n
-                                                  default="Refresh"
-                                                  token="euiSuperUpdateButton.refreshButtonLabel"
-                                                >
-                                                  Refresh
-                                                </EuiI18n>
-                                              </span>
-                                            </span>
-                                          </EuiButtonContent>
-                                        </button>
-                                      </EuiButtonDisplay>
-                                    </EuiButton>
+                                                  viewBox="0 0 16 16"
+                                                  width={16}
+                                                  xmlns="http://www.w3.org/2000/svg"
+                                                />
+                                              </EuiIconEmpty>
+                                            </EuiIcon>
+                                          </span>
+                                        </span>
+                                      </EuiButtonContent>
+                                    </button>
+                                  </EuiButtonEmpty>
+                                </div>
+                              </div>
+                            </EuiPopover>
+                          </EuiQuickSelectPopover>
+                          <div
+                            className="euiFormControlLayout__childrenWrapper"
+                          >
+                            <EuiDatePickerRange
+                              className="euiDatePickerRange--inGroup"
+                              endDateControl={<div />}
+                              iconType={false}
+                              isCustom={true}
+                              startDateControl={<div />}
+                            >
+                              <div
+                                className="euiDatePickerRange euiDatePickerRange--inGroup"
+                              >
+                                <button
+                                  className="euiSuperDatePicker__prettyFormat"
+                                  data-test-subj="superDatePickerShowDatesButton"
+                                  disabled={false}
+                                  onClick={[Function]}
+                                >
+                                  Last 1 day
+                                  <span
+                                    className="euiSuperDatePicker__prettyFormatLink"
+                                  >
+                                    <EuiI18n
+                                      default="Show dates"
+                                      token="euiSuperDatePicker.showDatesButtonLabel"
+                                    >
+                                      Show dates
+                                    </EuiI18n>
                                   </span>
-                                </EuiToolTip>
-                              </EuiSuperUpdateButton>
-                            </div>
-                          </EuiFlexItem>
+                                </button>
+                              </div>
+                            </EuiDatePickerRange>
+                            <EuiFormControlLayoutIcons />
+                          </div>
                         </div>
-                      </EuiFlexGroup>
-                    </EuiSuperDatePicker>
-                  </div>
-                </EuiFlexItem>
-                <EuiFlexItem
-                  grow={false}
-                >
-                  <div
-                    className="euiFlexItem euiFlexItem--flexGrowZero"
+                      </EuiFormControlLayout>
+                    </div>
+                  </EuiFlexItem>
+                  <EuiFlexItem
+                    grow={false}
                   >
-                    <EuiPopover
-                      anchorPosition="downCenter"
-                      button={
-                        <EuiButton
-                          data-test-subj="metrics__saveManagementPopover"
-                          iconSide="right"
-                          iconType="arrowDown"
-                          isDisabled={false}
-                          onClick={[Function]}
-                        >
-                          Save
-                        </EuiButton>
-                      }
-                      closePopover={[Function]}
-                      display="inlineBlock"
-                      hasArrow={true}
-                      isOpen={false}
-                      ownFocus={true}
-                      panelPaddingSize="m"
+                    <div
+                      className="euiFlexItem euiFlexItem--flexGrowZero"
                     >
-                      <div
-                        className="euiPopover euiPopover--anchorDownCenter"
+                      <EuiSuperUpdateButton
+                        data-test-subj="superDatePickerApplyTimeButton"
+                        isDisabled={false}
+                        isLoading={false}
+                        needsUpdate={false}
+                        onClick={[Function]}
+                        showTooltip={true}
                       >
-                        <div
-                          className="euiPopover__anchor"
+                        <EuiToolTip
+                          delay="regular"
+                          position="bottom"
                         >
-                          <EuiButton
-                            data-test-subj="metrics__saveManagementPopover"
-                            iconSide="right"
-                            iconType="arrowDown"
-                            isDisabled={false}
-                            onClick={[Function]}
+                          <span
+                            className="euiToolTipAnchor"
+                            onKeyUp={[Function]}
+                            onMouseOut={[Function]}
+                            onMouseOver={[Function]}
                           >
-                            <EuiButtonDisplay
-                              baseClassName="euiButton"
-                              data-test-subj="metrics__saveManagementPopover"
-                              disabled={false}
-                              element="button"
-                              iconSide="right"
-                              iconType="arrowDown"
+                            <EuiButton
+                              className="euiSuperUpdateButton"
+                              color="primary"
+                              data-test-subj="superDatePickerApplyTimeButton"
+                              fill={true}
+                              iconType="refresh"
                               isDisabled={false}
+                              isLoading={false}
+                              onBlur={[Function]}
                               onClick={[Function]}
-                              type="button"
+                              onFocus={[Function]}
+                              textProps={
+                                Object {
+                                  "className": "euiSuperUpdateButton__text",
+                                }
+                              }
                             >
-                              <button
-                                className="euiButton euiButton--primary"
-                                data-test-subj="metrics__saveManagementPopover"
+                              <EuiButtonDisplay
+                                baseClassName="euiButton"
+                                className="euiSuperUpdateButton"
+                                color="primary"
+                                data-test-subj="superDatePickerApplyTimeButton"
                                 disabled={false}
+                                element="button"
+                                fill={true}
+                                iconType="refresh"
+                                isDisabled={false}
+                                isLoading={false}
+                                onBlur={[Function]}
                                 onClick={[Function]}
-                                style={
+                                onFocus={[Function]}
+                                textProps={
                                   Object {
-                                    "minWidth": undefined,
+                                    "className": "euiSuperUpdateButton__text",
                                   }
                                 }
                                 type="button"
                               >
-                                <EuiButtonContent
-                                  className="euiButton__content"
-                                  iconSide="right"
-                                  iconType="arrowDown"
-                                  textProps={
+                                <button
+                                  className="euiButton euiButton--primary euiButton--fill euiSuperUpdateButton"
+                                  data-test-subj="superDatePickerApplyTimeButton"
+                                  disabled={false}
+                                  onBlur={[Function]}
+                                  onClick={[Function]}
+                                  onFocus={[Function]}
+                                  style={
                                     Object {
-                                      "className": "euiButton__text",
+                                      "minWidth": undefined,
                                     }
                                   }
+                                  type="button"
                                 >
-                                  <span
-                                    className="euiButtonContent euiButtonContent--iconRight euiButton__content"
+                                  <EuiButtonContent
+                                    className="euiButton__content"
+                                    iconSide="left"
+                                    iconType="refresh"
+                                    isLoading={false}
+                                    textProps={
+                                      Object {
+                                        "className": "euiButton__text euiSuperUpdateButton__text",
+                                      }
+                                    }
                                   >
-                                    <EuiIcon
-                                      className="euiButtonContent__icon"
-                                      color="inherit"
-                                      size="m"
-                                      type="arrowDown"
+                                    <span
+                                      className="euiButtonContent euiButton__content"
                                     >
-                                      <EuiIconEmpty
-                                        aria-hidden={true}
-                                        className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonContent__icon"
-                                        focusable="false"
-                                        role="img"
-                                        style={null}
+                                      <EuiIcon
+                                        className="euiButtonContent__icon"
+                                        color="inherit"
+                                        size="m"
+                                        type="refresh"
                                       >
-                                        <svg
+                                        <EuiIconEmpty
                                           aria-hidden={true}
                                           className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonContent__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
-                                      className="euiButton__text"
-                                    >
-                                      Save
+                                        >
+                                          <svg
+                                            aria-hidden={true}
+                                            className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonContent__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
+                                        className="euiButton__text euiSuperUpdateButton__text"
+                                      >
+                                        <EuiI18n
+                                          default="Refresh"
+                                          token="euiSuperUpdateButton.refreshButtonLabel"
+                                        >
+                                          Refresh
+                                        </EuiI18n>
+                                      </span>
                                     </span>
-                                  </span>
-                                </EuiButtonContent>
-                              </button>
-                            </EuiButtonDisplay>
-                          </EuiButton>
-                        </div>
-                      </div>
-                    </EuiPopover>
-                  </div>
-                </EuiFlexItem>
+                                  </EuiButtonContent>
+                                </button>
+                              </EuiButtonDisplay>
+                            </EuiButton>
+                          </span>
+                        </EuiToolTip>
+                      </EuiSuperUpdateButton>
+                    </div>
+                  </EuiFlexItem>
+                </div>
+              </EuiFlexGroup>
+            </EuiSuperDatePicker>
+          </div>
+        </EuiFlexItem>
+        <EuiFlexItem
+          grow={false}
+        >
+          <div
+            className="euiFlexItem euiFlexItem--flexGrowZero"
+          >
+            <EuiPopover
+              anchorPosition="downCenter"
+              button={
+                <EuiButton
+                  data-test-subj="metrics__saveManagementPopover"
+                  iconSide="right"
+                  iconType="arrowDown"
+                  isDisabled={false}
+                  onClick={[Function]}
+                >
+                  Save
+                </EuiButton>
+              }
+              closePopover={[Function]}
+              display="inlineBlock"
+              hasArrow={true}
+              isOpen={false}
+              ownFocus={true}
+              panelPaddingSize="m"
+            >
+              <div
+                className="euiPopover euiPopover--anchorDownCenter"
+              >
+                <div
+                  className="euiPopover__anchor"
+                >
+                  <EuiButton
+                    data-test-subj="metrics__saveManagementPopover"
+                    iconSide="right"
+                    iconType="arrowDown"
+                    isDisabled={false}
+                    onClick={[Function]}
+                  >
+                    <EuiButtonDisplay
+                      baseClassName="euiButton"
+                      data-test-subj="metrics__saveManagementPopover"
+                      disabled={false}
+                      element="button"
+                      iconSide="right"
+                      iconType="arrowDown"
+                      isDisabled={false}
+                      onClick={[Function]}
+                      type="button"
+                    >
+                      <button
+                        className="euiButton euiButton--primary"
+                        data-test-subj="metrics__saveManagementPopover"
+                        disabled={false}
+                        onClick={[Function]}
+                        style={
+                          Object {
+                            "minWidth": undefined,
+                          }
+                        }
+                        type="button"
+                      >
+                        <EuiButtonContent
+                          className="euiButton__content"
+                          iconSide="right"
+                          iconType="arrowDown"
+                          textProps={
+                            Object {
+                              "className": "euiButton__text",
+                            }
+                          }
+                        >
+                          <span
+                            className="euiButtonContent euiButtonContent--iconRight euiButton__content"
+                          >
+                            <EuiIcon
+                              className="euiButtonContent__icon"
+                              color="inherit"
+                              size="m"
+                              type="arrowDown"
+                            >
+                              <EuiIconEmpty
+                                aria-hidden={true}
+                                className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonContent__icon"
+                                focusable="false"
+                                role="img"
+                                style={null}
+                              >
+                                <svg
+                                  aria-hidden={true}
+                                  className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonContent__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
+                              className="euiButton__text"
+                            >
+                              Save
+                            </span>
+                          </span>
+                        </EuiButtonContent>
+                      </button>
+                    </EuiButtonDisplay>
+                  </EuiButton>
+                </div>
               </div>
-            </EuiFlexGroup>
+            </EuiPopover>
           </div>
-        </EuiPageHeaderSection>
-      </header>
-    </EuiPageHeader>
+        </EuiFlexItem>
+      </div>
+    </EuiFlexGroup>
+    <EuiSpacer
+      size="m"
+    >
+      <div
+        className="euiSpacer euiSpacer--m"
+      />
+    </EuiSpacer>
     <EuiFlexGroup
       gutterSize="s"
       justifyContent="flexEnd"
diff --git a/public/components/metrics/top_menu/top_menu.scss b/public/components/metrics/top_menu/top_menu.scss
index c69f202452..ff247f31d3 100644
--- a/public/components/metrics/top_menu/top_menu.scss
+++ b/public/components/metrics/top_menu/top_menu.scss
@@ -4,17 +4,13 @@
  */
 
 .resolutionSelect {
-    .euiFormControlLayout {
-        .euiFormControlLayout {
-            width: 116px;
-        }
-    }
+  max-width: 300px;
 }
 
-.resolutionSelectText {
-    width: 70px;
+.metrics-search-bar-input {
+  max-width: 500px;
 }
 
-.search-bar-top-menu{
-   width:25vw;
-}
\ No newline at end of file
+.metrics-search-bar-datepicker {
+  width: 500px;
+}
diff --git a/public/components/metrics/top_menu/top_menu.tsx b/public/components/metrics/top_menu/top_menu.tsx
index eeaf50268a..9bd8839c50 100644
--- a/public/components/metrics/top_menu/top_menu.tsx
+++ b/public/components/metrics/top_menu/top_menu.tsx
@@ -4,40 +4,39 @@
  */
 
 import {
-  EuiPageHeader,
-  EuiPageHeaderSection,
+  EuiButton,
+  EuiButtonEmpty,
+  EuiComboBoxOptionOption,
+  EuiFieldText,
   EuiFlexGroup,
   EuiFlexItem,
-  EuiFieldText,
+  EuiPopover,
+  EuiPopoverFooter,
   EuiSelect,
+  EuiSpacer,
   EuiSuperDatePicker,
-  ShortDate,
   OnTimeChangeProps,
-  EuiButton,
-  EuiComboBoxOptionOption,
-  EuiButtonEmpty,
-  EuiPopover,
-  EuiPopoverFooter,
+  ShortDate,
 } from '@elastic/eui';
 import { DurationRange } from '@elastic/eui/src/components/date_picker/types';
+import React, { useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
-import React, { useEffect, useState } from 'react';
-import { uiSettingsService } from '../../../../common/utils';
-import { MetricType } from '../../../../common/types/metrics';
+import { CoreStart } from '../../../../../../src/core/public';
+import { CUSTOM_PANELS_API_PREFIX } from '../../../../common/constants/custom_panels';
 import { resolutionOptions } from '../../../../common/constants/metrics';
-import './top_menu.scss';
+import { MetricType } from '../../../../common/types/metrics';
+import { uiSettingsService } from '../../../../common/utils';
+import SavedObjects from '../../../services/saved_objects/event_analytics/saved_objects';
+import { addVizToPanels, uuidRx } from '../../custom_panels/redux/panel_slice';
+import { sortMetricLayout, updateMetricsWithSelections } from '../helpers/utils';
 import {
   allAvailableMetricsSelector,
   metricsLayoutSelector,
   selectMetric,
 } from '../redux/slices/metrics_slice';
 import { SearchBar } from '../sidebar/search_bar';
-import { CoreStart } from '../../../../../../src/core/public';
-import SavedObjects from '../../../services/saved_objects/event_analytics/saved_objects';
-import { sortMetricLayout, updateMetricsWithSelections } from '../helpers/utils';
-import { CUSTOM_PANELS_API_PREFIX } from '../../../../common/constants/custom_panels';
 import { MetricsExportPanel } from './metrics_export_panel';
-import { addVizToPanels, uuidRx } from '../../custom_panels/redux/panel_slice';
+import './top_menu.scss';
 
 interface TopMenuProps {
   http: CoreStart['http'];
@@ -159,7 +158,7 @@ export const TopMenu = ({
 
   const handleSavingObjects = async () => {
     let savedMetricIds = [];
-    let savedMetricsInPanels = [];
+    const savedMetricsInPanels = [];
 
     try {
       savedMetricIds = await Promise.all(
@@ -220,92 +219,86 @@ export const TopMenu = ({
 
   return (
     <>
-      <EuiPageHeader>
-        <EuiPageHeaderSection>
-          <EuiFlexGroup className="search-bar-top-menu">
-            <EuiFlexItem>
-              <SearchBar setSearch={setSearch} />
-            </EuiFlexItem>
-          </EuiFlexGroup>
-        </EuiPageHeaderSection>
-        <EuiPageHeaderSection>
-          <EuiFlexGroup gutterSize="s">
-            <EuiFlexItem grow={false}>
-              <div className="resolutionSelect">
-                <EuiFieldText
-                  className="resolutionSelectText"
-                  prepend="Span Interval"
-                  value={spanValue}
-                  isInvalid={spanValue < 1}
-                  onChange={(e) => setSpanValue(e.target.value)}
-                  append={
-                    <EuiSelect
-                      id={resolutionSelectId}
-                      options={resolutionOptions}
-                      value={resolutionValue}
-                      onChange={(e) => onResolutionChange(e)}
-                      aria-label="resolutionSelect"
-                    />
-                  }
-                  disabled={IsTopPanelDisabled}
-                  aria-label="resolutionField"
+      <EuiFlexGroup gutterSize="s">
+        <EuiFlexItem grow={10}>
+          <SearchBar setSearch={setSearch} />
+        </EuiFlexItem>
+        <EuiFlexItem grow={false}>
+          <div className="resolutionSelect">
+            <EuiFieldText
+              className="resolutionSelectText"
+              prepend="Span Interval"
+              value={spanValue}
+              isInvalid={spanValue < 1}
+              onChange={(e) => setSpanValue(e.target.value)}
+              append={
+                <EuiSelect
+                  className="resolutionSelectOption"
+                  id={resolutionSelectId}
+                  options={resolutionOptions}
+                  value={resolutionValue}
+                  onChange={(e) => onResolutionChange(e)}
+                  aria-label="resolutionSelect"
                 />
-              </div>
-            </EuiFlexItem>
-            <EuiFlexItem grow={false}>
-              <EuiSuperDatePicker
-                dateFormat={uiSettingsService.get('dateFormat')}
-                start={startTime}
-                end={endTime}
-                onTimeChange={onDatePickerChange}
-                recentlyUsedRanges={recentlyUsedRanges}
-                isDisabled={IsTopPanelDisabled}
-              />
-            </EuiFlexItem>
-            <EuiFlexItem grow={false}>
-              <EuiPopover
-                button={Savebutton}
-                isOpen={isSavePanelOpen}
-                closePopover={() => setIsSavePanelOpen(false)}
-              >
-                <MetricsExportPanel
-                  http={http}
-                  visualizationsMetaData={visualizationsMetaData}
-                  setVisualizationsMetaData={setVisualizationsMetaData}
-                  sortedMetricsLayout={sortedMetricsLayout}
-                  selectedPanelOptions={selectedPanelOptions}
-                  setSelectedPanelOptions={setSelectedPanelOptions}
-                />
-                <EuiPopoverFooter>
-                  <EuiFlexGroup justifyContent="flexEnd">
-                    <EuiFlexItem grow={false}>
-                      <EuiButtonEmpty
-                        size="s"
-                        onClick={() => setIsSavePanelOpen(false)}
-                        data-test-subj="metrics__SaveCancel"
-                      >
-                        Cancel
-                      </EuiButtonEmpty>
-                    </EuiFlexItem>
-                    <EuiFlexItem grow={false}>
-                      <EuiButton
-                        size="s"
-                        fill
-                        onClick={() => {
-                          handleSavingObjects().then(() => setIsSavePanelOpen(false));
-                        }}
-                        data-test-subj="metrics__SaveConfirm"
-                      >
-                        Save
-                      </EuiButton>
-                    </EuiFlexItem>
-                  </EuiFlexGroup>
-                </EuiPopoverFooter>
-              </EuiPopover>
-            </EuiFlexItem>
-          </EuiFlexGroup>
-        </EuiPageHeaderSection>
-      </EuiPageHeader>
+              }
+              disabled={IsTopPanelDisabled}
+              aria-label="resolutionField"
+            />
+          </div>
+        </EuiFlexItem>
+        <EuiFlexItem className="metrics-search-bar-datepicker">
+          <EuiSuperDatePicker
+            dateFormat={uiSettingsService.get('dateFormat')}
+            start={startTime}
+            end={endTime}
+            onTimeChange={onDatePickerChange}
+            recentlyUsedRanges={recentlyUsedRanges}
+            isDisabled={IsTopPanelDisabled}
+          />
+        </EuiFlexItem>
+        <EuiFlexItem grow={false}>
+          <EuiPopover
+            button={Savebutton}
+            isOpen={isSavePanelOpen}
+            closePopover={() => setIsSavePanelOpen(false)}
+          >
+            <MetricsExportPanel
+              http={http}
+              visualizationsMetaData={visualizationsMetaData}
+              setVisualizationsMetaData={setVisualizationsMetaData}
+              sortedMetricsLayout={sortedMetricsLayout}
+              selectedPanelOptions={selectedPanelOptions}
+              setSelectedPanelOptions={setSelectedPanelOptions}
+            />
+            <EuiPopoverFooter>
+              <EuiFlexGroup justifyContent="flexEnd">
+                <EuiFlexItem grow={false}>
+                  <EuiButtonEmpty
+                    size="s"
+                    onClick={() => setIsSavePanelOpen(false)}
+                    data-test-subj="metrics__SaveCancel"
+                  >
+                    Cancel
+                  </EuiButtonEmpty>
+                </EuiFlexItem>
+                <EuiFlexItem grow={false}>
+                  <EuiButton
+                    size="s"
+                    fill
+                    onClick={() => {
+                      handleSavingObjects().then(() => setIsSavePanelOpen(false));
+                    }}
+                    data-test-subj="metrics__SaveConfirm"
+                  >
+                    Save
+                  </EuiButton>
+                </EuiFlexItem>
+              </EuiFlexGroup>
+            </EuiPopoverFooter>
+          </EuiPopover>
+        </EuiFlexItem>
+      </EuiFlexGroup>
+      <EuiSpacer size="m" />
       <EuiFlexGroup gutterSize="s" justifyContent="flexEnd">
         {editMode ? (
           <>