rclone_gui/webgui/web/assets/js/views/jobs.js

// views/jobs.js — submit sync/copy/move jobs and poll their progress.
// Job src/dst metadata is persisted to localStorage (via state.rememberJob)
// so the table can show what each job is doing even after a page reload.

import { post, postAsync } from "../rc.js";
import {
  toast,
  rememberJob,
  getJobMeta,
  formatBytes,
  formatSpeed,
  formatDuration,
} from "../state.js";

let pollTimer = null;

export async function renderJobs() {
  const app = document.getElementById("app");
  app.innerHTML = `
    <div class="section-head">
      <div>
        <h2>Jobs</h2>
        <p class="subtitle">Running and recently completed transfers.</p>
      </div>
      <a class="btn btn-primary btn-sm" href="#/jobs/new">New Job</a>
    </div>
    <div id="jobs-card" class="card-outline">
      <p class="empty">Loading jobs…</p>
    </div>
  `;

  await refreshJobs();
  startPolling();
}

export async function renderNewJob() {
  const app = document.getElementById("app");

  // Pull remotes for the dropdowns
  let remotes = [];
  try {
    const res = await post("config/listremotes");
    remotes = (res && res.remotes) || [];
  } catch (e) {
    toast(`Couldn’t load remotes: ${e.message}`, "error");
  }

  const remoteOpts = remotes
    .map((r) => `<option value="${escapeHtml(r)}:">${escapeHtml(r)}</option>`)
    .join("");

  app.innerHTML = `
    <div class="section-head">
      <div>
        <h2>New Job</h2>
        <p class="subtitle">Copy, sync, or move between remotes.</p>
      </div>
      <a class="btn btn-secondary btn-sm" href="#/jobs">Cancel</a>
    </div>
    <form id="new-job-form" class="card-outline" style="display:grid;gap:16px;max-width:640px">
      <div class="field">
        <label>Action</label>
        <select name="action" class="select">
          <option value="copy">copy (mirror src → dst, keep both)</option>
          <option value="sync">sync (mirror src → dst, delete extras on dst)</option>
          <option value="move">move (mirror src → dst, delete src after)</option>
        </select>
      </div>
      <div class="form-grid">
        <div class="field">
          <label>Source remote</label>
          <select name="srcRemote" class="select">
            ${remoteOpts || '<option value="">(no remotes)</option>'}
          </select>
        </div>
        <div class="field">
          <label>Source path (optional)</label>
          <input class="input" name="srcPath" placeholder="folder/subfolder" autocomplete="off">
        </div>
        <div class="field">
          <label>Destination remote</label>
          <select name="dstRemote" class="select">
            ${remoteOpts || '<option value="">(no remotes)</option>'}
          </select>
        </div>
        <div class="field">
          <label>Destination path (optional)</label>
          <input class="input" name="dstPath" placeholder="folder/subfolder" autocomplete="off">
        </div>
      </div>
      <div class="toolbar">
        <button type="submit" class="btn btn-primary">Start Job</button>
      </div>
    </form>
  `;

  // Prefill first remote in both selectors for convenience
  if (remotes.length > 0) {
    app.querySelector('select[name="srcRemote"]').value = `${remotes[0]}:`;
    app.querySelector('select[name="dstRemote"]').value = `${remotes[0]}:`;
  }

  const form = document.getElementById("new-job-form");
  form.addEventListener("submit", async (e) => {
    e.preventDefault();
    const action = form.elements.action.value;
    const srcRemote = form.elements.srcRemote.value;
    const dstRemote = form.elements.dstRemote.value;
    const srcPath = form.elements.srcPath.value.trim().replace(/^\/+|\/+$/g, "");
    const dstPath = form.elements.dstPath.value.trim().replace(/^\/+|\/+$/g, "");
    if (!srcRemote || !dstRemote) {
      toast("Pick source and destination remotes", "error");
      return;
    }
    const src = srcPath ? `${srcRemote}${srcPath}` : srcRemote;
    const dst = dstPath ? `${dstRemote}${dstPath}` : dstRemote;
    try {
      const body = { srcFs: src, dstFs: dst };
      if (action === "move") body.deleteEmptySrcDirs = true;
      const res = await postAsync(`sync/${action}`, body);
      const jobid = res && res.jobid;
      if (jobid != null) {
        rememberJob(jobid, { action, src, dst });
      }
      toast(`Started ${action} job #${jobid}`, "success");
      location.hash = "#/jobs";
    } catch (e) {
      toast(`Job start failed: ${e.message}`, "error");
    }
  });
}

async function refreshJobs() {
  const card = document.getElementById("jobs-card");
  if (!card) return; // user navigated away

  let jobIds = [];
  try {
    const list = await post("job/list");
    const running = (list && list.jobids) || [];
    const finished = (list && list.finishedIds) || [];
    // Show both running and recently-finished. Sort happens in render.
    jobIds = [...new Set([...running, ...finished])];
  } catch (e) {
    card.innerHTML = `<div class="empty"><h3>Couldn’t load jobs</h3><p>${escapeHtml(e.message)}</p></div>`;
    return;
  }

  if (jobIds.length === 0) {
    card.innerHTML = `
      <div class="empty">
        <h3>No jobs yet</h3>
        <p>Use <a href="#/jobs/new">New Job</a> to start a copy, sync, or move.</p>
      </div>
    `;
    return;
  }

  // Fetch each job's status in parallel
  const statuses = await Promise.all(
    jobIds.map((id) =>
      post("job/status", { jobid: id }).catch((e) => ({
        jobid: id,
        error: e.message,
        finished: true,
      })),
    ),
  );

  card.innerHTML = renderJobTable(statuses);
  card.querySelectorAll("[data-stop]").forEach((btn) => {
    btn.addEventListener("click", () => onStop(parseInt(btn.dataset.stop, 10)));
  });
}

function renderJobTable(statuses) {
  // Newest jobid first
  statuses.sort((a, b) => (b.jobid ?? 0) - (a.jobid ?? 0));

  const rows = statuses.map(renderJobRow).join("");

  return `
    <table class="table">
      <thead>
        <tr>
          <th>#</th>
          <th>Job</th>
          <th>Status</th>
          <th class="col-num">Progress</th>
          <th class="col-num">Speed</th>
          <th class="col-num">ETA</th>
          <th class="col-num">Files</th>
          <th class="col-num">Errors</th>
          <th class="col-num">Action</th>
        </tr>
      </thead>
      <tbody>
        ${rows}
      </tbody>
    </table>
  `;
}

function renderJobRow(s) {
  const p = s.progress || {};
  const id = s.jobid;
  const finished = s.finished;
  const success = s.success;
  const errored = !!s.error;

  let badge;
  if (!finished) {
    badge = `<span class="badge">running</span>`;
  } else if (errored || (!success && errored)) {
    badge = `<span class="badge badge-error">failed</span>`;
  } else if (success) {
    badge = `<span class="badge badge-success">done</span>`;
  } else {
    badge = `<span class="badge badge-warning">finished</span>`;
  }

  const meta = getJobMeta(id);
  const jobCell = meta
    ? `
      <div class="job-cell">
        <span class="job-action">${escapeHtml(meta.action)}</span>
        <span class="job-paths">
          <code>${escapeHtml(meta.src)}</code>
          <span class="arrow">→</span>
          <code>${escapeHtml(meta.dst)}</code>
        </span>
      </div>`
    : `<span class="col-mono" style="color:var(--color-muted-soft)">— submitted via CLI —</span>`;

  const pct = p && p.totalBytes > 0 ? Math.min(100, (p.bytes / p.totalBytes) * 100) : 0;
  const progress = `
    <div style="display:flex;flex-direction:column;gap:4px;min-width:120px">
      <div class="progress"><span style="width:${pct.toFixed(1)}%"></span></div>
      <span class="col-mono" style="font-size:11px;color:var(--color-muted)">
        ${formatBytes(p.bytes)} / ${formatBytes(p.totalBytes)}
      </span>
    </div>
  `;

  const stopBtn = !finished
    ? `<button class="btn btn-danger btn-sm" data-stop="${id}">Stop</button>`
    : "";

  return `
    <tr>
      <td class="col-mono">${id}</td>
      <td>${jobCell}</td>
      <td>${badge}</td>
      <td class="col-num">${progress}</td>
      <td class="col-num col-mono">${finished ? "—" : escapeHtml(formatSpeed(p.speed || 0))}</td>
      <td class="col-num col-mono">${finished ? "—" : escapeHtml(formatDuration(p.eta || 0))}</td>
      <td class="col-num col-mono">${p.transfers ?? 0} / ${p.totalTransfers ?? 0}</td>
      <td class="col-num col-mono">${(p.errors && p.errors.length) || 0}</td>
      <td class="col-num">${stopBtn}</td>
    </tr>
  `;
}

async function onStop(jobid) {
  if (!confirm(`Stop job #${jobid}?`)) return;
  try {
    await post("job/stop", { jobid });
    toast(`Stopped job #${jobid}`, "success");
    await refreshJobs();
  } catch (e) {
    toast(`Stop failed: ${e.message}`, "error");
  }
}

function startPolling() {
  stopPolling();
  pollTimer = setInterval(async () => {
    if (!document.getElementById("jobs-card")) {
      stopPolling();
      return;
    }
    await refreshJobs();
  }, 1500);
}

function stopPolling() {
  if (pollTimer) {
    clearInterval(pollTimer);
    pollTimer = null;
  }
}

export function stopJobPolling() {
  stopPolling();
}

function escapeHtml(s) {
  return String(s)
    .replace(/&/g, "&amp;")
    .replace(/</g, "&lt;")
    .replace(/>/g, "&gt;")
    .replace(/"/g, "&quot;")
    .replace(/'/g, "&#39;");
}