webui: Always show recent task fails in the task page (#171)

Author: magik6k

web/api/webrpc/harmony_stats.go

@@ -68,15 +68,15 @@ type HarmonyTaskHistory struct {
 	CompletedByName *string `db:"completed_by_machine_name"`
 }
 
-func (a *WebRPC) HarmonyTaskHistory(ctx context.Context, taskName string) ([]HarmonyTaskHistory, error) {
+func (a *WebRPC) HarmonyTaskHistory(ctx context.Context, taskName string, fails bool) ([]HarmonyTaskHistory, error) {
 	var stats []HarmonyTaskHistory
 	err := a.deps.DB.Select(ctx, &stats, `SELECT
 	hist.task_id, hist.name, hist.work_start, hist.work_end, hist.posted, hist.result, hist.err,
 	hist.completed_by_host_and_port, mach.id as completed_by_machine, hmd.machine_name as completed_by_machine_name
     FROM harmony_task_history hist
     LEFT JOIN harmony_machines mach ON hist.completed_by_host_and_port = mach.host_and_port
     LEFT JOIN curio.harmony_machine_details hmd on mach.id = hmd.machine_id
-    WHERE name = $1 AND work_end > current_timestamp - interval '1 day' ORDER BY work_end DESC LIMIT 30`, taskName)
+    WHERE name = $1 AND work_end > current_timestamp - interval '1 day' AND ($2 OR NOT hist.result) ORDER BY work_end DESC LIMIT 30`, taskName, !fails)
 	if err != nil {
 		return nil, err
 	}

web/static/task/index.html

@@ -31,6 +31,14 @@ <h4>History</h4>
             </div>
         </div>
     </section>
+    <section class="section">
+        <div class="row">
+            <div class="col-md-auto" style="max-width: 95%">
+                <h4>Recent Failures</h4>
+                <harmony-task-fails></harmony-task-fails>
+            </div>
+        </div>
+    </section>
 </curio-ux>
 </body>
 

web/static/task/task-history.mjs

@@ -11,7 +11,7 @@ class HarmonyTaskHistoryTable extends LitElement {
 
     async loadHistory() {
         try {
-            this.history = await RPCCall('HarmonyTaskHistory', [this.taskName]);
+            this.history = await RPCCall('HarmonyTaskHistory', [this.taskName, false]);
             this.requestUpdate();
         } catch (error) {
             console.error('Error fetching task history data:', error);
@@ -63,3 +63,67 @@ class HarmonyTaskHistoryTable extends LitElement {
 }
 
 customElements.define('harmony-task-history', HarmonyTaskHistoryTable);
+
+class HarmonyTaskFailsTable extends LitElement {
+    constructor() {
+        super();
+        this.history = [];
+        this.taskName = new URLSearchParams(window.location.search).get('name');
+        this.loadHistory();
+    }
+
+    async loadHistory() {
+        try {
+            this.history = await RPCCall('HarmonyTaskHistory', [this.taskName, true]);
+            this.requestUpdate();
+        } catch (error) {
+            console.error('Error fetching task history data:', error);
+        }
+    }
+
+    static get styles() {
+        return css`
+        .error {
+            color: red;
+        }
+        `;
+    }
+
+    render() {
+        return html`
+            <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
+            <link rel="stylesheet" href="/ux/main.css" onload="document.body.style.visibility = 'initial'">
+            <table class="table table-dark">
+                <thead>
+                    <tr>
+                        <th>Task ID</th>
+                        <th>Name</th>
+                        <th>Work Start</th>
+                        <th>Work End</th>
+                        <th>Posted</th>
+                        <th>Completed By</th>
+                        <th>Result</th>
+                        <th>Error</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    ${this.history.map(task => html`
+                        <tr>
+                            <td>${task.TaskID}</td>
+                            <td>${task.Name}</td>
+                            <td>${new Date(task.WorkStart).toLocaleString()}</td>
+                            <td>${new Date(task.WorkEnd).toLocaleString()}</td>
+                            <td>${new Date(task.Posted).toLocaleString()}</td>
+                            <td>${task.CompletedById ? html`<a href="/pages/node_info/?id=${task.CompletedById}">${task.CompletedByName} (${task.CompletedBy})</a>` : task.CompletedBy}</td>
+                            <td class="${task.Result ? '' : 'error'}">${task.Result ? 'Success' : 'Failed'}</td>
+                            <td>${task.Err}</td>
+                        </tr>
+                    `)}
+                </tbody>
+            </table>
+        `;
+    }
+}
+
+customElements.define('harmony-task-fails', HarmonyTaskFailsTable);
+