From 67dd1243073e766178dd70dd2f45aa5bc77ec529 Mon Sep 17 00:00:00 2001
From: Kai Reinhard <K.Reinhard@micromata.de>
Date: Sat, 05 Jan 2019 22:03:29 +0000
Subject: [PATCH] Job monitor: Cancellation of jobs...

---
 borgbutler-webapp/src/components/views/jobs/Job.jsx |   32 ++++++++++++++++++++++++++++----
 1 files changed, 28 insertions(+), 4 deletions(-)

diff --git a/borgbutler-webapp/src/components/views/jobs/Job.jsx b/borgbutler-webapp/src/components/views/jobs/Job.jsx
index 4b3ba06..5d45234 100644
--- a/borgbutler-webapp/src/components/views/jobs/Job.jsx
+++ b/borgbutler-webapp/src/components/views/jobs/Job.jsx
@@ -1,14 +1,22 @@
 import React from 'react';
 import {Button, Card, CardBody, Collapse, Progress} from 'reactstrap';
-import {IconCancelJob} from '../../general/IconComponents'
+import {IconCancel} from '../../general/IconComponents'
+import {getRestServiceUrl} from "../../../utilities/global";
 
 class Job extends React.Component {
     constructor(props) {
         super(props);
         this.toggle = this.toggle.bind(this);
+        this.cacnelJob = this.cancelJob.bind(this);
         this.state = {collapse: false};
     }
 
+    cancelJob = (jobId) => {
+        fetch(getRestServiceUrl('jobs/cancel', {
+            uniqueJobNumber: jobId
+        }));
+    };
+
     toggle() {
         this.setState({collapse: !this.state.collapse});
     }
@@ -25,15 +33,31 @@
         } else {
             content = <Progress color={'info'} value={100}>{job.status}</Progress>
         }
+        let cancelDisabled = undefined;
+        if (job.status !== 'RUNNING' && job.status !== 'QUEUED') {
+            cancelDisabled = true;
+        }
         return (
             <div>
                 <Button color="link" onClick={this.toggle}>{job.description}</Button>
-                <div>{content}<IconCancelJob/></div>
+                <div>{content}
+                    <Button color={'danger'} onClick={() => this.cancelJob(job.uniqueJobNumber)} disabled={cancelDisabled}><IconCancel/></Button>
+                </div>
                 <Collapse isOpen={this.state.collapse}>
                     <Card>
                         <CardBody>
-                            <table><tbody><tr><th>Status</th><td>{job.status}</td></tr>
-                            <tr><th>Command line</th><td>{job.commandLineAsString}</td></tr></tbody></table>
+                            <table>
+                                <tbody>
+                                <tr>
+                                    <th>Status</th>
+                                    <td>{job.status}</td>
+                                </tr>
+                                <tr>
+                                    <th>Command line</th>
+                                    <td>{job.commandLineAsString}</td>
+                                </tr>
+                                </tbody>
+                            </table>
                         </CardBody>
                     </Card>
                 </Collapse>

--
Gitblit v1.10.0