From cbf48935568b188e4d56c1d9dd8ec65237590e03 Mon Sep 17 00:00:00 2001
From: Kai Reinhard <K.Reinhard@micromata.de>
Date: Sat, 05 Jan 2019 09:03:02 +0000
Subject: [PATCH] Job monitor...

---
 borgbutler-webapp/src/components/views/jobs/Job.jsx |   47 ++++++++++++++++++++++++++++++++++-------------
 1 files changed, 34 insertions(+), 13 deletions(-)

diff --git a/borgbutler-webapp/src/components/views/jobs/Job.jsx b/borgbutler-webapp/src/components/views/jobs/Job.jsx
index 37b55ac..5fac658 100644
--- a/borgbutler-webapp/src/components/views/jobs/Job.jsx
+++ b/borgbutler-webapp/src/components/views/jobs/Job.jsx
@@ -1,20 +1,41 @@
 import React from 'react';
-import {Progress} from 'reactstrap';
+import {Button, Card, CardBody, Collapse, Progress} from 'reactstrap';
 import {IconCancelJob} from '../../general/IconComponents'
 
-function Job({job}) {
-    let content = undefined;
-    if (job.status === 'RUNNING') {
-        content = <Progress animated color={'success'} value="100">{job.progressText}</Progress>;
-    } else {
-        content =  <Progress color={'info'} value="100">{job.status}</Progress>
+class Job extends React.Component {
+    constructor(props) {
+        super(props);
+        this.toggle = this.toggle.bind(this);
+        this.state = {collapse: false};
     }
-    return (
-        <div>
-            <div>{job.description}</div>
-            <div>{content}<IconCancelJob /></div>
-        </div>
-    )
+
+    toggle() {
+        this.setState({collapse: !this.state.collapse});
+    }
+
+    render() {
+        let content = undefined;
+        let job = this.props.job;
+        if (job.status === 'RUNNING') {
+            content = <Progress animated color={'success'} value="100">{job.progressText}</Progress>;
+        } else {
+            content = <Progress color={'info'} value="100">{job.status}</Progress>
+        }
+        return (
+            <div>
+                <Button color="link" onClick={this.toggle}>{job.description}</Button>
+                <div>{content}<IconCancelJob/></div>
+                <Collapse isOpen={this.state.collapse}>
+                    <Card>
+                        <CardBody>
+                            <table><tr><th>Status</th><td>{job.status}</td></tr>
+                            <tr><th>Command line</th><td>{job.commandLineAsString}</td></tr></table>
+                        </CardBody>
+                    </Card>
+                </Collapse>
+            </div>
+        )
+    }
 }
 
 export default Job;

--
Gitblit v1.10.0