CSV options

src/app/parsers/CSVParser.ts

@@ -15,13 +15,16 @@ export class CSVParser extends InfinityParser {
   }
   private formatInput(CSVResponse: string) {
     const options = {
-      columns: true,
-      skip_empty_lines: true,
-      delimiter: ',',
+      columns:
+        this.target.csv_options && this.target.csv_options.columns ? this.target.csv_options.columns.split(',') : true,
+      delimiter:
+        this.target.csv_options && this.target.csv_options.delimiter
+          ? [this.target.csv_options.delimiter.replace('\\t', '\t')]
+          : [','],
+      skip_empty_lines: this.target.csv_options?.skip_empty_lines || false,
+      skip_lines_with_error: this.target.csv_options?.skip_lines_with_error || false,
+      relax_column_count: this.target.csv_options?.relax_column_count || false,
     };
-    if (this.target.csv_options?.delimiter) {
-      options.delimiter = this.target.csv_options.delimiter;
-    }
     const records = parse(CSVResponse, options);
     return records;
   }

src/editors/query/csv_options.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { Drawer } from '@grafana/ui';
+import { Checkbox, Drawer } from '@grafana/ui';
 import { InfinityQuery } from './../../types';
 
 interface CSVOptionsEditorProps {
@@ -22,25 +22,89 @@ export const CSVOptionsEditor: React.FC<CSVOptionsEditorProps> = props => {
       </div>
       {popupStatus === true && (
         <Drawer title="CSV Options" onClose={togglePopup}>
-          <div className="gf-form-inline">
-            <div className="gf-form">
-              <label className="gf-form-label query-keyword width-8">Delimiter</label>
-              <input
-                className="gf-form-input width-2"
-                type="text"
-                value={props.query.csv_options?.delimiter}
-                placeholder=","
-                onChange={e => {
-                  props.onChange({
-                    ...props.query,
-                    csv_options: {
-                      ...(props.query.csv_options || {}),
-                      delimiter: e.currentTarget.value,
-                    },
-                  });
-                }}
-              ></input>
-            </div>
+          <div className="gf-form">
+            <label className="gf-form-label query-keyword width-8">Delimiter</label>
+            <input
+              className="gf-form-input width-4"
+              type="text"
+              value={props.query.csv_options?.delimiter}
+              placeholder=","
+              onChange={e => {
+                props.onChange({
+                  ...props.query,
+                  csv_options: {
+                    ...(props.query.csv_options || {}),
+                    delimiter: e.currentTarget.value,
+                  },
+                });
+              }}
+            ></input>
+          </div>
+          <div className="gf-form">
+            <label className="gf-form-label query-keyword width-8">Skip empty lines</label>
+            <Checkbox
+              css={{}}
+              value={props.query.csv_options?.skip_empty_lines}
+              onChange={e => {
+                props.onChange({
+                  ...props.query,
+                  csv_options: {
+                    ...(props.query.csv_options || {}),
+                    skip_empty_lines: e.currentTarget.checked,
+                  },
+                });
+              }}
+            ></Checkbox>
+          </div>
+          <div className="gf-form">
+            <label className="gf-form-label query-keyword width-8">Skip lines with error</label>
+            <Checkbox
+              css={{}}
+              value={props.query.csv_options?.skip_lines_with_error}
+              onChange={e => {
+                props.onChange({
+                  ...props.query,
+                  csv_options: {
+                    ...(props.query.csv_options || {}),
+                    skip_lines_with_error: e.currentTarget.checked,
+                  },
+                });
+              }}
+            ></Checkbox>
+          </div>
+          <div className="gf-form">
+            <label className="gf-form-label query-keyword width-8">Relax column count</label>
+            <Checkbox
+              css={{}}
+              value={props.query.csv_options?.relax_column_count}
+              onChange={e => {
+                props.onChange({
+                  ...props.query,
+                  csv_options: {
+                    ...(props.query.csv_options || {}),
+                    relax_column_count: e.currentTarget.checked,
+                  },
+                });
+              }}
+            ></Checkbox>
+          </div>
+          <div className="gf-form">
+            <label className="gf-form-label query-keyword width-8">Headers</label>
+            <input
+              className="gf-form-input width-30"
+              type="text"
+              value={props.query.csv_options?.columns}
+              placeholder="Comma separated headers"
+              onChange={e => {
+                props.onChange({
+                  ...props.query,
+                  csv_options: {
+                    ...(props.query.csv_options || {}),
+                    columns: e.currentTarget.value,
+                  },
+                });
+              }}
+            ></input>
           </div>
         </Drawer>
       )}

src/editors/query/query.type.tsx

@@ -13,6 +13,7 @@ import {
   InfinityQuerySources,
   EditorMode,
 } from '../../types';
+import { CSVOptionsEditor } from './csv_options';
 
 interface TypeChooserProps {
   mode: EditorMode;
@@ -129,6 +130,9 @@ export const TypeChooser: React.FC<TypeChooserProps> = ({ query, onChange, onRun
             ></Select>
           </>
         )}
+        {query.type === InfinityQueryType.CSV && (
+          <CSVOptionsEditor query={query} onChange={onChange} onRunQuery={onRunQuery}></CSVOptionsEditor>
+        )}
       </div>
     </div>
   );

src/editors/query/query.url.tsx

@@ -19,10 +19,11 @@ export const URLEditor: React.FC<ScrapperProps> = props => {
     props: any,
     splitIntoArray = false
   ) => {
-    const { query, onChange } = props;
+    const { query, onChange, onRunQuery } = props;
     const value = splitIntoArray ? event.target.value.split(',') : event.target.value;
     set(query, field, value);
     onChange(query);
+    onRunQuery();
   };
   const LABEL_WIDTH = props.mode === EditorMode.Variable ? 10 : 8;
   return (

src/types.ts

@@ -126,6 +126,10 @@ export interface InfinityQuery extends DataQuery {
   data: string;
   csv_options?: {
     delimiter?: string;
+    skip_empty_lines?: boolean;
+    skip_lines_with_error?: boolean;
+    relax_column_count?: boolean;
+    columns?: string;
   };
   root_selector: string;
   global_query_id?: string;
@@ -287,6 +291,10 @@ export const DefaultInfinityQuery: InfinityQuery = {
   url_options: { method: 'GET', data: '' },
   csv_options: {
     delimiter: ',',
+    skip_empty_lines: false,
+    skip_lines_with_error: false,
+    relax_column_count: false,
+    columns: '',
   },
   root_selector: '',
   columns: [],

src/wiki/csv.md

@@ -7,7 +7,7 @@ next_page_title: "GraphQL"
 next_page_slug: "/wiki/graphql"
 ---
 
-![](https://user-images.githubusercontent.com/153843/92571108-9e0ff800-f27a-11ea-9fe9-9f9dcbd7125a.png#center)
+![csv example](https://user-images.githubusercontent.com/153843/92571108-9e0ff800-f27a-11ea-9fe9-9f9dcbd7125a.png#center)
 
 Select **Type** of the query to `CSV`. You can either specify the URL of the CSV file or can provide inline CSV. 
 
@@ -17,7 +17,7 @@ Select **Type** of the query to `CSV`. You can either specify the URL of the CSV
 
 CSV URL : https://thingspeak.com/channels/38629/feed.csv
 
-In the below example, we are using CSV file from thingspeak traffic analysis. As you can see in the screenshot, you can visualize CSV as a table with just URL. 
+In the below example, we are using CSV file from thingspeak traffic analysis. As you can see in the screenshot, you can visualize CSV as a table with just URL.
 
 ![image](https://user-images.githubusercontent.com/153843/108428461-8465da00-7236-11eb-8769-b1c145cbe203.png#center)
 
@@ -49,7 +49,7 @@ URL : https://gist.githubusercontent.com/yesoreyeram/64a46b02f0bf87cb527d6270dd8
 
 ![image](https://user-images.githubusercontent.com/153843/108429819-639e8400-7238-11eb-8757-785e29a2394e.png#center)
 
-In the above example, we don't have any time field. We have a string field and a number field. In this case, by choosing format as timeseries we are simulating the point-in-time as timeseries data. With this option, you can use csv into visualizations like Bar Guage, Stats Panel, Guage panel etc.
+In the above example, we don't have any time field. We have a string field and a number field. In this case, by choosing format as timeseries we are simulating the point-in-time as timeseries data. With this option, you can use csv into visualizations like Bar Guage, Stats Panel, Gauge panel etc.
 
 Sample Data
 
@@ -101,6 +101,16 @@ Below screenshot shows the example of csv inline datasource
 
 ![image](https://user-images.githubusercontent.com/153843/92571108-9e0ff800-f27a-11ea-9fe9-9f9dcbd7125a.png#center)
 
+## CSV Options
+
+| Option | Description |
+|--------|-------------|
+| Delimiter | If your csv file have any other delimiter than comma, then specify here. For tab delimited files, specify `\t` as delimiter |
+| Headers | If CSV file doesn't have headers, specify here as comma separated values here |
+| Skip empty lines | Check this if you want to skip the empty lines |
+| Skip lines with error | Check this if you want to skip the lines with error |
+| Relax column count | Check this if you want to relax the column count check |
+
 ## CSV to timeseries
 
 ### One time field and one metric field