goosebit 0.1.0__py3-none-any.whl → 0.1.2__py3-none-any.whl

goosebit/ui/static/js/rollouts.js

@@ -0,0 +1,198 @@
+let dataTable;
+
+document.addEventListener("DOMContentLoaded", async () => {
+    dataTable = new DataTable("#rollout-table", {
+        responsive: true,
+        paging: true,
+        processing: true,
+        serverSide: true,
+        order: [1, "desc"],
+        scrollCollapse: true,
+        scroller: true,
+        scrollY: "65vh",
+        stateSave: true,
+        stateLoadParams: (settings, data) => {
+            // if save state is older than last breaking code change...
+            if (data.time <= 1722413708000) {
+                // ... delete it
+                for (const key of Object.keys(data)) {
+                    delete data[key];
+                }
+            }
+        },
+        select: true,
+        rowId: "id",
+        ajax: {
+            url: "/api/rollouts/all",
+            contentType: "application/json",
+        },
+        initComplete: () => {
+            updateBtnState();
+        },
+        columnDefs: [
+            {
+                targets: [1, 2, 3, 4],
+                searchable: true,
+                orderable: true,
+            },
+            {
+                targets: "_all",
+                searchable: false,
+                orderable: false,
+            },
+        ],
+        columns: [
+            { data: "id", visible: false },
+            { data: "created_at", render: (data) => new Date(data).toLocaleString() },
+            { data: "name" },
+            { data: "feed" },
+            { data: "flavor" },
+            { data: "fw_file" },
+            { data: "fw_version" },
+            {
+                data: "paused",
+                render: (data, type) => {
+                    if (type === "display" || type === "filter") {
+                        const color = data ? "danger" : "muted";
+                        return `
+                        <div class="text-${color}">
+                            ●
+                        </div>
+                        `;
+                    }
+                    return data;
+                },
+            },
+            { data: "success_count" },
+            { data: "failure_count" },
+        ],
+        layout: {
+            top1Start: {
+                buttons: [],
+            },
+            bottom1Start: {
+                buttons: [
+                    {
+                        text: '<i class="bi bi-plus" ></i>',
+                        action: () => {
+                            new bootstrap.Modal("#rollout-create-modal").show();
+                        },
+                        className: "buttons-create",
+                        titleAttr: "Create Rollout",
+                    },
+                    {
+                        text: '<i class="bi bi-play-fill" ></i>',
+                        action: (e, dt) => {
+                            const selectedRollouts = dt
+                                .rows({ selected: true })
+                                .data()
+                                .toArray()
+                                .map((d) => d.id);
+                            pauseRollouts(selectedRollouts, false);
+                        },
+                        className: "buttons-resume",
+                        titleAttr: "Resume Rollouts",
+                    },
+                    {
+                        text: '<i class="bi bi-pause-fill" ></i>',
+                        action: (e, dt) => {
+                            const selectedRollouts = dt
+                                .rows({ selected: true })
+                                .data()
+                                .toArray()
+                                .map((d) => d.id);
+                            pauseRollouts(selectedRollouts, true);
+                        },
+                        className: "buttons-pause",
+                        titleAttr: "Pause Rollouts",
+                    },
+                    {
+                        text: '<i class="bi bi-trash" ></i>',
+                        action: (e, dt) => {
+                            const selectedRollouts = dt
+                                .rows({ selected: true })
+                                .data()
+                                .toArray()
+                                .map((d) => d.id);
+                            deleteRollouts(selectedRollouts);
+                        },
+                        className: "buttons-delete",
+                        titleAttr: "Delete Rollouts",
+                    },
+                ],
+            },
+        },
+    });
+
+    dataTable
+        .on("select", () => {
+            updateBtnState();
+        })
+        .on("deselect", () => {
+            updateBtnState();
+        });
+
+    updateRolloutList();
+
+    await updateFirmwareSelection();
+});
+
+function updateBtnState() {
+    if (dataTable.rows({ selected: true }).any()) {
+        document.querySelector("button.buttons-delete").classList.remove("disabled");
+    } else {
+        document.querySelector("button.buttons-delete").classList.add("disabled");
+    }
+
+    if (dataTable.rows((_, data) => data.paused, { selected: true }).any()) {
+        document.querySelector("button.buttons-resume").classList.remove("disabled");
+    } else {
+        document.querySelector("button.buttons-resume").classList.add("disabled");
+    }
+
+    if (dataTable.rows((_, data) => !data.paused, { selected: true }).any()) {
+        document.querySelector("button.buttons-pause").classList.remove("disabled");
+    } else {
+        document.querySelector("button.buttons-pause").classList.add("disabled");
+    }
+}
+
+async function createRollout() {
+    const name = document.getElementById("rollout-selected-name").value;
+    const feed = document.getElementById("rollout-selected-feed").value;
+    const flavor = document.getElementById("rollout-selected-flavor").value;
+    const firmware_id = document.getElementById("selected-fw").value;
+
+    try {
+        await post("/api/rollouts", { name, feed, flavor, firmware_id });
+    } catch (error) {
+        console.error("Rollout creation failed:", error);
+    }
+
+    setTimeout(updateRolloutList, 50);
+}
+
+function updateRolloutList() {
+    dataTable.ajax.reload();
+}
+
+async function deleteRollouts(ids) {
+    try {
+        await post("/api/rollouts/delete", { ids });
+    } catch (error) {
+        console.error("Rollouts deletion failed:", error);
+    }
+
+    updateBtnState();
+    setTimeout(updateRolloutList, 50);
+}
+
+async function pauseRollouts(ids, paused) {
+    try {
+        await post("/api/rollouts/update", { ids, paused });
+    } catch (error) {
+        console.error(`Rollouts ${paused ? "pausing" : "unpausing"} failed:`, error);
+    }
+
+    setTimeout(updateRolloutList, 50);
+}

goosebit/ui/static/js/util.js

@@ -0,0 +1,66 @@
+function secondsToRecentDate(t) {
+    if (t == null) {
+        return null;
+    }
+    const time = Number(t);
+    const d = Math.floor(time / 86400);
+    const h = Math.floor((time % 86400) / 3600);
+    const m = Math.floor(((time % 86400) % 3600) / 60);
+    const s = Math.floor(((time % 86400) % 3600) % 60);
+
+    if (d > 0) {
+        return d + (d === 1 ? " day" : " days");
+    }
+    if (h > 0) {
+        return h + (h === 1 ? " hour" : " hours");
+    }
+    if (m > 0) {
+        return m + (m === 1 ? " minute" : " minutes");
+    }
+    return s + (s === 1 ? " second" : " seconds");
+}
+
+async function updateFirmwareSelection(addSpecialMode = false) {
+    try {
+        const response = await fetch("/api/firmware/all");
+        if (!response.ok) {
+            console.error("Retrieving firmwares failed.");
+            return;
+        }
+        const data = (await response.json()).data;
+        const selectElem = document.getElementById("selected-fw");
+
+        if (addSpecialMode) {
+            let optionElem = document.createElement("option");
+            optionElem.value = "rollout";
+            optionElem.textContent = "Rollout";
+            selectElem.appendChild(optionElem);
+
+            optionElem = document.createElement("option");
+            optionElem.value = "latest";
+            optionElem.textContent = "Latest";
+            selectElem.appendChild(optionElem);
+        }
+
+        for (const item of data) {
+            const optionElem = document.createElement("option");
+            optionElem.value = item.id;
+            optionElem.textContent = item.name;
+            selectElem.appendChild(optionElem);
+        }
+    } catch (error) {
+        console.error("Failed to fetch device data:", error);
+    }
+}
+
+async function post(url, object) {
+    const response = await fetch(url, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify(object),
+    });
+
+    if (!response.ok) {
+        throw new Error(`POST ${url} failed for ${JSON.stringify(object)}`);
+    }
+}

goosebit/ui/templates/devices.html

@@ -1,43 +1,28 @@
-{% extends "nav.html" %}
-{% block content %}
+{% extends "nav.html" %} {% block content %}
 <div class="container-fluid">
     <div class="row p-2 d-flex justify-content-center">
         <div class="col">
             <table id="device-table" class="table table-hover">
                 <thead>
                     <tr>
-                        <th>
-                            Name
-                        </th>
-                        <th>
-                            Up
-                        </th>
-                        <th>
-                            UUID
-                        </th>
-                        <th>
-                            Firmware
-                        </th>
-                        <th>
-                            Force Update
-                        </th>
-                        <th>
-                            Update File
-                        </th>
-                        <th>
-                            Last IP
-                        </th>
-                        <th>
-                            Last Seen
-                        </th>
-                        <th>
-                            State
-                        </th>
+                        <th>Up</th>
+                        <th>UUID</th>
+                        <th>Name</th>
+                        <th>Model</th>
+                        <th>Revision</th>
+                        <th>Feed</th>
+                        <th>Flavor</th>
+                        <th>Installed Firmware</th>
+                        <th>Target Firmware</th>
+                        <th>Update Mode</th>
+                        <th>State</th>
+                        <th>Force Update</th>
+                        <th>Progress</th>
+                        <th>Last IP</th>
+                        <th>Last Seen</th>
                     </tr>
                 </thead>
-                <tbody id="devices-list">
-
-                </tbody>
+                <tbody id="devices-list"></tbody>
             </table>
         </div>
     </div>
@@ -47,16 +32,42 @@
         <div class="modal-content">
             <div class="modal-header">
                 <h5 class="modal-title">Configure Devices</h5>
-            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+                <button
+                    type="button"
+                    class="btn-close"
+                    data-bs-dismiss="modal"
+                    aria-label="Close"
+                ></button>
             </div>
             <div class="modal-body">
-                <select class="form-select" id="device-selected-fw">
-
-                </select>
+                <input
+                    id="rollout-selected-feed"
+                    class="form-control mb-3"
+                    placeholder="Feed"
+                />
+                <input
+                    id="rollout-selected-flavor"
+                    class="form-control mb-3"
+                    placeholder="Flavor"
+                />
+                <select class="form-select" id="selected-fw"></select>
             </div>
             <div class="modal-footer">
-                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
-                <button type="button" class="btn btn-primary" data-bs-dismiss="modal" onclick="updateDeviceConfig()">Save changes</button>
+                <button
+                    type="button"
+                    class="btn btn-secondary"
+                    data-bs-dismiss="modal"
+                >
+                    Close
+                </button>
+                <button
+                    type="button"
+                    class="btn btn-outline-light"
+                    data-bs-dismiss="modal"
+                    onclick="updateDeviceConfig()"
+                >
+                    Save changes
+                </button>
             </div>
         </div>
     </div>
@@ -66,14 +77,36 @@
         <div class="modal-content">
             <div class="modal-header">
                 <h5 class="modal-title">Rename Device</h5>
-            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+                <button
+                    type="button"
+                    class="btn-close"
+                    data-bs-dismiss="modal"
+                    aria-label="Close"
+                ></button>
             </div>
             <div class="modal-body">
-                <input id="device-selected-name" class="form-control" placeholder="Name"/>
+                <input
+                    id="device-selected-name"
+                    class="form-control"
+                    placeholder="Name"
+                />
             </div>
             <div class="modal-footer">
-                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
-                <button type="button" class="btn btn-primary" data-bs-dismiss="modal" onclick="updateDeviceName()">Save changes</button>
+                <button
+                    type="button"
+                    class="btn btn-secondary"
+                    data-bs-dismiss="modal"
+                >
+                    Close
+                </button>
+                <button
+                    type="button"
+                    class="btn btn-outline-light"
+                    data-bs-dismiss="modal"
+                    onclick="updateDeviceName()"
+                >
+                    Save changes
+                </button>
             </div>
         </div>
     </div>

goosebit/ui/templates/firmware.html

@@ -1,47 +1,163 @@
-{% extends "nav.html" %}
-{% block content %}
+{% extends "nav.html" %} {% block content %}
 <div class="container-fluid">
     <div class="row p-2 pt-4 g-4 d-flex justify-content-center">
         {% if "firmware.write" in request.user.permissions %}
-        <div class="col col-12 col-lg-6">
-            <div class="card border rounded">
-                <div class="card-header">
-                    <h3>Upload SWUpdate File</h3>
-                </div>
-                <div class="card-body">
-                    <form id="upload-form">
-                        <div class="row g-3 row-cols-1">
-                            <div class="col">
-                                <input class="form-control" type="file" accept=".swu" id="file-upload" name="file" />
-                            </div>
-                            <div class="col">
-                                <input class="btn btn-primary w-100" id="file-upload-submit" type="submit" value="Upload" />
-                            </div>
-                            <h3>Upload Progress</h3>
-                            <div class="col">
-                                <div class="progress w-100" style=" height: 40px;" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
-                                    <div class="progress-bar progress-bar-striped progress-bar-animated" id="upload-progress" style="width: 0%;">0%</div>
-                                </div>
-                            </div>
-                        </div>
-                    </form>
-                </div>
-            </div>
+        <div class="col col-12">
+            <button
+                type="button"
+                class="btn btn-lg btn-outline-light w-100"
+                data-bs-toggle="modal"
+                data-bs-target="#upload-modal"
+            >
+                Upload
+            </button>
         </div>
         {% endif %}
-        <div class="col-12 col-lg-6">
-            <div class="card border rounded">
-                <div class="card-header">
-                <h3>Firmware</h3>
-                </div>
-                <div class="card-body p-3">
-                    <ul class="list-group" id="firmware-list">
+        <div class="col">
+            <table id="firmware-table" class="table table-hover">
+                <thead>
+                    <tr>
+                        <th>ID</th>
+                        <th>Name</th>
+                        <th>Version</th>
+                        <th>Size</th>
+                    </tr>
+                </thead>
+                <tbody id="firmware-list"></tbody>
+            </table>
+        </div>
+    </div>
+</div>
 
-                    </ul>
+{% if "firmware.write" in request.user.permissions %}
+<div class="modal modal-lg fade" id="upload-modal">
+    <div class="modal-dialog modal-dialog-centered modal-xl">
+        <div class="modal-content">
+            <div class="modal-header">
+                <ul
+                    class="nav nav-underline nav-justified w-100"
+                    role="tablist"
+                >
+                    <li class="nav-item">
+                        <button
+                            class="nav-link active"
+                            aria-current="page"
+                            id="upload-tab"
+                            data-bs-toggle="tab"
+                            data-bs-target="#upload-tab-content"
+                            type="button"
+                            role="tab"
+                        >
+                            Upload File
+                        </button>
+                    </li>
+                    <li class="nav-item">
+                        <button
+                            class="nav-link"
+                            id="url-tab"
+                            data-bs-toggle="tab"
+                            data-bs-target="#url-tab-content"
+                            type="button"
+                            role="tab"
+                        >
+                            Remote URL
+                        </button>
+                    </li>
+                </ul>
+            </div>
+            <div class="tab-content">
+                <div class="tab-pane active" id="upload-tab-content">
+                    <div class="modal-body">
+                        <form id="upload-form">
+                            <div class="row g-3 row-cols-1">
+                                <div id="upload-alerts"></div>
+                                <div class="col">
+                                    <input
+                                        class="form-control"
+                                        type="file"
+                                        accept=".swu"
+                                        id="file-upload"
+                                        name="file"
+                                    />
+                                </div>
+                                <div class="col">
+                                    <input
+                                        class="btn btn-outline-light w-100"
+                                        id="file-upload-submit"
+                                        type="submit"
+                                        value="Upload"
+                                    />
+                                    <div
+                                        class="progress border border-light bg-dark d-none"
+                                        style="height: 36px"
+                                        role="progressbar"
+                                        aria-valuenow="0"
+                                        aria-valuemin="0"
+                                        aria-valuemax="100"
+                                    >
+                                        <div
+                                            class="progress-bar progress-bar-striped bg-success progress-bar-animated"
+                                            id="upload-progress"
+                                            style="width: 0%"
+                                        >
+                                            0%
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </form>
+                    </div>
+                </div>
+                <div class="tab-pane" id="url-tab-content">
+                    <div class="modal-body">
+                        <form id="url-form">
+                            <div class="row g-3 row-cols-1">
+                                <div id="url-alerts"></div>
+                                <div class="col">
+                                    <div class="input-group">
+                                        <span class="input-group-text"
+                                            >File URL</span
+                                        >
+                                        <input
+                                            class="form-control"
+                                            type="url"
+                                            id="file-url"
+                                        />
+                                    </div>
+                                </div>
+                                <div class="col">
+                                    <input
+                                        class="btn btn-outline-light w-100"
+                                        id="url-submit"
+                                        type="submit"
+                                        value="Upload"
+                                    />
+                                    <div
+                                        class="progress border border-light bg-dark d-none"
+                                        style="height: 36px"
+                                        role="progressbar"
+                                        aria-valuenow="0"
+                                        aria-valuemin="0"
+                                        aria-valuemax="100"
+                                    >
+                                        <div
+                                            class="progress-bar progress-bar-striped bg-success progress-bar-animated"
+                                            id="url-progress"
+                                            style="width: 0%"
+                                        >
+                                            0%
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </form>
+                    </div>
                 </div>
             </div>
         </div>
     </div>
 </div>
+{% endif %}
+<script src="{{ url_for('static', path='js/util.js') }}"></script>
 <script src="{{ url_for('static', path='js/firmware.js') }}"></script>
 {% endblock content %}

goosebit/ui/templates/index.html

@@ -1,34 +1,20 @@
-{% extends "nav.html" %}
-{% block content %}
+{% extends "nav.html" %} {% block content %}
 <div class="container-fluid">
     <div class="row p-2 d-flex justify-content-center">
         <div class="col">
             <table id="device-table" class="table table-hover">
                 <thead>
                     <tr>
-                        <th>
-                            Name
-                        </th>
-                        <th>
-                            Up
-                        </th>
-                        <th>
-                            UUID
-                        </th>
-                        <th>
-                            Firmware
-                        </th>
-                        <th>
-                            Last IP
-                        </th>
-                        <th>
-                            Last Seen
-                        </th>
+                        <th>Name</th>
+                        <th>Up</th>
+                        <th>UUID</th>
+                        <th>Firmware</th>
+                        <th>Progress</th>
+                        <th>Last IP</th>
+                        <th>Last Seen</th>
                     </tr>
                 </thead>
-                <tbody id="devices-list">
-
-                </tbody>
+                <tbody id="devices-list"></tbody>
             </table>
         </div>
     </div>