Loki: Replaces dataSourceRequest with fetch (#27265)

* Loki: Replaces dataSourceRequest with fetch

* Update public/app/plugins/datasource/loki/datasource.ts

Co-authored-by: Zoltán Bedi <zoltan.bedi@gmail.com>

Co-authored-by: Zoltán Bedi <zoltan.bedi@gmail.com>

public/app/plugins/datasource/loki/datasource.ts

 // Libraries
 // Libraries
-import { isEmpty, map as lodashMap, cloneDeep } from 'lodash';
-import { Observable, from, merge, of } from 'rxjs';
-import { map, catchError, switchMap } from 'rxjs/operators';
-
-// Services & Utils
-import { DataFrame, dateMath, FieldCache, QueryResultMeta, TimeRange } from '@grafana/data';
-import { getBackendSrv, BackendSrvRequest, FetchError } from '@grafana/runtime';
-import { addLabelToQuery } from 'app/plugins/datasource/prometheus/add_label_to_query';
-import { TemplateSrv } from 'app/features/templating/template_srv';
-import { convertToWebSocketUrl } from 'app/core/utils/explore';
-import { lokiResultsToTableModel, processRangeQueryResponse, lokiStreamResultToDataFrame } from './result_transformer';
-import { getHighlighterExpressionsFromQuery } from './query_utils';
-import { getTimeSrv } from 'app/features/dashboard/services/TimeSrv';
+import { cloneDeep, isEmpty, map as lodashMap } from 'lodash';
+import { merge, Observable, of } from 'rxjs';
+import { catchError, map, switchMap } from 'rxjs/operators';
 
 
 // Types
 // Types
 import {
 import {
-  LogRowModel,
-  DateTime,
-  LoadingState,
   AnnotationEvent,
   AnnotationEvent,
+  AnnotationQueryRequest,
+  DataFrame,
   DataFrameView,
   DataFrameView,
-  PluginMeta,
-  DataSourceApi,
-  DataSourceInstanceSettings,
   DataQueryError,
   DataQueryError,
   DataQueryRequest,
   DataQueryRequest,
   DataQueryResponse,
   DataQueryResponse,
-  AnnotationQueryRequest,
+  DataSourceApi,
+  DataSourceInstanceSettings,
+  dateMath,
+  DateTime,
+  FieldCache,
+  LoadingState,
+  LogRowModel,
+  PluginMeta,
+  QueryResultMeta,
   ScopedVars,
   ScopedVars,
+  TimeRange,
 } from '@grafana/data';
 } from '@grafana/data';
+import { BackendSrvRequest, FetchError, getBackendSrv } from '@grafana/runtime';
+import { addLabelToQuery } from 'app/plugins/datasource/prometheus/add_label_to_query';
+import { TemplateSrv } from 'app/features/templating/template_srv';
+import { convertToWebSocketUrl } from 'app/core/utils/explore';
+import { lokiResultsToTableModel, lokiStreamResultToDataFrame, processRangeQueryResponse } from './result_transformer';
+import { getHighlighterExpressionsFromQuery } from './query_utils';
+import { getTimeSrv } from 'app/features/dashboard/services/TimeSrv';
 
 
 import {
 import {
-  LokiQuery,
   LokiOptions,
   LokiOptions,
+  LokiQuery,
+  LokiRangeQueryRequest,
   LokiResponse,
   LokiResponse,
   LokiResultType,
   LokiResultType,
-  LokiRangeQueryRequest,
   LokiStreamResponse,
   LokiStreamResponse,
 } from './types';
 } from './types';
 import { LiveStreams, LokiLiveTarget } from './live_streams';
 import { LiveStreams, LokiLiveTarget } from './live_streams';
@@ -79,7 +81,7 @@ export class LokiDatasource extends DataSourceApi<LokiQuery, LokiOptions> {
       url,
       url,
     };
     };
 
 
-    return from(getBackendSrv().datasourceRequest(req));
+    return getBackendSrv().fetch<Record<string, any>>(req);
   }
   }
 
 
   query(options: DataQueryRequest<LokiQuery>): Observable<DataQueryResponse> {
   query(options: DataQueryRequest<LokiQuery>): Observable<DataQueryResponse> {

public/test/helpers/observableTester.ts

+import { Observable } from 'rxjs';
+
+interface ObservableTester<T> {
+  observable: Observable<T>;
+  done: jest.DoneCallback;
+}
+
+interface SubscribeAndExpectOnNext<T> extends ObservableTester<T> {
+  expect: (value: T) => void;
+}
+
+interface SubscribeAndExpectOnComplete<T> extends ObservableTester<T> {
+  expect: () => void;
+}
+
+interface SubscribeAndExpectOnError<T> extends ObservableTester<T> {
+  expect: (err: any) => void;
+}
+
+export const observableTester = () => {
+  const subscribeAndExpectOnNext = <T>({ observable, expect, done }: SubscribeAndExpectOnNext<T>): void => {
+    observable.subscribe({
+      next: value => {
+        try {
+          expect(value);
+        } catch (err) {
+          done.fail(err);
+        }
+      },
+      error: err => done.fail(err),
+      complete: () => done(),
+    });
+  };
+
+  const subscribeAndExpectOnComplete = <T>({ observable, expect, done }: SubscribeAndExpectOnComplete<T>): void => {
+    observable.subscribe({
+      next: () => {},
+      error: err => done.fail(err),
+      complete: () => {
+        try {
+          expect();
+          done();
+        } catch (err) {
+          done.fail(err);
+        }
+      },
+    });
+  };
+
+  const subscribeAndExpectOnError = <T>({ observable, expect, done }: SubscribeAndExpectOnError<T>): void => {
+    observable.subscribe({
+      next: () => {},
+      error: err => {
+        try {
+          expect(err);
+          done();
+        } catch (err) {
+          done.fail(err);
+        }
+      },
+      complete: () => {
+        done();
+      },
+    });
+  };
+
+  return { subscribeAndExpectOnNext, subscribeAndExpectOnComplete, subscribeAndExpectOnError };
+};