lens-ui/app/components/DatabaseComponent.js

/**
* Licensed to the Apache Software Foundation (ASF) under one
* or more contributor license agreements. See the NOTICE file
* distributed with this work for additional information
* regarding copyright ownership. The ASF licenses this file
* to you under the Apache License, Version 2.0 (the
* "License"); you may not use this file except in compliance
* with the License. You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing,
* software distributed under the License is distributed on an
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
* KIND, either express or implied. See the License for the
* specific language governing permissions and limitations
* under the License.
*/

import React from 'react';
import ClassNames from 'classnames';

import DatabaseStore from '../stores/DatabaseStore';
import AdhocQueryActions from '../actions/AdhocQueryActions';
import UserStore from '../stores/UserStore';
import Loader from '../components/LoaderComponent';
import CubeTree from './CubeTreeComponent';
import TableTree from './TableTreeComponent';
import Config from 'config.json';

function getDatabases () {
  return DatabaseStore.getDatabases();
}

class DatabaseComponent extends React.Component {
  constructor (props) {
    super(props);
    this.state = {
      databases: [],
      loading: true,
      isCollapsed: false,
      selectedDatabase: UserStore.getUserDetails().database
    };
    this._onChange = this._onChange.bind(this);
    this.toggle = this.toggle.bind(this);
    this.setDatabase = this.setDatabase.bind(this);

    AdhocQueryActions.getDatabases(UserStore.getUserDetails().secretToken);
  }

  componentDidMount () {
    DatabaseStore.addChangeListener(this._onChange);
    UserStore.addChangeListener(this._onChange);
  }

  componentWillUnmount () {
    DatabaseStore.removeChangeListener(this._onChange);
    UserStore.removeChangeListener(this._onChange);
  }

  render () {
    let databaseComponent = null;

    let collapseClass = ClassNames({
      'pull-right': true,
      'glyphicon': true,
      'glyphicon-chevron-up': !this.state.isCollapsed,
      'glyphicon-chevron-down': this.state.isCollapsed
    });

    let panelBodyClassName = ClassNames({
      'panel-body': true,
      'hide': this.state.isCollapsed
    });

    databaseComponent = (<div>
        <label className='control-label' id='db'>Select a Database</label>
        <select className='form-control' id='db' onChange={this.setDatabase} value={this.state.selectedDatabase} >
          <option value=''>Select</option>
          {this.state.databases.map(database => {
            return <option key={database} value={database}>{database}</option>;
          })}
        </select>
      </div>);


    if (this.state.loading) {
      databaseComponent = <Loader size='4px' margin='2px'/>;
    } else if (!this.state.databases.length) {
      databaseComponent = (<div className='alert-danger'
                                style={{padding: '8px 5px'}}>
        <strong>Sorry, we couldn&#39;t find any databases.</strong>
      </div>);
    }
    return (<div>
        {databaseComponent}
        {
          this.state.selectedDatabase &&
          <div>
            <hr style={{marginTop: '10px', marginBottom: '10px'}}/>
            <CubeTree key={this.state.selectedDatabase}
                      database={this.state.selectedDatabase}/>
          </div>
        }
        {
          this.state.selectedDatabase && Config.display_tables &&
          <div>
            <hr style={{marginTop: '10px', marginBottom: '10px'}}/>
            <TableTree key={this.state.selectedDatabase}
                       database={this.state.selectedDatabase}/>
          </div>
        }

      </div>
    );
  }

  _onChange () {
    this.setState({ databases: getDatabases(), loading: false, selectedDatabase:  UserStore.currentDatabase() });
  }

  toggle () {
    this.setState({ isCollapsed: !this.state.isCollapsed });
  }

  setDatabase(event) {
    var dbName = null;
    if (typeof(event) == "string") {
      dbName = event;
    } else {
      dbName = event.target.value;
    }
    AdhocQueryActions.setDatabase(UserStore.getUserDetails().secretToken, dbName);
  }
}

export default DatabaseComponent;