refactor(admin-ui): Use new nav menu status for system items

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

@@ -1,15 +0,0 @@
-<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>
-        {{ 'system.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-queue-link/job-queue-link.component.scss

@@ -1,29 +0,0 @@
-@import "variables";
-
-:host {
-    position: fixed;
-    display: block;
-    bottom: 0;
-    left: 0;
-    z-index: 5;
-}
-
-.job-button {
-    background-color: $color-grey-200;
-    box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.2);
-    &.hidden {
-        display: none;
-    }
-    &:hover {
-        background-color: $color-grey-100;
-    }
-}
-
-.job-row {
-    padding: 0 60px 0 12px;
-    width: 90vw;
-    max-width: 360px;
-    @media screen and (min-width: $breakpoint-small){
-        max-width: 400px;
-    }
-}

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

@@ -1,33 +0,0 @@
-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

@@ -34,16 +34,5 @@
                 </ul>
             </section>
         </ng-container>
-        <section class="nav-group">
-            <vdr-job-link></vdr-job-link>
-            <a
-                type="button"
-                class="btn btn-link btn-sm job-button"
-                [routerLink]="['/settings/system-status']"
-            >
-                {{ 'nav.system-status' | translate }}
-            </a>
-
-        </section>
     </section>
 </nav>

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

@@ -1,8 +1,11 @@
 import { Component, OnInit } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
 import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
+import { map, startWith } from 'rxjs/operators';
 
-import { NavMenuItem } from '../../providers/nav-builder/nav-builder-types';
+import { HealthCheckService } from '../../providers/health-check/health-check.service';
+import { JobQueueService } from '../../providers/job-queue/job-queue.service';
+import { NavMenuBadge, NavMenuItem } from '../../providers/nav-builder/nav-builder-types';
 import { NavBuilderService } from '../../providers/nav-builder/nav-builder.service';
 
 @Component({
@@ -15,6 +18,8 @@ export class MainNavComponent implements OnInit {
         private route: ActivatedRoute,
         private router: Router,
         public navBuilderService: NavBuilderService,
+        private healthCheckService: HealthCheckService,
+        private jobQueueService: JobQueueService,
     ) {}
 
     ngOnInit(): void {
@@ -160,6 +165,43 @@ export class MainNavComponent implements OnInit {
                     },
                 ],
             },
+            {
+                id: 'system',
+                label: _('nav.system'),
+                requiresPermission: 'ReadSettings',
+                collapsible: true,
+                collapsedByDefault: true,
+                items: [
+                    {
+                        id: 'job-queue',
+                        label: _('nav.job-queue'),
+                        routerLink: ['/settings', 'jobs'],
+                        icon: 'tick-chart',
+                        statusBadge: this.jobQueueService.activeJobs$.pipe(
+                            startWith([]),
+                            map(
+                                jobs =>
+                                    ({
+                                        type: jobs.length === 0 ? 'none' : 'info',
+                                        propagateToSection: jobs.length > 0,
+                                    } as NavMenuBadge),
+                            ),
+                        ),
+                    },
+                    {
+                        id: 'system-status',
+                        label: _('nav.system-status'),
+                        routerLink: ['/settings', 'system-status'],
+                        icon: 'rack-server',
+                        statusBadge: this.healthCheckService.status$.pipe(
+                            map(status => ({
+                                type: status === 'ok' ? 'success' : 'error',
+                                propagateToSection: status === 'error',
+                            })),
+                        ),
+                    },
+                ],
+            },
         ]);
     }
 

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

@@ -11,7 +11,6 @@ import { getDefaultUiLanguage } from './common/utilities/get-default-ui-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 { 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 +48,6 @@ import { SharedModule } from './shared/shared.module';
         OverlayHostComponent,
         NotificationComponent,
         UiLanguageSwitcherDialogComponent,
-        JobQueueLinkComponent,
         ChannelSwitcherComponent,
     ],
 })

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

@@ -21,7 +21,6 @@ export * from './common/version';
 export * from './components/app-shell/app-shell.component';
 export * from './components/breadcrumb/breadcrumb.component';
 export * from './components/channel-switcher/channel-switcher.component';
-export * from './components/job-queue-link/job-queue-link.component';
 export * from './components/main-nav/main-nav.component';
 export * from './components/notification/notification.component';
 export * from './components/overlay-host/overlay-host.component';

packages/admin-ui/src/lib/settings/src/components/job-list/job-list.component.ts

@@ -15,7 +15,7 @@ import { Observable, timer } from 'rxjs';
 import { filter, map, takeUntil } from 'rxjs/operators';
 
 @Component({
-    selector: 'vdr-job-link',
+    selector: 'vdr-job-list',
     templateUrl: './job-list.component.html',
     styleUrls: ['./job-list.component.scss'],
     changeDetection: ChangeDetectionStrategy.OnPush,
@@ -37,7 +37,7 @@ export class JobListComponent extends BaseListComponent<GetAllJobs.Query, GetAll
         super(router, route);
         super.setQueryFn(
             (...args: any[]) => this.dataService.settings.getAllJobs(...args),
-            (data) => data.jobs,
+            data => data.jobs,
             (skip, take) => {
                 const queueFilter =
                     this.queueFilter.value === 'all' ? null : { queueName: { eq: this.queueFilter.value } };
@@ -71,9 +71,9 @@ export class JobListComponent extends BaseListComponent<GetAllJobs.Query, GetAll
             });
         this.queues$ = this.dataService.settings
             .getJobQueues()
-            .mapStream((res) => res.jobQueues)
+            .mapStream(res => res.jobQueues)
             .pipe(
-                map((queues) => {
+                map(queues => {
                     return [{ name: 'all', running: true }, ...queues];
                 }),
             );