UI: Refactoring

ui-ngx/src/app/core/http/queue.service.ts

@@ -22,6 +22,7 @@ import { QueueInfo, QueueStatisticsInfo, ServiceType } from '@shared/models/queu
 import { PageLink } from '@shared/models/page/page-link';
 import { PageData } from '@shared/models/page/page-data';
 import { Asset } from '@shared/models/asset.models';
+import { map } from 'rxjs/operators';
 
 @Injectable({
   providedIn: 'root'
@@ -55,17 +56,30 @@ export class QueueService {
     return this.http.delete(`/api/queues/${queueId}`);
   }
 
+  private parseQueueStatName = (queueStat: QueueStatisticsInfo) => Object.defineProperty(queueStat, 'name', {
+    get() { return `${this.queueName} (${this.serviceId})`; }
+  });
+
   public getQueueStatistics(pageLink: PageLink, config?: RequestConfig): Observable<PageData<QueueStatisticsInfo>> {
     return this.http.get<PageData<QueueStatisticsInfo>>(`/api/queueStats${pageLink.toQuery()}`,
-      defaultHttpOptionsFromConfig(config));
+      defaultHttpOptionsFromConfig(config)).pipe(
+        map(queueData => {
+          queueData.data.map(queueStat => this.parseQueueStatName(queueStat));
+          return queueData;
+        })
+    );
   }
 
   public getQueueStatisticsById(queueStatId: string, config?: RequestConfig): Observable<QueueStatisticsInfo> {
-    return this.http.get<QueueStatisticsInfo>(`/api/queueStats/${queueStatId}`, defaultHttpOptionsFromConfig(config));
+    return this.http.get<QueueStatisticsInfo>(`/api/queueStats/${queueStatId}`, defaultHttpOptionsFromConfig(config)).pipe(
+      map(queueStat => this.parseQueueStatName(queueStat)));
   }
 
   public getQueueStatisticsByIds(queueStatIds: Array<string>, config?: RequestConfig): Observable<Array<QueueStatisticsInfo>> {
     return this.http.get<Array<QueueStatisticsInfo>>(`/api/queueStats?strQueueStatsIds=${queueStatIds.join(',')}`,
-      defaultHttpOptionsFromConfig(config));
+      defaultHttpOptionsFromConfig(config)).pipe(
+      map(queueStats => queueStats.map(queueStat => this.parseQueueStatName(queueStat))
+      )
+    );
   }
 }

ui-ngx/src/app/shared/components/entity/entity-autocomplete.component.ts

@@ -186,9 +186,7 @@ export class EntityAutocompleteComponent implements ControlValueAccessor, OnInit
             }
           }),
           // startWith<string | BaseData<EntityId>>(''),
-          map(value =>
-            value ? (typeof value === 'string' ? value : value.name) : ''
-          ),
+          map(value => value ? (typeof value === 'string' ? value : value.name) : ''),
           switchMap(name => this.fetchEntities(name)),
           share()
         )
@@ -321,10 +319,6 @@ export class EntityAutocompleteComponent implements ControlValueAccessor, OnInit
       } catch (e) {
         this.propagateChange(null);
       }
-      if (this.entityTypeValue === EntityType.QUEUE_STATS && isDefinedAndNotNull(entity)) {
-        const queueStat  = entity as QueueStatisticsInfo;
-        entity.name = `${queueStat.queueName} (${queueStat.serviceId})`;
-      }
       this.modelValue = entity !== null ? (this.useFullEntityId ? entity.id : entity.id.id) : null;
       this.entityURL = getEntityDetailsPageURL(this.modelValue as string, targetEntityType);
       this.selectEntityFormGroup.get('entity').patchValue(entity !== null ? entity : '', {emitEvent: false});
@@ -373,9 +367,6 @@ export class EntityAutocompleteComponent implements ControlValueAccessor, OnInit
             data.forEach(entity => !excludeEntityIdsSet.has(entity.id.id) && entities.push(entity));
             return entities;
           } else {
-            if (this.entityTypeValue === EntityType.QUEUE_STATS) {
-              data.forEach((entity: QueueStatisticsInfo) => entity.name = `${entity.queueName} (${entity.serviceId})`);
-            }
             return data;
           }
         } else {

ui-ngx/src/app/shared/components/entity/entity-list.component.ts

@@ -185,9 +185,6 @@ export class EntityListComponent implements ControlValueAccessor, OnInit, AfterV
       this.entityService.getEntities(this.entityType, value).subscribe(
         (entities) => {
           this.entities = entities;
-          if (this.entityType === EntityType.QUEUE_STATS) {
-            this.entities.forEach((queueStat: QueueStatisticsInfo) => queueStat.name = `${queueStat.queueName} (${queueStat.serviceId})`);
-          }
           this.entityListFormGroup.get('entities').setValue(this.entities);
         }
       );
@@ -248,15 +245,7 @@ export class EntityListComponent implements ControlValueAccessor, OnInit, AfterV
 
     return this.entityService.getEntitiesByNameFilter(this.entityType, searchText,
       50, this.subType ? this.subType : '', {ignoreLoading: true}).pipe(
-      map((data) => {
-        if (data) {
-          if (this.entityType === EntityType.QUEUE_STATS) {
-            data.forEach((entity: QueueStatisticsInfo) => entity.name = `${entity.queueName} (${entity.serviceId})`);
-          }
-          return data;
-        }
-        return [];
-      }));
+      map((data) => data ? data : []));
   }
 
   onFocus() {

ui-ngx/src/app/shared/models/queue.models.ts

@@ -127,9 +127,7 @@ export interface QueueInfo extends BaseData<QueueId>, HasTenantId {
   };
 }
 
-export interface QueueStatisticsInfo extends BaseData<QueueId>, HasTenantId {
+export interface QueueStatisticsInfo extends Omit<BaseData<QueueId>, 'label'>, HasTenantId {
   queueName: string;
   serviceId: string;
-  name?: string;
-  tenantId?: TenantId;
 }