fabric8-analytics-dep-editor/src/app/insights/insights.component.html

Dependency editor

<div class="cards-pf insightComponent start">
  <div class="row">
    <div class="col-sm-12 fit">
      <p class="insights">
        <span class="pficon-zone"></span>
        <span class="title">Insights</span>
        <span class="count" *ngIf="companions">
          <span class="count-number">{{companions?.length + alternate?.length}}</span>
        </span>
        <span class="add">
          <button class="added" (click)="addCompanion()" [ngStyle]="{'border': noOfTags > 0 ? '1px solid #00659c' : '1px solid #d1d1d1' , 'background-image': noOfTags > 0 ? 'linear-gradient(-180deg, #39a5dc 0%, #0088ce 100%)' : 'none','color': noOfTags > 0 ? '#fff' : '#8b8d8f'}">
            Add ({{noOfTags}})</button>
        </span>
      </p>
    </div>
    <div class="card-pf-aggregate-status-notifications" *ngIf="!boosterInfo">
        <span class="card-pf-aggregate-status-notification">
          <span class="pficon pficon-info"></span>
          <span class="insight-info">No Insights Found</span>
        </span>
    </div>
    <div *ngIf="boosterInfo">
      <div class="col-sm-12 fit">
        <div class="card-pf-body" *ngIf="companions?.length">
          <app-list-element (companionAdded)="companionWasAdded($event)" *ngFor="let companion of companions" [dependency]="companion"
            (companionRemoved)="removeCompanion($event)" (tagAdded)="addTag($event)" (companionReleased)="releaseCompanion($event)"></app-list-element>
        </div>
        <div class="card-pf-body" *ngIf="alternate?.length">
          <app-list-element (companionAdded)="companionWasAdded($event)" *ngFor="let companion of alternate" [dependency]="companion"
            (companionRemoved)="removeCompanion($event)" (tagAdded)="addTag($event)" (companionReleased)="releaseCompanion($event)"></app-list-element>
        </div>
        <div class="card-pf-body">
          <div class="pre-loader" *ngIf="!companions||!alternate">
            <div class="pre-loader-spinner spinner spinner-lg"></div>
          </div>
          <p class="card-pf-aggregate-status-notifications" *ngIf="companions?.length === 0 && alternate?.length === 0">
            <span class="card-pf-aggregate-status-notification">
              <span class="pficon pficon-info"></span>
              <span class="insight-info">No Insights Found</span>
            </span>
          </p>
        </div>
      </div>
    </div>
  </div>
</div>