pulse-signage/src/web/views/settings/tasks-background/index.hbs

<div class="page-header">
  <div>
    <h2>Background tasks</h2>
    <p>Queued data refreshes run in the web process. Finished items stay here until you clear them.</p>
  </div>
</div>

<div id="background-tasks-filters">
  {{#if hasActiveFilters}}
  <div class="alert alert-light border d-flex flex-wrap align-items-center justify-content-between gap-2 py-2 mb-3">
    <div class="small text-muted">
      {{#if activeSourceLabel}}Showing results from {{activeSourceLabel}}.{{/if}}
    </div>
    <a class="btn btn-outline-secondary btn-sm" href="{{clearFiltersUrl}}" data-background-tasks-nav="clear">Clear filters</a>
  </div>
  {{/if}}
</div>

<div id="background-tasks-summary" class="row g-3 mb-4">
  {{#each statusCards}}
  <div class="col-6 col-xl-3">
    <div class="card card-outline card-{{variant}} h-100{{#if active}} border-2 border-{{variant}}{{/if}}">
      <div class="card-body">
        <div class="text-muted small text-uppercase">{{label}}</div>
        <div class="fs-3 fw-semibold">{{count}}</div>
      </div>
    </div>
  </div>
  {{/each}}
</div>

<div id="background-tasks-task-card" class="card card-outline card-primary" data-pagination-card="tasks" data-table-search-container data-table-pagination-card>
  <div class="card-header d-flex align-items-center">
    <h3 class="card-title mb-0">Task Queue</h3>
    <div class="ms-auto d-flex flex-nowrap align-items-center gap-2 background-tasks-task-tools">
      <div class="input-group input-group-sm background-tasks-task-search" style="width: min(12rem, 100%);">
        <span class="input-group-text" aria-hidden="true"><i class="bi bi-search"></i></span>
        <input type="search" class="form-control" placeholder="Search tasks" aria-label="Search tasks" data-table-search />
      </div>
      {{#if canManage}}
        {{#if canClearFinished}}
        <form method="post" action="/settings/tasks-background/clear-finished" data-confirm-message="Clear finished background tasks?">
          <button type="submit" class="btn btn-secondary btn-sm">Clear finished</button>
        </form>
        {{/if}}
      {{/if}}
    </div>
  </div>
  <div class="card-body table-responsive p-0">
    <table class="table table-striped w-100 mb-0 align-middle" data-table-searchable>
      <thead>
        <tr>
          <th data-table-sort-key="task">Task</th>
          <th data-table-sort-key="category">Category</th>
          <th data-table-sort-key="status">Status</th>
          <th data-table-sort-key="queued">Queued</th>
          <th data-table-sort-key="started">Started</th>
          <th data-table-sort-key="finished">Finished</th>
          <th data-table-sort-key="source">Source</th>
        </tr>
      </thead>
      <tbody>
        {{#if tasks.length}}
          {{#each tasks}}
            <tr data-table-search-row>
              <td data-label="Task">
                <div class="fw-semibold">{{title}}</div>
                {{#if taskDescription}}
                  <div class="text-muted small text-break">{{taskDescription}}</div>
                {{/if}}
                {{#if errorMessage}}
                  <div class="text-danger small mt-1 text-break">{{errorMessage}}</div>
                {{/if}}
              </td>
              <td data-label="Category">{{category}}</td>
              <td data-label="Status">
                {{#if (eq status 'queued')}}
                  <span class="badge text-bg-secondary">Queued</span>
                {{else if (eq status 'running')}}
                  <span class="badge text-bg-primary">Running</span>
                {{else if (eq status 'completed')}}
                  <span class="badge text-bg-success">Completed</span>
                {{else if (eq status 'failed')}}
                  <span class="badge text-bg-danger">Failed</span>
                {{else if (eq status 'canceled')}}
                  <span class="badge text-bg-warning">Canceled</span>
                {{else}}
                  <span class="badge text-bg-light text-dark">{{status}}</span>
                {{/if}}
              </td>
              <td data-label="Queued">
                {{#if createdAt}}
                  <time data-local-datetime data-local-datetime-format="24h" datetime="{{createdAt}}">{{createdAt}}</time>
                {{else}}
                  -
                {{/if}}
              </td>
              <td data-label="Started">
                {{#if startedAt}}
                  <time data-local-datetime data-local-datetime-format="24h" datetime="{{startedAt}}">{{startedAt}}</time>
                {{else}}
                  -
                {{/if}}
              </td>
              <td data-label="Finished">
                {{#if finishedAt}}
                  <time data-local-datetime data-local-datetime-format="24h" datetime="{{finishedAt}}">{{finishedAt}}</time>
                {{else}}
                  -
                {{/if}}
              </td>
              <td data-label="Source">
                {{#if metadata.sourceName}}
                  <div>{{metadata.sourceName}}</div>
                  <div class="text-muted small">{{metadata.sourceType}} #{{metadata.sourceId}}</div>
                {{else}}
                  <span class="empty">-</span>
                {{/if}}
              </td>
            </tr>
          {{/each}}
        {{else}}
          <tr data-table-search-empty-default>
            <td colspan="7" class="empty">No background tasks are queued right now.</td>
          </tr>
        {{/if}}
      </tbody>
    </table>
  </div>
  {{> table-pagination pagination=pagination basePath="/settings/tasks-background" alwaysShow=true}}
</div>