Use new datatable column handling description for rollouts

UpstreamDataInc · Dec 3, 2024 · 6aa1677 · 6aa1677
1 parent 8600217
commit 6aa1677
Show file tree

Hide file tree

Showing 5 changed files with 66 additions and 44 deletions.
diff --git a/goosebit/ui/bff/common/columns.py b/goosebit/ui/bff/common/columns.py
@@ -22,3 +22,15 @@ class DeviceColumns:
     last_ip = DTColumnDescription(title="Last IP", data="last_ip")
     polling = DTColumnDescription(title="Polling", data="polling")
     last_seen = DTColumnDescription(title="Last Seen", data="last_seen")
+
+
+class RolloutColumns:
+    id = DTColumnDescription(title="ID", data="id", visible=False)
+    created_at = DTColumnDescription(title="Created", data="created_at", name="created_at", orderable=True)
+    name = DTColumnDescription(title="Name", data="name", name="name", searchable=True, orderable=True)
+    feed = DTColumnDescription(title="Feed", data="feed", name="feed", searchable=True, orderable=True)
+    sw_file = DTColumnDescription(title="Software File", data="sw_file", name="sw_file")
+    sw_version = DTColumnDescription(title="Software Version", data="sw_version", name="sw_version")
+    paused = DTColumnDescription(title="Paused", name="paused", data="paused")
+    success_count = DTColumnDescription(title="Success Count", data="success_count", name="success_count")
+    failure_count = DTColumnDescription(title="Failure Count", data="failure_count", name="failure_count")
diff --git a/goosebit/ui/bff/common/responses.py b/goosebit/ui/bff/common/responses.py
@@ -10,6 +10,7 @@ class DTColumnDescription(BaseModel):
 
     searchable: bool | None = None
     orderable: bool | None = None
+    visible: bool | None = None
 
 
 class DTColumns(BaseModel):

diff --git a/goosebit/ui/bff/rollouts/routes.py b/goosebit/ui/bff/rollouts/routes.py
@@ -9,6 +9,8 @@
 from goosebit.ui.bff.common.requests import DataTableRequest
 from goosebit.ui.bff.common.util import parse_datatables_query
 
+from ..common.columns import RolloutColumns
+from ..common.responses import DTColumns
 from .responses import BFFRolloutsResponse
 
 router = APIRouter(prefix="/rollouts")
@@ -52,3 +54,28 @@ def search_filter(search_value):
     dependencies=[Security(validate_user_permissions, scopes=["rollout.delete"])],
     name="bff_rollouts_delete",
 )
+
+
+@router.get(
+    "/columns",
+    dependencies=[Security(validate_user_permissions, scopes=["rollout.read"])],
+    response_model_exclude_none=True,
+)
+async def devices_get_columns() -> DTColumns:
+    columns = list(
+        filter(
+            None,
+            [
+                RolloutColumns.id,
+                RolloutColumns.created_at,
+                RolloutColumns.name,
+                RolloutColumns.feed,
+                RolloutColumns.sw_file,
+                RolloutColumns.sw_version,
+                RolloutColumns.paused,
+                RolloutColumns.success_count,
+                RolloutColumns.failure_count,
+            ],
+        )
+    )
+    return DTColumns(columns=columns)
diff --git a/goosebit/ui/static/js/rollouts.js b/goosebit/ui/static/js/rollouts.js
@@ -1,6 +1,30 @@
 let dataTable;
 
+const renderFunctions = {
+    paused: (data, type) => {
+        if (type === "display") {
+            const color = data ? "danger" : "muted";
+            return `
+            <div class="text-${color}">
+                ●
+            </div>
+            `;
+        }
+        return data;
+    },
+    created_at: (data, type) => new Date(data).toLocaleString(),
+};
+
 document.addEventListener("DOMContentLoaded", async () => {
+    const columnConfig = await get_request("/ui/bff/rollouts/columns");
+    for (const col in columnConfig.columns) {
+        const colDesc = columnConfig.columns[col];
+        const colName = colDesc.data;
+        if (renderFunctions[colName]) {
+            columnConfig.columns[col].render = renderFunctions[colName];
+        }
+    }
+
     dataTable = new DataTable("#rollout-table", {
         responsive: true,
         paging: true,
@@ -32,37 +56,10 @@ document.addEventListener("DOMContentLoaded", async () => {
                 targets: "_all",
                 searchable: false,
                 orderable: false,
+                render: (data) => data || "-",
             },
         ],
-        columns: [
-            { data: "id", visible: false },
-            {
-                data: "created_at",
-                name: "created_at",
-                orderable: true,
-                render: (data) => new Date(data).toLocaleString(),
-            },
-            { data: "name", name: "name", searchable: true, orderable: true },
-            { data: "feed", name: "feed", searchable: true, orderable: true },
-            { data: "sw_file" },
-            { data: "sw_version" },
-            {
-                data: "paused",
-                render: (data, type) => {
-                    if (type === "display") {
-                        const color = data ? "danger" : "muted";
-                        return `
-                        <div class="text-${color}">
-                            ●
-                        </div>
-                        `;
-                    }
-                    return data;
-                },
-            },
-            { data: "success_count" },
-            { data: "failure_count" },
-        ],
+        columns: columnConfig.columns,
         layout: {
             top1Start: {
                 buttons: [],

diff --git a/goosebit/ui/templates/rollouts.html.jinja b/goosebit/ui/templates/rollouts.html.jinja
@@ -4,21 +4,6 @@
         <div class="row p-2 d-flex justify-content-center">
             <div class="col">
                 <table id="rollout-table" class="table table-hover">
-                    <thead>
-                        <tr>
-                            <th>Id</th>
-                            <th>Created</th>
-                            <th>Name</th>
-                            <th>Feed</th>
-                            <th>Software File</th>
-                            <th>Software Version</th>
-                            <th>Paused</th>
-                            <th>Success Count</th>
-                            <th>Failure Count</th>
-                        </tr>
-                    </thead>
-                    <tbody id="rollouts-list">
-                    </tbody>
                 </table>
             </div>
         </div>