added empty view

Signed-off-by: Shenoy Pratik <[email protected]>
opensearch-project · Oct 21, 2022 · 116fa97 · 116fa97
1 parent ecb4a16
commit 116fa97
Show file tree

Hide file tree

Showing 5 changed files with 76 additions and 44 deletions.
diff --git a/dashboards-observability/public/components/custom_panels/helpers/utils.tsx b/dashboards-observability/public/components/custom_panels/helpers/utils.tsx
@@ -289,15 +289,15 @@ export const isPPLFilterValid = (
 
 // Renders visualization in the vizualization container component
 export const displayVisualization = (metaData: any, data: any, type: string) => {
-  if (metaData === undefined || metaData === {}) {
+  if (metaData === undefined || _.isEmpty(metaData)) {
     return <></>;
   }
   return (
     <Visualization
       visualizations={getVizContainerProps({
         vizId: type,
         rawVizData: data,
-        query: {},
+        query: { rawQuery: metaData.query },
         indexFields: {},
         userConfigs: metaData.user_configs,
         explorer: { explorerData: data, explorerFields: data.metadata.fields },

diff --git a/dashboards-observability/public/components/metrics/index.tsx b/dashboards-observability/public/components/metrics/index.tsx
@@ -43,22 +43,16 @@ interface MetricsProps {
   renderProps: RouteComponentProps<any, StaticContext, any>;
 }
 
-export const Home = ({
-  http,
-  chrome,
-  parentBreadcrumb,
-  renderProps,
-}: MetricsProps) => {
-
+export const Home = ({ http, chrome, 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 [isSidebarClosed, setIsSidebarClosed] = useState(false);
+  const recentlyCreatedFields = ['1', '2', '3', '4'];
 
   const onRefreshFilters = (startTime: ShortDate, endTime: ShortDate) => {
     // if (!isDateValid(convertDateTime(startTime), convertDateTime(endTime, false), setToast)) {
@@ -89,13 +83,13 @@ export const Home = ({
           <div>
             <EuiPage>
               <EuiPageBody component="div">
-                {/* <EuiPageHeader>
+                <EuiPageHeader>
                   <EuiPageHeaderSection>
                     <EuiTitle size="l">
                       <h1>Metrics</h1>
                     </EuiTitle>
                   </EuiPageHeaderSection>
-                </EuiPageHeader> */}
+                </EuiPageHeader>
                 <EuiFlexGroup gutterSize="s" justifyContent="flexEnd">
                   <EuiFlexItem grow={false}>
                     <EuiSuperDatePicker
@@ -107,27 +101,36 @@ export const Home = ({
                       isDisabled={dateDisabled}
                     />
                   </EuiFlexItem>
-                {/* <EuiPageContentBody> */}
+                  {/* <EuiPageContentBody> */}
+                </EuiFlexGroup>
+                <EuiSpacer size="l" />
+                <EuiFlexGroup>
+                  <EuiFlexItem grow={false}>
+                    <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>
+                  </EuiFlexItem>
+                  <EuiFlexItem>
+                    <EmptyMetricsView />
+                  </EuiFlexItem>
                 </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>

diff --git a/dashboards-observability/public/components/metrics/view/empty_view.scss b/dashboards-observability/public/components/metrics/view/empty_view.scss
@@ -0,0 +1,15 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+.empty-view-metrics {
+    min-height: 70vh;
+    justify-content: center;
+    display: flex;
+    align-items: center;
+}
+
+.align-center-view {
+    text-align: center
+}
diff --git a/dashboards-observability/public/components/metrics/view/empty_view.tsx b/dashboards-observability/public/components/metrics/view/empty_view.tsx
@@ -3,22 +3,26 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { EuiSpacer, EuiText, EuiIcon, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
+import { EuiSpacer, EuiText, EuiIcon, EuiFlexGroup, EuiFlexItem, EuiPanel } from '@elastic/eui';
 import React, { useState } from 'react';
+import './empty_view.scss';
 
 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>
+      <EuiPanel className="empty-view-metrics">
+        <div className="align-center-view">
+          <EuiText>
+            <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>
+      </EuiPanel>
     </div>
   );
 };
diff --git a/dashboards-observability/public/components/metrics/view/metrics_table_view.tsx b/dashboards-observability/public/components/metrics/view/metrics_table_view.tsx
@@ -0,0 +1,10 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React from 'react';
+
+export const MetricsTableView = () => {
+  return <div>metrics_table_view</div>;
+};