src/frontend/packages/cf-autoscaler/src/features/autoscaler-tab-extension/autoscaler-tab-extension.component.html
<app-page-sub-nav>
<ng-container *ngIf="appAutoscalerPolicy$ | async as policy; else noPolicy">
<button mat-button name="edit" (click)="updatePolicyPage()" class="nav-button-with-text">
<span class="nav-button-with-text__span">
<mat-icon class="nav-button-with-text__icon">edit</mat-icon> Edit Policy
</span>
</button>
<button mat-button name="delete" (click)="disableAutoscaler()" class="nav-button-with-text">
<span class="nav-button-with-text__span">
<mat-icon class="nav-button-with-text__icon">delete</mat-icon> Delete Policy
</span>
</button>
<button *ngIf="canManageCredentials$ | async" mat-button name="credential" (click)="manageCredentialPage()"
class="nav-button-with-text">
<span class="nav-button-with-text__span">
<mat-icon class="nav-button-with-text__icon">vpn_key</mat-icon> Manage Credentials
</span>
</button>
</ng-container>
<ng-template #noPolicy>
<button mat-button name="add" (click)="updatePolicyPage(true)" class="nav-button-with-text">
<span class="nav-button-with-text__span">
<mat-icon class="nav-button-with-text__icon">add</mat-icon> Create Policy
</span>
</button>
</ng-template>
</app-page-sub-nav>
<div class="autoscaler-tab">
<app-tile-grid class="app-autoscaler-tile-grid-100">
<app-tile-group *ngIf="appAutoscalerPolicy$ | async as policy">
<app-tile *ngIf="policy.enabled">
<app-card-autoscaler-default></app-card-autoscaler-default>
</app-tile>
<app-tile *ngIf="policy.enabled" class="autoscaler-tab__latest-metrics">
<app-card-app-usage *ngIf="policy.scaling_rules.length == 0"></app-card-app-usage>
<mat-card *ngIf="policy.scaling_rules.length > 0">
<mat-card-header>
<mat-card-title>Latest Metrics</mat-card-title>
</mat-card-header>
<mat-card-content>
<div class="app-metadata">
<div class="app-metadata__two-cols" *ngFor="let metric of appAutoscalerAppMetricNames$ | async">
<app-metadata-item label={{metric.name}}>
<ngx-charts-gauge *ngIf="appAutoscalerAppMetrics[metric.name] | async as metricData" [view]="[80, 80]"
[margin]="[5, 5, 0, 5]" [customColors]="[metricData[0].entity.latest.colorTarget[0]]"
[results]="[metricData[0].entity.latest.target[0]]" [animations]="true" [scheme]="'cool'" [min]="0"
[max]="metricData[0].entity.chartMaxValue"
[units]="metricData[0].entity.unit || metric.unit || '__'" [angleSpan]="240" [startAngle]="-120"
[showAxis]="false" [bigSegments]="10" [smallSegments]="5" [tooltipDisabled]="false"
(select)="select($event)">
</ngx-charts-gauge>
</app-metadata-item>
</div>
</div>
</mat-card-content>
<mat-card-actions class="autoscaler-tab__actions">
<app-polling-indicator [manualPoll]="true" (poll)="loadLatestMetricsUponPolicy()">
</app-polling-indicator>
<button (click)="metricChartPage()" mat-icon-button>
<mat-icon>launch</mat-icon>
</button>
</mat-card-actions>
</mat-card>
</app-tile>
</app-tile-group>
<div *ngIf="appAutoscalerPolicy$ | async as policy" class="autoscaler-tab-policy">
<app-tile-group *ngIf="policy.enabled">
<app-tile class="autoscaler-tab-policy-trigger">
<mat-card>
<mat-card-header>
<mat-card-title>Scaling Rules </mat-card-title>
</mat-card-header>
<mat-card-content>
<div class="app-metadata app-metadata-table">
<table mat-table [dataSource]="policy && policy.scaling_rules_form">
<ng-container matColumnDef="metric">
<th mat-header-cell *matHeaderCellDef> Metric </th>
<td mat-cell *matCellDef="let element"> {{element.metric_type}} </td>
</ng-container>
<ng-container matColumnDef="condition">
<th mat-header-cell *matHeaderCellDef> Condition </th>
<td mat-cell *matCellDef="let element">
{{element.operator}}{{element.threshold}}{{getMetricUnit(element.metric_type, element.unit)}} for
{{element.breach_duration_secs}} secs. </td>
</ng-container>
<ng-container matColumnDef="action">
<th mat-header-cell *matHeaderCellDef> Action </th>
<td mat-cell *matCellDef="let element"> {{element.adjustment}} instances </td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="scalingRuleColumns"></tr>
<tr mat-row *matRowDef="let row; columns: scalingRuleColumns;"></tr>
</table>
<div class="autoscaler-tab-table-no-record"
*ngIf="policy && policy.scaling_rules_form && policy.scaling_rules_form.length == 0">No scaling rules.
</div>
</div>
</mat-card-content>
</mat-card>
</app-tile>
<app-tile class="autoscaler-tab-policy-schedule">
<mat-card>
<mat-card-header>
<mat-card-title>
Scheduled Limit Rules
<span *ngIf="policy.schedules">
in {{policy.schedules.timezone}}
</span>
</mat-card-title>
</mat-card-header>
<mat-card-content>
<div class="app-metadata app-metadata-table autoscaler-table-policy-specific">
<table mat-table [dataSource]="policy && policy.schedules && policy.schedules.specific_date">
<ng-container matColumnDef="from">
<th mat-header-cell *matHeaderCellDef> From </th>
<td mat-cell *matCellDef="let element"> {{element.start_date_time}} </td>
</ng-container>
<ng-container matColumnDef="to">
<th mat-header-cell *matHeaderCellDef> To </th>
<td mat-cell *matCellDef="let element"> {{element.end_date_time}} </td>
</ng-container>
<ng-container matColumnDef="init">
<th mat-header-cell *matHeaderCellDef> Initial </th>
<td mat-cell *matCellDef="let element">
{{element.initial_min_instance_count?element.initial_min_instance_count:'-'}} </td>
</ng-container>
<ng-container matColumnDef="min">
<th mat-header-cell *matHeaderCellDef> Min </th>
<td mat-cell *matCellDef="let element"> {{element.instance_min_count}} </td>
</ng-container>
<ng-container matColumnDef="max">
<th mat-header-cell *matHeaderCellDef> Max </th>
<td mat-cell *matCellDef="let element"> {{element.instance_max_count}} </td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="specificDateColumns"></tr>
<tr mat-row *matRowDef="let row; columns: specificDateColumns;"></tr>
</table>
<div class="autoscaler-tab-table-no-record"
*ngIf="policy && policy.schedules && policy.schedules.specific_date && policy.schedules.specific_date.length == 0">
No specific date schedule.</div>
</div>
<br />
<div class="app-metadata app-metadata-table autoscaler-table-policy-recurring">
<table mat-table [dataSource]="policy && policy.schedules && policy.schedules.recurring_schedule">
<ng-container matColumnDef="effect">
<th mat-header-cell *matHeaderCellDef> Effective Duration </th>
<td mat-cell *matCellDef="let element"> {{ element.start_date? element.start_date + ' ~ ' +
element.end_date : 'Always'}}</td>
</ng-container>
<ng-container matColumnDef="repeat">
<th mat-header-cell *matHeaderCellDef> Repeats On </th>
<td mat-cell *matCellDef="let element"> {{element.days_of_month}} {{element.days_of_week}} of
the
{{element.days_of_week? 'week': 'month'}} </td>
</ng-container>
<ng-container matColumnDef="from">
<th mat-header-cell *matHeaderCellDef> From </th>
<td mat-cell *matCellDef="let element"> {{element.start_time}} </td>
</ng-container>
<ng-container matColumnDef="to">
<th mat-header-cell *matHeaderCellDef> To </th>
<td mat-cell *matCellDef="let element"> {{element.end_time}} </td>
</ng-container>
<ng-container matColumnDef="init">
<th mat-header-cell *matHeaderCellDef> Initial </th>
<td mat-cell *matCellDef="let element">
{{element.initial_min_instance_count?element.initial_min_instance_count:'-'}} </td>
</ng-container>
<ng-container matColumnDef="min">
<th mat-header-cell *matHeaderCellDef> Min </th>
<td mat-cell *matCellDef="let element"> {{element.instance_min_count}} </td>
</ng-container>
<ng-container matColumnDef="max">
<th mat-header-cell *matHeaderCellDef> Max </th>
<td mat-cell *matCellDef="let element"> {{element.instance_max_count}} </td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="recurringScheduleColumns"></tr>
<tr mat-row *matRowDef="let row; columns: recurringScheduleColumns;"></tr>
</table>
<div class="autoscaler-tab-table-no-record"
*ngIf="policy && policy.schedules && policy.schedules.specific_date && policy.schedules.recurring_schedule.length == 0">
No recurring schedule.</div>
</div>
</mat-card-content>
</mat-card>
</app-tile>
</app-tile-group>
</div>
<app-tile-group class="autoscaler-tile-events" *ngIf="showAutoscalerHistory$ | async">
<span *ngIf="!(appAutoscalerPolicy$ | async)" class="autoscaler-tile-events__no-policy">
{{noPolicyMessageFirstLine}}. {{noPolicyMessageSecondLine.text}}
</span>
<app-tile *ngIf="appAutoscalerScalingHistory$ | async as scalingHistory">
<mat-card>
<mat-card-header class="autoscaler-tile-events__header">
<mat-card-title>Latest Events </mat-card-title>
</mat-card-header>
<mat-card-content>
<div class="app-metadata app-metadata-table">
<table mat-table [dataSource]="scalingHistory">
<ng-container matColumnDef="event">
<th mat-header-cell *matHeaderCellDef> Event </th>
<td mat-cell *matCellDef="let element"> Instances scaled
{{element.old_instances > element.new_instances? 'down' : 'up'}} from {{element.old_instances}} to
{{element.new_instances}} </td>
</ng-container>
<ng-container matColumnDef="trigger">
<th mat-header-cell *matHeaderCellDef> Trigger </th>
<td mat-cell *matCellDef="let element"> {{element.reason}} {{element.message}}</td>
</ng-container>
<ng-container matColumnDef="date">
<th mat-header-cell *matHeaderCellDef> Date </th>
<td mat-cell *matCellDef="let element"> {{element.timestamp / 1000000 | date:'medium'}} </td>
</ng-container>
<ng-container matColumnDef="error">
<th mat-header-cell *matHeaderCellDef> Error </th>
<td mat-cell *matCellDef="let element"> {{element.error}} </td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="scalingHistoryColumns"></tr>
<tr mat-row *matRowDef="let row; columns: scalingHistoryColumns;"></tr>
</table>
<div class="autoscaler-tab-table-no-record" *ngIf="scalingHistory.length == 0">
No events.</div>
</div>
</mat-card-content>
<mat-card-actions class="autoscaler-tab__actions">
<app-polling-indicator (poll)="fetchScalingHistory()"
[manualPoll]="!(appAutoscalerScalingHistoryService.isFetchingEntity$ | async)"
[isPolling]="(appAutoscalerScalingHistoryService.isFetchingEntity$ | async)">
</app-polling-indicator>
<button (click)="scaleHistoryPage()" mat-icon-button>
<mat-icon>launch</mat-icon>
</button>
</mat-card-actions>
</mat-card>
</app-tile>
</app-tile-group>
<app-no-content-message *ngIf="showNoPolicyMessage$ | async" [icon]="'meter'" [iconFont]="'stratos-icons'"
[firstLine]="noPolicyMessageFirstLine" [secondLine]="noPolicyMessageSecondLine">
</app-no-content-message>
</app-tile-grid>
</div>