fabric8-analytics-dependency-editor-jyas/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="badge" *ngIf="usableCompanions || alternate">{{(usableCompanions?.length || 0) + (alternate?.length || 0) }}</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'}"
                  tooltip="Adds the selected dependencies from insights section">
                  Add ({{noOfTags}})</button>
        </span>
      </p>
      <span class="insightInfo">Use insights to identify potential issues with the selected dependencies and make changes.</span>
    </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>The Analytics engine has not identified any insights for your stack.</span>
        </span>
    </div>
    <div *ngIf="boosterInfo">
      <div class="col-sm-12 fit">
        <div class="card-pf-body" *ngIf="usableCompanions?.length">
          <app-list-element (companionAdded)="companionWasAdded($event)" *ngFor="let companion of usableCompanions" [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="(!usableCompanions || !alternate) && !error">
            <div class="pre-loader-spinner spinner spinner-lg"></div>
            <span class="loader-text">Retrieving insights based on the dependencies ...</span>
          </div>
          <p class="card-pf-aggregate-status-notifications" *ngIf="usableCompanions?.length === 0 && alternate?.length === 0 && !error">
            <span class="card-pf-aggregate-status-notification">
              <span class="pficon pficon-info"></span>
              <h1 class="insight-info">No Insights Found</h1>
              <span>The Analytics engine has not identified any insights for your stack.</span>
            </span>
          </p>
          <p class="card-pf-aggregate-status-notifications" *ngIf="error">
            <span class="card-pf-aggregate-status-notification">
              <span>{{error?.message}}</span>
            </span>
          </p>
        </div>
      </div>
    </div>
  </div>
</div>