21 files changed, 213 insertions, 52 deletions

diff --git a/client/src/app/+accounts/accounts.component.html b/client/src/app/+accounts/accounts.component.html
index 66d108134..1283105e9 100644
--- a/client/src/app/+accounts/accounts.component.html
+++ b/client/src/app/+accounts/accounts.component.html
@@ -25,11 +25,11 @@
 
             <div class="actor-handle">
               <span>@{{ account.nameWithHost }}</span>
-              <button [cdkCopyToClipboard]="account.nameWithHostForced" (click)="activateCopiedMessage()"
-                      class="btn btn-outline-secondary btn-sm copy-button" title="Copy account handle" i18n-title
-              >
-                <my-global-icon iconName="copy"></my-global-icon>
-              </button>
+
+              <my-copy-button
+                [value]="account.nameWithHostForced" i18n-notification notification="Username copied"
+                title="Copy account handle" i18n-title
+              ></my-copy-button>
             </div>
 
             <div class="actor-counters">
diff --git a/client/src/app/+accounts/accounts.component.scss b/client/src/app/+accounts/accounts.component.scss
index 56b952b65..aadd6f5c0 100644
--- a/client/src/app/+accounts/accounts.component.scss
+++ b/client/src/app/+accounts/accounts.component.scss
@@ -28,14 +28,8 @@
   }
 }
 
-.copy-button {
+my-copy-button {
   @include margin-left(3px);
-
-  border: 0;
-
-  my-global-icon {
-    width: 15px;
-  }
 }
 
 .account-info {
diff --git a/client/src/app/+accounts/accounts.component.ts b/client/src/app/+accounts/accounts.component.ts
index 0033fbf59..6d912e325 100644
--- a/client/src/app/+accounts/accounts.component.ts
+++ b/client/src/app/+accounts/accounts.component.ts
@@ -115,10 +115,6 @@ export class AccountsComponent implements OnInit, OnDestroy {
     this.redirectService.redirectToHomepage()
   }
 
-  activateCopiedMessage () {
-    this.notifier.success($localize`Username copied`)
-  }
-
   searchChanged (search: string) {
     const queryParams = { search }
 
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
index a759e9186..1a40da0c0 100644
--- 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
@@ -31,7 +31,7 @@
       <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>
+      <th style="width: 200px;" i18n pSortableColumn="createdAt">Created <p-sortIcon field="createdAt"></p-sortIcon></th>
     </tr>
   </ng-template>
 
@@ -47,7 +47,7 @@
       </div>
 
       <div class="ms-auto d-flex">
-        <my-advanced-input-filter class="me-2" (search)="onSearch($event)"></my-advanced-input-filter>
+        <my-advanced-input-filter class="me-2" [filters]="inputFilters" (search)="onSearch($event)"></my-advanced-input-filter>
 
         <my-button i18n-label label="Refresh" icon="refresh" (click)="reloadData()"></my-button>
       </div>
@@ -73,7 +73,9 @@
 
       <td>{{ runnerJob.uuid }}</td>
       <td>{{ runnerJob.type }}</td>
-      <td>{{ runnerJob.state.label }}</td>
+      <td>
+        <span class="pt-badge" [ngClass]="getStateBadgeColor(runnerJob)">{{ runnerJob.state.label }}</span>
+      </td>
       <td>{{ runnerJob.priority }}</td>
 
       <td>
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
index 8994c1d00..2670eac86 100644
--- 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
@@ -5,6 +5,7 @@ import { formatICU } from '@app/helpers'
 import { DropdownAction } from '@app/shared/shared-main'
 import { RunnerJob, RunnerJobState } from '@shared/models'
 import { RunnerJobFormatted, RunnerService } from '../runner.service'
+import { AdvancedInputFilter } from '@app/shared/shared-forms'
 
 @Component({
   selector: 'my-runner-job-list',
@@ -20,6 +21,30 @@ export class RunnerJobListComponent extends RestTable <RunnerJob> implements OnI
   actions: DropdownAction<RunnerJob>[][] = []
   bulkActions: DropdownAction<RunnerJob[]>[][] = []
 
+  inputFilters: AdvancedInputFilter[] = [
+    {
+      title: $localize`Advanced filters`,
+      children: [
+        {
+          value: 'state:completed',
+          label: $localize`Completed jobs`
+        },
+        {
+          value: 'state:pending state:waiting-for-parent-job',
+          label: $localize`Pending jobs`
+        },
+        {
+          value: 'state:processing',
+          label: $localize`Jobs that are being processed`
+        },
+        {
+          value: 'state:errored state:parent-errored',
+          label: $localize`Failed jobs`
+        }
+      ]
+    }
+  ]
+
   constructor (
     private runnerService: RunnerService,
     private notifier: Notifier,
@@ -36,6 +61,12 @@ export class RunnerJobListComponent extends RestTable <RunnerJob> implements OnI
           handler: job => this.cancelJobs([ job ]),
           isDisplayed: job => this.canCancelJob(job)
         }
+      ],
+      [
+        {
+          label: $localize`Delete this job`,
+          handler: job => this.removeJobs([ job ])
+        }
       ]
     ]
 
@@ -46,6 +77,12 @@ export class RunnerJobListComponent extends RestTable <RunnerJob> implements OnI
           handler: jobs => this.cancelJobs(jobs),
           isDisplayed: jobs => jobs.every(j => this.canCancelJob(j))
         }
+      ],
+      [
+        {
+          label: $localize`Delete`,
+          handler: jobs => this.removeJobs(jobs)
+        }
       ]
     ]
 
@@ -77,6 +114,45 @@ export class RunnerJobListComponent extends RestTable <RunnerJob> implements OnI
         })
   }
 
+  async removeJobs (jobs: RunnerJob[]) {
+    const message = formatICU(
+      $localize`Do you really want to remove {count, plural, =1 {this job} other {{count} jobs}}? Children jobs will also be removed.`,
+      { count: jobs.length }
+    )
+
+    const res = await this.confirmService.confirm(message, $localize`Remove`)
+
+    if (res === false) return
+
+    this.runnerService.removeJobs(jobs)
+        .subscribe({
+          next: () => {
+            this.reloadData()
+            this.notifier.success($localize`Job(s) removed.`)
+          },
+
+          error: err => this.notifier.error(err.message)
+        })
+  }
+
+  getStateBadgeColor (job: RunnerJob) {
+    switch (job.state.id) {
+      case RunnerJobState.ERRORED:
+      case RunnerJobState.PARENT_ERRORED:
+        return 'badge-danger'
+
+      case RunnerJobState.COMPLETED:
+        return 'badge-success'
+
+      case RunnerJobState.PENDING:
+      case RunnerJobState.WAITING_FOR_PARENT_JOB:
+        return 'badge-warning'
+
+      default:
+        return 'badge-info'
+    }
+  }
+
   protected reloadDataInternal () {
     this.runnerService.listRunnerJobs({ pagination: this.pagination, sort: this.sort, search: this.search })
       .subscribe({
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
index 3e5cea881..4ff2c3b4c 100644
--- 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
@@ -45,7 +45,14 @@
         ></my-action-dropdown>
       </td>
 
-      <td>{{ registrationToken.registrationToken }}</td>
+      <td>
+        {{ registrationToken.registrationToken }}
+
+        <my-copy-button
+          [value]="registrationToken.registrationToken" i18n-notification notification="Registration token copied"
+          i18n-title title="Copy registration token"
+        ></my-copy-button>
+      </td>
 
       <td>{{ registrationToken.createdAt | date: 'short'  }}</td>
 
diff --git a/client/src/app/+admin/system/runners/runner-registration-token-list/runner-registration-token-list.component.scss b/client/src/app/+admin/system/runners/runner-registration-token-list/runner-registration-token-list.component.scss
new file mode 100644
index 000000000..1cfb2e65f
--- /dev/null
+++ b/client/src/app/+admin/system/runners/runner-registration-token-list/runner-registration-token-list.component.scss
@@ -0,0 +1,12 @@
+@use '_variables' as *;
+@use '_mixins' as *;
+
+my-copy-button {
+  @include margin-left(3px);
+}
+
+tr:not(:hover) {
+  my-copy-button {
+    opacity: 0;
+  }
+}
diff --git a/client/src/app/+admin/system/runners/runner-registration-token-list/runner-registration-token-list.component.ts b/client/src/app/+admin/system/runners/runner-registration-token-list/runner-registration-token-list.component.ts
index f03aab189..77908a2e1 100644
--- a/client/src/app/+admin/system/runners/runner-registration-token-list/runner-registration-token-list.component.ts
+++ b/client/src/app/+admin/system/runners/runner-registration-token-list/runner-registration-token-list.component.ts
@@ -7,6 +7,7 @@ import { RunnerService } from '../runner.service'
 
 @Component({
   selector: 'my-runner-registration-token-list',
+  styleUrls: [ './runner-registration-token-list.component.scss' ],
   templateUrl: './runner-registration-token-list.component.html'
 })
 export class RunnerRegistrationTokenListComponent extends RestTable <RunnerRegistrationToken> implements OnInit {
diff --git a/client/src/app/+admin/system/runners/runner.service.ts b/client/src/app/+admin/system/runners/runner.service.ts
index 392ec82bc..3ab36c4ff 100644
--- a/client/src/app/+admin/system/runners/runner.service.ts
+++ b/client/src/app/+admin/system/runners/runner.service.ts
@@ -6,7 +6,7 @@ import { Injectable } from '@angular/core'
 import { RestExtractor, RestPagination, RestService, ServerService } from '@app/core'
 import { arrayify, peertubeTranslate } from '@shared/core-utils'
 import { ResultList } from '@shared/models/common'
-import { Runner, RunnerJob, RunnerJobAdmin, RunnerRegistrationToken } from '@shared/models/runners'
+import { Runner, RunnerJob, RunnerJobAdmin, RunnerJobState, RunnerRegistrationToken } from '@shared/models/runners'
 import { environment } from '../../../../environments/environment'
 
 export type RunnerJobFormatted = RunnerJob & {
@@ -60,7 +60,9 @@ export class RunnerService {
     let params = new HttpParams()
     params = this.restService.addRestGetParams(params, pagination, sort)
 
-    if (search) params = params.append('search', search)
+    if (search) {
+      params = this.buildParamsFromSearch(search, params)
+    }
 
     return forkJoin([
       this.authHttp.get<ResultList<RunnerJobAdmin>>(RunnerService.BASE_RUNNER_URL + '/jobs', { params }),
@@ -90,6 +92,31 @@ export class RunnerService {
     )
   }
 
+  private buildParamsFromSearch (search: string, params: HttpParams) {
+    const filters = this.restService.parseQueryStringFilter(search, {
+      stateOneOf: {
+        prefix: 'state:',
+        multiple: true,
+        handler: v => {
+          if (v === 'completed') return RunnerJobState.COMPLETED
+          if (v === 'processing') return RunnerJobState.PROCESSING
+          if (v === 'errored') return RunnerJobState.ERRORED
+          if (v === 'pending') return RunnerJobState.PENDING
+          if (v === 'waiting-for-parent-job') return RunnerJobState.WAITING_FOR_PARENT_JOB
+          if (v === 'parent-errored') return RunnerJobState.PARENT_ERRORED
+
+          return undefined
+        }
+      }
+    })
+
+    console.log(filters)
+
+    return this.restService.addObjectParams(params, filters)
+  }
+
+  // ---------------------------------------------------------------------------
+
   cancelJobs (jobsArg: RunnerJob | RunnerJob[]) {
     const jobs = arrayify(jobsArg)
 
@@ -101,6 +128,17 @@ export class RunnerService {
       )
   }
 
+  removeJobs (jobsArg: RunnerJob | RunnerJob[]) {
+    const jobs = arrayify(jobsArg)
+
+    return from(jobs)
+      .pipe(
+        concatMap(job => this.authHttp.delete(RunnerService.BASE_RUNNER_URL + '/jobs/' + job.uuid)),
+        toArray(),
+        catchError(err => this.restExtractor.handleError(err))
+      )
+  }
+
   // ---------------------------------------------------------------------------
 
   listRunners (options: {
diff --git a/client/src/app/+video-channels/video-channels.component.html b/client/src/app/+video-channels/video-channels.component.html
index fff160f2e..228cc4edd 100644
--- a/client/src/app/+video-channels/video-channels.component.html
+++ b/client/src/app/+video-channels/video-channels.component.html
@@ -64,11 +64,11 @@
 
             <div class="actor-handle">
               <span>@{{ videoChannel.nameWithHost }}</span>
-              <button [cdkCopyToClipboard]="videoChannel.nameWithHostForced" (click)="activateCopiedMessage()"
-                      class="btn btn-outline-secondary btn-sm copy-button" title="Copy channel handle" i18n-title
-              >
-                <my-global-icon iconName="copy"></my-global-icon>
-              </button>
+
+              <my-copy-button
+                [value]="videoChannel.nameWithHostForced" i18n-notification notification="Handle copied"
+                title="Copy channel handle" i18n-title
+              ></my-copy-button>
             </div>
 
             <div class="actor-counters">
diff --git a/client/src/app/+video-channels/video-channels.component.scss b/client/src/app/+video-channels/video-channels.component.scss
index aba266fcc..182e8d845 100644
--- a/client/src/app/+video-channels/video-channels.component.scss
+++ b/client/src/app/+video-channels/video-channels.component.scss
@@ -152,14 +152,8 @@
   display: none;
 }
 
-.copy-button {
+my-copy-button {
   @include margin-left(3px);
-
-  border: 0;
-
-  my-global-icon {
-    width: 15px;
-  }
 }
 
 @media screen and (max-width: 1400px) {
diff --git a/client/src/app/+video-channels/video-channels.component.ts b/client/src/app/+video-channels/video-channels.component.ts
index afbf96032..f5bea66ec 100644
--- a/client/src/app/+video-channels/video-channels.component.ts
+++ b/client/src/app/+video-channels/video-channels.component.ts
@@ -120,10 +120,6 @@ export class VideoChannelsComponent implements OnInit, OnDestroy {
     return this.isOwner() || this.authService.getUser().hasRight(UserRight.MANAGE_ANY_VIDEO_CHANNEL)
   }
 
-  activateCopiedMessage () {
-    this.notifier.success($localize`Username copied`)
-  }
-
   hasShowMoreDescription () {
     return !this.channelDescriptionExpanded && this.channelDescriptionHTML.length > 100
   }
diff --git a/client/src/app/core/rest/rest.service.ts b/client/src/app/core/rest/rest.service.ts
index d8b5ffb18..f07afb7e8 100644
--- a/client/src/app/core/rest/rest.service.ts
+++ b/client/src/app/core/rest/rest.service.ts
@@ -7,16 +7,18 @@ import { RestPagination } from './rest-pagination'
 
 const debugLogger = debug('peertube:rest')
 
+type ParseQueryHandlerResult = string | number | boolean | string[] | number[] | boolean[]
+
 interface QueryStringFilterPrefixes {
   [key: string]: {
     prefix: string
-    handler?: (v: string) => string | number | boolean
+    handler?: (v: string) => ParseQueryHandlerResult
     multiple?: boolean
     isBoolean?: boolean
   }
 }
 
-type ParseQueryStringFilters <K extends keyof any> = Partial<Record<K, string | number | boolean | (string | number | boolean)[]>>
+type ParseQueryStringFilters <K extends keyof any> = Partial<Record<K, ParseQueryHandlerResult | ParseQueryHandlerResult[]>>
 type ParseQueryStringFiltersResult <K extends keyof any> = ParseQueryStringFilters<K> & { search?: string }
 
 @Injectable()
diff --git a/client/src/app/shared/shared-forms/advanced-input-filter.component.scss b/client/src/app/shared/shared-forms/advanced-input-filter.component.scss
index 4efbeb85d..f5438ffdb 100644
--- a/client/src/app/shared/shared-forms/advanced-input-filter.component.scss
+++ b/client/src/app/shared/shared-forms/advanced-input-filter.component.scss
@@ -33,6 +33,5 @@ my-global-icon {
 
 div[role=menu] {
   max-height: 50vh;
-  min-height: 200px;
   overflow: auto;
 }
diff --git a/client/src/app/shared/shared-forms/input-text.component.html b/client/src/app/shared/shared-forms/input-text.component.html
index abb53a085..4747e2f8f 100644
--- a/client/src/app/shared/shared-forms/input-text.component.html
+++ b/client/src/app/shared/shared-forms/input-text.component.html
@@ -11,13 +11,12 @@
     <my-global-icon *ngIf="!show" iconName="eye-close"></my-global-icon>
   </button>
 
-  <button
-    *ngIf="withCopy" [cdkCopyToClipboard]="input.value" (click)="activateCopiedMessage()" type="button"
-    class="btn btn-outline-secondary text-uppercase" i18n-title title="Copy"
+  <my-copy-button
+    *ngIf="withCopy" [value]="input.value" i18n-notification notification="Copied"
+    [isInputGroup]="true" i18n
   >
-    <my-global-icon iconName="copy"></my-global-icon>
-    <span class="copy-text">Copy</span>
-  </button>
+    COPY
+  </my-copy-button>
 </div>
 
 <div *ngIf="formError" class="form-error">{{ formError }}</div>
diff --git a/client/src/app/shared/shared-forms/input-text.component.ts b/client/src/app/shared/shared-forms/input-text.component.ts
index aa4a1cba8..be03f25b9 100644
--- a/client/src/app/shared/shared-forms/input-text.component.ts
+++ b/client/src/app/shared/shared-forms/input-text.component.ts
@@ -46,10 +46,6 @@ export class InputTextComponent implements ControlValueAccessor {
     this.show = !this.show
   }
 
-  activateCopiedMessage () {
-    this.notifier.success($localize`Copied`)
-  }
-
   propagateChange = (_: any) => { /* empty */ }
 
   writeValue (value: string) {
diff --git a/client/src/app/shared/shared-main/buttons/copy-button.component.html b/client/src/app/shared/shared-main/buttons/copy-button.component.html
new file mode 100644
index 000000000..a99c0a93a
--- /dev/null
+++ b/client/src/app/shared/shared-main/buttons/copy-button.component.html
@@ -0,0 +1,9 @@
+<button
+  class="btn btn-outline-secondary btn-sm copy-button"
+  [cdkCopyToClipboard]="value" (click)="activateCopiedMessage()"
+  [title]="title" [ngClass]="{ 'is-input-group': isInputGroup }"
+>
+  <my-global-icon iconName="copy"></my-global-icon>
+
+  <ng-content></ng-content>
+</button>
diff --git a/client/src/app/shared/shared-main/buttons/copy-button.component.scss b/client/src/app/shared/shared-main/buttons/copy-button.component.scss
new file mode 100644
index 000000000..7e3720418
--- /dev/null
+++ b/client/src/app/shared/shared-main/buttons/copy-button.component.scss
@@ -0,0 +1,15 @@
+@use '_variables' as *;
+@use '_mixins' as *;
+
+button:not(.is-input-group) {
+  border: 0;
+}
+
+.is-input-group {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}
+
+my-global-icon {
+  width: 15px;
+}
diff --git a/client/src/app/shared/shared-main/buttons/copy-button.component.ts b/client/src/app/shared/shared-main/buttons/copy-button.component.ts
new file mode 100644
index 000000000..aac9ab8b0
--- /dev/null
+++ b/client/src/app/shared/shared-main/buttons/copy-button.component.ts
@@ -0,0 +1,22 @@
+import { Component, Input } from '@angular/core'
+import { Notifier } from '@app/core'
+
+@Component({
+  selector: 'my-copy-button',
+  styleUrls: [ './copy-button.component.scss' ],
+  templateUrl: './copy-button.component.html'
+})
+export class CopyButtonComponent {
+  @Input() value: string
+  @Input() title: string
+  @Input() notification: string
+  @Input() isInputGroup = false
+
+  constructor (private notifier: Notifier) {
+
+  }
+
+  activateCopiedMessage () {
+    if (this.notification) this.notifier.success(this.notification)
+  }
+}
diff --git a/client/src/app/shared/shared-main/buttons/index.ts b/client/src/app/shared/shared-main/buttons/index.ts
index 775a47a39..75efbdea3 100644
--- a/client/src/app/shared/shared-main/buttons/index.ts
+++ b/client/src/app/shared/shared-main/buttons/index.ts
@@ -1,4 +1,5 @@
 export * from './action-dropdown.component'
 export * from './button.component'
+export * from './copy-button.component'
 export * from './delete-button.component'
 export * from './edit-button.component'
diff --git a/client/src/app/shared/shared-main/shared-main.module.ts b/client/src/app/shared/shared-main/shared-main.module.ts
index 480277450..243394bda 100644
--- a/client/src/app/shared/shared-main/shared-main.module.ts
+++ b/client/src/app/shared/shared-main/shared-main.module.ts
@@ -31,7 +31,7 @@ import {
   PeerTubeTemplateDirective
 } from './angular'
 import { AUTH_INTERCEPTOR_PROVIDER } from './auth'
-import { ActionDropdownComponent, ButtonComponent, DeleteButtonComponent, EditButtonComponent } from './buttons'
+import { ActionDropdownComponent, ButtonComponent, CopyButtonComponent, DeleteButtonComponent, EditButtonComponent } from './buttons'
 import { CustomPageService } from './custom-page'
 import { DateToggleComponent } from './date'
 import { FeedComponent } from './feeds'
@@ -100,6 +100,7 @@ import { VideoChannelService } from './video-channel'
 
     ActionDropdownComponent,
     ButtonComponent,
+    CopyButtonComponent,
     DeleteButtonComponent,
     EditButtonComponent,
 
@@ -162,6 +163,7 @@ import { VideoChannelService } from './video-channel'
 
     ActionDropdownComponent,
     ButtonComponent,
+    CopyButtonComponent,
     DeleteButtonComponent,
     EditButtonComponent,