Prometheus: Change default httpMethod for new instances to POST (#31292)

* Implement POST to specific endpoints and change POST as default

* Add tests for PromSettings

* Add tests to dataosurce.ts for new functionality

* Remove /label /series implementation

* Update public/app/plugins/datasource/prometheus/configuration/PromSettings.tsx

public/app/plugins/datasource/prometheus/configuration/PromSettings.test.tsx

-import { getValueFromEventItem, promSettingsValidationEvents } from './PromSettings';
+import React, { SyntheticEvent } from 'react';
+import { render, screen } from '@testing-library/react';
 import { EventsWithValidation } from '@grafana/ui';
-import { SyntheticEvent } from 'react';
 import { SelectableValue } from '@grafana/data';
+import { getValueFromEventItem, promSettingsValidationEvents, PromSettings } from './PromSettings';
+import { createDefaultConfigOptions } from './mocks';
 
 describe('PromSettings', () => {
   describe('getValueFromEventItem', () => {
@@ -83,4 +85,56 @@ describe('PromSettings', () => {
       }
     );
   });
+  describe('PromSettings component', () => {
+    const defaultProps = createDefaultConfigOptions();
+
+    it('should show POST httpMethod if no httpMethod and no url', () => {
+      const options = defaultProps;
+      options.url = '';
+      options.jsonData.httpMethod = '';
+
+      render(
+        <div>
+          <PromSettings onOptionsChange={() => {}} options={options} />
+        </div>
+      );
+      expect(screen.getByText('POST')).toBeInTheDocument();
+    });
+    it('should show GET httpMethod if no httpMethod and url', () => {
+      const options = defaultProps;
+      options.url = 'test_url';
+      options.jsonData.httpMethod = '';
+
+      render(
+        <div>
+          <PromSettings onOptionsChange={() => {}} options={options} />
+        </div>
+      );
+      expect(screen.getByText('GET')).toBeInTheDocument();
+    });
+    it('should show POST httpMethod if POST httpMethod is configured', () => {
+      const options = defaultProps;
+      options.url = 'test_url';
+      options.jsonData.httpMethod = 'POST';
+
+      render(
+        <div>
+          <PromSettings onOptionsChange={() => {}} options={options} />
+        </div>
+      );
+      expect(screen.getByText('POST')).toBeInTheDocument();
+    });
+    it('should show GET httpMethod if GET httpMethod is configured', () => {
+      const options = defaultProps;
+      options.url = 'test_url';
+      options.jsonData.httpMethod = 'GET';
+
+      render(
+        <div>
+          <PromSettings onOptionsChange={() => {}} options={options} />
+        </div>
+      );
+      expect(screen.getByText('GET')).toBeInTheDocument();
+    });
+  });
 });

public/app/plugins/datasource/prometheus/configuration/PromSettings.tsx

@@ -11,8 +11,8 @@ import { ExemplarsSettings } from './ExemplarsSettings';
 const { Select, Input, FormField, Switch } = LegacyForms;
 
 const httpOptions = [
-  { value: 'GET', label: 'GET' },
   { value: 'POST', label: 'POST' },
+  { value: 'GET', label: 'GET' },
 ];
 
 type Props = Pick<DataSourcePluginOptionsEditorProps<PromOptions>, 'options' | 'onOptionsChange'>;
@@ -20,6 +20,17 @@ type Props = Pick<DataSourcePluginOptionsEditorProps<PromOptions>, 'options' | '
 export const PromSettings = (props: Props) => {
   const { options, onOptionsChange } = props;
 
+  /**
+   * We want to change the default httpMethod to 'POST' for all of the new Prometheus data sources instances (no url) added in 7.5+.
+   * We are explicitly adding httpMethod, as previously it could be undefined and defaulted to 'GET'.
+   * Undefined httpMethod is still going to be considered 'GET' for backward compatibility reasons, but if users open data
+   * source settings it is going to be set to 'GET' explicitly and it will be selected in httpMethod dropdown as 'GET'.
+   * */
+
+  if (!options.jsonData.httpMethod) {
+    options.url ? (options.jsonData.httpMethod = 'GET') : (options.jsonData.httpMethod = 'POST');
+  }
+
   return (
     <>
       <div className="gf-form-group">
@@ -64,7 +75,7 @@ export const PromSettings = (props: Props) => {
         <div className="gf-form">
           <InlineFormLabel
             width={13}
-            tooltip="Specify the HTTP Method to query Prometheus. (POST is only available in Prometheus >= v2.1.0)"
+            tooltip="You can use either POST or GET HTTP method to query your Prometheus data source. POST is the recommended method as it allows bigger queries. Change this to GET if you have a Prometheus version older than 2.1 or if POST requests are restricted in your network."
           >
             HTTP Method
           </InlineFormLabel>

public/app/plugins/datasource/prometheus/configuration/mocks.ts

+import { DataSourceSettings } from '@grafana/data';
+import { PromOptions } from '../types';
+import { createDatasourceSettings } from '../../../../features/datasources/mocks';
+
+export function createDefaultConfigOptions(): DataSourceSettings<PromOptions> {
+  return createDatasourceSettings<PromOptions>({
+    timeInterval: '1m',
+    queryTimeout: '1m',
+    httpMethod: 'GET',
+    directUrl: 'url',
+  });
+}

public/app/plugins/datasource/prometheus/datasource.ts

@@ -83,7 +83,6 @@ export class PrometheusDatasource extends DataSourceApi<PromQuery, PromOptions>
     this.languageProvider = new PrometheusLanguageProvider(this);
     this.lookupsDisabled = instanceSettings.jsonData.disableMetricsLookup ?? false;
     this.customQueryParameters = new URLSearchParams(instanceSettings.jsonData.customQueryParameters);
-
     this.variables = new PrometheusVariableSupport(this, this.templateSrv, this.timeSrv);
   }
 
@@ -144,6 +143,7 @@ export class PrometheusDatasource extends DataSourceApi<PromQuery, PromOptions>
         data[key] = value;
       }
     }
+
     return this._request<T>(url, data, { method: 'GET', hideFromInspector: true }).toPromise(); // toPromise until we change getTagValues, getTagKeys to Observable
   }