Merge remote-tracking branch 'origin/log-icon' into log-icon

Author: itssharmasandeep

Dockerfile

@@ -1,4 +1,4 @@
-FROM nginx:1.15-alpine
+FROM nginx:1.20-alpine
 COPY dist/hypertrace-ui /usr/share/nginx/html
 COPY conf/default.conf /etc/nginx/conf.d/default.conf
 EXPOSE 2020

projects/components/src/popover/popover.component.ts

@@ -9,7 +9,6 @@ import {
   OnDestroy,
   Output
 } from '@angular/core';
-import { Subscription } from 'rxjs';
 import { PopoverBackdrop, PopoverPositionType, PopoverRelativePositionLocation } from './popover';
 import { PopoverContentComponent } from './popover-content.component';
 import { PopoverRef } from './popover-ref';
@@ -51,12 +50,14 @@ export class PopoverComponent implements OnDestroy {
   @ContentChild(PopoverContentComponent, { static: true })
   public content!: PopoverContentComponent;
 
-  private subscription?: Subscription;
+  private popover?: PopoverRef;
 
   public constructor(private readonly popoverService: PopoverService, private readonly popoverElement: ElementRef) {}
 
   public ngOnDestroy(): void {
-    this.subscription?.unsubscribe();
+    if (!this.popover?.closed) {
+      this.popover?.close();
+    }
   }
 
   @HostListener('click')
@@ -65,7 +66,7 @@ export class PopoverComponent implements OnDestroy {
       return;
     }
 
-    const popover = this.popoverService.drawPopover({
+    this.popover = this.popoverService.drawPopover({
       position: {
         type: PopoverPositionType.Relative,
         origin: this.popoverElement,
@@ -76,17 +77,17 @@ export class PopoverComponent implements OnDestroy {
     });
 
     // Closing can happen internal to the Popover for things like closeOnBackdropClick. Let the consumer know.
-    this.subscription = popover.closed$.subscribe(() => this.popoverClose.emit());
+    this.popover.closed$.subscribe(() => this.popoverClose.emit());
 
-    popover.closeOnBackdropClick();
+    this.popover.closeOnBackdropClick();
 
     if (this.closeOnClick) {
-      popover.closeOnPopoverContentClick();
+      this.popover.closeOnPopoverContentClick();
     }
     if (this.closeOnNavigate) {
-      popover.closeOnNavigation();
+      this.popover.closeOnNavigation();
     }
 
-    this.popoverOpen.emit(popover);
+    this.popoverOpen.emit(this.popover);
   }
 }

projects/observability/src/shared/components/entity-renderer/entity-renderer.component.test.ts

@@ -83,7 +83,7 @@ describe('Entity Renderer Component', () => {
 
     expect(rendererElement).toHaveClass('navigable');
     spectator.dispatchFakeEvent(rendererElement, 'click');
-    expect(entityNavService.navigateToEntity).toHaveBeenCalledWith(entity);
+    expect(entityNavService.navigateToEntity).toHaveBeenCalledWith(entity, false);
   });
 
   test('renders an entity without icon by default', () => {

projects/observability/src/shared/components/entity-renderer/entity-renderer.component.ts

@@ -32,6 +32,9 @@ export class EntityRendererComponent implements OnChanges {
   @Input()
   public entity?: Entity;
 
+  @Input()
+  public inactive: boolean = false;
+
   @Input()
   public navigable: boolean = true;
 
@@ -59,8 +62,9 @@ export class EntityRendererComponent implements OnChanges {
       this.setIconType();
     }
   }
+
   public onClickNavigate(): void {
-    this.navigable && this.entity && this.entityNavService.navigateToEntity(this.entity);
+    this.navigable && this.entity && this.entityNavService.navigateToEntity(this.entity, this.inactive);
   }
 
   private setName(): void {

projects/observability/src/shared/components/table/data-cell/entity/entity-table-cell-parser.ts

@@ -1,19 +1,32 @@
 import { TableCellParser, TableCellParserBase, TableRow } from '@hypertrace/components';
 import { Entity, entityIdKey } from '../../../../graphql/model/schema/entity';
 import { ObservabilityTableCellType } from '../../observability-table-cell-type';
-import { parseEntityFromTableRow } from './entity-table-cell-renderer-util';
+import { isInactiveEntity, parseEntityFromTableRow } from './entity-table-cell-renderer-util';
 
 @TableCellParser({
   type: ObservabilityTableCellType.Entity
 })
 export class EntityTableCellParser extends TableCellParserBase<CellData, CellData, string | undefined> {
   public parseValue(cellData: CellData, row: TableRow): CellData {
-    return parseEntityFromTableRow(cellData, row);
+    const entity = parseEntityFromTableRow(cellData, row);
+
+    if (entity === undefined) {
+      return undefined;
+    }
+
+    return {
+      ...entity,
+      isInactive: isInactiveEntity(row) === true
+    };
   }
 
   public parseFilterValue(cellData: CellData): string | undefined {
     return cellData !== undefined ? cellData[entityIdKey] : undefined;
   }
 }
 
-type CellData = Entity | undefined;
+type CellData = MaybeInactiveEntity | undefined;
+
+export interface MaybeInactiveEntity extends Entity {
+  isInactive: boolean;
+}

projects/observability/src/shared/components/table/data-cell/entity/entity-table-cell-renderer-util.ts

@@ -1,4 +1,7 @@
 import { Dictionary } from '@hypertrace/common';
+import { TableRow } from '@hypertrace/components';
+import { isMetricAggregation, MetricAggregation } from '@hypertrace/distributed-tracing';
+import { isNull } from 'lodash-es';
 import { Entity, Interaction } from '../../../../graphql/model/schema/entity';
 import { EntitySpecificationBuilder } from '../../../../graphql/request/builders/specification/entity/entity-specification-builder';
 
@@ -27,3 +30,18 @@ export const parseEntityFromTableRow = (cell: Entity | undefined, row: Dictionar
 };
 
 const isInteraction = (neighbor: unknown): neighbor is Interaction => typeof neighbor === 'object';
+
+export const isInactiveEntity = (row: TableRow): boolean | undefined => {
+  const metricAggregations = filterMetricAggregations(row);
+
+  if (metricAggregations.length === 0) {
+    // If an aggregation wasn't fetched, we have no way of knowing if this Entity is inactive.
+    return undefined;
+  }
+
+  return metricAggregations.every(metricAggregation => !isValidMetricAggregation(metricAggregation));
+};
+
+const filterMetricAggregations = (row: TableRow): MetricAggregation[] => Object.values(row).filter(isMetricAggregation);
+
+const isValidMetricAggregation = (metricAggregation: MetricAggregation): boolean => !isNull(metricAggregation.value);

projects/observability/src/shared/components/table/data-cell/entity/entity-table-cell-renderer.component.test.ts

@@ -35,7 +35,10 @@ describe('Entity table cell renderer component', () => {
 
   test('should render a milliseconds only value', () => {
     const spectator = buildComponent();
-    expect(spectator.component.value).toEqual(entity);
+    expect(spectator.component.value).toEqual({
+      ...entity,
+      isInactive: false
+    });
   });
 
   test('should render first column with additional css class', () => {

projects/observability/src/shared/components/table/data-cell/entity/entity-table-cell-renderer.component.ts

@@ -1,15 +1,19 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { TableCellAlignmentType, TableCellRenderer, TableCellRendererBase } from '@hypertrace/components';
-import { Entity } from '../../../../graphql/model/schema/entity';
 import { ObservabilityTableCellType } from '../../observability-table-cell-type';
+import { MaybeInactiveEntity } from './entity-table-cell-parser';
 
 @Component({
   selector: 'ht-entity-table-cell-renderer',
   styleUrls: ['./entity-table-cell-renderer.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: `
     <div class="fill-container entity-cell" [ngClass]="{ 'first-column': this.isFirstColumn }">
-      <ht-entity-renderer [entity]="this.value" [navigable]="true"></ht-entity-renderer>
+      <ht-entity-renderer
+        [entity]="this.value"
+        [inactive]="this.value?.isInactive === true"
+        [navigable]="true"
+      ></ht-entity-renderer>
     </div>
   `
 })
@@ -18,4 +22,4 @@ import { ObservabilityTableCellType } from '../../observability-table-cell-type'
   alignment: TableCellAlignmentType.Left,
   parser: ObservabilityTableCellType.Entity
 })
-export class EntityTableCellRendererComponent extends TableCellRendererBase<Entity | undefined> {}
+export class EntityTableCellRendererComponent extends TableCellRendererBase<MaybeInactiveEntity | undefined> {}

projects/observability/src/shared/constants/entity-metadata.ts

@@ -3,7 +3,7 @@ import { InjectionToken } from '@angular/core';
 export interface EntityMetadata {
   entityType: string;
   icon: string;
-  detailPath(id: string, sourceRoute?: string): string[];
+  detailPath(id: string, sourceRoute?: string, inactive?: boolean): string[];
   listPath?: string[];
   apisListPath?(id: string): string[];
   sourceRoutes?: string[];

projects/observability/src/shared/services/navigation/entity/entity-navigation.service.ts

@@ -11,18 +11,18 @@ export class EntityNavigationService {
     @Inject(ENTITY_METADATA) private readonly entityMetadata: EntityMetadataMap
   ) {
     Array.from(this.entityMetadata.values()).forEach(item => {
-      this.registerEntityNavigationAction(item.entityType, (id, sourceRoute) =>
-        this.navigationService.navigateWithinApp(item.detailPath(id, sourceRoute))
+      this.registerEntityNavigationAction(item.entityType, (id, sourceRoute, inactive) =>
+        this.navigationService.navigateWithinApp(item.detailPath(id, sourceRoute, inactive))
       );
     });
   }
 
   private readonly entityNavigationMap: Map<
     EntityType,
-    (id: string, sourceRoute?: string) => Observable<boolean>
+    (id: string, sourceRoute?: string, inactive?: boolean) => Observable<boolean>
   > = new Map();
 
-  public navigateToEntity(entity: Entity): Observable<boolean> {
+  public navigateToEntity(entity: Entity, isInactive?: boolean): Observable<boolean> {
     const entityType = entity[entityTypeKey];
     const entityId = entity[entityIdKey];
     const navigationFunction = this.entityNavigationMap.get(entityType);
@@ -35,13 +35,13 @@ export class EntityNavigationService {
     );
 
     return navigationFunction
-      ? navigationFunction(entityId, sourceRoute)
+      ? navigationFunction(entityId, sourceRoute, isInactive)
       : throwError(`Requested entity type not registered for navigation: ${entityType}`);
   }
 
   public registerEntityNavigationAction(
     entityType: EntityType,
-    action: (id: string, sourceRoute?: string) => Observable<boolean>
+    action: (id: string, sourceRoute?: string, inactive?: boolean) => Observable<boolean>
   ): void {
     this.entityNavigationMap.set(entityType, action);
   }