From cbaa4b714c8ad50e6a4e10035bd3e85fb12019c1 Mon Sep 17 00:00:00 2001
From: joaoguilherme2003 <joao.mendonca@encora.com>
Date: Mon, 18 Sep 2023 12:55:30 -0300
Subject: [PATCH] feat(orb-ui): #eng-1186 improvements on assigned groups
 component (#2631)

* feat(orb-ui): Improve assigned groups design

* fix(orb-ui): Matching agents not loading if agent has error status
---
 .../agents/match/agent.match.component.ts     |  2 +-
 .../policy-datasets.component.ts              |  2 +-
 .../policy-groups.component.html              | 40 ++++++++++----
 .../policy-groups.component.scss              | 54 +++++++++++++++++--
 4 files changed, 81 insertions(+), 17 deletions(-)

diff --git a/ui/src/app/pages/fleet/agents/match/agent.match.component.ts b/ui/src/app/pages/fleet/agents/match/agent.match.component.ts
index f2273ad6c..21ffc5217 100644
--- a/ui/src/app/pages/fleet/agents/match/agent.match.component.ts
+++ b/ui/src/app/pages/fleet/agents/match/agent.match.component.ts
@@ -140,7 +140,7 @@ export class AgentMatchComponent implements OnInit, AfterViewInit {
           this.specificPolicy = true;
           this.agents = resp.map((agent) => {
             const {policy_state} = agent;
-            const policy_agg_info = !!policy_state && policy_state[this.policy.id].state || AgentPolicyStates.failedToApply;
+            const policy_agg_info = !!policy_state && policy_state[this.policy.id]?.state || AgentPolicyStates.failedToApply;
             return {...agent, policy_agg_info };
           })
         } else {
diff --git a/ui/src/app/shared/components/orb/policy/policy-datasets/policy-datasets.component.ts b/ui/src/app/shared/components/orb/policy/policy-datasets/policy-datasets.component.ts
index 282bd3fad..581214a66 100644
--- a/ui/src/app/shared/components/orb/policy/policy-datasets/policy-datasets.component.ts
+++ b/ui/src/app/shared/components/orb/policy/policy-datasets/policy-datasets.component.ts
@@ -241,7 +241,7 @@ export class PolicyDatasetsComponent
 
   showAgentGroupMatches(agentGroup) {
     this.dialogService.open(AgentMatchComponent, {
-      context: { agentGroup },
+      context: { agentGroup: agentGroup, policy: this.policy },
       autoFocus: true,
       closeOnEsc: true,
     });
diff --git a/ui/src/app/shared/components/orb/policy/policy-groups/policy-groups.component.html b/ui/src/app/shared/components/orb/policy/policy-groups/policy-groups.component.html
index ac87f20f3..cfdbd4b9a 100644
--- a/ui/src/app/shared/components/orb/policy/policy-groups/policy-groups.component.html
+++ b/ui/src/app/shared/components/orb/policy/policy-groups/policy-groups.component.html
@@ -2,16 +2,36 @@
   <nb-card-header>Assigned Groups</nb-card-header>
   <nb-card-body>
     <div *ngIf="!isLoading">
-      <button
-        (click)="showAgentGroupMatches(group)"
-        *ngFor="let group of groups; last as isLast"
-        class="agent-group-button">
-        <span *ngIf="group.name"
-                matTooltip="{{group?.matching_agents?.online}} online out of {{group?.matching_agents?.total}} agent(s)"
-              class="agent-group-accent">{{ group?.name }} ( {{ group?.matching_agents?.online}}
-                                                          / {{ group?.matching_agents?.total }} )</span>
-        <span *ngIf="!isLast">,</span>
-      </button>
+      <nb-accordion *ngFor="let group of groups;">
+        <nb-accordion-item>
+          <nb-accordion-item-header> 
+            <span class="summary-accent">Group:</span>&nbsp;{{ group?.name }} 
+          </nb-accordion-item-header>
+          <nb-accordion-item-body> 
+            <button *ngIf="group?.matching_agents?.online !== 0"
+            (click)="showAgentGroupMatches(group)"
+            class="agent-group-button">
+              <span>
+                {{ group?.matching_agents?.online }} out of {{ group?.matching_agents?.total }} agents are <span style="color: #6fcf97">online</span>
+              </span>
+            </button>
+            <button *ngIf="group?.matching_agents?.online === 0 && group?.matching_agents?.total !== 0"
+            (click)="showAgentGroupMatches(group)"
+            class="agent-group-button">
+              <span>
+                None of {{ group?.matching_agents?.total }} agents are online.
+              </span>
+            </button>
+            <span *ngIf="group?.matching_agents?.total === 0"  class="agent-group-button">
+              Group don't have any agents.
+            </span>
+
+          </nb-accordion-item-body>
+        </nb-accordion-item>
+      </nb-accordion>
+      <span *ngIf="groups.length === 0" style="font-style: italic;" class="summary-accent">
+        Policy not assigned to any group
+      </span>
     </div>
     <p *ngIf="errors?.nogroup">
       <span class="error-accent">{{ errors.nogroup }}</span>
diff --git a/ui/src/app/shared/components/orb/policy/policy-groups/policy-groups.component.scss b/ui/src/app/shared/components/orb/policy/policy-groups/policy-groups.component.scss
index 87a560751..28d543bad 100644
--- a/ui/src/app/shared/components/orb/policy/policy-groups/policy-groups.component.scss
+++ b/ui/src/app/shared/components/orb/policy/policy-groups/policy-groups.component.scss
@@ -120,16 +120,25 @@ nb-card {
     color: #df316f !important;
   }
 }
-
-::ng-deep .agent-group-button {
+.no-agents {
+  color: #fff;
+  font-family: 'Roboto';
+  font-size: 13px;
+  font-weight: 600;
+  line-height: 1.5rem;
+}
+.agent-group-button {
   background-color: transparent !important;
   background-repeat: no-repeat !important;
-  border: solid #ffffff !important;
-  border-radius: 15px !important;
-  border-width: thin !important;
+  border: none !important;
   cursor: pointer !important;
   outline: none !important;
   overflow: hidden !important;
+  color: #fff;
+  font-family: 'Montserrat', sans-serif;
+  font-size: 13px;
+  font-weight: 600;
+  line-height: 1.5rem;
 }
 
 .agent-group-accent {
@@ -141,3 +150,38 @@ nb-card {
   color: #df316f !important;
   font-weight: 600;
 }
+
+::ng-deep nb-accordion {
+  border: none !important;
+  border-radius: 8px !important;
+  display: grid;
+  padding: -0.1rem !important;
+  margin: -0.1rem !important;
+  text-subtitle-line-height: 1rem;
+  box-shadow: none !important;
+
+  > nb-accordion-item {
+    border: none !important;
+    border-radius: 8px !important;
+    padding: -0.1rem !important;
+    margin: -0.1rem !important;
+
+    > nb-accordion-item-header {
+      border: none !important;
+      border-radius: 8px !important;
+      padding: 0.1rem 0 !important;
+    }
+
+    > nb-accordion-item-body {
+      border: none !important;
+      border-radius: 8px !important;
+      display: grid;
+      padding: 0 10px 0 10px;
+      background-color: #1c2339;
+
+      .item-body {
+        padding: 0.1em !important;
+      }
+    }
+  }
+}