Correct handling of isFetching and failed for both queues...

Kai Reinhard

16.44.2019 821b44bb617b51280982717c2e51d872fb9f0f5a

Correct handling of isFetching and failed for both queues...

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

@@ -2,12 +2,13 @@
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,
        isFetchingOldJobs: false,
        testMode: false,
        collapseOldJobs: false
    };
@@ -35,16 +36,26 @@
    }

    fetchJobs() {
        if (!this.state.isFetching) { // Don't run twice at the same time
        this.fetchQueues(false);
        if (this.state.collapseOldJobs) {
        }
        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,
@@ -61,19 +72,12 @@
                const queues = json.map(queue => {
                    return queue;
                });
                if (oldJobs) {
                    this.setState({
                        isFetching: false,
                        oldJobsQueues: queues
                    [isFetchingVar]: false,
                    [queuesVar]: queues
                    });
                } else {
                    this.setState({
                        isFetching: false,
                        queues: queues
                    });
                }
            })
            .catch(() => this.setState({isFetching: false, failed: true}));
            .catch(() => this.setState({[isFetchingVar]: false, [failedVar]: true}));
    };

    render() {
@@ -83,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,
@@ -108,8 +112,21 @@
                content = <React.Fragment>No jobs are running or queued.</React.Fragment>
            }
        }
        let oldJobs = 'No old jobs yet to display...';
        if (this.state.oldJobsQueues && this.state.oldJobsQueues.length > 0) {
        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
@@ -118,6 +135,9 @@
                        key={queue.repo}
                    />)}
            </React.Fragment>
            } else {
                oldJobs = <React.Fragment>No old jobs available.</React.Fragment>
            }
        }
        return <React.Fragment>
            {content}