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>
    <form #startForm [appApiAction]="startPromise" class="d-inline">
      <button
        type="button"
        (click)="start()"
        class="btn btn-primary"
        [disabled]="startForm.loading"
      >
        <i class="bwi bwi-spinner bwi-fw bwi-spin" [hidden]="!startForm.loading"></i>
        {{ "startSync" | i18n }}
      </button>
    </form>
    <button type="button" (click)="stop()" class="btn btn-danger text-white">
      {{ "stopSync" | i18n }}
    </button>
    <form #syncForm [appApiAction]="syncPromise" class="d-inline">
      <button type="button" (click)="sync()" class="btn btn-primary" [disabled]="syncForm.loading">
        {{ "syncNow" | i18n }}
      </button>
    </form>
  </div>
</div>
<div class="card">
  <h3 class="card-header">{{ "testing" | i18n }}</h3>
  <div class="card-body">
    <p>{{ "testingDesc" | i18n }}</p>
    <form #simForm [appApiAction]="simPromise" class="d-inline">
      <button
        type="button"
        (click)="simulate()"
        class="btn btn-primary"
        [disabled]="simForm.loading"
      >
        <i class="bwi bwi-spinner bwi-fw bwi-spin" [hidden]="!simForm.loading"></i>
        {{ "testNow" | i18n }}
      </button>
    </form>
    <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="!simForm.loading && (simUsers || simGroups)">
      <hr />
      <div class="row">
        <div class="col-lg">
          <h4>{{ "users" | i18n }}</h4>
          <ul class="bwi-ul testing-list" *ngIf="simEnabledUsers && simEnabledUsers.length">
            <li *ngFor="let u of simEnabledUsers" title="{{ u.referenceId }}">
              <i class="bwi bwi-li bwi-user"></i>
              {{ u.displayName }}
            </li>
          </ul>
          <p *ngIf="!simEnabledUsers || !simEnabledUsers.length">
            {{ "noUsers" | i18n }}
          </p>
          <h4>{{ "disabledUsers" | i18n }}</h4>
          <ul class="bwi-ul testing-list" *ngIf="simDisabledUsers && simDisabledUsers.length">
            <li *ngFor="let u of simDisabledUsers" title="{{ u.referenceId }}">
              <i class="bwi bwi-li bwi-user"></i>
              {{ u.displayName }}
            </li>
          </ul>
          <p *ngIf="!simDisabledUsers || !simDisabledUsers.length">
            {{ "noUsers" | i18n }}
          </p>
          <h4>{{ "deletedUsers" | i18n }}</h4>
          <ul class="bwi-ul testing-list" *ngIf="simDeletedUsers && simDeletedUsers.length">
            <li *ngFor="let u of simDeletedUsers" title="{{ u.referenceId }}">
              <i class="bwi bwi-li bwi-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="bwi-ul testing-list" *ngIf="simGroups && simGroups.length">
            <li *ngFor="let g of simGroups" title="{{ g.referenceId }}">
              <i class="bwi bwi-li bwi-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>