From ff0b28cd52b464360231fa631b43adce43faa4ae Mon Sep 17 00:00:00 2001
From: Shenoy Pratik <sgguruda@amazon.com>
Date: Wed, 2 Nov 2022 11:57:21 -0700
Subject: [PATCH] added dummy search field, panel push button (#1227)

Signed-off-by: Shenoy Pratik <sgguruda@amazon.com>

Signed-off-by: Shenoy Pratik <sgguruda@amazon.com>
---
 .../components/metrics/top_menu/top_menu.scss |  4 ++++
 .../components/metrics/top_menu/top_menu.tsx  | 22 ++++++++++++++-----
 2 files changed, 21 insertions(+), 5 deletions(-)

diff --git a/public/components/metrics/top_menu/top_menu.scss b/public/components/metrics/top_menu/top_menu.scss
index 8c3be93ff..66d99cc18 100644
--- a/public/components/metrics/top_menu/top_menu.scss
+++ b/public/components/metrics/top_menu/top_menu.scss
@@ -13,4 +13,8 @@
 
 .resolutionSelectText {
     width: 100px;
+}
+
+.search-bar-top-menu{
+   width:25vw;
 }
\ No newline at end of file
diff --git a/public/components/metrics/top_menu/top_menu.tsx b/public/components/metrics/top_menu/top_menu.tsx
index d2aaf5492..96c8701ec 100644
--- a/public/components/metrics/top_menu/top_menu.tsx
+++ b/public/components/metrics/top_menu/top_menu.tsx
@@ -10,15 +10,17 @@ import {
   ShortDate,
   OnTimeChangeProps,
   EuiButton,
+  EuiFieldSearch,
+  EuiButtonIcon,
 } from '@elastic/eui';
 import { DurationRange } from '@elastic/eui/src/components/date_picker/types';
 import { uiSettingsService } from '../../../../common/utils';
 import React, { useState } from 'react';
-
-import './top_menu.scss';
 import { MetricType } from '../../../../common/types/metrics';
 import { resolutionOptions } from '../../../../common/constants/metrics';
 
+import './top_menu.scss';
+
 interface TopMenuProps {
   IsTopPanelDisabled: boolean;
   startTime: ShortDate;
@@ -106,9 +108,19 @@ export const TopMenu = ({
     <>
       <EuiPageHeader>
         <EuiPageHeaderSection>
-          <EuiTitle size="l">
-            <h1>Metrics</h1>
-          </EuiTitle>
+          <EuiFlexGroup className="search-bar-top-menu">
+            <EuiFlexItem>
+              <EuiFieldSearch
+                placeholder="Search metrics"
+                isClearable={true}
+                aria-label="Use aria labels when no actual label is in use"
+                fullWidth={true}
+              />
+            </EuiFlexItem>
+            <EuiFlexItem grow={false}>
+              <EuiButtonIcon iconType="menuLeft"></EuiButtonIcon>
+            </EuiFlexItem>
+          </EuiFlexGroup>
         </EuiPageHeaderSection>
         <EuiPageHeaderSection>
           <EuiFlexGroup gutterSize="s">