Fix datacenter#22 and datacenter#27 by refactoring user add/edit logic

Fix datacenter#28 by adding API call at load
Fix datacenter#30 and datacenter#31 by refactoring fabric add/edit logic
Fix datacenter#32
Fix datacenter#42 by disabling animation globally
Work datacenter#41 by updating CSS classes

Author: abodart

UIAssets/src/app/_model/fabric.ts

@@ -15,13 +15,29 @@ export class Fabric {
   apic_password: string;
   controllers: string[];
   fabric: string;
+  validate: boolean;
+  is_new: boolean;
+  password_confirm: string;
 
-  constructor(apic_cert?: string, apic_hostname?: string, apic_username?: string, apic_password?: string, controllers?: string[], fabric?: string) {
+  constructor(
+    apic_cert: string = '',
+    apic_hostname: string = '',
+    apic_username: string = '',
+    apic_password: string = '',
+    controllers: string[] = [],
+    fabric: string = '',
+    validate: boolean = true,
+    is_new: boolean = true,
+    password_confirm: string = ''
+  ) {
     this.apic_cert = apic_cert;
     this.apic_hostname = apic_hostname;
     this.apic_username = apic_username;
     this.apic_password = apic_password;
     this.controllers = controllers;
     this.fabric = fabric;
+    this.validate = validate;
+    this.is_new = is_new;
+    this.password_confirm = password_confirm;
   }
 }

UIAssets/src/app/_model/user.ts

@@ -10,10 +10,25 @@ export class UserList {
 
 export class User {
   username: string;
-  role: any;
+  role: number;
   password: string;
   last_login: number;
+  is_new: boolean;
+  password_confirm: string;
 
-  public constructor() {
+  constructor(
+    username: string = '',
+    role: number = 2,
+    password: string = '',
+    last_login: number = 0,
+    is_new: boolean = false,
+    password_confirm: string = ''
+  ) {
+    this.username = username;
+    this.role = role;
+    this.password = password;
+    this.last_login = last_login;
+    this.is_new = is_new;
+    this.password_confirm = password_confirm;
   }
 }

UIAssets/src/app/_service/backend.service.ts

@@ -52,19 +52,30 @@ export class BackendService {
   }
 
   createUser(user: User): Observable<any> {
-    return this.http.post(this.baseUrl + 'users', user);
+    let toSave = new User(
+      user.username,
+      user.role,
+      user.password
+    );
+    delete toSave.last_login;
+    delete toSave.is_new;
+    delete toSave.password_confirm;
+    return this.http.post(this.baseUrl + 'users', toSave);
   }
 
   updateUser(user: User): Observable<any> {
-    if (user.role === 'Admin') {
-      user.role = 0;
-    } else if (user.role === 'User') {
-      user.role = 1;
-    } else if (user.role === 'Blacklist') {
-      user.role = 2;
+    let toSave = new User(
+      user.username,
+      user.role,
+      user.password
+    );
+    delete toSave.is_new;
+    delete toSave.password_confirm;
+    delete toSave.last_login;
+    if (toSave.password == '') {
+      delete toSave.password;
     }
-    delete user.last_login;
-    return this.http.patch(this.baseUrl + 'users/' + user.username, user);
+    return this.http.patch(this.baseUrl + 'users/' + toSave.username, toSave);
   }
 
   deleteUser(user: User): Observable<any> {
@@ -110,7 +121,19 @@ export class BackendService {
   }
 
   createFabric(fabric: Fabric): Observable<any> {
-    return this.http.post(this.baseUrl + 'aci/fabrics', fabric);
+    let toSave = new Fabric(
+      fabric.apic_cert,
+      fabric.apic_hostname,
+      fabric.apic_username,
+      fabric.apic_password,
+      fabric.controllers,
+      fabric.fabric
+    );
+    delete toSave.controllers;
+    delete toSave.validate;
+    delete toSave.is_new;
+    delete toSave.password_confirm;
+    return this.http.post(this.baseUrl + 'aci/fabrics', toSave);
   }
 
   getFabrics(): Observable<FabricList> {
@@ -121,8 +144,22 @@ export class BackendService {
   }
 
   updateFabric(fabric: Fabric): Observable<any> {
-    delete fabric.controllers;
-    return this.http.patch(this.baseUrl + 'aci/fabrics/' + fabric.fabric, fabric);
+    let toSave = new Fabric(
+      fabric.apic_cert,
+      fabric.apic_hostname,
+      fabric.apic_username,
+      fabric.apic_password,
+      fabric.controllers,
+      fabric.fabric
+    );
+    delete toSave.controllers;
+    delete toSave.validate;
+    delete toSave.is_new;
+    delete toSave.password_confirm;
+    if (toSave.apic_password == '') {
+      delete toSave.apic_password;
+    }
+    return this.http.patch(this.baseUrl + 'aci/fabrics/' + toSave.fabric, toSave);
   }
 
   deleteFabric(fabric: Fabric): Observable<any> {

UIAssets/src/app/app.component.ts

@@ -7,6 +7,7 @@ import {environment} from '../environments/environment';
 import {BackendService} from './_service/backend.service';
 import {Title} from '@angular/platform-browser';
 import {CookieService} from 'ngx-cookie-service';
+import {UserList} from "./_model/user";
 
 @Component({
   selector: 'app-root',
@@ -53,6 +54,10 @@ export class AppComponent implements OnInit, OnDestroy {
     } else {
       this.app_loaded = true;
     }
+    if (environment.login_required) {
+      this.backendService.getUsers().subscribe((results: UserList) => {
+      });
+    }
     this.login_required = (localStorage.getItem('isLoggedIn') != 'true' && environment.login_required);
     this.router.events.pipe(filter(event => event instanceof NavigationEnd)).subscribe(event => {
         this.login_required = (localStorage.getItem('isLoggedIn') != 'true' && environment.login_required);

UIAssets/src/app/comparison-detail/comparison-detail.component.html

@@ -241,7 +241,7 @@ <h3>Parameters</h3>
                     [sortable]="true"
                     [flexGrow]="0.2">
                     <ng-template let-row="row" let-value="value" ngx-datatable-cell-template>
-                      <span *ngIf="row['node_id'] === 0 ; spanElse">Global</span>
+                      <span *ngIf="row['node_id'] === 0">Global</span>
                       <span *ngIf="row['node_id'] !== 0">{{ row['node_id'] | number }}</span>
                     </ng-template>
                   </ngx-datatable-column>

UIAssets/src/app/comparison-result-detail/comparison-result-detail.component.html

@@ -88,11 +88,11 @@ <h6>
     <div *ngIf="type=='modified'" class="row">
       <div class="col-md-4">
         <div class="row">
-          <div class="col-md-6">
+          <div class="col-md-4">
             Line diff mode
           </div>
-          <div class="col-md-6">
-            <label class="switch-icon">
+          <div class="col-md-8">
+            <label class="switch">
               <input
                 #diffModeCheckBox
                 id="diffModeCheckBox"

UIAssets/src/app/comparison/comparison.component.html

@@ -171,27 +171,35 @@ <h6>
           </div>
         </div>
         <div class="col-md-12">
-          <div class="form-group">
+          <div class="form-group form-group--inline">
             <label class="checkbox">
               <input type="checkbox" [(ngModel)]="comparison.dynamic" name="dynamic">
               <span class="checkbox__input"></span>
               <span class="checkbox__label">Dynamic</span>
             </label>
+          </div>
+          <div class="form-group form-group--inline">
             <label class="checkbox">
               <input type="checkbox" [(ngModel)]="comparison.remap" name="remap">
               <span class="checkbox__input"></span>
               <span class="checkbox__label">Remap</span>
             </label>
+          </div>
+          <div class="form-group form-group--inline">
             <label class="checkbox">
               <input type="checkbox" [(ngModel)]="comparison.serialize" name="serialize">
               <span class="checkbox__input"></span>
               <span class="checkbox__label">Serialize</span>
             </label>
+          </div>
+          <div class="form-group form-group--inline">
             <label class="checkbox">
               <input type="checkbox" [(ngModel)]="comparison.statistic" name="statistic">
               <span class="checkbox__input"></span>
               <span class="checkbox__label">Statistic</span>
             </label>
+          </div>
+          <div class="form-group form-group--inline">
             <label class="checkbox">
               <input type="checkbox" [(ngModel)]="comparison.timestamp" name="timestamp">
               <span class="checkbox__input"></span>

UIAssets/src/app/fabric/fabric.component.html

@@ -77,8 +77,8 @@ <h4>
               </ngx-datatable-column>
               <ngx-datatable-column name="Actions" [flexGrow]="0.1">
                 <ng-template let-row="row" let-value="value" ngx-datatable-cell-template>
-                  <a class="btn btn--small btn--icon btn--primary" title="Update" (click)='openModal(editTemplate,row)'>
-                    <span data-balloon="Update" data-balloon-pos="left">
+                  <a class="btn btn--small btn--icon btn--primary" title="Edit" (click)='openModal(addtemplate,row)'>
+                    <span data-balloon="Edit" data-balloon-pos="left">
                     <span class="icon-pencil"></span>
                   </span>
                   </a>
@@ -112,14 +112,14 @@ <h4>
 <ng-template #addtemplate>
   <form #fabricForm="ngForm" (ngSubmit)="onSubmit()">
     <div class="modal-body">
-      <h6>
-        Add a new fabric
-      </h6>
+      <h6 *ngIf="fabric.is_new"> Add a new fabric </h6>
+      <h6 *ngIf="!fabric.is_new"> Edit fabric </h6>
       <div class="row">
         <div class="col-md-12">
           <div class="form-group">
             <div class="form-group__text">
-              <input id="fabric" type="text" required [(ngModel)]="fabric.fabric" name="name">
+              <input id="fabric" type="text" [disabled]="!fabric.is_new" [required]="fabric.is_new"
+                     [(ngModel)]="fabric.fabric" name="name">
               <label for="fabric">Name</label>
             </div>
           </div>
@@ -137,65 +137,24 @@ <h6>
           </div>
           <div class="form-group">
             <div class="form-group__text">
-              <input id="apic_password" type="password" required [(ngModel)]="fabric.apic_password"
+              <input id="apic_password" type="password" [required]="fabric.is_new" [(ngModel)]="fabric.apic_password"
                      name="apic_password">
               <label for="apic_password">Password</label>
             </div>
           </div>
-        </div>
-        <div class="col-md-12">
-          &nbsp;
-        </div>
-      </div>
-    </div>
-    <br>
-    <div class="modal-footer">
-      <button type="submit" class="btn btn--small btn--primary" [disabled]="!fabricForm.form.valid">Add</button>
-      <button type="reset" class="btn btn--small" (click)="hideModal()">Cancel</button>
-    </div>
-  </form>
-</ng-template>
-<ng-template #editTemplate>
-  <form #editfabricForm="ngForm" (ngSubmit)="updateValue()">
-    <div class="modal-body">
-      <h6>
-        Edit fabric
-      </h6>
-      <div class="row">
-        <div class="col-md-12">
-          <div class="form-group">
+          <div class="form-group" [ngClass]="{'form-group--error':fabric.apic_password !== fabric.password_confirm}">
             <div class="form-group__text">
-              <input id="editfabric" type="text" required [ngModel]="fabric.fabric" name="name" readonly>
-              <label for="editfabric">Name</label>
+              <input id="password_confirm" type="password" [required]="fabric.is_new" [(ngModel)]="fabric.password_confirm"
+                     name="password_confirm">
+              <label for="password_confirm">Confirm password</label>
             </div>
           </div>
-          <div class="form-group">
-            <div class="form-group__text">
-              <input id="edit_apic_hostname" type="text" required [(ngModel)]="fabric.apic_hostname"
-                     name="apic_hostname">
-              <label for="edit_apic_hostname">Hostname</label>
-            </div>
-          </div>
-          <div class="form-group">
-            <div class="form-group__text">
-              <input id="edit_apic_username" type="text" required [(ngModel)]="fabric.apic_username"
-                     name="apic_username">
-              <label for="edit_apic_username">Username</label>
-            </div>
-          </div>
-          <div class="form-group">
-            <div class="form-group__text">
-              <input id="edit_apic_password" type="password" required [(ngModel)]="fabric.apic_password"
-                     name="apic_password">
-              <label for="edit_apic_password">Password</label>
-            </div>
-          </div>
-          <div class="form-group">
-            <div class="form-group__text">
-              <input id="confirm_apic_password" type="password" required [(ngModel)]="confirmPassword"
-                     name="confirm_apic_password">
-              <label for="confirm_apic_password">Confirm Password</label>
-            </div>
+          <div class="form-group form-group--inline">
+            <label class="checkbox">
+              <input type="checkbox" [(ngModel)]="fabric.validate" name="validate">
+              <span class="checkbox__input"></span>
+              <span class="checkbox__label">Validate credentials</span>
+            </label>
           </div>
         </div>
         <div class="col-md-12">
@@ -205,7 +164,9 @@ <h6>
     </div>
     <br>
     <div class="modal-footer">
-      <button type="submit" class="btn btn--small btn--primary" [disabled]="!editfabricForm.form.valid">Update</button>
+      <button type="submit" class="btn btn--small btn--primary" [disabled]="!fabricForm.form.valid">
+        {{ fabric.is_new?'Add':'Save'}}
+      </button>
       <button type="reset" class="btn btn--small" (click)="hideModal()">Cancel</button>
     </div>
   </form>