Showing now environment variables to copy for the user.

Kai Reinhard

07.30.2019 7559af2c79512175a0d37fb84b5c4fd58d406e6e

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
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
import React from 'react';
import {Redirect} from 'react-router-dom';
import {Button, Card, CardBody, Collapse, ListGroupItem, Progress} from 'reactstrap';
import {IconCancel} from '../../general/IconComponents'
import {getRestServiceUrl} from "../../../utilities/global";
import PropTypes from "prop-types";
import './Job.css';
 
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,
            redirect: false
        };
    }
 
    cancelJob = (jobId) => {
        fetch(getRestServiceUrl('jobs/cancel', {
            uniqueJobNumber: jobId
        }));
        this.setState({
            redirect: true
        })
    };
 
    toggle() {
        this.setState({collapse: !this.state.collapse});
    }
 
    renderRedirect = () => {
        if (this.props.embedded && this.state.redirect) {
            return <Redirect to='/jobmonitor'/>
        }
    }
 
    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;
        }
        let environmentVariables = '';
        if (job.environmentVariables && Array.isArray(job.environmentVariables)) {
            environmentVariables = job.environmentVariables.map((variable, index) => <React.Fragment>
                export &quot;{variable}&quot;;<br/>
            </React.Fragment>)
        }
        return (
            <ListGroupItem>
                {this.renderRedirect()}
                <div className="row">
                    <div className="job-progress">
                        <Button color="link" onClick={this.toggle}>{job.description}</Button>
                        {content}
                    </div>
                    <div className="job-cancel"><Button color={'danger'}
                                                        onClick={() => this.cancelJob(job.uniqueJobNumber)}
                                                        disabled={cancelDisabled}><IconCancel/></Button>
                    </div>
                </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>
                                <tr>
                                    <th>Environment</th>
                                    <td>{environmentVariables}</td>
                                </tr>
                                </tbody>
                            </table>
                        </CardBody>
                    </Card>
                </Collapse>
            </ListGroupItem>
        )
    }
}
 
Job.propTypes = {
    embedded: PropTypes.bool
};
 
export default Job;