Job monitor...

Kai Reinhard

05.37.2019 7f0e266f8c4e13b9fa30fb8abf80bbd7a0327842

Job monitor...

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

New file
@@ -0,0 +1,19 @@
import React from 'react';
import {Progress} from 'reactstrap';

function Job({job}) {
    let content = undefined;
    if (job.status === 'RUNNING') {
        content = <Progress animated color={'success'} value="100">{job.progressText}</Progress>;
    } else {
        content =  <Progress color={'info'} value="100">{job.status}</Progress>
    }
    return (
        <div>
            <div>{job.description}</div>
            {content}
        </div>
    )
}

export default Job;

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

New file
@@ -0,0 +1,76 @@
import React from 'react';
import {getRestServiceUrl} from "../../../utilities/global";
import JobQueue from "./JobQueue";
import ErrorAlert from "../archives/ArchiveView";

class JobMonitorPanel extends React.Component {
    state = {
        isFetching: false
    };

    componentDidMount = () => {
        this.fetchArchive();
    };


    fetchArchive = (force) => {
        this.setState({
            isFetching: true,
            failed: false
        });
        fetch(getRestServiceUrl('jobs'), {
            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 = undefined;

        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) {
            content = <React.Fragment>
                {this.state.queues
                    .map((queue) => <JobQueue
                        queue={queue}
                        key={queue.repo}
                    />)}
            </React.Fragment>;

        }
        return <React.Fragment>
            {content}
        </React.Fragment>;
    }

    constructor(props) {
        super(props);

        this.fetchArchive = this.fetchArchive.bind(this);
    }
}

export default JobMonitorPanel;

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

New file
@@ -0,0 +1,17 @@
import React from 'react'
import {PageHeader} from '../../general/BootstrapComponents';
import JobMonitorPanel from "./JobMonitorPanel";

class JobMonitorView extends React.Component {

    render = () => {
        return <React.Fragment>
            <PageHeader>
                Job monitor
            </PageHeader>
            <JobMonitorPanel/>
        </React.Fragment>;
    };
}

export default JobMonitorView;

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

New file
@@ -0,0 +1,16 @@
import React from 'react';
import Job from "./Job";

function JobQueue({queue}) {
    return (
        <div>
            <h2>{queue.repo}</h2>
            {queue.jobs
                .map((job, index) => <Job
                    job={job}
                    key={job.commandLineAsString}
                />)}
        </div>
    )
}
export default JobQueue;

 borgbutler-webapp/src/containers/WebApp.jsx

@@ -10,6 +10,7 @@
import ArchiveView from '../components/views/archives/ArchiveView';
import ConfigurationPage from '../components/views/config/ConfigurationPage';
import RestServices from '../components/views/develop/RestServices';
import JobMonitorView from '../components/views/jobs/JobMonitorView';
import {isDevelopmentMode} from '../utilities/global';
import LogPage from '../components/views/logging/LogPage';
import Footer from '../components/views/footer/Footer';
@@ -28,6 +29,7 @@
        let routes = [
            ['Start', '/', Start],
            ['Repositories', '/repos', RepoListView],
            ['Job monitor', '/jobmonitor', JobMonitorView],
            [getTranslation('logviewer'), '/logging', LogPage],
            [getTranslation('configuration'), '/config', ConfigurationPage]
        ];