[explore] add datasource metadata (#4104)

superset/assets/javascripts/explore/components/controls/DatasourceControl.jsx

@@ -2,10 +2,15 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Table } from 'reactable';
-import { Label, FormControl, Modal, OverlayTrigger, Tooltip } from 'react-bootstrap';
+import {
+  Row, Col, Collapse, Label, FormControl, Modal,
+  OverlayTrigger, Tooltip, Well,
+} from 'react-bootstrap';
 
 import ControlHeader from '../ControlHeader';
 import { t } from '../../../locales';
+import ColumnOption from '../../../components/ColumnOption';
+import MetricOption from '../../../components/MetricOption';
 
 const propTypes = {
   description: PropTypes.string,
@@ -27,11 +32,14 @@ export default class DatasourceControl extends React.PureComponent {
       showModal: false,
       filter: '',
       loading: true,
+      showDatasource: false,
     };
+    this.toggleShowDatasource = this.toggleShowDatasource.bind(this);
+    this.onChange = this.onChange.bind(this);
+    this.onEnterModal = this.onEnterModal.bind(this);
     this.toggleModal = this.toggleModal.bind(this);
     this.changeSearch = this.changeSearch.bind(this);
-    this.setSearchRef = this.setSearchRef.bind(this);
-    this.onEnterModal = this.onEnterModal.bind(this);
+    this.selectDatasource = this.selectDatasource.bind(this);
   }
   onChange(vizType) {
     this.props.onChange(vizType);
@@ -75,6 +83,9 @@ export default class DatasourceControl extends React.PureComponent {
   setSearchRef(searchRef) {
     this.searchRef = searchRef;
   }
+  toggleShowDatasource() {
+    this.setState({ showDatasource: !this.state.showDatasource });
+  }
   toggleModal() {
     this.setState({ showModal: !this.state.showModal });
   }
@@ -85,6 +96,79 @@ export default class DatasourceControl extends React.PureComponent {
     this.setState({ showModal: false });
     this.props.onChange(datasourceId);
   }
+  renderModal() {
+    return (
+      <Modal
+        show={this.state.showModal}
+        onHide={this.toggleModal}
+        onEnter={this.onEnterModal}
+        onExit={this.setSearchRef}
+        bsSize="lg"
+      >
+        <Modal.Header closeButton>
+          <Modal.Title>{t('Select a datasource')}</Modal.Title>
+        </Modal.Header>
+        <Modal.Body>
+          <div>
+            <FormControl
+              id="formControlsText"
+              inputRef={(ref) => { this.setSearchRef(ref); }}
+              type="text"
+              bsSize="sm"
+              value={this.state.filter}
+              placeholder={t('Search / Filter')}
+              onChange={this.changeSearch}
+            />
+          </div>
+          {this.state.loading &&
+            <img
+              className="loading"
+              alt="Loading..."
+              src="/static/assets/images/loading.gif"
+            />
+          }
+          {this.state.datasources &&
+            <Table
+              columns={['name', 'type', 'schema', 'connection', 'creator']}
+              className="table table-condensed"
+              data={this.state.datasources}
+              itemsPerPage={20}
+              filterable={['rawName', 'type', 'connection', 'schema', 'creator']}
+              filterBy={this.state.filter}
+              hideFilterInput
+            />
+          }
+        </Modal.Body>
+      </Modal>);
+  }
+  renderDatasource() {
+    const datasource = this.props.datasource;
+    return (
+      <div className="m-t-10">
+        <Well className="m-t-0">
+          <div className="m-b-10">
+            <Label>
+              <i className="fa fa-database" /> {datasource.database.backend}
+            </Label>
+            {` ${datasource.database.name} `}
+          </div>
+          <Row>
+            <Col md={6}>
+              <strong>Columns</strong>
+              {datasource.columns.map(col => (
+                <div key={col.column_name}><ColumnOption showType column={col} /></div>
+              ))}
+            </Col>
+            <Col md={6}>
+              <strong>Metrics</strong>
+              {datasource.metrics.map(m => (
+                <div key={m.metric_name}><MetricOption metric={m} /></div>
+              ))}
+            </Col>
+          </Row>
+        </Well>
+      </div>);
+  }
   render() {
     return (
       <div>
@@ -108,51 +192,28 @@ export default class DatasourceControl extends React.PureComponent {
           }
         >
           <a href={this.props.datasource.edit_url}>
-            <i className="fa fa-edit" />
+            <i className="fa fa-edit m-r-5" />
           </a>
         </OverlayTrigger>
-        <Modal
-          show={this.state.showModal}
-          onHide={this.toggleModal}
-          onEnter={this.onEnterModal}
-          onExit={this.setSearchRef}
-          bsSize="lg"
+        <OverlayTrigger
+          placement="right"
+          overlay={
+            <Tooltip id={'toggle-datasource-tooltip'}>
+              {t('Show datasource configuration')}
+            </Tooltip>
+          }
         >
-          <Modal.Header closeButton>
-            <Modal.Title>{t('Select a datasource')}</Modal.Title>
-          </Modal.Header>
-          <Modal.Body>
-            <div>
-              <FormControl
-                id="formControlsText"
-                inputRef={(ref) => { this.setSearchRef(ref); }}
-                type="text"
-                bsSize="sm"
-                value={this.state.filter}
-                placeholder={t('Search / Filter')}
-                onChange={this.changeSearch}
-              />
-            </div>
-            {this.state.loading &&
-              <img
-                className="loading"
-                alt="Loading..."
-                src="/static/assets/images/loading.gif"
-              />
-            }
-            {this.state.datasources &&
-              <Table
-                columns={['name', 'type', 'schema', 'connection', 'creator']}
-                className="table table-condensed"
-                data={this.state.datasources}
-                itemsPerPage={20}
-                filterable={['rawName', 'type', 'connection', 'schema', 'creator']}
-                filterBy={this.state.filter}
-                hideFilterInput
-              />
-            }
-          </Modal.Body>
-        </Modal>
+          <a href="#">
+            <i
+              className={`fa fa-${this.state.showDatasource ? 'minus' : 'plus'}-square m-r-5`}
+              onClick={this.toggleShowDatasource}
+            />
+          </a>
+        </OverlayTrigger>
+        <Collapse in={this.state.showDatasource}>
+          {this.renderDatasource()}
+        </Collapse>
+        {this.renderModal()}
       </div>);
   }
 }