LNK-4339: Internal Admin UI: Update main Menu bar to match Site map (#1197)

* Update menu

* Add report dashboard page

* Add placeholder for future Guided Onboarding management

* Add placeholder page for shared query plans

* Add app-configuration placeholder page

* Add placeholder page for Kafka UI. Add links to Grafana and Kafka UI with new app.config.json settings.

* Add environment variables for Grafana and Kafka urls. Update main.js to read them.

* Add Normalization Operations to menu

---------

Co-authored-by: nmLantana <nick.montalto@lantanagroup.com>

Author: johnbritton

Web/Admin.UI/server/main.js

@@ -128,5 +128,15 @@ function getConfig() {
     }
   }
 
+  if (process.env.GRAFANA_URL !== undefined) {
+    config.grafanaUrl = process.env.GRAFANA_URL;
+    console.log('Found GRAFANA_URL:', config.grafanaUrl);
+  }
+
+  if (process.env.KAFKA_URL !== undefined) {
+    config.kafkaUrl = process.env.KAFKA_URL;
+    console.log('Found KAFKA_URL:', config.kafkaUrl);
+  }
+
   return config;
 }

Web/Admin.UI/src/app/app-routing.module.ts

@@ -22,11 +22,15 @@ const routes: Routes = [
   { path: 'validation-config', loadComponent: () => import('./components/validation-config/validation-config.component').then(mod => mod.ValidationConfigComponent) },
   { path: 'monitor/health', loadComponent: () => import('./components/monitor/link-health-check/link-health-check.component').then(mod => mod.LinkHealthCheckComponent) },
   { path: 'themes', loadComponent: () => import('./components/theme-showcase/theme-showcase.component').then(mod => mod.ThemeShowcaseComponent) },
+  { path: 'reports', loadComponent: () => import('./components/reports/reports-dashboard/reports-dashboard.component').then(mod => mod.ReportsDashboardComponent) },
   { path: 'reports/generate-report', loadComponent: () => import('./components/reports/generate-report/generate-report-form.component').then(mod => mod.GenerateReportFormComponent) },
   { path: 'unauthorized', loadComponent: () => import('./components/core/unauthorized/unauthorized.component').then(mod => mod.UnauthorizedComponent) },
   { path: 'sub-pre-qual-report/facility/:facilityId/report/:submissionId', loadComponent: () => import('./components/sub-pre-qual-report/sub-pre-qual-report.component').then(mod => mod.SubPreQualReportComponent) },
   { path: 'validation-config/validation-categories', loadComponent: () => import('./components/validation-config/validation-categories/validation-categories-list/validation-categories-list.component').then(mod => mod.ValidationCategoriesComponent) },
   { path: 'validation-config/validation-categories/:id/edit', loadComponent: () => import('./components/validation-config/validation-categories/edit-validation-category/edit-validation-category.component').then(mod => mod.EditValidationCategoryComponent) },
+  { path: 'query-plans', loadComponent: () => import('./components/query-plans/query-plans-dashboard/query-plans-dashboard.component').then(mod => mod.QueryPlansDashboardComponent) },
+  { path: 'app-configuration', loadComponent: () => import('./components/app-configuration/app-configuration-dashboard/app-configuration-dashboard.component').then(mod => mod.AppConfigurationDashboardComponent) },
+  { path: 'kafka', loadComponent: () => import('./components/kafka/kafka-dashboard/kafka-dashboard.component').then(mod => mod.KafkaDashboardComponent) },
   { path: '**', redirectTo: '' },
 ];
 

Web/Admin.UI/src/app/app.component.html

@@ -24,11 +24,11 @@
   </span>
 </mat-toolbar>
 <div>
-  <app-link-nav-bar></app-link-nav-bar>
+  <link-nav-bar></link-nav-bar>
   <!-- <app-breadcrumb></app-breadcrumb> -->
 </div>
 <div>
   <app-loading-indicator></app-loading-indicator>
   <router-outlet></router-outlet>
 </div>
-<app-footer></app-footer>
+<app-footer></app-footer>

Web/Admin.UI/src/app/app.module.ts

@@ -12,7 +12,6 @@ import { BrowserModule } from '@angular/platform-browser';
 import { FooterComponent } from "./components/core/footer/footer.component";
 import { HttpInterceptorProviders } from './interceptors/interceptor.barrel';
 import { LayoutModule } from '@angular/cdk/layout';
-import { LinkAdminSubnavBarComponent } from "./components/core/link-admin-subnav-bar/link-admin-subnav-bar.component";
 import { LinkNavBarComponent } from './components/core/link-nav-bar/link-nav-bar.component';
 import { LoadingIndicatorComponent } from './components/core/loading-indicator/loading-indicator.component';
 import { MatButtonModule } from '@angular/material/button';
@@ -35,6 +34,9 @@ import { VdButtonComponent } from './components/core/vd-button/vd-button.compone
 import { VdIconComponent } from './components/core/vd-icon/vd-icon.component';
 import { provideCharts, withDefaultRegisterables } from 'ng2-charts';
 import { TenantSearchBarComponent } from "./components/core/tenant-search-bar/tenant-search-bar/tenant-search-bar.component";
+import { QueryPlansDashboardComponent } from './components/query-plans/query-plans-dashboard/query-plans-dashboard.component';
+import { AppConfigurationDashboardComponent } from './components/app-configuration/app-configuration-dashboard/app-configuration-dashboard.component';
+import { KafkaDashboardComponent } from './components/kafka/kafka-dashboard/kafka-dashboard.component';
 
 export function initConfig(appConfig: AppConfigService, oauthService: OAuthService, authService: AuthenticationService, oauthModuleConfig: OAuthModuleConfig) {
   const configPromise = appConfig.loadConfig()
@@ -99,13 +101,15 @@ export function initConfig(appConfig: AppConfigService, oauthService: OAuthServi
     }),
     VdIconComponent,
     VdButtonComponent,
-    LinkAdminSubnavBarComponent,
     SubPreQualReportComponent,
     SubPreQualReportBannerComponent,
     SubPreQualReportMetaComponent,
     SubPreQualReportSummaryComponent,
     SubPreQualReportCategoriesTableComponent,
-    TenantSearchBarComponent
+    TenantSearchBarComponent,
+    QueryPlansDashboardComponent,
+    AppConfigurationDashboardComponent,
+    KafkaDashboardComponent
 ],
   providers: [
     {

Web/Admin.UI/src/app/components/app-configuration/app-configuration-dashboard/app-configuration-dashboard.component.html

@@ -0,0 +1,3 @@
+<div class="content">
+  <p>Placeholder page for managing app configuration settings.</p>
+</div>

Web/Admin.UI/src/app/components/app-configuration/app-configuration-dashboard/app-configuration-dashboard.component.scss

@@ -0,0 +1 @@
+@use '../../../../styles/core.scss';

Web/Admin.UI/src/app/components/app-configuration/app-configuration-dashboard/app-configuration-dashboard.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AppConfigurationDashboardComponent } from './app-configuration-dashboard.component';
+
+describe('AppConfigurationDashboardComponent', () => {
+  let component: AppConfigurationDashboardComponent;
+  let fixture: ComponentFixture<AppConfigurationDashboardComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [AppConfigurationDashboardComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(AppConfigurationDashboardComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

Web/Admin.UI/src/app/components/app-configuration/app-configuration-dashboard/app-configuration-dashboard.component.ts

@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-app-configuration-dashboard',
+  imports: [],
+  templateUrl: './app-configuration-dashboard.component.html',
+  styleUrl: './app-configuration-dashboard.component.scss'
+})
+export class AppConfigurationDashboardComponent {
+
+}