Merge pull request #483 from NUM-Forschungsdatenplattform/NUM-2242

Num 2242

src/app/app-routing.module.ts

@@ -19,7 +19,7 @@ import { Routes, RouterModule } from '@angular/router'
 import { AuthGuard } from './core/auth/guards/auth.guard'
 import { RoleGuard } from './core/auth/guards/role.guard'
 import { CanDeactivateSearchGuard } from './modules/search/can-deactivate-search.guard'
-import { AvailableRoles } from './shared/models/available-roles.enum'
+import { AvailableRoles, allRoles } from './shared/models/available-roles.enum'
 import { UserManualUrlResolver } from './shared/resolvers/usermanualurl.resolver'
 
 export const routes: Routes = [

src/app/core/constants/constants.ts

@@ -15,3 +15,6 @@
  */
 
 export const PARAMETER_REGEX = /\$\w+/g
+
+export const HEALTHCHECK = 'HEALTHCHECK'
+export const USERMANUAL = 'USERMANUAL'

src/app/core/constants/navigation.ts

@@ -14,8 +14,9 @@
  * limitations under the License.
  */
 
-import { AvailableRoles } from 'src/app/shared/models/available-roles.enum'
+import { AvailableRoles, allRoles } from 'src/app/shared/models/available-roles.enum'
 import INavItem from '../../layout/models/nav-item.interface'
+import { HEALTHCHECK, USERMANUAL } from './constants'
 
 export const mainNavItems: INavItem[] = [
   {
@@ -171,6 +172,22 @@ export const mainNavItems: INavItem[] = [
     translationKey: 'NAVIGATION.USER_MANUAL',
   },
 ]
+export const mainNavItemsExternal: INavItem[] = [
+  /*  
+  preparaion for user manual if available
+  {
+    icon: 'book-open',
+    translationKey: 'NAVIGATION.USER_MANUAL',
+    id: USERMANUAL,
+  }, */
+  {
+    icon: 'file-waveform',
+    translationKey: 'NAVIGATION.HEALTH_CHECK',
+    roles: allRoles,
+    id: HEALTHCHECK,
+    isExternal: true,
+  },
+]
 
 export const secondaryNavItemsLoggedIn: INavItem[] = [
   {

src/app/core/services/aql/aql.service.ts

@@ -75,7 +75,6 @@ export class AqlService {
       .subscribe((filterResult) => this.filteredAqlsSubject$.next(filterResult))
 
     this.translateService.onLangChange.subscribe((event) => {
-      console.log('lang change', event.lang)
       this.currentLang = event.lang || 'en'
       this.setFilter(this.filterSet)
     })

src/app/layout/components/side-menu/side-menu.component.html

@@ -39,6 +39,18 @@
       <div>{{ item.translationKey | translate }}</div>
     </a>
   </ng-template>
+  <ng-template ngFor let-item [ngForOf]="mainNavItemsExternal">
+    <a
+      *numUserHasRole="item.roles"
+      mat-list-item
+      class="num-mat-list-item"
+      (click)="menuItemClicked($event, item)"
+      [attr.data-test]="'side-menu__main-nav__' + item.translationKey"
+    >
+      <fa-icon size="lg" [fixedWidth]="true" [icon]="item.icon"></fa-icon>
+      <div>{{ item.translationKey | translate }}</div>
+    </a>
+  </ng-template>
 
   <ng-template [ngIf]="isLoggedIn">
     <mat-divider class="num-d-c--g num-d-w--1"></mat-divider>

src/app/layout/components/side-menu/side-menu.component.spec.ts

@@ -29,6 +29,8 @@ import { mockNavigationLinks } from '../../../../mocks/data-mocks/navigation-lin
 import { DialogService } from 'src/app/core/services/dialog/dialog.service'
 import { COOKIE_DIALOG_CONFIG } from './constants'
 import { Component } from '@angular/core'
+import { HttpClientTestingModule } from '@angular/common/http/testing'
+import { AppConfigService } from 'src/app/config/app-config.service'
 
 describe('SideMenuComponent', () => {
   let component: SideMenuComponent
@@ -44,6 +46,10 @@ describe('SideMenuComponent', () => {
     initCodeFlow: () => {},
   } as OAuthService
 
+  const appConfig = {
+    config: { api: { baseUrl: 'foo.bar' } },
+  } as unknown as AppConfigService
+
   const mockContentService = {
     getNavigationLinks: jest.fn(),
   } as unknown as ContentService
@@ -84,6 +90,7 @@ describe('SideMenuComponent', () => {
         ]),
         TranslateModule.forRoot(),
         DirectivesModule,
+        HttpClientTestingModule,
       ],
       providers: [
         {
@@ -102,6 +109,10 @@ describe('SideMenuComponent', () => {
           provide: DialogService,
           useValue: mockDialogService,
         },
+        {
+          provide: AppConfigService,
+          useValue: appConfig,
+        },
       ],
     }).compileComponents()
   })
@@ -129,21 +140,23 @@ describe('SideMenuComponent', () => {
         icon: 'test',
         routeTo: 'test',
         translationKey: 'test',
+        isExternal: false,
       },
     ]
     userInfoSubject$.next(userInfo)
     fixture.detectChanges()
     const nativeElement = fixture.debugElement.nativeElement
     const button = nativeElement.querySelector('.mat-list-item')
     button.click()
-    expect(component.toggleSideMenu.emit).toHaveBeenCalled()
+    expect(component.toggleSideMenu.emit).toHaveBeenCalledTimes(1)
   })
 
   it('Calls logout function when logout button is clicked', () => {
     const navItem = {
       icon: 'test',
       routeTo: '#logout',
       translationKey: 'test',
+      isExternal: false,
     }
     component.mainNavItems = null
     component.secondaryNavItems = [navItem]
@@ -166,6 +179,7 @@ describe('SideMenuComponent', () => {
       icon: 'test',
       routeTo: '#login',
       translationKey: 'test',
+      isExternal: false,
     }
     beforeEach(() => {
       component.mainNavItems = null

src/app/layout/components/side-menu/side-menu.component.ts

@@ -19,6 +19,7 @@ import { routes } from '../../../app-routing.module'
 import INavItem from '../../models/nav-item.interface'
 import {
   mainNavItems,
+  mainNavItemsExternal,
   secondaryNavItemsLoggedIn,
   secondaryNavItemsLoggedOut,
 } from '../../../core/constants/navigation'
@@ -27,6 +28,9 @@ import { Subscription } from 'rxjs'
 import { ContentService } from '../../../core/services/content/content.service'
 import { DialogService } from 'src/app/core/services/dialog/dialog.service'
 import { COOKIE_DIALOG_CONFIG } from './constants'
+import { HttpClient } from '@angular/common/http'
+import { AppConfigService } from 'src/app/config/app-config.service'
+import { HEALTHCHECK } from 'src/app/core/constants/constants'
 
 @Component({
   selector: 'num-side-menu',
@@ -37,22 +41,29 @@ export class SideMenuComponent implements OnInit, OnDestroy {
   private subscriptions = new Subscription()
   routes = routes
   mainNavItems = mainNavItems
+  mainNavItemsExternal = mainNavItemsExternal
   secondaryNavItems: INavItem[]
+  baseUrl: string
 
   isLoggedIn = false
 
+  healthCheckUrl: string
+
   @Output() toggleSideMenu = new EventEmitter()
 
   constructor(
     private authService: AuthService,
     public contentService: ContentService,
-    private dialogService: DialogService
+    private dialogService: DialogService,
+    private httpClient: HttpClient,
+    private appConfig: AppConfigService
   ) {}
 
   ngOnInit(): void {
     this.subscriptions.add(
       this.authService.userInfoObservable$.subscribe(() => this.handleUserInfo())
     )
+    this.getDynamicExternalURLs()
     mainNavItems.forEach((item) => {
       const roles = routes.filter((route) => route.path === item.routeTo)[0].data?.roles
       item.roles = roles
@@ -80,11 +91,27 @@ export class SideMenuComponent implements OnInit, OnDestroy {
     } else if (item?.routeTo === '#login') {
       this.handleLoginWithDialog()
     }
+    // handle dynamic external urls
+    if (item && item.isExternal) {
+      switch (item.id) {
+        case HEALTHCHECK:
+          window.open(this.healthCheckUrl, '_blank')
+          break
+      }
+    }
     const target = $event.currentTarget as HTMLElement
     target.blur()
     this.toggleSideMenu.emit()
   }
 
+  getDynamicExternalURLs(): void {
+    this.httpClient
+      .get(`${this.appConfig.config.api.baseUrl}/admin/status-url`)
+      .subscribe((response: any) => {
+        this.healthCheckUrl = response.systemStatusUrl
+      })
+  }
+
   handleLoginWithDialog(): void {
     const dialogRef = this.dialogService.openDialog(COOKIE_DIALOG_CONFIG)
     dialogRef.afterClosed().subscribe((confirmResult: boolean | undefined) => {

src/app/layout/custom-icons/file-waveform.ts

@@ -0,0 +1,29 @@
+/**
+ * Copyright 2021 Vitagroup AG
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+const prefix = 'fas'
+const iconName = 'file-waveform'
+const width = 512
+const height = 512
+const ligatures = []
+const unicode = null
+const path =
+  'M96 0C60.7 0 32 28.7 32 64V288H144c6.1 0 11.6 3.4 14.3 8.8L176 332.2l49.7-99.4c2.7-5.4 8.3-8.8 14.3-8.8s11.6 3.4 14.3 8.8L281.9 288H352c8.8 0 16 7.2 16 16s-7.2 16-16 16H272c-6.1 0-11.6-3.4-14.3-8.8L240 275.8l-49.7 99.4c-2.7 5.4-8.3 8.8-14.3 8.8s-11.6-3.4-14.3-8.8L134.1 320H32V448c0 35.3 28.7 64 64 64H352c35.3 0 64-28.7 64-64V160H288c-17.7 0-32-14.3-32-32V0H96zM288 0V128H416L288 0z'
+export const fileWaveform = {
+  prefix,
+  iconName,
+  icon: [width, height, ligatures, unicode, path],
+} as any

src/app/layout/custom-icons/index.ts

@@ -16,5 +16,6 @@
 
 import { buildingLock } from './building-lock'
 import { numWelcome } from './num-welcome'
+import { fileWaveform } from './file-waveform'
 
-export const CUSTOM_ICONS = [numWelcome, buildingLock]
+export const CUSTOM_ICONS = [numWelcome, buildingLock, fileWaveform]

src/app/layout/models/nav-item.interface.ts

@@ -17,11 +17,12 @@
 import { AvailableRoles } from 'src/app/shared/models/available-roles.enum'
 
 export default interface INavItem {
-  routeTo: string
+  routeTo?: string
   icon?: string | string[]
   translationKey: string
   tabNav?: INavItem[]
   id?: string
   roles?: AvailableRoles[]
   disabled?: boolean
+  isExternal?: boolean
 }

src/app/modules/organization-management/components/organization-management/organization-management.component.ts

@@ -22,7 +22,6 @@ import { Subscription } from 'rxjs'
 import { DEFAULT_ORGANIZATION_FILTER } from 'src/app/core/constants/default-filter-organization'
 import { OrganizationsTableComponent } from '../organizations-table/organizations-table.component'
 import { OrganizationUserFilterChipId } from 'src/app/shared/models/organization/organization-filter-chip.enum'
-import { forEach } from 'lodash'
 
 @Component({
   selector: 'num-organization-management',

src/app/shared/constants.ts

@@ -29,3 +29,8 @@ export const USER_MANUAL_LINK = {
   EN: 'https://num-portal-webapp.readthedocs.io/en/latest/',
   DE: 'https://num-portal-webapp.readthedocs.io/de/latest/',
 }
+
+export const HEALTH_CHECK_URL = {
+  EN: 'https://health.num-codex.de/',
+  DE: 'https://health.num-codex.de/',
+}

src/app/shared/models/available-roles.enum.ts

@@ -25,3 +25,13 @@ export enum AvailableRoles {
   Manager = 'MANAGER',
   CriteriaEditor = 'CRITERIA_EDITOR',
 }
+export const allRoles = [
+  AvailableRoles.Researcher,
+  AvailableRoles.StudyCoordinator,
+  AvailableRoles.ContentAdmin,
+  AvailableRoles.OrganizationAdmin,
+  AvailableRoles.SuperAdmin,
+  AvailableRoles.StudyApprover,
+  AvailableRoles.Manager,
+  AvailableRoles.CriteriaEditor,
+]

src/assets/i18n/de.json

@@ -80,7 +80,8 @@
     "SEARCH": "Suche",
     "SIGNOUT": "Abmelden",
     "SIGNIN": "Anmelden",
-    "USER_MANUAL": "Benutzerhandbuch"
+    "USER_MANUAL": "Benutzerhandbuch",
+    "HEALTH_CHECK": "Systemstatus & Meldungen"
   },
   "PROFILE": {
     "EDIT_HEADER": "Benutzerkonto bearbeiten",

src/assets/i18n/en.json

@@ -80,7 +80,8 @@
     "SEARCH": "Search",
     "SIGNOUT": "Sign out",
     "SIGNIN": "Sign in",
-    "USER_MANUAL": "User Manual"
+    "USER_MANUAL": "User Manual",
+    "HEALTH_CHECK": "System Status & Messages"
   },
   "PROFILE": {
     "EDIT_HEADER": "Edit User Account",