Skip to content

Commit

Permalink
fix(orb-ui): agent group add page matching agents table status (#891)
Browse files Browse the repository at this point in the history 
* fix status color

* fix time format for last_hb

* code style fixes
  • Loading branch information
@gpazuch
gpazuch authored Feb 24, 2022
1 parent 714c086 commit 7927f6d
Show file tree
Hide file tree
Showing 3 changed files with 114 additions and 93 deletions.
185 changes: 93 additions & 92 deletions ui/src/app/pages/fleet/groups/add/agent.group.add.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,10 +6,10 @@ <h4>{{strings[isEdit ? 'edit' : 'add']['header']}}</h4>
</header>
<div class="d-flex row">
<div class="d-flex col-12 mt-5">
<nb-stepper orientation="vertical"
<nb-stepper *ngIf="!isLoading"
class="stepper w-100 ml-5"
*ngIf="!isLoading"
disableStepNavigation>
disableStepNavigation
orientation="vertical">
<nb-step [label]="firstStepTemplate"
[stepControl]="firstFormGroup">
<ng-template #firstStepTemplate>
Expand All @@ -18,48 +18,48 @@ <h4>{{strings[isEdit ? 'edit' : 'add']['header']}}</h4>
<p>{{strings.add.step.desc1}}</p>
</div>
</ng-template>
<form [formGroup]="firstFormGroup"
(ngSubmit)="onFormSubmit()">
<form (ngSubmit)="onFormSubmit()"
[formGroup]="firstFormGroup">
<nb-form-field>
<div class="d-flex flex-column">
<div>
<label class="font-weight-bold">{{strings.propNames.name}}</label>
<span class="required">*</span>
</div>
<input nbInput
autofocus
fullWidth="true"
<input autofocus
fieldSize="medium"
formControlName="name"/>
formControlName="name"
fullWidth="true"
nbInput/>
</div>
</nb-form-field>
<hr/>
<nb-form-field>
<div>
<label class="font-weight-bold">{{strings.propNames.description}}</label>
</div>
<input nbInput
<input fieldSize="medium"
formControlName="description"
fullWidth="true"
fieldSize="medium"
formControlName="description"/>
nbInput/>
</nb-form-field>
<hr/>
<div class="d-flex justify-content-end">
<button data-orb-qa-id="button#cancel"
nbButton
<button (click)="goBack()"
data-orb-qa-id="button#cancel"
ghost
(click)="goBack()"
type="button"
status="primary">
nbButton
status="primary"
type="button">
{{ strings.stepper.cancel }}
</button>
<button data-orb-qa-id="button#next"
<button [disabled]="!firstFormGroup.valid"
class="next-button"
data-orb-qa-id="button#next"
nbButton
nbStepperNext
shape="round"
status="primary"
type="submit"
[disabled]="!firstFormGroup.valid" nbStepperNext>
status="primary" type="submit">
{{ strings.stepper.next }}
</button>
</div>
Expand All @@ -76,12 +76,12 @@ <h4>{{strings[isEdit ? 'edit' : 'add']['header']}}</h4>
<div class="d-flex">
<mat-chip-list>
<mat-chip
class="orb-tag-sink "
*ngFor="let tag of selectedTags | keyvalue"
[style.background-color]="tag | tagcolor">
[style.background-color]="tag | tagcolor"
class="orb-tag-sink ">
{{tag | tagchip}}
<nb-icon class="ml-1"
(click)="onRemoveTag(tag.key)"
<nb-icon (click)="onRemoveTag(tag.key)"
class="ml-1"
icon="close-outline"
size="12"></nb-icon>
</mat-chip>
Expand All @@ -102,40 +102,40 @@ <h4>{{strings[isEdit ? 'edit' : 'add']['header']}}</h4>
<span class="required">*</span>
</div>
<div>
<input nbInput
autofocus
fullWidth="true"
<input autofocus
fieldSize="medium"
formControlName="key"/>
formControlName="key"
fullWidth="true"
nbInput/>
</div>
</div>
<div class="d-flex justify-content-center align-items-center col-1 mt-4 px-0 mx-0">
<nb-icon style="color: #df316f;" icon="plus-outline" size="14"></nb-icon>
<nb-icon icon="plus-outline" size="14" style="color: #df316f;"></nb-icon>
</div>
<div class="d-flex flex-column col-5 px-0 mx-0">
<div>
<label class="font-weight-bold">{{strings.propNames.value}}</label>
<span class="required">*</span>
</div>
<div>
<input nbInput
autofocus
fullWidth="true"
<input autofocus
fieldSize="medium"
formControlName="value"/>
formControlName="value"
fullWidth="true"
nbInput/>
</div>
</div>
<div class="d-flex col-1 align-items-center justify-content-center mx-0 pl-4 px-0"
style="transform: translateY(14px);">
<button nbButton
ghost
(click)="onAddTag()"
<button (click)="onAddTag()"
[disabled]="(secondFormGroup.controls['key'].value === '' ||
secondFormGroup.controls['value'].value === '')">
<nb-icon style="color: #df316f;"
secondFormGroup.controls['value'].value === '')"
ghost
nbButton>
<nb-icon icon="plus-outline"
size="14"
status="primary"
icon="plus-outline"
size="14">
style="color: #df316f;">
</nb-icon>
</button>
</div>
Expand All @@ -155,31 +155,31 @@ <h4>{{strings[isEdit ? 'edit' : 'add']['header']}}</h4>
</div>
</div>
<hr/>
<div class="d-flex justify-content-end"
*ngIf="secondFormGroup">
<button data-orb-qa-id="button#cancel"
nbButton
<div *ngIf="secondFormGroup"
class="d-flex justify-content-end">
<button (click)="goBack()"
data-orb-qa-id="button#cancel"
ghost
(click)="goBack()"
type="button"
status="primary">
nbButton
status="primary"
type="button">
{{ strings.stepper.cancel }}
</button>
<button data-orb-qa-id="button#back"
nbButton
ghost
status="primary"
nbStepperPrevious>
nbButton
nbStepperPrevious
status="primary">
{{ strings.stepper.back }}
</button>
<button data-orb-qa-id="button#next"
<button [disabled]="(selectedTags | json) === '{}'"
class="next-button"
data-orb-qa-id="button#next"
nbButton
nbStepperNext
shape="round"
status="primary"
type="submit"
[disabled]="(selectedTags | json) === '{}'"
nbStepperNext>
type="submit">
{{ strings.stepper.next }}
</button>
</div>
Expand All @@ -191,7 +191,7 @@ <h4>{{strings[isEdit ? 'edit' : 'add']['header']}}</h4>
<strong>{{strings.add.step.title3}}</strong>
</div>
</ng-template>
<div class="d-flex row" *ngIf="!expanded">
<div *ngIf="!expanded" class="d-flex row">
<div class="col-md-12 col-xl-6">
<div>
<label class="font-weight-bold">{{strings.propNames.name}}</label>
Expand All @@ -211,9 +211,9 @@ <h4>{{strings[isEdit ? 'edit' : 'add']['header']}}</h4>
<div class="col-12">
<mat-chip-list>
<mat-chip
class="orb-tag-sink "
*ngFor="let tag of selectedTags | keyvalue"
[style.background-color]="tag | tagcolor">
[style.background-color]="tag | tagcolor"
class="orb-tag-sink ">
{{tag | tagchip}}
</mat-chip>
<mat-chip
Expand All @@ -231,9 +231,9 @@ <h4>{{strings[isEdit ? 'edit' : 'add']['header']}}</h4>
<div>
<p *ngIf="tagMatch?.total && tagMatch.total > 0">
{{strings.match.matchAny}}&nbsp;{{tagMatch.total}}&nbsp;{{strings.match.agents}}
.&nbsp;<button nbButton
.&nbsp;<button (click)="toggleExpandMatches()"
class="appearance-ghost size-small status-basic button-expand"
(click)="toggleExpandMatches()">{{expanded
nbButton>{{expanded
? strings.match.collapse
: strings.match.expand}}</button>
</p>
Expand All @@ -244,45 +244,45 @@ <h4>{{strings[isEdit ? 'edit' : 'add']['header']}}</h4>
</div>
</div>
<hr/>
<div class="d-flex row" *ngIf="expanded">
<div *ngIf="expanded" class="d-flex row">
<div class="tag-table">
<ngx-datatable
class="orb w-100"
style="height: 500px;"
[rows]="matchingAgents"
[scrollbarV]="true"
[columns]="columns"
[columnMode]="columnMode.flex"
[headerHeight]="50"
[columns]="columns"
[footerHeight]="50"
[rowHeight]="50">
[headerHeight]="50"
[rowHeight]="50"
[rows]="matchingAgents"
[scrollbarV]="true"
class="orb w-100"
style="height: 500px;">
</ngx-datatable>
</div>
</div>
<hr/>
<div class="d-flex justify-content-end"
*ngIf="secondFormGroup">
<button data-orb-qa-id="button#cancel"
nbButton
<div *ngIf="secondFormGroup"
class="d-flex justify-content-end">
<button (click)="goBack()"
data-orb-qa-id="button#cancel"
ghost
(click)="goBack()"
type="button"
status="primary">
nbButton
status="primary"
type="button">
{{ strings.stepper.cancel }}
</button>
<button data-orb-qa-id="button#back"
nbButton
ghost
status="primary"
nbStepperPrevious>
nbButton
nbStepperPrevious
status="primary">
{{ strings.stepper.back }}
</button>
<button data-orb-qa-id="button#save"
<button (click)="onFormSubmit()"
class="next-button"
data-orb-qa-id="button#save"
nbButton
shape="round"
status="primary"
(click)="onFormSubmit()"
type="submit">
{{ strings.stepper.save }}
</button>
Expand All @@ -293,30 +293,31 @@ <h4>{{strings[isEdit ? 'edit' : 'add']['header']}}</h4>
</div>
</div>

<ng-template #agentStateTemplateCell let-row="row" let-value="value" let-i="index">
<ng-template #agentStateTemplateCell let-i="index" let-row="row" let-value="value">
<div>
<div *ngIf="row.state === 'active'">
<i class="fa fa-circle orb-service-active"
aria-hidden="true"></i>
{{ row.state | titlecase }}
</div>
<div *ngIf="row.state !== 'active'">
<i class="fa fa-circle orb-service-inactive"
aria-hidden="true"></i>
<div>
<i aria-hidden="true"
class="fa fa-circle orb-service-{{ row.state }}"></i>
{{ row.state | titlecase }}
</div>
</div>
</ng-template>

<ng-template #agentTagsTemplateCell let-row="row" let-value="value" let-i="index">
<ng-template #agentTagsTemplateCell let-i="index" let-row="row" let-value="value">
<div class="d-flex">
<mat-chip-list>
<mat-chip
class="orb-tag-sink "
*ngFor="let tag of value | keyvalue"
[style.background-color]="tag | tagcolor">
[style.background-color]="tag | tagcolor"
class="orb-tag-sink ">
{{tag | tagchip}}
</mat-chip>
</mat-chip-list>
</div>
</ng-template>

<ng-template #agentLastHBTemplateCell let-i="index" let-row="row" let-value="value">
<div>
{{ row.ts_last_hb | date: 'medium' }}
</div>
</ng-template>
18 changes: 18 additions & 0 deletions ui/src/app/pages/fleet/groups/add/agent.group.add.component.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -188,3 +188,21 @@ tr div p {
left: 0;
width: 900px;
}

.orb-service- {
&new {
color: #9b51e0;
}
&online {
color: #6fcf97;
}
&stale {
color: #f2994a;
}
&error {
color: #df316f;
}
&offline {
color: #969fb9;
}
}
4 changes: 3 additions & 1 deletion ui/src/app/pages/fleet/groups/add/agent.group.add.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,6 @@ import { AgentsService } from 'app/common/services/agents/agents.service';
import { ColumnMode, TableColumn } from '@swimlane/ngx-datatable';
import { NotificationsService } from 'app/common/services/notifications/notifications.service';


@Component({
selector: 'ngx-agent-group-add-component',
templateUrl: './agent.group.add.component.html',
Expand All @@ -32,6 +31,8 @@ export class AgentGroupAddComponent implements AfterViewInit {

@ViewChild('agentStateTemplateCell') agentStateTemplateRef: TemplateRef<any>;

@ViewChild('agentLastHBTemplateCell') agentLastHBTemplateRef: TemplateRef<any>;

tableFilters: DropdownFilterItem[] = [
{
id: '0',
Expand Down Expand Up @@ -138,6 +139,7 @@ export class AgentGroupAddComponent implements AfterViewInit {
{
name: 'Last Activity',
prop: 'ts_last_hb',
cellTemplate: this.agentLastHBTemplateRef,
minWidth: 130,
resizeable: false,
sortable: false,
Expand Down

0 comments on commit 7927f6d

Please sign in to comment.