Added Metrics Home Page and date picker

Signed-off-by: Sean Li <lnse@amazon.com>

dashboards-observability/public/components/app.tsx

@@ -17,6 +17,7 @@ import { Home as CustomPanelsHome } from './custom_panels/home';
 import { EventAnalytics } from './event_analytics';
 import { Main as NotebooksHome } from './notebooks/components/main';
 import { Home as TraceAnalyticsHome } from './trace_analytics/home';
+import { Home as MetricsHome } from './metrics/index';
 
 interface ObservabilityAppDeps {
   CoreStartProp: CoreStart;
@@ -59,6 +60,23 @@ export const App = ({
         <I18nProvider>
           <>
             <Switch>
+              <Route
+                path="/metrics"
+                render={(props) => {
+                  chrome.setBreadcrumbs([
+                    parentBreadcrumb,
+                    { text: 'Metrics', href: '#/metrics/' },
+                  ]);
+                  return (
+                    <MetricsHome
+                      http={http}
+                      chrome={chrome}
+                      parentBreadcrumb={parentBreadcrumb}
+                      renderProps={props}
+                    />
+                  );
+                }}
+              />
               <Route
                 path={'/application_analytics'}
                 render={(props) => {

dashboards-observability/public/components/common/side_nav.tsx

@@ -88,6 +88,11 @@ export function ObservabilitySideBar(props: { children: React.ReactNode }) {
           id: 5,
           href: '#/notebooks',
         },
+        {
+          name: 'Metrics',
+          id: 6,
+          href: '#/metrics',
+        },
       ],
     },
   ];

dashboards-observability/public/components/metrics/helpers/utils.tsx

@@ -0,0 +1,43 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import dateMath from '@elastic/datemath';
+import { ShortDate } from '@elastic/eui';
+import { DurationRange } from '@elastic/eui/src/components/date_picker/types';
+import _ from 'lodash';
+import { Moment } from 'moment-timezone';
+import { PPL_DATE_FORMAT, PPL_INDEX_REGEX } from '../../../../common/constants/shared';
+import PPLService from '../../../services/requests/ppl';
+import React from 'react';
+
+export const convertDateTime = (datetime: string, isStart = true, formatted = true) => {
+  let returnTime: undefined | Moment;
+  if (isStart) {
+    returnTime = dateMath.parse(datetime);
+  } else {
+    returnTime = dateMath.parse(datetime, { roundUp: true });
+  }
+
+  if (formatted) return returnTime!.format(PPL_DATE_FORMAT);
+  return returnTime;
+};
+
+export const onTimeChange = (
+  start: ShortDate,
+  end: ShortDate,
+  recentlyUsedRanges: DurationRange[],
+  setRecentlyUsedRanges: React.Dispatch<React.SetStateAction<DurationRange[]>>,
+  setStart: React.Dispatch<React.SetStateAction<string>>,
+  setEnd: React.Dispatch<React.SetStateAction<string>>
+) => {
+  const recentlyUsedRange = recentlyUsedRanges.filter((recentlyUsedRange) => {
+    const isDuplicate = recentlyUsedRange.start === start && recentlyUsedRange.end === end;
+    return !isDuplicate;
+  });
+  recentlyUsedRange.unshift({ start, end });
+  setStart(start);
+  setEnd(end);
+  setRecentlyUsedRanges(recentlyUsedRange.slice(0, 9));
+};

dashboards-observability/public/components/metrics/index.tsx

@@ -0,0 +1,109 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import {
+  EuiPage,
+  EuiPageBody,
+  EuiPageHeader,
+  EuiPageHeaderSection,
+  EuiSpacer,
+  EuiSuperDatePicker,
+  EuiSuperDatePickerProps,
+  EuiText,
+  EuiTitle,
+  EuiTabbedContent,
+  OnRefreshChangeProps,
+  OnRefreshProps,
+  OnTimeChangeProps,
+  ShortDate,
+  EuiPageContentBody,
+  EuiFlexGroup,
+  EuiFlexItem,
+} from '@elastic/eui';
+import { DurationRange } from '@elastic/eui/src/components/date_picker/types';
+import React, { Fragment, useState } from 'react';
+import { StaticContext } from 'react-router-dom';
+import { Route, RouteComponentProps } from 'react-router-dom';
+import { uiSettingsService } from '../../../common/utils';
+import { ChromeBreadcrumb, CoreStart } from '../../../../../src/core/public';
+import { ObservabilitySideBar } from '../common/side_nav';
+import { onTimeChange } from './helpers/utils';
+
+export interface MetricsProps {
+  http: CoreStart['http'];
+  chrome: CoreStart['chrome'];
+  parentBreadcrumb: ChromeBreadcrumb;
+  renderProps: RouteComponentProps<any, StaticContext, any>;
+}
+
+export const Home = ({
+  http,
+  chrome,
+  parentBreadcrumb,
+  renderProps,
+}: MetricsProps) => {
+  const [recentlyUsedRanges, setRecentlyUsedRanges] = useState<DurationRange[]>([]);
+  const [start, setStart] = useState<ShortDate>('now-30m');
+  const [end, setEnd] = useState<ShortDate>('now');
+  const [dateDisabled, setDateDisabled] = useState(false);
+
+  const onRefreshFilters = (startTime: ShortDate, endTime: ShortDate) => {
+    // if (!isDateValid(convertDateTime(startTime), convertDateTime(endTime, false), setToast)) {
+    //   return;
+    // }
+
+    console.log('refreshed date picker');
+  };
+
+  const onDatePickerChange = (props: OnTimeChangeProps) => {
+    onTimeChange(
+      props.start,
+      props.end,
+      recentlyUsedRanges,
+      setRecentlyUsedRanges,
+      setStart,
+      setEnd
+    );
+    onRefreshFilters(props.start, props.end);
+  };
+
+  return (
+    <>
+      <Route
+        exact
+        path="/metrics"
+        render={(props) => (
+          <div>
+            <EuiPage>
+              <EuiPageBody component="div">
+                <EuiPageHeader>
+                  <EuiPageHeaderSection>
+                    <EuiTitle size="l">
+                      <h1>Metrics</h1>
+                    </EuiTitle>
+                  </EuiPageHeaderSection>
+                </EuiPageHeader>
+                <EuiPageContentBody>
+                  <EuiFlexGroup gutterSize="s">
+                    <EuiFlexItem grow={false}>
+                      <EuiSuperDatePicker
+                        dateFormat={uiSettingsService.get('dateFormat')}
+                        start={start}
+                        end={end}
+                        onTimeChange={onDatePickerChange}
+                        recentlyUsedRanges={recentlyUsedRanges}
+                        isDisabled={dateDisabled}
+                      />
+                    </EuiFlexItem>
+                  </EuiFlexGroup>
+                </EuiPageContentBody>
+              </EuiPageBody>
+            </EuiPage>
+          </div>
+        )}
+      />
+    </>
+  );
+};