Graphite: use POST for /metrics/find requests (#17814)

* Add test that expects a POST request

* Change graphite /metric/find request to POST

Query parameter can become large enough
to exceed GET URI limits.

* Fix requests with time range

Initialise httpOptions.params

* Fix for supporting queries referencing template variable

public/app/plugins/datasource/graphite/datasource.ts

@@ -245,10 +245,12 @@ export function GraphiteDatasource(this: any, instanceSettings, $q, backendSrv,
     }
     }
 
 
     const httpOptions: any = {
     const httpOptions: any = {
-      method: 'GET',
+      method: 'POST',
       url: '/metrics/find',
       url: '/metrics/find',
-      params: {
-        query: interpolatedQuery,
+      params: {},
+      data: `query=${interpolatedQuery}`,
+      headers: {
+        'Content-Type': 'application/x-www-form-urlencoded',
       },
       },
       // for cancellations
       // for cancellations
       requestId: options.requestId,
       requestId: options.requestId,

public/app/plugins/datasource/graphite/specs/datasource.test.ts

@@ -303,6 +303,18 @@ describe('graphiteDatasource', () => {
       expect(requestOptions.params.expr).toEqual(['server=~backend*']);
       expect(requestOptions.params.expr).toEqual(['server=~backend*']);
       expect(results).not.toBe(null);
       expect(results).not.toBe(null);
     });
     });
+
+    it('/metrics/find should be POST', () => {
+      ctx.templateSrv.setGrafanaVariable('foo', 'bar');
+      ctx.ds.metricFindQuery('[[foo]]').then(data => {
+        results = data;
+      });
+      expect(requestOptions.url).toBe('/api/datasources/proxy/1/metrics/find');
+      expect(requestOptions.method).toEqual('POST');
+      expect(requestOptions.headers).toHaveProperty('Content-Type', 'application/x-www-form-urlencoded');
+      expect(requestOptions.data).toMatch(`query=bar`);
+      expect(requestOptions).toHaveProperty('params');
+    });
   });
   });
 });
 });