fabric8-analytics-dependency-editor-jyas/src/app/alert-box/alert-box.component.html

Dependency editor

<div class="alert-box">
  <div class="alert-head" *ngIf="alert?.header">
    <!-- Header goes here -->
    <span *ngIf="alert?.header?.icon" class="icon-holder">
      <span [class]="alert?.header?.icon"></span>
    </span>
    <div class="title" *ngIf="alert?.header?.name" [innerHTML]="alert?.header?.name"></div>
    <i *ngIf="alert?.header?.tooltip"
          [tooltip]="alert?.header?.tooltip"
          class="fa fa-info-circle"
          aria-hidden="true"></i>
    <span class="count-info">
      <span *ngIf="alert?.header?.countInfo !== undefined" class="badge" [innerHTML]="alert?.header?.countInfo"></span>
    </span>
    <div *ngIf="alert?.header?.secondaryInfo" class="secondary-info">
      <span *ngIf="alert?.header?.secondaryInfo?.mainText" class="main-text" [innerHTML]="alert?.header?.secondaryInfo?.mainText"></span>
      <span *ngIf="alert?.header?.secondaryInfo?.subText" class="sub-text" [innerHTML]="alert?.header?.secondaryInfo?.subText"></span>
    </div>
    <span *ngIf="alert?.header?.indicator" [ngClass]="{'indicator': true, 'success': alert?.header?.indicator === 'SUCCESS', 'warning': alert?.header?.indicator === 'WARNING', 'error': alert?.header?.indicator === 'ERROR'}">
      <span [ngClass]="{'icon': true, 'pficon-warning-triangle-o': alert?.header?.indicator === 'ERROR' || alert?.header?.indicator === 'WARNING', 'pficon-ok': alert?.header?.indicator === 'SUCCESS'  }"></span>
    </span>
  </div>
  <div class="alert-body" *ngIf="alert?.body">
    <!-- Body goes here -->
    <alert-loader *ngIf="isLoading"></alert-loader>
    <div *ngIf="!isLoading">
      <div class="graphic" *ngIf="alert?.body?.graphic">
          <f8-chart class="chart" [data]="alert?.body?.graphic['data']" [chartOptions]="alert?.body?.graphic['options']" [configs]="alert?.body?.graphic['configs']"></f8-chart>
      </div>
      <div *ngIf="alert?.body?.normal?.length > 0">
        <div class="normal-text" *ngFor="let data of alert?.body?.normal">
          <span class="primary-text" [innerHTML]="data?.primaryText"></span>
          <span class="secondary-text" [innerHTML]="data?.secondaryText"></span>
        </div>
      </div>
      <div class="default-body-text" *ngIf="!alert?.body?.graphic && !alert?.body?.normal" [innerHTML]="alert?.body?.defaultText"></div>
    </div>
  </div>
</div>