simualtion testing from dashboard

src/app/accounts/login.component.html

@@ -16,10 +16,8 @@
                             </div>
                         </div>
                         <button type="submit" class="btn btn-primary" [disabled]="form.loading" appBlurClick>
-                            <span [hidden]="form.loading">
-                                <i class="fa fa-sign-in"></i> {{'logIn' | i18n}}
-                            </span>
                             <i class="fa fa-spinner fa-spin" [hidden]="!form.loading"></i>
+                            {{'logIn' | i18n}}
                         </button>
                         <button type="button" class="btn btn-link" (click)="settings()" appBlurClick>
                             {{'settings' | i18n}}

src/app/accounts/two-factor.component.html

@@ -43,10 +43,8 @@
                         </ng-container>
                         <button type="submit" class="btn btn-primary" [disabled]="form.loading" appBlurClick *ngIf="selectedProviderType != null && selectedProviderType !== providerType.U2f && selectedProviderType !== providerType.Duo && 
                         selectedProviderType !== providerType.OrganizationDuo">
-                            <span [hidden]="form.loading">
-                                <i class="fa fa-sign-in"></i> {{'continue' | i18n}}
-                            </span>
                             <i class="fa fa-spinner fa-spin" [hidden]="!form.loading"></i>
+                            {{'continue' | i18n}}
                         </button>
                         <a routerLink="/login" class="btn btn-link">{{'cancel' | i18n}}</a>
                     </div>

src/app/tabs/dashboard.component.html

@@ -1,2 +1,51 @@
-<button (click)="sync()">Sync</button>
-<button (click)="simulate()">Simulate</button>
+<div class="card mb-3">
+    <h3 class="card-header">{{'sync' | i18n}}</h3>
+    <div class="card-body">
+        <button #syncBtn (click)="sync()" [appApiAction]="syncPromise" class="btn btn-primary" [disabled]="syncBtn.loading">
+            <i class="fa fa-spinner fa-spin" [hidden]="!syncBtn.loading"></i>
+            {{'sync' | i18n}}
+        </button>
+    </div>
+</div>
+<div class="card">
+    <h3 class="card-header">Testing</h3>
+    <div class="card-body">
+        <button #simBtn (click)="simulate()" [appApiAction]="simPromise" class="btn btn-primary" [disabled]="simBtn.loading">
+            <i class="fa fa-spinner fa-spin" [hidden]="!simBtn.loading"></i>
+            Simulate
+        </button>
+        <div class="form-check mt-2">
+            <input class="form-check-input" type="checkbox" id="sinceLast" [(ngModel)]="sinceLast">
+            <label class="form-check-label" for="sinceLast">Since the last successful sync</label>
+        </div>
+        <ng-container *ngIf="!simBtn.loading && (simUsers || simGroups)">
+            <hr />
+            <div class="row">
+                <div class="col-lg">
+                    <h4>Users</h4>
+                    <ul class="fa-ul testing-list" *ngIf="simUsers && simUsers.length">
+                        <li *ngFor="let u of simUsers" [ngClass]="{'deleted': u.deleted}" title="{{u.referenceId}}">
+                            <i class="fa-li fa fa-user"></i>
+                            {{u.displayName}}
+                            <i class="fa fa-minus-circle" *ngIf="u.disabled"></i>
+                        </li>
+                    </ul>
+                    <p *ngIf="!simUsers || !simUsers.length">No users to list.</p>
+                </div>
+                <div class="col-lg">
+                    <h4>Groups</h4>
+                    <ul class="fa-ul testing-list" *ngIf="simGroups && simGroups.length">
+                        <li *ngFor="let g of simGroups" title="{{g.referenceId}}">
+                            <i class="fa-li fa fa-sitemap"></i>
+                            {{g.displayName}}
+                            <ul class="small" *ngIf="g.users && g.users.length">
+                                <li *ngFor="let u of g.users" title="{{u.referenceId}}">{{u.displayName}}</li>
+                            </ul>
+                        </li>
+                    </ul>
+                    <p *ngIf="!simGroups || !simGroups.length">No groups to list.</p>
+                </div>
+            </div>
+        </ng-container>
+    </div>
+</div>

src/app/tabs/dashboard.component.ts

@@ -7,18 +7,61 @@ import { GSuiteDirectoryService } from '../../services/gsuite-directory.service'
 import { LdapDirectoryService } from '../../services/ldap-directory.service';
 import { SyncService } from '../../services/sync.service';
 
+import { GroupEntry } from '../../models/groupEntry';
+import { UserEntry } from '../../models/userEntry';
+
 @Component({
     selector: 'app-dashboard',
     templateUrl: 'dashboard.component.html',
 })
 export class DashboardComponent {
+    simGroups: GroupEntry[];
+    simUsers: UserEntry[];
+    simPromise: Promise<any>;
+    syncPromise: Promise<any>;
+    sinceLast: boolean = false;
+
     constructor(private i18nService: I18nService, private syncService: SyncService) { }
 
     async sync() {
-        await this.syncService.sync(false, true);
+        this.syncPromise = this.syncService.sync(false, true);
+        await this.syncPromise;
     }
 
     async simulate() {
-        await this.syncService.sync(true, false);
+        this.simPromise = new Promise(async (resolve, reject) => {
+            try {
+                const result = await this.syncService.sync(!this.sinceLast, false);
+                this.simUsers = result[1];
+                this.simGroups = result[0];
+            } catch (e) {
+                reject(e || 'Sync error.');
+            }
+
+            const userMap = new Map<string, UserEntry>();
+            if (this.simUsers != null) {
+                this.simUsers.forEach((u) => {
+                    userMap.set(u.externalId, u);
+                });
+            }
+
+            if (userMap.size > 0 && this.simGroups != null) {
+                this.simGroups.forEach((g) => {
+                    if (g.userMemberExternalIds == null) {
+                        return;
+                    }
+
+                    g.userMemberExternalIds.forEach((uid) => {
+                        if (userMap.has(uid)) {
+                            if ((g as any).users == null) {
+                                (g as any).users = [];
+                            }
+                            (g as any).users.push(userMap.get(uid));
+                        }
+                    });
+                });
+            }
+            resolve();
+        });
     }
 }

src/models/groupEntry.ts

@@ -4,4 +4,12 @@ export class GroupEntry extends Entry {
     name: string;
     userMemberExternalIds = new Set<string>();
     groupMemberReferenceIds = new Set<string>();
+
+    get displayName(): string {
+        if (this.name == null) {
+            return this.referenceId;
+        }
+
+        return this.name;
+    }
 }

src/models/userEntry.ts

@@ -4,4 +4,12 @@ export class UserEntry extends Entry {
     email: string;
     disabled = false;
     deleted = false;
+
+    get displayName(): string {
+        if (this.email == null) {
+            return this.referenceId;
+        }
+
+        return this.email;
+    }
 }

src/scss/misc.scss

@@ -47,3 +47,13 @@ app-root > #loading {
     margin-top: 20px;
     color: $text-muted;
 }
+
+ul.testing-list {
+    ul {
+        padding-left: 18px;
+    }
+
+    li.deleted {
+        text-decoration: line-through;
+    }
+}

src/services/azure-directory.service.ts

@@ -164,7 +164,7 @@ export class AzureDirectoryService implements DirectoryService {
             while (true) {
                 const groups: graphType.Group[] = res.value;
                 if (groups != null) {
-                    groups.forEach(async (group) => {
+                    for (const group of groups) {
                         if (getFullResults) {
                             if (this.filterOutResult(setFilter, group.displayName)) {
                                 return;
@@ -175,7 +175,7 @@ export class AzureDirectoryService implements DirectoryService {
                         } else {
                             changedGroupIds.push(group.id);
                         }
-                    });
+                    }
                 }
 
                 if (res[NextLink] == null) {
@@ -201,14 +201,14 @@ export class AzureDirectoryService implements DirectoryService {
         while (true) {
             const allGroups: graphType.Group[] = res.value;
             if (allGroups != null) {
-                allGroups.forEach(async (group) => {
+                for (const group of allGroups) {
                     if (this.filterOutResult(setFilter, group.displayName)) {
                         return;
                     }
 
                     const entry = await this.buildGroup(group);
                     entries.push(entry);
-                });
+                }
             }
 
             if (res[NextLink] == null) {

src/services/gsuite-directory.service.ts

@@ -137,14 +137,14 @@ export class GSuiteDirectoryService implements DirectoryService {
 
         const filter = this.createSet(this.syncConfig.groupFilter);
         if (res.data.groups != null) {
-            res.data.groups.forEach(async (group) => {
+            for (const group of res.data.groups) {
                 if (this.filterOutResult(filter, group.name)) {
                     return;
                 }
 
                 const entry = await this.buildGroup(group);
                 entries.push(entry);
-            });
+            }
         }
 
         return entries;