directory-connector/src/app/tabs/dashboard.component.html

<div class="card mb-3">
    <h3 class="card-header">{{'sync' | i18n}}</h3>
    <div class="card-body">
        <p>
            {{'lastGroupSync' | i18n}}:
            <span *ngIf="!lastGroupSync">-</span>
            {{lastGroupSync | date:'medium'}}
            <br /> {{'lastUserSync' | i18n}}:
            <span *ngIf="!lastUserSync">-</span>
            {{lastUserSync | date:'medium'}}
        </p>
        <p>
            {{'syncStatus' | i18n}}:
            <strong *ngIf="syncRunning" class="text-success">{{'running' | i18n}}</strong>
            <strong *ngIf="!syncRunning" class="text-danger">{{'stopped' | i18n}}</strong>
        </p>
        <button #startBtn (click)="start()" [appApiAction]="startPromise" class="btn btn-primary"
            [disabled]="startBtn.loading">
            <i class="fa fa-play fa-fw" [hidden]="startBtn.loading"></i>
            <i class="fa fa-spinner fa-fw fa-spin" [hidden]="!startBtn.loading"></i>
            {{'startSync' | i18n}}
        </button>
        <button (click)="stop()" class="btn btn-primary">
            <i class="fa fa-stop fa-fw"></i>
            {{'stopSync' | i18n}}
        </button>
        <button #syncBtn (click)="sync()" [appApiAction]="syncPromise" class="btn btn-primary"
            [disabled]="syncBtn.loading">
            <i class="fa fa-refresh fa-fw" [ngClass]="{'fa-spin': syncBtn.loading}"></i>
            {{'syncNow' | i18n}}
        </button>
    </div>
</div>
<div class="card">
    <h3 class="card-header">{{'testing' | i18n}}</h3>
    <div class="card-body">
        <p>{{'testingDesc' | i18n}}</p>
        <button #simBtn (click)="simulate()" [appApiAction]="simPromise" class="btn btn-primary"
            [disabled]="simBtn.loading">
            <i class="fa fa-spinner fa-fw fa-spin" [hidden]="!simBtn.loading"></i>
            <i class="fa fa-bug fa-fw" [hidden]="simBtn.loading"></i>
            {{'testNow' | i18n}}
        </button>
        <div class="form-check mt-2">
            <input class="form-check-input" type="checkbox" id="simSinceLast" [(ngModel)]="simSinceLast">
            <label class="form-check-label" for="simSinceLast">{{'testLastSync' | i18n}}</label>
        </div>
        <ng-container *ngIf="!simBtn.loading && (simUsers || simGroups)">
            <hr />
            <div class="row">
                <div class="col-lg">
                    <h4>{{'users' | i18n}}</h4>
                    <ul class="fa-ul testing-list" *ngIf="simEnabledUsers && simEnabledUsers.length">
                        <li *ngFor="let u of simEnabledUsers" title="{{u.referenceId}}">
                            <i class="fa-li fa fa-user"></i>
                            {{u.displayName}}
                        </li>
                    </ul>
                    <p *ngIf="!simEnabledUsers || !simEnabledUsers.length">{{'noUsers' | i18n}}</p>
                    <h4>{{'disabledUsers' | i18n}}</h4>
                    <ul class="fa-ul testing-list" *ngIf="simDisabledUsers && simDisabledUsers.length">
                        <li *ngFor="let u of simDisabledUsers" title="{{u.referenceId}}">
                            <i class="fa-li fa fa-user"></i>
                            {{u.displayName}}
                        </li>
                    </ul>
                    <p *ngIf="!simDisabledUsers || !simDisabledUsers.length">{{'noUsers' | i18n}}</p>
                    <h4>{{'deletedUsers' | i18n}}</h4>
                    <ul class="fa-ul testing-list" *ngIf="simDeletedUsers && simDeletedUsers.length">
                        <li *ngFor="let u of simDeletedUsers" title="{{u.referenceId}}">
                            <i class="fa-li fa fa-user"></i>
                            {{u.displayName}}
                        </li>
                    </ul>
                    <p *ngIf="!simDeletedUsers || !simDeletedUsers.length">{{'noUsers' | i18n}}</p>
                </div>
                <div class="col-lg">
                    <h4>{{'groups' | i18n}}</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">{{'noGroups' | i18n}}</p>
                </div>
            </div>
        </ng-container>
    </div>
</div>