From 888f3a7f121477954c35cfa4fd2218e943ed7821 Mon Sep 17 00:00:00 2001
From: Alec Clowes <aclowes@gmail.com>
Date: Sun, 29 Jul 2018 14:41:48 -0400
Subject: [PATCH] pin scroll and show errors (#47)

* show error message when not logged in

* pin scroll on task log
---
 frontend/src/TaskDetail.js                    |  94 ++++++----
 frontend/src/WorkflowDetailHistory.js         |   1 +
 frontend/src/tests/TaskDetail.test.js         |   9 +
 .../__snapshots__/TaskDetail.test.js.snap     | 173 ++++++++++--------
 4 files changed, 161 insertions(+), 116 deletions(-)

diff --git a/frontend/src/TaskDetail.js b/frontend/src/TaskDetail.js
index 7577dfc..31b6914 100644
--- a/frontend/src/TaskDetail.js
+++ b/frontend/src/TaskDetail.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import {PanelGroup, Panel, Alert, Pagination, Button} from 'react-bootstrap';
+import {PanelGroup, Panel, Alert, Pagination, Button, ButtonToolbar} from 'react-bootstrap';
 import {Link} from 'react-router';
 
 import API from "./API";
@@ -8,13 +8,20 @@ import {formatDateTime} from "./utilities";
 export default class TaskDetail extends React.Component {
   constructor(props) {
     super(props);
-    this.state = {task: null, error: null};
+    this.state = {task: null, error: null, follow: false};
   }
 
   componentDidMount() {
     this.refreshExecution();
   }
 
+  componentDidUpdate() {
+    if (this.state.follow) {
+      const maxScroll = document.documentElement.scrollHeight - document.documentElement.clientHeight;
+      window.scroll(0, maxScroll);
+    }
+  };
+
   enqueue = () => {
     API.patch(`/api/tasks/${this.props.params.id}/`, {enqueue: true}, (payload, error) => {
       this.setState({task: payload, error});
@@ -52,6 +59,10 @@ export default class TaskDetail extends React.Component {
     });
   };
 
+  toggleFollow = () => {
+    this.setState({follow: !this.state.follow});
+  };
+
   renderMessages() {
     return this.state.task.messages.map((message) => (
       <span><Link to='/queues/' key={message.id}>{message.queue}</Link> </span>
@@ -72,41 +83,50 @@ export default class TaskDetail extends React.Component {
       return <div>No executions</div>
     }
     const execution = this.state.task.executions[this.state.execution - 1];
+    const canTerminate = execution.status === 'running';
     return (
-      <dl className="dl-horizontal">
-        <dt>Execution</dt>
-        <dd>
-          <Pagination
-            ellipsis
-            bsSize="small"
-            items={this.state.task.executions.length}
-            maxButtons={10}
-            activePage={this.state.execution}
-            onSelect={this.selectExecution}/>
-        </dd>
-        <dt>Status</dt>
-        <dd>{execution.status}</dd>
-        <dt>Worker</dt>
-        <dd>
-          <Link to={`/workers/${execution.worker.id}`}>
-            {execution.worker.name}
-          </Link>
-        </dd>
-        <dt>Start Time</dt>
-        <dd>{formatDateTime(execution.start_timestamp)}</dd>
-        <dt>Stop Time</dt>
-        <dd>{formatDateTime(execution.stop_timestamp)}</dd>
-        <dt>Exit Code</dt>
-        <dd>{execution.exit_code}</dd>
-        <dt>Standard Output</dt>
-        <dd>
-          <pre>{execution.stdout}</pre>
-        </dd>
-        <dt>Standard Error</dt>
-        <dd>
-          <pre>{execution.stderr}</pre>
-        </dd>
-      </dl>
+      <div>
+        <dl className="dl-horizontal">
+          <dt>Execution</dt>
+          <dd>
+            <Pagination
+              ellipsis
+              bsSize="small"
+              items={this.state.task.executions.length}
+              maxButtons={10}
+              activePage={this.state.execution}
+              onSelect={this.selectExecution}/>
+          </dd>
+          <dt>Status</dt>
+          <dd>{execution.status}</dd>
+          <dt>Worker</dt>
+          <dd>
+            <Link to={`/workers/${execution.worker.id}`}>
+              {execution.worker.name}
+            </Link>
+          </dd>
+          <dt>Start Time</dt>
+          <dd>{formatDateTime(execution.start_timestamp)}</dd>
+          <dt>Stop Time</dt>
+          <dd>{formatDateTime(execution.stop_timestamp)}</dd>
+          <dt>Exit Code</dt>
+          <dd>{execution.exit_code}</dd>
+          <dt>Standard Output</dt>
+          <dd>
+            <pre>{execution.stdout}</pre>
+          </dd>
+          <dt>Standard Error</dt>
+          <dd>
+            <pre>{execution.stderr}</pre>
+          </dd>
+        </dl>
+        <ButtonToolbar>
+          <Button onClick={this.terminate} disabled={!canTerminate} bsStyle="danger">Terminate</Button>
+          <Button onClick={this.toggleFollow}>
+            {this.state.follow ? 'Unpin scroll' : 'Pin scroll'}
+          </Button>
+        </ButtonToolbar>
+      </div>
     )
   }
 
@@ -122,6 +142,7 @@ export default class TaskDetail extends React.Component {
       const task = this.state.task;
       return (
         <div>
+          {this.state.error && <Alert bsStyle="danger">{this.state.error}</Alert>}
           <PanelGroup>
             <Panel header="Details">
               <dl className="dl-horizontal">
@@ -148,7 +169,6 @@ export default class TaskDetail extends React.Component {
             </Panel>
             <Panel header="Executions">
               {this.renderExecution()}
-              <Button onClick={this.terminate}>Terminate</Button>
             </Panel>
           </PanelGroup>
         </div>
diff --git a/frontend/src/WorkflowDetailHistory.js b/frontend/src/WorkflowDetailHistory.js
index 8d5fe38..696318c 100644
--- a/frontend/src/WorkflowDetailHistory.js
+++ b/frontend/src/WorkflowDetailHistory.js
@@ -130,6 +130,7 @@ export default class WorkflowDetailHistory extends React.Component {
     } else {
       return (
         <div>
+          {this.state.error && <Alert bsStyle="danger">{this.state.error}</Alert>}
           <Table bordered condensed>
             <thead>
             <tr>
diff --git a/frontend/src/tests/TaskDetail.test.js b/frontend/src/tests/TaskDetail.test.js
index a976d51..fcd9fd1 100644
--- a/frontend/src/tests/TaskDetail.test.js
+++ b/frontend/src/tests/TaskDetail.test.js
@@ -51,3 +51,12 @@ it('TaskDetail success', () => {
   let tree = component.toJSON();
   expect(tree).toMatchSnapshot();
 });
+
+it('TaskDetail scrolling', () => {
+  mockAPI();
+  const component = ReactTestRenderer.create(<TaskDetail params={{id: 1}}/>);
+  window.scroll = jest.fn();
+  const instance = component.getInstance();
+  instance.toggleFollow();
+  expect(window.scroll).toBeCalled();
+});
diff --git a/frontend/src/tests/__snapshots__/TaskDetail.test.js.snap b/frontend/src/tests/__snapshots__/TaskDetail.test.js.snap
index 1f893db..60f9b56 100644
--- a/frontend/src/tests/__snapshots__/TaskDetail.test.js.snap
+++ b/frontend/src/tests/__snapshots__/TaskDetail.test.js.snap
@@ -111,89 +111,104 @@ exports[`TaskDetail success 1`] = `
       <div
         className="panel-body"
       >
-        <dl
-          className="dl-horizontal"
-        >
-          <dt>
-            Execution
-          </dt>
-          <dd>
-            <ul
-              className="pagination pagination-sm"
-            >
-              <li
-                className="active"
-                style={undefined}
+        <div>
+          <dl
+            className="dl-horizontal"
+          >
+            <dt>
+              Execution
+            </dt>
+            <dd>
+              <ul
+                className="pagination pagination-sm"
               >
-                <a
-                  href="#"
-                  onClick={[Function]}
-                  role="button"
+                <li
+                  className="active"
+                  style={undefined}
                 >
-                  1
-                </a>
-              </li>
-            </ul>
-          </dd>
-          <dt>
-            Status
-          </dt>
-          <dd>
-            succeeded
-          </dd>
-          <dt>
-            Worker
-          </dt>
-          <dd>
-            <a
+                  <a
+                    href="#"
+                    onClick={[Function]}
+                    role="button"
+                  >
+                    1
+                  </a>
+                </li>
+              </ul>
+            </dd>
+            <dt>
+              Status
+            </dt>
+            <dd>
+              succeeded
+            </dd>
+            <dt>
+              Worker
+            </dt>
+            <dd>
+              <a
+                onClick={[Function]}
+                style={Object {}}
+              >
+                graybeard.local 35405
+              </a>
+            </dd>
+            <dt>
+              Start Time
+            </dt>
+            <dd>
+              January 30th 2017, 3:26:38 am
+            </dd>
+            <dt>
+              Stop Time
+            </dt>
+            <dd>
+              
+            </dd>
+            <dt>
+              Exit Code
+            </dt>
+            <dd />
+            <dt>
+              Standard Output
+            </dt>
+            <dd>
+              <pre>
+                Starting...
+                
+              </pre>
+            </dd>
+            <dt>
+              Standard Error
+            </dt>
+            <dd>
+              <pre>
+                
+              </pre>
+            </dd>
+          </dl>
+          <div
+            className="btn-toolbar"
+            role="toolbar"
+          >
+            <button
+              className="btn btn-danger"
+              disabled={true}
               onClick={[Function]}
-              style={Object {}}
+              type="button"
             >
-              graybeard.local 35405
-            </a>
-          </dd>
-          <dt>
-            Start Time
-          </dt>
-          <dd>
-            January 30th 2017, 3:26:38 am
-          </dd>
-          <dt>
-            Stop Time
-          </dt>
-          <dd>
-            
-          </dd>
-          <dt>
-            Exit Code
-          </dt>
-          <dd />
-          <dt>
-            Standard Output
-          </dt>
-          <dd>
-            <pre>
-              Starting...
-              
-            </pre>
-          </dd>
-          <dt>
-            Standard Error
-          </dt>
-          <dd>
-            <pre>
-              
-            </pre>
-          </dd>
-        </dl>
-        <button
-          className="btn btn-default"
-          disabled={false}
-          onClick={[Function]}
-          type="button"
-        >
-          Terminate
-        </button>
+              Terminate
+            </button>
+            <button
+              className="btn btn-default"
+              disabled={false}
+              onClick={[Function]}
+              type="button"
+            >
+              Pin scroll
+            </button>
+          </div>
+        </div>
       </div>
     </div>
   </div>