v0.9.11 add health check and CSP

Author: zhyale

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "janusec-admin",
-  "version": "0.9.10",
+  "version": "0.9.11",
   "license": "MIT",
   "scripts": {
     "ng": "ng",
@@ -25,7 +25,7 @@
     "@angular/router": "^9.0.4",
     "@types/node": "^12.12.27",
     "bcryptjs": "^2.4.3",
-    "chart.js": "^2.9.3",
+    "chart.js": "^2.9.4",
     "classlist.js": "^1.1.20150312",
     "core-js": "^2.6.11",
     "crypto-js": "^3.3.0",
@@ -51,7 +51,7 @@
     "@angular/compiler-cli": "^9.0.4",
     "@angular/language-service": "^9.0.4",
     "@types/bcryptjs": "^2.4.2",
-    "@types/chart.js": "^2.9.12",
+    "@types/chart.js": "^2.9.27",
     "@types/crypto-js": "^3.1.43",
     "@types/jasmine": "~2.5.53",
     "@types/jasminewd2": "^2.0.8",

package.json

@@ -19,6 +19,7 @@ import { CCLogDetailComponent } from '../cclog-detail/cclog-detail.component';
 import { SettingsComponent } from '../settings/settings.component';
 import { FrontpageComponent } from '../frontpage/frontpage.component';
 import { WebsshComponent } from '../webssh/webssh.component';
+import { HealthCheckComponent } from '../health-check/health-check.component';
 
 const routes: Routes = [
   { path: '', redirectTo: '/index.html', pathMatch: 'full' },
@@ -40,7 +41,8 @@ const routes: Routes = [
   { path: 'log/:id', component: LogDetailComponent},
   { path: 'cclog/:id', component: CCLogDetailComponent},
   { path: 'login', component: LoginFormComponent},
-  { path: 'ssh', component: WebsshComponent }
+  { path: 'ssh', component: WebsshComponent },
+  { path: 'health', component: HealthCheckComponent },
 ];
 
 @NgModule({

src/app/app-routing/app-routing.module.ts

@@ -1,5 +1,5 @@
 .sidenav-container {
-    min-height: 500px;
+    min-height: 700px;
 }
 
 .sidenav {

src/app/app.component.css

@@ -24,7 +24,14 @@
                     <mat-icon>explore</mat-icon>
                     <span i18n="@@app_mgmt">Application</span>
                 </a>
-        </mat-list-item>        
+        </mat-list-item>           
+        
+        <mat-list-item>
+            <a routerLink="/health">
+                <mat-icon>check_circle_outline</mat-icon>
+                <span i18n="@@health_check">Health</span>
+            </a>  
+        </mat-list-item>
 
         <mat-list-item *ngIf="applicationService.auth_user.is_super_admin==true">
             <a routerLink="/nodes">
@@ -62,7 +69,7 @@
         </mat-list-item>
 
         <mat-list-item>
-            <a routerLink="/ssh" target="_blank">
+            <a routerLink="/ssh">
                 <mat-icon>computer</mat-icon>
                 <span>Web SSH</span>
             </a>  

src/app/app.component.html

@@ -63,6 +63,7 @@ import { MatNativeDateModule, MatRippleModule } from '@angular/material/core';
 import { WebsshComponent } from './webssh/webssh.component';
 import { HashLocationStrategy, LocationStrategy} from '@angular/common';
 import { FlexLayoutModule } from '@angular/flex-layout';
+import { HealthCheckComponent } from './health-check/health-check.component';
 
 @NgModule({
   exports:[
@@ -128,7 +129,8 @@ export class MaterialModule{}
     CCLogDetailComponent,
     SettingsComponent,
     FrontpageComponent,
-    WebsshComponent
+    WebsshComponent,
+    HealthCheckComponent
   ],
   imports: [
     MaterialModule,

src/app/app.module.ts

@@ -7,8 +7,8 @@
 }
 
 mat-form-field {
-    margin-top:3px;
-    margin-bottom:3px;
+    margin-top: 10px;
+    margin-bottom: 3px;
     background-color: #f5f5f5;
 }
 
@@ -56,3 +56,7 @@ mat-form-field {
     padding: 5px;
     border-radius: 5px;
 }
+
+button {
+    margin-right: 5px;
+}

src/app/application-detail/application-detail.component.css

@@ -147,6 +147,18 @@ <h3 i18n="@@routing_configuration">Routing Configuration</h3>
         <input i18n-placeholder="@@session_seconds" type="number" matInput [(ngModel)]="application.session_seconds" [readonly]="readOnlyValue" placeholder="Session Expire Seconds for OAuth2"/>
     </mat-form-field> 
 
+    <section>
+        <mat-checkbox i18n="@@csp_enabled" [(ngModel)]="application.csp_enabled" [disabled]="readOnlyValue">
+            Enable CSP (Content-Security-Policy, example: default-src 'self' )
+        </mat-checkbox>
+    </section>
+
+    <mat-form-field *ngIf="application.csp_enabled">
+        <mat-label>Content-Security-Policy</mat-label>
+        <input matInput i18n-placeholder="@@csp" [(ngModel)]="application.csp" #csp [readonly]="readOnlyValue" placeholder=""/>
+        <mat-hint align="end">{{csp.value?.length || 0}}/1024</mat-hint>
+    </mat-form-field> 
+
     <mat-form-field>
         <input matInput i18n-placeholder="@@owner" [(ngModel)]="application.owner" [readonly]="readOnlyValue" placeholder="Application Owner"/>
     </mat-form-field> 
@@ -156,8 +168,8 @@ <h3 i18n="@@routing_configuration">Routing Configuration</h3>
         <mat-hint align="end">{{description.value?.length || 0}}/256</mat-hint>
       </mat-form-field> 
     <div>
-    <button i18n="@@save" mat-raised-button [disabled]="readOnlyValue" (click)="setApplication()" color="primary">Save</button>
-    <button mat-raised-button (click)="changeEditable()" color="primary">{{readOnlyButtonText}}</button>
-    <button i18n="@@delete" mat-raised-button [disabled]="readOnlyValue" (click)="deleteApplication()" color="primary">Delete</button>
+    <button i18n="@@save" mat-stroked-button [disabled]="readOnlyValue" (click)="setApplication()">Save</button>
+    <button mat-stroked-button (click)="changeEditable()">{{readOnlyButtonText}}</button>
+    <button i18n="@@delete" mat-stroked-button [disabled]="readOnlyValue" (click)="deleteApplication()">Delete</button>
   </div>  
   </div>

src/app/application-detail/application-detail.component.html

@@ -122,24 +122,6 @@ export class ApplicationDetailComponent implements OnInit {
 
   }
 
-/*
-  addStaticDir():void{
-    if(this.readOnlyValue) return;
-    this.application.static_dirs.push("");
-    console.log(this.application.static_dirs);
-  }
-
-  delStaticDir(i:number):void{
-    if(this.readOnlyValue) return;
-    if(this.application.static_dirs.length==1) {
-      alert("At least one item is required, keep it empty if not required !");
-      return;
-    }
-    this.application.static_dirs.splice(i,1);
-    console.log(this.application.static_dirs);
-  }
-*/
-
   addDomain():void{
     if(this.readOnlyValue) return;
     var new_domain: Domain=new Domain();

src/app/application-detail/application-detail.component.ts

@@ -16,19 +16,7 @@ export class ApplicationsComponent implements OnInit {
   constructor(
     public applicationService: ApplicationService,
     private router: Router) { }
-/*
-  getApplications(): void {
-    this.applicationService
-        .getApplications()
-        .subscribe((applications) => {
-          if (applications==null) {
-            this.router.navigate(['/login']);
-          } else {
-            this.applicationService.applications = applications;
-          }          
-        });
-  }
-*/
+
   ngOnInit(): void {
     if (this.applicationService.auth_user.logged==false) {
       this.router.navigate(['/']);