From 40b43744fb62693e1b362088c1dff3d1e8a7645d Mon Sep 17 00:00:00 2001
From: Eduardo Pinho <eduardopinho@bmd-software.com>
Date: Thu, 24 Oct 2024 09:54:57 +0100
Subject: [PATCH 1/2] Restrain task status view to showing the 200 most recent
 tasks

- prevents webapp saturation from a very large number of tasks
- show count in header panel above the task status list
---
 .../js/components/indexer/IndexStatusView.js  | 28 +++++++++++++++++--
 1 file changed, 26 insertions(+), 2 deletions(-)

diff --git a/dicoogle/src/main/resources/webapp/js/components/indexer/IndexStatusView.js b/dicoogle/src/main/resources/webapp/js/components/indexer/IndexStatusView.js
index 1063576d7..0e210dc22 100644
--- a/dicoogle/src/main/resources/webapp/js/components/indexer/IndexStatusView.js
+++ b/dicoogle/src/main/resources/webapp/js/components/indexer/IndexStatusView.js
@@ -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() {
@@ -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}
@@ -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
@@ -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>

From 640501f2acdcfdc37ded6e5bd0a961e57f2b9184 Mon Sep 17 00:00:00 2001
From: Eduardo Pinho <eduardopinho@bmd-software.com>
Date: Thu, 24 Oct 2024 09:56:25 +0100
Subject: [PATCH 2/2] Update task status style

- reduce spacing between properties
- present completed tasks information in the same row
---
 .../js/components/indexer/TaskStatus.jsx      | 38 +++++++++----------
 .../webapp/sass/modules/_management.scss      | 14 +++++++
 2 files changed, 33 insertions(+), 19 deletions(-)

diff --git a/dicoogle/src/main/resources/webapp/js/components/indexer/TaskStatus.jsx b/dicoogle/src/main/resources/webapp/js/components/indexer/TaskStatus.jsx
index 691ed1b90..119e716f6 100644
--- a/dicoogle/src/main/resources/webapp/js/components/indexer/TaskStatus.jsx
+++ b/dicoogle/src/main/resources/webapp/js/components/indexer/TaskStatus.jsx
@@ -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">
@@ -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>
     );
   }
diff --git a/dicoogle/src/main/resources/webapp/sass/modules/_management.scss b/dicoogle/src/main/resources/webapp/sass/modules/_management.scss
index 76229b981..2bec8944d 100644
--- a/dicoogle/src/main/resources/webapp/sass/modules/_management.scss
+++ b/dicoogle/src/main/resources/webapp/sass/modules/_management.scss
@@ -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;