Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[explore] add datasource metadata #4104

Merged
merged 1 commit into from
Jan 2, 2018
Merged

[explore] add datasource metadata #4104

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 9 additions & 1 deletion superset/assets/javascripts/components/ColumnOption.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,9 +5,13 @@ import InfoTooltipWithTrigger from './InfoTooltipWithTrigger';

const propTypes = {
column: PropTypes.object.isRequired,
showType: PropTypes.bool,
};
const defaultProps = {
showType: false,
};

export default function ColumnOption({ column }) {
export default function ColumnOption({ column, showType }) {
return (
<span>
<span className="m-r-5 option-label">
Expand All @@ -29,6 +33,10 @@ export default function ColumnOption({ column }) {
label={`expr-${column.column_name}`}
/>
}
{showType &&
<span className="text-muted">{column.type}</span>
}
</span>);
}
ColumnOption.propTypes = propTypes;
ColumnOption.defaultProps = defaultProps;
151 changes: 106 additions & 45 deletions superset/assets/javascripts/explore/components/controls/DatasourceControl.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -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);
Expand Down Expand Up @@ -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 });
}
Expand All @@ -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>
Expand All @@ -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>);
}
}
Expand Down
6 changes: 6 additions & 0 deletions superset/assets/spec/javascripts/explore/components/DatasourceControl_spec.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,12 @@ const defaultProps = {
type: 'table',
uid: '1__table',
id: 1,
columns: [],
metrics: [],
database: {
backend: 'mysql',
name: 'main',
},
},
onChange: sinon.spy(),
};
Expand Down
3 changes: 3 additions & 0 deletions superset/assets/stylesheets/superset.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -252,6 +252,9 @@ table.table-no-hover tr:hover {
.m-t-10 {
margin-top: 10px;
}
.m-b-10 {
margin-bottom: 10px;
}
.m-l-5 {
margin-left: 5px;
}
Expand Down
3 changes: 2 additions & 1 deletion superset/connectors/base/models.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -157,6 +157,7 @@ def data(self):
return {
'all_cols': utils.choicify(self.column_names),
'column_formats': self.column_formats,
'database': self.database.data, # pylint: disable=no-member
'edit_url': self.url,
'filter_select': self.filter_select_enabled,
'filterable_cols': utils.choicify(self.filterable_column_names),
Expand Down Expand Up @@ -256,7 +257,7 @@ def expression(self):
def data(self):
attrs = (
'column_name', 'verbose_name', 'description', 'expression',
'filterable', 'groupby', 'is_dttm')
'filterable', 'groupby', 'is_dttm', 'type')
return {s: getattr(self, s) for s in attrs}


Expand Down
7 changes: 7 additions & 0 deletions superset/connectors/druid/models.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -91,6 +91,13 @@ class DruidCluster(Model, AuditMixinNullable, ImportMixin):
def __repr__(self):
return self.verbose_name if self.verbose_name else self.cluster_name

@property
def data(self):
return {
'name': self.cluster_name,
'backend': 'druid',
}

def get_pydruid_client(self):
cli = PyDruid(
'http://{0}:{1}/'.format(self.broker_host, self.broker_port),
Expand Down
7 changes: 7 additions & 0 deletions superset/models/core.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -581,6 +581,13 @@ def __repr__(self):
def name(self):
return self.verbose_name if self.verbose_name else self.database_name

@property
def data(self):
return {
'name': self.database_name,
'backend': self.backend,
}

@property
def unique_name(self):
return self.database_name
Expand Down