3 files changed, 178 insertions, 0 deletions

diff --git a/client/src/app/+admin/system/runners/runner-job-list/index.ts b/client/src/app/+admin/system/runners/runner-job-list/index.ts
new file mode 100644
index 000000000..bdcf93234
--- /dev/null
+++ b/client/src/app/+admin/system/runners/runner-job-list/index.ts
@@ -0,0 +1 @@
+export * from './runner-job-list.component'
diff --git a/client/src/app/+admin/system/runners/runner-job-list/runner-job-list.component.html b/client/src/app/+admin/system/runners/runner-job-list/runner-job-list.component.html
new file mode 100644
index 000000000..7858b4bca
--- /dev/null
+++ b/client/src/app/+admin/system/runners/runner-job-list/runner-job-list.component.html
@@ -0,0 +1,101 @@
+<h1 class="d-flex justify-content-between">
+  <span class="text-nowrap me-2">
+    <my-global-icon iconName="globe" aria-hidden="true"></my-global-icon>
+    <span i18n>Runner jobs</span>
+  </span>
+
+  <a routerLink="/admin/system/runners/runners-list" class="peertube-button-link peertube-button-icon grey-button">
+    <my-global-icon iconName="codesandbox" aria-hidden="true"></my-global-icon>
+    <ng-container i18n>Remote runners</ng-container>
+  </a>
+</h1>
+
+<p-table
+  [value]="runnerJobs" [paginator]="totalRecords > 0" [totalRecords]="totalRecords" [rows]="rowsPerPage" [first]="pagination.start"
+  [rowsPerPageOptions]="rowsPerPageOptions" [sortField]="sort.field" [sortOrder]="sort.order"
+  [lazy]="true" (onLazyLoad)="loadLazy($event)" [lazyLoadOnInit]="false"
+  [showCurrentPageReport]="true" i18n-currentPageReportTemplate
+  currentPageReportTemplate="Showing {{'{first}'}} to {{'{last}'}} of {{'{totalRecords}'}} runner jobs"
+  [expandedRowKeys]="expandedRows" dataKey="uuid"
+>
+  <ng-template pTemplate="header">
+    <tr>
+      <th style="width: 40px"></th>
+      <th style="width: 120px;"></th>
+      <th i18n>UUID</th>
+      <th i18n>Type</th>
+      <th i18n pSortableColumn="state">State <p-sortIcon field="state"></p-sortIcon></th>
+      <th style="width: 100px" i18n pSortableColumn="priority">Priority <p-sortIcon field="priority"></p-sortIcon></th>
+      <th style="width: 100px" i18n pSortableColumn="progress">Progress <p-sortIcon field="progress"></p-sortIcon></th>
+      <th i18n>Runner</th>
+      <th style="width: 150px;" i18n pSortableColumn="createdAt">Created <p-sortIcon field="createdAt"></p-sortIcon></th>
+    </tr>
+  </ng-template>
+
+  <ng-template pTemplate="caption">
+    <div class="caption">
+      <div class="ms-auto d-flex">
+        <my-advanced-input-filter class="me-2" (search)="onSearch($event)"></my-advanced-input-filter>
+
+        <my-button i18n-label label="Refresh" icon="refresh" (click)="reloadData()"></my-button>
+      </div>
+    </div>
+  </ng-template>
+
+  <ng-template pTemplate="body" let-expanded="expanded" let-runnerJob>
+    <tr>
+      <td class="expand-cell" [pRowToggler]="runnerJob">
+        <my-table-expander-icon [expanded]="expanded"></my-table-expander-icon>
+      </td>
+
+      <td class="action-cell">
+        <my-action-dropdown
+          placement="bottom-right top-right left auto" container="body"
+          i18n-label label="Actions" [actions]="actions" [entry]="runnerJob"
+        ></my-action-dropdown>
+      </td>
+
+      <td>{{ runnerJob.uuid }}</td>
+      <td>{{ runnerJob.type }}</td>
+      <td>{{ runnerJob.state.label }}</td>
+      <td>{{ runnerJob.priority }}</td>
+      <td>{{ runnerJob.progress }}</td>
+      <td>{{ runnerJob.runner?.name }}</td>
+      <td>{{ runnerJob.createdAt | date: 'short'  }}</td>
+    </tr>
+  </ng-template>
+
+  <ng-template pTemplate="rowexpansion" let-runnerJob>
+    <tr>
+      <td colspan="9">
+        <div class="mt-2 fs-7 font-monospace">
+          Parent job: {{ runnerJob.parent?.uuid || '-' }} <br />
+          Processed on {{ (runnerJob.startedAt || '-') }} <br />
+          Finished on {{ (runnerJob.finishedAt || '-') }} <br />
+        </div>
+
+        <div class="mt-2">
+          <strong i18n>Payload:</strong>
+          <pre>{{ runnerJob.payload }}</pre>
+        </div>
+
+        <div class="mt-2">
+          <strong i18n>Private payload:</strong>
+          <pre>{{ runnerJob.privatePayload }}</pre>
+        </div>
+
+        <pre *ngIf="runnerJob.error" class=".text-danger" >{{ runnerJob.error }}</pre>
+      </td>
+    </tr>
+  </ng-template>
+
+  <ng-template pTemplate="emptymessage">
+    <tr>
+      <td colspan="9">
+        <div class="no-results">
+          <ng-container i18n>No runner jobs found.</ng-container>
+        </div>
+      </td>
+    </tr>
+  </ng-template>
+</p-table>
diff --git a/client/src/app/+admin/system/runners/runner-job-list/runner-job-list.component.ts b/client/src/app/+admin/system/runners/runner-job-list/runner-job-list.component.ts
new file mode 100644
index 000000000..ea889f0f7
--- /dev/null
+++ b/client/src/app/+admin/system/runners/runner-job-list/runner-job-list.component.ts
@@ -0,0 +1,76 @@
+import { SortMeta } from 'primeng/api'
+import { Component, OnInit } from '@angular/core'
+import { ConfirmService, Notifier, RestPagination, RestTable } from '@app/core'
+import { DropdownAction } from '@app/shared/shared-main'
+import { RunnerJob } from '@shared/models'
+import { RunnerJobFormatted, RunnerService } from '../runner.service'
+
+@Component({
+  selector: 'my-runner-job-list',
+  templateUrl: './runner-job-list.component.html'
+})
+export class RunnerJobListComponent extends RestTable <RunnerJob> implements OnInit {
+  runnerJobs: RunnerJobFormatted[] = []
+  totalRecords = 0
+
+  sort: SortMeta = { field: 'createdAt', order: -1 }
+  pagination: RestPagination = { count: this.rowsPerPage, start: 0 }
+
+  actions: DropdownAction<RunnerJob>[][] = []
+
+  constructor (
+    private runnerService: RunnerService,
+    private notifier: Notifier,
+    private confirmService: ConfirmService
+  ) {
+    super()
+  }
+
+  ngOnInit () {
+    this.actions = [
+      [
+        {
+          label: $localize`Cancel this job`,
+          handler: job => this.cancelJob(job)
+        }
+      ]
+    ]
+
+    this.initialize()
+  }
+
+  getIdentifier () {
+    return 'RunnerJobListComponent'
+  }
+
+  async cancelJob (job: RunnerJob) {
+    const res = await this.confirmService.confirm(
+      $localize`Do you really want to cancel this job? Children won't be processed.`,
+      $localize`Cancel job`
+    )
+
+    if (res === false) return
+
+    this.runnerService.cancelJob(job)
+        .subscribe({
+          next: () => {
+            this.reloadData()
+            this.notifier.success($localize`Job cancelled.`)
+          },
+
+          error: err => this.notifier.error(err.message)
+        })
+  }
+
+  protected reloadDataInternal () {
+    this.runnerService.listRunnerJobs({ pagination: this.pagination, sort: this.sort, search: this.search })
+      .subscribe({
+        next: resultList => {
+          this.runnerJobs = resultList.data
+          this.totalRecords = resultList.total
+        },
+
+        error: err => this.notifier.error(err.message)
+      })
+  }
+}