formatting fixes

grafana · Nov 9, 2021 · 1212633 · 1212633 · vercel · Nov 9, 2021
1 parent b7e2757
commit 1212633
Show file tree

Hide file tree

Showing 21 changed files with 581 additions and 57 deletions.
diff --git a/docker-compose.yml b/docker-compose.yml
@@ -2,7 +2,7 @@ version: '3.7'
 
 services:
   grafana:
-    image: grafana/grafana-enterprise:8.2.2
+    image: grafana/grafana-enterprise:8.2.3
     container_name: yesoreyeram-infinity-datasource
     ports:
       - '3000:3000'

diff --git a/heroku.Dockerfile b/heroku.Dockerfile
@@ -1,6 +1,6 @@
 # Inspired by https://github.com/xiz-kak/grafana-on-heroku
-FROM grafana/grafana-enterprise:8.2.2
-ENV GF_INSTALL_PLUGINS https://github.com/yesoreyeram/grafana-infinity-datasource/releases/download/v0.8.0-dev.5/yesoreyeram-infinity-datasource-0.8.0-dev.5.zip;yesoreyeram-infinity-datasource,grafana-worldmap-panel,grafana-clock-panel,yesoreyeram-boomtheme-panel,yesoreyeram-boomtable-panel,https://github.com/yesoreyeram/yesoreyeram-boomsummary-panel/archive/deecb03210355a7ddd1dfca00474b0bcc28b9b4a.zip;yesoreyeram-boomsummary-panel,https://github.com/yesoreyeram/grafana-boomcomments-panel/archive/2bcba5987e930f18c64e4b648ce49a01639ded8f.zip;yesoreyeram-boomcomments-panel,https://github.com/yesoreyeram/grafana-infinity-panel/archive/90648a35cb87948b27bc6a28f5308b21f1b0880c.zip;yesoreyeram-infinity-panel,https://github.com/yesoreyeram/grafana-slideshow-panel/releases/download/v0.0.1/yesoreyeram-slideshow-panel-0.0.1.zip;yesoreyeram-slideshow-panel,grafana-guidedtour-panel
+FROM grafana/grafana-enterprise:8.2.3
+ENV GF_INSTALL_PLUGINS https://github.com/yesoreyeram/grafana-infinity-datasource/releases/download/v0.8.0-dev.6/yesoreyeram-infinity-datasource-0.8.0-dev.6.zip;yesoreyeram-infinity-datasource,grafana-worldmap-panel,grafana-clock-panel,yesoreyeram-boomtheme-panel,yesoreyeram-boomtable-panel,https://github.com/yesoreyeram/yesoreyeram-boomsummary-panel/archive/deecb03210355a7ddd1dfca00474b0bcc28b9b4a.zip;yesoreyeram-boomsummary-panel,https://github.com/yesoreyeram/grafana-boomcomments-panel/archive/2bcba5987e930f18c64e4b648ce49a01639ded8f.zip;yesoreyeram-boomcomments-panel,https://github.com/yesoreyeram/grafana-infinity-panel/archive/90648a35cb87948b27bc6a28f5308b21f1b0880c.zip;yesoreyeram-infinity-panel,https://github.com/yesoreyeram/grafana-slideshow-panel/releases/download/v0.0.1/yesoreyeram-slideshow-panel-0.0.1.zip;yesoreyeram-slideshow-panel,grafana-guidedtour-panel
 ADD ./try/heroku.sh /
 ADD ./try/grafana.ini /etc/grafana/grafana.ini
 ADD ./try/dashboards /dashboards/

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "grafana-infinity-datasource",
-  "version": "0.8.0-dev.6",
+  "version": "0.8.0-dev.7",
   "description": "JSON, CSV, XML, GraphQL & HTML datasource for Grafana. Do infinite things with Grafana.",
   "main": "dist/module.js",
   "scripts": {

diff --git a/src/app/parsers/InfinityParser.ts b/src/app/parsers/InfinityParser.ts
@@ -21,7 +21,7 @@ export class InfinityParser<T extends InfinityQuery> {
       this.AutoColumns = target.columns || [];
       this.StringColumns = target.columns.filter((t) => t.type === 'string');
       this.NumbersColumns = target.columns.filter((t) => t.type === 'number');
-      this.TimeColumns = target.columns.filter((t) => t.type === 'timestamp' || t.type === 'timestamp_epoch' || t.type === 'timestamp_epoch_s');
+      this.TimeColumns = target.columns.filter((t) => t.type.startsWith('timestamp'));
     }
   }
   private canAutoGenerateColumns(): boolean {
@@ -59,44 +59,42 @@ export class InfinityParser<T extends InfinityQuery> {
       frame.name = this.target.refId;
       frame.refId = this.target.refId;
       return frame;
-    } else {
-      if (isDataQuery(this.target) && this.target.format.startsWith('node-graph')) {
-        const frame = toDataFrame(this.toTable());
-        frame.name = this.target.refId;
-        frame.fields = frame.fields
-          .map((field) => {
-            if (field.name.startsWith('arc__')) {
-              let matching_color_field = frame.fields.find((f) => f.name.startsWith(field.name) && f.name.endsWith('_color'));
-              if (matching_color_field) {
-                field.config = {
-                  displayName: field.name.replace('arc__', ''),
-                  color: {
-                    mode: FieldColorMode?.Fixed || 'fixed',
-                    fixedColor: matching_color_field.values.get(0) || '',
-                  },
-                };
-              }
-            } else if (field.name.startsWith('detail__')) {
+    } else if (isDataQuery(this.target) && this.target.format.startsWith('node-graph')) {
+      const frame = toDataFrame(this.toTable());
+      frame.name = this.target.refId;
+      frame.fields = frame.fields
+        .map((field) => {
+          if (field.name.startsWith('arc__')) {
+            let matching_color_field = frame.fields.find((f) => f.name.startsWith(field.name) && f.name.endsWith('_color'));
+            if (matching_color_field) {
               field.config = {
-                ...field.config,
-                displayName: field.values.get(0),
+                displayName: field.name.replace('arc__', ''),
+                color: {
+                  mode: FieldColorMode?.Fixed || 'fixed',
+                  fixedColor: matching_color_field.values.get(0) || '',
+                },
               };
             }
-            return field;
-          })
-          .filter((f) => {
-            return !(f.name.startsWith('arc__') && f.name.endsWith('_color'));
-          });
-        if (this.target.format.startsWith('node-')) {
-          frame.meta = {
-            ...(frame.meta || {}),
-            preferredVisualisationType: 'nodeGraph' as PreferredVisualisationType,
-          };
-        }
-        return frame;
-      } else {
-        return this.toTable();
+          } else if (field.name.startsWith('detail__')) {
+            field.config = {
+              ...field.config,
+              displayName: field.values.get(0),
+            };
+          }
+          return field;
+        })
+        .filter((f) => {
+          return !(f.name.startsWith('arc__') && f.name.endsWith('_color'));
+        });
+      if (this.target.format.startsWith('node-')) {
+        frame.meta = {
+          ...(frame.meta || {}),
+          preferredVisualisationType: 'nodeGraph' as PreferredVisualisationType,
+        };
       }
+      return frame;
+    } else {
+      return this.toTable();
     }
   }
 }
diff --git a/src/app/parsers/JSONParser.spec.ts b/src/app/parsers/JSONParser.spec.ts
@@ -99,7 +99,7 @@ describe('JSONParser', () => {
     expect(JSONResults3.toTable().rows.length).toBe(3);
     expect(JSONResults3.toTable().rows[0].length).toBe(2);
     expect(JSONResults3.toTable().rows[1][0]).toBe('bar');
-    expect(JSONResults3.toTable().rows[2][1]).toBe(30);
+    expect(JSONResults3.toTable().rows[2][1]).toBe('30');
     expect(JSONResults3.toTable().columns.length).toBe(2);
   });
 });

diff --git a/src/app/parsers/XMLParser.spec.ts b/src/app/parsers/XMLParser.spec.ts
@@ -90,3 +90,45 @@ describe('XMLParser', () => {
     expect(XMLResults3.toTable().columns.length).toBe(1);
   });
 });
+
+const XMLResults4 = new XMLParser(
+  `<xml><meters>
+		<meter><e1>2553517.5573549946</e1><e2>hello</e2><e3>2021-Nov-12</e3></meter>
+		<meter><e1>2552517.5573549846</e1><e2>world</e2><e3>2021-Nov-11</e3></meter>
+	</meters></xml>`,
+  {
+    refId: '',
+    type: 'xml',
+    source: 'inline',
+    data: '',
+    format: 'table',
+    root_selector: 'xml.meters[0].meter',
+    columns: [
+      {
+        selector: 'e1',
+        text: 'value',
+        type: 'number',
+      },
+      {
+        selector: 'e2',
+        text: 'foo',
+        type: 'string',
+      },
+      {
+        selector: 'e3',
+        text: 'date',
+        type: 'timestamp',
+      },
+    ],
+  }
+);
+describe('XMLParser', () => {
+  it('Basic XML', () => {
+    expect(XMLResults4.toTable().rows.length).toBe(2);
+    expect(XMLResults4.toTable().rows[0].length).toBe(3);
+    expect(XMLResults4.toTable().rows[1][0]).toStrictEqual(2552517.5573549846);
+    expect(XMLResults4.toTable().rows[1][1]).toStrictEqual('world');
+    expect(XMLResults4.toTable().rows[1][2]).toStrictEqual(new Date('2021-Nov-11'));
+    expect(XMLResults4.toTable().columns.length).toBe(3);
+  });
+});
diff --git a/src/app/parsers/XMLParser.ts b/src/app/parsers/XMLParser.ts
@@ -31,7 +31,11 @@ export class XMLParser extends InfinityParser<InfinityXMLQuery> {
       const row: GrafanaTableRow = [];
       this.target.columns.forEach((c: InfinityColumn) => {
         let value = get(r, c.selector, '');
-        value = getValue(value, c.type);
+        if (value && Array.isArray(value)) {
+          value = getValue(value.join(','), c.type);
+        } else {
+          value = getValue(value, c.type);
+        }
         if (typeof r === 'string') {
           row.push(r);
         } else {

diff --git a/src/app/parsers/utils.spec.ts b/src/app/parsers/utils.spec.ts
@@ -0,0 +1,25 @@
+import { getValue } from './utils';
+
+describe('utils', () => {
+  it('getValue', () => {
+    expect(getValue('', 'string')).toStrictEqual('');
+    expect(getValue('hello 123', 'string')).toStrictEqual('hello 123');
+    expect(getValue(123, 'string')).toStrictEqual('123');
+    expect(getValue(0, 'string')).toStrictEqual('0');
+
+    expect(getValue(123.45, 'number')).toStrictEqual(123.45);
+    expect(getValue('123', 'number')).toStrictEqual(123);
+    expect(getValue('123.45', 'number')).toStrictEqual(123.45);
+    expect(getValue('1,234.5', 'number')).toStrictEqual(1234.5);
+    expect(getValue('1,234.5abcdef:;!@#$$%^&*()ABCDEF', 'number')).toStrictEqual(1234.5);
+    expect(getValue(null, 'number')).toStrictEqual(null);
+    expect(getValue('192.168.0.0', 'number')).toStrictEqual(NaN);
+
+    expect(getValue('2021', 'timestamp')).toStrictEqual(new Date('2021'));
+    expect(getValue('2021-SEP-20', 'timestamp')).toStrictEqual(new Date('2021-SEP-20'));
+    expect(getValue('1609459200000', 'timestamp_epoch')).toStrictEqual(new Date('2021'));
+    expect(getValue(1609459200000, 'timestamp_epoch')).toStrictEqual(new Date('2021'));
+    expect(getValue('1609459200', 'timestamp_epoch_s')).toStrictEqual(new Date('2021'));
+    expect(getValue(1609459200, 'timestamp_epoch_s')).toStrictEqual(new Date('2021'));
+  });
+});
diff --git a/src/app/parsers/utils.ts b/src/app/parsers/utils.ts
@@ -52,15 +52,18 @@ export const columnarToTable = (response: any, columns: InfinityColumn[] = []) =
   return res;
 };
 
-export const getValue = (input: string | number | Date, type: InfinityColumnFormat, asTimestamp?: boolean) => {
+export const getValue = (input: string | number | Date | null, type: InfinityColumnFormat, asTimestamp?: boolean) => {
   switch (type) {
     case 'string':
+      if (typeof input === 'number') {
+        return input + '';
+      }
       return input;
     case 'number':
       if (typeof input === 'number') {
         return input;
       } else if (typeof input === 'string') {
-        return toNumber((input + '').replace(/,/g, ''));
+        return toNumber((input + '').replace(/[^0-9.]/g, ''));
       } else {
         return null;
       }

diff --git a/src/components/DataField.tsx b/src/components/DataField.tsx
@@ -25,7 +25,7 @@ export const DataField = (props: DataFieldProps) => {
       <InlineFormLabel className={`query-keyword`} width={LABEL_WIDTH}>
         Data
       </InlineFormLabel>
-      <textarea rows={5} className="gf-form-input" style={{ width: '600px' }} value={data} placeholder="" onBlur={onDataChange} onChange={(e) => setData(e.target.value)}></textarea>
+      <textarea rows={5} className="gf-form-input" style={{ width: '594px' }} value={data} placeholder="" onBlur={onDataChange} onChange={(e) => setData(e.target.value)}></textarea>
       <Icon name="play" size="lg" style={{ color: 'greenyellow' }} />
     </>
   );

diff --git a/src/components/QueryColumnItem.tsx b/src/components/QueryColumnItem.tsx
@@ -55,6 +55,9 @@ export const QueryColumnItem = (props: QueryColumnItemProps) => {
       ></input>
       <label className="gf-form-label width-2">as</label>
       <input type="text" className="gf-form-input min-width-8" value={text} placeholder="Title" onChange={(e) => setText(e.currentTarget.value)} onBlur={onTextChange}></input>
+      <label className="gf-form-label" style={{ width: '92px' }}>
+        format as
+      </label>
       <Select className="min-width-12 width-12" value={column.type} options={SCRAP_QUERY_RESULT_COLUMN_FORMATS} onChange={(e) => onFormatChange(e.value as InfinityColumnFormat)}></Select>
     </>
   );

diff --git a/src/components/RootSelector.tsx b/src/components/RootSelector.tsx
@@ -23,7 +23,8 @@ export const RootSelector = (props: RootSelectorProps) => {
       <label className={`gf-form-label query-keyword width-${LABEL_WIDTH}`}>Rows / Root</label>
       <input
         type="text"
-        className="gf-form-input min-width-30 width-30"
+        className="gf-form-input"
+        style={{ width: '594px' }}
         value={root_selector}
         placeholder=""
         onChange={(e) => setRootSelector(e.currentTarget.value)}

diff --git a/src/components/URLField.tsx b/src/components/URLField.tsx
@@ -24,9 +24,10 @@ export const URLField = (props: URLFieldProps) => {
       <label className={`gf-form-label query-keyword width-${LABEL_WIDTH}`}>{query.source === 'url' ? 'URL' : 'File full path'}</label>
       <input
         type="text"
-        className="gf-form-input min-width-30 width-30"
+        className="gf-form-input"
         value={url}
         placeholder="https://jsonplaceholder.typicode.com/todos"
+        style={{ width: '594px' }}
         onChange={(e) => setURL(e.currentTarget.value)}
         onBlur={onURLChange}
       ></input>

diff --git a/src/editors/query/query.filters.tsx b/src/editors/query/query.filters.tsx
@@ -120,7 +120,7 @@ export const TableFilter = (props: TableFiltersProps) => {
             </div>
           </>
         )}
-        <span className="btn btn-success btn-medium" style={{ marginTop: '5px' }} onClick={closePopup}>
+        <span className="btn btn-success btn-medium" style={{ marginTop: '5px', marginRight: '10px' }} onClick={closePopup}>
           OK
         </span>
         <span className="btn btn-primary btn-medium" style={{ marginTop: '5px', marginRight: '10px' }} onClick={addFilter}>

diff --git a/src/editors/query/query.url.options.tsx b/src/editors/query/query.url.options.tsx
@@ -156,7 +156,7 @@ export const URLOptionsEditor = ({ query, onChange, onRunQuery }: URLOptionsProp
             e.preventDefault();
           }}
         >
-          HTTP Method, Headers, Query params
+          HTTP method, Query param, Headers
         </Button>
         {popupOpenStatus && (
           <>

diff --git a/src/editors/query/query.url.tsx b/src/editors/query/query.url.tsx
@@ -22,7 +22,7 @@ export const URLEditor = (props: ScrapperProps) => {
       {canShowURLField ? (
         <div className="gf-form">
           <URLField {...props} />
-          {isDataQuery(query) && query.source === 'url' && <URLOptionsEditor {...props} />}
+          <div style={{ marginLeft: '5px' }}>{isDataQuery(query) && query.source === 'url' && <URLOptionsEditor {...props} />}</div>
         </div>
       ) : (
         <div className="gf-form">

diff --git a/src/plugin.json b/src/plugin.json
@@ -3,10 +3,11 @@
   "name": "Infinity",
   "id": "yesoreyeram-infinity-datasource",
   "type": "datasource",
-  "backend": true,
   "executable": "gpx_infinity",
+  "backend": true,
   "metrics": true,
   "annotations": true,
+  "alerting": false,
   "info": {
     "version": "%VERSION%",
     "updated": "%TODAY%",
@@ -19,7 +20,7 @@
       "small": "img/icon.svg",
       "large": "img/icon.svg"
     },
-    "keywords": ["grafana", "json", "csv", "xml", "html", "graphql", "simple-json", "url", "inline", "random walk", "scraping", "node graph"],
+    "keywords": ["grafana", "json", "csv", "xml", "html", "graphql", "simple-json", "url", "inline", "random walk", "scraping", "node graph", "rest api", "soap"],
     "screenshots": [
       {
         "name": "features",

diff --git a/src/types.ts b/src/types.ts
@@ -230,9 +230,9 @@ export const SCRAP_QUERY_TYPES: Array<SelectableValue<InfinityQueryType>> = [
   { label: 'Global Query', value: 'global' },
 ];
 export const SCRAP_QUERY_RESULT_FORMATS: Array<SelectableValue<InfinityQueryFormat>> = [
+  { label: 'Data Frame', value: 'dataframe' },
   { label: 'Table', value: 'table' },
   { label: 'Time Series', value: 'timeseries' },
-  { label: 'Data Frame', value: 'dataframe' },
   { label: 'Nodes - Node Graph', value: 'node-graph-nodes' },
   { label: 'Edges - Node Graph', value: 'node-graph-edges' },
   { label: 'As Is', value: 'as-is' },
@@ -242,7 +242,6 @@ export const SCRAP_QUERY_SOURCES: ScrapQuerySources[] = [
   { label: 'Inline', value: 'inline', supported_types: ['csv', 'tsv', 'json', 'xml'] },
   { label: 'Random Walk', value: 'random-walk', supported_types: ['series'] },
   { label: 'Expression', value: 'expression', supported_types: ['series'] },
-  // { label: 'Local File', value: 'local-fs', supported_types: ['csv', 'json', 'xml'] },
 ];
 export const SCRAP_QUERY_RESULT_COLUMN_FORMATS: Array<SelectableValue<InfinityColumnFormat>> = [
   { label: 'String', value: 'string' },