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

Backfills screen improvements #141

Merged
merged 6 commits into from
Aug 9, 2017
Merged

Backfills screen improvements #141

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
7d4aeda
Backfills screen improvements
dufrannea Aug 2, 2017
3d1ca47
Adds back priority
dufrannea Aug 4, 2017
b0d193b
Merge branch 'master' into backfills-improvements
dufrannea Aug 4, 2017
76b4e90
Merge branch 'master' into backfills-improvements
dufrannea Aug 7, 2017
c76472d
Merge branch 'master' into backfills-improvements
dufrannea Aug 8, 2017
e50ca76
Merge branch 'master' into backfills-improvements
vguerci Aug 9, 2017
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
282 changes: 226 additions & 56 deletions core/src/main/javascript/app/pages/BackfillCreate.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,11 +7,13 @@ import { compose } from "redux";
import { goBack } from "redux-url";
import { Field, reduxForm, SubmissionError } from "redux-form";
import moment from "moment";
import ArrowIcon from "react-icons/lib/fa/long-arrow-right";

import Window from "../components/Window";
import FancyTable from "../components/FancyTable";
import JobSelector from "../components/JobSelector";
import type { Backfill, Workflow } from "../../datamodel";
import MaskedInput from "react-maskedinput";

type Props = {
workflow: Workflow,
Expand All @@ -22,59 +24,117 @@ type Props = {
// Form
handleSubmit: any,
error: string,
submitting: boolean
valid: boolean,
submitting: boolean,
env: {
name: ?string,
critical: boolean
}
};

const required = value => (value ? undefined : "Required");
// const jobsRequired = jobs => (jobs && jobs.length ? undefined : "Required");
const jobsRequired = jobs => (jobs && jobs.length ? undefined : "Required");

const DATE_FORMAT = "YYYY-MM-DD HH";
const DATE_FORMAT = "YYYY-MM-DD HH:mm";
const DATE_INVALID = `Invalid date, accepted format is ${DATE_FORMAT}`;
const validDate = value =>
moment.utc(value).isValid() ? undefined : DATE_INVALID;
moment.utc(value, DATE_FORMAT, true).isValid() ? undefined : DATE_INVALID;

const parseDate = value => {
const date = moment.utc(value);
const date = moment.utc(value, DATE_FORMAT, true);
return date.isValid() ? date : value;
};
const formatDate = value => {
const date = moment.utc(value);
const date = moment.utc(value, DATE_FORMAT, true);
return date.isValid() ? date.format(DATE_FORMAT) : value;
};

const Label = ({ name }: any) => <dt key={name + "_"}>{name}</dt>;
const Label = ({ name }: any) => <dt key={`_${name}`}>{name}</dt>;

const InputField = ({
name,
type,
input,
meta: { touched, error, warning }
placeholder,
meta: { touched, error, warning },
alwaysDisplayError
}: any) => (
<dd key={name}>
<input type={type} {...input} />
<span>
<input
className="input-field"
type={type}
{...input}
placeholder={placeholder}
/>
{(touched || alwaysDisplayError) &&
((error && <span className="input-error">{error}</span>) ||
(warning && <span className="input-warning">{warning}</span>))}
</span>
);

const TextAreaField = ({
name,
input,
placeholder,
meta: { touched, error, warning }
}) => (
<span>
<textarea
className="input-field markdown-area"
placeholder={placeholder}
{...input}
/>
{touched &&
((error && <span>{error}</span>) || (warning && <span>{warning}</span>))}
</dd>
((error && <span className="input-error">{error}</span>) ||
(warning && <span className="input-warning">{warning}</span>))}
</span>
);

const validateConfirmation = environment => value => {
const errorMessage =
"You are going to run a backfill, please type in the name of the environment to confirm.";
return environment && environment === value ? undefined : errorMessage;
};

const JobsField = ({ workflow, input: { value, onChange } }: any) => (
<JobSelector workflow={workflow} selected={value} onChange={onChange} />
);

const DateWithMask = ({
name,
type,
input,
placeholder,
meta: { touched, error, warning }
}: any) => (
<span>
<MaskedInput
mask="1111-11-11 11:11"
className="input-field"
type={type}
{...input}
placeholder={placeholder}
/>
{touched &&
((error && <span className="input-error">{error}</span>) ||
(warning && <span className="input-warning">{warning}</span>))}
</span>
);

class BackfillCreate extends React.Component<any, Props, void> {
constructor(props: Props) {
super(props);
(this: any).createBackfill = this.createBackfill.bind(this);
}

createBackfill({ jobs, name, description, start, end, priority }: Backfill) {
createBackfill({ jobs, name, description, start, end }: Backfill) {
if (jobs.length <= 0)
throw new SubmissionError({ _error: "No jobs selected" });

return fetch(
`/api/timeseries/backfill?` +
`name=${name}&description=${description}&` +
`jobs=${jobs.join(",")}&priority=${priority}&` +
`jobs=${jobs.join(",")}&priority=1&` +
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Are you sure we want to hardcode priority?

`startDate=${start.toISOString()}&endDate=${end.toISOString()}`,
{ method: "POST", credentials: "include" }
)
Expand All @@ -94,49 +154,100 @@ class BackfillCreate extends React.Component<any, Props, void> {
}

render() {
const { workflow, classes, handleSubmit, error, submitting } = this.props;
const {
workflow,
classes,
handleSubmit,
error,
valid,
submitting,
env
} = this.props;
return (
<Window title="Create Backfill">
<div className={classes.filter}>
<Field
name="jobs"
workflow={workflow}
component={JobsField}
//TODO display error inside: validate={[jobsRequired]}
/>
</div>
<form onSubmit={handleSubmit(this.createBackfill)}>

<form
onSubmit={handleSubmit(this.createBackfill)}
className={classes.createBackfillForm}
>
<FancyTable key="properties">
<Label name="name" />
<Field
name="name"
type="text"
component={InputField}
validate={[required]}
/>
<Label name="start" />
<Field
name="start"
type="text"
component={InputField}
format={formatDate}
parse={parseDate}
validate={[required, validDate]}
/>
<Label name="end" />
<Field
name="end"
type="text"
component={InputField}
format={formatDate}
parse={parseDate}
validate={[required, validDate]}
/>
<Label name="priority" />
<Field name="priority" type="number" component={InputField} />
<Label name="Name" />
<dd key="name">
<Field
name="name"
type="text"
component={InputField}
validate={[required]}
props={{ placeholder: "To identify the backfill" }}
/>
</dd>
<Label name="Jobs to backfill" />
<dd name="jobs" style={{ overflow: "visible" }}>
<div className={classes.filter}>
<Field
name="jobs"
workflow={workflow}
component={JobsField}
props={{ placeholder: "Select the list of jobs to backfill" }}
validate={[jobsRequired]}
/>
</div>
</dd>
<Label name="Period" />
<dd name="period" className={classes.dateRangeSelector}>
<Field
name="start"
type="text"
component={DateWithMask}
format={formatDate}
parse={parseDate}
validate={[required, validDate]}
/>
<ArrowIcon />
<Field
name="end"
type="text"
component={DateWithMask}
format={formatDate}
parse={parseDate}
validate={[required, validDate]}
/>
</dd>
<dt key={"description_"} className="double-height">
{"Description"}
</dt>
<dd name="description" className="double-height">
<Field
name="description"
component={TextAreaField}
props={{
placeholder: "Explain why you need to backfill. Markdown is supported."
}}
/>
</dd>
<div
style={{ display: "flex", width: "100%" }}
className={env.critical ? "confirm confirm-critical" : "confirm"}
>
<Label name="Confirm" />
<dd name="confirm">
<Field
name="confirm"
component={InputField}
validate={[validateConfirmation(env.name)]}
props={{alwaysDisplayError:true}}
/>
</dd>
</div>
<dt name="create_" />
<dd key="create">
<button type="submit" disabled={submitting}>Create</button>
<button
type="submit"
className={["validate-button " + (valid ? "" : "error")]}
disabled={valid == false || submitting}
>
Start to backfill
</button>
{error && <strong>{error}</strong>}
</dd>
</FancyTable>
Expand All @@ -150,20 +261,79 @@ const styles = {
filter: {
background: "#fff",
height: "4em",
lineHeight: "4em",
boxShadow: "0px 1px 5px 0px #BECBD6"
lineHeight: "4em"
},
dateRangeSelector: {
"& > span:last-child": {
marginLeft: "10px"
},
"& > svg": {
marginLeft: "10px"
}
},
createBackfillForm: {
"& .input-field": {
border: "1px solid #D8D8D9",
padding: "5px",
borderRadius: "3px"
},
"& .input-field.markdown-area": {
verticalAlign: "middle",
width: "95%",
height: "70px",
resize: "none"
},
"& .confirm": {
backgroundColor: "#26A69A",
color: "white"
},
"& .confirm.confirm-critical": {
backgroundColor: "#FF5722"
},
"& .validate-button": {
padding: "10px",
borderRadius: "3px",
backgroundColor: "#283249",
borderColor: "transparent",
color: "white",
fontWeight: "bold"
},
"& .validate-button.error": {
backgroundColor: "#6A6A6A",
cursor: "not-allowed"
},
"& dt": {
lineHeight: "4em"
},
"& dd": {
lineHeight: "4em"
},
"& dt.double-height": {
lineHeight: "8em"
},
"& dd.double-height": {
lineHeight: "8em"
},
"& .input-error": {
marginLeft: "5px"
},
"& .input-warning": {
marginLeft: "5px"
}
}
};

const mapStateToProps = ({ app: { workflow, selectedJobs } }) => ({
const mapStateToProps = ({ app: { workflow, selectedJobs, project } }) => ({
workflow,
initialValues: {
jobs: selectedJobs,
priority: 0,
start: moment.utc({ hour: 0 }),
end: moment.utc({ hour: 1 })
}
},
env: project && project.env
});

const mapDispatchToProps = dispatch => ({
back() {
dispatch(goBack());
Expand Down
1 change: 1 addition & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,6 +54,7 @@
"react-dom": "^15.5.4",
"react-icons": "^2.2.5",
"react-jss": "^5.3.0",
"react-maskedinput": "^4.0.0",
"react-measure": "^1.4.7",
"react-motion": "^0.4.8",
"react-motion-ui-pack": "^0.10.2",
Expand Down
Loading