Add 1.0 schema explorer to IFQL Builder

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<DatabaseListProps, DatabaseListState> {
+  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 (
+      <div className="query-builder--column query-builder--column-db">
+        <div className="query-builder--list">
+          {this.state.databases.map(db => {
+            return (
+              <DatabaseListItem
+                key={db}
+                db={db}
+                isActive={this.props.db === db}
+                onChooseDatabase={onChooseDatabase}
+              />
+            )
+          })}
+        </div>
+      </div>
+    )
+  }
+}
+
+export default DatabaseList

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<Props> {
+  public render() {
+    return (
+      <div className={this.className} onClick={this.handleChooseDatabase}>
+        {this.props.db}
+      </div>
+    )
+  }
+
+  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

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<Props, State> {
+  public static contextTypes = {
+    source: shape({
+      links: shape({}).isRequired,
+    }).isRequired,
+  }
+
+  constructor(props) {
+    super(props)
+    this.state = {
+      db: '',
+    }
+  }
+
+  public render() {
+    return (
+      <div className="ifql-schema-explorer">
+        <DatabaseList
+          db={this.state.db}
+          source={this.context.source}
+          onChooseDatabase={this.handleChooseDatabase}
+        />
+      </div>
+    )
+  }
+
+  private handleChooseDatabase = (db: string): void => {
+    this.setState({db})
+  }
+}
+
+export default SchemaExplorer

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<Props> {
     const {body, suggestions} = this.props
     return [
       {
-        name: 'Builder',
+        name: 'Build',
         render: () => <BodyBuilder body={body} suggestions={suggestions} />,
       },
       {
-        name: 'Visualization',
+        name: 'Visualize',
         render: () => <TimeMachineVis blob="Visualizer" />,
 
       },
@@ -65,14 +66,14 @@ class TimeMachine extends PureComponent<Props> {
     const {script, onChangeScript} = this.props
     return [
       {
-        name: 'Editor',
+        name: 'Script',
         render: () => (
           <TimeMachineEditor script={script} onChangeScript={onChangeScript} />
         ),
       },
       {
-        name: 'Schema',
-        render: () => <div>Explorin all yer schemas</div>,
+        name: 'Explore',
+        render: () => (<SchemaExplorer />),
       },
     ]
   }

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'