improvement(orb-ui): #1191 Delete Selected Modal

ui/src/app/@theme/styles/_overrides.scss

@@ -280,9 +280,7 @@
 p {
   font-family: 'Montserrat' !important;
 }
-button {
-  font-family: 'Montserrat' !important;
-}
+
 label {
   font-family: 'Montserrat' !important;
 }

ui/src/app/pages/datasets/delete/dataset.delete.component.scss

@@ -1,5 +1,6 @@
 nb-card {
   max-width: 38rem !important;
+  padding: 0 !important;
 
   nb-card-header {
     background: #232940 !important;
@@ -12,6 +13,10 @@ nb-card {
 
     p {
       color: #969fb9 !important;
+      margin-bottom: 1rem !important;
+      font-weight: 500 !important;
+      font-size: 14px !important;
+      line-height: 24px !important;
     }
 
     .ns1-red {

ui/src/app/pages/datasets/policies.agent/delete/agent.policy.delete.component.scss

@@ -1,5 +1,6 @@
 nb-card {
   max-width: 38rem !important;
+  padding: 0 !important;
 
   nb-card-header {
     background: #232940 !important;
@@ -12,6 +13,10 @@ nb-card {
 
     p {
       color: #969fb9 !important;
+      margin-bottom: 1rem !important;
+      font-weight: 500 !important;
+      font-size: 14px !important;
+      line-height: 24px !important;
     }
 
     .ns1-red {

ui/src/app/pages/datasets/policies.agent/duplicate/agent.policy.duplicate.confirmation.scss

@@ -1,5 +1,6 @@
 nb-card {
     max-width: 38rem !important;
+    padding: 0 !important;
 
     nb-card-header {
       background: #232940 !important;
@@ -12,6 +13,10 @@ nb-card {
 
       p {
         color: #969fb9 !important;
+        margin-bottom: 1rem !important;
+        font-weight: 500 !important;
+        font-size: 14px !important;
+        line-height: 24px !important;
       }
 
       .ns1-red {

ui/src/app/pages/fleet/agents/delete/agent.delete.component.scss

@@ -1,5 +1,6 @@
 nb-card {
   max-width: 38rem !important;
+  padding: 0 !important;
 
   nb-card-header {
     background: #232940 !important;
@@ -12,6 +13,10 @@ nb-card {
 
     p {
       color: #969fb9 !important;
+      margin-bottom: 1rem !important;
+      font-weight: 500 !important;
+      font-size: 14px !important;
+      line-height: 24px !important;
     }
 
     .ns1-red {

ui/src/app/pages/fleet/agents/list/agent.list.component.ts

@@ -373,10 +373,10 @@ export class AgentListComponent implements AfterViewInit, AfterViewChecked, OnDe
   }
 
   onOpenResetAgents() {
-    const size = this.selected.length;
+    const selected = this.selected;
     this.dialogService
       .open(AgentResetComponent, {
-        context: { size },
+        context: { selected },
         autoFocus: true,
         closeOnEsc: true,
       })

ui/src/app/pages/fleet/agents/reset/agent.reset.component.html

@@ -11,17 +11,27 @@
       </button>
     </nb-card-header>
     <nb-card-body>
-      <p>Are you sure you want to reset a total of {{ size }} Agents?</p>
-      <p class="ns1-red">*To confirm, type the amount of agents to be reset.</p>
+      <p>Are you sure you want to reset a total of {{ selected.length }} Agent(s)?</p>
+      <div class="element-list">
+        <div *ngFor="let item of selected" class="item-row">
+          <div class="col-8 overflow-ellipsis">
+            {{ item.name }}
+          </div>
+          <div class="col-3">
+            <span class="orb-service-{{ item.state }} span-accent" *ngIf="item.state"> {{ item.state | titlecase }} </span>
+          </div>
+        </div>
+      </div>
+      <p class="ns1-red" style="margin-top: 1rem;">*To confirm, type the amount of agents to be reset.</p>
       <input type="text"
              #autoInput
              [nbAutocomplete]="auto"
              nbInput
              fullWidth
-             placeholder="{{size}}" [(ngModel)]="validationInput"
-             data-orb-qa-id="input#size">
+             placeholder="{{selected.length}}" [(ngModel)]="validationInput"
+             data-orb-qa-id="input#selected.length">
       <nb-autocomplete #auto >
-        <nb-option [value]="size"> {{size}}</nb-option>
+        <nb-option [value]="selected.length"> {{selected.length}}</nb-option>
       </nb-autocomplete>
     </nb-card-body>
     <nb-card-footer>

ui/src/app/pages/fleet/agents/reset/agent.reset.component.scss

@@ -1,5 +1,6 @@
 nb-card {
     max-width: 38rem !important;
+    padding: 0 !important;
 
     nb-card-header {
       background: #232940 !important;
@@ -12,6 +13,10 @@ nb-card {
 
       p {
         color: #969fb9 !important;
+        margin-bottom: 1rem !important;
+        font-weight: 500 !important;
+        font-size: 14px !important;
+        line-height: 24px !important;
       }
 
       .ns1-red {
@@ -48,4 +53,40 @@ nb-card {
   }
   .ns1red {
     color: #df316f !important;
-  }
+  }
+  .element-list {
+    max-height: 225px;
+    overflow-y: auto;
+    margin-left: 20px;
+  }
+  .span-accent {
+    font-size: 13px;
+    font-weight: 600;
+    float: right;
+  }
+  .item-row {
+    display: flex;
+    align-items: center;
+    border-radius: 6px;
+    width: 300px;
+    padding-left: 3px;
+    font-size: 13px;
+    font-weight: 600;
+  }
+  .item-row:hover {
+    background-color: #1e263d;
+  }
+  .col-8 {
+    flex: 1;
+    padding-left: 0;
+  }
+  .col-3 {
+    flex: 1;
+    padding-right: 0;
+  }
+  .overflow-ellipsis {
+    white-space: nowrap !important;
+    overflow: hidden !important;
+    text-overflow: ellipsis !important;
+    max-width: 350px !important;
+  }

ui/src/app/pages/fleet/agents/reset/agent.reset.component.ts

@@ -10,7 +10,7 @@ import { STRINGS } from 'assets/text/strings';
 
 export class AgentResetComponent {
   strings = STRINGS.agents;
-  @Input() size: Number;
+  @Input() selected: any[] = [];
 
   validationInput: Number;
 
@@ -28,6 +28,6 @@ export class AgentResetComponent {
   }
 
   isEnabled(): boolean {
-    return this.validationInput === this.size;
+    return this.validationInput === this.selected.length;
   }
 }

ui/src/app/pages/fleet/groups/delete/agent.group.delete.component.scss

@@ -1,6 +1,6 @@
 nb-card {
   max-width: 38rem !important;
-
+  padding: 0 !important;
   nb-card-header {
     background: #232940 !important;
     color: #969fb9 !important;
@@ -12,6 +12,10 @@ nb-card {
 
     p {
       color: #969fb9 !important;
+      margin-bottom: 1rem !important;
+      font-weight: 500 !important;
+      font-size: 14px !important;
+      line-height: 24px !important;
     }
 
     .ns1-red {

ui/src/app/pages/fleet/groups/list/agent.group.list.component.ts

@@ -309,12 +309,8 @@ export class AgentGroupListComponent
     });
   }
   public onCheckboxChange(event: any, row: any): void { 
-    let selectedGroup = {
-      id: row.id,
-      name: row.name,
-    }
     if (this.getChecked(row) === false) {
-      this.selected.push(selectedGroup);
+      this.selected.push(row);
     } 
     else {
       for (let i = 0; i < this.selected.length; i++) {
@@ -336,11 +332,7 @@ export class AgentGroupListComponent
       this.groupsSubscription = this.filteredGroups$.subscribe(rows => {
         this.selected = [];
         rows.forEach(row => {
-          const policySelected = {
-            id: row.id,
-            name: row.name,
-          }
-          this.selected.push(policySelected);
+          this.selected.push(row);
         });
       });
     } else {

ui/src/app/pages/sinks/delete/sink.delete.component.scss

@@ -1,5 +1,6 @@
 nb-card {
   max-width: 38rem !important;
+  padding: 0 !important;
 
   nb-card-header {
     background: #232940 !important;
@@ -12,6 +13,10 @@ nb-card {
 
     p {
       color: #969fb9 !important;
+      margin-bottom: 1rem !important;
+      font-weight: 500 !important;
+      font-size: 14px !important;
+      line-height: 24px !important;
     }
 
     .ns1-red {

ui/src/app/shared/components/delete/delete.selected.component.html

@@ -11,19 +11,34 @@
   </nb-card-header>
   <nb-card-body>
     <p>Are you sure you want to delete a total of {{ selected?.length }} {{ elementName }}? This action cannot be undone.</p>
-    <div *ngFor="let item of selected">
-      {{ item.name }} <span class="orb-service-{{ item.state }} orb-service-{{ item.usage }}"> {{ item.state | titlecase }} {{ item.usage | titlecase }} </span>
+    <div class="element-list">
+      <div *ngFor="let item of selected" class="item-row">
+        <div class="col-8 overflow-ellipsis">
+          {{ item.name }}
+        </div>
+        <div class="col-3">
+          <span class="orb-service-{{ item.state }} span-accent" *ngIf="item.state"> {{ item.state | titlecase }} </span>
+          <span class="orb-service-{{ item.usage }} span-accent" *ngIf="item.usage"> {{ item.usage | titlecase }} </span>
+          <button *ngIf="item.matching_agents" class="group-button" (click)="onMatchingAgentsModal(item)">
+            <span class="overflow-ellipsis span-accent">{{ item.matching_agents.total }} 
+              <span class="summary-accent">Assigned Agent(s)</span>
+            </span>
+          </button>
+        </div>
+      </div>
+    </div>
+    <div>
+      <p class style="color: #df316f !important; margin-top: 15px !important;">*To confirm, type the amount of {{ elementName }} to be delete.</p>
+      <input type="text"
+            #autoInput
+            [nbAutocomplete]="auto"
+            nbInput
+            fullWidth
+            placeholder="{{selected?.length }}" [(ngModel)]="validationInput">
+      <nb-autocomplete #auto >
+        <nb-option [value]="selected?.length "> {{selected?.length}}</nb-option>
+      </nb-autocomplete>
     </div>
-    <p class style="color: #df316f !important; margin-top: 15px !important;">*To confirm, type the amount of {{ elementName }} to be delete.</p>
-    <input type="text"
-           #autoInput
-           [nbAutocomplete]="auto"
-           nbInput
-           fullWidth
-           placeholder="{{selected?.length }}" [(ngModel)]="validationInput">
-    <nb-autocomplete #auto >
-      <nb-option [value]="selected?.length "> {{selected?.length}}</nb-option>
-    </nb-autocomplete>
   </nb-card-body>
   <nb-card-footer>
     <button nbButton

ui/src/app/shared/components/delete/delete.selected.component.scss

@@ -1,6 +1,7 @@
 nb-card {
     max-width: 38rem !important;
     max-height: 50rem !important;
+    padding: 0 !important;
     nb-card-header {
       background: #232940 !important;
       color: #969fb9 !important;
@@ -12,6 +13,10 @@ nb-card {
 
       p {
         color: #969fb9 !important;
+        margin-bottom: 1rem !important;
+        font-weight: 500 !important;
+        font-size: 14px !important;
+        line-height: 24px !important;
       }
 
 
@@ -64,3 +69,57 @@ nb-card {
       color: #f2dc4a; 
     }
   }
+  .element-list {
+    max-height: 225px;
+    overflow-y: auto;
+    margin-left: 50px;
+  }
+  .span-accent {
+    font-size: 13px !important;
+    font-weight: 600 !important;
+    float: right !important;
+  }
+  .summary-accent {
+    font-size: 13px !important;
+    font-weight: 600 !important;
+    color: #969fb9 !important;
+  }
+  .item-row {
+    display: flex;
+    align-items: center;
+    border-radius: 6px;
+    width: 380px;
+    padding-left: 3px;
+    font-size: 13px;
+    font-weight: 600;
+  }
+  .item-row:hover {
+    background-color: #1e263d;
+  }
+  .col-8 {
+    flex: 1;
+    padding-left: 0;
+  }
+  .col-3 {
+    flex: 1;
+    padding-right: 0;
+  }
+  .overflow-ellipsis {
+    white-space: nowrap !important;
+    overflow: hidden !important;
+    text-overflow: ellipsis !important;
+    max-width: 350px !important;
+  }
+  .group-button {
+    color: #ffffff;
+    background-color: transparent;
+    outline: none;
+    border: none;
+  }
+  .close {
+    float: right;
+    color: #3089fc;
+    font-size: 20px;
+    font-weight: 600;
+    margin-top: 5px;
+  }