refactor(admin-ui): Create new lazy-loaded SystemModule

packages/admin-ui/scripts/build-public-api.js

@@ -19,22 +19,22 @@ const MODULES = [
     'marketing',
     'order',
     'settings',
+    'system',
 ];
 
 for (const moduleDir of MODULES) {
     const modulePath = path.join(SOURCES_DIR, moduleDir, 'src');
 
     const files = [];
-    forMatchingFiles(modulePath, APP_SOURCE_FILE_PATTERN, filename => {
+    forMatchingFiles(modulePath, APP_SOURCE_FILE_PATTERN, (filename) => {
         if (!EXCLUDED_PATTERN.test(filename)) {
-            const relativeFilename = '.' + filename.replace(modulePath, '')
-                .replace(/\\/g, '/')
-                .replace(/\.ts$/, '');
+            const relativeFilename =
+                '.' + filename.replace(modulePath, '').replace(/\\/g, '/').replace(/\.ts$/, '');
             files.push(relativeFilename);
         }
     });
     const header = `// This file was generated by the build-public-api.ts script\n`;
-    const fileContents = header + files.map(f => `export * from '${f}';`).join('\n') + '\n';
+    const fileContents = header + files.map((f) => `export * from '${f}';`).join('\n') + '\n';
     const publicApiFile = path.join(modulePath, 'public_api.ts');
     fs.writeFileSync(publicApiFile, fileContents, 'utf8');
     console.log(`Created ${publicApiFile}`);

packages/admin-ui/src/app/app.routes.ts

@@ -37,6 +37,10 @@ export const routes: Route[] = [
                 path: 'settings',
                 loadChildren: () => import('@vendure/admin-ui/settings').then(m => m.SettingsModule),
             },
+            {
+                path: 'system',
+                loadChildren: () => import('@vendure/admin-ui/system').then(m => m.SystemModule),
+            },
         ],
     },
 ];

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

@@ -175,7 +175,7 @@ export class MainNavComponent implements OnInit {
                     {
                         id: 'job-queue',
                         label: _('nav.job-queue'),
-                        routerLink: ['/settings', 'jobs'],
+                        routerLink: ['/system', 'jobs'],
                         icon: 'tick-chart',
                         statusBadge: this.jobQueueService.activeJobs$.pipe(
                             startWith([]),
@@ -191,7 +191,7 @@ export class MainNavComponent implements OnInit {
                     {
                         id: 'system-status',
                         label: _('nav.system-status'),
-                        routerLink: ['/settings', 'system-status'],
+                        routerLink: ['/system', 'system-status'],
                         icon: 'rack-server',
                         statusBadge: this.healthCheckService.status$.pipe(
                             map(status => ({

packages/admin-ui/src/lib/core/src/providers/health-check/health-check.service.ts

@@ -1,9 +1,10 @@
 import { HttpClient } from '@angular/common/http';
 import { Injectable } from '@angular/core';
-import { getServerLocation } from '@vendure/admin-ui/core';
 import { merge, Observable, of, Subject, timer } from 'rxjs';
 import { catchError, map, shareReplay, switchMap, throttleTime } from 'rxjs/operators';
 
+import { getServerLocation } from '../../data/utils/get-server-location';
+
 export type SystemStatus = 'ok' | 'error';
 
 export interface HealthCheckResult {

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

@@ -7,9 +7,6 @@ export * from './components/channel-list/channel-list.component';
 export * from './components/country-detail/country-detail.component';
 export * from './components/country-list/country-list.component';
 export * from './components/global-settings/global-settings.component';
-export * from './components/health-check/health-check.component';
-export * from './components/job-list/job-list.component';
-export * from './components/job-state-label/job-state-label.component';
 export * from './components/payment-method-detail/payment-method-detail.component';
 export * from './components/payment-method-list/payment-method-list.component';
 export * from './components/permission-grid/permission-grid.component';

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

@@ -10,9 +10,6 @@ import { ChannelListComponent } from './components/channel-list/channel-list.com
 import { CountryDetailComponent } from './components/country-detail/country-detail.component';
 import { CountryListComponent } from './components/country-list/country-list.component';
 import { GlobalSettingsComponent } from './components/global-settings/global-settings.component';
-import { HealthCheckComponent } from './components/health-check/health-check.component';
-import { JobListComponent } from './components/job-list/job-list.component';
-import { JobStateLabelComponent } from './components/job-state-label/job-state-label.component';
 import { PaymentMethodDetailComponent } from './components/payment-method-detail/payment-method-detail.component';
 import { PaymentMethodListComponent } from './components/payment-method-list/payment-method-list.component';
 import { PermissionGridComponent } from './components/permission-grid/permission-grid.component';
@@ -60,15 +57,12 @@ import { settingsRoutes } from './settings.routes';
         TestAddressFormComponent,
         ShippingMethodTestResultComponent,
         ShippingEligibilityTestResultComponent,
-        JobListComponent,
-        JobStateLabelComponent,
         ZoneListComponent,
         AddCountryToZoneDialogComponent,
         ZoneMemberListComponent,
         ZoneMemberListHeaderDirective,
         ZoneMemberControlsDirective,
         ZoneDetailDialogComponent,
-        HealthCheckComponent,
     ],
 })
 export class SettingsModule {}

packages/admin-ui/src/lib/settings/src/settings.routes.ts

@@ -20,8 +20,6 @@ import { ChannelListComponent } from './components/channel-list/channel-list.com
 import { CountryDetailComponent } from './components/country-detail/country-detail.component';
 import { CountryListComponent } from './components/country-list/country-list.component';
 import { GlobalSettingsComponent } from './components/global-settings/global-settings.component';
-import { HealthCheckComponent } from './components/health-check/health-check.component';
-import { JobListComponent } from './components/job-list/job-list.component';
 import { PaymentMethodDetailComponent } from './components/payment-method-detail/payment-method-detail.component';
 import { PaymentMethodListComponent } from './components/payment-method-list/payment-method-list.component';
 import { RoleDetailComponent } from './components/role-detail/role-detail.component';
@@ -182,20 +180,6 @@ export const settingsRoutes: Route[] = [
             breadcrumb: _('breadcrumb.global-settings'),
         },
     },
-    {
-        path: 'jobs',
-        component: JobListComponent,
-        data: {
-            breadcrumb: _('breadcrumb.job-queue'),
-        },
-    },
-    {
-        path: 'system-status',
-        component: HealthCheckComponent,
-        data: {
-            breadcrumb: _('breadcrumb.system-status'),
-        },
-    },
 ];
 
 export function administratorBreadcrumb(data: any, params: any) {

packages/admin-ui/src/lib/system/ng-package.json

@@ -0,0 +1,7 @@
+{
+  "lib": {
+    "styleIncludePaths": [
+      "../static/styles"
+    ]
+  }
+}

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

@@ -0,0 +1,6 @@
+// This file was generated by the build-public-api.ts script
+export * from './components/health-check/health-check.component';
+export * from './components/job-list/job-list.component';
+export * from './components/job-state-label/job-state-label.component';
+export * from './system.module';
+export * from './system.routes';

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

@@ -0,0 +1,15 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { RouterModule } from '@angular/router';
+import { SharedModule } from '@vendure/admin-ui/core';
+
+import { HealthCheckComponent } from './components/health-check/health-check.component';
+import { JobListComponent } from './components/job-list/job-list.component';
+import { JobStateLabelComponent } from './components/job-state-label/job-state-label.component';
+import { systemRoutes } from './system.routes';
+
+@NgModule({
+    declarations: [HealthCheckComponent, JobListComponent, JobStateLabelComponent],
+    imports: [SharedModule, RouterModule.forChild(systemRoutes)],
+})
+export class SystemModule {}

packages/admin-ui/src/lib/system/src/system.routes.ts

@@ -0,0 +1,22 @@
+import { Route } from '@angular/router';
+import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
+
+import { HealthCheckComponent } from './components/health-check/health-check.component';
+import { JobListComponent } from './components/job-list/job-list.component';
+
+export const systemRoutes: Route[] = [
+    {
+        path: 'jobs',
+        component: JobListComponent,
+        data: {
+            breadcrumb: _('breadcrumb.job-queue'),
+        },
+    },
+    {
+        path: 'system-status',
+        component: HealthCheckComponent,
+        data: {
+            breadcrumb: _('breadcrumb.system-status'),
+        },
+    },
+];

packages/admin-ui/tsconfig.json

@@ -53,6 +53,9 @@
       ],
       "@vendure/admin-ui/settings": [
         "./src/lib/settings/src/public_api"
+      ],
+      "@vendure/admin-ui/system": [
+        "./src/lib/system/src/public_api"
       ]
     }
   }

packages/ui-devkit/scaffold/src/app.routes.ts

@@ -39,6 +39,10 @@ export const routes: Route[] = [
                 path: 'settings',
                 loadChildren: () => import('@vendure/admin-ui/settings').then(m => m.SettingsModule),
             },
+            {
+                path: 'system',
+                loadChildren: () => import('@vendure/admin-ui/system').then(m => m.SystemModule),
+            },
             ...extensionRoutes,
         ],
     },