Prometheus: Add info that using Loki as Prometheus data source is no longer supported and might stop working (#34650)

* Add information that Loki as Prometheus data source is not supported

* Fix ugly error when loki as prometheus used

* Refactor, add test

* Fix type error

* Fix test by passing missing method

* Update public/app/plugins/datasource/prometheus/query_hints.ts

* Remove optionality in prop

public/app/plugins/datasource/prometheus/components/PromQueryEditorByApp.test.tsx

@@ -12,6 +12,7 @@ import { testIds as regularTestIds } from './PromQueryEditor';
 function setup(app: CoreApp): RenderResult {
   const dataSource = ({
     createQuery: jest.fn((q) => q),
+    getInitHints: () => [],
     getPrometheusTime: jest.fn((date, roundup) => 123),
     languageProvider: {
       start: () => Promise.resolve([]),

public/app/plugins/datasource/prometheus/components/PromQueryField.test.tsx

@@ -3,7 +3,7 @@ import RCCascader from 'rc-cascader';
 import React from 'react';
 import PromQlLanguageProvider from '../language_provider';
 import PromQueryField from './PromQueryField';
-import { DataSourceInstanceSettings } from '@grafana/data';
+import { DataSourceInstanceSettings, PanelData, LoadingState, DataFrame } from '@grafana/data';
 import { PromOptions } from '../types';
 import { render, screen } from '@testing-library/react';
 
@@ -21,6 +21,7 @@ describe('PromQueryField', () => {
         getLabelKeys: () => [],
         metrics: [],
       },
+      getInitHints: () => [],
     } as unknown) as DataSourceInstanceSettings<PromOptions>;
 
     const queryField = render(
@@ -45,6 +46,7 @@ describe('PromQueryField', () => {
         getLabelKeys: () => [],
         metrics: [],
       },
+      getInitHints: () => [],
     } as unknown) as DataSourceInstanceSettings<PromOptions>;
     const queryField = render(
       <PromQueryField
@@ -61,6 +63,60 @@ describe('PromQueryField', () => {
     expect(bcButton).toBeDisabled();
   });
 
+  it('renders an initial hint if no data and initial hint provided', () => {
+    const datasource = ({
+      languageProvider: {
+        start: () => Promise.resolve([]),
+        syntax: () => {},
+        getLabelKeys: () => [],
+        metrics: [],
+      },
+      getInitHints: () => [{ label: 'Initial hint', type: 'INFO' }],
+    } as unknown) as DataSourceInstanceSettings<PromOptions>;
+    render(
+      <PromQueryField
+        // @ts-ignore
+        datasource={{ ...datasource, lookupsDisabled: true }}
+        query={{ expr: '', refId: '' }}
+        onRunQuery={() => {}}
+        onChange={() => {}}
+        history={[]}
+      />
+    );
+    expect(screen.getByText('Initial hint')).toBeInTheDocument();
+  });
+
+  it('renders query hint if data, query hint and initial hint provided', () => {
+    const datasource = ({
+      languageProvider: {
+        start: () => Promise.resolve([]),
+        syntax: () => {},
+        getLabelKeys: () => [],
+        metrics: [],
+      },
+      getInitHints: () => [{ label: 'Initial hint', type: 'INFO' }],
+      getQueryHints: () => [{ label: 'Query hint', type: 'INFO' }],
+    } as unknown) as DataSourceInstanceSettings<PromOptions>;
+    render(
+      <PromQueryField
+        // @ts-ignore
+        datasource={{ ...datasource }}
+        query={{ expr: '', refId: '' }}
+        onRunQuery={() => {}}
+        onChange={() => {}}
+        history={[]}
+        data={
+          {
+            series: [{ name: 'test name' }] as DataFrame[],
+            state: LoadingState.Done,
+          } as PanelData
+        }
+      />
+    );
+    expect(screen.getByText('Query hint')).toBeInTheDocument();
+    expect(screen.queryByText('Initial hint')).not.toBeInTheDocument();
+  });
+
   it('refreshes metrics when the data source changes', async () => {
     const defaultProps = {
       query: { expr: '', refId: '' },
@@ -74,6 +130,7 @@ describe('PromQueryField', () => {
         // @ts-ignore
         datasource={{
           languageProvider: makeLanguageProvider({ metrics: [metrics] }),
+          getInitHints: () => [],
         }}
         {...defaultProps}
       />

public/app/plugins/datasource/prometheus/components/PromQueryField.tsx

@@ -153,24 +153,21 @@ class PromQueryField extends React.PureComponent<PromQueryFieldProps, PromQueryF
 
   refreshHint = () => {
     const { datasource, query, data } = this.props;
+    const initHints = datasource.getInitHints();
+    const initHint = initHints.length > 0 ? initHints[0] : null;
 
     if (!data || data.series.length === 0) {
-      this.setState({ hint: null });
+      this.setState({
+        hint: initHint,
+      });
       return;
     }
 
     const result = isDataFrame(data.series[0]) ? data.series.map(toLegacyResponseData) : data.series;
-    const hints = datasource.getQueryHints(query, result);
-    let hint = hints.length > 0 ? hints[0] : null;
+    const queryHints = datasource.getQueryHints(query, result);
+    let queryHint = queryHints.length > 0 ? queryHints[0] : null;
 
-    // Hint for big disabled lookups
-    if (!hint && datasource.lookupsDisabled) {
-      hint = {
-        label: `Labels and metrics lookup was disabled in data source settings.`,
-        type: 'INFO',
-      };
-    }
-    this.setState({ hint });
+    this.setState({ hint: queryHint ?? initHint });
   };
 
   refreshMetrics = async () => {