fix first review bugs

Author: Loggy

src/ConfigEditor.tsx

@@ -54,12 +54,12 @@ export class ConfigEditor extends PureComponent<Props, State> {
       <div className="gf-form-group">
         <div className="gf-form">
           <FormField
-            label="Endpoint"
+            label="Pyroscope instance"
             labelWidth={6}
             inputWidth={20}
             onChange={this.onPathChange}
             value={jsonData.path || ''}
-            placeholder="url to your pyroscope flamegraph API endpoint"
+            placeholder="url to your pyroscope instance"
           />
         </div>
 

src/QueryEditor.tsx

@@ -1,43 +1,57 @@
 import defaults from 'lodash/defaults';
 
-import React, { ChangeEvent, PureComponent } from 'react';
-import { LegacyForms } from '@grafana/ui';
-import { QueryEditorProps } from '@grafana/data';
+import React, { useState, useEffect } from 'react';
+import { AsyncSelect, Label, Field } from '@grafana/ui';
+import { QueryEditorProps, SelectableValue } from '@grafana/data';
 import { DataSource } from './datasource';
 import { defaultQuery, MyDataSourceOptions, FlamegraphQuery } from './types';
 
-const { FormField } = LegacyForms;
 
 type Props = QueryEditorProps<DataSource, FlamegraphQuery, MyDataSourceOptions>;
 
-export class QueryEditor extends PureComponent<Props> {
-  onNameChange = (event: ChangeEvent<HTMLInputElement>) => {
-    const { onChange, query, onRunQuery } = this.props;
-    onChange({ ...query, name: event.target.value });
-    onRunQuery();
-  };
+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 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('');
+  }, [])
 
-  render() {
-    const query = defaults(this.props.query, defaultQuery);
-    const { name } = query;
+  useEffect(() => {
+    const { onChange, query, onRunQuery } = props;
+    onChange({ ...query, name: appName.value });
+    onRunQuery();
+  }, [appName]);
 
     return (
       <div className="gf-form">
         {/* <FormField
-          width={4}
-          value={constant}
-          onChange={this.onConstantChange}
-          label="Constant"
-          type="number"
-          step="0.1"
-        /> */}
-        <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>
+        <Field>
+          <AsyncSelect
+            placeholder='Application name'
+            value={appName}
+            onChange={setAppName}
+            defaultOptions={names}
+            loadOptions={(query: string) => Promise.resolve(names.filter(name => name.value?.includes(query)))}
+          />
+        </Field>
+        </div>
       </div>
     );
-  }
 }

src/datasource.ts

@@ -18,14 +18,13 @@ export class DataSource extends DataSourceApi<FlamegraphQuery, MyDataSourceOptio
     this.instanceSettings = instanceSettings;
     this.backendSrv = getBackendSrv();
     this.url = instanceSettings.url || '';
-    console.log(instanceSettings)
   }
 
   instanceSettings: DataSourceInstanceSettings<MyDataSourceOptions>;
   backendSrv: BackendSrv;
   url: string;
 
-  async doRequest(query: FlamegraphQuery) {
+  async getFlamegraph(query: FlamegraphQuery) {
     const result = await this.backendSrv.fetch({
       method: 'GET',
       url: this.url +'/render/render',
@@ -35,15 +34,25 @@ export class DataSource extends DataSourceApi<FlamegraphQuery, MyDataSourceOptio
     return result;
   }
 
+  async getNames() {
+    const result = await this.backendSrv.fetch<Array<string>>({
+      method: 'GET',
+      url: this.url +'/render/label-values?label=__name__',
+    }).toPromise();
+
+    return result;
+  }
+
   async query(options: DataQueryRequest<FlamegraphQuery>): Promise<DataQueryResponse> {
     const { range } = options;
     const from = range.raw.from.valueOf();
     const until = range.raw.to.valueOf();
 
     const promises = options.targets.map((query) =>
-    this.doRequest({ ...query, from, until }).then((response: any) => {
+    this.getFlamegraph({ ...query, from, until }).then((response: any) => {
       const frame = new MutableDataFrame({
         refId: query.refId,
+        name: query.name,
         fields: [
           { name: "flamebearer", type: FieldType.other },
         ],
@@ -58,11 +67,22 @@ export class DataSource extends DataSourceApi<FlamegraphQuery, MyDataSourceOptio
     return Promise.all(promises).then((data) => ({ data }));
   }
 
+  loadAppNames(): Promise<any> {
+    return this.getNames();
+  }
+
   async testDatasource() {
-    // Implement a health check for your data source.
-    return {
-      status: 'success',
-      message: 'Success',
-    };
+    const names = await this.getNames();
+    if(names.status === 200) {
+      return {
+        status: 'success',
+        message: 'Success',
+      };
+    } else {
+      return {
+        status: 'error',
+        message: 'Server is not reachable',
+      };
+    }
   }
 }

src/img/logo.svg

@@ -21,7 +21,7 @@
     "links": [
       {
         "name": "Website",
-        "url": "https://github.com/grafana/grafana-starter-datasource"
+        "url": "https://pyroscope.io"
       },
       {
         "name": "License",

src/plugin.json

@@ -1,7 +1,7 @@
 import { DataQuery, DataSourceJsonData } from '@grafana/data';
 
 export interface FlamegraphQuery extends DataQuery {
-  name: string;
+  name?: string;
   format: string;
   from?: number | string;
   until?: number | string;