ImperialCollegeLondon · cc-a · Oct 31, 2024 · Oct 24, 2024 · Oct 24, 2024 · Oct 24, 2024
diff --git a/main/templates/main/base.html b/main/templates/main/base.html
@@ -24,7 +24,8 @@
   </head>
   <body>
     {% include "main/navbar.html" %}
-    <div class="container py-3">
+    <div class="container-fluid py-3">
+      <!-- Changed to container-fluid for full width -->
       {% block content %}
       {% endblock content %}
     </div>

diff --git a/main/templates/main/navbar.html b/main/templates/main/navbar.html
@@ -1,7 +1,7 @@
 <!--Navbar-->
 {% load static %}
 <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
-  <div class="container">
+  <div class="container-fluid">
     <a class="navbar-brand" href="{% url 'main:index' %}">
       <img src="{% static 'main/images/DUNElogo_white.png' %}"
            alt="DUNE Run Control"

diff --git a/process_manager/tables.py b/process_manager/tables.py
@@ -1,10 +1,13 @@
-"""Tables for the process_manager app."""
+"""Defines the ProcessTable for displaying process data in a structured table format."""
+
+from typing import ClassVar
 
 import django_tables2 as tables
 from django.utils.safestring import mark_safe
 
 logs_column_template = (
-    "<a href=\"{% url 'process_manager:logs' record.uuid %}\">LOGS</a>"
+    "<a href=\"{% url 'process_manager:logs' record.uuid %}\" "
+    'class="btn btn-sm btn-primary text-white" title="View logs">LOGS</a>'
 )
 
 header_checkbox_hyperscript = """
@@ -21,18 +24,37 @@
 
 
 class ProcessTable(tables.Table):
-    """Defines and Process Table for the data from the Process Manager."""
-
-    class Meta:  # noqa: D106
-        orderable = False
-
-    uuid = tables.Column(verbose_name="UUID")
-    name = tables.Column(verbose_name="Name")
-    user = tables.Column(verbose_name="User")
-    session = tables.Column(verbose_name="Session")
-    status_code = tables.Column(verbose_name="Status Code")
-    exit_code = tables.Column(verbose_name="Exit Code")
-    logs = tables.TemplateColumn(logs_column_template, verbose_name="Logs")
+    """Defines a Process Table for the data from the Process Manager."""
+
+    uuid = tables.Column(
+        verbose_name="UUID",
+        attrs={"td": {"class": "fw-bold text-break text-start"}},
+    )
+    name = tables.Column(
+        verbose_name="Process Name",
+        attrs={"td": {"class": "fw-bold text-primary text-left"}},
+    )
+    user = tables.Column(
+        verbose_name="User",
+        attrs={"td": {"class": "text-secondary text-left"}},
+    )
+    session = tables.Column(
+        verbose_name="Session",
+        attrs={"td": {"class": "text-secondary text-left"}},
+    )
+    status_code = tables.Column(
+        verbose_name="Status",
+        attrs={"td": {"class": "fw-bold text-left"}},
+    )
+    exit_code = tables.Column(
+        verbose_name="Exit Code",
+        attrs={"td": {"class": "text-left"}},
+    )
+    logs = tables.TemplateColumn(
+        logs_column_template,
+        verbose_name="Logs",
+        attrs={"td": {"class": "text-left"}},
+    )
     select = tables.CheckBoxColumn(
         accessor="uuid",
         verbose_name="Select",
@@ -41,23 +63,39 @@ class Meta:  # noqa: D106
                 "id": "header-checkbox",
                 "hx-preserve": "true",
                 "_": header_checkbox_hyperscript,
-            }
+                "class": "form-check-input form-check-input-lg",
+            },
+            "td__input": {
+                "class": "form-check-input form-check-input-lg text-center",
+            },
         },
     )
 
-    def render_select(self, value: str) -> str:
-        """Customise behaviour of checkboxes in the select column.
+    class Meta:
+        """Table meta options for rendering behavior and styling."""
 
-        Overriding the default render method for this column is required as the
-        hx-preserve attitribute requires all elements to have unique id values. We also
-        need to add the hyperscript required for the header checkbox behaviour.
+        orderable: ClassVar[bool] = False
+        attrs: ClassVar[dict[str, str]] = {
+            "class": "table table-striped table-hover table-responsive",
+        }
 
-        Called during table rendering.
+    def render_status_code(self, value: str) -> str:
+        """Render the status_code with custom badge classes."""
+        if value == "DEAD":
+            return mark_safe('<span class="badge badge-dead">DEAD</span>')
+        elif value == "RUNNING":
+            return mark_safe('<span class="badge badge-running">RUNNING</span>')
+        return mark_safe(
+            f'<span class="badge bg-secondary px-3 py-2 rounded" '
+            f'style="font-size: 1.1rem;">{value}</span>'
+        )
 
-        Args:
-          value: uuid from the table row data
-        """
+    def render_select(self, value: str) -> str:
+        """Customize behavior of checkboxes in the select column."""
         return mark_safe(
-            f'<input type="checkbox" name="select" value="{value}" id="{value}-input" '
-            f'hx-preserve="true" class="row-checkbox" _="{row_checkbox_hyperscript}"'
+            f'<input type="checkbox" name="select" value="{value}" '
+            f'id="{value}-input" hx-preserve="true" '
+            'class="form-check-input form-check-input-lg row-checkbox" '
+            'style="transform: scale(1.5);" '
+            f'_="{row_checkbox_hyperscript}">'
         )
diff --git a/process_manager/templates/process_manager/index.html b/process_manager/templates/process_manager/index.html
@@ -5,14 +5,52 @@
 {% block extra_css %}
   <style>
     #hide-messages-button {
-      /* Certain themes invert the colour, so we invert back. */
       filter: invert(1);
       float: right;
     }
+    #show-messages-button {
+      display: none; /* Hide on load */
+    }
     #message-list {
       max-height: 80vh;
       overflow-y: auto;
     }
+    .table-container {
+      border-radius: 10px;
+    }
+    .table-container table {
+      width: 100%;
+      border-collapse: collapse;
+    }
+    .table-container th, .table-container td {
+      padding: 8px;
+      white-space: nowrap;
+      vertical-align: middle;
+    }
+    /* Flex layout to control column widths */
+    .flex-container {
+      display: flex;
+      gap: 15px;
+    }
+    .flex-container .process-panel {
+      flex: 1;
+    }
+    .flex-container .message-panel {
+      width: 30%;
+    }
+    .flex-container.hide-messages .process-panel {
+      width: 100%;
+    }
+    .flex-container.hide-messages .message-panel {
+      display: none;
+    }
+    .flex-container.hide-messages #show-messages-button {
+      display: inline-block;
+    }
+    .scrollable-div {
+      max-height: 60vh;
+      overflow-y: auto;
+    }
   </style>
 {% endblock extra_css %}
 {% block extra_js %}
@@ -28,76 +66,87 @@
   </script>
 {% endblock extra_js %}
 {% block content %}
-  <div class="row">
-    <div class="col">
-      <form method="post" action="{% url 'process_manager:process_action' %}">
-        {% csrf_token %}
-        {% if perms.main.can_modify_processes %}
-          <a href="{% url 'process_manager:boot_process' %}"
-             class="btn btn-primary">Boot</a>
-          <input type="submit"
-                 value="Restart"
-                 class="btn btn-success"
-                 name="action"
-                 id="restartButton"
-                 onclick="return confirm('Restart selected processes?')"
-                 disabled
-                 _="install disableActionButton">
-          <input type="submit"
-                 value="Flush"
-                 class="btn btn-warning"
-                 name="action"
-                 id="flushButton"
-                 onclick="return confirm('Flush selected processes?')"
-                 disabled
-                 _="install disableActionButton">
-          <input type="submit"
-                 value="Kill"
-                 class="btn btn-danger"
-                 name="action"
-                 id="killButton"
-                 onclick="return confirm('Kill selected processes?')"
-                 disabled
-                 _="install disableActionButton">
-        {% endif %}
-        <button id="show-messages-button"
-                type="button"
-                class="btn btn-info"
-                _="on load hide me on click hide me show #message-panel">Show Messages</button>
-        <p>&nbsp;</p>
-        <input class="form-control"
-               type="search"
-               name="search"
-               placeholder="Search..."
-               hx-get="{% url 'process_manager:process_table' %}"
-               hx-trigger="input changed delay:500ms, every 1s"
-               hx-target="div.table-container">
-        <div id="table-container"
-             hx-get="{% url 'process_manager:process_table' %}"
-             hx-trigger="load"></div>
-      </form>
-    </div>
-    <div class="col" id="message-panel">
-      <div class="card">
-        <div class="card-header">
-          Messages
-          <button id="hide-messages-button"
-                  type="button"
-                  class="btn-close"
-                  aria-label="Hide Messages"
-                  _="on click hide #message-panel show #show-messages-button"></button>
-          <input class="form-control"
-                 type="search"
-                 name="search"
-                 placeholder="Search..."
+  <div class="container-fluid no-padding no-margin">
+    <div class="flex-container" id="main-content">
+      <!-- Process Control Panel -->
+      <div class="process-panel">
+        <div class="card shadow-sm rounded">
+          <div class="card-header bg-primary text-white rounded-top">
+            <h5>Process Control</h5>
+          </div>
+          <div class="card-body">
+            <form method="post" action="{% url 'process_manager:process_action' %}">
+              {% csrf_token %}
+              <div class="d-flex justify-content-between mb-3">
+                <a href="{% url 'process_manager:boot_process' %}"
+                   class="btn btn-primary w-100 me-2">Boot</a>
+                <input type="submit"
+                       value="Restart"
+                       class="btn btn-success w-100 mx-2"
+                       name="action"
+                       onclick="return confirm('Restart selected processes?')"
+                       disabled
+                       _="install disableActionButton">
+                <input type="submit"
+                       value="Flush"
+                       class="btn btn-warning w-100 mx-2"
+                       name="action"
+                       onclick="return confirm('Flush selected processes?')"
+                       disabled
+                       _="install disableActionButton">
+                <input type="submit"
+                       value="Kill"
+                       class="btn btn-danger w-100 ms-2"
+                       name="action"
+                       onclick="return confirm('Kill selected processes?')"
+                       disabled
+                       _="install disableActionButton">
+                <!-- Consistent Show Messages Button -->
+                <button id="show-messages-button"
+                        type="button"
+                        class="btn btn-info w-100 ms-2"
+                        _="on click hide me toggle .hide-messages on #main-content">Show Messages</button>
+              </div>
+              <input class="form-control mb-3"
+                     type="search"
+                     name="search"
+                     placeholder="Search processes..."
+                     hx-get="{% url 'process_manager:process_table' %}"
+                     hx-trigger="input changed delay:500ms, every 1s"
+                     hx-target="div.table-container">
+              <div id="table-container" class="table-container">
+                <div class="scrollable-div"></div>
+              </div>
+            </form>
+          </div>
+        </div>
+      </div>
+      <!-- Messages Panel with toggle -->
+      <div class="message-panel" id="message-panel">
+        <div class="card shadow-sm">
+          <div class="card-header bg-info text-white">
+            <h5 class="d-inline">Messages</h5>
+            <!-- Updated Hide Messages Button as a close icon -->
+            <button id="hide-messages-button"
+                    type="button"
+                    class="btn-close"
+                    aria-label="Close"
+                    _="on click add .hide-messages to #main-content show #show-messages-button"></button>
+          </div>
+          <div class="card-body">
+            <input class="form-control mb-2"
+                   type="search"
+                   name="search"
+                   placeholder="Search messages..."
+                   hx-get="{% url 'process_manager:messages' %}"
+                   hx-trigger="input changed delay:500ms, every 1s"
+                   hx-target="#message-list">
+            <div id="message-list"
+                 class="list-group"
                  hx-get="{% url 'process_manager:messages' %}"
-                 hx-trigger="input changed delay:500ms, every 1s"
-                 hx-target="#message-list">
+                 hx-trigger="load"></div>
+          </div>
         </div>
-        <div id="message-list"
-             class="card-body"
-             hx-get="{% url 'process_manager:messages' %}"
-             hx-trigger="load"></div>
       </div>
     </div>
   </div>

diff --git a/process_manager/templates/process_manager/logs.html b/process_manager/templates/process_manager/logs.html
@@ -3,8 +3,28 @@
   Logs
 {% endblock title %}
 {% block content %}
-  <!-- djlint:off H021 -->
-  <div style="white-space: pre-wrap;">{{ log_text }}</div>
-  <!-- djlint:on -->
-  <a href="{% url 'process_manager:index' %}">Return to table</a>
+  <div class="card shadow-sm">
+    <div class="card-header bg-primary text-white rounded-top">
+      <h5>Log Output</h5>
+    </div>
+    <div class="card-body p-0">
+      <div class="list-group">
+        {% for line in log_lines %}
+          <div class="list-group-item border-0"
+               style="font-family: 'Courier New', Courier, monospace;
+                      font-size: 0.875rem;
+                      line-height: 1.2;
+                      {% if forloop.first %}border-top-left-radius: 0;
+                      border-top-right-radius: 0;
+                      {% elif forloop.last %}border-bottom-left-radius: 0;
+                      border-bottom-right-radius: 0;
+                      {% else %}border-radius: 0;
+                      {% endif %} background-color: rgba(240, 240, 240, 0.9)">
+            <span class="d-block py-0 px-2">{{ line }}</span>
+          </div>
+        {% endfor %}
+      </div>
+    </div>
+  </div>
+  <a href="{% url 'process_manager:index' %}" class="btn btn-primary mt-3">Return to process list</a>
 {% endblock content %}
diff --git a/process_manager/templates/process_manager/partials/message_items.html b/process_manager/templates/process_manager/partials/message_items.html
@@ -1,3 +1,14 @@
-<ul class="list-group">
-  {% for message in messages %}<li class="list-group-item">{{ message }}</li>{% endfor %}
+<style>
+  .message-item {
+    font-family: 'Arial', sans-serif;
+    font-size: 0.875rem;
+    line-height: 1.4;
+  }
+</style>
+<ul class="list-group list-group-flush">
+  {% for message in messages %}
+    <li class="list-group-item py-2 message-item {% if forloop.counter0|divisibleby:2 %}bg-light{% else %}bg-white{% endif %}">
+      <span>{{ message }}</span>
+    </li>
+  {% endfor %}
 </ul>