mirror of
https://github.com/apache/superset.git
synced 2026-04-22 01:24:43 +00:00
[WiP] Deprecate Explore v1 (#2064)
* Simplifying the viz interface (#2005) * Working on dashes * Making this a collaborative branch * Fixing some bugs * Fixing bugs * More improvements * Add datasource back in bootstrap data * Decent state * Linting * Moving forward * Some more linting * Fix the timer * Triggering events through state * Lingint * Put filters in an array instead of flt strings (#2090) * Put filters in an array instead of flt strings * Remove query_filter(), put opChoices into Filter * Update version_info.json * Fix migrations * More renderTrigger=true * Fixing bugs * Working on standalone * getting standalone to work * Fixed forcedHeight for standalone =view * Linting * Get save slice working in v2 (#2106) * Filter bugfix * Fixing empty series limit bug * Fixed dashboard view * Fixing short urls * Only allow owners to overwrite slice (#2142) * Raise exception when date range is wrong * Only allow owner to overwrite a slice * Fix tests for deprecate v1 (#2140) * Fixed tests for control panels container and filters * Fixed python tests for explorev2 * Fix linting errors * Add in stop button during slice querying/rendering (#2121) * Add in stop button during slice querying/rendering * Abort ajax request on stop * Adding missing legacy module * Removing select2.sortable.js because of license * Allow query to display while slice is loading (#2100) * Allow query to display while slice is loading * Put latestQueryFormData in store * Reorganized query function, got rid of tu[le return values * Merging migrations * Wrapping up shortner migration * Fixing tests * Add folder creation to syncBackend * Fixing edit URL in explore view * Fix look of Stop button * Adding syntax highlighting to query modal * Fix cast_form_data and flase checkbox on dash * Bugfix * Going deeper * Fix filtering * Deleing invalid filters when changing datasource * Minor adjustments * Fixing calendar heatmap examples * Moving edit datasource button to header's right side * Fixing mapbox example * Show stack trace when clicking alert * Adding npm sync-backend command to build instruction * Bumping up JS dependencies * rm dep on select2 * Fix py3 urlparse * rm superset-select2.js * Improving migration scripts * Bugfixes on staging * Fixing Markup viz
This commit is contained in:
Maxime Beauchemin
committed by
GitHub
GitHub
parent
3b023e5eaa
commit
0cc8eff1c3
@@ -1,25 +0,0 @@
|
||||
import React, { PropTypes } from 'react';
|
||||
import ModalTrigger from './../../components/ModalTrigger';
|
||||
|
||||
const propTypes = {
|
||||
query: PropTypes.string,
|
||||
};
|
||||
|
||||
const defaultProps = {
|
||||
query: '',
|
||||
};
|
||||
|
||||
export default function DisplayQueryButton({ query }) {
|
||||
const modalBody = (<pre>{query}</pre>);
|
||||
return (
|
||||
<ModalTrigger
|
||||
isButton
|
||||
triggerNode={<span>Query</span>}
|
||||
modalTitle="Query"
|
||||
modalBody={modalBody}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
DisplayQueryButton.propTypes = propTypes;
|
||||
DisplayQueryButton.defaultProps = defaultProps;
|
||||
@@ -1,122 +0,0 @@
|
||||
import React, { PropTypes } from 'react';
|
||||
import CopyToClipboard from './../../components/CopyToClipboard';
|
||||
import { Popover, OverlayTrigger } from 'react-bootstrap';
|
||||
|
||||
const propTypes = {
|
||||
slice: PropTypes.object.isRequired,
|
||||
};
|
||||
|
||||
export default class EmbedCodeButton extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
height: '400',
|
||||
width: '600',
|
||||
};
|
||||
this.handleInputChange = this.handleInputChange.bind(this);
|
||||
}
|
||||
|
||||
handleInputChange(e) {
|
||||
const value = e.currentTarget.value;
|
||||
const name = e.currentTarget.name;
|
||||
const data = {};
|
||||
data[name] = value;
|
||||
this.setState(data);
|
||||
}
|
||||
|
||||
generateEmbedHTML() {
|
||||
const srcLink = (
|
||||
window.location.origin +
|
||||
this.props.slice.data.standalone_endpoint +
|
||||
`&height=${this.state.height}`
|
||||
);
|
||||
return (
|
||||
'<iframe\n' +
|
||||
` width="${this.state.width}"\n` +
|
||||
` height="${this.state.height}"\n` +
|
||||
' seamless\n' +
|
||||
' frameBorder="0"\n' +
|
||||
' scrolling="no"\n' +
|
||||
` src="${srcLink}"\n` +
|
||||
'>\n' +
|
||||
'</iframe>'
|
||||
);
|
||||
}
|
||||
|
||||
renderPopover() {
|
||||
const html = this.generateEmbedHTML();
|
||||
return (
|
||||
<Popover id="embed-code-popover">
|
||||
<div>
|
||||
<div className="row">
|
||||
<div className="col-sm-10">
|
||||
<textarea
|
||||
name="embedCode"
|
||||
value={html}
|
||||
rows="4"
|
||||
readOnly
|
||||
className="form-control input-sm"
|
||||
>
|
||||
</textarea>
|
||||
</div>
|
||||
<div className="col-sm-2">
|
||||
<CopyToClipboard
|
||||
shouldShowText={false}
|
||||
text={html}
|
||||
copyNode={<i className="fa fa-clipboard" title="Copy to clipboard"></i>}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<br />
|
||||
<div className="row">
|
||||
<div className="col-md-6 col-sm-12">
|
||||
<div className="form-group">
|
||||
<small>
|
||||
<label className="control-label" htmlFor="embed-height">Height</label>
|
||||
</small>
|
||||
<input
|
||||
className="form-control input-sm"
|
||||
type="text"
|
||||
defaultValue={this.state.height}
|
||||
name="height"
|
||||
onChange={this.handleInputChange}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-md-6 col-sm-12">
|
||||
<div className="form-group">
|
||||
<small>
|
||||
<label className="control-label" htmlFor="embed-width">Width</label>
|
||||
</small>
|
||||
<input
|
||||
className="form-control input-sm"
|
||||
type="text"
|
||||
defaultValue={this.state.width}
|
||||
name="width"
|
||||
onChange={this.handleInputChange}
|
||||
id="embed-width"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Popover>
|
||||
);
|
||||
}
|
||||
render() {
|
||||
return (
|
||||
<OverlayTrigger
|
||||
trigger="click"
|
||||
rootClose
|
||||
placement="left"
|
||||
overlay={this.renderPopover()}
|
||||
>
|
||||
<span className="btn btn-default btn-sm">
|
||||
<i className="fa fa-code"></i>
|
||||
</span>
|
||||
</OverlayTrigger>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
EmbedCodeButton.propTypes = propTypes;
|
||||
@@ -1,46 +0,0 @@
|
||||
import React, { PropTypes } from 'react';
|
||||
import cx from 'classnames';
|
||||
import URLShortLinkButton from './URLShortLinkButton';
|
||||
import EmbedCodeButton from './EmbedCodeButton';
|
||||
import DisplayQueryButton from './DisplayQueryButton';
|
||||
|
||||
const propTypes = {
|
||||
canDownload: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]).isRequired,
|
||||
slice: PropTypes.object.isRequired,
|
||||
query: PropTypes.string,
|
||||
};
|
||||
|
||||
export default function ExploreActionButtons({ canDownload, slice, query }) {
|
||||
const exportToCSVClasses = cx('btn btn-default btn-sm', {
|
||||
'disabled disabledButton': !canDownload,
|
||||
});
|
||||
return (
|
||||
<div className="btn-group results" role="group">
|
||||
<URLShortLinkButton slice={slice} />
|
||||
|
||||
<EmbedCodeButton slice={slice} />
|
||||
|
||||
<a
|
||||
href={slice.data.json_endpoint}
|
||||
className="btn btn-default btn-sm"
|
||||
title="Export to .json"
|
||||
target="_blank"
|
||||
>
|
||||
<i className="fa fa-file-code-o"></i> .json
|
||||
</a>
|
||||
|
||||
<a
|
||||
href={slice.data.csv_endpoint}
|
||||
className={exportToCSVClasses}
|
||||
title="Export to .csv format"
|
||||
target="_blank"
|
||||
>
|
||||
<i className="fa fa-file-text-o"></i> .csv
|
||||
</a>
|
||||
|
||||
<DisplayQueryButton query={query} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
ExploreActionButtons.propTypes = propTypes;
|
||||
@@ -1,66 +0,0 @@
|
||||
import React, { PropTypes } from 'react';
|
||||
import { ButtonGroup, OverlayTrigger, Tooltip } from 'react-bootstrap';
|
||||
import Button from '../../components/Button';
|
||||
import classnames from 'classnames';
|
||||
|
||||
const propTypes = {
|
||||
canAdd: PropTypes.string.isRequired,
|
||||
onQuery: PropTypes.func.isRequired,
|
||||
onSave: PropTypes.func,
|
||||
disabled: PropTypes.bool,
|
||||
errorMessage: PropTypes.string,
|
||||
};
|
||||
|
||||
const defaultProps = {
|
||||
onSave: () => {},
|
||||
disabled: false,
|
||||
};
|
||||
|
||||
export default function QueryAndSaveBtns({ canAdd, onQuery, onSave, disabled, errorMessage }) {
|
||||
const saveClasses = classnames({
|
||||
'disabled disabledButton': canAdd !== 'True',
|
||||
});
|
||||
const qryButtonStyle = errorMessage ? 'danger' : 'primary';
|
||||
const qryButtonDisabled = errorMessage ? true : disabled;
|
||||
|
||||
return (
|
||||
<div>
|
||||
<ButtonGroup className="query-and-save">
|
||||
<Button
|
||||
id="query_button"
|
||||
onClick={onQuery}
|
||||
disabled={qryButtonDisabled}
|
||||
bsStyle={qryButtonStyle}
|
||||
>
|
||||
<i className="fa fa-bolt" /> Query
|
||||
</Button>
|
||||
<Button
|
||||
className={saveClasses}
|
||||
data-target="#save_modal"
|
||||
data-toggle="modal"
|
||||
disabled={qryButtonDisabled}
|
||||
onClick={onSave}
|
||||
>
|
||||
<i className="fa fa-plus-circle"></i> Save as
|
||||
</Button>
|
||||
</ButtonGroup>
|
||||
{errorMessage &&
|
||||
<span>
|
||||
{' '}
|
||||
<OverlayTrigger
|
||||
placement="right"
|
||||
overlay={
|
||||
<Tooltip id={'query-error-tooltip'}>
|
||||
{errorMessage}
|
||||
</Tooltip>}
|
||||
>
|
||||
<i className="fa fa-exclamation-circle text-danger fa-lg" />
|
||||
</OverlayTrigger>
|
||||
</span>
|
||||
}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
QueryAndSaveBtns.propTypes = propTypes;
|
||||
QueryAndSaveBtns.defaultProps = defaultProps;
|
||||
@@ -1,62 +0,0 @@
|
||||
import React, { PropTypes } from 'react';
|
||||
import { Popover, OverlayTrigger } from 'react-bootstrap';
|
||||
import CopyToClipboard from './../../components/CopyToClipboard';
|
||||
import { getShortUrl } from '../../../utils/common';
|
||||
|
||||
const propTypes = {
|
||||
slice: PropTypes.object.isRequired,
|
||||
};
|
||||
|
||||
export default class URLShortLinkButton extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
shortUrl: '',
|
||||
};
|
||||
}
|
||||
|
||||
onShortUrlSuccess(data) {
|
||||
this.setState({
|
||||
shortUrl: data,
|
||||
});
|
||||
}
|
||||
|
||||
getCopyUrl() {
|
||||
const longUrl = window.location.pathname + window.location.search;
|
||||
getShortUrl(longUrl, this.onShortUrlSuccess.bind(this));
|
||||
}
|
||||
|
||||
renderPopover() {
|
||||
const emailBody = `Check out this slice: ${this.state.shortUrl}`;
|
||||
return (
|
||||
<Popover id="shorturl-popover">
|
||||
<CopyToClipboard
|
||||
text={this.state.shortUrl}
|
||||
copyNode={<i className="fa fa-clipboard" title="Copy to clipboard"></i>}
|
||||
/>
|
||||
|
||||
<a href={`mailto:?Subject=Superset%20Slice%20&Body=${emailBody}`}>
|
||||
<i className="fa fa-envelope"></i>
|
||||
</a>
|
||||
</Popover>
|
||||
);
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<OverlayTrigger
|
||||
trigger="click"
|
||||
rootClose
|
||||
placement="left"
|
||||
onEnter={this.getCopyUrl.bind(this)}
|
||||
overlay={this.renderPopover()}
|
||||
>
|
||||
<span className="btn btn-default btn-sm">
|
||||
<i className="fa fa-link"></i>
|
||||
</span>
|
||||
</OverlayTrigger>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
URLShortLinkButton.propTypes = propTypes;
|
||||
@@ -1,403 +0,0 @@
|
||||
// Javascript for the explorer page
|
||||
// Init explorer view -> load vis dependencies -> read data (from dynamic html) -> render slice
|
||||
// nb: to add a new vis, you must also add a Python fn in viz.py
|
||||
//
|
||||
// js
|
||||
const $ = window.$ = require('jquery');
|
||||
const px = require('./../modules/superset.js');
|
||||
const utils = require('./../modules/utils.js');
|
||||
const jQuery = window.jQuery = require('jquery'); // eslint-disable-line
|
||||
|
||||
import React from 'react';
|
||||
import ReactDOM from 'react-dom';
|
||||
import QueryAndSaveBtns from './components/QueryAndSaveBtns.jsx';
|
||||
import ExploreActionButtons from './components/ExploreActionButtons.jsx';
|
||||
|
||||
require('jquery-ui');
|
||||
$.widget.bridge('uitooltip', $.ui.tooltip); // Shutting down jq-ui tooltips
|
||||
require('bootstrap');
|
||||
|
||||
require('./../superset-select2.js');
|
||||
|
||||
// css
|
||||
require('../../vendor/pygments.css');
|
||||
require('../../stylesheets/explore.css');
|
||||
|
||||
let slice;
|
||||
|
||||
const getPanelClass = function (fieldPrefix) {
|
||||
return (fieldPrefix === 'flt' ? 'filter' : 'having') + '_panel';
|
||||
};
|
||||
|
||||
function prepForm() {
|
||||
// Assigning the right id to form elements in filters
|
||||
const fixId = function ($filter, fieldPrefix, i) {
|
||||
$filter.attr('id', function () {
|
||||
return fieldPrefix + '_' + i;
|
||||
});
|
||||
|
||||
['col', 'op', 'eq'].forEach(function (fieldMiddle) {
|
||||
const fieldName = fieldPrefix + '_' + fieldMiddle;
|
||||
$filter.find('[id^=' + fieldName + '_]')
|
||||
.attr('id', function () {
|
||||
return fieldName + '_' + i;
|
||||
})
|
||||
.attr('name', function () {
|
||||
return fieldName + '_' + i;
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
['flt', 'having'].forEach(function (fieldPrefix) {
|
||||
let i = 1;
|
||||
$('#' + getPanelClass(fieldPrefix) + ' #filters > div').each(function () {
|
||||
fixId($(this), fieldPrefix, i);
|
||||
i++;
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function query(forceUpdate, pushState) {
|
||||
let force = forceUpdate;
|
||||
if (force === undefined) {
|
||||
force = false;
|
||||
}
|
||||
$('.query-and-save button').attr('disabled', 'disabled');
|
||||
if (force) { // Don't hide the alert message when the page is just loaded
|
||||
$('div.alert').remove();
|
||||
}
|
||||
$('#is_cached').hide();
|
||||
prepForm();
|
||||
|
||||
if (pushState !== false) {
|
||||
// update the url after prepForm() fix the field ids
|
||||
history.pushState({}, document.title, slice.querystring());
|
||||
}
|
||||
slice.container.html('');
|
||||
slice.render(force);
|
||||
}
|
||||
|
||||
function saveSlice() {
|
||||
const action = $('input[name=rdo_save]:checked').val();
|
||||
if (action === 'saveas') {
|
||||
const sliceName = $('input[name=new_slice_name]').val();
|
||||
if (sliceName === '') {
|
||||
utils.showModal({
|
||||
title: 'Error',
|
||||
body: 'You must pick a name for the new slice',
|
||||
});
|
||||
return;
|
||||
}
|
||||
document.getElementById('slice_name').value = sliceName;
|
||||
}
|
||||
const addToDash = $('input[name=addToDash]:checked').val();
|
||||
if (addToDash === 'existing' && $('#save_to_dashboard_id').val() === '') {
|
||||
utils.showModal({
|
||||
title: 'Error',
|
||||
body: 'You must pick an existing dashboard',
|
||||
});
|
||||
return;
|
||||
} else if (addToDash === 'new' && $('input[name=new_dashboard_name]').val() === '') {
|
||||
utils.showModal({
|
||||
title: 'Error',
|
||||
body: 'Please enter a name for the new dashboard',
|
||||
});
|
||||
return;
|
||||
}
|
||||
$('#action').val(action);
|
||||
prepForm();
|
||||
$('#query').submit();
|
||||
}
|
||||
|
||||
function initExploreView() {
|
||||
function getCollapsedFieldsets() {
|
||||
let collapsedFieldsets = $('#collapsedFieldsets').val();
|
||||
|
||||
if (collapsedFieldsets !== undefined && collapsedFieldsets !== '') {
|
||||
collapsedFieldsets = collapsedFieldsets.split('||');
|
||||
} else {
|
||||
collapsedFieldsets = [];
|
||||
}
|
||||
return collapsedFieldsets;
|
||||
}
|
||||
|
||||
function toggleFieldset(legend, animation) {
|
||||
const parent = legend.parent();
|
||||
const fieldset = parent.find('.legend_label').text();
|
||||
const collapsedFieldsets = getCollapsedFieldsets();
|
||||
let index;
|
||||
|
||||
if (parent.hasClass('collapsed')) {
|
||||
if (animation) {
|
||||
parent.find('.panel-body').slideDown();
|
||||
} else {
|
||||
parent.find('.panel-body').show();
|
||||
}
|
||||
parent.removeClass('collapsed');
|
||||
parent.find('span.collapser').text('[-]');
|
||||
|
||||
// removing from array, js is overcomplicated
|
||||
index = collapsedFieldsets.indexOf(fieldset);
|
||||
if (index !== -1) {
|
||||
collapsedFieldsets.splice(index, 1);
|
||||
}
|
||||
} else { // not collapsed
|
||||
if (animation) {
|
||||
parent.find('.panel-body').slideUp();
|
||||
} else {
|
||||
parent.find('.panel-body').hide();
|
||||
}
|
||||
|
||||
parent.addClass('collapsed');
|
||||
parent.find('span.collapser').text('[+]');
|
||||
index = collapsedFieldsets.indexOf(fieldset);
|
||||
if (index === -1 && fieldset !== '' && fieldset !== undefined) {
|
||||
collapsedFieldsets.push(fieldset);
|
||||
}
|
||||
}
|
||||
|
||||
$('#collapsedFieldsets').val(collapsedFieldsets.join('||'));
|
||||
}
|
||||
|
||||
px.initFavStars();
|
||||
|
||||
$('#viz_type').change(function () {
|
||||
$('#query').submit();
|
||||
});
|
||||
|
||||
$('#datasource_id').change(function () {
|
||||
window.location = $(this).find('option:selected').attr('url');
|
||||
});
|
||||
|
||||
const collapsedFieldsets = getCollapsedFieldsets();
|
||||
for (let i = 0; i < collapsedFieldsets.length; i++) {
|
||||
toggleFieldset($('legend:contains("' + collapsedFieldsets[i] + '")'), false);
|
||||
}
|
||||
function formatViz(viz) {
|
||||
const url = `/static/assets/images/viz_thumbnails/${viz.id}.png`;
|
||||
const noImg = '/static/assets/images/noimg.png';
|
||||
return $(
|
||||
`<img class="viz-thumb-option" src="${url}" onerror="this.src='${noImg}';">` +
|
||||
`<span>${viz.text}</span>`
|
||||
);
|
||||
}
|
||||
|
||||
$('.select2').select2({
|
||||
dropdownAutoWidth: true,
|
||||
});
|
||||
$('.select2Sortable').select2({
|
||||
dropdownAutoWidth: true,
|
||||
});
|
||||
$('.select2-with-images').select2({
|
||||
dropdownAutoWidth: true,
|
||||
dropdownCssClass: 'bigdrop',
|
||||
formatResult: formatViz,
|
||||
});
|
||||
$('.select2Sortable').select2Sortable({
|
||||
bindOrder: 'sortableStop',
|
||||
});
|
||||
$('form').show();
|
||||
$('[data-toggle="tooltip"]').tooltip({ container: 'body' });
|
||||
$('.ui-helper-hidden-accessible').remove(); // jQuery-ui 1.11+ creates a div for every tooltip
|
||||
|
||||
function addFilter(i, fieldPrefix) {
|
||||
const cp = $('#' + fieldPrefix + '0').clone();
|
||||
$(cp).appendTo('#' + getPanelClass(fieldPrefix) + ' #filters');
|
||||
$(cp).show();
|
||||
if (i !== undefined) {
|
||||
$(cp).find('#' + fieldPrefix + '_eq_0').val(px.getParam(fieldPrefix + '_eq_' + i));
|
||||
$(cp).find('#' + fieldPrefix + '_op_0').val(px.getParam(fieldPrefix + '_op_' + i));
|
||||
$(cp).find('#' + fieldPrefix + '_col_0').val(px.getParam(fieldPrefix + '_col_' + i));
|
||||
}
|
||||
$(cp).find('select').select2();
|
||||
$(cp).find('.remove').click(function () {
|
||||
$(this)
|
||||
.parent()
|
||||
.parent()
|
||||
.remove();
|
||||
});
|
||||
}
|
||||
|
||||
function setFilters() {
|
||||
['flt', 'having'].forEach(function (prefix) {
|
||||
for (let i = 1; i < 10; i++) {
|
||||
const col = px.getParam(prefix + '_col_' + i);
|
||||
if (col !== '') {
|
||||
addFilter(i, prefix);
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
setFilters();
|
||||
|
||||
$(window).bind('popstate', function () {
|
||||
// Browser back button
|
||||
const returnLocation = history.location || document.location;
|
||||
// Could do something more lightweight here, but we're not optimizing
|
||||
// for the use of the back button anyways
|
||||
returnLocation.reload();
|
||||
});
|
||||
|
||||
$('#filter_panel #plus').click(function () {
|
||||
addFilter(undefined, 'flt');
|
||||
});
|
||||
$('#having_panel #plus').click(function () {
|
||||
addFilter(undefined, 'having');
|
||||
});
|
||||
|
||||
function createChoices(term, data) {
|
||||
const filtered = $(data).filter(function () {
|
||||
return this.text.localeCompare(term) === 0;
|
||||
});
|
||||
if (filtered.length === 0) {
|
||||
return {
|
||||
id: term,
|
||||
text: term,
|
||||
};
|
||||
}
|
||||
return {};
|
||||
}
|
||||
|
||||
function initSelectionToValue(element, callback) {
|
||||
callback({
|
||||
id: element.val(),
|
||||
text: element.val(),
|
||||
});
|
||||
}
|
||||
|
||||
$('.select2_freeform').each(function () {
|
||||
const parent = $(this).parent();
|
||||
const name = $(this).attr('name');
|
||||
const l = [];
|
||||
let selected = '';
|
||||
for (let i = 0; i < this.options.length; i++) {
|
||||
l.push({
|
||||
id: this.options[i].value,
|
||||
text: this.options[i].text,
|
||||
});
|
||||
if (this.options[i].selected) {
|
||||
selected = this.options[i].value;
|
||||
}
|
||||
}
|
||||
parent.append(
|
||||
`<input class="${$(this).attr('class')}" ` +
|
||||
`name="${name}" type="text" value="${selected}">`
|
||||
);
|
||||
$(`input[name='${name}']`).select2({
|
||||
createSearchChoice: createChoices,
|
||||
initSelection: initSelectionToValue,
|
||||
dropdownAutoWidth: true,
|
||||
multiple: false,
|
||||
data: l,
|
||||
});
|
||||
$(this).remove();
|
||||
});
|
||||
|
||||
function prepSaveDialog() {
|
||||
const setButtonsState = function () {
|
||||
const addToDash = $('input[name=addToDash]:checked').val();
|
||||
if (addToDash === 'existing' || addToDash === 'new') {
|
||||
$('.gotodash').removeAttr('disabled');
|
||||
} else {
|
||||
$('.gotodash').prop('disabled', true);
|
||||
}
|
||||
};
|
||||
const url = '/dashboardmodelviewasync/api/read?_flt_0_owners=' + $('#userid').val();
|
||||
$.get(url, function (data) {
|
||||
const choices = [];
|
||||
for (let i = 0; i < data.pks.length; i++) {
|
||||
choices.push({ id: data.pks[i], text: data.result[i].dashboard_title });
|
||||
}
|
||||
$('#save_to_dashboard_id').select2({
|
||||
data: choices,
|
||||
dropdownAutoWidth: true,
|
||||
}).on('select2-selecting', function () {
|
||||
$('#addToDash_existing').prop('checked', true);
|
||||
setButtonsState();
|
||||
});
|
||||
});
|
||||
|
||||
$('input[name=addToDash]').change(setButtonsState);
|
||||
$("input[name='new_dashboard_name']").on('focus', function () {
|
||||
$('#add_to_new_dash').prop('checked', true);
|
||||
setButtonsState();
|
||||
});
|
||||
$("input[name='new_slice_name']").on('focus', function () {
|
||||
$('#save_as_new').prop('checked', true);
|
||||
setButtonsState();
|
||||
});
|
||||
|
||||
$('#btn_modal_save').on('click', () => saveSlice());
|
||||
|
||||
$('#btn_modal_save_goto_dash').click(() => {
|
||||
document.getElementById('goto_dash').value = 'true';
|
||||
saveSlice();
|
||||
});
|
||||
}
|
||||
prepSaveDialog();
|
||||
}
|
||||
|
||||
function renderExploreActions() {
|
||||
const exploreActionsEl = document.getElementById('js-explore-actions');
|
||||
ReactDOM.render(
|
||||
<ExploreActionButtons
|
||||
canDownload={exploreActionsEl.getAttribute('data-can-download')}
|
||||
slice={slice}
|
||||
query={slice.viewSqlQuery}
|
||||
/>,
|
||||
exploreActionsEl
|
||||
);
|
||||
}
|
||||
|
||||
function initComponents() {
|
||||
const queryAndSaveBtnsEl = document.getElementById('js-query-and-save-btns');
|
||||
ReactDOM.render(
|
||||
<QueryAndSaveBtns
|
||||
canAdd={queryAndSaveBtnsEl.getAttribute('data-can-add')}
|
||||
onQuery={() => query(true)}
|
||||
/>,
|
||||
queryAndSaveBtnsEl
|
||||
);
|
||||
renderExploreActions();
|
||||
}
|
||||
|
||||
let exploreController = {
|
||||
type: 'slice',
|
||||
done: (sliceObj) => {
|
||||
slice = sliceObj;
|
||||
renderExploreActions();
|
||||
const cachedSelector = $('#is_cached');
|
||||
if (slice.data !== undefined && slice.data.is_cached) {
|
||||
cachedSelector
|
||||
.attr(
|
||||
'title',
|
||||
`Served from data cached at ${slice.data.cached_dttm}. Click [Query] to force refresh`)
|
||||
.show()
|
||||
.tooltip('fixTitle');
|
||||
} else {
|
||||
cachedSelector.hide();
|
||||
}
|
||||
},
|
||||
error: (sliceObj) => {
|
||||
slice = sliceObj;
|
||||
renderExploreActions();
|
||||
},
|
||||
};
|
||||
exploreController = Object.assign({}, utils.controllerInterface, exploreController);
|
||||
|
||||
|
||||
$(document).ready(function () {
|
||||
const data = $('.slice').data('slice');
|
||||
|
||||
initExploreView();
|
||||
|
||||
slice = px.Slice(data, exploreController);
|
||||
|
||||
// call vis render method, which issues ajax
|
||||
// calls render on the slice for the first time
|
||||
query(false, false);
|
||||
|
||||
slice.bindResizeToWindowResize();
|
||||
|
||||
initComponents();
|
||||
});
|
||||
Reference in New Issue
Block a user