added dummy search field, panel push button (#1227)

Signed-off-by: Shenoy Pratik <[email protected]> Signed-off-by: Shenoy Pratik <[email protected]>
opensearch-project · Nov 2, 2022 · ff0b28c · ff0b28c
1 parent f61d18b
commit ff0b28c
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 5 deletions.
diff --git 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;
 }
diff --git 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">