Adding Empty View and Side Bar

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

@@ -0,0 +1,24 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+#opensearch-dashboards-body {
+  overflow-y: hidden;
+}
+
+.liveStream {
+  margin : 8px;
+  height: 40px;
+  align-items: center;
+  justify-content: center;
+  flex-direction: row;
+  display: flex;
+  flex-grow: 1;
+  vertical-align: baseline;
+}
+
+.mainContentTabs .euiResizableContainer {
+  height: calc(100vh - 298px);
+}
+

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

@@ -3,7 +3,9 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
+import './index.scss';
 import {
+  EuiButtonIcon,
   EuiPage,
   EuiPageBody,
   EuiPageHeader,
@@ -30,6 +32,9 @@ import { uiSettingsService } from '../../../common/utils';
 import { ChromeBreadcrumb, CoreStart } from '../../../../../src/core/public';
 import { ObservabilitySideBar } from '../common/side_nav';
 import { onTimeChange } from './helpers/utils';
+import { Sidebar } from './sidebar/sidebar';
+import { EuiAccordion } from '@opensearch-project/oui';
+import { EmptyMetricsView } from './view/empty_view';
 
 interface MetricsProps {
   http: CoreStart['http'];
@@ -44,11 +49,17 @@ export const Home = ({
   parentBreadcrumb,
   renderProps,
 }: MetricsProps) => {
+
+  // Date picker constants
   const [recentlyUsedRanges, setRecentlyUsedRanges] = useState<DurationRange[]>([]);
   const [start, setStart] = useState<ShortDate>('now-30m');
   const [end, setEnd] = useState<ShortDate>('now');
   const [dateDisabled, setDateDisabled] = useState(false);
 
+  // Side bar constants
+  const [ isSidebarClosed, setIsSidebarClosed ] = useState(false);
+  const recentlyCreatedFields = ['1', '2', '3', '4']
+
   const onRefreshFilters = (startTime: ShortDate, endTime: ShortDate) => {
     // if (!isDateValid(convertDateTime(startTime), convertDateTime(endTime, false), setToast)) {
     //   return;
@@ -78,27 +89,46 @@ export const Home = ({
           <div>
             <EuiPage>
               <EuiPageBody component="div">
-                <EuiPageHeader>
+                {/* <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>
+                </EuiPageHeader> */}
+                <EuiFlexGroup gutterSize="s" justifyContent="flexEnd">
+                  <EuiFlexItem grow={false}>
+                    <EuiSuperDatePicker
+                      dateFormat={uiSettingsService.get('dateFormat')}
+                      start={start}
+                      end={end}
+                      onTimeChange={onDatePickerChange}
+                      recentlyUsedRanges={recentlyUsedRanges}
+                      isDisabled={dateDisabled}
+                    />
+                  </EuiFlexItem>
+                {/* <EuiPageContentBody> */}
+                </EuiFlexGroup>
+                <div className="row">
+                  {!isSidebarClosed && <Sidebar recentlyCreatedFields={recentlyCreatedFields} />}
+                  <EuiButtonIcon
+                    iconType={isSidebarClosed ? 'menuRight' : 'menuLeft'}
+                    iconSize="m"
+                    size="s"
+                    onClick={() => {
+                      setIsSidebarClosed((staleState) => {
+                        return !staleState;
+                      });
+                    }}
+                    data-test-subj="collapseSideBarButton"
+                    aria-controls="discover-sidebar"
+                    aria-expanded={isSidebarClosed ? 'false' : 'true'}
+                    aria-label="Toggle sidebar"
+                    className="dscCollapsibleSidebar__collapseButton"
+                  />
+                </div>
+                <EmptyMetricsView />
+                {/* </EuiPageContentBody> */}
               </EuiPageBody>
             </EuiPage>
           </div>

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

@@ -0,0 +1,57 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React, { useState } from 'react';
+import { isEmpty } from 'lodash';
+import { EuiTitle, EuiSpacer, EuiFieldSearch, EuiAccordion } from '@elastic/eui';
+import { I18nProvider } from '@osd/i18n/react';
+
+interface ISidebarProps {
+  // recentlyCreatedFields: any;
+  // selectedFields: any;
+  // availableFields: any;
+}
+
+export const Sidebar = (props: ISidebarProps) => {
+  // const { recentlyCreatedFields } = props;
+  const [showFields, setShowFields] = useState<boolean>(false);
+  const [searchTerm, setSearchTerm] = useState<string>('');
+
+  return (
+    <I18nProvider>
+      <section className="sidebar-list">
+        <EuiAccordion
+          initialIsOpen
+          id="recentlyCreatedMetricsSelector"
+          buttonContent={
+            <EuiTitle size="xxxs">
+              <span>Recently Created Fields</span>
+            </EuiTitle>
+          }
+          paddingSize="xs"
+        />
+        <EuiSpacer size="s" />
+        <EuiAccordion
+          initialIsOpen
+          id="selectedMetricsSelector"
+          buttonContent={
+            <EuiTitle size="xxxs">
+              <span>Selected Metrics</span>
+            </EuiTitle>
+          }
+        /><EuiSpacer size="s" />
+        <EuiAccordion
+          initialIsOpen
+          id="selectedMetricsSelector"
+          buttonContent={
+            <EuiTitle size="xxxs">
+              <span>Available Metrics</span>
+            </EuiTitle>
+          }
+        />
+      </section>
+    </I18nProvider>
+  );
+};

dashboards-observability/public/components/metrics/view/empty_view.tsx

@@ -0,0 +1,24 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { EuiSpacer, EuiText, EuiIcon, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
+import React, { useState } from 'react';
+
+export const EmptyMetricsView = () => {
+  return (
+    <div>
+      <EuiSpacer size="xxl" />
+      <EuiText textAlign="center">
+        <EuiIcon type="minusInCircle" size="xxl" />
+        <EuiSpacer size="s" />
+        <h2>No Metrics Selected</h2>
+        <EuiSpacer size="m" />
+        <EuiText color="subdued" size="m">
+          Select a metric from the left sidepanel to view results.
+        </EuiText>
+      </EuiText>
+    </div>
+  );
+};