fix diff bug and lint errors

Author: Loggy

jest.config.js

@@ -0,0 +1,8 @@
+// This file is needed because it is used by vscode and other tools that
+// call `jest` directly.  However, unless you are doing anything special
+// do not edit this file
+
+const standard = require('@grafana/toolkit/src/config/jest.plugin.config');
+
+// This process will use the same config that `yarn test` is using
+module.exports = standard.jestConfig();

src/ConfigEditor.tsx

@@ -1,7 +1,7 @@
 import React, { ChangeEvent, PureComponent } from 'react';
 import { LegacyForms } from '@grafana/ui';
 import { DataSourcePluginOptionsEditorProps } from '@grafana/data';
-import { MyDataSourceOptions, /* MySecureJsonData */ } from './types';
+import { MyDataSourceOptions } from './types';
 
 const { /* SecretFormField, */ FormField } = LegacyForms;
 
@@ -19,36 +19,9 @@ export class ConfigEditor extends PureComponent<Props, State> {
     onOptionsChange({ ...options, jsonData });
   };
 
-  // Secure field (only sent to the backend)
-  // onAPIKeyChange = (event: ChangeEvent<HTMLInputElement>) => {
-  //   const { onOptionsChange, options } = this.props;
-  //   onOptionsChange({
-  //     ...options,
-  //     secureJsonData: {
-  //       apiKey: event.target.value,
-  //     },
-  //   });
-  // };
-
-  // onResetAPIKey = () => {
-  //   const { onOptionsChange, options } = this.props;
-  //   onOptionsChange({
-  //     ...options,
-  //     secureJsonFields: {
-  //       ...options.secureJsonFields,
-  //       apiKey: false,
-  //     },
-  //     secureJsonData: {
-  //       ...options.secureJsonData,
-  //       apiKey: '',
-  //     },
-  //   });
-  // };
-
   render() {
     const { options } = this.props;
-    const { jsonData, /* secureJsonFields */ } = options;
-    // const secureJsonData = (options.secureJsonData || {}) as MySecureJsonData;
+    const { jsonData } = options;
 
     return (
       <div className="gf-form-group">
@@ -62,21 +35,6 @@ export class ConfigEditor extends PureComponent<Props, State> {
             placeholder="url to your pyroscope instance"
           />
         </div>
-
-        {/* <div className="gf-form-inline">
-          <div className="gf-form">
-            <SecretFormField
-              isConfigured={(secureJsonFields && secureJsonFields.apiKey) as boolean}
-              value={secureJsonData.apiKey || ''}
-              label="API Key"
-              placeholder="API Key of your pyroscope instance"
-              labelWidth={6}
-              inputWidth={20}
-              onReset={this.onResetAPIKey}
-              onChange={this.onAPIKeyChange}
-            />
-          </div>
-        </div> */}
       </div>
     );
   }

src/QueryEditor.tsx

@@ -6,53 +6,54 @@ import { QueryEditorProps, SelectableValue } from '@grafana/data';
 import { DataSource } from './datasource';
 import { defaultQuery, MyDataSourceOptions, FlamegraphQuery } from './types';
 
-
 type Props = QueryEditorProps<DataSource, FlamegraphQuery, MyDataSourceOptions>;
 
 export const QueryEditor = (props: Props) => {
   const query = defaults(props.query, defaultQuery);
   const [appName, setAppName] = useState<SelectableValue<string>>({ label: query.name, value: query.name });
-  const [names, setNames] = useState<SelectableValue<string>[]>([]);
+  const [names, setNames] = useState<Array<SelectableValue<string>>>([]);
   const loadAppNames = (query: string) => {
     return props.datasource.loadAppNames().then(
       result => setNames(result.data.map((value: string) => ({ label: value, value }))),
       response => {
         throw new Error(response.statusText);
       }
     );
-  }
+  };
 
   useEffect(() => {
     loadAppNames('');
-  }, [])
+    // eslint-disable-next-line
+  }, []);
 
   useEffect(() => {
     const { onChange, query, onRunQuery } = props;
-    if(appName.value) {
+    if (appName.value) {
       onChange({ ...query, name: appName.value });
       onRunQuery();
     }
+    // eslint-disable-next-line
   }, [appName]);
 
-    return (
-      <div className="gf-form">
-        {/* <FormField
+  return (
+    <div className="gf-form">
+      {/* <FormField
           labelWidth={8}
           value={name}
           onChange={this.onNameChange}
           label="Application name"
         /> */}
-        <div style={{display: 'flex', flexDirection: 'row', marginTop: '10px'}}>
-        <Label style={{marginTop: '8px', marginRight: '10px'}}>Application</Label>
+      <div style={{ display: 'flex', flexDirection: 'row', marginTop: '10px' }}>
+        <Label style={{ marginTop: '8px', marginRight: '10px' }}>Application</Label>
         <Select
-          onChange={(v) => v ? setAppName(v) : setAppName({label:'', value: ''})}
+          onChange={v => (v ? setAppName(v) : setAppName({ label: '', value: '' }))}
           value={appName}
           options={names}
           backspaceRemovesValue
           isClearable
           allowCustomValue
         />
-        </div>
       </div>
-    );
-}
+    </div>
+  );
+};

src/datasource.ts

@@ -6,12 +6,11 @@ import {
   MutableDataFrame,
   FieldType,
 } from '@grafana/data';
-import { getBackendSrv, BackendSrv } from "@grafana/runtime";
+import { getBackendSrv, BackendSrv } from '@grafana/runtime';
 
 import { FlamegraphQuery, MyDataSourceOptions } from './types';
 import { getTemplateSrv } from '@grafana/runtime';
-
-
+import { deltaDiff } from './flamebearer';
 
 export class DataSource extends DataSourceApi<FlamegraphQuery, MyDataSourceOptions> {
   constructor(instanceSettings: DataSourceInstanceSettings<MyDataSourceOptions>) {
@@ -26,20 +25,24 @@ export class DataSource extends DataSourceApi<FlamegraphQuery, MyDataSourceOptio
   url: string;
 
   async getFlamegraph(query: FlamegraphQuery) {
-    const result = await this.backendSrv.fetch({
-      method: 'GET',
-      url: this.url +'/render/render',
-      params: query,
-    }).toPromise();
+    const result = await this.backendSrv
+      .fetch({
+        method: 'GET',
+        url: this.url + '/render/render',
+        params: query,
+      })
+      .toPromise();
 
     return result;
   }
 
   async getNames() {
-    const result = await this.backendSrv.fetch<Array<string>>({
-      method: 'GET',
-      url: this.url +'/render/label-values?label=__name__',
-    }).toPromise();
+    const result = await this.backendSrv
+      .fetch<string[]>({
+        method: 'GET',
+        url: this.url + '/render/label-values?label=__name__',
+      })
+      .toPromise();
 
     return result;
   }
@@ -49,32 +52,36 @@ export class DataSource extends DataSourceApi<FlamegraphQuery, MyDataSourceOptio
     const from = range.raw.from.valueOf();
     const until = range.raw.to.valueOf();
 
-    const promises = options.targets.map((query) => {
+    const promises = options.targets.map(query => {
       let nameFromVar: string | undefined;
-      if(query?.name?.startsWith('$')) {
-        const appNameVar = getTemplateSrv().getVariables().find((vari => query?.name?.slice(1) === vari.name));
+      if (query?.name?.startsWith('$')) {
+        const appNameVar = getTemplateSrv()
+          .getVariables()
+          .find(vari => query?.name?.slice(1) === vari.name);
         // @ts-ignore
         nameFromVar = appNameVar?.query;
       }
       return this.getFlamegraph({ ...query, name: nameFromVar || query.name, from, until }).then((response: any) => {
         const frame = new MutableDataFrame({
           refId: query.refId,
           name: nameFromVar || query.name,
-          fields: [
-            { name: "flamebearer", type: FieldType.other },
-          ],
+          fields: [{ name: 'flamebearer', type: FieldType.other }],
           meta: {
-              preferredVisualisationType: 'table',
+            preferredVisualisationType: 'table',
           },
         });
 
-        frame.appendRow([response.data.flamebearer]);
+        frame.appendRow([
+          {
+            ...response.data.flamebearer,
+            levels: deltaDiff(response.data.flamebearer.levels),
+          },
+        ]);
 
         return frame;
-      })
-    }
-    );
-    return Promise.all(promises).then((data) => ({ data }));
+      });
+    });
+    return Promise.all(promises).then(data => ({ data }));
   }
 
   loadAppNames(): Promise<any> {
@@ -83,7 +90,7 @@ export class DataSource extends DataSourceApi<FlamegraphQuery, MyDataSourceOptio
 
   async testDatasource() {
     const names = await this.getNames();
-    if(names.status === 200) {
+    if (names.status === 200) {
       return {
         status: 'success',
         message: 'Success',

src/flamebearer.ts

@@ -0,0 +1,30 @@
+// ISC License
+
+// Copyright (c) 2018, Mapbox
+
+// Permission to use, copy, modify, and/or distribute this software for any purpose
+// with or without fee is hereby granted, provided that the above copyright notice
+// and this permission notice appear in all copies.
+
+// THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+// REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY AND
+// FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+// INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM LOSS
+// OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR OTHER
+// TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR PERFORMANCE OF
+// THIS SOFTWARE.
+
+// This component is based on flamebearer project
+//   https://github.com/mapbox/flamebearer
+
+export function deltaDiff(levels: any[]) {
+  const levelsCopy = new Array(...levels);
+  for (const level of levelsCopy) {
+    let prev = 0;
+    for (let i = 0; i < level.length; i += 4) {
+      level[i] += prev;
+      prev = level[i] + level[i + 1];
+    }
+  }
+  return levelsCopy;
+}