feat(admin-ui): Display live list of queued jobs

packages/admin-ui/src/lib/core/src/common/generated-types.ts

@@ -1270,25 +1270,25 @@ export type Job = Node & {
    __typename?: 'Job';
   id: Scalars['ID'];
   createdAt: Scalars['DateTime'];
+  startedAt?: Maybe<Scalars['DateTime']>;
+  settledAt?: Maybe<Scalars['DateTime']>;
   queueName: Scalars['String'];
   state: JobState;
   progress: Scalars['Float'];
   data?: Maybe<Scalars['JSON']>;
   result?: Maybe<Scalars['JSON']>;
   error?: Maybe<Scalars['JSON']>;
-  started: Scalars['DateTime'];
-  settled?: Maybe<Scalars['DateTime']>;
   isSettled: Scalars['Boolean'];
   duration: Scalars['Int'];
 };
 
 export type JobFilterParameter = {
   createdAt?: Maybe<DateOperators>;
+  startedAt?: Maybe<DateOperators>;
+  settledAt?: Maybe<DateOperators>;
   queueName?: Maybe<StringOperators>;
   state?: Maybe<StringOperators>;
   progress?: Maybe<NumberOperators>;
-  started?: Maybe<DateOperators>;
-  settled?: Maybe<DateOperators>;
   isSettled?: Maybe<BooleanOperators>;
   duration?: Maybe<NumberOperators>;
 };
@@ -1306,13 +1306,19 @@ export type JobListOptions = {
   filter?: Maybe<JobFilterParameter>;
 };
 
+export type JobQueue = {
+   __typename?: 'JobQueue';
+  name: Scalars['String'];
+  running: Scalars['Boolean'];
+};
+
 export type JobSortParameter = {
   id?: Maybe<SortOrder>;
   createdAt?: Maybe<SortOrder>;
+  startedAt?: Maybe<SortOrder>;
+  settledAt?: Maybe<SortOrder>;
   queueName?: Maybe<SortOrder>;
   progress?: Maybe<SortOrder>;
-  started?: Maybe<SortOrder>;
-  settled?: Maybe<SortOrder>;
   duration?: Maybe<SortOrder>;
 };
 
@@ -2842,6 +2848,7 @@ export type Query = {
   facets: FacetList;
   globalSettings: GlobalSettings;
   job?: Maybe<Job>;
+  jobQueues: Array<JobQueue>;
   jobs: JobList;
   jobsById: Array<Job>;
   me?: Maybe<CurrentUser>;
@@ -6097,7 +6104,7 @@ export type GetServerConfigQuery = (
 
 export type JobInfoFragment = (
   { __typename?: 'Job' }
-  & Pick<Job, 'id' | 'queueName' | 'state' | 'progress' | 'duration' | 'result'>
+  & Pick<Job, 'id' | 'createdAt' | 'startedAt' | 'settledAt' | 'queueName' | 'state' | 'isSettled' | 'progress' | 'duration' | 'data' | 'result' | 'error'>
 );
 
 export type GetJobInfoQueryVariables = {
@@ -6114,21 +6121,46 @@ export type GetJobInfoQuery = (
 );
 
 export type GetAllJobsQueryVariables = {
-  input?: Maybe<JobListOptions>;
+  options?: Maybe<JobListOptions>;
 };
 
 
 export type GetAllJobsQuery = (
   { __typename?: 'Query' }
   & { jobs: (
     { __typename?: 'JobList' }
+    & Pick<JobList, 'totalItems'>
     & { items: Array<(
       { __typename?: 'Job' }
       & JobInfoFragment
     )> }
   ) }
 );
 
+export type GetJobsByIdQueryVariables = {
+  ids: Array<Scalars['ID']>;
+};
+
+
+export type GetJobsByIdQuery = (
+  { __typename?: 'Query' }
+  & { jobsById: Array<(
+    { __typename?: 'Job' }
+    & JobInfoFragment
+  )> }
+);
+
+export type GetJobQueueListQueryVariables = {};
+
+
+export type GetJobQueueListQuery = (
+  { __typename?: 'Query' }
+  & { jobQueues: Array<(
+    { __typename?: 'JobQueue' }
+    & Pick<JobQueue, 'name' | 'running'>
+  )> }
+);
+
 export type ReindexMutationVariables = {};
 
 
@@ -7306,6 +7338,18 @@ export namespace GetAllJobs {
   export type Items = JobInfoFragment;
 }
 
+export namespace GetJobsById {
+  export type Variables = GetJobsByIdQueryVariables;
+  export type Query = GetJobsByIdQuery;
+  export type JobsById = JobInfoFragment;
+}
+
+export namespace GetJobQueueList {
+  export type Variables = GetJobQueueListQueryVariables;
+  export type Query = GetJobQueueListQuery;
+  export type JobQueues = (NonNullable<GetJobQueueListQuery['jobQueues'][0]>);
+}
+
 export namespace Reindex {
   export type Variables = ReindexMutationVariables;
   export type Mutation = ReindexMutation;

packages/admin-ui/src/lib/core/src/components/job-queue-link/job-queue-link.component.html

@@ -0,0 +1,15 @@
+<a
+    type="button"
+    class="btn btn-link btn-sm job-button"
+    [class.active]="activeJobCount > 0"
+    [routerLink]="['/settings/jobs']"
+>
+    <ng-container *ngIf="activeJobCount; else noJobs">
+        <clr-icon shape="hourglass" class="has-badge"></clr-icon>
+        {{ 'common.jobs-in-progress' | translate: { count: activeJobCount } }}
+    </ng-container>
+    <ng-template #noJobs>
+        <clr-icon shape="hourglass"></clr-icon>
+        {{ 'nav.job-queue' | translate }}
+    </ng-template>
+</a>

packages/admin-ui/src/lib/core/src/components/job-list/job-list.component.scss → packages/admin-ui/src/lib/core/src/components/job-queue-link/job-queue-link.component.scss

@@ -2,8 +2,9 @@
 
 :host {
     position: fixed;
-    bottom: 12px;
-    left: 12px;
+    display: block;
+    bottom: 0;
+    left: 0;
     z-index: 5;
 }
 

packages/admin-ui/src/lib/core/src/components/job-queue-link/job-queue-link.component.ts

@@ -0,0 +1,33 @@
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnDestroy, OnInit } from '@angular/core';
+import { Subscription } from 'rxjs';
+import { map } from 'rxjs/operators';
+
+import { JobQueueService } from '../../providers/job-queue/job-queue.service';
+
+@Component({
+    selector: 'vdr-job-link',
+    templateUrl: './job-queue-link.component.html',
+    styleUrls: ['./job-queue-link.component.scss'],
+    changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class JobQueueLinkComponent implements OnInit, OnDestroy {
+    activeJobCount: number;
+    private subscription: Subscription;
+
+    constructor(private jobQueueService: JobQueueService, private changeDetectorRef: ChangeDetectorRef) {}
+
+    ngOnInit() {
+        this.subscription = this.jobQueueService.activeJobs$
+            .pipe(map((jobs) => jobs.length))
+            .subscribe((value) => {
+                this.activeJobCount = value;
+                this.changeDetectorRef.markForCheck();
+            });
+    }
+
+    ngOnDestroy(): void {
+        if (this.subscription) {
+            this.subscription.unsubscribe();
+        }
+    }
+}

packages/admin-ui/src/lib/core/src/components/main-nav/main-nav.component.html

@@ -25,7 +25,7 @@
             </section>
         </ng-container>
         <section class="nav-group">
-            <vdr-job-list></vdr-job-list>
+            <vdr-job-link></vdr-job-link>
         </section>
     </section>
 </nav>

packages/admin-ui/src/lib/core/src/core.module.ts

@@ -11,7 +11,7 @@ import { getDefaultLanguage } from './common/utilities/get-default-language';
 import { AppShellComponent } from './components/app-shell/app-shell.component';
 import { BreadcrumbComponent } from './components/breadcrumb/breadcrumb.component';
 import { ChannelSwitcherComponent } from './components/channel-switcher/channel-switcher.component';
-import { JobListComponent } from './components/job-list/job-list.component';
+import { JobQueueLinkComponent } from './components/job-queue-link/job-queue-link.component';
 import { MainNavComponent } from './components/main-nav/main-nav.component';
 import { NotificationComponent } from './components/notification/notification.component';
 import { OverlayHostComponent } from './components/overlay-host/overlay-host.component';
@@ -49,7 +49,7 @@ import { SharedModule } from './shared/shared.module';
         OverlayHostComponent,
         NotificationComponent,
         UiLanguageSwitcherDialogComponent,
-        JobListComponent,
+        JobQueueLinkComponent,
         ChannelSwitcherComponent,
     ],
 })

packages/admin-ui/src/lib/core/src/data/definitions/settings-definitions.ts

@@ -573,11 +573,17 @@ export const GET_SERVER_CONFIG = gql`
 export const JOB_INFO_FRAGMENT = gql`
     fragment JobInfo on Job {
         id
+        createdAt
+        startedAt
+        settledAt
         queueName
         state
+        isSettled
         progress
         duration
+        data
         result
+        error
     }
 `;
 
@@ -590,17 +596,36 @@ export const GET_JOB_INFO = gql`
     ${JOB_INFO_FRAGMENT}
 `;
 
-export const GET_ALL_JOBS = gql`
-    query GetAllJobs($input: JobListOptions) {
-        jobs(options: $input) {
+export const GET_JOBS_LIST = gql`
+    query GetAllJobs($options: JobListOptions) {
+        jobs(options: $options) {
             items {
                 ...JobInfo
             }
+            totalItems
         }
     }
     ${JOB_INFO_FRAGMENT}
 `;
 
+export const GET_JOBS_BY_ID = gql`
+    query GetJobsById($ids: [ID!]!) {
+        jobsById(jobIds: $ids) {
+            ...JobInfo
+        }
+    }
+    ${JOB_INFO_FRAGMENT}
+`;
+
+export const GET_JOB_QUEUE_LIST = gql`
+    query GetJobQueueList {
+        jobQueues {
+            name
+            running
+        }
+    }
+`;
+
 export const REINDEX = gql`
     mutation Reindex {
         reindex {