From 7927f6d7adbef61dfacef6a30d2b1637c43dee46 Mon Sep 17 00:00:00 2001
From: Guilhermo Pazuch <1490938+gpazuch@users.noreply.github.com>
Date: Thu, 24 Feb 2022 16:34:41 -0300
Subject: [PATCH] fix(orb-ui): agent group add page matching agents table
 status (#891)

* fix status color

* fix time format for last_hb

* code style fixes
---
 .../groups/add/agent.group.add.component.html | 185 +++++++++---------
 .../groups/add/agent.group.add.component.scss |  18 ++
 .../groups/add/agent.group.add.component.ts   |   4 +-
 3 files changed, 114 insertions(+), 93 deletions(-)

diff --git a/ui/src/app/pages/fleet/groups/add/agent.group.add.component.html b/ui/src/app/pages/fleet/groups/add/agent.group.add.component.html
index ccd71c96b..ecb85d221 100644
--- a/ui/src/app/pages/fleet/groups/add/agent.group.add.component.html
+++ b/ui/src/app/pages/fleet/groups/add/agent.group.add.component.html
@@ -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>
@@ -18,19 +18,19 @@ <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/>
@@ -38,28 +38,28 @@ <h4>{{strings[isEdit ? 'edit' : 'add']['header']}}</h4>
               <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>
@@ -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>
@@ -102,15 +102,15 @@ <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>
@@ -118,24 +118,24 @@ <h4>{{strings[isEdit ? 'edit' : 'add']['header']}}</h4>
                     <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>
@@ -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>
@@ -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>
@@ -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
@@ -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>
@@ -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>
@@ -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>
diff --git a/ui/src/app/pages/fleet/groups/add/agent.group.add.component.scss b/ui/src/app/pages/fleet/groups/add/agent.group.add.component.scss
index 3438510e3..247350f68 100644
--- a/ui/src/app/pages/fleet/groups/add/agent.group.add.component.scss
+++ b/ui/src/app/pages/fleet/groups/add/agent.group.add.component.scss
@@ -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;
+  }
+}
\ No newline at end of file
diff --git a/ui/src/app/pages/fleet/groups/add/agent.group.add.component.ts b/ui/src/app/pages/fleet/groups/add/agent.group.add.component.ts
index 5581eaad9..400a17ae2 100644
--- a/ui/src/app/pages/fleet/groups/add/agent.group.add.component.ts
+++ b/ui/src/app/pages/fleet/groups/add/agent.group.add.component.ts
@@ -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',
@@ -32,6 +31,8 @@ export class AgentGroupAddComponent implements AfterViewInit {
 
   @ViewChild('agentStateTemplateCell') agentStateTemplateRef: TemplateRef<any>;
 
+  @ViewChild('agentLastHBTemplateCell') agentLastHBTemplateRef: TemplateRef<any>;
+
   tableFilters: DropdownFilterItem[] = [
     {
       id: '0',
@@ -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,