TRIX-22 fixed illegible memory/disk filters
This commit is contained in:
parent
386b3593eb
commit
0a6a8b1eeb
@ -142,7 +142,8 @@
|
||||
|
||||
<!-- Volumes and disks -->
|
||||
<div class="mt-3 d-flex flex-column">
|
||||
<button class="btn btn-outline-info text-start mb-2" (click)="showVolumes = !showVolumes">
|
||||
<button class="btn text-start mb-2" [class.btn-outline-info]="!showVolumes" [class.btn-info]="showVolumes"
|
||||
(click)="showVolumes = !showVolumes">
|
||||
Volumes
|
||||
<fa-icon icon="angle-right" [fixedWidth]="true" [rotate]="showVolumes ? 90 : 0" class="float-end"></fa-icon>
|
||||
</button>
|
||||
@ -192,60 +193,37 @@
|
||||
|
||||
<!-- Affinity settings -->
|
||||
<div class="mt-3 d-flex flex-column" *ngIf="instances && instances.length">
|
||||
<button class="btn btn-outline-info text-start w-100 mb-2" (click)="showAffinity = !showAffinity">
|
||||
Affinity
|
||||
<button class="btn text-start w-100 mb-2" [class.btn-outline-info]="!showAffinity" [class.btn-info]="showAffinity"
|
||||
(click)="showAffinity = !showAffinity">
|
||||
Affinity rules
|
||||
<fa-icon icon="angle-right" [fixedWidth]="true" [rotate]="showAffinity ? 90 : 0" class="float-end"></fa-icon>
|
||||
</button>
|
||||
|
||||
<div [collapse]="!showAffinity">
|
||||
<div class="row">
|
||||
<div class="col-sm-6" formGroupName="affinity">
|
||||
<h5>Place close to</h5>
|
||||
|
||||
<div class="select-list" tabindex="0">
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="radio" id="closeTo" [value]="null" formControlName="closeTo">
|
||||
<label class="form-check-label" for="closeTo">
|
||||
(no preference)
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="form-check" *ngFor="let instance of instances">
|
||||
<input class="form-check-input" type="radio" id="closeTo-{{ instance.id }}" [value]="instance.id" formControlName="closeTo">
|
||||
<label class="form-check-label" for="closeTo-{{ instance.id }}">
|
||||
{{ instance.name }}
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-4">
|
||||
<select class="form-select" name="operator">
|
||||
<option></option>
|
||||
<option value="==">Must be close to instances</option>
|
||||
<option value="==~">Should be close to instances</option>
|
||||
<option value="!=">Must be far from instances</option>
|
||||
<option value="!=~">Should be far from instances</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="col-sm-6" formGroupName="affinity">
|
||||
<h5>Place far from</h5>
|
||||
|
||||
<div class="select-list" tabindex="0">
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="radio" id="farFrom" [value]="null" formControlName="farFrom">
|
||||
<label class="form-check-label" for="farFrom">
|
||||
(no preference)
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="form-check" *ngFor="let instance of instances">
|
||||
<input class="form-check-input" type="radio" id="farFrom-{{ instance.id }}" [value]="instance.id" formControlName="farFrom">
|
||||
<label class="form-check-label" for="farFrom-{{ instance.id }}">
|
||||
{{ instance.name }}
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-3">
|
||||
<select class="form-select" name="target">
|
||||
<option></option>
|
||||
<option value="instance">Named like</option>
|
||||
<option value="tagName">Tagged with</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="col-sm" formGroupName="affinity">
|
||||
<div class="form-check ms-0">
|
||||
<input class="form-check-input" type="checkbox" id="strict" formControlName="strict">
|
||||
<label class="form-check-label" for="strict">
|
||||
Provision only when the affinity criteria are met
|
||||
</label>
|
||||
</div>
|
||||
<div class="col-sm-4">
|
||||
<input type="text" class="form-control" placeholder="Value">
|
||||
</div>
|
||||
<div class="col-sm-1">
|
||||
<button class="btn btn-outline-info">
|
||||
<fa-icon icon="plus"></fa-icon>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
@ -372,6 +372,8 @@ export class InstanceWizardComponent implements OnInit, OnDestroy
|
||||
mountpoint: volume.mountpoint
|
||||
}));
|
||||
|
||||
console.log(this.editorForm.get('affinity'));
|
||||
|
||||
this.instancesService.add(instance)
|
||||
.subscribe(x =>
|
||||
{
|
||||
|
@ -276,7 +276,7 @@
|
||||
<fieldset class="filters">
|
||||
<ng-container formGroupName="filters">
|
||||
<div class="dropdown-header">{{ 'dashboard.list.filterByState' | translate }}</div>
|
||||
<div class="btn-group w-100 mb-3" dropdown>
|
||||
<div class="btn-group w-100" dropdown>
|
||||
<button class="btn btn-state-filter dropdown-toggle d-flex justify-content-between align-items-center"
|
||||
dropdownToggle>
|
||||
<span *ngIf="!editorForm.get(['filters', 'stateFilter']).value">
|
||||
@ -313,13 +313,18 @@
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="dropdown-header">{{ 'dashboard.list.filterByMemory' | translate }}</div>
|
||||
<ngx-slider class="mb-4" formControlName="memoryFilter" [options]="memoryFilterOptions"></ngx-slider>
|
||||
<ng-container *ngIf="memoryFilterOptions.stepsArray.length > 1">
|
||||
<div class="dropdown-header">{{ 'dashboard.list.filterByMemory' | translate }}</div>
|
||||
<ngx-slider class="mb-4" formControlName="memoryFilter" [options]="memoryFilterOptions"></ngx-slider>
|
||||
</ng-container>
|
||||
|
||||
<div class="dropdown-header">{{ 'dashboard.list.filterByDisk' | translate }}</div>
|
||||
<ngx-slider class="mb-3" formControlName="diskFilter" [options]="diskFilterOptions"></ngx-slider>
|
||||
<ng-container *ngIf="diskFilterOptions.stepsArray.length > 1">
|
||||
<div class="dropdown-header">{{ 'dashboard.list.filterByDisk' | translate }}</div>
|
||||
<ngx-slider class="mb-3" formControlName="diskFilter" [options]="diskFilterOptions"></ngx-slider>
|
||||
</ng-container>
|
||||
|
||||
<button class="btn btn-outline-dark w-100 mt-3" (click)="clearFilters()">
|
||||
<button *ngIf="memoryFilterOptions.stepsArray.length > 1 && diskFilterOptions.stepsArray.length > 1"
|
||||
class="btn btn-outline-dark w-100 mt-3" (click)="clearFilters()">
|
||||
{{ 'dashboard.list.resetFilters' | translate }}
|
||||
</button>
|
||||
</ng-container>
|
||||
|
@ -109,6 +109,11 @@
|
||||
.filters
|
||||
{
|
||||
width: 240px;
|
||||
|
||||
.btn-group + *
|
||||
{
|
||||
margin-top: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.form-check-label
|
||||
|
Reference in New Issue
Block a user