Editor updates

grafana · Feb 15, 2021 · 18c6d1b · 18c6d1b
1 parent 107424d
commit 18c6d1b
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 64 deletions.
diff --git a/src/editors/AdvancedOptions.tsx b/src/editors/AdvancedOptions.tsx
diff --git a/src/editors/Scrapper.tsx b/src/editors/Scrapper.tsx
@@ -8,6 +8,7 @@ interface ScrapperProps {
   query: InfinityQuery;
   mode: EditorMode;
   onChange: (value: any) => void;
+  onRunQuery: any;
 }
 
 export const Scrapper: React.FC<ScrapperProps> = props => {
@@ -36,6 +37,7 @@ export const Scrapper: React.FC<ScrapperProps> = props => {
               value={props.query.url}
               placeholder="https://jsonplaceholder.typicode.com/todos"
               onChange={e => onInputTextChange(e, `url`, props)}
+              onBlur={props.onRunQuery}
             ></input>
             <URLOptions onChange={props.onChange} query={props.query} />
           </div>

diff --git a/src/editors/TypeChooser.tsx b/src/editors/TypeChooser.tsx
@@ -3,8 +3,10 @@ import { set } from 'lodash';
 import { Select } from '@grafana/ui';
 import { SelectableValue } from '@grafana/data';
 import {
+  SCRAP_QUERY_RESULT_FORMATS,
   SCRAP_QUERY_TYPES,
   SCRAP_QUERY_SOURCES,
+  InfinityQueryFormat,
   InfinityQuery,
   GlobalInfinityQuery,
   InfinityQueryType,
@@ -20,6 +22,7 @@ interface TypeChooserProps {
 }
 
 export const TypeChooser: React.FC<TypeChooserProps> = ({ query, onChange, mode, instanceSettings }) => {
+  const defaultFormat: SelectableValue<InfinityQueryFormat> = SCRAP_QUERY_RESULT_FORMATS[0];
   const defaultType: SelectableValue<InfinityQueryType> = { value: InfinityQueryType.JSON, label: 'JSON' };
   const defaultSource: SelectableValue<InfinityQuerySources> = { value: InfinityQuerySources.URL, label: 'URL' };
   const defaultSourceSeries: SelectableValue<InfinityQuerySources> = {
@@ -73,13 +76,15 @@ export const TypeChooser: React.FC<TypeChooserProps> = ({ query, onChange, mode,
       <div className="gf-form">
         <label className={`gf-form-label query-keyword width-${LABEL_WIDTH}`}>Type</label>
         <Select
-          className="min-width-12 width-12"
+          className="min-width-8 width-8"
           value={SCRAP_QUERY_TYPES.find((field: SelectableValue) => field.value === query.type) || defaultType}
           options={getTypes(mode)}
           defaultValue={defaultType}
           onChange={e => onSelectChange(e, 'type')}
         ></Select>
-        <label className="gf-form-label query-keyword width-6">{query.type === 'series' ? 'Scenario' : 'Source'}</label>
+        <label className={`gf-form-label query-keyword width-4`}>
+          {query.type === 'series' ? 'Scenario' : 'Source'}
+        </label>
         {query.type === 'global' ? (
           <>
             {global_queries.length > 0 ? (
@@ -101,7 +106,7 @@ export const TypeChooser: React.FC<TypeChooserProps> = ({ query, onChange, mode,
           </>
         ) : (
           <Select
-            className="min-width-12 width-12"
+            className={`width-${query.type === 'series' ? 8 : 6}`}
             value={SCRAP_QUERY_SOURCES.find((field: SelectableValue) => field.value === query.source) || defaultSource}
             options={SCRAP_QUERY_SOURCES.filter(
               (field: SelectableValue) => field.supported_types.indexOf(query.type) > -1
@@ -110,6 +115,18 @@ export const TypeChooser: React.FC<TypeChooserProps> = ({ query, onChange, mode,
             onChange={e => onSelectChange(e, 'source')}
           ></Select>
         )}
+        {query.type !== InfinityQueryType.Series && mode !== EditorMode.Variable && (
+          <>
+            <label className={`gf-form-label query-keyword width-4`}>Format</label>
+            <Select
+              className="min-width-8 width-8"
+              value={SCRAP_QUERY_RESULT_FORMATS.find((field: any) => field.value === query.format) || defaultFormat}
+              options={SCRAP_QUERY_RESULT_FORMATS}
+              defaultValue={defaultFormat}
+              onChange={e => onSelectChange(e, 'format')}
+            ></Select>
+          </>
+        )}
       </div>
     </div>
   );

diff --git a/src/query.editor.tsx b/src/query.editor.tsx
@@ -3,7 +3,7 @@ import { defaultsDeep } from 'lodash';
 import { QueryEditorProps } from '@grafana/data';
 import { Datasource } from './datasource';
 import { TypeChooser } from './editors/TypeChooser';
-import { AdvancedOptions } from './editors/AdvancedOptions';
+import { TableFilter } from './editors/TableFilters';
 import { Scrapper as ScrapperOptions } from './editors/Scrapper';
 import { SeriesEditor } from './editors/Series';
 import { InfinityQuery, EditorMode, InfinityQueryFormat, InfinityQuerySources, InfinityQueryType } from './types';
@@ -40,15 +40,15 @@ export const InfinityQueryEditor: React.FC<InfinityEditorProps> = ({
   query = defaultsDeep(query, defaultQuery);
   let canShowSeriesEditor = query.type === 'series';
   let canShowScrapperOptions = ['csv', 'html', 'json', 'graphql', 'xml'].indexOf(query.type) > -1;
-  let canShowAdvancedOptions = query.type !== 'global';
+  let canShowFilterEditor = !['global', 'series'].includes(query.type) && query.columns && query.columns.length > 0;
   return (
     <div>
       <TypeChooser onChange={onChange} query={query} mode={mode} instanceSettings={instanceSettings} />
       {canShowSeriesEditor && <SeriesEditor onChange={onChange} query={query} />}
-      {canShowScrapperOptions && <ScrapperOptions onChange={onChange} query={query} mode={mode} />}
-      {canShowAdvancedOptions && (
-        <AdvancedOptions onChange={onChange} query={query} onRunQuery={onRunQuery} mode={mode} />
+      {canShowScrapperOptions && (
+        <ScrapperOptions onChange={onChange} query={query} mode={mode} onRunQuery={onRunQuery} />
       )}
+      {canShowFilterEditor && <TableFilter query={query} onChange={onChange} onRunQuery={onRunQuery}></TableFilter>}
     </div>
   );
 };