Prepare for Grafana 11 (#66)

* grafana 11 prepare

* removed deprec. from test files

src/api/annotations.test.ts

@@ -218,7 +218,7 @@ describe('Annotations Api', () => {
       const result = await api.features.annotations.getFrame(query, range, '', {});
       expect(result?.length).toEqual(1);
       expect(result[0].fields.length).toEqual(16);
-      expect(result[0].fields[0].values.toArray()).toEqual([5]);
+      expect(result[0].fields[0].values).toEqual([5]);
     });
 
     it('Should handle getAnnotationsFrame request with no data', async () => {

src/api/annotations.ts

@@ -1,4 +1,13 @@
-import { FieldType, formatLabels, Labels, MutableDataFrame, ScopedVars, TimeRange } from '@grafana/data';
+import {
+  createDataFrame,
+  DataFrame,
+  FieldType,
+  formatLabels,
+  Labels,
+  ScopedVars,
+  TimeRange,
+  toDataFrame,
+} from '@grafana/data';
 import { getBackendSrv, getTemplateSrv } from '@grafana/runtime';
 import { lastValueFrom } from 'rxjs';
 
@@ -115,7 +124,7 @@ export class Annotations extends BaseApi {
     range: TimeRange,
     dashboardUid: string | undefined,
     scopedVars: ScopedVars
-  ): Promise<MutableDataFrame[]> => {
+  ): Promise<DataFrame[]> => {
     const annotations = await this.getAll(query, range, dashboardUid, scopedVars);
     if (!annotations.length) {
       return [];
@@ -217,16 +226,16 @@ export class Annotations extends BaseApi {
     /**
      * Create frame
      */
-    const frame = new MutableDataFrame({
+    let frame = createDataFrame({
       name: RequestType.ANNOTATIONS,
       refId: query.refId,
       fields,
     });
 
     /**
-     * Add Data
+     * Fields for data
      */
-    annotations.forEach((annotation) => {
+    const frameFields = annotations.map((annotation) => {
       let formattedLabels = '{}';
       let formattedValues = '';
       const text = annotation.text?.match(/{([^}]+)} - ([^}]*)/);
@@ -256,7 +265,6 @@ export class Annotations extends BaseApi {
       if (text?.length && text[2]) {
         formattedValues = text[2];
       }
-
       const row = [
         annotation.id,
         annotation.alertId,
@@ -283,10 +291,21 @@ export class Annotations extends BaseApi {
 
         row.push(alertTitle, alertUid);
       }
-
-      frame.appendRow(row);
+      return row;
     });
 
-    return [frame];
+    /**
+     * Add Data
+     */
+    frame = {
+      ...frame,
+      fields: frame.fields.map((field, fieldIndex) => ({
+        ...field,
+        values: frameFields.map((dataField) => dataField[fieldIndex]),
+      })),
+      length: frameFields.length,
+    };
+
+    return [toDataFrame(frame)];
   };
 }

src/api/datasources.test.ts

@@ -144,7 +144,7 @@ describe('Data Sources Api', () => {
       const result = await api.features.datasources.getFrame(query);
       expect(result?.length).toEqual(1);
       expect(result[0].fields.length).toEqual(11);
-      expect(result[0].fields[0].values.toArray()).toEqual([1, 2]);
+      expect(result[0].fields[0].values).toEqual([1, 2]);
     });
 
     it('Should handle getDataSourcesFrame request with no data', async () => {

src/api/datasources.ts

@@ -1,4 +1,4 @@
-import { DataSourceSettings, FieldType, MutableDataFrame } from '@grafana/data';
+import { DataFrame, DataSourceSettings, FieldType } from '@grafana/data';
 import { getBackendSrv } from '@grafana/runtime';
 import { lastValueFrom } from 'rxjs';
 
@@ -39,7 +39,7 @@ export class DataSources extends BaseApi {
   /**
    * Get Data Sources Frame
    */
-  getFrame = async (query: Query): Promise<MutableDataFrame[]> => {
+  getFrame = async (query: Query): Promise<DataFrame[]> => {
     const datasources = await this.getAll();
     if (!datasources.length) {
       return [];

src/api/health.test.ts

@@ -108,7 +108,7 @@ describe('Health Api', () => {
       const result = await api.features.health.getFrame(query);
       expect(result?.length).toEqual(1);
       expect(result[0].fields.length).toEqual(3);
-      expect(result[0].fields[0].values.toArray()).toEqual(['978237e7cb']);
+      expect(result[0].fields[0].values).toEqual(['978237e7cb']);
     });
 
     it('Should handle getHealthFrame request with no data', async () => {

src/api/health.ts

@@ -1,4 +1,4 @@
-import { FieldType, MutableDataFrame } from '@grafana/data';
+import { DataFrame, FieldType } from '@grafana/data';
 import { getBackendSrv } from '@grafana/runtime';
 import { lastValueFrom } from 'rxjs';
 
@@ -39,7 +39,7 @@ export class Health extends BaseApi {
   /**
    * Get Health Frame
    */
-  getFrame = async (query: Query): Promise<MutableDataFrame[]> => {
+  getFrame = async (query: Query): Promise<DataFrame[]> => {
     const health = await this.get();
     if (!health?.version) {
       return [];

src/api/org.ts

@@ -1,4 +1,4 @@
-import { MutableDataFrame, OrgProps } from '@grafana/data';
+import { DataFrame, OrgProps } from '@grafana/data';
 import { getBackendSrv } from '@grafana/runtime';
 import { lastValueFrom } from 'rxjs';
 
@@ -64,7 +64,7 @@ export class Org extends BaseApi {
   /**
    * Get Users Frame
    */
-  getUsersFrame = async (query: Query): Promise<MutableDataFrame[]> => {
+  getUsersFrame = async (query: Query): Promise<DataFrame[]> => {
     const items = await this.getUsers();
     if (!items.length) {
       return [];

src/api/provisioning.test.ts

@@ -270,7 +270,7 @@ describe('Provisioning Api', () => {
       const result = await api.features.provisioning.getAlertRulesFrame(query);
       expect(result?.length).toEqual(1);
       expect(result[0].fields.length).toEqual(9);
-      expect(result[0].fields[0].values.toArray()).toEqual([1]);
+      expect(result[0].fields[0].values).toEqual([1]);
     });
 
     it('Should handle getAlertRulesFrame request with no data', async () => {

src/api/provisioning.ts

@@ -1,4 +1,4 @@
-import { FieldType, MutableDataFrame } from '@grafana/data';
+import { DataFrame, FieldType } from '@grafana/data';
 import { getBackendSrv } from '@grafana/runtime';
 import { lastValueFrom } from 'rxjs';
 
@@ -44,7 +44,7 @@ export class Provisioning extends BaseApi {
   /**
    * Get Alert Rules Frame
    */
-  getAlertRulesFrame = async (query: Query): Promise<MutableDataFrame[]> => {
+  getAlertRulesFrame = async (query: Query): Promise<DataFrame[]> => {
     const rules = await this.getAlertRules();
     if (!rules.length) {
       return [];

src/datasource/datasource.ts

@@ -4,7 +4,6 @@ import {
   DataQueryResponse,
   DataSourceApi,
   DataSourceInstanceSettings,
-  MutableDataFrame,
 } from '@grafana/data';
 
 import { Api } from '../api';
@@ -112,7 +111,7 @@ export class DataSource extends DataSourceApi<Query, DataSourceOptions> {
      */
     await Promise.all(
       options.targets.map(async (target) => {
-        let frames: MutableDataFrame[] = [];
+        let frames: DataFrame[] = [];
 
         /**
          * Request Types

src/utils/frame.ts

@@ -1,4 +1,4 @@
-import { FieldType, getFieldTypeFromValue, MutableDataFrame } from '@grafana/data';
+import { createDataFrame, DataFrame, FieldType, getFieldTypeFromValue, toDataFrame } from '@grafana/data';
 
 /**
  * Field Mapper
@@ -26,11 +26,11 @@ export const convertToFrame = <TItem>({
   refId: string;
   fields: Array<FieldMapper<TItem>>;
   items: TItem[];
-}): MutableDataFrame => {
+}): DataFrame => {
   /**
    * Create frame
    */
-  const frame = new MutableDataFrame({
+  let frame = createDataFrame({
     name,
     refId,
     fields: fields.map(({ name, type }) => ({
@@ -39,14 +39,24 @@ export const convertToFrame = <TItem>({
     })),
   });
 
+  /**
+   * Get Fields For Item
+   */
+  const dataFields = items.map((item) => [...fields.map(({ getValue }) => getValue(item))]);
+
   /**
    * Add Data
    */
-  items.forEach((item) => {
-    frame.appendRow([...fields.map(({ getValue }) => getValue(item))]);
-  });
+  frame = {
+    ...frame,
+    fields: frame.fields.map((field, fieldIndex) => ({
+      ...field,
+      values: dataFields.map((dataField) => dataField[fieldIndex]),
+    })),
+    length: dataFields.length,
+  };
 
-  return frame;
+  return toDataFrame(frame);
 };
 
 /**