HTML / JS / CSS work

lib/job_server.py

@@ -61,7 +61,8 @@ def job_detail(job_id):
             media_basename = os.path.basename(found_job.file_list()[0])
             media_url = f"/api/job/{job_id}/file/{media_basename}"
         return render_template('details.html', detail_table=table_html, media_url=media_url,
-                               job_status=found_job.render_status().value.title(), job=found_job)
+                               hostname=RenderQueue.host_name, job_status=found_job.render_status().value.title(),
+                               job=found_job, renderer_info=renderer_info())
     return f'Cannot find job with ID {job_id}', 400
 
 
@@ -111,7 +112,7 @@ def filtered_jobs_json(status_val):
         return f'Cannot find jobs with status {status_val}', 400
 
 
-@server.get('/api/job_status/<job_id>')
+@server.get('/api/job/<job_id>')
 def get_job_status(job_id):
     found_job = RenderQueue.job_with_id(job_id)
     if found_job:

lib/render_job.py

@@ -47,6 +47,7 @@ class RenderJob:
             job_dict['status'] = self.render_status().value
             job_dict['time_elapsed'] = self.time_elapsed() if type(self.time_elapsed) != str else self.time_elapsed
             job_dict['file_hash'] = self.file_hash if self.file_hash and isinstance(self.file_hash, str) else self.file_hash()
+            job_dict['percent_complete'] = self.percent_complete()
             job_dict['file_list'] = self.file_list()
             job_dict['worker'] = self.worker.__dict__.copy()
             job_dict['worker']['status'] = job_dict['status']

lib/static/js/job_table.js

@@ -0,0 +1,71 @@
+const grid = new gridjs.Grid({
+columns: [
+  { data: (row) => row.id,
+  name: 'Thumbnail',
+  formatter: (cell) => gridjs.html(`<img src="/ui/job/${cell}/thumbnail" style='width: 320px; min-width: 240px;'>`),
+  sort: {enabled: false}
+  },
+  { id: 'name',
+  name: 'Name',
+  data: (row) => row.name,
+  formatter: (name, row) => gridjs.html(`<a href="/ui/job/${row.cells[0].data}/full_details">${name}</a>`)
+   },
+  { id: 'renderer', data: (row) => `${row.renderer}-${row.worker.renderer_version}`, name: 'Renderer' },
+  { id: 'priority', name: 'Priority' },
+  { id: 'status',
+    name: 'Status',
+    data: (row) => row,
+    formatter: (cell, row) => gridjs.html(`
+        <span class="tag is-primary is-light ${(cell.status == 'running') ? 'is-hidden': ''}">${cell.status}</span>
+        <progress class="progress is-primary ${(cell.status != 'running') ? 'is-hidden': ''}"
+        value="${(parseFloat(cell.percent_complete) * 100.0)}" max="100">${cell.status}</progress>
+    `)},
+  { id: 'time_elapsed', name: 'Time Elapsed' },
+  { data: (row) => row.worker.total_frames, name: 'Frame Count' },
+  { id: 'client', name: 'Client'},
+  { data: (row) => row.worker.last_output,
+    name: 'Last Output',
+    formatter: (output, row) => gridjs.html(`<a href="/api/job/${row.cells[0].data}/logs">${output}</a>`)
+  },
+  { data: (row) => row,
+    name: 'Commands',
+    formatter: (cell, row) => gridjs.html(`
+        <div class="field has-addons" style='white-space: nowrap; display: inline-block;'>
+            <button class="button is-info" onclick="window.location.href='/ui/job/${row.cells[0].data}/full_details';">
+            <span class="icon"><i class="fa-solid fa-info"></i></span>
+            </button>
+            <button class="button is-link" onclick="window.location.href='/api/job/${row.cells[0].data}/logs';">
+            <span class="icon"><i class="fa-regular fa-file-lines"></i></span>
+            </button>
+            <button class="button is-warning is-active ${(cell.status != 'running') ? 'is-hidden': ''}" onclick="window.location.href='/api/job/${row.cells[0].data}/cancel?confirm=True&redirect=True';">
+            <span class="icon"><i class="fa-solid fa-x"></i></span>
+            </button>
+            <button class="button is-success ${(cell.status != 'completed') ? 'is-hidden': ''}" onclick="window.location.href='/api/job/${row.cells[0].data}/download_all';">
+            <span class="icon"><i class="fa-solid fa-download"></i></span>
+            <span>${cell.file_list.length}</span>
+            </button>
+            <button class="button is-danger" onclick="window.location.href='/api/job/${row.cells[0].data}/delete?confirm=True&redirect=True'">
+            <span class="icon"><i class="fa-regular fa-trash-can"></i></span>
+            </button>
+        </div>
+        `),
+    sort: false
+  }
+],
+style: {
+    table: {
+      'white-space': 'nowrap'
+    },
+    th: {
+      'vertical-align': 'middle',
+    },
+    td: {
+      'vertical-align': 'middle',
+    }
+},
+server: {
+  url: '/api/jobs',
+  then: results => results,
+},
+sort: true,
+}).render(document.getElementById('table'));