IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

torkel feedback

Browse Source
This commit is contained in:
ryan 2019-03-11 08:34:09 -07:00
parent 6494c17cfa
commit cb51f13e69
2 changed files with 17 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
packages/grafana-ui/src/components/Table/TableInputCSV.tsx
View File

@ -1,11 +1,11 @@
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} /> <textarea placeholder="Enter CSV here..." value={this.state.text} onChange={this.onTextChange} />
<footer onClick={this.handleFooterClicked} className={footerClassNames}> <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>

12
packages/grafana-ui/src/utils/processTableData.ts
View File

@ -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 { export function parseCSV(text: string, options?: TableParseOptions, details?: TableParseDetails): TableData {
const results = Papa.parse(text, { ...config, dynamicTyping: true, skipEmptyLines: true }); 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({