From 1c087fae322a1b07bb7bd554ee10ff473c47c727 Mon Sep 17 00:00:00 2001
From: Fin Reinhard <fin.reinhard@icloud.com>
Date: Tue, 22 Jan 2019 20:51:03 +0000
Subject: [PATCH] Merge branch 'master' into feature/15-archive-view-url
---
borgbutler-webapp/src/components/views/jobs/JobMonitorPanel.jsx | 102 +++++++++++++++++++++++++++++++++++++++++---------
1 files changed, 83 insertions(+), 19 deletions(-)
diff --git a/borgbutler-webapp/src/components/views/jobs/JobMonitorPanel.jsx b/borgbutler-webapp/src/components/views/jobs/JobMonitorPanel.jsx
index 759cab2..1dc5557 100644
--- a/borgbutler-webapp/src/components/views/jobs/JobMonitorPanel.jsx
+++ b/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
};
--
Gitblit v1.10.0