imporvements(orb-ui): Sink Details modal & Group details modal (#2753)

orb-community · Oct 16, 2023 · d400238 · d400238
1 parent 4e9ba94
commit d400238
Show file tree

Hide file tree

Showing 6 changed files with 161 additions and 36 deletions.
diff --git a/ui/src/app/pages/fleet/groups/details/agent.group.details.component.html b/ui/src/app/pages/fleet/groups/details/agent.group.details.component.html
@@ -1,31 +1,34 @@
-<nb-card size="large" class="nb-card-medium">
+<nb-card>
   <nb-card-header>
     {{strings.details.header}}
-
-
-    <button nbButton ghost="true" size="small" class="orb-close-dialog"
+    <button nbButton ghost="true" class="orb-close-dialog"
             (click)="onClose()"><span class="nb-close"></span>
     </button>
   </nb-card-header>
   <nb-card-body>
     <div class="row">
       <div class="col-6 d-flex flex-column align-items-start">
         <p class="detail-title">{{strings.propNames.name}}</p>
-        <p>{{ agentGroup.name }}</p>
+        <p class="overflow-ellipsis" nbTooltip="{{agentGroup.name}}">{{ agentGroup.name }}</p>
       </div>
-      <div class="col-6 d-flex flex-column align-items-start" *ngIf="agentGroup?.description">
+      <div class="col-6 d-flex flex-column align-items-start" >
         <p class="detail-title">{{strings.propNames.description}}</p>
-        <p>{{ agentGroup.description }}</p>
+        <p *ngIf="agentGroup?.description">{{ agentGroup.description }}</p>
+        <p *ngIf="!agentGroup?.description" style="font-size: 14px; font-style: italic; "> No description Provided </p>
       </div>
     </div>
     <div class="row">
       <div class="col-6 d-flex flex-column align-items-start">
         <p class="detail-title">{{strings.propNames.matches}}</p>
-        <p>{{ agentGroup.matching_agents.total }} {{strings.match.agents}}</p>
+        <button class="match-agents-button" (click)="onMatchingAgentsModal()">{{ agentGroup.matching_agents.total }} {{strings.match.agents}}</button>
+      </div>
+      <div class="col-6 d-flex flex-column align-items-start">
+        <p class="detail-title">Date Created</p>
+        <p>{{ agentGroup?.ts_created | date:'MM-dd-yy h:mm a' }}</p>
       </div>
     </div>
     <div class="row">
-      <div class="col-6 d-flex flex-column align-items-start">
+      <div class="col-12 d-flex flex-column align-items-start">
         <p class="detail-title">{{strings.propNames.tags}}</p>
         <div class="background">
           <mat-chip-list>
@@ -53,6 +56,6 @@
   </nb-card-body>
 
   <nb-card-footer>
-    <button nbButton status="primary" class="sink-edit-button" (click)="onOpenEdit(agentGroup)">Edit</button>
+    <button status="primary" class="group-edit-button" (click)="onOpenEdit(agentGroup)">Edit</button>
   </nb-card-footer>
 </nb-card>
diff --git a/ui/src/app/pages/fleet/groups/details/agent.group.details.component.scss b/ui/src/app/pages/fleet/groups/details/agent.group.details.component.scss
@@ -1,11 +1,59 @@
 nb-icon {
   vertical-align: middle;
 }
+nb-card {
+  padding: 0 !important;
+  width: 650px;
+  height: fit-content;
+  min-height: 400px;
+  nb-card-header {
+    background: #232940 !important;
+    color: #969fb9 !important;
+  }
+
+  nb-card-body {
+    overflow: hidden !important;
+    margin: 2rem 3rem 0 3rem !important;
+    padding: 0 !important;
+  }
+}
 
 .detail-title {
   color: #969fb9;
+  font-weight: 500;
+  font-size: 14px;
 }
 
+.overflow-ellipsis {
+  white-space: nowrap !important;
+  overflow: hidden !important;
+  text-overflow: ellipsis !important;
+  max-width: 250px !important;
+}
+.match-agents-button {
+  color: #3089fc;
+  background-color: transparent;
+  border: none;
+  padding: 0;
+  text-decoration: underline;
+  outline: none;
+
+  &:hover {
+    color: #569fff;
+  }
+}
+.group-edit-button {
+  padding: 8px 24px 8px 24px;
+  border-radius: 16px;
+  border: none;
+  background-color: #3089fc;
+  color: white;
+  font-weight: 600;
+  font-size: 14px;
+  cursor: pointer;
+  outline: none;
+  font-family: 'Montserrat';
+}
 .p {
   color: #ffffff;
   text-align: left;
@@ -48,7 +96,7 @@ nb-tabset {
   > span {
     float: right;
     padding-top: 0.3rem;
-    font-size: large;
+    font-size: 20px;
     color: #3089fc;
     font-weight: 900;
   }

diff --git a/ui/src/app/pages/fleet/groups/details/agent.group.details.component.ts b/ui/src/app/pages/fleet/groups/details/agent.group.details.component.ts
@@ -1,8 +1,9 @@
 import { Component, Input } from '@angular/core';
-import { NbDialogRef } from '@nebular/theme';
+import { NbDialogRef, NbDialogService } from '@nebular/theme';
 import { STRINGS } from 'assets/text/strings';
 import { ActivatedRoute, Router } from '@angular/router';
 import { AgentGroup } from 'app/common/interfaces/orb/agent.group.interface';
+import { AgentMatchComponent } from '../../agents/match/agent.match.component';
 
 @Component({
   selector: 'ngx-agent-group-details-component',
@@ -18,9 +19,17 @@ export class AgentGroupDetailsComponent {
     protected dialogRef: NbDialogRef<AgentGroupDetailsComponent>,
     protected route: ActivatedRoute,
     protected router: Router,
+    private dialogService: NbDialogService,
   ) {
   }
 
+  onMatchingAgentsModal() {
+    this.dialogService.open(AgentMatchComponent, {
+      context: { agentGroup: this.agentGroup },
+      autoFocus: true,
+      closeOnEsc: true,
+    });
+  }
 
   onOpenEdit(agentGroup: any) {
     this.dialogRef.close(true);

diff --git a/ui/src/app/pages/sinks/details/sink.details.component.html b/ui/src/app/pages/sinks/details/sink.details.component.html
@@ -1,4 +1,4 @@
-<nb-card size="large" class="nb-card-large">
+<nb-card>
   <nb-card-header>
     {{strings.details.header}}
     <button nbButton
@@ -13,12 +13,12 @@
     <div class="row">
       <div class="col-6 d-flex flex-column align-items-start">
         <p class="detail-title">{{strings.propNames.name}}</p>
-        <p>{{ sink.name }}</p>
+        <p class="overflow-ellipsis" nbTooltip="{{sink.name}}">{{ sink.name }}</p>
       </div>
       <div class="col-6 d-flex flex-column align-items-start" *ngIf="!sink.description">
         <p class="detail-title">{{strings.propNames.description}}</p>
-        <p>{{ sink.description }}</p>
-        <p *ngIf="!sink.description" style="font-style: italic; font-size: 14px;">No Description Added</p>
+        <p *ngIf="sink.description">{{ sink.description }}</p>
+        <p *ngIf="!sink.description" style="font-style: italic; font-size: 14px;">No description Provided</p>
       </div>
     </div>
     <div class="row">
@@ -27,42 +27,49 @@
         <p>{{ sink.backend }}</p>
       </div>
       <div class="col-6 d-flex flex-column align-items-start">
-        <p class="detail-title">{{ exporterField }}</p>
-        <p *ngIf="sink.config.exporter.remote_host">{{ sink.config.exporter.remote_host }} </p>
-        <p *ngIf="sink.config.exporter.endpoint">{{ sink.config.exporter.endpoint }} </p>
+        <p class="detail-title">{{strings.propNames.config_username}}</p>
+        <p>{{ sink.config.authentication.username }}</p>
       </div>
     </div>
     <div class="row">
-      <div class="col-6 d-flex flex-column align-items-start">
-        <p class="detail-title">{{strings.propNames.config_username}}</p>
-        <p>{{ sink.config.authentication.username }}</p>
+      <div class="col-12 d-flex flex-column align-items-start">
+        <p class="detail-title">{{ exporterField }}</p>
+        <p *ngIf="sink.config.exporter.remote_host">{{ sink.config.exporter.remote_host }} </p>
+        <p *ngIf="sink.config.exporter.endpoint">{{ sink.config.exporter.endpoint }} </p>
       </div>
     </div>
     <div class="row">
-      <div class="col-6 d-flex flex-column align-items-start">
+      <div class="col-12 d-flex flex-column align-items-start">
         <p class="detail-title">{{strings.propNames.tags}}</p>
-        <div>
-          <mat-chip-list style="min-width: 0.2pc; min-height: 0.2pc;">
+        <div class="background">
+          <mat-chip-list>
+            <mat-chip
+              *ngFor="let tag of sink.tags | keyvalue"
+              style="background-color: #2B3148;"
+              class="orb-tag-chip"
+            >
+              <span [style.color]="tag.key | tagcolor">{{ tag.key }}</span><span style="color: #969FB9;">:</span>&nbsp;
+              <span [style.color]="tag.value | tagcolor">{{ tag.value }}</span>
+            </mat-chip>
             <mat-chip
-                class="orb-tag-chip "
-                *ngFor="let tag of sink.tags | keyvalue"
-                [style.background-color]="tag | tagcolor">
-                {{tag | tagchip}}
+              *ngIf="!sink.tags"
+              style="background-color: #2B3148;"
+              class="orb-tag-chip"
+            >
+              <span style="color: #df316f;">No tag were added</span>
             </mat-chip>
           </mat-chip-list>
         </div>
-        <p *ngIf="!sink.tags">No tags Added</p>
       </div>
     </div>
-    <div class="row" *ngIf="sink?.state === _sinkStates.error">
+    <div class="row" *ngIf="sink?.state === _sinkStates.error || sink?.state === _sinkStates.warning">
       <div class="col-12 d-flex flex-column align-items-start">
-        <p class="ns1red">Error</p>
-        <p>{{sink.error}}</p>
+        <p class="orb-service-{{sink.state}}"> {{sink?.error | titlecase}}</p>
       </div>
     </div>
   </nb-card-body>
 
   <nb-card-footer>
-    <button nbButton status="primary" class="sink-edit-button" (click)="onOpenView(sink)">View Sink</button>
+    <button status="primary" class="sink-edit-button" (click)="onOpenView(sink)">Edit</button>
   </nb-card-footer>
 </nb-card>
diff --git a/ui/src/app/pages/sinks/details/sink.details.component.scss b/ui/src/app/pages/sinks/details/sink.details.component.scss
@@ -2,6 +2,30 @@ nb-icon {
   vertical-align: middle;
 }
 
+nb-card {
+  padding: 0 !important;
+  width: 650px;
+  height: fit-content;
+  min-height: 400px;
+  nb-card-header {
+    background: #232940 !important;
+    color: #969fb9 !important;
+  }
+
+  nb-card-body {
+    overflow: hidden !important;
+    margin: 2rem 3rem 0 3rem !important;
+    padding: 0 !important;
+  }
+}
+.orb-service- {
+  &error {
+    color: #df316f;
+  }
+  &warning {
+    color: #f2c94c;
+  }
+}
 .form-key {
   color: #969fb9;
 }
@@ -47,11 +71,17 @@ nb-tabset {
   > span {
     float: right;
     padding-top: 0.3rem;
-    font-size: large;
+    font-size: 20px;
     color: #3089fc;
     font-weight: 900;
   }
 }
+.background {
+  background-color: #232940;
+  padding: 10px;
+  border-radius: 8px;
+  margin-bottom: 20px;
+}
 
 .row {
   display: flex;
@@ -71,7 +101,26 @@ p {
   overflow-wrap: anywhere !important;
   white-space: normal !important;
 }
-
+.overflow-ellipsis {
+  white-space: nowrap !important;
+  overflow: hidden !important;
+  text-overflow: ellipsis !important;
+  max-width: 250px !important;
+}
 .detail-title {
   color: #969fb9;
+  font-weight: 500;
+  font-size: 14px;
+}
+.sink-edit-button {
+  padding: 8px 24px 8px 24px;
+  border-radius: 16px;
+  border: none;
+  background-color: #3089fc;
+  color: white;
+  font-weight: 600;
+  font-size: 14px;
+  cursor: pointer;
+  outline: none;
+  font-family: 'Montserrat';
 }
diff --git a/ui/src/app/shared/components/orb/sink/sink-details/sink-details.component.scss b/ui/src/app/shared/components/orb/sink/sink-details/sink-details.component.scss
@@ -26,6 +26,15 @@ input {
   &idle {
     color: #f2994a;
   }
+  &provisioning {
+    color: #3089fc;
+  }
+  &provioning_error {
+    color: #df316f;
+  }
+  &warning {
+    color: #f2c94c;
+  }
 }
 .ns1red {
   color: #df316f;