style

Kai Reinhard

06.05.2019 3ee7c3649c4e63f073e2a8e90c06741780c3cf14

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
import React from 'react';
import {Button, Card, CardBody, Collapse, Progress} from 'reactstrap';
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});
    }
 
    render() {
        let content = undefined;
        let job = this.props.job;
        if (job.status === 'RUNNING') {
            let progressPercent = 100;
            let color = 'success';
            if (job.cancellationRequested) {
                color = 'warning';
            }
            if (job.progressPercent >= 0 && job.progressPercent <= 100) {
                progressPercent = job.progressPercent;
            }
            content = <Progress animated color={color} value={progressPercent}>{job.progressText}</Progress>;
        } else {
            content = <Progress color={'info'} value={100}>{job.status}</Progress>
        }
        let cancelDisabled = undefined;
        if ((job.status !== 'RUNNING' && job.status !== 'QUEUED') || job.cancellationRequested) {
            cancelDisabled = true;
        }
        return (
            <div>
                <Button color="link" onClick={this.toggle}>{job.description}</Button>
                <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>
                        </CardBody>
                    </Card>
                </Collapse>
            </div>
        )
    }
}
 
export default Job;