Merge pull request #160 from khanlab/show-logs-no-react

Show logs in task tables

autobidsportal/static/lib/autobids-react/src/TaskList/TaskList.js

@@ -0,0 +1,30 @@
+import React from "react";
+import PropTypes from "prop-types";
+
+import TaskListItem from "./TaskListItem";
+
+function TaskList(props) {
+  const { children } = props;
+
+  return (
+    <div className="table-responsive" style={{ maxHeight: "400px" }}>
+      <table className="table table-light overflow-auto">
+        <thead>
+          <tr>
+            <th scope="col">Start Date and Time</th>
+            <th scope="col">End Date and Time</th>
+            <th scope="col">Completion Status</th>
+            <th scope="col"></th>
+          </tr>
+        </thead>
+        <tbody>{children}</tbody>
+      </table>
+    </div>
+  );
+}
+
+TaskList.propTypes = {
+  children: PropTypes.arrayOf(PropTypes.instanceOf(TaskListItem)),
+};
+
+export default TaskList;

autobidsportal/static/lib/autobids-react/src/TaskList/TaskListItem.js

@@ -0,0 +1,48 @@
+import React, { useState } from "react";
+import PropTypes from "prop-types";
+
+import TaskLogModal from "./TaskLogModal";
+
+function TaskListItem(props) {
+  const { start, end, complete, log } = props;
+
+  const [modalOpen, setModalOpen] = useState(false);
+
+  const modalElement = document.getElementById("autobidsModal");
+  const openModal = () => setModalOpen(true);
+  modalElement.addEventListener("hidden.bs.modal", (event) =>
+    setModalOpen(false)
+  );
+
+  return (
+    <>
+      <tr>
+        <td>{start}</td>
+        <td>{end}</td>
+        <td>{complete}</td>
+        <td>
+          <button
+            className="btn btn-primary btn-sm"
+            type="button"
+            onClick={openModal}
+            data-bs-toggle="modal"
+            data-bs-target="#autobidsModal"
+            disabled={!log}
+          >
+            View log
+          </button>
+        </td>
+      </tr>
+      {modalOpen ? <TaskLogModal log={log} /> : null}
+    </>
+  );
+}
+
+TaskListItem.propTypes = {
+  start: PropTypes.string.isRequired,
+  end: PropTypes.string.isRequired,
+  complete: PropTypes.string.isRequired,
+  log: PropTypes.string,
+};
+
+export default TaskListItem;

autobidsportal/static/lib/autobids-react/src/TaskList/TaskLogModal.js

@@ -0,0 +1,31 @@
+import React from "react";
+import * as ReactDOM from "react-dom";
+import PropTypes from "prop-types";
+
+function TaskLogModal(props) {
+  const { log } = props;
+
+  return ReactDOM.createPortal(
+    <>
+      <div className="modal-header">
+        <h5 className="modal-title">Task log</h5>
+        <button
+          type="button"
+          className="btn-close"
+          data-bs-dismiss="modal"
+          aria-label="close"
+        ></button>
+      </div>
+      <div className="modal-body">
+        <pre>{log}</pre>
+      </div>
+    </>,
+    document.querySelector("#autobidsModalContent")
+  );
+}
+
+TaskLogModal.propTypes = {
+  log: PropTypes.string.isRequired,
+};
+
+export default TaskLogModal;

autobidsportal/static/lib/autobids-react/src/TaskList/index.js

@@ -0,0 +1,3 @@
+export { default as TaskList } from "./TaskList";
+export { default as TaskListItem } from "./TaskListItem";
+export { default as TaskLogModal } from "./TaskLogModal";

autobidsportal/static/lib/autobids-react/src/index.js

@@ -1,5 +1,6 @@
 import { Accordion, TextItem, DirItem, genAccordion } from "./Accordion";
 import { TableLauncher, TableLauncherRow } from "./TableLauncher";
+import { TaskList, TaskListItem } from "./TaskList";
 import ReactDOM from "react-dom";
 import React from "react";
 
@@ -9,6 +10,8 @@ globalThis.DirItem = DirItem;
 globalThis.genAccordion = genAccordion;
 globalThis.TableLauncher = TableLauncher;
 globalThis.TableLauncherRow = TableLauncherRow;
+globalThis.TaskList = TaskList;
+globalThis.TaskListItem = TaskListItem;
 globalThis.ReactDOM = ReactDOM;
 globalThis.React = React;
 
@@ -19,6 +22,8 @@ export {
   genAccordion,
   TableLauncher,
   TableLauncherRow,
+  TaskList,
+  TaskListItem,
   ReactDOM,
   React,
 };
@@ -29,6 +34,8 @@ export default {
   genAccordion,
   TableLauncher,
   TableLauncherRow,
+  TaskList,
+  TaskListItem,
   ReactDOM,
   React,
 };

autobidsportal/templates/answer_info.html

@@ -176,49 +176,7 @@ <h4 class="card-title">Accessing this study data</h4>
         <h2 class="sub-header">
           Cfmm2tar Runs
         </h2>
-        <div class="table-responsive" style="max-height: 400px;">
-          <table class="table table-light overflow-auto">
-            <tr>
-              <th scope="col">
-                Start Date and Time
-              </th>
-              <th scope="col">
-                End Date and Time
-              </th>
-              <th scope="col">
-                Completion Status
-              </th>
-            </tr>
-            {% for t in cfmm2tar_tasks %}
-              <tr>
-                <td>
-                  {% if t.start_time != None %}
-                    {{ t.start_time.strftime("%Y-%m-%d %H:%M") }}
-                  {% else %}
-                    {{ t.start_time }}
-                  {% endif %}
-                </td>
-                <td>
-                  {% if t.end_time != None %}
-                    {{ t.end_time.strftime("%Y-%m-%d %H:%M") }}
-                  {% else %}
-                    {{ t.end_time }}
-                  {% endif %}
-                </td>
-                <td>
-                  {% if t.complete == True %}
-                    {% if t.success == True %}
-                      Completed Successfully
-                    {% else %}
-                      Failed
-                    {% endif %}
-                  {% else %}
-                    In Progress
-                  {% endif %}
-                </td>
-              </tr>
-            {% endfor %}
-          </table>
+        <div id="cfmm2tar-table-mount">
         </div>
       </div>
       <div class="col-6">
@@ -234,48 +192,8 @@ <h2 class="sub-header">
         <h2 class="sub-header">
           Tar2bids Runs
         </h2>
-        <table class="table table-light">
-          <tr>
-            <th scope="col">
-              Start Date and Time
-            </th>
-            <th scope="col">
-              End Date and Time
-            </th>
-            <th scope="col">
-              Completion Status
-            </th>
-          </tr>
-          {% for t in tar2bids_tasks %}
-            <tr>
-              <td>
-                {% if t.start_time != None %}
-                  {{ t.start_time.strftime("%Y-%m-%d %H:%M") }}
-                {% else %}
-                  {{ t.start_time }}
-                {% endif %}
-              </td>
-              <td>
-                {% if t.end_time != None %}
-                  {{ t.end_time.strftime("%Y-%m-%d %H:%M") }}
-                {% else %}
-                  {{ t.end_time }}
-                {% endif %}
-              </td>
-              <td>
-                {% if t.complete == True %}
-                  {% if t.success == True %}
-                    Completed Successfully
-                  {% else %}
-                    Failed
-                  {% endif %}
-                {% else %}
-                  In Progress
-                {% endif %}
-              </td>
-            </tr>
-          {% endfor %}
-        </table>
+        <div id="tar2bids-table-mount">
+        </div>
       </div>
       <div class="col-6">
         <h2 class="sub-header">
@@ -318,5 +236,44 @@ <h2 class="sub-header">
       }
     )
     ReactDOM.render(tarTable, document.querySelector("#tar-table-mount"))
+    const e = React.createElement;
+    const cfmm2tarTable = e(
+      TaskList,
+      null,
+      [
+        {% for task in cfmm2tar_tasks %}
+        e(
+          TaskListItem, 
+          {
+            start: "{{ task.start_time.strftime("%Y-%m-%d %H:%M") if task.start_time != None else task.start_time }}",
+            end: "{{ task.end_time.strftime("%Y-%m-%d %H:%M") if task.end_time != None else task.end_time }}",
+            complete: "{% if task.complete == True %}{% if task.success == True %}Completed Successfully{% else %}Failed{% endif %}{% else %}In Progress{% endif %}",
+            log: `{{ task.log|safe if task.log != None else "" }}`
+          },
+          null
+        ),
+        {% endfor %}
+      ]
+    )
+    ReactDOM.render(cfmm2tarTable, document.querySelector("#cfmm2tar-table-mount"))
+    const tar2bidsTable = e(
+      TaskList,
+      null,
+      [
+        {% for task in tar2bids_tasks %}
+        e(
+          TaskListItem, 
+          {
+            start: "{{ task.start_time.strftime("%Y-%m-%d %H:%M") if task.start_time != None else task.start_time }}",
+            end: "{{ task.end_time.strftime("%Y-%m-%d %H:%M") if task.end_time != None else task.end_time }}",
+            complete: "{% if task.complete == True %}{% if task.success == True %}Completed Successfully{% else %}Failed{% endif %}{% else %}In Progress{% endif %}",
+            log: `{{ task.log|safe if task.log != None else "" }}`
+          },
+          null
+        ),
+        {% endfor %}
+      ]
+    )
+    ReactDOM.render(tar2bidsTable, document.querySelector("#tar2bids-table-mount"))
   </script>
 {% endblock scripts %}

autobidsportal/templates/base.html

@@ -69,7 +69,7 @@
       {% block app_content %}
       {% endblock app_content %}
       <div class="modal fade" id="autobidsModal" tabindex="-1">
-        <div class="modal-dialog modal-lg">
+        <div class="modal-dialog modal-dialog-scrollable modal-xl">
           <div class="modal-content" id="autobidsModalContent"></div>
         </div>
       </div>