fabric8-stack-analysis/stack/recommender/recommender.html

Fabric8 Stack Analysis Feature

<div class="recommendation-header">
    <h1 class="keep-left">Recommendations</h1>
    <div class="keep-right recommender-action-group  top-level-selection recommendation-group-item">
        <button (click)="handleMultipleWorkItemCreation($event)" [ngClass]="{'btn-default disable-create-work-item': !canCreateAllWorkItems(), 'btn-primary': canCreateAllWorkItems()}" class="btn keep-left create-work-item" type="button">Create Work Item</button>
        <button #allRecommendation class="btn btn-link dropdown-toggle keep-right" type="button" (click)="handleRecommendationAction(allRecommendation)" data-toggle="dropdown" aria-haspopup="true"
                aria-expanded="true">
        <span class="fa fa-ellipsis-v"></span>
        </button>
        <ul class="dropdown-menu drop-down-all dropdown-menu-right" aria-labelledby="dropdownKebabRight2">
            <li (click)="handleAllActionDropDownClick(item, $event)" *ngFor="let item of recommendationHeaderActions">
                <a href="#">{{item.itemName}}</a>
            </li>
        </ul>
    </div>
</div>
<div class="list-group recommendation-container">
    <!-- No recommendations scenario -->
    <div class="list-group-item list-view-pf-stacked" *ngIf="recommendationsList.length === 0">
        <div class="list-view-pf-main-info">
            <div class="list-view-pf-body">
                <div class="list-view-pf-description">
                    <div class="list-group-item-heading">
                        No recommendations.
                    </div>
                    <div class="list-group-item-text">
                        Some information goes here if you want to change your current stack.
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- No recommendations scenario -->
    
    <!-- Header to handle multiple items -->
    <div class="select-all-container" *ngIf="recommendationsList.length > 0">
        <div class="list-view-pf-checkbox">
            <input [checked]="isSelectAll" (change)="handleAllItemSelection()" type="checkbox" />
        </div>
    </div>
    <!-- Header to handle multiple items -->

    <div #listGroupItem class="list-group-item list-view-pf-stacked recommendation-group-item recommendation-list" *ngFor="let recommendation of recommendationsList">
        <div class="list-view-pf-checkbox">
            <input [checked]="recommendation.isChecked" (change)="handleWorkItemSelection($event, recommendation)" type="checkbox" />
        </div>
        <div class="list-view-pf-actions">
            <div class="dropdown pull-right dropdown-kebab-pf">
                <button #recommendationAction class="btn btn-link dropdown-toggle" type="button" (click)="handleRecommendationAction(recommendationAction)" data-toggle="dropdown" aria-haspopup="true"
                aria-expanded="true">
                <span class="fa fa-ellipsis-v"></span>
                </button>
                <ul class="dropdown-menu drop-down-each dropdown-menu-right" aria-labelledby="dropdownKebabRight2">
                    <li [className]="getCurrentClass(item, recommendation)" (click)="handleDropDownClick(item, recommendation, $event)" *ngFor="let item of recommendation.pop">
                        <a href="#">{{item.itemName}}</a>
                    </li>
                </ul>
            </div>
        </div>
        <div class="list-view-pf-main-info">
            <div class="list-view-pf-left">
                <span class="pficon pficon-info" [ngClass]="{'dismissed': recommendation.isDismissed === true}"></span>
            </div>
            <div class="list-view-pf-body">
                <div class="list-view-pf-description" [ngClass]="{'dismissed': recommendation.isDismissed === true}">
                    <!-- <div class="list-group-item-heading">
                        {{recommendation.suggestion}}
                    </div> -->
                    <div class="list-group-item-text">
                        {{recommendation.suggestion}} - {{recommendation.action}} {{recommendation.message}}
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>