1 files changed, 65 insertions, 0 deletions

diff --git a/client/src/app/+admin/system/runners/runner-registration-token-list/runner-registration-token-list.component.html b/client/src/app/+admin/system/runners/runner-registration-token-list/runner-registration-token-list.component.html
new file mode 100644
index 000000000..2fd23e2fc
--- /dev/null
+++ b/client/src/app/+admin/system/runners/runner-registration-token-list/runner-registration-token-list.component.html
@@ -0,0 +1,65 @@
+<h1 class="d-flex justify-content-between">
+  <span class="text-nowrap me-2">
+    <my-global-icon iconName="cog" aria-hidden="true"></my-global-icon>
+    <ng-container i18n>Runner registration tokens</ng-container>
+  </span>
+
+  <div>
+    <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>
+  </div>
+</h1>
+
+<p-table
+  [value]="registrationTokens" [paginator]="totalRecords > 0" [totalRecords]="totalRecords" [rows]="rowsPerPage" [first]="pagination.start"
+  [rowsPerPageOptions]="rowsPerPageOptions" [sortField]="sort.field" [sortOrder]="sort.order"
+  [lazy]="true" (onLazyLoad)="loadLazy($event)"
+  [showCurrentPageReport]="true" i18n-currentPageReportTemplate
+  currentPageReportTemplate="Showing {{'{first}'}} to {{'{last}'}} of {{'{totalRecords}'}} registration tokens"
+>
+  <ng-template pTemplate="header">
+    <tr>
+      <th style="width: 120px;"></th>
+      <th i18n>Token</th>
+      <th style="width: 150px;" i18n pSortableColumn="createdAt">Created <p-sortIcon field="createdAt"></p-sortIcon></th>
+      <th style="width: 160px;" i18n>Associated runners</th>
+    </tr>
+  </ng-template>
+
+  <ng-template pTemplate="caption">
+    <div class="caption">
+      <div class="left-buttons">
+        <my-button className="orange-button" i18n-label label="Generate token" icon="add" (click)="generateToken()"></my-button>
+      </div>
+    </div>
+  </ng-template>
+
+  <ng-template pTemplate="body" let-registrationToken>
+    <tr>
+      <td class="action-cell">
+        <my-action-dropdown
+          placement="bottom-right top-right left auto" container="body"
+          i18n-label label="Actions" [actions]="actions" [entry]="registrationToken"
+        ></my-action-dropdown>
+      </td>
+
+      <td>{{ registrationToken.registrationToken }}</td>
+
+      <td>{{ registrationToken.createdAt | date: 'short'  }}</td>
+
+      <td>{{ registrationToken.registeredRunnersCount }}</td>
+    </tr>
+  </ng-template>
+
+  <ng-template pTemplate="emptymessage">
+    <tr>
+      <td colspan="4">
+        <div class="no-results">
+          <ng-container i18n>No registration token found for remote runners.</ng-container>
+        </div>
+      </td>
+    </tr>
+  </ng-template>
+</p-table>