Adds backfill detail screen

core/src/main/javascript/App.js

@@ -19,6 +19,7 @@ import Workflow from "./app/pages/Workflow";
 import { Started, Stuck, Paused, Finished } from "./app/pages/ExecutionLogs";
 import Execution from "./app/pages/Execution";
 import TimeSeriesExecutions from "./app/pages/TimeSeriesExecutions";
+import Backfill from "./app/pages/Backfill";
 import Backfills from "./app/pages/Backfills";
 import BackfillCreate from "./app/pages/BackfillCreate";
 import Favicon from "./app/components/Favicon";
@@ -104,6 +105,8 @@ class App extends React.Component {
             return <Backfills />;
           case "timeseries/backfills/create":
             return <BackfillCreate />;
+          case "timeseries/backfills/detail":
+            return <Backfill backfillId={page.backfillId} />;
           default:
             return null;
         }

core/src/main/javascript/ApplicationState.js

@@ -53,7 +53,10 @@ export type Page =
       sort?: string,
       order?: "asc" | "desc"
     }
-  | { id: "timeseries/backfills/create" };
+  | { id: "timeseries/backfills/create" }
+  | {
+      id: "timeseries/backfills/detail", backfillId: string
+  };
 
 export type State = {
   page: Page,

core/src/main/javascript/app/components/Context.js

@@ -0,0 +1,45 @@
+// @flow
+
+import React from "react";
+import moment from "moment";
+
+import Link from "./Link"
+import CalendarIcon from "react-icons/lib/md/date-range";
+import BreakIcon from "react-icons/lib/md/keyboard-control";
+
+type Props = {
+  className?: string,
+  context : {
+    start: string;
+    end: string;
+  };
+};
+
+const Context = ({ context } : Props) => {
+    // Need to be dynamically linked with the scehduler but for now let's
+    // assume that it is a TimeseriesContext
+    let format = date => moment(date).utc().format("MMM-DD HH:mm");
+    let URLFormat = date => moment(date).utc().format("YYYY-MM-DDTHH") + "Z";
+
+    return (
+      <Link
+        href={`/timeseries/calendar/${URLFormat(context.start)}_${URLFormat(context.end)}`}
+      >
+        <CalendarIcon
+          style={{
+            fontSize: "1.2em",
+            verticalAlign: "middle",
+            transform: "translateY(-2px)"
+          }}
+        />
+        {" "}
+        {format(context.start)}
+        {" "}
+        <BreakIcon />
+        {" "}
+        {format(context.end)} UTC
+      </Link>
+    );
+}
+
+export default Context;

core/src/main/javascript/app/components/Window.js

@@ -3,14 +3,15 @@
 import React from "react";
 import injectSheet from "react-jss";
 import { connect } from "react-redux";
-import { goBack } from "redux-url";
+import { goBack, navigate } from "redux-url";
 import CloseIcon from "react-icons/lib/md/close";
 
 type Props = {
   classes: any,
   title: string,
   children: any,
-  back: () => void
+  back: () => void,
+  closeUrl: ?string
 };
 
 const Window = ({ classes, title, children, back }: Props) => (
@@ -65,9 +66,13 @@ const styles = {
   }
 };
 
-const mapDispatchToProps = dispatch => ({
+const mapDispatchToProps = (dispatch, ownProps) => ({
   back() {
-    dispatch(goBack());
+    if (ownProps.closeUrl){
+      dispatch(navigate(ownProps.closeUrl));      
+    } else {
+      dispatch(goBack());
+    }
   }
 });
 

core/src/main/javascript/app/pages/Backfill.js

@@ -0,0 +1,171 @@
+// @flow
+
+import React from "react";
+import { connect } from "react-redux";
+import injectSheet from "react-jss";
+import FancyTable from "../components/FancyTable";
+
+import Window from "../components/Window";
+import type { Backfill, ExecutionLog, Workflow } from "../../datamodel";
+import { listenEvents } from "../../Utils";
+import Context from "../components/Context";
+import JobStatus from "../components/JobStatus";
+import { markdown } from "markdown";
+import Link from "../components/Link";
+
+import { BackfillsExecutions } from "./ExecutionLogs";
+
+type Props = {
+  classes: any,
+  backfillId: string,
+  workflow: Workflow
+};
+type State = {
+  backfill: ?Backfill,
+  query: ?string,
+  eventSource: ?any,
+  error: ?any,
+  executionsEventSource: ?any,
+  executions: Array<ExecutionLog>,
+  completion?: number;
+};
+
+class BackfillDetail extends React.Component {
+  props: Props;
+  state: State;
+  constructor(props: Props) {
+    super(props);
+    this.state = {
+      backfill: undefined,
+      query: null,
+      eventSource: null,
+      error: null,
+      completion : null
+    };
+  }
+
+  componentWillMount() {
+    this.listen();
+  }
+
+  listen() {
+    let { query, eventSource } = this.state;
+    let { backfillId } = this.props;
+    let newQuery = `/api/timeseries/backfills/${backfillId}?events=true`;
+    if (newQuery != query) {
+      eventSource && eventSource.close();
+      eventSource = listenEvents(
+        newQuery,
+        this.updateData.bind(this),
+        this.notFound.bind(this)
+      );
+      this.setState({
+        query: newQuery,
+        backfill: null,
+        eventSource
+      });
+    }
+  }
+
+  notFound(error) {
+    this.setState({
+      error
+    });
+  }
+
+  updateData(json: Backfill) {
+    this.setState({
+      ...this.state,
+      backfill: json
+    });
+  }
+
+  render() {
+    const { backfill, error } = this.state;
+    const { classes } = this.props;
+
+    const created = b => `by ${b.created_by} on ${b.created}`;
+    const jobIdFromName = (n: String) =>
+      this.props.workflow.jobs.find(j => j.name == n).id;
+
+    const jobLinks =
+      backfill &&
+      backfill.jobs.split(",").map(jobName => {
+        const jobId = jobIdFromName(jobName);
+        return (
+          <Link className="job-badge" href={`/workflow/${jobId}`}>
+            <span>{jobName}</span>
+          </Link>
+        );
+      });
+
+    return (
+      <div className={classes.main}>
+        <Window closeUrl={`/timeseries/backfills`} title="Backfill">
+          {backfill
+            ? <FancyTable key="properties">
+                <dt key="name">Name:</dt>
+                <dd key="name_">{backfill.name}</dd>
+                <dt key="jobs">Jobs:</dt>
+                <dd key="jobs_">{jobLinks}</dd>
+                <dt key="created">Created:</dt>
+                <dd key="created_">{created(backfill)}</dd>
+                <dt key="description">Description:</dt>
+                <dd key="description_" style={{ lineHeight : 'inherit'}}
+                    dangerouslySetInnerHTML={{
+                      __html: markdown.toHTML(backfill.description)
+                    }}/>
+                <dt key="context">Context:</dt>
+                <dd key="context_">
+                  <Context
+                    context={{ start: backfill.start, end: backfill.end }}
+                  />
+                </dd>
+                <dt key="status">Status:</dt>
+                <dd key="status_"><JobStatus status={backfill.status} />
+                  <span className="backfill-completion">
+                    {this.state.completion ? `${(this.state.completion*100).toFixed(2)} % completed`: null}
+                  </span></dd>
+              </FancyTable>
+            : null}
+          <BackfillsExecutions 
+            backfillId={this.props.backfillId} 
+            completionNotifier={(c) => this.setState({ completion : c})}/>
+        </Window>
+      </div>
+    );
+  }
+
+  componentWillUnmount() {
+    let { eventSource } = this.state;
+    eventSource && eventSource.close();
+  }
+}
+
+const mapStateToProps = ({ app: { workflow } }) => ({
+  workflow
+});
+
+const styles = {
+  main: {
+    "& .job-badge": {
+      display: "inline-block",
+      backgroundColor: "#5E6A87",
+      color: "#FFF",
+      fontFamily: "Arial",
+      fontWeight: "normal",
+      lineHeight: "18px",
+      fontSize: "11px",
+      borderRadius: "2px",
+      padding: "0 .5em",
+      maxHeight: "18px",
+      textAlign: "center",
+      marginLeft: "5px"
+    },
+    "& .backfill-completion" : {
+      marginLeft : "5px"
+    }
+  }
+};
+
+export default connect(mapStateToProps)(injectSheet(styles)(BackfillDetail));

core/src/main/javascript/app/pages/BackfillCreate.js

@@ -138,7 +138,7 @@ class BackfillCreate extends React.Component<any, Props, void> {
 
     return fetch(
       `/api/timeseries/backfill?` +
-        `name=${name}&description=${description}&` +
+        `name=${name}&description=${description || ""}&` +
         `jobs=${jobs.join(",")}&priority=${priority}&` +
         `startDate=${start.toISOString()}&endDate=${end.toISOString()}`,
       { method: "POST", credentials: "include" }

core/src/main/javascript/app/pages/Backfills.js

@@ -153,7 +153,7 @@ class Backfills extends React.Component {
             ) => {
               switch (column) {
                 case "name":
-                  return <Link href={`/backfills/${id}`}>{name}</Link>; //TODO detail screen + links repetition
+                  return <Link href={`/timeseries/backfills/${id}`}>{name}</Link>;
                 case "jobs":
                   return <span>{jobs.length}</span>;
                 case "period":
@@ -174,7 +174,7 @@ class Backfills extends React.Component {
                   return (
                     <Link
                       className={classes.openIcon}
-                      href={`/backfills/${id}`}
+                      href={`/timeseries/backfills/${id}`}
                     >
                       <BackfillStatus status={status} />
                     </Link>
@@ -183,7 +183,7 @@ class Backfills extends React.Component {
                   return (
                     <Link
                       className={classes.openIcon}
-                      href={`/backfills/${id}`}
+                      href={`/timeseries/backfills/${id}`}
                     >
                       <OpenIcon />
                     </Link>

core/src/main/javascript/app/pages/Execution.js

@@ -6,12 +6,11 @@ import injectSheet from "react-jss";
 import FullscreenIcon from "react-icons/lib/md/fullscreen";
 import ExitFullscreenIcon from "react-icons/lib/md/fullscreen-exit";
 import AutoScrollIcon from "react-icons/lib/md/arrow-downward";
-import BreakIcon from "react-icons/lib/md/keyboard-control";
-import CalendarIcon from "react-icons/lib/md/date-range";
 import ReactTooltip from "react-tooltip";
 
 import moment from "moment";
 
+import Context from "../components/Context";
 import Window from "../components/Window";
 import FancyTable from "../components/FancyTable";
 import Error from "../components/Error";
@@ -220,32 +219,6 @@ class Execution extends React.Component {
       });
   }
 
-  renderContext(ctx) {
-    // Need to be dynamically linked with the scehduler but for now let's
-    // assume that it is a TimeseriesContext
-    let format = date => moment(date).utc().format("MMM-DD HH:mm");
-    let URLFormat = date => moment(date).utc().format("YYYY-MM-DDTHH") + "Z";
-    return (
-      <Link
-        href={`/timeseries/calendar/${URLFormat(ctx.start)}_${URLFormat(ctx.end)}`}
-      >
-        <CalendarIcon
-          style={{
-            fontSize: "1.2em",
-            verticalAlign: "middle",
-            transform: "translateY(-2px)"
-          }}
-        />
-        {" "}
-        {format(ctx.start)}
-        {" "}
-        <BreakIcon />
-        {" "}
-        {format(ctx.end)} UTC
-      </Link>
-    );
-  }
-
   render() {
     let { classes, execution } = this.props;
     let { data, error, streams } = this.state;
@@ -262,7 +235,7 @@ class Execution extends React.Component {
                   <Link href={`/workflow/${data.job}`}>{data.job}</Link>
                 </dd>
                 <dt key="context">Context:</dt>
-                <dd key="context_">{this.renderContext(data.context)}</dd>
+                <dd key="context_"><Context context={data.context} /></dd>
                 <dt key="status">Status:</dt>
                 <dd key="status_"><JobStatus status={data.status} /></dd>
                 {data.startTime