Fix order in calendar focus (keep the topological sort)

criteo · Jul 13, 2017 · f298206 · f298206
1 parent ca52eea
commit f298206
Show file tree

Hide file tree

Showing 10 changed files with 139 additions and 114 deletions.
diff --git a/core/src/main/javascript/App.js b/core/src/main/javascript/App.js
@@ -10,7 +10,6 @@ import FilterIcon from "react-icons/lib/md/search";
 import MenuHeader from "./app/menu/MenuHeader";
 import Spinner from "./app/components/Spinner";
 import Menu from "./app/menu/Menu";
-import Link from "./app/components/Link";
 import JobSelector from "./app/components/JobSelector";
 import type { Page } from "./ApplicationState";
 import * as Actions from "./actions";
@@ -95,7 +94,7 @@ class App extends React.Component {
           case "timeseries/executions":
             return (
               <TimeSeriesExecutions
-                job={page.job}
+                job={_.find(workflow.jobs, { id: page.job })}
                 start={page.start}
                 end={page.end}
               />
@@ -116,7 +115,11 @@ class App extends React.Component {
           })}
         >
           <section className={classes.leftpane}>
-            <MenuHeader env={env} projectName={projectName} projectVersion={projectVersion} />
+            <MenuHeader
+              env={env}
+              projectName={projectName}
+              projectVersion={projectVersion}
+            />
             <Menu active={page} statistics={statistics} />
           </section>
           <section className={classes.rightpane}>

diff --git a/core/src/main/javascript/app/menu/MenuHeader.js b/core/src/main/javascript/app/menu/MenuHeader.js
@@ -17,10 +17,17 @@ type Props = {
   className: any
 };
 
-const MenuHeader = ({ classes, className, env, projectName, projectVersion }: Props) => (
+const MenuHeader = ({
+  classes,
+  className,
+  env,
+  projectName,
+  projectVersion
+}: Props) => (
   <Link className={classNames(classes.main, className)} href="/">
     <span className={classes.projectName}>{projectName}</span>
-    {projectVersion && <span className={classes.projectVersion}>{projectVersion}</span>}
+    {projectVersion &&
+      <span className={classes.projectVersion}>{projectVersion}</span>}
     {env.name
       ? <Badge
           label={env.name}

diff --git a/core/src/main/javascript/app/pages/BackfillCreate.js b/core/src/main/javascript/app/pages/BackfillCreate.js
@@ -76,7 +76,7 @@ class BackfillCreate extends React.Component<any, Props, void> {
         `name=${name}&description=${description}&` +
         `jobs=${jobs.join(",")}&priority=${priority}&` +
         `startDate=${start.toISOString()}&endDate=${end.toISOString()}`,
-      { method: "POST",   credentials: 'include'  }
+      { method: "POST", credentials: "include" }
     )
       .then((response: Response) => {
         if (!response.ok) return response.text();

diff --git a/core/src/main/javascript/app/pages/CalendarFocus.js b/core/src/main/javascript/app/pages/CalendarFocus.js
@@ -166,8 +166,8 @@ const jobPeriodsHelper = (x1, x2, showExecutions) => ({
           : status == "waiting"
               ? "#ffbc5a"
               : status == "running" ? "#49d3e4" : "#ecf1f5",
-  click: ({ period, jobName }) =>
-    showExecutions(jobName, moment.utc(period.start), moment.utc(period.end))
+  click: ({ period, jobId }) =>
+    showExecutions(jobId, moment.utc(period.start), moment.utc(period.end))
 });
 
 const enterBackfill = (jobPeriod, width) => {
@@ -331,7 +331,12 @@ class CalendarFocus extends React.Component {
         newJobTimeline
           .selectAll("g.periodSlot")
           .data(
-            job => _.map(jobs[job.id], p => ({ ...p, jobName: job.name })),
+            job =>
+              _.map(jobs[job.id], p => ({
+                ...p,
+                jobName: job.name,
+                jobId: job.id
+              })),
             k => k.period.start
           )
           .enter()
@@ -344,10 +349,10 @@ class CalendarFocus extends React.Component {
           );
       };
 
-      const jobInfos = _.sortBy(
-        _.map(_.keys(jobs), j => _.find(workflow.jobs, { id: j })),
-        "name"
+      const jobInfos = _.filter(workflow.jobs, j =>
+        _.includes(_.keys(jobs), j.id)
       );
+
       detailsSvg
         .selectAll("g.jobTimeline")
         .data(jobInfos, job => job.id)
@@ -359,10 +364,7 @@ class CalendarFocus extends React.Component {
     let doResize;
     window.onresize = () => {
       clearTimeout(doResize);
-      doResize = setTimeout(
-        () => this.drawViz(this.props, this.state),
-        500
-      );
+      doResize = setTimeout(() => this.drawViz(this.props, this.state), 500);
     };
   }
 
@@ -491,40 +493,40 @@ class CalendarFocus extends React.Component {
         </h1>
         {data && data.summary.length
           ? <div className={classes.graph} ref={r => (this.vizContainer = r)}>
-            <div className={classes.summarySvg}>
-              <svg ref={r => (this.summarySvgContainer = r)}>
-                <g id="axisContainer" />
-                <g id="summary">
-                  <text
-                    className={classes.jobName}
-                    textAnchor="end"
-                    x={-(PADDING * 2)}
-                    y="14"
-                  >
-                    {globalLabel}
-                  </text>
-                </g>
-              </svg>
+              <div className={classes.summarySvg}>
+                <svg ref={r => (this.summarySvgContainer = r)}>
+                  <g id="axisContainer" />
+                  <g id="summary">
+                    <text
+                      className={classes.jobName}
+                      textAnchor="end"
+                      x={-(PADDING * 2)}
+                      y="14"
+                    >
+                      {globalLabel}
+                    </text>
+                  </g>
+                </svg>
+              </div>
+              <div className={classes.detailsSvg}>
+                <svg ref={r => (this.detailsSvgContainer = r)} />
+              </div>
+              <ReactTooltip
+                className={classes.tooltip}
+                effect="float"
+                html={true}
+              />
             </div>
-            <div className={classes.detailsSvg}>
-              <svg ref={r => (this.detailsSvgContainer = r)} />
-            </div>
-            <ReactTooltip
-              className={classes.tooltip}
-              effect="float"
-              html={true}
-            />
-          </div>
           : data
-          ? <div className={classes.noData}>
-            <div>
-              Nothing to be done for this period
-              {selectedJobs.length
-                ? " (some may have been filtered)"
-                : ""}
-            </div>
-          </div>
-          : <Spinner />}
+              ? <div className={classes.noData}>
+                  <div>
+                    Nothing to be done for this period
+                    {selectedJobs.length
+                      ? " (some may have been filtered)"
+                      : ""}
+                  </div>
+                </div>
+              : <Spinner />}
       </div>
     );
   }
@@ -638,7 +640,10 @@ const styles = {
 };
 
 let f = "YYYY-MM-DDTHH";
-const mapStateToProps = ({ app: { selectedJobs, workflow } }) => ({ selectedJobs, workflow });
+const mapStateToProps = ({ app: { selectedJobs, workflow } }) => ({
+  selectedJobs,
+  workflow
+});
 const mapDispatchToProps = dispatch => ({
   drillDown(start, end) {
     dispatch(

diff --git a/core/src/main/javascript/app/pages/Execution.js b/core/src/main/javascript/app/pages/Execution.js
@@ -107,13 +107,11 @@ class Execution extends React.Component {
     let { streamsEventSource } = this.state;
     if (json == "EOS" && streamsEventSource) {
       streamsEventSource.close();
-    }
-    else if (json == "BOS" && streamsEventSource) {
+    } else if (json == "BOS" && streamsEventSource) {
       this.setState({
         streams: []
       });
-    }
-    else {
+    } else {
       let lines = [];
       json.forEach(line => {
         let groups = /([^ ]+) ([^ ]+)\s+- (.*)/.exec(line);

diff --git a/core/src/main/javascript/app/pages/ExecutionLogs.js b/core/src/main/javascript/app/pages/ExecutionLogs.js
@@ -466,7 +466,11 @@ export const Started = connect(mapStateToProps, mapDispatchToProps)(
       let jobsFilter = selectedJobs.length
         ? `&jobs=${selectedJobs.join(",")}`
         : "";
-      let pauseAll = () => fetch("/api/jobs/all/pause", { method: "POST",   credentials: 'include'  });
+      let pauseAll = () =>
+        fetch("/api/jobs/all/pause", {
+          method: "POST",
+          credentials: "include"
+        });
       return (
         <div className={classes.container}>
           <h1 className={classes.title}>Started executions</h1>
@@ -510,7 +514,11 @@ export const Paused = connect(mapStateToProps, mapDispatchToProps)(
       let jobsFilter = selectedJobs.length
         ? `&jobs=${selectedJobs.join(",")}`
         : "";
-      let unpauseAll = () => fetch("/api/jobs/all/unpause", { method: "POST",   credentials: 'include'  });
+      let unpauseAll = () =>
+        fetch("/api/jobs/all/unpause", {
+          method: "POST",
+          credentials: "include"
+        });
       return (
         <div className={classes.container}>
           <h1 className={classes.title}>Paused executions</h1>

diff --git a/core/src/main/javascript/app/pages/TimeSeriesExecutions.js b/core/src/main/javascript/app/pages/TimeSeriesExecutions.js
@@ -12,18 +12,17 @@ import _ from "lodash";
 import Window from "../components/Window";
 import Table from "../components/Table";
 import FancyTable from "../components/FancyTable";
-import Error from "../components/Error";
 import Spinner from "../components/Spinner";
 import Link from "../components/Link";
 import Clock from "../components/Clock";
 import JobStatus from "../components/JobStatus";
-import { listenEvents, getBoundingClientRect } from "../../Utils";
-import type { ExecutionLog } from "../../datamodel";
+import { listenEvents } from "../../Utils";
+import type { ExecutionLog, Job } from "../../datamodel";
 
 type Props = {
   classes: any,
   envCritical: boolean,
-  job: string,
+  job: Job,
   start: string,
   end: string
 };
@@ -62,7 +61,7 @@ class TimeSeriesExecutions extends React.Component {
   listen() {
     let { query, eventSource } = this.state;
     let { job, start, end } = this.props;
-    let newQuery = `/api/timeseries/executions?job=${job}&start=${moment(start).toISOString()}&end=${moment(end).toISOString()}`;
+    let newQuery = `/api/timeseries/executions?job=${job.id}&start=${moment(start).toISOString()}&end=${moment(end).toISOString()}`;
     if (newQuery != query) {
       eventSource && eventSource.close();
       eventSource = listenEvents(newQuery, this.updateData.bind(this));
@@ -123,7 +122,6 @@ class TimeSeriesExecutions extends React.Component {
 
   sortBy(column) {
     this.setState({
-      ...this.state,
       sort: {
         column,
         order: this.state.sort.column == column &&
@@ -156,7 +154,9 @@ class TimeSeriesExecutions extends React.Component {
           ? [
               <FancyTable key="properties">
                 <dt key="job">Job:</dt>
-                <dd key="job_"><Link href={`/workflow/${job}`}>{job}</Link></dd>
+                <dd key="job_">
+                  <Link href={`/workflow/${job.id}`}>{job.name}</Link>
+                </dd>
                 <dt key="start">Period start:</dt>
                 <dd key="start_">{formatDate(start)} UTC</dd>
                 <dt key="end">Period end:</dt>

diff --git a/core/src/main/javascript/app/pages/Workflow.js b/core/src/main/javascript/app/pages/Workflow.js
@@ -121,35 +121,35 @@ class WorkflowComponent extends React.Component {
               </dd>
               {renderTimeSeriesSechduling()}
               {startNode.tags.length > 0 && [
-                 <dt key="tags">Tags:</dt>,
-                 <dd key="tags_" className={classes.tags}>
-                   {map(startNode.tags, t => [
-                      <span
-                        key={tagsDictionnary[t].name}
-                        className={classes.tag}
-                        data-for={"tag" + tagsDictionnary[t].name}
-                        data-tip={tagsDictionnary[t].description}
-                      >
-                        <TagIcon className="tagIcon" />
-                        {tagsDictionnary[t].name}
-                      </span>,
-                      <ReactTooltip
-                        id={"tag" + tagsDictionnary[t].name}
-                        effect="float"
-                      />
-                    ])}
-                 </dd>
-               ]}
+                <dt key="tags">Tags:</dt>,
+                <dd key="tags_" className={classes.tags}>
+                  {map(startNode.tags, t => [
+                    <span
+                      key={tagsDictionnary[t].name}
+                      className={classes.tag}
+                      data-for={"tag" + tagsDictionnary[t].name}
+                      data-tip={tagsDictionnary[t].description}
+                    >
+                      <TagIcon className="tagIcon" />
+                      {tagsDictionnary[t].name}
+                    </span>,
+                    <ReactTooltip
+                      id={"tag" + tagsDictionnary[t].name}
+                      effect="float"
+                    />
+                  ])}
+                </dd>
+              ]}
               {startNode.description && [
-                 <dt key="description">Description:</dt>,
-                 <dd
-                   key="description_"
-                   className={classes.description}
-                   dangerouslySetInnerHTML={{
-                     __html: markdown.toHTML(startNode.description)
-                   }}
-                 />
-               ]}
+                <dt key="description">Description:</dt>,
+                <dd
+                  key="description_"
+                  className={classes.description}
+                  dangerouslySetInnerHTML={{
+                    __html: markdown.toHTML(startNode.description)
+                  }}
+                />
+              ]}
             </FancyTable>
           </div>
         </SlidePanel>