diff --git a/ui/src/ifql/components/DatabaseList.tsx b/ui/src/ifql/components/DatabaseList.tsx new file mode 100644 index 0000000000..3a5e6e3413 --- /dev/null +++ b/ui/src/ifql/components/DatabaseList.tsx @@ -0,0 +1,82 @@ +import React, {PureComponent} from 'react' +import _ from 'lodash' + +import DatabaseListItem from 'src/ifql/components/DatabaseListItem' + +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[] +} + +@ErrorHandling +class DatabaseList extends PureComponent { + constructor(props) { + super(props) + this.state = { + databases: [], + } + } + + public componentDidMount() { + this.getDatabases() + } + + public async getDatabases() { + const {source} = this.props + + try { + const {data} = await showDatabases(source.links.proxy) + const {databases} = showDatabasesParser(data) + const dbs = databases.map(database => { + if (database === '_internal') { + return `${database}.monitor` + } + + return `${database}.autogen` + }) + + const sorted = dbs.sort() + + this.setState({databases: sorted}) + const db = _.get(sorted, '0', '') + this.props.onChooseDatabase(db) + } catch (err) { + console.error(err) + } + } + + public render() { + const {onChooseDatabase} = this.props + + return ( +
+
+ {this.state.databases.map(db => { + return ( + + ) + })} +
+
+ ) + } +} + +export default DatabaseList diff --git a/ui/src/ifql/components/DatabaseListItem.tsx b/ui/src/ifql/components/DatabaseListItem.tsx new file mode 100644 index 0000000000..1b2b2c664f --- /dev/null +++ b/ui/src/ifql/components/DatabaseListItem.tsx @@ -0,0 +1,32 @@ +import React, {PureComponent} from 'react' + +import classnames from 'classnames' + +export interface Props { + isActive: boolean + db: string + onChooseDatabase: (db: string) => void +} + +class DatabaseListItem extends PureComponent { + public render() { + return ( +
+ {this.props.db} +
+ ) + } + + private get className(): string { + return classnames('query-builder--list-item', { + active: this.props.isActive, + }) + } + + private handleChooseDatabase = () => { + const {onChooseDatabase, db} = this.props + onChooseDatabase(db) + } +} + +export default DatabaseListItem diff --git a/ui/src/ifql/components/SchemaExplorer.tsx b/ui/src/ifql/components/SchemaExplorer.tsx new file mode 100644 index 0000000000..ec187ccf8a --- /dev/null +++ b/ui/src/ifql/components/SchemaExplorer.tsx @@ -0,0 +1,47 @@ +import React, {PureComponent} from 'react' +import PropTypes from 'prop-types' +import DatabaseList from 'src/ifql/components/DatabaseList' +import {Source} from 'src/types' + +interface Props { + source: Source +} + +interface State { + db: string +} + +const {shape} = PropTypes + +class SchemaExplorer extends PureComponent { + public static contextTypes = { + source: shape({ + links: shape({}).isRequired, + }).isRequired, + } + + constructor(props) { + super(props) + this.state = { + db: '', + } + } + + public render() { + return ( +
+ +
+ ) + } + + private handleChooseDatabase = (db: string): void => { + this.setState({db}) + } +} + +export default SchemaExplorer diff --git a/ui/src/ifql/components/TimeMachine.tsx b/ui/src/ifql/components/TimeMachine.tsx index ccdbfe6d6a..2ca53c887f 100644 --- a/ui/src/ifql/components/TimeMachine.tsx +++ b/ui/src/ifql/components/TimeMachine.tsx @@ -1,4 +1,5 @@ import React, {PureComponent} from 'react' +import SchemaExplorer from 'src/ifql/components/SchemaExplorer' import BodyBuilder from 'src/ifql/components/BodyBuilder' import TimeMachineEditor from 'src/ifql/components/TimeMachineEditor' import TimeMachineVis from 'src/ifql/components/TimeMachineVis' @@ -45,11 +46,11 @@ class TimeMachine extends PureComponent { const {body, suggestions} = this.props return [ { - name: 'Builder', + name: 'Build', render: () => , }, { - name: 'Visualization', + name: 'Visualize', render: () => , }, @@ -65,14 +66,14 @@ class TimeMachine extends PureComponent { const {script, onChangeScript} = this.props return [ { - name: 'Editor', + name: 'Script', render: () => ( ), }, { - name: 'Schema', - render: () =>
Explorin all yer schemas
, + name: 'Explore', + render: () => (), }, ] } diff --git a/ui/src/shared/components/DatabaseList.tsx b/ui/src/shared/components/DatabaseList.tsx index 032fcb1530..ce5d5854bf 100644 --- a/ui/src/shared/components/DatabaseList.tsx +++ b/ui/src/shared/components/DatabaseList.tsx @@ -1,5 +1,5 @@ -import PropTypes from 'prop-types' import React, {PureComponent} from 'react' +import PropTypes from 'prop-types' import _ from 'lodash'