[BUG] [object Object] is not valid JSON in prometheus metrics

[shotor]

What is the bug?
A clear and concise description of the bug.

I added Prometheus as a data source. But when I go to /app/observability-metrics I see a quick flash of the metrics in the sidebar and then the content goes blank with a JS error in the console:

VM206:1 Uncaught (in promise) SyntaxError: "[object Object]" is not valid JSON
    at JSON.parse (<anonymous>)
    at displayVisualization (observabilityDashboards.plugin.js:1633:114610)
    at observabilityDashboards.chunk.4.js:1:411757
    at Object.fa [as useMemo] (osd-ui-shared-deps.js:435:61568)
    at t.useMemo (osd-ui-shared-deps.js:419:5984)
    at VisualizationContainer (observabilityDashboards.chunk.4.js:1:410467)
    at $i (osd-ui-shared-deps.js:435:57931)
    at Na (osd-ui-shared-deps.js:435:66792)
    at gs (osd-ui-shared-deps.js:435:105389)
    at uc (osd-ui-shared-deps.js:435:96718)

I put a breakpoint in displayVisualization (observabilityDashboards.plugin.js:1633:114610)

And I can see that metaData.userConfigs is a JavaScript object and not a string.

metaData.userConfigs = JSON.parse(metaData.userConfigs)

If I remove the JSON.parse in my Chrome devtools I can see the metrics in the sidebar. When I click a metric it goes blank again because my Chrome devtools is not making the change persistent. Not sure how to do that.

From source:

dashboards-observability/public/components/custom_panels/helpers/utils.tsx

Line 714 in 2d16727

metaData.userConfigs = JSON.parse(metaData.userConfigs);

An easy fix would be to check if it's already an object. But not sure why the expected value is string.

How can one reproduce the bug?

1. Add Prometheus metrics datasource
2. Click on it
3. Click on Query Data
4. See error

What is the expected behavior?

It should show the metrics

What is your host/environment?

• OS: debian12
• Docker 25.0.5
• Version 2.12.0

Do you have any additional context?

I'm getting metrics from:

• cAdvisor
• Metrics from the Prometheus instance itself

[Swiddis]

Thanks for the bug report! Tried following the refs to derive what the intended type is and it does look like it's inconsistently being used as a string and object. In a similar position: I tried refactoring to make a safer userConfig parser

const parseMetadataUserConfig = (
  userConfigs?: string | SavedObjectAttributes
): SavedObjectAttributes => {
  if (userConfigs === undefined || userConfigs === '') {
    return {};
  } else if (typeof userConfigs === 'string') {
    return JSON.parse(userConfigs);
  } else {
    return userConfigs;
  }
};

export const displayVisualization = (
  metaData: SavedVisualizationType | undefined,
  data: ExplorerData | undefined,
  type: string
) => {
  if (metaData === undefined || isEmpty(metaData)) {
    return <></>;
  }

  metaData.userConfigs = parseMetadataUserConfig(metaData.userConfigs);
  
  // And refactoring all the redundant spreads:
  const dataConfig = metaData.userConfigs?.dataConfig || {};

  // ...
}

And it seems to work to clear out most type errors, but I'm also missing context on what the prometheus flow should look like to begin with. Will see if I can find someone who knows it better.

[Swiddis]

More prometheus issues:

• [BUG] Error "Async Query APIs are disabled" when trying to access prometheus sql#2601
• [BUG] Data Connection panel should only show Access control tab when the datasource is Prometheus. #1666
• [BUG] Observability-Metrics fails to render page with Prometheus data source metric selected sql#2541

Looks like this is a testing blindspot. Assigning this to myself and @RyanL1997 for these issues and improving our testing.

[akshatmisra198808]

There is a bug for this created with all the details opensearch-project/sql#2541