Add auto-completion

Author: marcusolsson

src/components/DashboardQueryEditor.tsx

@@ -1,11 +1,11 @@
 import React from 'react';
 import { QueryEditorProps } from '@grafana/data';
-import { DataSource } from '../datasource';
+import { JsonDataSource } from '../datasource';
 import { JsonApiDataSourceOptions, JsonApiQuery } from '../types';
 import { QueryEditor } from './QueryEditor';
 
-type Props = QueryEditorProps<DataSource, JsonApiQuery, JsonApiDataSourceOptions>;
+type Props = QueryEditorProps<JsonDataSource, JsonApiQuery, JsonApiDataSourceOptions>;
 
-export const DashboardQueryEditor: React.FC<Props> = ({ onRunQuery, onChange, query }) => {
-  return <QueryEditor onRunQuery={onRunQuery} onChange={onChange} query={query} />;
+export const DashboardQueryEditor: React.FC<Props> = (props) => {
+  return <QueryEditor {...props} disableSuggestions={false} />;
 };

src/components/JsonPathQueryField.tsx

@@ -1,17 +1,33 @@
 import React from 'react';
 
-import { QueryField, SlatePrism, BracesPlugin } from '@grafana/ui';
+import { QueryField, SlatePrism, BracesPlugin, TypeaheadInput, TypeaheadOutput } from '@grafana/ui';
+import { JsonPathLanguageProvider } from 'languageProvider';
+import { JsonDataSource } from 'datasource';
+import { JsonApiQuery } from 'types';
+import { TimeRange } from '@grafana/data';
 
 interface Props {
   query: string;
   onBlur: () => void;
   onChange: (v: string) => void;
+  datasource: JsonDataSource;
+  context: JsonApiQuery;
+  timeRange?: TimeRange;
+  suggestions: boolean;
 }
 
 /**
  * JsonPathQueryField is an editor for JSON Path.
  */
-export const JsonPathQueryField: React.FC<Props> = ({ query, onBlur, onChange }) => {
+export const JsonPathQueryField: React.FC<Props> = ({
+  query,
+  onBlur,
+  onChange,
+  datasource,
+  context,
+  timeRange,
+  suggestions,
+}) => {
   /**
    * The QueryField supports Slate plugins, so let's add a few useful ones.
    */
@@ -23,10 +39,26 @@ export const JsonPathQueryField: React.FC<Props> = ({ query, onBlur, onChange })
     }),
   ];
 
+  const jsonPathLanguageProvider = datasource.languageProvider as JsonPathLanguageProvider;
+
+  const cleanText = datasource.languageProvider ? jsonPathLanguageProvider.cleanText : undefined;
+
+  const onTypeahead = async (input: TypeaheadInput): Promise<TypeaheadOutput> => {
+    if (!datasource.languageProvider) {
+      return { suggestions: [] };
+    }
+
+    const languageProvider = datasource.languageProvider as JsonPathLanguageProvider;
+
+    return languageProvider.provideCompletionItems(input, context, timeRange);
+  };
+
   return (
     <QueryField
       additionalPlugins={plugins}
       query={query}
+      cleanText={cleanText}
+      onTypeahead={suggestions ? onTypeahead : undefined}
       onRunQuery={onBlur}
       onChange={onChange}
       portalOrigin="jsonapi"

src/components/QueryEditor.tsx

@@ -12,13 +12,14 @@ import {
   useTheme,
   InfoBox,
 } from '@grafana/ui';
-import { SelectableValue, FieldType } from '@grafana/data';
+import { SelectableValue, FieldType, TimeRange } from '@grafana/data';
 import { JsonApiQuery, defaultQuery } from '../types';
 import { JsonPathQueryField } from './JsonPathQueryField';
 import { KeyValueEditor } from './KeyValueEditor';
 import AutoSizer from 'react-virtualized-auto-sizer';
 import { css } from 'emotion';
 import { Pair } from '../types';
+import { JsonDataSource } from 'datasource';
 
 // type Props = QueryEditorProps<DataSource, JsonApiQuery, JsonApiDataSourceOptions>;
 
@@ -27,9 +28,20 @@ interface Props {
   onChange: (query: JsonApiQuery) => void;
   query: JsonApiQuery;
   limitFields?: number;
+  datasource: JsonDataSource;
+  range?: TimeRange;
+  disableSuggestions: boolean;
 }
 
-export const QueryEditor: React.FC<Props> = ({ onRunQuery, onChange, query, limitFields }) => {
+export const QueryEditor: React.FC<Props> = ({
+  onRunQuery,
+  onChange,
+  query,
+  limitFields,
+  datasource,
+  range,
+  disableSuggestions,
+}) => {
   const [bodyType, setBodyType] = useState('plaintext');
   const [tabIndex, setTabIndex] = useState(0);
   const theme = useTheme();
@@ -111,7 +123,15 @@ export const QueryEditor: React.FC<Props> = ({ onRunQuery, onChange, query, limi
                 }
                 grow
               >
-                <JsonPathQueryField onBlur={onRunQuery} onChange={onChangePath(index)} query={field.jsonPath} />
+                <JsonPathQueryField
+                  datasource={datasource}
+                  onBlur={onRunQuery}
+                  onChange={onChangePath(index)}
+                  query={field.jsonPath}
+                  context={query}
+                  timeRange={range}
+                  suggestions={!disableSuggestions}
+                />
               </InlineField>
               <InlineField
                 label="Type"

src/components/VariableQueryEditor.tsx

@@ -1,14 +1,21 @@
+import { TimeRange } from '@grafana/data';
+import { JsonDataSource } from 'datasource';
 import React, { useState } from 'react';
 import { JsonApiQuery } from '../types';
 import { QueryEditor } from './QueryEditor';
 
 interface VariableQueryProps {
   query: JsonApiQuery;
   onChange: (query: JsonApiQuery, definition: string) => void;
+  datasource: JsonDataSource;
+  range: TimeRange;
+  disableSuggestions: boolean;
 }
 
 // VariableQueryEditor is used to query values for a dashboard variable.
-export const VariableQueryEditor: React.FC<VariableQueryProps> = ({ onChange, query }) => {
+export const VariableQueryEditor: React.FC<VariableQueryProps> = (props) => {
+  const { query, onChange } = props;
+
   // Backwards compatibility with previous query editor for variables.
   const compatQuery = query.jsonPath ? { ...query, fields: [{ jsonPath: query.jsonPath }] } : query;
 
@@ -20,5 +27,5 @@ export const VariableQueryEditor: React.FC<VariableQueryProps> = ({ onChange, qu
     }
   };
 
-  return <QueryEditor onRunQuery={saveQuery} onChange={setState} query={state} limitFields={1} />;
+  return <QueryEditor {...props} onRunQuery={saveQuery} onChange={setState} query={state} limitFields={1} />;
 };

src/datasource.ts

@@ -12,18 +12,60 @@ import {
   FieldType,
   ScopedVars,
   TimeRange,
+  LanguageProvider,
 } from '@grafana/data';
 import { getTemplateSrv } from '@grafana/runtime';
 
 import API from './api';
 import { JsonApiQuery, JsonApiDataSourceOptions, Pair } from './types';
+import { JsonPathLanguageProvider } from './languageProvider';
 
-export class DataSource extends DataSourceApi<JsonApiQuery, JsonApiDataSourceOptions> {
+export class JsonDataSource extends DataSourceApi<JsonApiQuery, JsonApiDataSourceOptions> {
+  languageProvider: LanguageProvider;
   api: API;
 
   constructor(instanceSettings: DataSourceInstanceSettings<JsonApiDataSourceOptions>) {
     super(instanceSettings);
+
     this.api = new API(instanceSettings.url!, instanceSettings.jsonData.queryParams || '');
+    this.languageProvider = new JsonPathLanguageProvider(this);
+  }
+
+  async metadataRequest(query: JsonApiQuery, range?: TimeRange) {
+    const scopedVars = {};
+    const templateSrv = getTemplateSrv();
+
+    const replaceMacros = (str: string) => {
+      return range
+        ? str
+            .replace(/\$__unixEpochFrom\(\)/g, range.from.unix().toString())
+            .replace(/\$__unixEpochTo\(\)/g, range.to.unix().toString())
+        : str;
+    };
+
+    const urlPathTreated = templateSrv.replace(query.urlPath, scopedVars);
+    const bodyTreated = templateSrv.replace(query.body, scopedVars);
+
+    const paramsTreated: Array<Pair<string, string>> = (query.params ?? []).map(([key, value]) => {
+      const keyTreated = replaceMacros(templateSrv.replace(key, scopedVars));
+      const valueTreated = replaceMacros(templateSrv.replace(value, scopedVars));
+      return [keyTreated, valueTreated];
+    });
+
+    const headersTreated: Array<Pair<string, string>> = (query.headers ?? []).map(([key, value]) => {
+      const keyTreated = templateSrv.replace(key, scopedVars);
+      const valueTreated = templateSrv.replace(value, scopedVars);
+      return [keyTreated, valueTreated];
+    });
+
+    return await this.api.cachedGet(
+      query.cacheDurationSeconds,
+      query.method,
+      urlPathTreated,
+      paramsTreated,
+      headersTreated,
+      bodyTreated
+    );
   }
 
   async query(request: DataQueryRequest<JsonApiQuery>): Promise<DataQueryResponse> {

src/languageProvider.ts

@@ -0,0 +1,105 @@
+import { LanguageProvider, TimeRange } from '@grafana/data';
+import { CompletionItem, TypeaheadInput, TypeaheadOutput } from '@grafana/ui';
+import { JSONPath } from 'jsonpath-plus';
+
+import { JsonApiQuery } from 'types';
+import { JsonDataSource } from 'datasource';
+
+export class JsonPathLanguageProvider extends LanguageProvider {
+  datasource: JsonDataSource;
+
+  constructor(datasource: JsonDataSource) {
+    super();
+    this.datasource = datasource;
+  }
+
+  cleanText = (s: string) => s.replace(/[{}[\]="(),!~+\-*/^%\|\$@\.]/g, '').trim();
+
+  async provideCompletionItems(
+    input: TypeaheadInput,
+    context: JsonApiQuery,
+    timeRange?: TimeRange
+  ): Promise<TypeaheadOutput> {
+    const { value } = input;
+
+    const emptyResult: TypeaheadOutput = { suggestions: [] };
+
+    if (!value) {
+      return emptyResult;
+    }
+
+    const selectedLines = value.document.getTextsAtRange(value.selection);
+    const currentLine = selectedLines.size === 1 ? selectedLines.first().getText() : null;
+
+    if (!currentLine) {
+      return emptyResult;
+    }
+
+    const toCursor = currentLine.slice(0, value.selection.anchor.offset);
+
+    const currIdentifier = /[a-zA-Z0-9]$/;
+    const nextIdentifier = /[\$\]a-zA-Z0-9]\.$/;
+    const currentNodeIdentifier = /@\.$/;
+    const enterBrackets = /\[$/;
+
+    const isValid =
+      currIdentifier.test(toCursor) ||
+      nextIdentifier.test(toCursor) ||
+      currentNodeIdentifier.test(toCursor) ||
+      enterBrackets.test(toCursor);
+
+    if (!isValid) {
+      return emptyResult;
+    }
+
+    const response: any = await this.datasource.metadataRequest(context, timeRange);
+
+    if (enterBrackets.test(toCursor)) {
+      return {
+        suggestions: [
+          {
+            label: 'Operators',
+            items: [
+              { label: '*', documentation: 'Returns all elements.' },
+              { label: ':', documentation: 'Returns a slice of the array.' },
+              {
+                label: '?',
+                documentation: 'Returns elements based on a filter expression.',
+                insertText: '?()',
+                move: -1,
+              },
+            ],
+          },
+        ],
+      };
+    }
+
+    const insideBrackets = toCursor.lastIndexOf('[') > toCursor.lastIndexOf(']');
+
+    const path = insideBrackets
+      ? toCursor.slice(0, toCursor.lastIndexOf('[') + 1) + ':]'
+      : currentLine.slice(0, currentLine.lastIndexOf('.'));
+
+    const values = JSONPath({ path, json: response });
+
+    if (typeof values[0] !== 'object') {
+      return emptyResult;
+    }
+
+    const items: CompletionItem[] = Object.entries(values[0]).map(([key, value]) => {
+      return Array.isArray(value)
+        ? { label: key, insertText: key + '[]', move: -1, documentation: `_array (${value.length})_` }
+        : { label: key, documentation: `_${typeof value}_\n\n**Preview:**\n\n\`${value}\`` };
+    });
+
+    return { suggestions: [{ label: 'Elements', items }] };
+  }
+
+  request = async (url: string, params?: any): Promise<any> => {
+    return undefined;
+  };
+
+  start = async (): Promise<any[]> => {
+    return [];
+  };
+}

src/module.ts

@@ -1,11 +1,11 @@
 import { DataSourcePlugin } from '@grafana/data';
-import { DataSource } from './datasource';
+import { JsonDataSource } from './datasource';
 import { ConfigEditor } from './components/ConfigEditor';
 import { DashboardQueryEditor } from './components/DashboardQueryEditor';
 import { VariableQueryEditor } from './components/VariableQueryEditor';
 import { JsonApiQuery, JsonApiDataSourceOptions } from './types';
 
-export const plugin = new DataSourcePlugin<DataSource, JsonApiQuery, JsonApiDataSourceOptions>(DataSource)
+export const plugin = new DataSourcePlugin<JsonDataSource, JsonApiQuery, JsonApiDataSourceOptions>(JsonDataSource)
   .setConfigEditor(ConfigEditor)
   .setQueryEditor(DashboardQueryEditor)
   .setVariableQueryEditor(VariableQueryEditor);