Merge branch '6-update-to-angular-16' into 'master'

Resolve "Update to Angular 16"

Closes #6

See merge request !9

.eslintrc.json

@@ -2,7 +2,9 @@
   "root": true,
   "overrides": [
     {
-      "files": ["*.ts"],
+      "files": [
+        "*.ts"
+      ],
       "parserOptions": {
         "project": [
           "tsconfig.*?.json"
@@ -18,29 +20,62 @@
         "plugin:@angular-eslint/recommended"
       ],
       "rules": {
-        "max-len": ["error", { "code": 140, "ignorePattern": "import .*" }],
+        "max-len": [
+          "error",
+          {
+            "code": 140,
+            "ignorePattern": "import .*"
+          }
+        ],
         "@angular-eslint/directive-selector": [
           "error",
-          { "type": "attribute", "prefix": "app", "style": "camelCase" }
+          {
+            "type": "attribute",
+            "prefix": "app",
+            "style": "camelCase"
+          }
         ],
         "@angular-eslint/component-selector": [
           "error",
-          { "type": "element", "prefix": "app", "style": "kebab-case" }
+          {
+            "type": "element",
+            "prefix": "app",
+            "style": "kebab-case"
+          }
+        ],
+        "quotes": [
+          "error",
+          "single",
+          {
+            "allowTemplateLiterals": true
+          }
         ],
-        "quotes": ["error", "single", { "allowTemplateLiterals": true }],
         "@typescript-eslint/no-explicit-any": "off"
       }
     },
     {
-      "files": ["*.component.html"],
-      "extends": ["plugin:@angular-eslint/template/recommended"],
+      "files": [
+        "*.component.html"
+      ],
+      "extends": [
+        "plugin:@angular-eslint/template/recommended"
+      ],
       "rules": {
-        "max-len": ["error", { "code": 140 }]
+        "max-len": [
+          "error",
+          {
+            "code": 140
+          }
+        ]
       }
     },
     {
-      "files": ["*.component.ts"],
-      "extends": ["plugin:@angular-eslint/template/process-inline-templates"]
+      "files": [
+        "*.component.ts"
+      ],
+      "extends": [
+        "plugin:@angular-eslint/template/process-inline-templates"
+      ]
     }
   ]
 }

.gitlab-ci.yml

-image: cypress/browsers:node16.13.0-chrome95-ff94
+image: cypress/browsers:node18.12.0-chrome103-ff107
 
 stages:
   - codeStyle

README.md

@@ -5,5 +5,5 @@ The visualization provides three views with distinct processing of collected dat
 ## How to use json-server as mock backend with provided dummy data
 
 1.  Run `npm install`.
-2.  Run the json server with `npm run json-server` or with provided parameters `json-server -w ./utils/json-server/db.js --routes ./utils/json-server/routes.json --middlewares ./utils/json-server/server.js`.
-3.  Run the app in local environment and ssl `ng serve --configuration local --ssl` and access it on `https://localhost:4200`.
+2.  Run the json server with `npm run api` or manually with provided parameters `json-server -w ./utils/json-server/db.js --routes ./utils/json-server/routes.json --middlewares ./utils/json-server/server.js`.
+3.  Run the app in local environment and ssl with `npm run start` and access it on `https://localhost:4200`.

VERSION.txt

+16.0.0 Update to Angular 16 and update local issuer to keycloak.
 15.0.0 Update to Angular 15
 14.0.2 Propagate insufficient data info for dashboard processing
 14.0.1 Update API routes

package.json

@@ -3,7 +3,7 @@
   "version": "1.0.0",
   "scripts": {
     "ng": "ng",
-    "start": "ng serve",
+    "start": "ng serve --configuration local --ssl",
     "build": "ng build",
     "test": "ng test",
     "lint": "ng lint && npm run prettier-check",
@@ -17,7 +17,7 @@
     "ci-update-version": "cd ./projects/kypo-trainings-clustering-viz-lib/ && npm version $TAG_VERSION",
     "ci-build-and-pack": "npm ci --cache .nnpm ERR! Cannot read property '@angular/animations' of undefinedpm --prefer-offline && npm run build-library && npm run create-package",
     "ci-publish-package": "cd dist/kypo-trainings-clustering-viz-lib && npm publish",
-    "json-server": "json-server -w ./utils/json-server/db.js --routes ./utils/json-server/routes.json --middlewares ./utils/json-server/server.js"
+    "api": "json-server -w ./utils/json-server/db.js --routes ./utils/json-server/routes.json --middlewares ./utils/json-server/server.js"
   },
   "husky": {
     "hooks": {
@@ -26,49 +26,48 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^15.2.10",
-    "@angular/cdk": "^15.2.9",
-    "@angular/common": "^15.2.10",
-    "@angular/compiler": "^15.2.10",
-    "@angular/core": "^15.2.10",
-    "@angular/forms": "^15.2.10",
-    "@angular/material": "^15.2.9",
-    "@angular/platform-browser": "^15.2.10",
-    "@angular/platform-browser-dynamic": "^15.2.10",
-    "@angular/router": "^15.2.10",
-    "@muni-kypo-crp/d3-service": "~15.0.1",
-    "@sentinel/auth": "~15.3.0",
-    "@sentinel/common": "~15.3.0",
-    "@sentinel/layout": "~15.2.0",
-    "@types/d3": "^7.4.0",
-    "angular-oauth2-oidc": "^15.0.1",
-    "angular-oauth2-oidc-jwks": "^15.0.1",
+    "@angular/animations": "^16.2.12",
+    "@angular/cdk": "^16.2.14",
+    "@angular/common": "^16.2.12",
+    "@angular/compiler": "^16.2.12",
+    "@angular/core": "^16.2.12",
+    "@angular/forms": "^16.2.12",
+    "@angular/material": "^16.2.14",
+    "@angular/platform-browser": "^16.2.12",
+    "@angular/platform-browser-dynamic": "^16.2.12",
+    "@angular/router": "^16.2.12",
+    "@muni-kypo-crp/d3-service": "~16.0.0",
+    "@sentinel/auth": "~16.1.0",
+    "@sentinel/common": "~16.2.3",
+    "@sentinel/layout": "~16.1.0",
+    "@types/d3": "^7.4.3",
+    "angular-oauth2-oidc": "^16.0.0",
+    "angular-oauth2-oidc-jwks": "^16.0.0",
     "core-js": "^3.23.2",
-    "d3": "^7.4.4",
-    "ngx-indexed-db": "^11.0.2",
+    "d3": "^7.9.0",
+    "ngx-indexed-db": "^16.0.0",
     "rxjs": "~7.5.5",
     "tslib": "^2.4.0",
     "uuid": "^8.3.2",
-    "zone.js": "~0.11.6"
+    "zone.js": "~0.13.3"
   },
   "devDependencies": {
-    "@angular-devkit/architect": "^0.1502.10",
-    "@angular-devkit/build-angular": "^15.2.10",
-    "@angular-eslint/builder": "~15.2.1",
-    "@angular-eslint/eslint-plugin": "^15.2.1",
-    "@angular-eslint/eslint-plugin-template": "^15.2.1",
-    "@angular-eslint/schematics": "^15.2.1",
-    "@angular-eslint/template-parser": "^15.2.1",
-    "@angular/cli": "^15.2.10",
-    "@angular/compiler-cli": "^15.2.10",
-    "@angular/language-service": "^15.2.10",
-    "@types/d3": "^7.4.0",
+    "@angular-devkit/architect": "^0.1602.14",
+    "@angular-devkit/build-angular": "^16.2.14",
+    "@angular-eslint/builder": "~16.3.1",
+    "@angular-eslint/eslint-plugin": "^16.3.1",
+    "@angular-eslint/eslint-plugin-template": "^16.3.1",
+    "@angular-eslint/schematics": "^16.3.1",
+    "@angular-eslint/template-parser": "^16.3.1",
+    "@angular/cli": "^16.2.14",
+    "@angular/compiler-cli": "^16.2.12",
+    "@angular/language-service": "^16.2.12",
     "@types/jasmine": "~4.0.3",
     "@types/jasminewd2": "^2.0.10",
     "@types/node": "^18.0.0",
-    "@typescript-eslint/eslint-plugin": "^5.43.0",
-    "@typescript-eslint/parser": "^5.43.0",
-    "eslint": "^8.28.0",
+    "@typescript-eslint/eslint-plugin": "^5.59.2",
+    "@typescript-eslint/parser": "^5.59.2",
+    "eslint": "^8.39.0",
     "jasmine-core": "~4.2.0",
     "jasmine-spec-reporter": "~7.0.0",
     "json-server": "^0.17.4",
@@ -78,10 +77,10 @@
     "karma-coverage-istanbul-reporter": "~3.0.3",
     "karma-jasmine": "~5.1.0",
     "karma-jasmine-html-reporter": "^2.0.0",
-    "ng-packagr": "^15.2.2",
+    "ng-packagr": "^16.2.3",
     "prettier": "^2.7.1",
     "protractor": "~7.0.0",
     "ts-node": "~10.8.1",
     "typescript": "~4.9.5"
   }
-}
+}
\ No newline at end of file

projects/kypo-trainings-clustering-viz-lib/.eslintrc.json

 {
-  "extends": ["../../.eslintrc.json"],
+  "extends": [
+    "../../.eslintrc.json"
+  ],
   "overrides": [
     {
-      "files": ["*.ts"],
+      "files": [
+        "*.ts"
+      ],
       "parserOptions": {
-        "project": ["projects/kypo-clustering-viz-lib/tsconfig.*?.json"],
+        "project": [
+          "projects/kypo-clustering-viz-lib/tsconfig.*?.json"
+        ],
         "createDefaultProgram": true
       },
       "rules": {
         "@angular-eslint/directive-selector": [
           "error",
-          { "type": "attribute", "prefix": "kypo", "style": "camelCase" }
+          {
+            "type": "attribute",
+            "prefix": "kypo",
+            "style": "camelCase"
+          }
         ],
         "@angular-eslint/component-selector": [
           "error",
-          { "type": "element", "prefix": "kypo", "style": "kebab-case" }
+          {
+            "type": "element",
+            "prefix": "kypo",
+            "style": "kebab-case"
+          }
         ]
       }
     },
     {
-      "files": ["*.component.html"],
+      "files": [
+        "*.component.html"
+      ],
       "rules": {}
     }
   ]

projects/kypo-trainings-clustering-viz-lib/package.json

@@ -2,14 +2,14 @@
   "name": "@muni-kypo-crp/clustering-visualization",
   "version": "15.0.0",
   "peerDependencies": {
-    "@angular/common": "^14.0.3",
-    "@angular/core": "^14.0.3",
-    "@angular/material": "^14.0.3",
-    "@muni-kypo-crp/d3-service": "~14.0.0",
-    "d3": "^7.4.4",
-    "@types/d3": "^7.4.0"
+    "@angular/common": "^16.2.12",
+    "@angular/core": "^16.2.12",
+    "@angular/material": "^16.2.14",
+    "@muni-kypo-crp/d3-service": "~16.0.0",
+    "d3": "^7.9.0",
+    "@types/d3": "^7.4.3"
   },
   "dependencies": {
-    "tslib": "^2.2.0"
+    "tslib": "^2.4.0"
   }
 }

projects/kypo-trainings-clustering-viz-lib/src/lib/visualization/api/visualization-data-default-api.service.ts

-import { HttpClient, HttpHeaders, HttpRequest } from '@angular/common/http';
+import { HttpClient, HttpHeaders } from '@angular/common/http';
 import { Injectable } from '@angular/core';
-import { Observable, of } from 'rxjs';
+import { Observable } from 'rxjs';
 import { map } from 'rxjs/operators';
 import { ConfigService } from '../config/config.service';
 import { VisualizationDataDTO } from '../DTOs/visualization-data-dto';

projects/kypo-trainings-clustering-viz-lib/src/lib/visualization/components/visualizations/scatter-plot/scatter-plot.component.ts

@@ -213,7 +213,6 @@ export class ScatterPlotComponent implements OnChanges, OnInit {
     });
 
     const tooltip = this.tooltip;
-    const chartClass = this.chartClass;
 
     // Add scatter
     this.dataPoints = this.gPlot

projects/kypo-trainings-clustering-viz-lib/src/lib/visualization/components/visualizations/visualizations.component.spec.ts

 /* tslint:disable:no-unused-variable */
 import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
-import { By } from '@angular/platform-browser';
-import { DebugElement } from '@angular/core';
 
 import { VisualizationsComponent } from './visualizations.component';
 

src/app/app.component.spec.ts

 import { TestBed, waitForAsync } from '@angular/core/testing';
-
-import { NgModule } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { HttpClientModule } from '@angular/common/http';
 import { AppComponent } from './app.component';
-// import { AppConfig, CTF_PROGRESS_CONFIG } from './app.config';
-// import { D3Service } from 'd3-ng2-service';
 import {RadarChartComponent} from '../../projects/kypo-trainings-clustering-viz-lib/src/lib/visualization/components/visualizations/radar-chart/radar-chart.component';
 
 
@@ -21,10 +17,7 @@ describe('AppComponent', () => {
         FormsModule,
         HttpClientModule
       ],
-      providers: [
-        // D3Service,
-        // { provide: AppConfig, useValue: CTF_PROGRESS_CONFIG }
-      ]
+      providers: []
     }).compileComponents();
   }));
 

src/environments/environment.local.ts

@@ -8,6 +8,9 @@ import {
   VisualizationsDataService
 } from '../../projects/kypo-trainings-clustering-viz-lib/src/lib/visualization/services/visualizations-data.service';
 
+const AUTH_URL = 'https://172.19.0.22';
+// in BASE_URL, change value to AUTH_URL for data form local demo or to 'http://localhost:3000' for mocked json server
+const BASE_URL = 'http://localhost:3000';
 const HOME_URL = 'https://localhost:4200';
 
 export const environment = {
@@ -16,34 +19,34 @@ export const environment = {
     { provide: VisualizationsDataService, useClass: MockedRestService}
   ],
   statisticalVizConfig: {
-    trainingServiceUrl: 'http://localhost:3000/kypo-rest-training/api/v1/',
+    trainingServiceUrl: BASE_URL + '/kypo-rest-training/api/v1/',
   },
   authConfig: {
     guardMainPageRedirect: 'visualization',
     guardLoginPageRedirect: 'login',
-    interceptorAllowedUrls: ['https://172.19.0.22', 'http://localhost', 'https://localhost'],
+    interceptorAllowedUrls: [
+      'https://localhost',
+      AUTH_URL
+    ],
     authorizationStrategyConfig: {
-      authorizationUrl: 'https://172.19.0.22/kypo-rest-user-and-group/api/v1/users/info',
+      authorizationUrl: AUTH_URL + '/kypo-rest-user-and-group/api/v1/users/info',
     },
     // OIDC SETTINGS
     providers: [
       {
-        label: 'Login with MUNI',
+        label: 'Login with local issuer',
         textColor: 'white',
         backgroundColor: '#002776',
         oidcConfig: {
-          // Url of the Identity Provider
-          issuer: 'https://172.19.0.22:443/csirtmu-dummy-issuer-server/',
-          // The SPA's id. The SPA is registered with this id at the config-server
-          clientId: '51d53826-3252-4db5-a4a1-51c51588efed',
-          // URL of the SPA to redirect the user after silent refresh
+          requireHttps: true,
+          issuer: AUTH_URL + '/keycloak/realms/KYPO',
+          clientId: 'KYPO-client',
           redirectUri: HOME_URL,
-          // set the scope for the permissions the client should request
           scope: 'openid email profile',
-          logoutUrl: 'https://172.19.0.22/csirtmu-dummy-issuer-server/endsession',
-          // URL of the SPA to redirect the user to after login
-          postLogoutRedirectUri: HOME_URL,
-          clearHashAfterLogin: true,
+          logoutUrl: AUTH_URL + '/keycloak/realms/KYPO/protocol/openid-connect/logout',
+          silentRefreshRedirectUri: AUTH_URL + '/silent-refresh.html',
+          postLogoutRedirectUri: HOME_URL + '/logout-confirmed',
+          clearHashAfterLogin: true
         },
       },
     ],

src/environments/environment.prod.ts

@@ -8,6 +8,7 @@ import {
   VisualizationsDataService
 } from '../../projects/kypo-trainings-clustering-viz-lib/src/lib/visualization/services/visualizations-data.service';
 
+const BASE_URL = 'https://172.19.0.22';
 const HOME_URL = 'https://localhost:4200';
 
 export const environment = {
@@ -16,34 +17,34 @@ export const environment = {
     { provide: VisualizationsDataService, useClass: VisualizationsDataConcreteService}
   ],
   statisticalVizConfig: {
-    trainingServiceUrl: 'https://172.19.0.22/kypo-rest-training/api/v1/',
+    trainingServiceUrl: BASE_URL + '/kypo-rest-training/api/v1/',
   },
   authConfig: {
     guardMainPageRedirect: 'visualization',
     guardLoginPageRedirect: 'login',
-    interceptorAllowedUrls: ['https://172.19.0.22'],
+    interceptorAllowedUrls: [
+      'https://localhost',
+      BASE_URL
+    ],
     authorizationStrategyConfig: {
-      authorizationUrl: 'https://172.19.0.22/kypo-rest-user-and-group/api/v1/users/info',
+      authorizationUrl: BASE_URL + '/kypo-rest-user-and-group/api/v1/users/info',
     },
     // OIDC SETTINGS
     providers: [
       {
-        label: 'Login with MUNI',
+        label: 'Login with local issuer',
         textColor: 'white',
         backgroundColor: '#002776',
         oidcConfig: {
-          // Url of the Identity Provider
-          issuer: 'https://172.19.0.22:443/csirtmu-dummy-issuer-server/',
-          // The SPA's id. The SPA is registered with this id at the config-server
-          clientId: '0bf33f00-2700-4efb-ab09-186076f85c7d',
-          // URL of the SPA to redirect the user after silent refresh
+          requireHttps: true,
+          issuer: BASE_URL + '/keycloak/realms/KYPO',
+          clientId: 'KYPO-client',
           redirectUri: HOME_URL,
-          // set the scope for the permissions the client should request
-          scope: 'openid email profile',
-          logoutUrl: 'https://172.19.0.22/csirtmu-dummy-issuer-server/endsession',
-          // URL of the SPA to redirect the user to after login
-          postLogoutRedirectUri: HOME_URL,
-          clearHashAfterLogin: true,
+          scope: 'openid email profile offline_access',
+          logoutUrl: BASE_URL + '/keycloak/realms/KYPO/protocol/openid-connect/logout',
+          silentRefreshRedirectUri: BASE_URL + '/silent-refresh.html',
+          postLogoutRedirectUri: HOME_URL + '/logout-confirmed',
+          clearHashAfterLogin: true
         },
       },
     ],

src/environments/environment.ts

@@ -2,40 +2,41 @@
 // `ng build --configuration production` replaces `environment.ts` with `environment.prod.ts`.
 // The list of file replacements can be found in `angular.json`.
 
+const BASE_URL = 'https://172.19.0.22';
 const HOME_URL = 'https://localhost:4200';
 
 export const environment = {
   production: false,
   providers: [],
   statisticalVizConfig: {
-    trainingServiceUrl: 'https://172.19.0.22/kypo-rest-training/api/v1/',
+    trainingServiceUrl: BASE_URL + '/kypo-rest-training/api/v1/',
   },
   authConfig: {
     guardMainPageRedirect: 'visualization',
     guardLoginPageRedirect: 'login',
-    interceptorAllowedUrls: ['https://172.19.0.22'],
+    interceptorAllowedUrls: [
+      'https://localhost',
+      BASE_URL
+    ],
     authorizationStrategyConfig: {
-      authorizationUrl: 'https://172.19.0.22/kypo-rest-user-and-group/api/v1/users/info',
+      authorizationUrl: BASE_URL + '/kypo-rest-user-and-group/api/v1/users/info',
     },
     // OIDC SETTINGS
     providers: [
       {
-        label: 'Login with MUNI',
+        label: 'Login with local issuer',
         textColor: 'white',
         backgroundColor: '#002776',
         oidcConfig: {
-          // Url of the Identity Provider
-          issuer: 'https://172.19.0.22:443/csirtmu-dummy-issuer-server/',
-          // The SPA's id. The SPA is registered with this id at the config-server
-          clientId: '4bfa4a2a-51a0-43ca-96e1-d73fd78f36c9',
-          // URL of the SPA to redirect the user after silent refresh
+          requireHttps: true,
+          issuer: BASE_URL + '/keycloak/realms/KYPO',
+          clientId: 'KYPO-client',
           redirectUri: HOME_URL,
-          // set the scope for the permissions the client should request
-          scope: 'openid email profile',
-          logoutUrl: 'https://172.19.0.22/csirtmu-dummy-issuer-server/endsession',
-          // URL of the SPA to redirect the user to after login
-          postLogoutRedirectUri: HOME_URL,
-          clearHashAfterLogin: true,
+          scope: 'openid email profile offline_access',
+          logoutUrl: BASE_URL + '/keycloak/realms/KYPO/protocol/openid-connect/logout',
+          silentRefreshRedirectUri: BASE_URL + '/silent-refresh.html',
+          postLogoutRedirectUri: HOME_URL + '/logout-confirmed',
+          clearHashAfterLogin: true
         },
       },
     ],