Import queue progress (#87)
* 🚥 Added service status panel scaffold * 🐂 Support for showing import progress * 🐂 Support for session-tracking * 🔧 Tooling for resumable socket.io sessions * 🧹 Minor change in socket.io connection code * 🔧 Refactoring the Import Page * 📝 Added more details to import statuses * 🐂 Queue pause/resume functionality * 🐂 Queue drain event reducer * 🐂 Queue controls * 🔧 Hardening the import UX * 🔀 Bumped deps * 🔧 Fixed the airdcpp-apisocket version * ⛑️ Removed useless deps * 🪡 Fixed margin on the comicinfo.xml panel on the library page * 🏗️ Scaffold for job results * 🔢 Removed the useless LS_IMPORT event * 🔧 Wired up jobStatistics call * 🧹 Cleaning up the tabulated job results * 🔧 More finishing touches to Import UX * 🔧 Added a console log for debugging purposes --------- Co-authored-by: Rishi Ghan <hghan@apple.com>
This commit was merged in pull request #87.
This commit is contained in:
GitHub
@@ -1,11 +1,14 @@
|
||||
import React, { ReactElement, useCallback, useContext, useState } from "react";
|
||||
import React, { ReactElement, useCallback, useEffect } from "react";
|
||||
import { useSelector, useDispatch } from "react-redux";
|
||||
import {
|
||||
fetchComicBookMetadata,
|
||||
toggleImportQueueStatus,
|
||||
getImportJobResultStatistics,
|
||||
setQueueControl,
|
||||
} from "../actions/fileops.actions";
|
||||
import "react-loader-spinner/dist/loader/css/react-spinner-loader.css";
|
||||
import { format } from "date-fns";
|
||||
import Loader from "react-loader-spinner";
|
||||
import { isEmpty, isNil, isUndefined } from "lodash";
|
||||
|
||||
interface IProps {
|
||||
matches?: unknown;
|
||||
@@ -29,102 +32,203 @@ interface IProps {
|
||||
|
||||
export const Import = (props: IProps): ReactElement => {
|
||||
const dispatch = useDispatch();
|
||||
const libraryQueueResults = useSelector(
|
||||
(state: RootState) => state.fileOps.librarySearchResultCount,
|
||||
const successfulImportJobCount = useSelector(
|
||||
(state: RootState) => state.fileOps.successfulJobCount,
|
||||
);
|
||||
const failedImportJobCount = useSelector(
|
||||
(state: RootState) => state.fileOps.failedJobCount,
|
||||
);
|
||||
|
||||
const lastQueueJob = useSelector(
|
||||
(state: RootState) => state.fileOps.lastQueueJob,
|
||||
);
|
||||
const libraryQueueImportStatus = useSelector(
|
||||
(state: RootState) => state.fileOps.IMSCallInProgress,
|
||||
(state: RootState) => state.fileOps.LSQueueImportStatus,
|
||||
);
|
||||
const [isImportQueuePaused, setImportQueueStatus] = useState(false);
|
||||
|
||||
const allImportJobResults = useSelector(
|
||||
(state: RootState) => state.fileOps.importJobStatistics,
|
||||
);
|
||||
|
||||
const initiateImport = useCallback(() => {
|
||||
if (typeof props.path !== "undefined") {
|
||||
dispatch(fetchComicBookMetadata(props.path));
|
||||
}
|
||||
}, [dispatch]);
|
||||
|
||||
const toggleImport = useCallback(() => {
|
||||
setImportQueueStatus(!isImportQueuePaused);
|
||||
if (isImportQueuePaused === false) {
|
||||
dispatch(toggleImportQueueStatus({ action: "resume" }));
|
||||
} else if (isImportQueuePaused === true) {
|
||||
dispatch(toggleImportQueueStatus({ action: "pause" }));
|
||||
const toggleQueue = useCallback(
|
||||
(queueAction: string, queueStatus: string) => {
|
||||
dispatch(setQueueControl(queueAction, queueStatus));
|
||||
},
|
||||
[],
|
||||
);
|
||||
useEffect(() => {
|
||||
dispatch(getImportJobResultStatistics());
|
||||
}, []);
|
||||
|
||||
const renderQueueControls = (status: string): ReactElement | null => {
|
||||
switch (status) {
|
||||
case "running":
|
||||
return (
|
||||
<div className="control">
|
||||
<button
|
||||
className="button is-warning is-light"
|
||||
onClick={() => toggleQueue("pause", "paused")}
|
||||
>
|
||||
<i className="fa-solid fa-pause mr-2"></i> Pause
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
case "paused":
|
||||
return (
|
||||
<div className="control">
|
||||
<button
|
||||
className="button is-success is-light"
|
||||
onClick={() => toggleQueue("resume", "running")}
|
||||
>
|
||||
<i className="fa-solid fa-play mr-2"></i> Resume
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
|
||||
case "drained":
|
||||
return null;
|
||||
|
||||
default:
|
||||
return null;
|
||||
}
|
||||
}, [isImportQueuePaused]);
|
||||
const pauseIconText = (
|
||||
<>
|
||||
<i className="fa-solid fa-pause mr-2"></i> Pause Import
|
||||
</>
|
||||
);
|
||||
const playIconText = (
|
||||
<>
|
||||
<i className="fa-solid fa-play mr-2"></i> Resume Import
|
||||
</>
|
||||
);
|
||||
};
|
||||
return (
|
||||
<div className="container">
|
||||
<section className="section is-small">
|
||||
<h1 className="title">Import</h1>
|
||||
<h1 className="title">Import Comics</h1>
|
||||
<article className="message is-dark">
|
||||
<div className="message-body">
|
||||
<p className="mb-2">
|
||||
<span className="tag is-medium is-info is-light">
|
||||
Import Only
|
||||
Import Comics
|
||||
</span>
|
||||
will add comics identified from the mapped folder into the local
|
||||
db.
|
||||
will add comics identified from the mapped folder into ThreeTwo's
|
||||
database.
|
||||
</p>
|
||||
<p>
|
||||
<span className="tag is-medium is-info is-light">
|
||||
Import and Tag
|
||||
</span>
|
||||
will scan the ComicVine, shortboxed APIs and import comics from
|
||||
the mapped folder with the additional metadata.
|
||||
Metadata from ComicInfo.xml, if present, will also be extracted.
|
||||
</p>
|
||||
<p>
|
||||
This process could take a while, if you have a lot of comics, or
|
||||
are importing over a network connection.
|
||||
</p>
|
||||
</div>
|
||||
</article>
|
||||
<p className="buttons">
|
||||
<button
|
||||
className={
|
||||
libraryQueueImportStatus
|
||||
? "button is-loading is-medium"
|
||||
: "button is-medium"
|
||||
libraryQueueImportStatus === "drained" ||
|
||||
libraryQueueImportStatus === undefined
|
||||
? "button is-medium"
|
||||
: "button is-loading is-medium"
|
||||
}
|
||||
onClick={initiateImport}
|
||||
>
|
||||
<span className="icon">
|
||||
<i className="fas fa-file-import"></i>
|
||||
</span>
|
||||
<span>Import Only</span>
|
||||
</button>
|
||||
|
||||
<button className="button is-medium">
|
||||
<span className="icon">
|
||||
<i className="fas fa-tag"></i>
|
||||
</span>
|
||||
<span>Import and Tag</span>
|
||||
<span>Start Import</span>
|
||||
</button>
|
||||
</p>
|
||||
<div className="columns is-multiline">
|
||||
<div className="column is-one-fifth">
|
||||
<div className="box control-palette">
|
||||
<span className="is-size-2 has-text-weight-bold">
|
||||
{JSON.stringify(libraryQueueResults, null, 2)}
|
||||
</span>
|
||||
</div>
|
||||
<div className="is-half">
|
||||
<div className="content">
|
||||
<div className="control">
|
||||
<button
|
||||
className="button is-warning is-light"
|
||||
onClick={toggleImport}
|
||||
>
|
||||
{!isImportQueuePaused ? pauseIconText : playIconText}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{libraryQueueImportStatus !== "drained" &&
|
||||
!isUndefined(libraryQueueImportStatus) && (
|
||||
<>
|
||||
<table className="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Completed Jobs</th>
|
||||
<th>Failed Jobs</th>
|
||||
<th>Queue Controls</th>
|
||||
<th>Queue Status</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
<tr>
|
||||
<th>
|
||||
{successfulImportJobCount > 0 && (
|
||||
<div className="box has-background-success-light has-text-centered">
|
||||
<span className="is-size-2 has-text-weight-bold">
|
||||
{successfulImportJobCount}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
</th>
|
||||
<td>
|
||||
{failedImportJobCount > 0 && (
|
||||
<div className="box has-background-danger has-text-centered">
|
||||
<span className="is-size-2 has-text-weight-bold">
|
||||
{failedImportJobCount}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
</td>
|
||||
|
||||
<td>{renderQueueControls(libraryQueueImportStatus)}</td>
|
||||
<td>
|
||||
{libraryQueueImportStatus !== undefined ? (
|
||||
<span className="tag is-warning">
|
||||
{libraryQueueImportStatus}
|
||||
</span>
|
||||
) : null}
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
Imported{" "}
|
||||
<span className="has-text-weight-bold">{lastQueueJob}</span>
|
||||
</>
|
||||
)}
|
||||
|
||||
{/* Past imports */}
|
||||
|
||||
<h3 className="subtitle is-4 mt-5">Past Imports</h3>
|
||||
<table className="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Time Started</th>
|
||||
<th>Session Id</th>
|
||||
<th>Imported</th>
|
||||
<th>Failed</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
{allImportJobResults.map((jobResult, id) => {
|
||||
return (
|
||||
<tr key={id}>
|
||||
<td>
|
||||
{format(
|
||||
new Date(jobResult.earliestTimestamp),
|
||||
"EEEE, hh:mma, do LLLL Y",
|
||||
)}
|
||||
</td>
|
||||
<td>
|
||||
<span className="tag is-warning">
|
||||
{jobResult.sessionId}
|
||||
</span>
|
||||
</td>
|
||||
<td>
|
||||
<span className="tag is-success">
|
||||
{jobResult.completedJobs}
|
||||
</span>
|
||||
</td>
|
||||
<td>
|
||||
<span className="tag is-danger">
|
||||
{jobResult.failedJobs}
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
);
|
||||
})}
|
||||
</tbody>
|
||||
</table>
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user