diff --git a/ui/src/ifql/apis/index.ts b/ui/src/ifql/apis/index.ts index 5b84069672..ba9c44f1d7 100644 --- a/ui/src/ifql/apis/index.ts +++ b/ui/src/ifql/apis/index.ts @@ -46,3 +46,25 @@ export const getDatabases = async () => { throw error } } + +export const getTags = async () => { + try { + const response = {data: {tags: ['tk1', 'tk2', 'tk3']}} + const {data} = await Promise.resolve(response) + return data.tags + } catch (error) { + console.error('Could not get tagKeys', error) + throw error + } +} + +export const getTagValues = async () => { + try { + const response = {data: {values: ['tv1', 'tv2', 'tv3']}} + const {data} = await Promise.resolve(response) + return data.values + } catch (error) { + console.error('Could not get tagKeys', error) + throw error + } +} diff --git a/ui/src/ifql/components/DatabaseList.tsx b/ui/src/ifql/components/DatabaseList.tsx index bff9a884c9..515b0109ef 100644 --- a/ui/src/ifql/components/DatabaseList.tsx +++ b/ui/src/ifql/components/DatabaseList.tsx @@ -1,34 +1,36 @@ import React, {PureComponent} from 'react' +import PropTypes from 'prop-types' import _ from 'lodash' import DatabaseListItem from 'src/ifql/components/DatabaseListItem' -import MeasurementList from 'src/ifql/components/MeasurementList' - -import {Source} from 'src/types' import {showDatabases} from 'src/shared/apis/metaQuery' import showDatabasesParser from 'src/shared/parsing/showDatabases' import {ErrorHandling} from 'src/shared/decorators/errors' -interface DatabaseListProps { - db: string - source: Source - onChooseDatabase: (database: string) => void -} - interface DatabaseListState { databases: string[] measurement: string + db: string } +const {shape} = PropTypes + @ErrorHandling -class DatabaseList extends PureComponent { +class DatabaseList extends PureComponent<{}, DatabaseListState> { + public static contextTypes = { + source: shape({ + links: shape({}).isRequired, + }).isRequired, + } + constructor(props) { super(props) this.state = { databases: [], measurement: '', + db: '', } } @@ -37,7 +39,7 @@ class DatabaseList extends PureComponent { } public async getDatabases() { - const {source} = this.props + const {source} = this.context try { const {data} = await showDatabases(source.links.proxy) @@ -46,34 +48,31 @@ class DatabaseList extends PureComponent { this.setState({databases: sorted}) const db = _.get(sorted, '0', '') - this.props.onChooseDatabase(db) + this.handleChooseDatabase(db) } catch (err) { console.error(err) } } public render() { - const {onChooseDatabase} = this.props - return ( -
-
- {this.state.databases.map(db => { - return ( - - - {this.props.db === db && } - - ) - })} -
+
+ {this.state.databases.map(db => { + return ( + + ) + })}
) } + + private handleChooseDatabase = (db: string): void => { + this.setState({db}) + } } export default DatabaseList diff --git a/ui/src/ifql/components/DatabaseListItem.tsx b/ui/src/ifql/components/DatabaseListItem.tsx index e7e553ef8b..697d28618a 100644 --- a/ui/src/ifql/components/DatabaseListItem.tsx +++ b/ui/src/ifql/components/DatabaseListItem.tsx @@ -2,17 +2,22 @@ import React, {PureComponent} from 'react' import classnames from 'classnames' -export interface Props { - isActive: boolean +import TagList from 'src/ifql/components/TagList' + +interface Props { db: string onChooseDatabase: (db: string) => void } -class DatabaseListItem extends PureComponent { +interface State { + isOpen: boolean +} + +class DatabaseListItem extends PureComponent { constructor(props) { super(props) this.state = { - measurement: '', + isOpen: false, } } @@ -21,23 +26,23 @@ class DatabaseListItem extends PureComponent { return (
- -
+
+
{db} - +
+ {this.state.isOpen && }
) } private get className(): string { - return classnames('query-builder--list-item', { - active: this.props.isActive, + return classnames('ifql-schema-tree', { + expanded: this.state.isOpen, }) } private handleChooseDatabase = () => { - const {onChooseDatabase, db} = this.props - onChooseDatabase(db) + this.setState({isOpen: !this.state.isOpen}) } } diff --git a/ui/src/ifql/components/MeasurementList.tsx b/ui/src/ifql/components/MeasurementList.tsx deleted file mode 100644 index 14c1a5fec5..0000000000 --- a/ui/src/ifql/components/MeasurementList.tsx +++ /dev/null @@ -1,125 +0,0 @@ -import React, {PureComponent} from 'react' -import PropTypes from 'prop-types' - -import {showMeasurements} from 'src/shared/apis/metaQuery' -import showMeasurementsParser from 'src/shared/parsing/showMeasurements' - -import MeasurementListFilter from 'src/shared/components/MeasurementListFilter' -import MeasurementListItem from 'src/ifql/components/MeasurementListItem' -import {ErrorHandling} from 'src/shared/decorators/errors' - -interface Props { - db: string -} - -interface State { - measurements: string[] - filterText: string - filtered: string[] - selected: string -} - -const {shape} = PropTypes - -@ErrorHandling -class MeasurementList extends PureComponent { - public static contextTypes = { - source: shape({ - links: shape({}).isRequired, - }).isRequired, - } - - constructor(props) { - super(props) - this.state = { - filterText: '', - filtered: [], - measurements: [], - selected: '', - } - } - - public componentDidMount() { - if (!this.props.db) { - return - } - - this.getMeasurements() - } - - public render() { - const {filtered} = this.state - - return ( -
-
- Measurements & Tags - -
-
- {filtered.map(measurement => ( - - ))} -
-
- ) - } - - private async getMeasurements() { - const {source} = this.context - const {db} = this.props - - try { - const {data} = await showMeasurements(source.links.proxy, db) - const {measurementSets} = showMeasurementsParser(data) - const measurements = measurementSets[0].measurements - - const selected = measurements[0] - this.setState({measurements, filtered: measurements, selected}) - } catch (err) { - console.error(err) - } - } - - private handleChooseMeasurement = (selected: string): void => { - this.setState({selected}) - } - - private handleFilterText = e => { - e.stopPropagation() - const filterText = e.target.value - this.setState({ - filterText, - filtered: this.handleFilterMeasuremet(filterText), - }) - } - - private handleFilterMeasuremet = filter => { - return this.state.measurements.filter(m => - m.toLowerCase().includes(filter.toLowerCase()) - ) - } - - private handleEscape = e => { - if (e.key !== 'Escape') { - return - } - - e.stopPropagation() - this.setState({ - filterText: '', - }) - } -} - -export default MeasurementList diff --git a/ui/src/ifql/components/MeasurementListItem.tsx b/ui/src/ifql/components/MeasurementListItem.tsx deleted file mode 100644 index a2f87f5ca0..0000000000 --- a/ui/src/ifql/components/MeasurementListItem.tsx +++ /dev/null @@ -1,50 +0,0 @@ -import React, {PureComponent} from 'react' -import {ErrorHandling} from 'src/shared/decorators/errors' -import TagList from 'src/ifql/components/TagList' - -interface Props { - db: string - selected: string - measurement: string - onChooseMeasurement: (measurement: string) => void -} - -interface State { - isOpen: boolean -} - -@ErrorHandling -class MeasurementListItem extends PureComponent { - constructor(props) { - super(props) - - this.state = {isOpen: false} - } - - public render() { - const {measurement, db} = this.props - - return ( -
-
- -
- {measurement} - -
- {this.shouldShow && } -
- ) - } - - private handleClick = () => { - const {measurement, onChooseMeasurement} = this.props - onChooseMeasurement(measurement) - } - - private get shouldShow(): boolean { - return this.state.isOpen - } -} - -export default MeasurementListItem diff --git a/ui/src/ifql/components/SchemaExplorer.tsx b/ui/src/ifql/components/SchemaExplorer.tsx index 600ae85142..702634bff2 100644 --- a/ui/src/ifql/components/SchemaExplorer.tsx +++ b/ui/src/ifql/components/SchemaExplorer.tsx @@ -1,42 +1,14 @@ import React, {PureComponent} from 'react' -import PropTypes from 'prop-types' import DatabaseList from 'src/ifql/components/DatabaseList' -interface State { - db: string -} - -const {shape} = PropTypes - -class SchemaExplorer extends PureComponent<{}, State> { - public static contextTypes = { - source: shape({ - links: shape({}).isRequired, - }).isRequired, - } - - constructor(props) { - super(props) - this.state = { - db: '', - } - } - +class SchemaExplorer extends PureComponent { public render() { return (
- +
) } - - private handleChooseDatabase = (db: string): void => { - this.setState({db}) - } } export default SchemaExplorer diff --git a/ui/src/ifql/components/TagList.tsx b/ui/src/ifql/components/TagList.tsx index c996b0c93b..3e4e3e2f3d 100644 --- a/ui/src/ifql/components/TagList.tsx +++ b/ui/src/ifql/components/TagList.tsx @@ -5,16 +5,13 @@ import _ from 'lodash' import TagListItem from 'src/ifql/components/TagListItem' -import {showTagKeys, showTagValues} from 'src/shared/apis/metaQuery' -import showTagKeysParser from 'src/shared/parsing/showTagKeys' -import showTagValuesParser from 'src/shared/parsing/showTagValues' +import {getTags, getTagValues} from 'src/ifql/apis' import {ErrorHandling} from 'src/shared/decorators/errors' const {shape} = PropTypes interface Props { db: string - measurement: string } interface State { @@ -39,24 +36,8 @@ class TagList extends PureComponent { } public componentDidMount() { - const {db, measurement} = this.props - if (!db || !measurement) { - return - } - - this.getTags() - } - - public componentDidUpdate(prevProps) { - const {db, measurement} = this.props - - const {db: prevDB, measurement: prevMeas} = prevProps - - if (!db || !measurement) { - return - } - - if (db === prevDB && measurement === prevMeas) { + const {db} = this.props + if (!db) { return } @@ -64,29 +45,14 @@ class TagList extends PureComponent { } public async getTags() { - const {db, measurement} = this.props - const {source} = this.context + const keys = await getTags() + const values = await getTagValues() - const {data} = await showTagKeys({ - database: db, - measurement, - retentionPolicy: 'autogen', - source: source.links.proxy, - }) - const {tagKeys} = showTagKeysParser(data) - - const response = await showTagValues({ - database: db, - measurement, - retentionPolicy: 'autogen', - source: source.links.proxy, - tagKeys, + const tags = keys.map(k => { + return (this.state.tags[k] = values) }) - const {tags} = showTagValuesParser(response.data) - - const selected = Object.keys(tags) - this.setState({tags, selectedTag: selected[0]}) + this.setState({tags}) } public render() { diff --git a/ui/src/style/pages/time-machine.scss b/ui/src/style/pages/time-machine.scss index 31447dca77..308c8128ed 100644 --- a/ui/src/style/pages/time-machine.scss +++ b/ui/src/style/pages/time-machine.scss @@ -5,5 +5,6 @@ @import '../components/time-machine/ifql-editor'; @import '../components/time-machine/ifql-builder'; +// @import '../components/time-machine/ifql-explorer'; @import '../components/time-machine/visualization'; -@import '../components/time-machine/add-func-button'; +@import '../components/time-machine/add-func-button'; \ No newline at end of file