torkel feedback

packages/grafana-ui/src/components/Table/TableInputCSV.tsx

 import React from 'react';
 import React from 'react';
 import debounce from 'lodash/debounce';
 import debounce from 'lodash/debounce';
-import { ParseConfig, parseCSV, ParseDetails } from '../../utils/processTableData';
+import { parseCSV, TableParseOptions, TableParseDetails } from '../../utils/processTableData';
 import { TableData } from '../../types/data';
 import { TableData } from '../../types/data';
 import { AutoSizer } from 'react-virtualized';
 import { AutoSizer } from 'react-virtualized';
 
 
 interface Props {
 interface Props {
-  config?: ParseConfig;
+  options?: TableParseOptions;
   text: string;
   text: string;
   onTableParsed: (table: TableData, text: string) => void;
   onTableParsed: (table: TableData, text: string) => void;
 }
 }
@@ -13,7 +13,7 @@ interface Props {
 interface State {
 interface State {
   text: string;
   text: string;
   table: TableData;
   table: TableData;
-  details: ParseDetails;
+  details: TableParseDetails;
 }
 }
 
 
 /**
 /**
@@ -24,9 +24,9 @@ class TableInputCSV extends React.PureComponent<Props, State> {
     super(props);
     super(props);
 
 
     // Shoud this happen in onComponentMounted?
     // Shoud this happen in onComponentMounted?
-    const { text, config, onTableParsed } = props;
+    const { text, options, onTableParsed } = props;
     const details = {};
     const details = {};
-    const table = parseCSV(text, config, details);
+    const table = parseCSV(text, options, details);
     this.state = {
     this.state = {
       text,
       text,
       table,
       table,
@@ -37,13 +37,13 @@ class TableInputCSV extends React.PureComponent<Props, State> {
 
 
   readCSV = debounce(() => {
   readCSV = debounce(() => {
     const details = {};
     const details = {};
-    const table = parseCSV(this.state.text, this.props.config, details);
+    const table = parseCSV(this.state.text, this.props.options, details);
     this.setState({ table, details });
     this.setState({ table, details });
   }, 150);
   }, 150);
 
 
   componentDidUpdate(prevProps: Props, prevState: State) {
   componentDidUpdate(prevProps: Props, prevState: State) {
     const { text } = this.state;
     const { text } = this.state;
-    if (text !== prevState.text || this.props.config !== prevProps.config) {
+    if (text !== prevState.text || this.props.options !== prevProps.options) {
       this.readCSV();
       this.readCSV();
     }
     }
     // If the props text has changed, replace our local version
     // If the props text has changed, replace our local version
@@ -56,7 +56,7 @@ class TableInputCSV extends React.PureComponent<Props, State> {
     }
     }
   }
   }
 
 
-  handleFooterClicked = (event: any) => {
+  onFooterClicked = (event: any) => {
     console.log('Errors', this.state);
     console.log('Errors', this.state);
     const message = this.state.details
     const message = this.state.details
       .errors!.map(err => {
       .errors!.map(err => {
@@ -66,7 +66,7 @@ class TableInputCSV extends React.PureComponent<Props, State> {
     alert('CSV Parsing Errors:\n' + message);
     alert('CSV Parsing Errors:\n' + message);
   };
   };
 
 
-  handleChange = (event: any) => {
+  onTextChange = (event: any) => {
     this.setState({ text: event.target.value });
     this.setState({ text: event.target.value });
   };
   };
 
 
@@ -80,8 +80,8 @@ class TableInputCSV extends React.PureComponent<Props, State> {
       <AutoSizer>
       <AutoSizer>
         {({ height, width }) => (
         {({ height, width }) => (
           <div className="gf-table-input-csv" style={{ width, height }}>
           <div className="gf-table-input-csv" style={{ width, height }}>
-            <textarea placeholder="Enter CSV here..." value={this.state.text} onChange={this.handleChange} />
-            <footer onClick={this.handleFooterClicked} className={footerClassNames}>
+            <textarea placeholder="Enter CSV here..." value={this.state.text} onChange={this.onTextChange} />
+            <footer onClick={this.onFooterClicked} className={footerClassNames}>
               Rows:{table.rows.length}, Columns:{table.columns.length} &nbsp;
               Rows:{table.rows.length}, Columns:{table.columns.length} &nbsp;
               {hasErrors ? <i className="fa fa-exclamation-triangle" /> : <i className="fa fa-check-circle" />}
               {hasErrors ? <i className="fa fa-exclamation-triangle" /> : <i className="fa fa-check-circle" />}
             </footer>
             </footer>

packages/grafana-ui/src/utils/processTableData.ts

@@ -3,7 +3,7 @@ import { TableData, Column } from '../types/index';
 import Papa, { ParseError, ParseMeta } from 'papaparse';
 import Papa, { ParseError, ParseMeta } from 'papaparse';
 
 
 // Subset of all parse options
 // Subset of all parse options
-export interface ParseConfig {
+export interface TableParseOptions {
   headerIsFirstLine?: boolean; // Not a papa-parse option
   headerIsFirstLine?: boolean; // Not a papa-parse option
   delimiter?: string; // default: ","
   delimiter?: string; // default: ","
   newline?: string; // default: "\r\n"
   newline?: string; // default: "\r\n"
@@ -12,7 +12,7 @@ export interface ParseConfig {
   comments?: boolean | string; // default: false
   comments?: boolean | string; // default: false
 }
 }
 
 
-export interface ParseDetails {
+export interface TableParseDetails {
   meta?: ParseMeta;
   meta?: ParseMeta;
   errors?: ParseError[];
   errors?: ParseError[];
 }
 }
@@ -87,11 +87,11 @@ function makeColumns(values: any[]): Column[] {
  * Convert CSV text into a valid TableData object
  * Convert CSV text into a valid TableData object
  *
  *
  * @param text
  * @param text
- * @param config
+ * @param options
  * @param details, if exists the result will be filled with debugging details
  * @param details, if exists the result will be filled with debugging details
  */
  */
-export function parseCSV(text: string, config?: ParseConfig, details?: ParseDetails): TableData {
-  const results = Papa.parse(text, { ...config, dynamicTyping: true, skipEmptyLines: true });
+export function parseCSV(text: string, options?: TableParseOptions, details?: TableParseDetails): TableData {
+  const results = Papa.parse(text, { ...options, dynamicTyping: true, skipEmptyLines: true });
   const { data, meta, errors } = results;
   const { data, meta, errors } = results;
 
 
   // Fill the parse details for debugging
   // Fill the parse details for debugging
@@ -121,7 +121,7 @@ export function parseCSV(text: string, config?: ParseConfig, details?: ParseDeta
   }
   }
 
 
   // Assume the first line is the header unless the config says its not
   // Assume the first line is the header unless the config says its not
-  const headerIsNotFirstLine = config && config.headerIsFirstLine === false;
+  const headerIsNotFirstLine = options && options.headerIsFirstLine === false;
   const header = headerIsNotFirstLine ? [] : results.data.shift();
   const header = headerIsNotFirstLine ? [] : results.data.shift();
 
 
   return matchRowSizes({
   return matchRowSizes({