| import React from 'react'; |
| import PropTypes from 'prop-types'; |
| import { DropdownButton, MenuItem } from 'react-bootstrap'; |
| |
| import CssEditor from './CssEditor'; |
| import RefreshIntervalModal from './RefreshIntervalModal'; |
| import SaveModal from './SaveModal'; |
| import SliceAdder from './SliceAdder'; |
| import { t } from '../../locales'; |
| import InfoTooltipWithTrigger from '../../components/InfoTooltipWithTrigger'; |
| |
| const $ = window.$ = require('jquery'); |
| |
| const propTypes = { |
| dashboard: PropTypes.object.isRequired, |
| filters: PropTypes.object.isRequired, |
| slices: PropTypes.array, |
| userId: PropTypes.string.isRequired, |
| addSlicesToDashboard: PropTypes.func, |
| onSave: PropTypes.func, |
| onChange: PropTypes.func, |
| renderSlices: PropTypes.func, |
| serialize: PropTypes.func, |
| startPeriodicRender: PropTypes.func, |
| editMode: PropTypes.bool, |
| }; |
| |
| function MenuItemContent({ faIcon, text, tooltip, children }) { |
| return ( |
| <span> |
| <i className={`fa fa-${faIcon}`} /> {text} {''} |
| <InfoTooltipWithTrigger |
| tooltip={tooltip} |
| label={`dash-${faIcon}`} |
| placement="top" |
| /> |
| {children} |
| </span> |
| ); |
| } |
| MenuItemContent.propTypes = { |
| faIcon: PropTypes.string.isRequired, |
| text: PropTypes.string, |
| tooltip: PropTypes.string, |
| children: PropTypes.node, |
| }; |
| |
| function ActionMenuItem(props) { |
| return ( |
| <MenuItem onClick={props.onClick}> |
| <MenuItemContent {...props} /> |
| </MenuItem> |
| ); |
| } |
| ActionMenuItem.propTypes = { |
| onClick: PropTypes.func, |
| }; |
| |
| class Controls extends React.PureComponent { |
| constructor(props) { |
| super(props); |
| this.state = { |
| css: props.dashboard.css || '', |
| cssTemplates: [], |
| }; |
| this.refresh = this.refresh.bind(this); |
| this.toggleModal = this.toggleModal.bind(this); |
| this.updateDom = this.updateDom.bind(this); |
| } |
| componentWillMount() { |
| this.updateDom(this.state.css); |
| |
| $.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 }); |
| }); |
| } |
| refresh() { |
| // Force refresh all slices |
| this.props.renderSlices(true); |
| } |
| toggleModal(modal) { |
| let currentModal; |
| if (modal !== this.state.currentModal) { |
| currentModal = modal; |
| } |
| this.setState({ currentModal }); |
| } |
| changeCss(css) { |
| this.setState({ css }, () => { |
| this.updateDom(css); |
| }); |
| this.props.onChange(); |
| } |
| updateDom(css) { |
| const className = 'CssEditor-css'; |
| const head = document.head || document.getElementsByTagName('head')[0]; |
| let style = document.querySelector('.' + className); |
| |
| if (!style) { |
| style = document.createElement('style'); |
| style.className = className; |
| style.type = 'text/css'; |
| head.appendChild(style); |
| } |
| if (style.styleSheet) { |
| style.styleSheet.cssText = css; |
| } else { |
| style.innerHTML = css; |
| } |
| } |
| render() { |
| const { dashboard, userId, filters, |
| addSlicesToDashboard, startPeriodicRender, |
| serialize, onSave, editMode } = this.props; |
| const emailBody = t('Checkout this dashboard: %s', window.location.href); |
| const emailLink = 'mailto:?Subject=Superset%20Dashboard%20' |
| + `${dashboard.dashboard_title}&Body=${emailBody}`; |
| let saveText = t('Save as'); |
| if (editMode) { |
| saveText = t('Save'); |
| } |
| return ( |
| <span> |
| <DropdownButton title="Actions" bsSize="small" id="bg-nested-dropdown" pullRight> |
| <ActionMenuItem |
| text={t('Force Refresh')} |
| tooltip={t('Force refresh the whole dashboard')} |
| faIcon="refresh" |
| onClick={this.refresh} |
| /> |
| <RefreshIntervalModal |
| onChange={refreshInterval => startPeriodicRender(refreshInterval * 1000)} |
| triggerNode={ |
| <MenuItemContent |
| text={t('Set autorefresh')} |
| tooltip={t('Set the auto-refresh interval for this session')} |
| faIcon="clock-o" |
| /> |
| } |
| /> |
| <SaveModal |
| dashboard={dashboard} |
| filters={filters} |
| serialize={serialize} |
| onSave={onSave} |
| css={this.state.css} |
| triggerNode={ |
| <MenuItemContent |
| text={saveText} |
| tooltip={t('Save the dashboard')} |
| faIcon="save" |
| /> |
| } |
| /> |
| {editMode && |
| <ActionMenuItem |
| text={t('Edit properties')} |
| tooltip={t("Edit the dashboards's properties")} |
| faIcon="edit" |
| onClick={() => { window.location = `/dashboardmodelview/edit/${dashboard.id}`; }} |
| /> |
| } |
| {editMode && |
| <ActionMenuItem |
| text={t('Email')} |
| tooltip={t('Email a link to this dashbaord')} |
| onClick={() => { window.location = emailLink; }} |
| faIcon="envelope" |
| /> |
| } |
| {editMode && |
| <SliceAdder |
| dashboard={dashboard} |
| addSlicesToDashboard={addSlicesToDashboard} |
| userId={userId} |
| triggerNode={ |
| <MenuItemContent |
| text={t('Add Slices')} |
| tooltip={t('Add some slices to this dashbaord')} |
| faIcon="plus" |
| /> |
| } |
| /> |
| } |
| {editMode && |
| <CssEditor |
| dashboard={dashboard} |
| triggerNode={ |
| <MenuItemContent |
| text={t('Edit CSS')} |
| tooltip={t('Change the style of the dashboard using CSS code')} |
| faIcon="css3" |
| /> |
| } |
| initialCss={this.state.css} |
| templates={this.state.cssTemplates} |
| onChange={this.changeCss.bind(this)} |
| /> |
| } |
| </DropdownButton> |
| </span> |
| ); |
| } |
| } |
| Controls.propTypes = propTypes; |
| |
| export default Controls; |