Skip to content

Commit

Permalink
[autoscaler] add autoscaler extension tab
Browse files Browse the repository at this point in the history
  • Loading branch information
@zyjiaobj
zyjiaobj committed Mar 31, 2019
1 parent bab98c3 commit f18d245
Show file tree
Hide file tree
Showing 13 changed files with 671 additions and 16 deletions.
265 changes: 265 additions & 0 deletions ...-src/frontend/app/custom/autoscaler-tab-extension/autoscaler-tab-extension.component.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,265 @@
<!-- <div *ngIf="!(appAutoscalerEnablement$ | async)">
<app-tile-grid>
<app-tile-group>
<app-tile>
<mat-card>
<mat-card-header>
<mat-card-title>Service Enablemet</mat-card-title>
</mat-card-header>
<mat-card-content>
<div class="app-metadata">
<div class="app-metadata__two-cols">
<mat-slide-toggle checked="false" disabled>Autoscaler is disabled in this endpoint.</mat-slide-toggle>
</div>
</div>
</mat-card-content>
</mat-card>
</app-tile>
</app-tile-group>
</app-tile-grid>
</div>
<div class="app-auto-scaler" *ngIf="(appAutoscalerEnablement$ | async)"> -->
<div class="app-auto-scaler">
<app-tile-grid>
<app-tile-group *ngIf="!(appAutoscalerPolicy$ | async)">
<app-tile>
<mat-card>
<mat-card-header>
<mat-card-title>Status</mat-card-title>
</mat-card-header>
<mat-card-content>
<div class="app-metadata">
<div class="app-metadata__two-cols">
<mat-slide-toggle checked="false" (click)="updatePolicyPage()">Policy
undefined</mat-slide-toggle>
</div>
</div>
</mat-card-content>
</mat-card>
</app-tile>
<app-tile>
<app-card-app-instances></app-card-app-instances>
</app-tile>
</app-tile-group>
<app-tile-group *ngIf="appAutoscalerPolicy$ | async as policy">
<app-tile>
<mat-card>
<mat-card-header>
<mat-card-title>Status</mat-card-title>
</mat-card-header>
<mat-card-content>
<div class="app-metadata">
<div class="app-metadata__two-cols">
<mat-slide-toggle *ngIf="policy.enabled && detachConfirmOk == 0" checked="true"
(click)="diableAutoscaler()">Policy defined</mat-slide-toggle>
<mat-slide-toggle *ngIf="policy.enabled && detachConfirmOk == 1" checked="true"
(click)="diableAutoscaler()">Policy defined</mat-slide-toggle>
<mat-slide-toggle *ngIf="policy.enabled && detachConfirmOk == 2" checked="false"
(click)="updatePolicyPage()">Policy undefined</mat-slide-toggle>
<mat-slide-toggle *ngIf="!(policy.enabled)" checked="false" (click)="updatePolicyPage()">Policy
undefined</mat-slide-toggle>
</div>
</div>
</mat-card-content>
</mat-card>
</app-tile>
<app-tile *ngIf="!(policy.enabled)">
<app-card-app-instances></app-card-app-instances>
</app-tile>
<app-tile *ngIf="policy.enabled" class="app-auto-scaler-tile-1of3">
<app-card-autoscaler-default [onUpdate]="updatePolicyPage"></app-card-autoscaler-default>
</app-tile>
<app-tile *ngIf="policy.enabled" class="app-auto-scaler-tile-1of2">
<mat-card>
<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 metricName of appAutoscalerAppMetricNames">
<app-metadata-item *ngIf="appAutoscalerAppMetrics[metricName] | async as metricData"
label={{metricName}}>
<!-- {{ metricData[0].entity.latest.length > 0 && metricData[0].entity.latest[0].value ? metricData[0].entity.latest[0].value + " " + metricData[0].entity.unit : "NaN"}} -->
<!-- <ngx-charts-gauge [view]="[80, 80]" [margin]="[5, 5, 0, 5]"
[customColors]="[metricData[0].entity.latest.colorTarget[0]]"
[results]="[metricData[0].entity.latest.target[0]]" [animations]="true" [textValue]=""
[scheme]="'cool'" [min]="0" [max]="metricData[0].entity.chartMaxValue"
[units]="metricData[0].entity.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="app-auto-scaler__actions">
<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" style="margin-bottom: 24px">
<app-tile-group *ngIf="policy.enabled">
<app-tile class="app-auto-scaler-policy-left">
<mat-card>
<mat-card-header>
<mat-card-title>Scaling Rules </mat-card-title>
</mat-card-header>
<mat-card-content>
<div class="app-metadata">
<table mat-table [dataSource]="policy && policy.scaling_rules">
<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}} 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>
</mat-card-content>
<mat-card-actions class="app-auto-scaler__actions">
<button (click)="updatePolicyPage()" mat-icon-button>
<mat-icon>edit</mat-icon>
</button>
</mat-card-actions>
</mat-card>
</app-tile>
<app-tile>
<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">
<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>
<br />
<div class="app-metadata">
<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 : 'Aways'}}</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>
</mat-card-content>
<mat-card-actions class="app-auto-scaler__actions">
<button (click)="updatePolicyPage()" mat-icon-button>
<mat-icon>edit</mat-icon>
</button>
</mat-card-actions>
</mat-card>
</app-tile>
</app-tile-group>
</div>
<app-tile-group>
<app-tile>
<mat-card>
<mat-card-header>
<mat-card-title>Latest Events</mat-card-title>
</mat-card-header>
<mat-card-content>
<div class="app-metadata" *ngIf="appAutoscalerScalingHistory$ | async as scalingHistory">
<table mat-table [dataSource]="scalingHistory.resources">
<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}} </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.message}} {{element.error}} </td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="scalingHistoryColumns"></tr>
<tr mat-row *matRowDef="let row; columns: scalingHistoryColumns;"></tr>
</table>
</div>
</mat-card-content>
<mat-card-actions class="app-auto-scaler__actions">
<button (click)="scaleHistoryPage()" mat-icon-button>
<mat-icon>launch</mat-icon>
</button>
</mat-card-actions>
</mat-card>
</app-tile>
</app-tile-group>
</app-tile-grid>
</div>
65 changes: 65 additions & 0 deletions ...-src/frontend/app/custom/autoscaler-tab-extension/autoscaler-tab-extension.component.scss
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,65 @@
.app-auto-scaler {
display: flex;
position: relative;
width: 100%;
&__actions {
bottom: 24px;
padding-top: 0;
position: absolute;
right: 24px;
text-align: right;
}
}

.app-metadata {
display: flex;
flex-direction: row;
&__two-cols {
flex: 1;
app-metadata-item:first-child {
margin-top: 0;
}
}
&__actions {
bottom: 24px;
padding-top: 0;
position: absolute;
right: 24px;
text-align: right;
}
app-metadata-item {
margin-bottom: 0;
}
}

app-tile-grid {
width: 100%;
}

table {
width: 100%;
}

.app-auto-scaler-policy-left {
flex: 0 0 40%;
}

.app-auto-scaler-tile {
&-1of2 {
flex: 0 0 50%;
}
&-1of3 {
flex: 0 0 30%;
}
&-1of6 {
flex: 0 0 16.78%;
}
}

.app-auto-scaler-limit {
display: inherit;
mat-card {
width: 50%;
}
}

Loading

0 comments on commit f18d245

Please sign in to comment.