Merge branch 'linux-package' of github.com:openziti/ziti-console into…

… linux-package

angular.json

@@ -78,7 +78,13 @@
                 "scripts": true,
                 "styles": true,
                 "vendor": true
-              }
+              },
+              "aot": true,
+              "optimization": true,
+              "sourceMap": false,
+              "extractLicenses": true,
+              "vendorChunk": true,
+              "buildOptimizer": true
             },
             "development": {
               "buildOptimizer": false,

build.sh

@@ -14,4 +14,4 @@ npm install
 npm install -g @angular/[email protected]
 ng build ziti-console-lib
 # WARN: deployUrl deprecated since Angular 13, pending decommission in future ng CLI
-ng build ziti-console --base-href "$1" --deploy-url "$1"
+ng build ziti-console --base-href "$1" --deploy-url "$1" --configuration "production"

docker-images/ziti-console-assets/Dockerfile

@@ -17,7 +17,7 @@ RUN npm install --omit=optional
 
 COPY . .
 RUN ng build ziti-console-lib
-RUN ng build ziti-console --base-href ${BASE_HREF}
+RUN ng build ziti-console --base-href ${BASE_HREF} --configuration "production"
 
 ARG NODE_VERSION=${NODE_VERSION}
 FROM node:${NODE_VERSION}-bookworm-slim

package.json

@@ -1,6 +1,6 @@
 {
   "name": "io.netfoundry.zac",
-  "version": "3.4.5",
+  "version": "3.4.7",
   "description": "Ziti Administration Console",
   "main": "server.js",
   "type": "module",

projects/app-ziti-console/src/app/app-routing.module.ts

@@ -148,12 +148,14 @@ const routes: Routes = [
     path: 'configs',
     component: ConfigurationsPageComponent,
     canActivate: mapToCanActivate([AuthenticationGuard]),
+    canDeactivate: [DeactivateGuardService],
     runGuardsAndResolvers: 'always',
   },
   {
     path: 'configs/:id',
     component: ConfigurationFormComponent,
     canActivate: mapToCanActivate([AuthenticationGuard]),
+    canDeactivate: [DeactivateGuardService],
     runGuardsAndResolvers: 'always',
   },
   {

projects/app-ziti-console/src/app/guards/authentication.guard.ts

@@ -16,7 +16,13 @@
 
 import {CanActivateFn, Router} from '@angular/router';
 import {Inject, Injectable, InjectionToken} from "@angular/core";
-import {SettingsService, LoginServiceClass, SETTINGS_SERVICE, ZAC_LOGIN_SERVICE} from "ziti-console-lib";
+import {
+  SettingsService,
+  LoginServiceClass,
+  SETTINGS_SERVICE,
+  ZAC_LOGIN_SERVICE,
+  GrowlerService, GrowlerModel
+} from "ziti-console-lib";
 // @ts-ignore
 const {growler} = window;
 
@@ -27,14 +33,18 @@ export class AuthenticationGuard {
   constructor(
       @Inject(ZAC_LOGIN_SERVICE) private loginService: LoginServiceClass,
       @Inject(SETTINGS_SERVICE) private settingsSvc: SettingsService,
-      private router: Router
+      private router: Router,
+      private growlerService: GrowlerService
   ) {
   }
 
   canActivate(next, state) {
     const isAuthorized = this.loginService.hasSession();
     if (!isAuthorized) {
       // messaging.error('not authorized');
+      this.settingsSvc.set(this.settingsSvc.settings);
+      const gorwlerData: GrowlerModel = new GrowlerModel('warning', 'Invalid Session', 'Session Expired', 'Your session is no longer valid. Please login to continue.');
+      this.growlerService.show(gorwlerData);
       this.router.navigate(['/login']);
     }
 

projects/app-ziti-console/src/app/interceptors/ziti-api.interceptor.ts

@@ -18,10 +18,19 @@ import {Injectable, Inject} from '@angular/core';
 import {HttpErrorResponse, HttpEvent, HttpHandler, HttpInterceptor, HttpRequest} from '@angular/common/http';
 import {map} from 'rxjs/operators';
 
-import {BehaviorSubject, filter, finalize, Observable, of, switchMap, take} from 'rxjs';
-import {SettingsServiceClass, LoginServiceClass, SETTINGS_SERVICE, ZAC_LOGIN_SERVICE} from "ziti-console-lib";
+import {BehaviorSubject, filter, finalize, Observable, of, switchMap, take, EMPTY} from 'rxjs';
+import {
+    SettingsServiceClass,
+    LoginServiceClass,
+    SETTINGS_SERVICE,
+    ZAC_LOGIN_SERVICE,
+    GrowlerModel, GrowlerService
+} from "ziti-console-lib";
 import moment from "moment/moment";
 import {Router} from "@angular/router";
+import {MatDialog} from "@angular/material/dialog";
+
+import {defer} from 'lodash';
 
 /** Pass untouched request through to the next request handler. */
 @Injectable({
@@ -33,7 +42,10 @@ export class ZitiApiInterceptor implements HttpInterceptor {
 
     constructor(@Inject(SETTINGS_SERVICE) private settingsService: SettingsServiceClass,
                 @Inject(ZAC_LOGIN_SERVICE) private loginService: LoginServiceClass,
-                private router: Router) {
+                private router: Router,
+                private growlerService: GrowlerService,
+                private dialogRef: MatDialog
+                ) {
 
     }
 
@@ -61,25 +73,15 @@ export class ZitiApiInterceptor implements HttpInterceptor {
                     switchMap(() => next.handle(this.addAuthToken(req)))
                 );
             } else {
-                // I need to request a new token
-                this.refreshTokenInProgress = true;
-                this.refreshTokenSubject.next(null);
-                return this.refreshAuthToken().pipe(
-                    switchMap((token) => {
-                        if (token) {
-                            this.refreshTokenSubject.next(token);
-                            return next.handle(this.addAuthToken(req));
-                        } else {
-                            throw ('Error refreshing token');
-                        }
-                    }),
-                    finalize(() => (this.refreshTokenInProgress = false))
-                );
+                this.handleUnauthorized();
+                return EMPTY;
             }
         }
     }
 
     private refreshAuthToken() {
+        this.refreshTokenInProgress = true;
+        this.refreshTokenSubject.next(null);
         const apiVersions = this.settingsService.apiVersions;
         const prefix = apiVersions["edge-management"].v1.path;
         const url = this.settingsService.settings.selectedEdgeController;
@@ -93,6 +95,15 @@ export class ZitiApiInterceptor implements HttpInterceptor {
         return of(null);
     }
 
+    private handleUnauthorized() {
+        const gorwlerData: GrowlerModel = new GrowlerModel('warning', 'Invalid Session', 'Session Expired', 'Your session is no longer valid. Please login to continue.');
+        this.growlerService.show(gorwlerData);
+        defer(() => {
+            this.dialogRef.closeAll();
+        });
+        this.router.navigate(['/login']);
+    }
+
     private addAuthToken(request: any) {
         const session = this.settingsService.settings.session;
         return request.clone({setHeaders: {"zt-session": session.id, 'content-type': 'application/json', accept: 'application/json'}});

projects/app-ziti-console/src/app/login/login.component.html

@@ -18,7 +18,7 @@
 
         <ng-template #userLogin>
             <lib-selector-input
-                        *ngIf="!originIsController"
+                        *ngIf="!svc.originIsController"
                         [fieldName]="'Edge Controller'"
                         [(fieldValue)]="selectedEdgeController"
                         [error]="edgeNameError"

projects/app-ziti-console/src/app/login/login.component.ts

@@ -37,22 +37,24 @@ export class LoginComponent implements OnInit, OnDestroy {
     edgeCreate = false;
     userLogin = false;
     selectedEdgeController: any;
+    controllerHostname = '';
     edgeNameError = '';
     edgeUrlError = '';
     backToLogin = false;
     showEdge = false;
-    originIsController = false;
     isLoading = false;
     private subscription = new Subscription();
 
     constructor(
-        @Inject(ZAC_LOGIN_SERVICE) private svc: LoginServiceClass,
+        @Inject(ZAC_LOGIN_SERVICE) public svc: LoginServiceClass,
         @Inject(SETTINGS_SERVICE) private settingsService: SettingsServiceClass,
         private router: Router,
         ) { }
 
     ngOnInit() {
-        this.checkOriginForController();
+        if (this.svc.originIsController !== false && this.svc.originIsController !== true) {
+            this.checkOriginForController();
+        }
         if (this.svc.hasSession()) {
             this.router.navigate(['/dashboard']);
         }
@@ -62,19 +64,23 @@ export class LoginComponent implements OnInit, OnDestroy {
         }));
     }
 
-    async checkOriginForController() {
+    checkOriginForController() {
         this.isLoading = true;
-        this.originIsController = await this.svc.checkOriginForController();
-        if (this.originIsController) {
-            this.originIsController = true;
-            this.edgeCreate = false;
-            this.selectedEdgeController = window.location.origin;
-            this.settingsService.addContoller(this.edgeName, window.location.hostname);
-        } else {
-            this.edgeChanged();
-            this.initSettings();
-        }
-        this.isLoading = false;
+        this.svc.checkOriginForController().then((result) => {
+            this.svc.originIsController = result;
+            if (this.svc.originIsController) {
+                this.svc.originIsController = true;
+                this.edgeCreate = false;
+                this.selectedEdgeController = window.location.origin;
+                this.controllerHostname = window.location.hostname;
+                this.settingsService.addContoller(this.controllerHostname, this.selectedEdgeController);
+            } else {
+                this.edgeChanged();
+                this.initSettings();
+            }
+        }).finally(() => {
+            this.isLoading = false;
+        });
     }
 
     async login() {
@@ -161,8 +167,9 @@ export class LoginComponent implements OnInit, OnDestroy {
             this.userLogin = false;
         }
         const serviceUrl = localStorage.getItem("ziti-serviceUrl-value");
-        if (this.originIsController) {
+        if (this.svc.originIsController) {
             // the origin is already selected as the target ziti controller so no need to set it again.
+            this.selectedEdgeController = settings.selectedEdgeController;
             return;
         }
         if (!isEmpty(serviceUrl)) {

projects/ziti-console-lib/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openziti/ziti-console-lib",
-  "version": "0.4.5",
+  "version": "0.4.9",
   "repository": {
     "type": "git",
     "url": "https://github.com/openziti/ziti-console"

projects/ziti-console-lib/src/lib/assets/styles/ziti.css

@@ -11,6 +11,7 @@ body {
     --black: #000;
     --shaded: #f6f7fb;
     --formBackground: #f6f7fb;
+    --visualizerBackground: #ffffff80;
     --background: #ffffff;
     --placeholder: #CDCDCD;
     --text: #000;

projects/ziti-console-lib/src/lib/features/config-editor/config-editor.component.ts

@@ -236,6 +236,7 @@ export class ConfigEditorComponent implements OnInit {
   jsonDataChanged(event) {
     defer(() => {
       this.configDataChange.emit(this.configData);
+      this.updateFormView(this.items, this.configData);
     });
   }
 }

projects/ziti-console-lib/src/lib/features/confirm/confirm.component.html

@@ -7,7 +7,7 @@
                 <span class="confirm-subtitle">{{dataObj.subtitle}}</span>
             </div>
             <div class="confirm-modal-main">
-                <div class="confirm-modal-icon"></div>
+                <div class="confirm-modal-icon" style="background-image: url({{dataObj.imageUrl}})"></div>
                 <div>
                     <div class="confirm-message-content">
                         <span [innerHTML]="dataObj.message"></span>
@@ -17,6 +17,9 @@
                             <li *ngFor="let item of dataObj.bulletList" class="confirm-item-name">{{item}}</li>
                         </ul>
                     </div>
+                    <div *ngIf="dataObj.submessage && dataObj.submessage.length > 0" class="confirm-message-sub-content">
+                        <span [innerHTML]="dataObj.submessage"></span>
+                    </div>
                 </div>
             </div>
         </div>

projects/ziti-console-lib/src/lib/features/confirm/confirm.component.scss

@@ -20,7 +20,6 @@
     .confirm-modal-icon {
       width: 120px;
       height: 120px;
-      background-image: url(../../assets/svgs/Confirm_Trash.svg);
       background-size: contain;
       z-index: 20;
       box-sizing: var(--shadow);
@@ -46,6 +45,7 @@
       filter: brightness(50%);
     }
   }
+  .confirm-message-sub-content,
   .confirm-message-content {
     color: var(--text);
     font-size: 14px;
@@ -58,7 +58,7 @@
     overflow: auto;
     display: flex;
     align-items: center;
-    justify-content: center;
+    justify-content: flex-start;
     color: var(--tableText);
     max-width: 400px;
   }

projects/ziti-console-lib/src/lib/features/confirm/confirm.component.ts

@@ -35,8 +35,10 @@ export class ConfirmComponent {
     confirmLabel: '',
     cancelLabel: '',
     bulletList: [],
+    submessage: '',
     showCancelButton: false,
-    showCancelLink: false
+    showCancelLink: false,
+    imageUrl: '../../assets/svgs/Confirm_Trash.svg'
   }
 
   constructor(private dialogRef: MatDialogRef<ConfirmComponent>, @Inject(MAT_DIALOG_DATA) public data: any) {

projects/ziti-console-lib/src/lib/features/data-table/data-table-filter.service.ts

@@ -8,6 +8,8 @@ export type FilterObj = {
     value: any;
     label: string;
     type?: string;
+    hidden?: boolean;
+    verb?: string
 }
 
 @Injectable({
@@ -26,7 +28,7 @@ export class DataTableFilterService {
     }
 
     updateFilter(filterObj: FilterObj) {
-        if(isEmpty(filterObj.value) && isNaN(filterObj.value)) this.removeFilter(filterObj);
+        if(isEmpty(filterObj.value) && (isNaN(filterObj.value) || filterObj.value === '')) this.removeFilter(filterObj);
         else {
             let isFound = false;
             for (let idx = 0; idx < this.filters.length; idx++) {

projects/ziti-console-lib/src/lib/features/data-table/data-table.component.html

@@ -1,4 +1,4 @@
-<div class="data-table-container" *ngIf="isLoading || filterApplied || rowData?.length > 0;else nodata">
+<div #tableContainer class="data-table-container" *ngIf="showTable;else nodata">
     <lib-table-filter-bar
             [startCount]="startCount"
             [endCount]="endCount"