Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Optimize task management page #702

Merged
merged 2 commits into from
Oct 25, 2024
Merged

Optimize task management page #702

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
40b4374
Restrain task status view to showing the 200 most recent tasks
Enet4 Oct 24, 2024
640501f
Update task status style
Enet4 Oct 24, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
28 changes: 26 additions & 2 deletions dicoogle/src/main/resources/webapp/js/components/indexer/IndexStatusView.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,8 @@ import Autosuggest from "react-autosuggest";
import Select from "react-select";
import PluginStore from "../../stores/pluginStore";

const DEFAULT_MAX_TASKS_VISIBLE = 200;

var refreshIntervalId;
const IndexStatusView = createReactClass({
getInitialState: function() {
Expand Down Expand Up @@ -78,13 +80,27 @@ const IndexStatusView = createReactClass({
}

let items;
let saturated = false;
if (this.state.data.tasks.length === 0) {
items = <div>No tasks</div>;
} else {
items = this.state.data.tasks.sort((item1, item2) => {
// Sorts tasks from latest to first
return new Date(item2.taskTimeCreated).getTime() - new Date(item1.taskTimeCreated).getTime();
}).map(item => (
let c = new Date(item2.taskTimeCreated).getTime() - new Date(item1.taskTimeCreated).getTime();
if (c !== 0) {
return c;
}
// use task uid as second criterion
return item2.taskUid.localeCompare(item1.taskUid);
})

// restrain number of tasks visible to prevent memory saturation
if (items.length > DEFAULT_MAX_TASKS_VISIBLE) {
items = items.slice(0, DEFAULT_MAX_TASKS_VISIBLE);
saturated = true;
}

items = items.map(item => (
<TaskStatus
key={item.taskUid}
index={item.taskUid}
Expand All @@ -99,6 +115,13 @@ const IndexStatusView = createReactClass({
));
}

let taskCountNote;
if (saturated) {
taskCountNote = <div> (showing {DEFAULT_MAX_TASKS_VISIBLE} of {this.state.data.tasks.length} tasks)</div>
} else {
taskCountNote = <div> (showing {this.state.data.tasks.length} tasks)</div>
}

let providersList = this.state.providers.map(item => ({
value: item,
label: item
Expand Down Expand Up @@ -165,6 +188,7 @@ const IndexStatusView = createReactClass({
? "No tasks currently running"
: "Indexing Status (" + this.state.data.count + " running)"}
</h3>
{taskCountNote}
</div>
<div className="panel-body">{items}</div>
</div>
Expand Down
38 changes: 19 additions & 19 deletions dicoogle/src/main/resources/webapp/js/components/indexer/TaskStatus.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -56,7 +56,7 @@ class TaskStatus extends React.Component {
}

return (
<div key={item.taskUid} className="well well-sm">
<div key={item.taskUid} className="well well-sm task-status">
<div className="row">
<div className="col-sm-10">
<div className="progress indexstatusprogress">
Expand All @@ -77,34 +77,34 @@ class TaskStatus extends React.Component {
</button>
</div>
</div>
<div>
<p>
<ul>
<li>
<b>Uid: </b> {item.taskUid}
</p>
<p>
</li>
<li>
<b>Name: </b> {item.taskName}
</p>
<p>
</li>
<li>
<b>Time created: </b> {dateTimeToHumanReadable(timeCreated)}
</p>
<div style={{ visibility: item.complete ? "" : "hidden" }}>
</li>
<li className="task-status-complete" style={{ visibility: item.complete ? "" : "hidden" }}>
{typeof item.elapsedTime === "number" && (
<p>
<span>
<b>Elapsed Time: </b> {toHumanReadable(item.elapsedTime)}
</p>
</span>
)}
{typeof item.nIndexed === "number" && (
<p>
<b>Indexed: </b> {item.nIndexed}{" "}
</p>
<span>
<b>Indexed: </b> {item.nIndexed}
</span>
)}
{typeof item.nErrors === "number" && (
<p>
<b>Errors: </b> {item.nErrors}{" "}
</p>
<span>
<b>Errors: </b> {item.nErrors}
</span>
)}
</div>
</div>
</li>
</ul>
</div>
);
}
Expand Down
14 changes: 14 additions & 0 deletions dicoogle/src/main/resources/webapp/sass/modules/_management.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,20 @@
background: $main_color;
}

.task-status {
ul,li {
list-style-type: none;
padding-left: 0;
margin-bottom: 0.4em;
}
}

.task-status-complete {
display: flex;
flex-direction: row;
gap: 3em;
}

.list-group-item-management {
border-color: $hover_color;
border-right-color: white;
Expand Down
Loading