Metrics Explorer - single-line graph only, no legends (#1068) (#1073)

* Metrics Explorer - single-line graph only, no legends
---------


(cherry picked from commit 408d38f)

Signed-off-by: Peter Fitzgibbons <peter.fitzgibbons@gmail.com>
Signed-off-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Co-authored-by: Peter Fitzgibbons <peter.fitzgibbons@gmail.com>

public/components/custom_panels/helpers/utils.tsx

@@ -5,7 +5,7 @@
 
 import { ShortDate } from '@elastic/eui';
 import { DurationRange } from '@elastic/eui/src/components/date_picker/types';
-import _, { castArray, forEach, isEmpty } from 'lodash';
+import _, { forEach, isEmpty } from 'lodash';
 import { Moment } from 'moment-timezone';
 import React from 'react';
 import { Layout } from 'react-grid-layout';
@@ -345,10 +345,12 @@ const updateCatalogVisualizationQuery = ({
   const attributesGroupString = attributesGroupBy.toString();
   const startEpochTime = convertDateTime(startTime, true, false, true);
   const endEpochTime = convertDateTime(endTime, false, false, true);
-  const promQuery =
-    attributesGroupBy.length === 0
-      ? catalogTableName
-      : `${aggregation} by(${attributesGroupString}) (${catalogTableName})`;
+  // const promQuery =
+  //   attributesGroupBy.length === 0
+  //     ? `${aggregation} (${catalogTableName})`
+  //     : `${aggregation} by(${attributesGroupString}) (${catalogTableName})`;
+
+  const promQuery = `${aggregation} (${catalogTableName})`;
 
   return `source = ${catalogSourceName}.query_range('${promQuery}', ${startEpochTime}, ${endEpochTime}, '${spanParam}')`;
 };
@@ -420,7 +422,7 @@ export const renderCatalogVisualization = async ({
     layoutConfig: {
       height: 390,
       margin: { t: 5 },
-      legend: { orientation: 'h', yanchor: 'top', x: 0.0, y: -0.4 },
+      legend: { visible: false },
     },
   };
 

public/components/custom_panels/panel_modules/visualization_flyout/visualization_flyout_so.tsx

@@ -50,7 +50,6 @@ import { SavedObjectsActions } from '../../../../services/saved_objects/saved_ob
 import { ObservabilitySavedVisualization } from '../../../../services/saved_objects/saved_object_client/types';
 import { FlyoutContainers } from '../../../common/flyout_containers';
 import {
-  convertDateTime,
   displayVisualization,
   getQueryResponse,
   isDateValid,
@@ -59,6 +58,7 @@ import {
 import { replaceVizInPanel, selectPanel } from '../../redux/panel_slice';
 import './visualization_flyout.scss';
 import { useToast } from '../../../common/toast';
+import { convertDateTime } from '../../../common/query_utils';
 
 /*
  * VisaulizationFlyoutSO - This module create a flyout to add visualization for SavedObjects custom Panels