ToDo.

Kai Reinhard

05.37.2019 a368b742861fd727a08a32d1fbba20a07dd8b7f0

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
110
111
112
import React from 'react';
import {Button} from 'reactstrap';
import {getRestServiceUrl, isDevelopmentMode} from "../../../utilities/global";
import JobQueue from "./JobQueue";
import ErrorAlert from "../archives/ArchiveView";
 
class JobMonitorPanel extends React.Component {
    state = {
        isFetching: false,
        testMode: false
    };
 
    componentDidMount = () => {
        this.fetchArchive();
        this.interval = setInterval(() => this.fetchArchive(), 2000);
    };
 
    componentWillUnmount() {
        clearInterval(this.interval);
    }
 
    toggleTestMode() {
        this.setState({
            testMode: !this.state.testMode
        });
    }
 
    fetchArchive = () => {
        this.setState({
            isFetching: true,
            failed: false
        });
        fetch(getRestServiceUrl('jobs', {
            testMode: this.state.testMode
        }), {
            method: 'GET',
            headers: {
                'Accept': 'application/json'
            }
        })
            .then(response => response.json())
            .then(json => {
                const queues = json.map(queue => {
                    return queue;
                });
                this.setState({
                    isFetching: false,
                    queues
                });
            })
            .catch(() => this.setState({isFetching: false, failed: true}));
    };
 
    render() {
        let content = '';
        let todo = '';
 
        if (this.state.isFetching) {
            content = <i>Loading...</i>;
        } else if (this.state.failed) {
            content = <ErrorAlert
                title={'Cannot load Repositories'}
                description={'Something went wrong during contacting the rest api.'}
                action={{
                    handleClick: this.fetchArchive,
                    title: 'Try again'
                }}
            />;
        } else if (this.state.queues) {
            if (this.state.queues.length > 0) {
                content = <React.Fragment>
                    {this.state.queues
                        .map((queue) => <JobQueue
                            queue={queue}
                            key={queue.repo}
                        />)}
                </React.Fragment>;
            } else if (isDevelopmentMode()) {
                content = <React.Fragment>No jobs are running or queued.<br/><br/>
                    <Button color="primary" onClick={this.toggleTestMode}>Test mode</Button>
                </React.Fragment>
            } else {
                content = <React.Fragment>No jobs are running or queued.</React.Fragment>
            }
        }
        if (isDevelopmentMode()) {
            todo = <React.Fragment><br/>
                <code>
                    <h2>To-do</h2>
                    Zum Testen den Button "Test-Mode" drücken.
                    <ol>
                        <li>Kein Geflackere.</li>
                        <li>Toggle-Status z. B. von My Computer merken (zum Reproduzieren: Klick auf "My Computer"..</li>
                        <li>Cancel-Button soll rechts neben die Progressbar.</li>
                    </ol>
                </code></React.Fragment>
        }
        return <React.Fragment>
            {content}
            {todo}
        </React.Fragment>;
    }
 
    constructor(props) {
        super(props);
 
        this.fetchArchive = this.fetchArchive.bind(this);
        this.toggleTestMode = this.toggleTestMode.bind(this);
    }
}
 
export default JobMonitorPanel;