hostbbq-monitoring/ng/src/app/components/service-check-form/service-check-form.component.html

<div [formGroup]="serviceCheckForm">
  <div class="row">
    <div class="col-8">
      <div class="row mb-2">
        <label class="col-3 col-form-label">Title</label>
        <div class="col-9">
          <input type="text" formControlName="title" class="form-control" />
        </div>
      </div>
    </div>
    <div class="col-4 h-100 overflow-auto">
      <div class="row mb-2 mt-2">
        <label class="form-check-label text-end">
          <input class="form-check-input" formControlName="active" type="checkbox" value="" />
          Active
        </label>
      </div>
    </div>
  </div>
  <div class="row border-top">
    <div class="col-12">
      <div class="row mb-2 mt-2">
        <label class="col-2 col-form-label">Url</label>
        <div class="col-10">
          <input type="text" formControlName="url" class="form-control" />
        </div>
      </div>
    </div>
  </div>
  <div class="row border-top">
    <label class="col-lg-2 col-form-label mt-2">Settings</label>
    <div class="col-lg-10">
      <div class="row">
        <div class="col-lg-6">
          <div class="row mb-2 mt-2">
            <label class="col-2 col-lg-5 col-form-label">Interval:</label>
            <div class="col-10 col-lg-7">
              <div class="input-group">
                <input type="number" step="10" formControlName="interval" class="form-control" />
                <span class="input-group-text">s</span>
              </div>
            </div>
          </div>
        </div>
        <div class="col-lg-6">
          <div class="row mb-2 mt-2">
            <label class="col-2 col-lg-5 col-form-label">Timeout:</label>
            <div class="col-10 col-lg-7">
              <div class="input-group">
                <input type="number" step="100" formControlName="timeout" class="form-control" />
                <span class="input-group-text">ms</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="row border-top">
    <label class="col-lg-2 col-form-label mt-2">Notification</label>
    <div class="col-lg-10">
      <div class="row mb-2 mt-2">
        <label class="col-sm-3 col-form-label">
          <input type="checkbox" formControlName="notify" class="form-check-input" />
          Notify
        </label>

        <div class="col-sm-9">
          <div class="row">
            <label class="col-4 col-form-label text-end">Threshold:</label>
            <div class="col-8">
              <input type="number" formControlName="notifyThreshold" class="form-control" />
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="row border-top">
    <div class="col-12">
      <label class="mt-2">Check</label>
      <div class="mt-2 position-relative border p-0">
        <app-service-check-disjunction
          [model]="serviceCheck.checks"
          [sortVisible]="{ up: false, down: false }"
          [removable]="false"></app-service-check-disjunction>
      </div>
    </div>
  </div>
</div>

<ng-template #testModalContent let-modal>
  <div class="modal-header">
    <h4 class="modal-title">Test run of "{{ testRun?.config?.title }}"</h4>
    <button type="button" class="btn-close" aria-label="Close" (click)="modal.dismiss(0)"></button>
  </div>
  <div class="modal-body">
    <ng-container *ngIf="!testRun?.loading; else testRunLoading">
      <ng-container *ngIf="testRun?.result">
        <table class="table">
          <colgroup>
            <col width="180" />
            <col width="*" />
          </colgroup>
          <tbody>
            <tr [class]="testRun?.result | statusColor">
              <th scope="row" [rowSpan]="testRun?.result?.data?.length">{{ testRun?.result?.time | date : 'yyyy-MM-dd HH:mm:ss' }}</th>
              <td>{{ testRun?.result?.data?.[0]?.message }}</td>
            </tr>
            <tr *ngFor="let msg of testRun?.result?.data | slice : 1" [class]="testRun?.result | statusColor">
              <td>{{ msg.message }}</td>
            </tr>
          </tbody>
        </table>
      </ng-container>
      <ng-container *ngIf="testRun?.error">
        <div class="alert alert-danger">
          <pre>{{ testRun?.error | json }}</pre>
        </div>
      </ng-container>
    </ng-container>
    <ng-template #testRunLoading>
      <app-status-timeline-widget></app-status-timeline-widget>
    </ng-template>
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-outline-primary" (click)="modal.close(true)">Close</button>
  </div>
</ng-template>