Remove workflow slide panel, use modal (#233)

criteo · Feb 20, 2018 · 3e8c2ba · 3e8c2ba
1 parent a161387
commit 3e8c2ba
Show file tree

Hide file tree

Showing 5 changed files with 110 additions and 175 deletions.
diff --git a/core/src/main/javascript/ApplicationState.js b/core/src/main/javascript/ApplicationState.js
@@ -9,7 +9,8 @@ export type Page =
   | { id: "" }
   | {
       id: "workflow",
-      jobId?: string
+      jobId?: string,
+      showDetail: boolean
     }
   | {
       id: "executions/started",

diff --git a/core/src/main/javascript/app/components/Link.js b/core/src/main/javascript/app/components/Link.js
@@ -12,7 +12,8 @@ type Props = {
   className: string,
   children: any,
   open: (href: string) => void,
-  replace: boolean
+  replace: boolean,
+  title: string
 };
 
 const Link = ({
@@ -21,13 +22,15 @@ const Link = ({
   className,
   children,
   open,
-  replace = false
+  replace = false,
+  title = ""
 }: Props) => {
   return (
     <a
       onClick={open(href, replace)}
       href={href}
       className={classNames(classes.link, className)}
+      title={title}
     >
       {children}
     </a>

diff --git a/core/src/main/javascript/app/components/SlidePanel.js b/core/src/main/javascript/app/components/SlidePanel.js
diff --git a/core/src/main/javascript/app/pages/Workflow.js b/core/src/main/javascript/app/pages/Workflow.js
@@ -17,18 +17,20 @@ import reduce from "lodash/reduce";
 import some from "lodash/some";
 
 import type { Edge, Node } from "../../graph/dagger/dataAPI/genericGraph";
-import type { Dependency, Job, Tag, Workflow } from "../../datamodel";
+import type { Dependency, Job, Workflow } from "../../datamodel";
 
 import Select from "react-select";
 import { navigate } from "redux-url";
 import { connect } from "react-redux";
 import { markdown } from "markdown";
 
 import TagIcon from "react-icons/lib/md/label";
+import MdList from "react-icons/lib/md/list";
 import Dagger from "../../graph/Dagger";
-import SlidePanel from "../components/SlidePanel";
+import Window from "../components/Window";
 import FancyTable from "../components/FancyTable";
 import Spinner from "../components/Spinner";
+import Link from "../components/Link";
 
 import moment from "moment";
 import PopoverMenu from "../components/PopoverMenu";
@@ -39,7 +41,8 @@ type Props = {
   workflow: Workflow,
   selectedJobs: string[],
   job: string,
-  navTo: () => void
+  navTo: () => void,
+  showDetail: boolean
 };
 
 type State = {
@@ -250,7 +253,8 @@ class WorkflowComponent extends React.Component {
       workflow = {},
       job,
       selectedJobs = [],
-      navTo
+      navTo,
+      showDetail
     } = this.props;
 
     const filteredJobs = filter(workflow.jobs, j =>
@@ -305,7 +309,7 @@ class WorkflowComponent extends React.Component {
     const charts = (data: any) => {
       if (data) {
         return (
-          <div>
+          <div className={classes.charts}>
             <div className={classes.chartSection}>
               <h3>Average run/wait times over last 30 days</h3>
               <AverageRunWaitChart
@@ -382,66 +386,74 @@ class WorkflowComponent extends React.Component {
           startNodeId={startNode.id}
           onClickNode={id => navTo("/workflow/" + id)}
         />
-        <Select
-          className={classes.jobSelector}
-          name="jobSelector"
-          options={map(nodes, n => ({ value: n.id, label: n.name }))}
-          onChange={o => navTo("/workflow/" + o.value)}
-        />
-        <SlidePanel open={false}>
-          <div className={classes.jobCard}>
-            <JobMenu job={startNode.id} />
-            <FancyTable>
-              <dt key="id">Id:</dt>
-              <dd key="id_">
-                {startNode.id}
-              </dd>
-              <dt key="name">Name:</dt>
-              <dd key="name_">
-                {startNode.name}
-              </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>
-              ]}
-              {startNode.description && [
-                <dt key="description">Description:</dt>,
-                <dd
-                  key="description_"
-                  className={classes.description}
-                  dangerouslySetInnerHTML={{
-                    __html: markdown.toHTML(startNode.description)
-                  }}
-                />
-              ]}
-              {this.state.jobColors &&
-              this.state.jobColors[startNode.id] && [
-                <dt key="status">Status:</dt>,
-                <dd key="status_">
-                  <Status status="paused" />
-                </dd>
-              ]}
-            </FancyTable>
-          </div>
-          {charts(this.state.data)}
-        </SlidePanel>
+        <div className={classes.controller}>
+          <Select
+            className={classes.jobSelector}
+            name="jobSelector"
+            options={map(nodes, n => ({ value: n.id, label: n.name }))}
+            onChange={o => navTo("/workflow/" + o.value)}
+            value={startNode.id}
+            clearable={false}
+          />
+          <Link
+            className={classes.detailIcon}
+            title="Job details"
+            href={`/workflow/${startNode.id}?showDetail=true`}
+          >
+            <MdList />
+          </Link>
+        </div>
+        {showDetail &&
+          <Window closeUrl={`/workflow/${job}`} title="Job details">
+            <div className={classes.jobCard}>
+              <JobMenu job={startNode.id} />
+              <FancyTable>
+                <dt key="id">Id:</dt>
+                <dd key="id_">{startNode.id}</dd>
+                <dt key="name">Name:</dt>
+                <dd key="name_">{startNode.name}</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>
+                ]}
+                {startNode.description && [
+                  <dt key="description">Description:</dt>,
+                  <dd
+                    key="description_"
+                    className={classes.description}
+                    dangerouslySetInnerHTML={{
+                      __html: markdown.toHTML(startNode.description)
+                    }}
+                  />
+                ]}
+                {this.state.jobColors &&
+                this.state.jobColors[startNode.id] && [
+                  <dt key="status">Status:</dt>,
+                  <dd key="status_">
+                    <Status status="paused" />
+                  </dd>
+                ]}
+              </FancyTable>
+            </div>
+            {charts(this.state.data)}
+          </Window>}
       </div>
     );
   }
@@ -455,6 +467,12 @@ const styles = {
     height: "calc(100vh - 4em)",
     position: "relative"
   },
+  charts: {
+    overflow: "auto",
+    display: "flex",
+    flexWrap: "wrap",
+    justifyContent: "space-around"
+  },
   chartSection: {
     "& > .chart": {
       marginLeft: "50px",
@@ -487,11 +505,20 @@ const styles = {
     textAlign: "justify !important",
     overflowY: "scroll"
   },
-  jobSelector: {
+  controller: {
     position: "absolute",
     top: "2em",
-    left: "50%",
-    marginLeft: "-300px",
+    display: "flex",
+    justifyContent: "center",
+    width: "100%"
+  },
+  detailIcon: {
+    fontSize: "30px",
+    color: "#607e96",
+    marginLeft: ".25em",
+    cursor: "pointer"
+  },
+  jobSelector: {
     width: "600px",
     "& .Select-control": {
       height: "1em",
@@ -527,9 +554,8 @@ const styles = {
   }
 };
 
-export default connect(
-  () => ({}),
-  dispatch => ({
-    navTo: link => dispatch(navigate(link))
-  })
-)(injectSheet(styles)(WorkflowComponent));
+const mapStateToProps = ({ app: { page: { showDetail } } }) => ({ showDetail });
+
+export default connect(mapStateToProps, dispatch => ({
+  navTo: link => dispatch(navigate(link))
+}))(injectSheet(styles)(WorkflowComponent));
diff --git a/core/src/main/javascript/index.js b/core/src/main/javascript/index.js
@@ -32,8 +32,9 @@ const routes = {
     openPage({ id: "executions/paused", page, sort, order }),
   "/executions/:id": ({ id }) =>
     openPage({ id: "executions/detail", execution: id }),
-  "/workflow/*": ({ _ }) => openPage({ id: "workflow", jobId: _ }),
-  "/workflow": () => openPage({ id: "workflow" }),
+  "/workflow/*": ({ _ }, { showDetail }) =>
+    openPage({ id: "workflow", jobId: _, showDetail: Boolean(showDetail) }),
+  "/workflow": () => openPage({ id: "workflow", showDetail: false }),
   "/timeseries/calendar": () => openPage({ id: "timeseries/calendar" }),
   "/timeseries/calendar/:start_:end": ({ start, end }) =>
     openPage({ id: "timeseries/calendar/focus", start, end }),