zrb 0.28.0__py3-none-any.whl → 1.0.0a1__py3-none-any.whl

zrb/runner/web_app/task_ui/partial/main.js

@@ -0,0 +1,188 @@
+window.addEventListener("load", async function () {
+    // Get current session
+    if (SESSION_NAME != "") {
+        pollSession();
+    }
+    // set maxStartDate to today
+    const tomorrow = new Date();
+    tomorrow.setDate(tomorrow.getDate() + 1);  // Move to the next day
+    tomorrow.setHours(0, 0, 0, 0);
+    const formattedTomorrow = toLocalDateInputValue(tomorrow);
+    const maxStartAtInput = document.getElementById("max-start-at-input");
+    maxStartAtInput.value = formattedTomorrow;
+    // set minStartDate to yesterday
+    const today = new Date();
+    today.setHours(0, 0, 0, 0);  // Set time to 00:00:00
+    const formattedToday = toLocalDateInputValue(today);
+    const minStartAtInput = document.getElementById("min-start-at-input");
+    minStartAtInput.value = formattedToday;
+    // Update session
+    getExistingSessions(0);
+});
+
+
+async function getExistingSessions(page) {
+    const minStartAtInput = document.getElementById("min-start-at-input");
+    const minStartAt = formatDate(minStartAtInput.value);
+    const maxStartAtInput = document.getElementById("max-start-at-input");
+    const maxStartAt = formatDate(maxStartAtInput.value);
+    console.log(minStartAt);
+    const queryString = new URLSearchParams({
+        page: page,
+        from: minStartAt,
+        to: maxStartAt,
+    }).toString();
+    try {
+        // Send the AJAX request
+        const response = await fetch(`${API_URL}list?${queryString}`, {
+            method: "GET",
+            headers: {
+                "Content-Type": "application/json"
+            },
+        });
+        const {total, data} = await response.json();
+        showExistingSession(total, data);
+        console.log("Success:", data);
+    } catch (error) {
+        console.error("Error:", error);
+    }
+}
+
+
+function toLocalDateInputValue(date) {
+  const year = date.getFullYear();
+  const month = String(date.getMonth() + 1).padStart(2, '0');  // Months are 0-indexed
+  const day = String(date.getDate()).padStart(2, '0');
+  const hours = String(date.getHours()).padStart(2, '0');
+  const minutes = String(date.getMinutes()).padStart(2, '0');
+  return `${year}-${month}-${day}T${hours}:${minutes}`;
+}
+
+
+function formatDate(dateString) {
+    const date = new Date(dateString);
+    const year = date.getFullYear();
+    const month = String(date.getMonth() + 1).padStart(2, '0');
+    const day = String(date.getDate()).padStart(2, '0');
+    const hours = String(date.getHours()).padStart(2, '0');
+    const minutes = String(date.getMinutes()).padStart(2, '0');
+    const seconds = String(date.getSeconds()).padStart(2, '0');
+    return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
+}
+
+function openDialog(event) {
+    event.preventDefault();
+    const dialog = document.getElementById("session-history-dialog")
+    dialog.showModal();
+}
+
+
+function closeDialog(event) {
+    event.preventDefault();
+    const dialog = document.getElementById("session-history-dialog")
+    dialog.close();
+}
+
+
+async function submitForm(event) {
+    // Prevent the form from submitting the traditional way
+    event.preventDefault();
+    // Select the form
+    const form = document.getElementById("submit-task-form");
+    // Initialize an empty object to hold form data
+    const formData = {};
+    // Iterate through each input in the form
+    Array.from(form.elements).forEach(element => {
+        // Only include inputs with a name attribute and ignore buttons
+        if (element.name && (element.type !== "button" && element.type !== "submit")) {
+            formData[element.name] = element.value;
+        }
+    });
+    // Convert formData to JSON
+    const jsonData = JSON.stringify(formData);
+    try {
+        // Send the AJAX request
+        const response = await fetch(API_URL, {
+            method: "POST",
+            headers: {
+                "Content-Type": "application/json"
+            },
+            body: jsonData
+        });
+        const data = await response.json();
+        console.log("Success:", data);
+        SESSION_NAME = data.session_name;
+        history.pushState(null, "", `${CURRENT_URL}${SESSION_NAME}`);
+        getExistingSessions(0);
+        await pollSession();
+    } catch (error) {
+        console.error("Error:", error);
+    }
+}
+
+
+async function pollSession() {
+    const resultTextarea = document.getElementById("result-textarea");
+    const logTextarea = document.getElementById("log-textarea");
+    const submitTaskForm = document.getElementById("submit-task-form");
+    let isFinished = false;
+    let errorCount = 0;
+    while (!isFinished) {
+        try {
+            const data = await getSession();
+            // update inputs
+            const dataInputs = data.input;
+            for (const inputName in dataInputs) {
+                const inputValue = dataInputs[inputName];
+                const input = submitTaskForm.querySelector(`[name="${inputName}"]`);
+                input.value = inputValue;
+            }
+            resultLineCount = data.final_result.split("\n").length;
+            resultTextarea.rows = resultLineCount <= 5 ? resultLineCount : 5;
+            // update text areas
+            resultTextarea.value = data.final_result;
+            logTextarea.value = data.log.join("\n");
+            logTextarea.scrollTop = logTextarea.scrollHeight;
+            // visualize history
+            visualizeHistory(data.task_status, data.finished);
+            if (data.finished) {
+                isFinished = true;
+            } else {
+                await delay(200);
+            }
+        } catch (error) {
+            console.error("Error fetching session status:", error);
+            errorCount++;
+            if (errorCount > 5) {
+                console.error("Exceeding maximum error count, quitting");
+                return;
+            }
+            continue;
+        }
+    }
+}
+
+
+async function getSession() {
+    try {
+        const response = await fetch(`${API_URL}${SESSION_NAME}`, {
+            method: "GET",
+            headers: {
+                "Content-Type": "application/json"
+            },
+        });
+        return await response.json();
+    } catch (error) {
+        console.error("Error:", error);
+    }
+}
+
+
+function rstripSlash(str) {
+    return str.replace(/\/+$/, "");  // Removes one or more trailing slashes
+}
+
+
+function delay(ms) {
+    return new Promise(resolve => setTimeout(resolve, ms));
+}

zrb/runner/web_app/task_ui/partial/show-existing-session.js

@@ -0,0 +1,82 @@
+function showExistingSession(total, data) {
+    const ul = document.getElementById("session-history-ul");
+    ul.innerHTML = '';  // Clear existing content
+    data.forEach(item => {
+        const task_status = item.task_status[item.main_task_name];
+        const task_histories = task_status.history;
+        const task_start_time = task_histories.length > 0 ? task_histories[0].time : ""
+        const li = document.createElement('li');
+        const a = document.createElement('a');
+        a.textContent = `${item.name} - ${task_start_time}`;
+        a.target = '_blank';
+        a.href = `${UI_URL}${item.name}`;
+        li.appendChild(a);
+        ul.appendChild(li);
+    }); 
+    const paginationUl = document.getElementById("session-history-pagination-ul");
+    paginationUl.innerHTML = '';  // Clear previous pagination
+
+    const totalPages = Math.ceil(total / 10);  // Calculate total pages based on page size
+    const maxPagesToShow = 5;  // Number of pages to display around the current page
+    const halfMaxPages = Math.floor(maxPagesToShow / 2);
+    
+    // Add first page and previous controls
+    if (page > 0) {
+        paginationUl.appendChild(createPageLink("⟪", 0));  // Go to first page
+        paginationUl.appendChild(createPageLink("⟨", page - 1));  // Go to previous page
+    }
+
+    let startPage = Math.max(0, page - halfMaxPages);
+    let endPage = Math.min(totalPages - 1, page + halfMaxPages);
+
+    if (page <= halfMaxPages) {
+        endPage = Math.min(totalPages - 1, maxPagesToShow - 1);
+    } else if (page + halfMaxPages >= totalPages) {
+        startPage = Math.max(0, totalPages - maxPagesToShow);
+    }
+
+    if (startPage > 1) {
+        paginationUl.appendChild(createEllipsis());
+    }
+
+    // Add page links within the calculated range
+    for (let i = startPage; i <= endPage; i++) {
+        if (i === page) {
+            const pageLi = document.createElement('li');
+            pageLi.textContent = i + 1;
+            paginationUl.append(pageLi)
+        } else {
+            paginationUl.appendChild(createPageLink(i + 1, i))
+        }
+    }
+
+    // Add ellipsis after the end page if needed
+    if (endPage < totalPages - 2) {
+        paginationUl.appendChild(createEllipsis());
+    }
+
+    // Add next and last page controls
+    if (page < totalPages - 1) {
+        paginationUl.appendChild(createPageLink("⟩", page + 1));  // Go to next page
+        paginationUl.appendChild(createPageLink("⟫", totalPages - 1));  // Go to last page
+    }    
+}
+
+function createPageLink(text, page) {
+    const li = document.createElement('li');
+    const link = document.createElement('a');
+    link.textContent = text;
+    link.href = '#';
+    link.onclick = (e) => {
+        e.preventDefault();
+        getExistingSessions(page);
+    };
+    li.appendChild(link);
+    return li;
+}
+
+function createEllipsis() {
+    const li = document.createElement('li');
+    li.textContent = '...';
+    return li;
+}

zrb/runner/web_app/task_ui/partial/visualize-history.js

@@ -0,0 +1,144 @@
+function visualizeHistory(allTaskStatus, finished) {
+    const taskNames = Object.keys(allTaskStatus);
+    const now = Date.now();
+
+    // Set up canvas context
+    const canvas = document.getElementById("history-canvas");
+    canvas.height = taskNames.length * 50 + 10;
+    const ctx = canvas.getContext("2d");
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+    ctx.fillStyle = "#EEE";
+    ctx.fillRect(0, 0, canvas.width, canvas.height);
+
+    // Calculate start and end times
+    let minDateTime = null;
+    let maxDateTime = null;
+    for (let taskName in allTaskStatus) {
+        let history = allTaskStatus[taskName].history;
+        if (history.length == 0) {
+            continue;
+        }
+        let startTime = new Date(history[0].time);
+        if (minDateTime === null || minDateTime > startTime) {
+            minDateTime = startTime;
+        }
+        let lastTime = new Date(history[history.length - 1].time);
+        if (maxDateTime === null || maxDateTime < lastTime) {
+            maxDateTime = lastTime;           
+        }
+    }
+    if (minDateTime === null || maxDateTime === null) {
+        return
+    }
+    if (!finished) {
+        maxDateTime = now;
+    }
+    if (maxDateTime - minDateTime == 0) {
+        maxDateTime.setSeconds(maxDateTime.getSeconds() + 1) 
+    }
+    // Canvas settings
+    const chartWidth = canvas.width;
+    const barHeight = 20;
+    const gap = 10;
+    const timeScale = (chartWidth - 200) / (maxDateTime - minDateTime);
+
+    // Draw labels and bars
+    taskNames.forEach((taskName, index) => {
+        const taskHistories = allTaskStatus[taskName].history;
+        if (taskHistories.length == 0) {
+            return
+        }
+        // Get last status
+        const finalStatus = getFinalTaskStatus(allTaskStatus[taskName]);
+        const startDateTime = new Date(taskHistories[0].time);
+        const endDateTime = getTaskEndDateTime(allTaskStatus[taskName], now);
+        const startX = 100 + (startDateTime - minDateTime) * timeScale;
+        const barWidth = (endDateTime - startDateTime) * timeScale;
+        const startY = index * (barHeight + gap + 20) + 5;
+
+        // Draw task label
+        ctx.fillStyle = "#000";
+        ctx.font = "12px Arial";
+        ctx.textAlign = "right";
+        ctx.fillText(taskName, 90, startY + barHeight / 1.5);
+
+        // Draw task bar
+        ctx.fillStyle = getFinalColor(finalStatus);
+        ctx.fillRect(startX, startY, barWidth, barHeight);
+
+        ctx.fillStyle = "#000";
+        ctx.textAlign = "left";
+        // Combine captions if time overlap
+        let labels = {};
+        for (let taskHistory of taskHistories) {
+            let status = taskHistory.status;
+            let dateTime = new Date(taskHistory.time);
+            let statusStartX = 100 + (dateTime - minDateTime) * timeScale;
+            if (!(statusStartX in labels)) {
+                labels[statusStartX] = {dateTime: dateTime, caption: status};
+            } else {
+                labels[statusStartX].caption += `, ${status}`
+            }
+        }
+        // Draw start and end time below the bar
+        for (let statusStartX in labels) {
+            const {dateTime, caption} = labels[statusStartX];
+            const [dateStr, timeStr] = dateTime.toISOString().split("T");
+            ctx.font = "10px Arial";
+            ctx.fillText(caption, statusStartX, startY + 10);
+            ctx.font = "8px Arial";
+            ctx.fillText(dateStr, statusStartX, startY + barHeight + 10);
+            ctx.fillText(timeStr, statusStartX, startY + barHeight + 20);
+        }
+    });
+}
+
+function getTaskEndDateTime(taskStatus, now) {
+    if (taskStatus.is_completed || taskStatus.is_terminated || taskStatus.is_skipped || taskStatus.is_permanently_failed) {
+        histories = taskStatus.history;
+        if (histories.length > 0) {
+            return new Date(histories[histories.length - 1].time);
+        }
+    }
+    return now;
+}
+
+
+function getFinalColor(finalStatus) {
+    switch(finalStatus) {
+        case "started":
+            return "#3498db";
+        case "ready":
+            return "#f39c12";
+        case "completed":
+            return "#2ecc71";
+        case "skipped":
+            return "#95a5a6";
+        case "failed":
+            return "#e74c3c";
+        case "permanently-failed":
+            return "#c0392b";
+        case "terminated":
+            return "#ffffff";
+        default:
+            return "#ffffff";
+    } 
+}
+
+
+function getFinalTaskStatus(taskStatus) {
+    if (taskStatus.is_completed) {
+        return "completed";
+    }
+    if (taskStatus.is_terminated) {
+        return "terminated"
+    }
+    if (taskStatus.is_permanently_failed) {
+        return "permanently-failed"
+    }
+    const histories = taskStatus.history;
+    if (histories.length > 0) {
+        return histories[histories.length - 1].status;
+    }
+    return "";
+}

zrb/runner/web_app/task_ui/view.html

@@ -0,0 +1,85 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta name="color-scheme" content="light dark">
+    <link rel="stylesheet" href="/pico.min.css">
+    <link rel="icon" href="/favicon-32x32.png" sizes="32x32" type="image/png">
+    <title>Zrb</title>
+  </head>
+  <body>
+
+    <header class="container">
+      <hgroup>
+        <h1>{root_name}</h1>
+        <p>{root_description}</p>
+        <nav>
+          <ul>
+            <li><a href="/">🏠 Home</a></li>
+            <li><a href="{parent_url}">🔙 Parent</a></li>
+            <li><a href="{ui_url}">🆕 New Session</a></li>
+            <li><a href="#" onclick="openDialog(event)">📂 Existing Session</a></li>
+          </ul>
+        </nav>
+      </hgroup>
+    </header>
+
+    <dialog id="session-history-dialog">
+      <article>
+        <header>
+          <button aria-label="Close" rel="prev" onclick="closeDialog(event)"></button>
+          <p>
+            <strong>📂 Existing Session</strong>
+          </p>
+        </header>
+        <main>
+          <form>
+            <fieldset class="grid">
+              <input type="datetime-local" id="min-start-at-input" placeholder="Minimum Start Time" aria-label="Minimum Start Time" />
+              <input type="datetime-local" id="max-start-at-input" placeholder="Maximum Start Time" aria-label="Maximum Start Time" />
+            </fieldset>
+          </form>
+          <ul id="session-history-ul" style="font-family:monospace;"></ul>
+        </main>
+        <footer>
+          <nav>
+            <ul id="session-history-pagination-ul"></ul>
+          </nav>
+        </footer>
+      </article>
+    </dialog>
+
+    <main class="container">
+      <h3>{name}</h3>
+      <p>{description}</p>
+      <canvas id="history-canvas" height="0" width="1000" style="width: 100%;"></canvas>
+      <hr />
+      <form id="submit-task-form" onsubmit="submitForm(event)">
+        {task_inputs}
+        <button>🚀 Run</button>
+      </form>
+      <hr />
+      <label>
+        Result
+        <textarea id="result-textarea" rows="1" readonly style="font-family:monospace;">
+        </textarea>
+      </label>
+      <label>
+        Log
+        <textarea id="log-textarea" rows="5" readonly style="font-family:monospace;">
+        </textarea>
+      </label>
+    </main>
+
+  </body>
+  <script>
+    const CURRENT_URL = '{url}';
+    const API_URL = '{api_url}';
+    const UI_URL = `{ui_url}`;
+    let SESSION_NAME = '{session_name}';
+    {main_script} 
+    {show_existing_session_script}
+    {visualize_history_script}
+  </script>
+</html>