feat: Configurable fontend, configuration for statistics

CESNET · Feb 1, 2022 · cbe2535 · cbe2535
1 parent 16f7743
commit cbe2535
Show file tree

Hide file tree

Showing 7 changed files with 341 additions and 90 deletions.
diff --git a/gui/package-lock.json b/gui/package-lock.json
diff --git a/gui/package.json b/gui/package.json
@@ -28,18 +28,18 @@
     "@fortawesome/free-solid-svg-icons": "5.15.4",
     "@ngx-translate/core": "14.0.0",
     "@ngx-translate/http-loader": "7.0.0",
+    "@swimlane/ngx-charts": "^20.0.1",
+    "angular-bootstrap-md": "12.2.0",
     "bootstrap": "4.6.1",
+    "chart.js": "^3.7.0",
     "core-js": "3.20.3",
     "eslint": "8.8.0",
     "font-awesome": "4.7.0",
     "hammerjs": "2.0.8",
     "jquery": "3.6.0",
     "popper.js": "1.16.1",
     "rxjs": "7.5.2",
-    "zone.js": "0.11.4",
-    "@swimlane/ngx-charts": "^20.0.1",
-    "angular-bootstrap-md": "12.2.0",
-    "chart.js": "^3.7.0"
+    "zone.js": "0.11.4"
   },
   "devDependencies": {
     "@angular-devkit/build-angular": "13.2.1",

diff --git a/gui/src/app/app.module.ts b/gui/src/app/app.module.ts
@@ -1,5 +1,5 @@
 import { BrowserModule } from '@angular/platform-browser';
-import { NgModule } from '@angular/core';
+import {APP_INITIALIZER, NgModule} from '@angular/core';
 
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
@@ -20,14 +20,29 @@ import {AttributeValuePipe} from './attribute-value.pipe';
 import {DocumentSignItemLocalePipe} from "./document-sign-item-locale.pipe";
 import {LanguageEntryPipe} from "./language-entry.pipe";
 import { HammerModule} from '@angular/platform-browser';
-import { ChartsModule } from 'angular-bootstrap-md';
 import { NgxChartsModule } from '@swimlane/ngx-charts';
 import {StatisticsModule} from "./statistics/statistics.module";
+import {ConfService} from "./shared/conf-service";
+import {map} from "rxjs";
 
 export function HttpLoaderFactory(http: HttpClient) {
   return new TranslateHttpLoader(http, './assets/i18n/', '.json');
 }
 
+function initialize(http: HttpClient, config: ConfService) {
+  return (): Promise<boolean> => {
+    return new Promise<boolean>((resolve: (a: boolean) => void): void => {
+      http.get('/assets/config/config.json')
+        .pipe(
+          map((x: ConfService) => {
+            config.statisticsDisplayedAttributes = x.statisticsDisplayedAttributes;
+            resolve(true);
+          })
+        ).subscribe();
+    });
+  };
+}
+
 @NgModule({
   declarations: [
     AppComponent,
@@ -57,11 +72,20 @@ export function HttpLoaderFactory(http: HttpClient) {
       MatDialogModule,
       MatTabsModule,
       HammerModule,
-      ChartsModule,
       StatisticsModule,
       NgxChartsModule
   ],
-  providers: [ ],
+  providers: [
+    {
+      provide: APP_INITIALIZER,
+      useFactory: initialize,
+      deps: [
+        HttpClient,
+        ConfService
+      ],
+      multi: true
+    }
+  ],
   bootstrap: [AppComponent]
 })
 export class AppModule {}
diff --git a/gui/src/app/shared/conf-service.ts b/gui/src/app/shared/conf-service.ts
@@ -0,0 +1,10 @@
+import { Injectable } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class ConfService {
+  "statisticsDisplayedAttributes": string[];
+
+  constructor() { }
+}
diff --git a/gui/src/app/statistics/facilities-services-list/facilities-services-list.component.html b/gui/src/app/statistics/facilities-services-list/facilities-services-list.component.html
@@ -73,19 +73,19 @@ <h4>
           </div>
           <table *ngIf="!isLoadingTable" mat-table  matSort #sortProduction matSortActive="name" matSortDirection="asc"
                  matSortDisableClear [dataSource]="productionServicesDataSource" class="w-100">
-            <ng-container matColumnDef="name">
+            <ng-container *ngIf="displayedColumns.includes('name')" matColumnDef="name">
               <th mat-header-cell *matHeaderCellDef class="w-20" mat-sort-header>{{ 'FACILITIES.NAME' | translate }}</th>
               <td mat-cell *matCellDef="let providedService">{{ providedService.name | itemLocale }}</td>
             </ng-container>
-            <ng-container matColumnDef="description">
+            <ng-container *ngIf="displayedColumns.includes('description')" matColumnDef="description">
               <th mat-header-cell *matHeaderCellDef class="w-25" mat-sort-header>{{ 'FACILITIES.DESCRIPTION' | translate }}</th>
               <td mat-cell *matCellDef="let providedService">{{ providedService.description | itemLocale }}</td>
             </ng-container>
-            <ng-container matColumnDef="environment">
+            <ng-container *ngIf="displayedColumns.includes('environment')" matColumnDef="environment">
               <th mat-header-cell *matHeaderCellDef class="w-10" mat-sort-header>{{ 'FACILITIES.ENVIRONMENT' | translate }}</th>
               <td mat-cell *matCellDef="let providedService">{{ providedService.environment | facilityEnvironment }}</td>
             </ng-container>
-            <ng-container matColumnDef="protocol">
+            <ng-container *ngIf="displayedColumns.includes('protocol')" matColumnDef="protocol">
               <th mat-header-cell *matHeaderCellDef class="w-10" mat-sort-header>{{ 'FACILITIES.PROTOCOL' | translate }}</th>
               <td mat-cell *matCellDef="let providedService">{{ providedService.protocol }}</td>
             </ng-container>
@@ -115,19 +115,19 @@ <h4>
             </div>
             <table *ngIf="!isLoadingTable" mat-table  matSort #sortProduction matSortActive="name" matSortDirection="asc"
                    matSortDisableClear [dataSource]="productionServicesDataSource" class="w-100">
-              <ng-container matColumnDef="name">
+              <ng-container *ngIf="displayedColumns.includes('name')" matColumnDef="name">
                 <th mat-header-cell *matHeaderCellDef class="w-20" mat-sort-header>{{ 'FACILITIES.NAME' | translate }}</th>
                 <td mat-cell *matCellDef="let providedService">{{ providedService.name | itemLocale }}</td>
               </ng-container>
-              <ng-container matColumnDef="description">
+              <ng-container *ngIf="displayedColumns.includes('description')" matColumnDef="description">
                 <th mat-header-cell *matHeaderCellDef class="w-25" mat-sort-header>{{ 'FACILITIES.DESCRIPTION' | translate }}</th>
                 <td mat-cell *matCellDef="let providedService">{{ providedService.description | itemLocale }}</td>
               </ng-container>
-              <ng-container matColumnDef="environment">
+              <ng-container *ngIf="displayedColumns.includes('environment')" matColumnDef="environment">
                 <th mat-header-cell *matHeaderCellDef class="w-10" mat-sort-header>{{ 'FACILITIES.ENVIRONMENT' | translate }}</th>
                 <td mat-cell *matCellDef="let providedService">{{ providedService.environment | facilityEnvironment }}</td>
               </ng-container>
-              <ng-container matColumnDef="protocol">
+              <ng-container *ngIf="displayedColumns.includes('protocol')" matColumnDef="protocol">
                 <th mat-header-cell *matHeaderCellDef class="w-10" mat-sort-header>{{ 'FACILITIES.PROTOCOL' | translate }}</th>
                 <td mat-cell *matCellDef="let providedService">{{ providedService.protocol }}</td>
               </ng-container>
@@ -158,19 +158,19 @@ <h4>
             </div>
             <table *ngIf="!isLoadingTable" mat-table  matSort #sortStaging matSortActive="name" matSortDirection="asc"
                    matSortDisableClear [dataSource]="stagingServicesDataSource" class="w-100">
-              <ng-container matColumnDef="name">
+              <ng-container *ngIf="displayedColumns.includes('name')" matColumnDef="name">
                 <th mat-header-cell *matHeaderCellDef class="w-20" mat-sort-header>{{ 'FACILITIES.NAME' | translate }}</th>
                 <td mat-cell *matCellDef="let providedService">{{ providedService.name | itemLocale }}</td>
               </ng-container>
-              <ng-container matColumnDef="description">
+              <ng-container *ngIf="displayedColumns.includes('description')" matColumnDef="description">
                 <th mat-header-cell *matHeaderCellDef class="w-25" mat-sort-header>{{ 'FACILITIES.DESCRIPTION' | translate }}</th>
                 <td mat-cell *matCellDef="let providedService">{{ providedService.description | itemLocale }}</td>
               </ng-container>
-              <ng-container matColumnDef="environment">
+              <ng-container *ngIf="displayedColumns.includes('environment')" matColumnDef="environment">
                 <th mat-header-cell *matHeaderCellDef class="w-10" mat-sort-header>{{ 'FACILITIES.ENVIRONMENT' | translate }}</th>
                 <td mat-cell *matCellDef="let providedService">{{ providedService.environment | facilityEnvironment }}</td>
               </ng-container>
-              <ng-container matColumnDef="protocol">
+              <ng-container *ngIf="displayedColumns.includes('protocol')" matColumnDef="protocol">
                 <th mat-header-cell *matHeaderCellDef class="w-10" mat-sort-header>{{ 'FACILITIES.PROTOCOL' | translate }}</th>
                 <td mat-cell *matCellDef="let providedService">{{ providedService.protocol }}</td>
               </ng-container>
@@ -201,19 +201,19 @@ <h4>
             </div>
             <table *ngIf="!isLoadingTable" mat-table  matSort #sortTesting="matSort" matSortActive="name" matSortDirection="asc"
                    matSortDisableClear [dataSource]="testingServicesDataSource" class="w-100">
-              <ng-container matColumnDef="name">
+              <ng-container *ngIf="displayedColumns.includes('name')" matColumnDef="name">
                 <th mat-header-cell *matHeaderCellDef class="w-20" mat-sort-header>{{ 'FACILITIES.NAME' | translate }}</th>
                 <td mat-cell *matCellDef="let providedService">{{ providedService.name | itemLocale }}</td>
               </ng-container>
-              <ng-container matColumnDef="description">
+              <ng-container *ngIf="displayedColumns.includes('description')" matColumnDef="description">
                 <th mat-header-cell *matHeaderCellDef class="w-25" mat-sort-header>{{ 'FACILITIES.DESCRIPTION' | translate }}</th>
                 <td mat-cell *matCellDef="let providedService">{{ providedService.description | itemLocale }}</td>
               </ng-container>
-              <ng-container matColumnDef="environment">
+              <ng-container *ngIf="displayedColumns.includes('environment')" matColumnDef="environment">
                 <th mat-header-cell *matHeaderCellDef class="w-10" mat-sort-header>{{ 'FACILITIES.ENVIRONMENT' | translate }}</th>
                 <td mat-cell *matCellDef="let providedService">{{ providedService.environment | facilityEnvironment }}</td>
               </ng-container>
-              <ng-container matColumnDef="protocol">
+              <ng-container *ngIf="displayedColumns.includes('protocol')" matColumnDef="protocol">
                 <th mat-header-cell *matHeaderCellDef class="w-10" mat-sort-header>{{ 'FACILITIES.PROTOCOL' | translate }}</th>
                 <td mat-cell *matCellDef="let providedService">{{ providedService.protocol }}</td>
               </ng-container>

diff --git a/gui/src/app/statistics/facilities-services-list/facilities-services-list.component.ts b/gui/src/app/statistics/facilities-services-list/facilities-services-list.component.ts
@@ -8,6 +8,7 @@ import { TranslateService } from '@ngx-translate/core';
 import {ProvidedServiceOverview} from "../../core/models/ProvidedServiceOverview";
 import {ProvidedServicesOverview} from "../../core/models/ProvidedServicesOverview";
 import {AppComponent} from "../../app.component";
+import {ConfService} from "../../shared/conf-service";
 
 @Component({
   selector: 'app-facilities-overview',
@@ -25,7 +26,7 @@ export class FacilitiesServicesListComponent implements OnInit, OnDestroy {
   private paginatorTesting: MatPaginator = undefined;
   private sortTesting: MatSort = undefined;
 
-  private servicesOverviewSubscription: Subscription
+  private servicesOverviewSubscription: Subscription;
 
   displayedColumns: string[] = ['name', 'description', 'protocol', 'environment'];
 
@@ -58,8 +59,12 @@ export class FacilitiesServicesListComponent implements OnInit, OnDestroy {
 
   constructor(
     private facilitiesService: FacilitiesService,
-    private translate: TranslateService
+    private translate: TranslateService,
+    private configService: ConfService,
   ) {
+    if (configService.statisticsDisplayedAttributes) {
+      this.displayedColumns = configService.statisticsDisplayedAttributes;
+    }
   }
 
   servicesOverview: ProvidedServicesOverview = new ProvidedServicesOverview(null);

diff --git a/gui/src/assets/config/config.json b/gui/src/assets/config/config.json
@@ -0,0 +1,3 @@
+{
+  "statisticsDisplayedAttributes": ["name", "description", "environment", "protocol"]
+}