Refactor suggestions

Author: marcusolsson

src/components/JsonPathQueryField.tsx

@@ -1,52 +1,41 @@
 import React from 'react';
 
-import { QueryField, SlatePrism, BracesPlugin, TypeaheadInput, TypeaheadOutput } from '@grafana/ui';
-import { JsonDataSource } from 'datasource';
-import { JsonApiQuery } from 'types';
-import { TimeRange } from '@grafana/data';
+import { QueryField, SlatePrism, BracesPlugin, TypeaheadInput } from '@grafana/ui';
+import { onSuggest } from 'suggestions';
 
 interface Props {
   query: string;
   onBlur: () => void;
   onChange: (v: string) => void;
-  datasource: JsonDataSource;
-  context: JsonApiQuery;
-  timeRange?: TimeRange;
   suggestions: boolean;
+  onData: () => Promise<any>;
 }
 
 /**
  * JsonPathQueryField is an editor for JSON Path.
  */
-export const JsonPathQueryField: React.FC<Props> = ({
-  query,
-  onBlur,
-  onChange,
-  datasource,
-  context,
-  timeRange,
-  suggestions,
-}) => {
+export const JsonPathQueryField: React.FC<Props> = ({ query, onBlur, onChange, suggestions, onData }) => {
   /**
    * The QueryField supports Slate plugins, so let's add a few useful ones.
    */
   const plugins = [
     BracesPlugin(),
     SlatePrism({
       onlyIn: (node: any) => node.type === 'code_block',
-      getSyntax: (node: any) => 'js',
+      getSyntax: () => 'js',
     }),
   ];
 
-  const onTypeahead = async (input: TypeaheadInput): Promise<TypeaheadOutput> => {
-    return datasource.languageProvider.getSuggestions(input, context, timeRange);
-  };
+  // This is important if you don't want punctuation to interfere with your suggestions.
+  const cleanText = (s: string) => s.replace(/[{}[\]="(),!~+\-*/^%\|\$@\.]/g, '').trim();
+
+  const onTypeahead = (input: TypeaheadInput) => onSuggest(input, onData);
 
   return (
     <QueryField
       additionalPlugins={plugins}
       query={query}
-      cleanText={datasource.languageProvider.cleanText}
+      cleanText={cleanText}
       onTypeahead={suggestions ? onTypeahead : undefined}
       onRunQuery={onBlur}
       onChange={onChange}

src/components/QueryEditor.tsx

@@ -122,13 +122,11 @@ export const QueryEditor: React.FC<Props> = ({
                 grow
               >
                 <JsonPathQueryField
-                  datasource={datasource}
                   onBlur={onRunQuery}
                   onChange={onChangePath(index)}
                   query={field.jsonPath}
-                  context={query}
-                  timeRange={range}
                   suggestions={!disableSuggestions}
+                  onData={() => datasource.metadataRequest(query, range)}
                 />
               </InlineField>
               <InlineField

src/datasource.ts

@@ -17,17 +17,14 @@ import { getTemplateSrv } from '@grafana/runtime';
 
 import API from './api';
 import { JsonApiQuery, JsonApiDataSourceOptions, Pair } from './types';
-import { JsonPathLanguageProvider } from './languageProvider';
 
 export class JsonDataSource extends DataSourceApi<JsonApiQuery, JsonApiDataSourceOptions> {
-  languageProvider: JsonPathLanguageProvider;
   api: API;
 
   constructor(instanceSettings: DataSourceInstanceSettings<JsonApiDataSourceOptions>) {
     super(instanceSettings);
 
     this.api = new API(instanceSettings.url!, instanceSettings.jsonData.queryParams || '');
-    this.languageProvider = new JsonPathLanguageProvider(this);
   }
 
   /**

src/languageProvider.ts

@@ -0,0 +1,113 @@
+import { TypeaheadInput, TypeaheadOutput } from '@grafana/ui';
+import { JSONPath } from 'jsonpath-plus';
+
+/**
+ * onSuggest returns suggestions for the current JSON Path and cursor position.
+ *
+ * Normally you'd have to parse the query language here. This function
+ * simplifies this by instead using JSON Path for getting the actual values.
+ *
+ * The onData provides the source data used when generating the suggestions.
+ * This makes it easier to test the suggestions logic.
+ */
+export const onSuggest = async (input: TypeaheadInput, onData: () => Promise<any>): 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);
+
+  // $.dat|
+  const currIdentifier = /[a-zA-Z0-9]$/;
+
+  // $.data.|
+  const nextIdentifier = /[\$\]a-zA-Z0-9]\.$/;
+
+  // $.data[|
+  const enterBrackets = /\[$/;
+
+  // $.data[?(@.|
+  const currentNodeIdentifier = /@\.$/;
+
+  // Here we check whether the cursor is in a position where it should
+  // suggest.
+  const shouldSuggest =
+    currIdentifier.test(toCursor) ||
+    nextIdentifier.test(toCursor) ||
+    currentNodeIdentifier.test(toCursor) ||
+    enterBrackets.test(toCursor);
+
+  if (!shouldSuggest) {
+    return emptyResult;
+  }
+
+  // Suggest operators inside brackets.
+  if (enterBrackets.test(toCursor)) {
+    return {
+      suggestions: [
+        {
+          label: 'Operators',
+          items: [
+            { label: '*', documentation: 'Returns all elements.' },
+            { label: ':', documentation: 'Returns a slice of the array.' },
+            {
+              label: '?',
+              insertText: '?()',
+              move: -1,
+              documentation: 'Returns elements based on a filter expression.',
+            },
+          ],
+        },
+      ],
+    };
+  }
+
+  const insideBrackets = toCursor.lastIndexOf('[') > toCursor.lastIndexOf(']');
+
+  // Construct a JSON Path that returns the items in the current context.
+  const path = insideBrackets
+    ? toCursor.slice(0, toCursor.lastIndexOf('[') + 1) + ':]'
+    : currentLine.slice(0, currentLine.lastIndexOf('.'));
+
+  // Get the actual JSON for parsing.
+  const response = await onData();
+
+  const values = JSONPath({ path, json: response });
+
+  // Don't attempt to suggest if this is a leaf node, e.g. strings, numbers, and booleans.
+  if (typeof values[0] !== 'object') {
+    return emptyResult;
+  }
+
+  return {
+    suggestions: [
+      {
+        label: 'Elements', // Name of the suggestion group
+        items: Object.entries(values[0]).map(([key, value]) => {
+          return Array.isArray(value)
+            ? {
+                label: key, // Text to display in the suggestion list
+                insertText: key + '[]', // When selecting an array, we automatically insert the brackets ...
+                move: -1, // ... and put the cursor between them
+                documentation: `_array (${value.length})_`, // Markdown documentation for the suggestion
+              }
+            : {
+                label: key,
+                documentation: `_${typeof value}_\n\n**Preview:**\n\n\`${value}\``,
+              };
+        }),
+      },
+    ],
+  };
+};