const $ = window.$ = require('jquery');
import React from 'react';
import { ButtonGroup } from 'react-bootstrap';
import Button from '../../components/Button';
import CssEditor from './CssEditor';
import RefreshIntervalModal from './RefreshIntervalModal';
import SaveModal from './SaveModal';
import CodeModal from './CodeModal';
import SliceAdder from './SliceAdder';
const propTypes = {
dashboard: React.PropTypes.object.isRequired,
};
class Controls extends React.PureComponent {
constructor(props) {
super(props);
this.state = {
css: props.dashboard.css || '',
cssTemplates: [],
};
}
refresh() {
this.props.dashboard.sliceObjects.forEach((slice) => {
slice.render(true);
});
}
componentWillMount() {
$.get('/csstemplateasyncmodelview/api/read', (data) => {
const cssTemplates = data.result.map((row) => ({
value: row.template_name,
css: row.css,
label: row.template_name,
}));
this.setState({ cssTemplates });
});
}
changeCss(css) {
this.setState({ css });
this.props.dashboard.onChange();
}
render() {
const dashboard = this.props.dashboard;
const canSave = dashboard.context.dash_save_perm;
const emailBody = `Checkout this dashboard: ${window.location.href}`;
const emailLink = 'mailto:?Subject=Superset%20Dashboard%20'
+ `${dashboard.dashboard_title}&Body=${emailBody}`;
return (
<ButtonGroup>
<Button
tooltip="Force refresh the whole dashboard"
onClick={this.refresh.bind(this)}
>
<i className="fa fa-refresh" />
</Button>
<SliceAdder
dashboard={dashboard}
triggerNode={
<i className="fa fa-plus" />
}
/>
<RefreshIntervalModal
onChange={refreshInterval => dashboard.startPeriodicRender(refreshInterval * 1000)}
triggerNode={
<i className="fa fa-clock-o" />
}
/>
<CodeModal
codeCallback={dashboard.readFilters.bind(dashboard)}
triggerNode={<i className="fa fa-filter" />}
/>
<CssEditor
dashboard={dashboard}
triggerNode={
<i className="fa fa-css3" />
}
initialCss={dashboard.css}
templates={this.state.cssTemplates}
onChange={this.changeCss.bind(this)}
/>
<Button
disabled={!canSave}
onClick={() => {
window.location = `/dashboardmodelview/edit/${dashboard.id}`;
}}
tooltip="Edit this dashboard's property"
>
<i className="fa fa-edit" />
</Button>
<SaveModal
dashboard={dashboard}
css={this.state.css}
triggerNode={
<i className="fa fa-save" />
}
/>
<Button
onClick={() => { window.location = emailLink; }}
>
<i className="fa fa-envelope"></i>
</Button>
</ButtonGroup>
);
}
}
Controls.propTypes = propTypes;
export default Controls;
|