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
orb-community · Sep 18, 2023 · cbaa4b7 · cbaa4b7
1 parent 34a42e8
commit cbaa4b7
Show file tree

Hide file tree

Showing 4 changed files with 81 additions and 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
@@ -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
@@ -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
@@ -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
@@ -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;
+      }
+    }
+  }
+}