Merge pull request #702 from bioinformatics-ua/imp/webapp/task-status…

…-opt Optimize task management page
bioinformatics-ua · Oct 25, 2024 · 43f67a4 · 43f67a4
2 parents 390ab78 + 640501f
commit 43f67a4
Show file tree

Hide file tree

Showing 3 changed files with 59 additions and 21 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
@@ -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>

diff --git 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
@@ -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;