diff --git a/src/app/parsers/CSVParser.ts b/src/app/parsers/CSVParser.ts index 0050fbb6..2dc45a6d 100644 --- a/src/app/parsers/CSVParser.ts +++ b/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; } diff --git a/src/editors/query/csv_options.tsx b/src/editors/query/csv_options.tsx index 6facec75..fe80b30c 100644 --- a/src/editors/query/csv_options.tsx +++ b/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 = props => { {popupStatus === true && ( -
-
- - { - props.onChange({ - ...props.query, - csv_options: { - ...(props.query.csv_options || {}), - delimiter: e.currentTarget.value, - }, - }); - }} - > -
+
+ + { + props.onChange({ + ...props.query, + csv_options: { + ...(props.query.csv_options || {}), + delimiter: e.currentTarget.value, + }, + }); + }} + > +
+
+ + { + props.onChange({ + ...props.query, + csv_options: { + ...(props.query.csv_options || {}), + skip_empty_lines: e.currentTarget.checked, + }, + }); + }} + > +
+
+ + { + props.onChange({ + ...props.query, + csv_options: { + ...(props.query.csv_options || {}), + skip_lines_with_error: e.currentTarget.checked, + }, + }); + }} + > +
+
+ + { + props.onChange({ + ...props.query, + csv_options: { + ...(props.query.csv_options || {}), + relax_column_count: e.currentTarget.checked, + }, + }); + }} + > +
+
+ + { + props.onChange({ + ...props.query, + csv_options: { + ...(props.query.csv_options || {}), + columns: e.currentTarget.value, + }, + }); + }} + >
)} diff --git a/src/editors/query/query.type.tsx b/src/editors/query/query.type.tsx index 884eca69..bfee4150 100644 --- a/src/editors/query/query.type.tsx +++ b/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 = ({ query, onChange, onRun > )} + {query.type === InfinityQueryType.CSV && ( + + )}
); diff --git a/src/editors/query/query.url.tsx b/src/editors/query/query.url.tsx index 5d19eddc..ed7f7799 100644 --- a/src/editors/query/query.url.tsx +++ b/src/editors/query/query.url.tsx @@ -19,10 +19,11 @@ export const URLEditor: React.FC = 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 ( diff --git a/src/types.ts b/src/types.ts index f9390708..f2dccc16 100644 --- a/src/types.ts +++ b/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: [], diff --git a/src/wiki/csv.md b/src/wiki/csv.md index e57c116a..2f7c5301 100644 --- a/src/wiki/csv.md +++ b/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