Merge branch 'feature/metrics' into feature/metrics-home

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 },

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
+}

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

@@ -3,8 +3,9 @@
  * 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 (

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>;
+};