iop
/
superset
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

refactor: New schedule query button (#13797)

This commit is contained in:
AAfghahi 2021-03-26 09:56:59 -04:00 committed by GitHub
parent be8f8d9c1f
commit 64f967cb2d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 488 additions and 57937 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

57931
superset-frontend/package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

57
superset-frontend/package.json
View File

@ -65,34 +65,34 @@
"@babel/runtime-corejs3": "^7.12.5",
"@data-ui/sparkline": "^0.0.84",
"@emotion/core": "^10.0.35",
"@superset-ui/chart-controls": "^0.17.21",
"@superset-ui/core": "^0.17.21",
"@superset-ui/legacy-plugin-chart-calendar": "^0.17.21",
"@superset-ui/legacy-plugin-chart-chord": "^0.17.21",
"@superset-ui/legacy-plugin-chart-country-map": "^0.17.21",
"@superset-ui/legacy-plugin-chart-event-flow": "^0.17.21",
"@superset-ui/legacy-plugin-chart-force-directed": "^0.17.21",
"@superset-ui/legacy-plugin-chart-heatmap": "^0.17.21",
"@superset-ui/legacy-plugin-chart-histogram": "^0.17.21",
"@superset-ui/legacy-plugin-chart-horizon": "^0.17.21",
"@superset-ui/legacy-plugin-chart-map-box": "^0.17.21",
"@superset-ui/legacy-plugin-chart-paired-t-test": "^0.17.21",
"@superset-ui/legacy-plugin-chart-parallel-coordinates": "^0.17.21",
"@superset-ui/legacy-plugin-chart-partition": "^0.17.21",
"@superset-ui/legacy-plugin-chart-pivot-table": "^0.17.21",
"@superset-ui/legacy-plugin-chart-rose": "^0.17.21",
"@superset-ui/legacy-plugin-chart-sankey": "^0.17.21",
"@superset-ui/legacy-plugin-chart-sankey-loop": "^0.17.21",
"@superset-ui/legacy-plugin-chart-sunburst": "^0.17.21",
"@superset-ui/legacy-plugin-chart-treemap": "^0.17.21",
"@superset-ui/legacy-plugin-chart-world-map": "^0.17.21",
"@superset-ui/legacy-preset-chart-big-number": "^0.17.21",
"@superset-ui/chart-controls": "^0.17.22",
"@superset-ui/core": "^0.17.22",
"@superset-ui/legacy-plugin-chart-calendar": "^0.17.22",
"@superset-ui/legacy-plugin-chart-chord": "^0.17.22",
"@superset-ui/legacy-plugin-chart-country-map": "^0.17.22",
"@superset-ui/legacy-plugin-chart-event-flow": "^0.17.22",
"@superset-ui/legacy-plugin-chart-force-directed": "^0.17.22",
"@superset-ui/legacy-plugin-chart-heatmap": "^0.17.22",
"@superset-ui/legacy-plugin-chart-histogram": "^0.17.22",
"@superset-ui/legacy-plugin-chart-horizon": "^0.17.22",
"@superset-ui/legacy-plugin-chart-map-box": "^0.17.22",
"@superset-ui/legacy-plugin-chart-paired-t-test": "^0.17.22",
"@superset-ui/legacy-plugin-chart-parallel-coordinates": "^0.17.22",
"@superset-ui/legacy-plugin-chart-partition": "^0.17.22",
"@superset-ui/legacy-plugin-chart-pivot-table": "^0.17.22",
"@superset-ui/legacy-plugin-chart-rose": "^0.17.22",
"@superset-ui/legacy-plugin-chart-sankey": "^0.17.22",
"@superset-ui/legacy-plugin-chart-sankey-loop": "^0.17.22",
"@superset-ui/legacy-plugin-chart-sunburst": "^0.17.22",
"@superset-ui/legacy-plugin-chart-treemap": "^0.17.22",
"@superset-ui/legacy-plugin-chart-world-map": "^0.17.22",
"@superset-ui/legacy-preset-chart-big-number": "^0.17.22",
"@superset-ui/legacy-preset-chart-deckgl": "^0.4.6",
"@superset-ui/legacy-preset-chart-nvd3": "^0.17.21",
"@superset-ui/plugin-chart-echarts": "^0.17.21",
"@superset-ui/plugin-chart-table": "^0.17.21",
"@superset-ui/plugin-chart-word-cloud": "^0.17.21",
"@superset-ui/preset-chart-xy": "^0.17.21",
"@superset-ui/legacy-preset-chart-nvd3": "^0.17.22",
"@superset-ui/plugin-chart-echarts": "^0.17.22",
"@superset-ui/plugin-chart-table": "^0.17.22",
"@superset-ui/plugin-chart-word-cloud": "^0.17.22",
"@superset-ui/preset-chart-xy": "^0.17.22",
"@vx/responsive": "^0.0.195",
"abortcontroller-polyfill": "^1.1.9",
"antd": "^4.9.4",
@ -100,7 +100,7 @@
"bootstrap": "^3.4.1",
"bootstrap-slider": "^10.0.0",
"brace": "^0.11.1",
"chrono-node": "^1.3.11",
"chrono-node": "^2.2.1",
"classnames": "^2.2.5",
"core-js": "^3.6.5",
"d3-array": "^1.2.4",
@ -220,6 +220,7 @@
"@types/react-dom": "^16.9.8",
"@types/react-gravatar": "^2.6.8",
"@types/react-json-tree": "^0.6.11",
"@types/react-jsonschema-form": "^1.7.4",
"@types/react-loadable": "^5.5.4",
"@types/react-redux": "^7.1.10",
"@types/react-router-dom": "^5.1.5",

222
superset-frontend/src/SqlLab/components/ScheduleQueryButton.jsx
View File

@ -1,222 +0,0 @@
/**
* Licensed to the Apache Software Foundation (ASF) under one
* or more contributor license agreements. See the NOTICE file
* distributed with this work for additional information
* regarding copyright ownership. The ASF licenses this file
* to you under the Apache License, Version 2.0 (the
* "License"); you may not use this file except in compliance
* with the License. You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing,
* software distributed under the License is distributed on an
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
* KIND, either express or implied. See the License for the
* specific language governing permissions and limitations
* under the License.
*/
import React from 'react';
import PropTypes from 'prop-types';
import Form from 'react-jsonschema-form';
import chrono from 'chrono-node';
import { Col, FormControl, FormGroup, Row } from 'react-bootstrap';
import { t, styled } from '@superset-ui/core';
import ModalTrigger from 'src/components/ModalTrigger';
import FormLabel from 'src/components/FormLabel';
import './ScheduleQueryButton.less';
const validators = {
greater: (a, b) => a > b,
greater_equal: (a, b) => a >= b,
less: (a, b) => a < b,
less_equal: (a, b) => a <= b,
};
function getJSONSchema() {
const jsonSchema = window.featureFlags.SCHEDULED_QUERIES.JSONSCHEMA;
// parse date-time into usable value (eg, 'today' => `new Date()`)
Object.entries(jsonSchema.properties).forEach(([key, properties]) => {
if (properties.default && properties.format === 'date-time') {
jsonSchema.properties[key] = {
...properties,
default: chrono.parseDate(properties.default).toISOString(),
};
}
});
return jsonSchema;
}
function getUISchema() {
return window.featureFlags.SCHEDULED_QUERIES.UISCHEMA;
}
function getValidationRules() {
return window.featureFlags.SCHEDULED_QUERIES.VALIDATION || [];
}
function getValidator() {
const rules = getValidationRules();
return (formData, errors) => {
rules.forEach(rule => {
const test = validators[rule.name];
const args = rule.arguments.map(name => formData[name]);
const container = rule.container || rule.arguments.slice(-1)[0];
if (!test(...args)) {
errors[container].addError(rule.message);
}
});
return errors;
};
}
const propTypes = {
defaultLabel: PropTypes.string,
sql: PropTypes.string.isRequired,
schema: PropTypes.string.isRequired,
dbId: PropTypes.number.isRequired,
animation: PropTypes.bool,
onSchedule: PropTypes.func,
scheduleQueryWarning: PropTypes.string,
disabled: PropTypes.bool,
tooltip: PropTypes.string,
};
const defaultProps = {
defaultLabel: t('Undefined'),
animation: true,
onSchedule: () => {},
scheduleQueryWarning: null,
disabled: false,
tooltip: null,
};
const StyledRow = styled(Row)`
padding-bottom: ${({ theme }) => theme.gridUnit * 2}px;
`;
class ScheduleQueryButton extends React.PureComponent {
constructor(props) {
super(props);
this.state = {
description: '',
label: props.defaultLabel,
showSchedule: false,
};
this.toggleSchedule = this.toggleSchedule.bind(this);
this.onSchedule = this.onSchedule.bind(this);
this.onCancel = this.onCancel.bind(this);
this.onLabelChange = this.onLabelChange.bind(this);
this.onDescriptionChange = this.onDescriptionChange.bind(this);
}
onSchedule({ formData }) {
const query = {
label: this.state.label,
description: this.state.description,
db_id: this.props.dbId,
schema: this.props.schema,
sql: this.props.sql,
extra_json: JSON.stringify({ schedule_info: formData }),
};
this.props.onSchedule(query);
this.saveModal.close();
}
onCancel() {
this.saveModal.close();
}
onLabelChange(e) {
this.setState({ label: e.target.value });
}
onDescriptionChange(e) {
this.setState({ description: e.target.value });
}
toggleSchedule() {
this.setState(prevState => ({ showSchedule: !prevState.showSchedule }));
}
renderModalBody() {
return (
<FormGroup>
<StyledRow>
<Col md={12}>
<FormLabel className="control-label" htmlFor="embed-height">
{t('Label')}
</FormLabel>
<FormControl
type="text"
placeholder={t('Label for your query')}
value={this.state.label}
onChange={this.onLabelChange}
/>
</Col>
</StyledRow>
<StyledRow>
<Col md={12}>
<FormLabel className="control-label" htmlFor="embed-height">
{t('Description')}
</FormLabel>
<FormControl
componentClass="textarea"
placeholder={t('Write a description for your query')}
value={this.state.description}
onChange={this.onDescriptionChange}
/>
</Col>
</StyledRow>
<Row>
<Col md={12}>
<div className="json-schema">
<Form
schema={getJSONSchema()}
uiSchema={getUISchema()}
onSubmit={this.onSchedule}
validate={getValidator()}
/>
</div>
</Col>
</Row>
{this.props.scheduleQueryWarning && (
<Row>
<Col md={12}>
<small>{this.props.scheduleQueryWarning}</small>
</Col>
</Row>
)}
</FormGroup>
);
}
render() {
return (
<span className="ScheduleQueryButton">
<ModalTrigger
ref={ref => {
this.saveModal = ref;
}}
modalTitle={t('Schedule query')}
modalBody={this.renderModalBody()}
triggerNode={
<div
role="button"
buttonSize="small"
onClick={this.toggleSchedule}
disabled={this.props.disabled}
tooltip={this.props.tooltip}
>
{t('Schedule')}
</div>
}
/>
</span>
);
}
}
ScheduleQueryButton.propTypes = propTypes;
ScheduleQueryButton.defaultProps = defaultProps;
export default ScheduleQueryButton;

214
superset-frontend/src/SqlLab/components/ScheduleQueryButton.tsx Normal file
View File

@ -0,0 +1,214 @@
/**
* Licensed to the Apache Software Foundation (ASF) under one
* or more contributor license agreements. See the NOTICE file
* distributed with this work for additional information
* regarding copyright ownership. The ASF licenses this file
* to you under the Apache License, Version 2.0 (the
* "License"); you may not use this file except in compliance
* with the License. You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing,
* software distributed under the License is distributed on an
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
* KIND, either express or implied. See the License for the
* specific language governing permissions and limitations
* under the License.
*/
import React, { FunctionComponent, useState } from 'react';
import Form, { FormProps, FormValidation } from 'react-jsonschema-form';
import { Col, FormControl, FormGroup, Row } from 'react-bootstrap';
import { t, styled } from '@superset-ui/core';
import * as chrono from 'chrono-node';
import ModalTrigger from 'src/components/ModalTrigger';
import FormLabel from 'src/components/FormLabel';
import './ScheduleQueryButton.less';
import Button from 'src/components/Button';
const validators = {
greater: (a: number, b: number) => a > b,
greater_equal: (a: number, b: number) => a >= b,
less: (a: number, b: number) => a < b,
less_equal: (a: number, b: number) => a <= b,
};
const getJSONSchema = () => {
const jsonSchema = window.featureFlags.SCHEDULED_QUERIES?.JSONSCHEMA;
// parse date-time into usable value (eg, 'today' => `new Date()`)
if (jsonSchema) {
Object.entries(jsonSchema.properties).forEach(
([key, value]: [string, any]) => {
if (value.default && value.format === 'date-time') {
jsonSchema.properties[key] = {
...value,
default: chrono.parseDate(value.default).toISOString(),
};
}
},
);
return jsonSchema;
}
return {};
};
const getUISchema = () => window.featureFlags.SCHEDULED_QUERIES?.UISCHEMA;
const getValidationRules = () =>
window.featureFlags.SCHEDULED_QUERIES?.VALIDATION || [];
const getValidator = () => {
const rules: any = getValidationRules();
return (formData: Record<string, any>, errors: FormValidation) => {
rules.forEach((rule: any) => {
const test = validators[rule.name];
const args = rule.arguments.map((name: string) => formData[name]);
const container = rule.container || rule.arguments.slice(-1)[0];
if (!test(...args)) {
errors[container].addError(rule.message);
}
});
return errors;
};
};
interface ScheduleQueryButtonProps {
defaultLabel?: string;
sql: string;
schema?: string;
dbId: number;
animation?: boolean;
onSchedule?: Function;
scheduleQueryWarning: string | null;
disabled: boolean;
tooltip: string;
}
const StyledRow = styled(Row)`
padding-bottom: ${({ theme }) => theme.gridUnit * 2}px;
`;
export const StyledButtonComponent = styled(Button)`
background: none;
text-transform: none;
padding: 0px;
color: rgba(0, 0, 0, 0.85);
font-size: 14px;
font-weight: ${({ theme }) => theme.typography.weights.normal};
&: disabled {
background: none;
color: rgba(0, 0, 0, 0.85);
&: hover {
background: none;
color: rgba(0, 0, 0, 0.85);
}
}
`;
const ScheduleQueryButton: FunctionComponent<ScheduleQueryButtonProps> = ({
defaultLabel = t('Undefined'),
sql,
schema,
dbId,
onSchedule = () => {},
scheduleQueryWarning,
tooltip,
disabled = false,
}) => {
const [description, setDescription] = useState('');
const [label, setLabel] = useState(defaultLabel);
const [showSchedule, setShowSchedule] = useState(false);
let saveModal: ModalTrigger | null;
const onScheduleSubmit = ({
formData,
}: {
formData: Omit<FormProps<Record<string, any>>, 'schema'>;
}) => {
const query = {
label,
description,
db_id: dbId,
schema,
sql,
extra_json: JSON.stringify({ schedule_info: formData }),
};
onSchedule(query);
saveModal?.close();
};
const renderModalBody = () => (
<FormGroup>
<StyledRow>
<Col md={12}>
<FormLabel className="control-label" htmlFor="embed-height">
{t('Label')}
</FormLabel>
<FormControl
type="text"
placeholder={t('Label for your query')}
value={label}
onChange={(event: any) => setLabel(event.target?.value)}
/>
</Col>
</StyledRow>
<StyledRow>
<Col md={12}>
<FormLabel className="control-label" htmlFor="embed-height">
{t('Description')}
</FormLabel>
<FormControl
componentClass="textarea"
placeholder={t('Write a description for your query')}
value={description}
onChange={(event: any) => setDescription(event.target?.value)}
/>
</Col>
</StyledRow>
<Row>
<Col md={12}>
<div className="json-schema">
<Form
schema={getJSONSchema()}
uiSchema={getUISchema}
onSubmit={onScheduleSubmit}
validate={getValidator()}
/>
</div>
</Col>
</Row>
{scheduleQueryWarning && (
<Row>
<Col md={12}>
<small>{scheduleQueryWarning}</small>
</Col>
</Row>
)}
</FormGroup>
);
return (
<span className="ScheduleQueryButton">
<ModalTrigger
ref={ref => {
saveModal = ref;
}}
modalTitle={t('Schedule query')}
modalBody={renderModalBody()}
triggerNode={
<StyledButtonComponent
onClick={() => setShowSchedule(!showSchedule)}
buttonSize="small"
buttonStyle="link"
tooltip={tooltip}
disabled={disabled}
>
{t('Schedule')}
</StyledButtonComponent>
}
/>
</span>
);
};
export default ScheduleQueryButton;

1
superset-frontend/src/components/FormLabel/index.tsx
View File

@ -24,6 +24,7 @@ export type FormLabelProps = {
children: ReactNode;
htmlFor?: string;
required?: boolean;
className?: string;
};
export default function FormLabel({