IssueFixes (#284)

* supported browser, graph fix, help icon, network-create-firstrun, token-expiration-fix

Fixes contiv/contiv-ui#283
Fixes https://github.com/contiv/ccn/issues/212
Fixes https://github.com/contiv/ccn/issues/211
Fixes https://github.com/contiv/ccn/issues/209
Fixes https://github.com/contiv/ccn/issues/205

app/app.routes.ts

@@ -45,9 +45,9 @@ import { OrganizationDetailsComponent } from "./settings/tenants/organizationdet
 import { LdapConfigComponent } from "./settings/ldapconfiguration";
 
 const routes = [
-    {path: 'login', component: LoginComponent, canActivate: [AuthGuard]},
-    {path: 'logout', component: LogoutComponent, canActivate: [AuthGuard]},
-    {path: 'unauthorized', component: UnauthorizedComponent, canActivate: [AuthGuard]},
+    {path: 'login', component: LoginComponent},
+    {path: 'logout', component: LogoutComponent},
+    {path: 'unauthorized', component: UnauthorizedComponent},
     {path: '', redirectTo: 'login', pathMatch: 'full'},
     {
         path: 'm',

app/applicationgroups/applicationgroupcreatectrl.ts

@@ -114,7 +114,7 @@ export class ApplicationGroupCreateComponent {
             component.networks = _.filter(result, {
                 'tenantName': tenantName
             });
-        });
+        },(err) => {});
     }
 
     updateTenant(tenantName:string) {

app/components/directives/linegraphcomponent.ts

@@ -121,22 +121,30 @@ export class LineGraphComponent implements OnInit, DoCheck, OnDestroy{
         this.lineChartOptions = {
             animation: false,
             responsive: true,
-            scales: {
+        }
+        if(max < 7){
+            this.lineChartOptions['scales'] = {
                 yAxes: [{
                     type: 'linear',
                     ticks: {
                         beginAtZero: true,
-                        suggestedMax: max * 1.5
+                        suggestedMax: 8,
                     }
                 }]
-            },
-            elements: {
-                line:{
-                    borderWidth: 2
-                    },
-                point:{
-                    radius: 4
+            }
+        }
+        else{
+            this.lineChartOptions['scales'] = {
+                yAxes: [{
+                    type: 'linear',
+                    ticks: {
+                        beginAtZero: true,
+                        suggestedMax: Math.round(max * 3),
+                        callback: function(value, index, values){
+                            return Math.round(value);
+                        }
                     }
+                }]
             }
         }
     }

app/components/directives/settings/networkcreateform.html

@@ -8,6 +8,7 @@
                     <label for="newNetworkName">Network name</label>
                     <input type="text" id="newNetworkName" name="newNetworkName"
                            [(ngModel)]="networkCreateCtrl.newNetwork.networkName"
+                           [disabled]="firstRunWiz && (clusterMode === 'kubernetes') && (!networkPresent)"
                            placeholder="Enter name" required #newNetworkName="ngModel">
                     <span class="inlineError" *ngIf="newNetworkName.errors?.required && networkCreateForm.submitted">
                                     Please enter network name
@@ -84,7 +85,7 @@
                     <button type="button" class="ui secondary button" (click)="goback.emit()"><i
                             class="arrow left icon"></i>Go back
                     </button>
-                    <button type="button" class="ui secondary button" (click)="skip.emit()" *ngIf="clusterMode=='docker'">Skip this step</button>
+                    <button type="button" class="ui secondary button" (click)="skip.emit()" *ngIf="(clusterMode!=='kubernetes') || ((clusterMode==='kubernetes') && (networkPresent))">Skip this step</button>
                     <button type="submit" class="ui primary button">Continue<i class="arrow right icon"></i></button>
                 </div>
             </div>

app/components/directives/settings/networkcreateform.ts

@@ -5,6 +5,7 @@
 import {Component, Input, Output, EventEmitter, OnInit, NgZone} from "@angular/core";
 import {OrganizationsModel} from "../../models/organizationsmodel";
 import {CRUDHelperService} from "../../utils/crudhelperservice";
+import {NetworksModel} from "../../models/networksmodel";
 @Component({
     selector: 'networkcreateform',
     templateUrl: './networkcreateform.html'
@@ -21,7 +22,9 @@ export class NetworkCreateformComponent implements OnInit{
     public networkCreateCtrl: any;
     public showLoader: boolean = true;
     public tenants: any = [];
+    public networkPresent: boolean = false;
     constructor(private organizationsModel: OrganizationsModel,
+                private networksModel: NetworksModel,
                 private crudHelperService: CRUDHelperService,
                 private ngZone: NgZone){
         this.createnetwork = new EventEmitter<any>();
@@ -39,6 +42,25 @@ export class NetworkCreateformComponent implements OnInit{
             component.organizationsModel.get(reload)
                 .then((result) => {
                     component.tenants = result;
+                    var p1 = new Promise((resolve, reject) => {
+                        if(component.firstRunWiz){
+                            component.networksModel.get(false)
+                                .then((res) => {
+                                    if(res.length > 0){
+                                        component.networkPresent = true;
+                                        if(component.clusterMode === 'kubernetes' && component.firstRunWiz)
+                                            component.newNetwork['networkName'] = 'default-net';
+                                    }
+                                    resolve(true);
+                                },(err)=>{})
+                        }
+                        else{
+                            resolve(true);
+                        }
+                    })
+                    return p1;
+                })
+                .then((result) => {
                     component.ngZone.run(() => {
                         component.crudHelperService.stopLoader(component);
                     });
@@ -50,8 +72,7 @@ export class NetworkCreateformComponent implements OnInit{
         }
 
         getTenants(false);
-        if(this.clusterMode === 'kubernetes' && this.firstRunWiz)
-            this.newNetwork['networkName'] = 'default-net';
+
     }
 
     createNetwork(formvalid: boolean){

app/components/directives/tooltip.css

@@ -19,7 +19,6 @@ i.toast_info{
 }
 
 .tooltipInfo{
-    width:400px;
     left:36px;
     top:-42px;
     background-color:#008FCE;
@@ -29,7 +28,6 @@ i.toast_info{
     z-index: 5000;
     color: white;
     font-size: 12px;
-    padding: 20px 20px 20px 20px;
     border-radius: 8px;
     visibility: hidden;
 }
@@ -39,7 +37,7 @@ i.toast_info{
     content: "";
     position: absolute;
     top: 31px;
-    left: -6%;
+    left: -22px;
     border-width: 12px;
     border-style: solid;
     border-color: transparent #008FCE transparent transparent;

app/components/directives/tooltip.html

@@ -1,6 +1,8 @@
 <div class="tooltip">
     <i class="toast_info icon"></i>
-    <span class="tooltipInfo">
-        {{data}}
+    <span class="tooltipInfo"
+          [style.width]="width+'px'"
+          [style.padding]="padding+'px '+padding+'px '+padding+'px '++padding+'px '">
+        <ng-content></ng-content>
     </span>
 </div>

app/components/directives/tooltip.ts

@@ -3,13 +3,18 @@
  */
 
 
-import {Component, Input} from "@angular/core";
+import {Component, Input, OnInit} from "@angular/core";
 @Component({
     selector: "tooltip",
     templateUrl: './tooltip.html',
     styleUrls: ['./tooltip.css']
 })
 
-export class TooltipComponent {
-    @Input('data') data: string = '';
+export class TooltipComponent implements OnInit{
+    @Input('width') width: number = 400;
+    public padding: number = 20;
+    ngOnInit(){
+        if (this.width <= 200)
+            this.padding = 10;
+    }
 }

app/components/utils/apiservice.ts

@@ -14,27 +14,47 @@ export class ApiService{
 
     get(url: string): Observable<any>{
         var options = this.prepareHeader('get');
-        return this.http.get(url,options);
+        return this.http.get(url,options)
+            .catch((error: any) => {
+                this.checkUnauthorized(error);
+                return Observable.throw(error);
+            });
     }
 
     put(url:string, body:any): Observable<any>{
         var options = this.prepareHeader('put');
-        return this.http.put(url,body,options);
+        return this.http.put(url,body,options)
+            .catch((error: any) => {
+                this.checkUnauthorized(error);
+                return Observable.throw(error);
+            });
     }
 
     post(url:string, body:any): Observable<any>{
         var options = this.prepareHeader('post');
-        return this.http.post(url,body,options);
+        return this.http.post(url,body,options)
+            .catch((error: any) => {
+                this.checkUnauthorized(error);
+                return Observable.throw(error);
+            });
     }
 
     delete(url:string): Observable<any>{
         var options = this.prepareHeader('delete');
-        return this.http.delete(url,options);
+        return this.http.delete(url,options)
+            .catch((error: any) => {
+                this.checkUnauthorized(error);
+                return Observable.throw(error);
+            });
     }
 
     patch(url:string, body:any): Observable<any>{
         var options = this.prepareHeader('patch')
-        return this.http.patch(url, body, options);
+        return this.http.patch(url, body, options)
+            .catch((error: any) => {
+                this.checkUnauthorized(error);
+                return Observable.throw(error);
+            });
     }
 
     prepareHeader(method: string): RequestOptions{
@@ -46,4 +66,11 @@ export class ApiService{
         var options = new RequestOptions({headers: this.headers});
         return options;
     }
+
+    checkUnauthorized(error: any){
+        if(this.authService.isLoggedIn){
+            if((error.status===401) || (error.status===403))
+                this.authService.isLoggedIn = false;
+        }
+    }
 }

app/components/utils/authguard.ts

@@ -15,13 +15,10 @@ export class AuthGuard implements CanActivate, CanActivateChild {
 
     constructor(private authService: AuthService, private router: Router) {
         this.accessMatrix = AuthMatrix;
-        this.unguardedUrls = ['/unauthorized', '/login', '/logout'];
     }
 
     canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
         let url: string = state.url;
-        if (this.unguardedUrls.indexOf(url) > -1)
-            return true;
         return this.checkLogin(url);
     }
 
@@ -31,15 +28,10 @@ export class AuthGuard implements CanActivate, CanActivateChild {
 
     checkLogin(url: string): boolean {
 
-        if(this.checkFirstRun()){
-            this.router.navigate(['/unauthorized'])
-            return false;
-        }
-
         if (this.authService.isLoggedIn) {
             if (this.checkAccess(url))
                 if (this.authService.validateExpiry())
-                    return true;
+                    return this.performFirstrunCheck(url);
                 else{
                     this.loadLogin(url);
                     return false;
@@ -55,8 +47,9 @@ export class AuthGuard implements CanActivate, CanActivateChild {
             this.authService.extractBody();
             if(this.authService.validateExpiry()){
                 this.authService.isLoggedIn = true;
-                if(this.checkAccess(url))
-                    return true;
+                if(this.checkAccess(url)){
+                    return this.performFirstrunCheck(url);
+                }
                 else{
                     this.router.navigate(['/unauthorized']);
                     return false;
@@ -69,8 +62,6 @@ export class AuthGuard implements CanActivate, CanActivateChild {
     }
 
     loadLogin(url: string): void{
-        // Clean the local storage
-        this.authService.cleanuplocalstorage();
         // Store the attempted URL for redirecting
         this.authService.redirectUrl = url;
         // Navigate to the login page
@@ -81,17 +72,36 @@ export class AuthGuard implements CanActivate, CanActivateChild {
         return this.authService.checkAccess(url);
     }
 
-    checkFirstRun():boolean{
+    isFirstRun():boolean{
         if(isNull(localStorage.getItem('firstRun')))
             this.authService.firstRun = true;
         else
             this.authService.firstRun = false;
-        if(this.authService.firstRun && (this.authService.authTokenPayload['role'] == 'DevOps'))
-            return true;
-        else
-            return false;
+        return this.authService.firstRun;
     }
 
-
+    performFirstrunCheck(url: string){
+        if(this.isFirstRun()){
+            if(/firstrun/.test(url)){
+                if(this.authService.authTokenPayload['role'] !== 'admin'){
+                    this.router.navigate(['/unauthorized']);
+                    return false;
+                }
+                else{
+                    return true;
+                }
+            }
+            this.router.navigate(['/m/firstrun']);
+        }
+        else{
+            if(/firstrun/.test(url)){
+                this.router.navigate(['/m/dashboard']);
+                return false;
+            }
+            else{
+                return true;
+            }
+        }
+    }
 
 }

app/components/utils/authservice.ts

@@ -104,18 +104,6 @@ export class AuthService {
         */
     }
 
-    logout(): void {
-        this.cleanuplocalstorage();
-    }
-
-    cleanuplocalstorage(): void{
-        localStorage.removeItem("authToken");
-        localStorage.removeItem("loginTime");
-        localStorage.removeItem("lastAccessTime");
-        localStorage.removeItem("username");
-        this.isLoggedIn = false;
-    }
-
     encodeUrlData(body: any) :string{
         var str = Object.keys(body).map(function(key){
             return encodeURIComponent(key) + '=' + encodeURIComponent(body[key]);
@@ -171,9 +159,7 @@ export class AuthService {
         }
         lastAcessTime = new Date(lastAcessTime);
         var durationEloped = (currentDate.getTime() - lastAcessTime.getTime()) / 60000;
-        if((durationEloped > 0) && (durationEloped < 10)){
-            if(currentDate.getTime() > (this.authTokenPayload['exp'] * 1000))
-                return false;
+        if((durationEloped > 0) && (durationEloped < 60)){
             localStorage.setItem("lastAccessTime", currentDate.toLocaleString());
             return true;
         }

app/components/utils/chartservice.ts

@@ -77,7 +77,7 @@ export class ChartService{
             this.getInspectData(ContivGlobals.NETWORKS_ENDPOINT, ContivGlobals.NETWORKS_INSPECT_ENDPOINT, EndpointType.Network);
             this.getInspectData(ContivGlobals.APPLICATIONGROUPS_ENDPOINT, ContivGlobals.APPLICATIONGROUPS_INSPECT_ENDPOINT, EndpointType.ApplicationGroup);
         }
-        this.refresh = Observable.interval(10000).subscribe(() => {
+        this.refresh = Observable.interval(30000).subscribe(() => {
             if (this.authService.isLoggedIn){
                 this.getInspectData(ContivGlobals.NETWORKS_ENDPOINT, ContivGlobals.NETWORKS_INSPECT_ENDPOINT, EndpointType.Network);
                 this.getInspectData(ContivGlobals.APPLICATIONGROUPS_ENDPOINT, ContivGlobals.APPLICATIONGROUPS_INSPECT_ENDPOINT, EndpointType.ApplicationGroup);