fix(orb-ui): Improve Tooltips json texts (#2766)

orb-community · Oct 19, 2023 · be403b4 · be403b4
1 parent d2d6f76
commit be403b4
Show file tree

Hide file tree

Showing 6 changed files with 23 additions and 6 deletions.
diff --git a/ui/src/app/pages/datasets/policies.agent/list/agent.policy.list.component.html b/ui/src/app/pages/datasets/policies.agent/list/agent.policy.list.component.html
@@ -90,7 +90,7 @@ <h4>All Policies</h4>
         let-row="row"
         let-value="value"
 >
-    <mat-chip-list>
+    <mat-chip-list nbTooltip="{{ (row?.tags | json) === '{}' ? 'No tags were created' : row.tags | jsonlist }}">
       <mat-chip
         *ngFor="let tag of value | keyvalue"
         style="background-color: #2B3148;"
@@ -109,7 +109,6 @@ <h4>All Policies</h4>
         <span style="color: #df316f;">No tag were created</span>
       </mat-chip>
     </mat-chip-list>
-
 </ng-template>
 
 <ng-template #versionTemplateCell let-i="index" let-row="row" let-value="value">

diff --git a/ui/src/app/pages/fleet/agents/list/agent.list.component.html b/ui/src/app/pages/fleet/agents/list/agent.list.component.html
@@ -115,7 +115,7 @@ <h4>All Agents</h4>
   let-row="row"
   let-value="value"
 >
-  <mat-chip-list #tablechiplist nbTooltip="{{ row.combined_tags | json }}">
+  <mat-chip-list #tablechiplist nbTooltip="{{ (row?.combined_tags | json) === '{}' ? 'No tags were created' : row.combined_tags | jsonlist }}">
     <mat-chip
       *ngFor="let tag of value | keyvalue"
       style="background-color: #2B3148;"

diff --git a/ui/src/app/pages/fleet/groups/list/agent.group.list.component.html b/ui/src/app/pages/fleet/groups/list/agent.group.list.component.html
@@ -87,7 +87,7 @@ <h4>{{ strings.list.header }}</h4>
   <span
     (click)="onMatchingAgentsModal(row)"
     class="matching-agents"
-    nbTooltip="{{ row.matching_agents | json }}"
+    nbTooltip="{{ row.matching_agents | jsonlist }}"
   >
     {{ row.matching_agents.total }}
   </span>
@@ -99,7 +99,7 @@ <h4>{{ strings.list.header }}</h4>
   let-row="row"
   let-value="value"
 >
-  <mat-chip-list nbTooltip="{{ value | json }}">
+  <mat-chip-list nbTooltip="{{ value | jsonlist }}">
     <mat-chip
       *ngFor="let tag of value | keyvalue"
       style="background-color: #2B3148;"

diff --git a/ui/src/app/pages/sinks/list/sink.list.component.html b/ui/src/app/pages/sinks/list/sink.list.component.html
@@ -93,7 +93,7 @@ <h4>{{ strings.list.header }}</h4>
 
 <ng-template #sinkTagsTemplateCell let-i="index" let-row="row" let-value="value">
   <div class="d-block">
-    <mat-chip-list nbTooltip="{{ value | json }}">
+    <mat-chip-list nbTooltip="{{ !row?.tags ? 'No tag were created' : value | jsonlist }}">
       <mat-chip
         *ngFor="let tag of value | keyvalue"
         style="background-color: #2B3148;"

diff --git a/ui/src/app/shared/pipes/list-json.pipe.ts b/ui/src/app/shared/pipes/list-json.pipe.ts
@@ -0,0 +1,14 @@
+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({name: 'jsonlist'})
+export class JsonListPipe implements PipeTransform {
+
+  transform(object: any): string {
+    if (!object || typeof object !== 'object') {
+      return '';
+    }
+    const entries = Object.entries(object);
+    const formattedList = entries.map(([key, value]) => `${key}: ${value}`).join(', ');
+    return formattedList;
+  }
+}
diff --git a/ui/src/app/shared/shared.module.ts b/ui/src/app/shared/shared.module.ts
@@ -67,6 +67,7 @@ import { AgentBackendsComponent } from './components/orb/agent/agent-backends/ag
 import { SinkDetailsComponent } from './components/orb/sink/sink-details/sink-details.component';
 import { SinkConfigComponent } from './components/orb/sink/sink-config/sink-config.component';
 import { TableContextMenu } from './components/tableContexMenu/table-context-menu-component';
+import { JsonListPipe } from './pipes/list-json.pipe';
 
 @NgModule({
   imports: [
@@ -109,6 +110,7 @@ import { TableContextMenu } from './components/tableContexMenu/table-context-men
     PaginationComponent,
     AdvancedOptionsPipe,
     TagColorPipe,
+    JsonListPipe,
     TagChipPipe,
     TaglistChipPipe,
     ValidTagInputDirective,
@@ -148,6 +150,7 @@ import { TableContextMenu } from './components/tableContexMenu/table-context-men
     PaginationComponent,
     AdvancedOptionsPipe,
     TagColorPipe,
+    JsonListPipe,
     TagChipPipe,
     TaglistChipPipe,
     ValidTagInputDirective,
@@ -183,6 +186,7 @@ import { TableContextMenu } from './components/tableContexMenu/table-context-men
     ToMillisecsPipe,
     AdvancedOptionsPipe,
     TagColorPipe,
+    JsonListPipe,
     TagChipPipe,
     TaglistChipPipe,
     ValidTagInputDirective,