JobMonitor is now embedded.

Kai Reinhard

06.54.2019 3c111895a8b56a54ae0e5d3296bfbb8fe0bb3715

JobMonitor is now embedded.

 borgbutler-webapp/src/components/views/archives/ArchiveView.jsx

@@ -3,9 +3,10 @@
import {PageHeader} from '../../general/BootstrapComponents';
import {getRestServiceUrl, humanFileSize, humanSeconds} from '../../../utilities/global';
import ErrorAlert from '../../general/ErrorAlert';
import {IconRefresh} from "../../general/IconComponents";
import classNames from "classnames";
import FileListPanel from "./FileListPanel";
import {IconRefresh} from '../../general/IconComponents';
import classNames from 'classnames';
import FileListPanel from './FileListPanel';
import JobMonitorPanel from '../jobs/JobMonitorPanel';

class ArchiveView extends React.Component {

@@ -62,7 +63,7 @@
        let pageHeader = '';

        if (this.state.isFetching) {
            content = <i>Loading...</i>;
            content = <JobMonitorPanel/>;
        } else if (this.state.failed) {
            content = <ErrorAlert
                title={'Cannot load Repositories'}

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

@@ -1,26 +1,40 @@
import React from 'react';
import {Redirect} from 'react-router-dom';
import {Button, Card, CardBody, Collapse, Progress} from 'reactstrap';
import {IconCancel} from '../../general/IconComponents'
import {getRestServiceUrl} from "../../../utilities/global";
import PropTypes from "prop-types";

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};
        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;
@@ -43,6 +57,7 @@
        }
        return (
            <div>
                {this.renderRedirect()}
                <Button color="link" onClick={this.toggle}>{job.description}</Button>
                <div>{content}
                    <Button color={'danger'} onClick={() => this.cancelJob(job.uniqueJobNumber)}
@@ -71,4 +86,8 @@
    }
}

Job.propTypes = {
    embedded: PropTypes.bool
};

export default Job;

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

@@ -3,6 +3,7 @@
import {getRestServiceUrl, isDevelopmentMode} from "../../../utilities/global";
import JobQueue from "./JobQueue";
import ErrorAlert from "../archives/ArchiveView";
import PropTypes from "prop-types";

class JobMonitorPanel extends React.Component {
    state = {
@@ -71,11 +72,12 @@
                content = <React.Fragment>
                    {this.state.queues
                        .map((queue) => <JobQueue
                            embedded={this.props.embedded}
                            queue={queue}
                            key={queue.repo}
                        />)}
                </React.Fragment>;
            } else if (isDevelopmentMode()) {
            } 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>
@@ -83,7 +85,7 @@
                content = <React.Fragment>No jobs are running or queued.</React.Fragment>
            }
        }
        if (isDevelopmentMode()) {
        if (isDevelopmentMode() && !this.props.embedded) {
            todo = <React.Fragment><br/>
                <code>
                    <h2>To-do</h2>
@@ -118,4 +120,13 @@
    }
}

JobMonitorPanel.propTypes = {
    embedded: PropTypes.bool
};

JobMonitorPanel.defaultProps = {
    embedded: true
};


export default JobMonitorPanel;

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

@@ -9,7 +9,7 @@
            <PageHeader>
                Job monitor
            </PageHeader>
            <JobMonitorPanel/>
            <JobMonitorPanel embedded={false}/>
        </React.Fragment>;
    };
}

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

@@ -1,6 +1,7 @@
import React from 'react';
import {Button, Card, CardBody, Collapse} from 'reactstrap';
import Job from "./Job";
import PropTypes from "prop-types";

class JobQueue extends React.Component {
    constructor(props) {
@@ -22,6 +23,7 @@
                        <CardBody>
                            {this.props.queue.jobs
                                .map((job, index) => <Job
                                    embedded={this.props.embedded}
                                    job={job}
                                    key={job.commandLineAsString}
                                />)}
@@ -33,4 +35,8 @@
    }
}

JobQueue.propTypes = {
    embedded: PropTypes.bool
};

export default JobQueue;

 borgbutler-webapp/src/components/views/repos/RepoArchiveListView.jsx

@@ -5,7 +5,8 @@
import {PageHeader} from '../../general/BootstrapComponents';
import {getRestServiceUrl, humanFileSize} from '../../../utilities/global';
import ErrorAlert from '../../general/ErrorAlert';
import {IconCheck, IconRefresh} from "../../general/IconComponents";
import {IconCheck, IconRefresh} from '../../general/IconComponents';
import JobMonitorPanel from '../jobs/JobMonitorPanel';

class RepoArchiveListView extends React.Component {

@@ -64,7 +65,7 @@
        let pageHeader = '';

        if (this.state.isFetching) {
            content = <i>Loading...</i>;
            content = <JobMonitorPanel />;
        } else if (this.state.failed) {
            content = <ErrorAlert
                title={'Cannot load Repositories'}