[Backport 2.14] Backport prometheus fix to 2.x

public/components/custom_panels/helpers/utils.tsx

@@ -9,7 +9,7 @@
 import { Moment } from 'moment-timezone';
 import React from 'react';
 import { Layout } from 'react-grid-layout';
-import { CoreStart } from '../../../../../../src/core/public';
+import { CoreStart, SavedObjectAttributes } from '../../../../../../src/core/public';
 import { PPL_INDEX_REGEX, PPL_WHERE_CLAUSE_REGEX } from '../../../../common/constants/shared';
 import { QueryManager } from '../../../../common/query_manager';
 import {
@@ -307,7 +307,7 @@
 
 // Creates a catalogVisualization for a runtime catalog based PPL query and runs getQueryResponse
 export const renderCatalogVisualization = async ({
   http,
   pplService,
   catalogSource,
   startTime,
@@ -321,7 +321,7 @@
   setVisualizationMetaData,
   setIsLoading,
   setIsError,
   spanResolution,
   visualization,
 }: {
   http: CoreStart['http'];
@@ -347,7 +347,7 @@
 
   const visualizationType = 'line';
   const visualizationTimeField = '@timestamp';
   const visualizationSubType = visualization.subType;
 
   const visualizationQuery = updateCatalogVisualizationQuery({
     ...visualization.queryMetaData,
@@ -482,7 +482,7 @@
   return true;
 };
 
 export const processMetricsData = (schema: any, dataConfig: any) => {
   if (isEmpty(schema)) return {};
   if (
     schema.length === 3 &&
@@ -493,10 +493,10 @@
   return {};
 };
 
 export const prepareMetricsData = (schema: any, dataConfig: any) => {
   const metricBreakdown: any[] = [];
   const metricSeries: any[] = [];
   const metricDimension: any[] = [];
 
   forEach(schema, (field) => {
     if (field.name === '@timestamp')
@@ -513,16 +513,39 @@
   };
 };
 
+export const constructOtelMetricsMetaData = () => {
+  const otelMetricSeries: any[] = [];
+  const otelMetricDimension: any[] = [];
+
+  otelMetricDimension.push({ name: 'xAxis', label: 'xAxis', customLabel: '' });
+  otelMetricSeries.push({ name: '', label: '', aggregation: 'count', customLabel: '' });
+
+  return {
+    series: otelMetricSeries,
+    dimensions: otelMetricDimension,
+    span: {},
+  };
+};
+
+export const parseMetadataUserConfig = (
+  userConfigs?: string | SavedObjectAttributes
+): SavedObjectAttributes => {
+  if (userConfigs === undefined || userConfigs === '') {
+    return {};
+  } else if (typeof userConfigs === 'string') {
+    return JSON.parse(userConfigs);
+  } else {
+    return userConfigs;
+  }
+};
+
 // Renders visualization in the vizualization container component
 export const displayVisualization = (metaData: any, data: any, type: string) => {
   if (metaData === undefined || isEmpty(metaData)) {
     return <></>;
   }
 
-  if (metaData.userConfigs !== undefined && metaData.userConfigs !== '') {
-    metaData.userConfigs = JSON.parse(metaData.userConfigs);
-  }
-
+  metaData.userConfigs = parseMetadataUserConfig(metaData.userConfigs);
   const dataConfig = { ...(metaData.userConfigs?.dataConfig || {}) };
   const hasBreakdowns = !_.isEmpty(dataConfig.breakdowns);
   const realTimeParsedStats = {