From 6554cf0f3533010803e70e1305d2d5ae366939ad Mon Sep 17 00:00:00 2001 From: Andrew Watkins Date: Fri, 11 May 2018 19:41:30 -0700 Subject: [PATCH] Convert VisHeader to ts --- ui/src/data_explorer/apis/index.ts | 56 ++++++++++++++- ui/src/data_explorer/components/VisHeader.js | 72 ------------------- ui/src/data_explorer/components/VisHeader.tsx | 42 +++++++++++ .../data_explorer/components/VisHeaderTab.tsx | 36 ++++++++++ .../components/VisHeaderTabs.tsx | 28 ++++++++ .../components/Visualization.tsx | 4 +- ui/src/shared/actions/timeSeries.js | 16 +++-- ui/src/utils/queryUrlGenerator.ts | 2 +- 8 files changed, 176 insertions(+), 80 deletions(-) delete mode 100644 ui/src/data_explorer/components/VisHeader.js create mode 100644 ui/src/data_explorer/components/VisHeader.tsx create mode 100644 ui/src/data_explorer/components/VisHeaderTab.tsx create mode 100644 ui/src/data_explorer/components/VisHeaderTabs.tsx diff --git a/ui/src/data_explorer/apis/index.ts b/ui/src/data_explorer/apis/index.ts index 4c7b27b3c..d93335455 100644 --- a/ui/src/data_explorer/apis/index.ts +++ b/ui/src/data_explorer/apis/index.ts @@ -1,5 +1,13 @@ import AJAX from 'src/utils/ajax' -import {Source} from 'src/types' +import _ from 'lodash' +import moment from 'moment' +import download from 'src/external/download' + +import {proxy} from 'src/utils/queryUrlGenerator' +import {timeSeriesToTableGraph} from 'src/utils/timeSeriesTransformers' +import {dataToCSV} from 'src/shared/parsing/dataToCSV' +import {TEMPLATES} from 'src/shared/constants' +import {Source, QueryConfig} from 'src/types' export const writeLineProtocol = async ( source: Source, @@ -11,3 +19,49 @@ export const writeLineProtocol = async ( method: 'POST', data, }) + +interface DeprecatedQuery { + id: string + host: string + queryConfig: QueryConfig + text: string +} + +export const getDataForCSV = ( + query: DeprecatedQuery, + errorThrown +) => async () => { + try { + const response = await fetchTimeSeriesForCSV({ + source: query.host, + query: query.text, + tempVars: TEMPLATES, + }) + + const {data} = timeSeriesToTableGraph([{response}]) + const name = csvName(query.queryConfig) + download(dataToCSV(data), `${name}.csv`, 'text/plain') + } catch (error) { + errorThrown(error, 'Unable to download .csv file') + console.error(error) + } +} + +const fetchTimeSeriesForCSV = async ({source, query, tempVars}) => { + try { + const {data} = await proxy({source, query, tempVars}) + return data + } catch (error) { + console.error(error) + throw error + } +} + +const csvName = (query: QueryConfig): string => { + const db = _.get(query, 'database', '') + const rp = _.get(query, 'retentionPolicy', '') + const measurement = _.get(query, 'measurement', '') + + const timestring = moment().format('YYYY-MM-DD-HH-mm') + return `${db}.${rp}.${measurement}.${timestring}` +} diff --git a/ui/src/data_explorer/components/VisHeader.js b/ui/src/data_explorer/components/VisHeader.js deleted file mode 100644 index 615608d6a..000000000 --- a/ui/src/data_explorer/components/VisHeader.js +++ /dev/null @@ -1,72 +0,0 @@ -import React from 'react' -import PropTypes from 'prop-types' -import classnames from 'classnames' -import _ from 'lodash' -import moment from 'moment' - -import {fetchTimeSeriesAsync} from 'shared/actions/timeSeries' -import {timeSeriesToTableGraph} from 'src/utils/timeSeriesTransformers' -import {dataToCSV} from 'src/shared/parsing/dataToCSV' -import download from 'src/external/download.js' -import {TEMPLATES} from 'src/shared/constants' - -const getDataForCSV = (query, errorThrown) => async () => { - try { - const response = await fetchTimeSeriesAsync({ - source: query.host, - query, - tempVars: TEMPLATES, - }) - const {data} = timeSeriesToTableGraph([{response}]) - const db = _.get(query, ['queryConfig', 'database'], '') - const rp = _.get(query, ['queryConfig', 'retentionPolicy'], '') - const measurement = _.get(query, ['queryConfig', 'measurement'], '') - - const timestring = moment().format('YYYY-MM-DD-HH-mm') - const name = `${db}.${rp}.${measurement}.${timestring}` - download(dataToCSV(data), `${name}.csv`, 'text/plain') - } catch (error) { - errorThrown(error, 'Unable to download .csv file') - console.error(error) - } -} - -const VisHeader = ({views, view, onToggleView, query, errorThrown}) => ( -
- {views.length ? ( - - ) : null} - {query ? ( -
- - .csv -
- ) : null} -
-) - -const {arrayOf, func, shape, string} = PropTypes - -VisHeader.propTypes = { - views: arrayOf(string).isRequired, - view: string.isRequired, - onToggleView: func.isRequired, - query: shape(), - errorThrown: func.isRequired, -} - -export default VisHeader diff --git a/ui/src/data_explorer/components/VisHeader.tsx b/ui/src/data_explorer/components/VisHeader.tsx new file mode 100644 index 000000000..88838ddd0 --- /dev/null +++ b/ui/src/data_explorer/components/VisHeader.tsx @@ -0,0 +1,42 @@ +import React, {PureComponent} from 'react' +import {getDataForCSV} from 'src/data_explorer/apis' +import VisHeaderTabs from 'src/data_explorer/components/VisHeaderTabs' +import {OnToggleView} from 'src/data_explorer/components/VisHeaderTab' + +interface Props { + views: string[] + view: string + query: any + onToggleView: OnToggleView + errorThrown: () => void +} + +class VisHeader extends PureComponent { + public render() { + const {views, view, onToggleView, query, errorThrown} = this.props + + return ( +
+ {!!views.length && ( + + )} + {query && ( +
+ + .csv +
+ )} +
+ ) + } +} + +export default VisHeader diff --git a/ui/src/data_explorer/components/VisHeaderTab.tsx b/ui/src/data_explorer/components/VisHeaderTab.tsx new file mode 100644 index 000000000..809fc3ae6 --- /dev/null +++ b/ui/src/data_explorer/components/VisHeaderTab.tsx @@ -0,0 +1,36 @@ +import React, {PureComponent} from 'react' +import classnames from 'classnames' +import _ from 'lodash' + +export type OnToggleView = (view: string) => void + +interface TabProps { + view: string + currentView: string + onToggleView: OnToggleView +} + +class VisHeaderTab extends PureComponent { + public render() { + return ( +
  • + {this.text} +
    • + ) + } + + private get className(): string { + const {view, currentView} = this.props + return classnames({active: view === currentView}) + } + + private handleClick = () => { + this.props.onToggleView(this.props.view) + } + + private get text(): string { + return _.upperFirst(this.props.view) + } +} + +export default VisHeaderTab diff --git a/ui/src/data_explorer/components/VisHeaderTabs.tsx b/ui/src/data_explorer/components/VisHeaderTabs.tsx new file mode 100644 index 000000000..f5daae78f --- /dev/null +++ b/ui/src/data_explorer/components/VisHeaderTabs.tsx @@ -0,0 +1,28 @@ +import React, {SFC} from 'react' +import VisHeaderTab, { + OnToggleView, +} from 'src/data_explorer/components/VisHeaderTab' + +interface Props { + views: string[] + view: string + currentView: string + onToggleView: OnToggleView +} + +const VisHeaderTabs: SFC = ({views, currentView, onToggleView}) => { + return ( +
      + {views.map(v => ( + + ))} +
    + ) +} + +export default VisHeaderTabs diff --git a/ui/src/data_explorer/components/Visualization.tsx b/ui/src/data_explorer/components/Visualization.tsx index 17b102347..1faf95c8e 100644 --- a/ui/src/data_explorer/components/Visualization.tsx +++ b/ui/src/data_explorer/components/Visualization.tsx @@ -113,11 +113,11 @@ class DataExplorerVisualization extends PureComponent { return activeQuery || defaultQuery } - private handleToggleView = view => () => { + private handleToggleView = (view: string): void => { this.setState({view}) } - private getQueryText(queryConfigs, index) { + private getQueryText(queryConfigs, index): string { // rawText can be null return _.get(queryConfigs, [`${index}`, 'rawText'], '') || '' } diff --git a/ui/src/shared/actions/timeSeries.js b/ui/src/shared/actions/timeSeries.js index f1983ee45..f7363fd7d 100644 --- a/ui/src/shared/actions/timeSeries.js +++ b/ui/src/shared/actions/timeSeries.js @@ -5,7 +5,9 @@ import _ from 'lodash' import {errorThrown} from 'shared/actions/errors' export const handleLoading = (query, editQueryStatus) => { - editQueryStatus(query.id, {loading: true}) + editQueryStatus(query.id, { + loading: true, + }) } // {results: [{}]} export const handleSuccess = (data, query, editQueryStatus) => { @@ -22,12 +24,16 @@ export const handleSuccess = (data, query, editQueryStatus) => { // 200 from chrono server but influx returns an "error" = warning if (error) { - editQueryStatus(query.id, {warn: error}) + editQueryStatus(query.id, { + warn: error, + }) return data } // 200 from server and results contains data = success - editQueryStatus(query.id, {success: 'Success!'}) + editQueryStatus(query.id, { + success: 'Success!', + }) return data } @@ -39,7 +45,9 @@ export const handleError = (error, query, editQueryStatus) => { ) // 400 from chrono server = fail - editQueryStatus(query.id, {error: message}) + editQueryStatus(query.id, { + error: message, + }) } export const fetchTimeSeriesAsync = async ( diff --git a/ui/src/utils/queryUrlGenerator.ts b/ui/src/utils/queryUrlGenerator.ts index 537e6a892..1ba5e5e3a 100644 --- a/ui/src/utils/queryUrlGenerator.ts +++ b/ui/src/utils/queryUrlGenerator.ts @@ -3,7 +3,7 @@ import AJAX from 'src/utils/ajax' interface ProxyQuery { source: string query: string - db: string + db?: string rp?: string tempVars?: string resolution?: string