Merge branch 'master' into feature/15-archive-view-url

Fin Reinhard

22.51.2019 1c087fae322a1b07bb7bd554ee10ff473c47c727

 borgbutler-webapp/src/components/views/jobs/JobMonitorPanel.jsx

@@ -1,19 +1,21 @@
import React from 'react';
import {Button} from 'reactstrap';
import {Button, Collapse} from 'reactstrap';
import {getRestServiceUrl, isDevelopmentMode} from '../../../utilities/global';
import JobQueue from './JobQueue';
import ErrorAlert from '../archives/ArchiveView';
import ErrorAlert from '../../general/ErrorAlert';
import PropTypes from 'prop-types';

class JobMonitorPanel extends React.Component {
    state = {
        isFetching: false,
        testMode: false
        isFetchingOldJobs: false,
        testMode: false,
        collapseOldJobs: false
    };

    componentDidMount = () => {
        this.fetchQueues();
        this.interval = setInterval(() => this.fetchQueues(), 2000);
        this.fetchQueues(false);
        this.interval = setInterval(() => this.fetchJobs(), 2000);
    };

    componentWillUnmount() {
@@ -26,14 +28,39 @@
        });
    }

    fetchQueues = () => {
    toggleOldJobs() {
        if (!this.state.collapseOldJobs) {
            this.fetchQueues(true);
        }
        this.setState({collapseOldJobs: !this.state.collapseOldJobs});
    }

    fetchJobs() {
        if (!this.state.isFetching) { // Don't run twice at the same time
            this.fetchQueues(false);
        }
        if (this.state.collapseOldJobs && !this.state.isFetchingOldJobs) {
            this.fetchQueues(true);
        }
    }

    fetchQueues = (oldJobs) => {
        let queuesVar = 'queues';
        let isFetchingVar = 'isFetching';
        let failedVar = 'failed';
        if (oldJobs) {
            queuesVar = 'oldJobsQueues';
            isFetchingVar = 'isFetchingOldJobs';
            failedVar = 'oldJobsFailed';
        }
        this.setState({
            isFetching: true,
            failed: false
            [isFetchingVar]: true,
            [failedVar]: false
        });
        fetch(getRestServiceUrl('jobs', {
            repo: this.props.repo,
            testMode: this.state.testMode
            testMode: this.state.testMode,
            oldJobs: oldJobs
        }), {
            method: 'GET',
            headers: {
@@ -46,11 +73,11 @@
                    return queue;
                });
                this.setState({
                    isFetching: false,
                    queues
                    [isFetchingVar]: false,
                    [queuesVar]: queues
                });
            })
            .catch(() => this.setState({isFetching: false, failed: true}));
            .catch(() => this.setState({[isFetchingVar]: false, [failedVar]: true}));
    };

    render() {
@@ -60,7 +87,7 @@
            content = <i>Loading...</i>;
        } else if (this.state.failed) {
            content = <ErrorAlert
                title={'Cannot load Repositories'}
                title={'Cannot load job queues'}
                description={'Something went wrong during contacting the rest api.'}
                action={{
                    handleClick: this.fetchQueues,
@@ -77,16 +104,50 @@
                            key={queue.repo}
                        />)}
                </React.Fragment>;
            } else if (isDevelopmentMode() && !this.props.embedded) {
                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>
            }
        }
        let oldJobs = '';

        if (this.state.isFetchingOldJobs && !this.state.oldJobsQueues) {
            oldJobs = <i>Loading...</i>;
        } else if (this.state.oldJobsFailed) {
            oldJobs = <ErrorAlert
                title={'Cannot load old job queues'}
                description={'Something went wrong during contacting the rest api.'}
                action={{
                    handleClick: this.fetchQueues,
                    title: 'Try again'
                }}
            />;
        } else if (this.state.oldJobsQueues) {
            if (this.state.oldJobsQueues.length > 0) {
                oldJobs = <React.Fragment>
                    {this.state.oldJobsQueues
                        .map((queue) => <JobQueue
                            embedded={this.props.embedded}
                            queue={queue}
                            key={queue.repo}
                        />)}
                </React.Fragment>
            } else {
                oldJobs = <React.Fragment>No old jobs available.</React.Fragment>
            }
        }
        let testContent = '';
        if (isDevelopmentMode() && !this.props.embedded) {
            testContent = <React.Fragment><br/><br/><br/><Button className="btn-outline-info" onClick={this.toggleTestMode}>Test mode</Button></React.Fragment>;
        }

        return <React.Fragment>
            {content}
            <h5 className={'onclick'} onClick={this.toggleOldJobs}>Show old jobs
            </h5>
            <Collapse isOpen={this.state.collapseOldJobs}>
                {oldJobs}
            </Collapse>
            {testContent}
        </React.Fragment>;
    }

@@ -95,15 +156,18 @@

        this.fetchQueues = this.fetchQueues.bind(this);
        this.toggleTestMode = this.toggleTestMode.bind(this);
        this.toggleOldJobs = this.toggleOldJobs.bind(this);
    }
}

JobMonitorPanel.propTypes = {
JobMonitorPanel
    .propTypes = {
    embedded: PropTypes.bool,
    repo: PropTypes.string
};

JobMonitorPanel.defaultProps = {
JobMonitorPanel
    .defaultProps = {
    embedded: true,
    repo: null
};