Skip to content

Commit

Permalink
Cancel job using job id
Browse files Browse the repository at this point in the history 
Closes #35
  • Loading branch information
@negative0
negative0 committed Nov 5, 2019
1 parent 3654e3f commit 30163e9
Show file tree
Hide file tree
Showing 4 changed files with 132 additions and 24 deletions.
9 changes: 7 additions & 2 deletions src/utils/API/endpoint.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -110,7 +110,12 @@ const urls = {
/**
* Delete a config with config name.
*/
deleteConfig: "config/delete"
deleteConfig: "config/delete",

/**
* Stop a running job by job id
*/
stopJob: "job/stop",

};
export default urls;
export default urls;
28 changes: 28 additions & 0 deletions src/utils/Tools.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -271,3 +271,31 @@ export function changeSearchFilter(list, searchQuery = "") {
export function isLocalRemoteName(remoteName) {
return (remoteName && remoteName !== "" && remoteName[0] === "/");
}

/**
* Group the array items by the given key inside each object.
*
* @param xs{T} array of T type
* @param keyGetter key to select from the T
* @returns map{T} map with format {key: [...objects with same key]}
*/

// export function groupByKey(xs, key) {
// return xs.reduce(function(rv, x) {
// (rv[x[key]] = rv[x[key]] || []).push(x);
// return rv;
// }, {});
// }
export function groupByKey(xs, keyGetter) {
const map = new Map();
xs.forEach((item) => {
const key = keyGetter(item);
const collection = map.get(key);
if (!collection) {
map.set(key, [item]);
} else {
collection.push(item);
}
});
return map;
}
117 changes: 96 additions & 21 deletions src/views/Base/RunningJobs/RunningJobs.js
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,12 @@
import React from 'react';
import {Button, Card, CardBody, CardHeader, Col, Progress, Row} from "reactstrap";
import {bytesToKB, formatBytes, secondsToStr} from "../../../utils/Tools";
import React, {useState} from 'react';
import {Button, Card, CardBody, CardHeader, Col, Collapse, Container, Progress, Row} from "reactstrap";
import {bytesToKB, formatBytes, groupByKey, secondsToStr} from "../../../utils/Tools";
import * as PropTypes from "prop-types";
import {connect} from "react-redux";
import {Line} from "react-chartjs-2";
import {CustomTooltips} from "@coreui/coreui-plugin-chartjs-custom-tooltips";
import axiosInstance from "../../../utils/API/API";
import urls from "../../../utils/API/endpoint";

const options = {
tooltips: {
Expand Down Expand Up @@ -47,27 +49,27 @@ function JobCard({job}) {
}

function getCroppedName(name) {
const leftChars = 30;
const rightChars = 5;
const leftChars = 30;
const rightChars = 5;

if (name.length > leftChars) {
const croppedName = name.substr(0, leftChars) + " ... " + name.substr(-rightChars);
return croppedName;
}
return name;
if (name.length > leftChars) {
const croppedName = name.substr(0, leftChars) + " ... " + name.substr(-rightChars);
return croppedName;
}
return name;

}

function JobCardRow({job}) {
const {name, percentage, speed, size} = job;
return (
<React.Fragment>
<Row className="runningJobs">
{(size && speed) ? (
<Row className="runningJobs">
{(size && speed) ? (

<Col lg={12} className="itemName"> {getCroppedName(name)} {" "}
({formatBytes(size)}) - {formatBytes(speed)}PS </Col>
) : (
<Col lg={12} className="itemName"> {getCroppedName(name)} {" "}
({formatBytes(size)}) - {formatBytes(speed)}PS </Col>
) : (
<Col lg={12}>Calculating</Col>)}

</Row>
Expand All @@ -82,7 +84,7 @@ function JobCardRow({job}) {
}

function GlobalStatus({stats}) {
const {speed, bytes, checks, elapsedTime, deletes, errors, transfers} = stats;
const {speed, bytes, checks, elapsedTime, deletes, errors, transfers, lastError} = stats;
return (
<Card>
<CardHeader><strong>Global Stats</strong></CardHeader>
Expand Down Expand Up @@ -117,6 +119,11 @@ function GlobalStatus({stats}) {
<td>Transfers:</td>
<td>{transfers}</td>
</tr>
<tr>
<td>Last Error:</td>
<td>{lastError}</td>
</tr>

</tbody>
</table>

Expand All @@ -129,17 +136,84 @@ function GlobalStatus({stats}) {
function TransferringJobs({transferring}) {
if (transferring !== undefined) {
return transferring.map((item, idx) => {
return (<JobCard key={item.name} job={item}/>);
return (<JobCard key={item.name} job={item}/>);
});
}
return null;
}

function TransferringJobsRow({transferring}) {
if (transferring !== undefined) {
return transferring.map((item, idx) => {
return (<JobCardRow key={item.name} job={item}/>);
const grouped = groupByKey(transferring, job => job.group);
console.log(grouped);

const array = [];

grouped.forEach((val, keys) => {
console.log(val, keys);
array.push (<JobGroup job={val} groupId={keys} key={keys}/>);
});
return array;

// return grouped.values().map((item, idx) => {
// return (<JobCardRow key={item.name} job={item}/>);
// });
}
return null;
}

function JobGroup({job, groupId}) {
const [showCollapse, setShowCollapse] = useState(false);
const [cancelButtonEnabled, setCancelButtonEnabled] = useState(true);
console.log(job);

const stopJob = (e, groupId) => {
e.stopPropagation();
if(groupId && groupId.indexOf('/') !== -1) {
setCancelButtonEnabled(false);
const jobid = groupId.split('/')[1];
axiosInstance.post(urls.stopJob, {jobid, _async:true}).then(function (res) {
console.log(res);
}).catch(err => {
console.error(err);
})
}
};
// setCancelButtonEnabled((groupId && groupId !== "undefined"));
if(job) {
return (
<>
{groupId &&
<Card>

<CardHeader onClick={() => setShowCollapse(!showCollapse)}>
<Container>
<Row>
<Col sm={10}>
Transferring {job.length} file(s)
</Col>
<Col sm={2}>
<Button color={"light"} disabled={!cancelButtonEnabled}
onClick={(e) => stopJob(e, groupId)}
className={"btn-outline-danger btn-pill"}><i
className="fa fa-close fa-sm"/></Button>
</Col>
</Row>
</Container>
</CardHeader>
<Collapse isOpen={showCollapse}>
<CardBody>
{
job.map((item, idx) => {
return (<JobCardRow key={item.name} job={item}/>);
})
}
</CardBody>
</Collapse>
</Card>
}
</>
);
}
return null;
}
Expand All @@ -164,6 +238,8 @@ class RunningJobs extends React.Component {





render() {
const {jobs, isConnected, lineChartData} = this.props;
const {transferring} = jobs;
Expand Down Expand Up @@ -200,7 +276,6 @@ class RunningJobs extends React.Component {
} else if (mode === "card") {
if (isConnected) {
return (

<TransferringJobsRow transferring={transferring}/>
);
} else {
Expand All @@ -218,7 +293,7 @@ class RunningJobs extends React.Component {
</Button>
</div>
</CardHeader>
<CardBody className={!this.state.isShowing ? "d-none" : "progress-modal-body"}>
<CardBody className={!this.state.isShowing ? "d-none" : "progress-modal-body"} style={{overflowY: 'scroll'}}>
<TransferringJobsRow transferring={transferring}/>

</CardBody>
Expand Down
2 changes: 1 addition & 1 deletion src/views/Explorer/FilesView/FilesView.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -243,7 +243,7 @@ class FilesView extends React.PureComponent {
await axiosInstance.post(urls.deleteFile, data);
this.updateHandler();
toast.info(`${item.Name} deleted.`, {
autoClose: false
autoClose: true
});
}
} catch (e) {
Expand Down

0 comments on commit 30163e9

Please sign in to comment.