feat: custom metrics support for topology widget (WIP)

projects/observability/src/pages/apis/topology/application-flow.component.ts

@@ -1,6 +1,8 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { Color } from '@hypertrace/common';
 import { MetricAggregationType } from '@hypertrace/distributed-tracing';
 import { ModelJson } from '@hypertrace/hyperdash';
+import { SecondaryNodeMetricCategoryValueType } from '../../../shared/dashboard/widgets/topology/metric/node-metric-category';
 
 @Component({
   changeDetection: ChangeDetectionStrategy.OnPush,
@@ -26,78 +28,113 @@ export class ApplicationFlowComponent {
           type: 'topology-data-source',
           entity: 'SERVICE',
           'downstream-entities': ['SERVICE', 'BACKEND'],
-          'node-metrics': [
-            {
-              type: 'percentile-latency-metric-aggregation',
-              'display-name': 'P99 Latency'
+          'node-metrics': {
+            primary: {
+              specification: {
+                type: 'percentile-latency-metric-aggregation',
+                'display-name': 'P99 Latency'
+              }
             },
-            {
-              type: 'metric-aggregation',
-              metric: 'duration',
-              aggregation: MetricAggregationType.P50,
-              'display-name': 'P50 Latency'
+            secondary: {
+              specification: {
+                type: 'error-percentage-metric-aggregation',
+                aggregation: MetricAggregationType.Average,
+                'display-name': 'Error %'
+              },
+              categories: [
+                {
+                  value: SecondaryNodeMetricCategoryValueType.GreaterThanOrEqualTo5,
+                  color: Color.Orange3,
+                  secondaryColor: Color.Orange5,
+                  focusedColor: Color.Orange3,
+                  categoryClass: 'greater-than-or-equal-to-5-secondary-category'
+                }
+              ]
             },
-            {
-              type: 'error-percentage-metric-aggregation',
-              aggregation: MetricAggregationType.Average,
-              'display-name': 'Error %'
+            others: [
+              {
+                specification: {
+                  type: 'metric-aggregation',
+                  metric: 'duration',
+                  aggregation: MetricAggregationType.P50,
+                  'display-name': 'P50 Latency'
+                }
+              },
+              {
+                specification: {
+                  type: 'metric-aggregation',
+                  metric: 'errorCount',
+                  aggregation: MetricAggregationType.Sum,
+                  'display-name': 'Error Count'
+                }
+              },
+              {
+                specification: {
+                  type: 'metric-aggregation',
+                  metric: 'numCalls',
+                  aggregation: MetricAggregationType.AvgrateSecond,
+                  'display-name': 'Call Rate/sec'
+                }
+              },
+              {
+                specification: {
+                  type: 'metric-aggregation',
+                  metric: 'numCalls',
+                  aggregation: MetricAggregationType.Sum,
+                  'display-name': 'Call Count'
+                }
+              }
+            ]
+          },
+          'edge-metrics': {
+            primary: {
+              specification: {
+                type: 'percentile-latency-metric-aggregation',
+                'display-name': 'P99 Latency'
+              }
             },
-
-            {
-              type: 'metric-aggregation',
-              metric: 'errorCount',
-              aggregation: MetricAggregationType.Sum,
-              'display-name': 'Error Count'
-            },
-            {
-              type: 'metric-aggregation',
-              metric: 'numCalls',
-              aggregation: MetricAggregationType.AvgrateSecond,
-              'display-name': 'Call Rate/sec'
-            },
-            {
-              type: 'metric-aggregation',
-              metric: 'numCalls',
-              aggregation: MetricAggregationType.Sum,
-              'display-name': 'Call Count'
-            }
-          ],
-          'edge-metrics': [
-            {
-              type: 'percentile-latency-metric-aggregation',
-              'display-name': 'P99 Latency'
-            },
-            {
-              type: 'metric-aggregation',
-              metric: 'duration',
-              aggregation: MetricAggregationType.P50,
-              'display-name': 'P50 Latency'
-            },
-            {
-              type: 'error-percentage-metric-aggregation',
-              aggregation: MetricAggregationType.Average,
-              'display-name': 'Error %'
-            },
-
-            {
-              type: 'metric-aggregation',
-              metric: 'errorCount',
-              aggregation: MetricAggregationType.Sum,
-              'display-name': 'Error Count'
-            },
-            {
-              type: 'metric-aggregation',
-              metric: 'numCalls',
-              aggregation: MetricAggregationType.AvgrateSecond,
-              'display-name': 'Call Rate/sec'
+            secondary: {
+              specification: {
+                type: 'error-percentage-metric-aggregation',
+                aggregation: MetricAggregationType.Average,
+                'display-name': 'Error %'
+              }
             },
-            {
-              type: 'metric-aggregation',
-              metric: 'numCalls',
-              aggregation: MetricAggregationType.Sum,
-              'display-name': 'Call Count'
-            }
-          ]
+            others: [
+              {
+                specification: {
+                  type: 'metric-aggregation',
+                  metric: 'duration',
+                  aggregation: MetricAggregationType.P50,
+                  'display-name': 'P50 Latency'
+                }
+              },
+              {
+                specification: {
+                  type: 'metric-aggregation',
+                  metric: 'errorCount',
+                  aggregation: MetricAggregationType.Sum,
+                  'display-name': 'Error Count'
+                }
+              },
+              {
+                specification: {
+                  type: 'metric-aggregation',
+                  metric: 'numCalls',
+                  aggregation: MetricAggregationType.AvgrateSecond,
+                  'display-name': 'Call Rate/sec'
+                }
+              },
+              {
+                specification: {
+                  type: 'metric-aggregation',
+                  metric: 'numCalls',
+                  aggregation: MetricAggregationType.Sum,
+                  'display-name': 'Call Count'
+                }
+              }
+            ]
+          }
         }
       }
     ]

projects/observability/src/shared/dashboard/data/graphql/topology/topology-data-source.model.ts

@@ -1,7 +1,8 @@
+import { Dictionary } from '@hypertrace/common';
 import { ArrayPropertyTypeInstance, EnumPropertyTypeInstance, ENUM_TYPE } from '@hypertrace/dashboards';
 import { GraphQlDataSourceModel, SpecificationBuilder } from '@hypertrace/distributed-tracing';
 import { GraphQlRequestCacheability, GraphQlRequestOptions } from '@hypertrace/graphql-client';
-import { ARRAY_PROPERTY, Model, ModelProperty, ModelPropertyType } from '@hypertrace/hyperdash';
+import { ARRAY_PROPERTY, Model, ModelProperty, PLAIN_OBJECT_PROPERTY } from '@hypertrace/hyperdash';
 import { uniq } from 'lodash-es';
 import { Observable } from 'rxjs';
 import { map } from 'rxjs/operators';
@@ -14,7 +15,7 @@ import {
   TopologyEdgeSpecification,
   TopologyNodeSpecification
 } from '../../../../graphql/request/handlers/entities/query/topology/entity-topology-graphql-query-handler.service';
-import { EntityMetricAggregationDataSourceModel } from '../entity/aggregation/entity-metric-aggregation-data-source.model';
+import { MetricData } from '../../../widgets/topology/metric/metric';
 
 @Model({
   type: 'topology-data-source'
@@ -59,29 +60,15 @@ export class TopologyDataSourceModel extends GraphQlDataSourceModel<TopologyData
 
   @ModelProperty({
     key: 'node-metrics',
-    // tslint:disable-next-line: no-object-literal-type-assertion
-    type: {
-      key: ARRAY_PROPERTY.type,
-      subtype: {
-        key: ModelPropertyType.TYPE,
-        defaultModelClass: EntityMetricAggregationDataSourceModel
-      }
-    } as ArrayPropertyTypeInstance
+    type: PLAIN_OBJECT_PROPERTY.type
   })
-  public nodeMetricSpecifications: MetricAggregationSpecification[] = [];
+  public nodeMetrics!: MetricData;
 
   @ModelProperty({
     key: 'edge-metrics',
-    // tslint:disable-next-line: no-object-literal-type-assertion
-    type: {
-      key: ARRAY_PROPERTY.type,
-      subtype: {
-        key: ModelPropertyType.TYPE,
-        defaultModelClass: EntityMetricAggregationDataSourceModel
-      }
-    } as ArrayPropertyTypeInstance
+    type: PLAIN_OBJECT_PROPERTY.type
   })
-  public edgeMetricSpecifications: MetricAggregationSpecification[] = [];
+  public edgeMetrics!: MetricData;
 
   private readonly specBuilder: SpecificationBuilder = new SpecificationBuilder();
   private readonly requestOptions: GraphQlRequestOptions = {
@@ -91,7 +78,7 @@ export class TopologyDataSourceModel extends GraphQlDataSourceModel<TopologyData
   public getData(): Observable<TopologyData> {
     const rootEntitySpec = this.buildEntitySpec();
     const edgeSpec = {
-      metricSpecifications: this.edgeMetricSpecifications
+      metricSpecifications: this.getAllMetricSpecifications(this.edgeMetrics)
     };
 
     return this.query<EntityTopologyGraphQlQueryHandlerService>(
@@ -116,7 +103,11 @@ export class TopologyDataSourceModel extends GraphQlDataSourceModel<TopologyData
           this.entityType,
           ...this.defaultedEntityTypeArray(this.upstreamEntityTypes),
           ...this.defaultedEntityTypeArray(this.downstreamEntityTypes)
-        ])
+        ]),
+        modelProperties: {
+          nodeMetrics: this.nodeMetrics,
+          edgeMetrics: this.edgeMetrics
+        }
       }))
     );
   }
@@ -134,7 +125,7 @@ export class TopologyDataSourceModel extends GraphQlDataSourceModel<TopologyData
   private buildEntitySpec(): TopologyNodeSpecification {
     // TODO support different specs for different node types
     return {
-      metricSpecifications: this.nodeMetricSpecifications,
+      metricSpecifications: this.getAllMetricSpecifications(this.nodeMetrics),
       titleSpecification: this.specBuilder.attributeSpecificationForKey('name')
     };
   }
@@ -144,11 +135,20 @@ export class TopologyDataSourceModel extends GraphQlDataSourceModel<TopologyData
   ): ObservabilityEntityType[] {
     return typeArray;
   }
+
+  private getAllMetricSpecifications(metrics: MetricData): MetricAggregationSpecification[] {
+    return [
+      metrics.primary.specification,
+      ...(metrics.secondary ? [metrics.secondary.specification] : []),
+      ...(metrics.others ? metrics.others.map(_ => _.specification) : [])
+    ];
+  }
 }
 
 export interface TopologyData {
   nodes: EntityNode[];
   nodeTypes: ObservabilityEntityType[];
   nodeSpecification: TopologyNodeSpecification;
   edgeSpecification: TopologyEdgeSpecification;
+  modelProperties: Dictionary<unknown>;
 }

projects/observability/src/shared/dashboard/widgets/topology/edge/curved/entity-edge-curve-renderer.scss

@@ -18,7 +18,7 @@
       stroke-width: 2;
       stroke-linecap: round;
       stroke-linejoin: round;
-      stroke: currentColor;
+      stroke: $gray-3;
       fill: none;
 
       @include chart-small-regular;
@@ -34,7 +34,6 @@
       .edge-path {
         stroke-dasharray: 2, 2;
         stroke-width: 1px;
-        stroke: $gray-3;
       }
 
       &.background {
@@ -50,7 +49,6 @@
       &.focused {
         .entity-edge-metric-bubble {
           @include show;
-          fill: currentColor;
         }
 
         .entity-edge-metric-value {
@@ -65,71 +63,13 @@
         .edge-path {
           stroke-dasharray: none;
           stroke-width: 1.5px;
-          stroke: currentColor;
-        }
-
-        &.less-than-20-category {
-          color: $blue-gray-1;
-        }
-
-        &.from-20-to-100-category {
-          color: $blue-gray-2;
-        }
-
-        &.from-100-to-500-category {
-          color: $blue-gray-3;
-        }
-
-        &.from-500-to-1000-category {
-          color: $blue-gray-4;
-        }
-
-        &.greater-than-or-equal-to-1000-category {
-          color: $blue-gray-5;
-        }
-
-        &.not-specified-category {
-          color: lightgray;
-        }
-
-        &.greater-than-or-equal-to-5-error-category {
-          color: $red-5;
         }
       }
     }
 
     .entity-edge-arrow {
       stroke-linecap: round;
       stroke-linejoin: round;
-      fill: currentColor;
-
-      &.less-than-20-category {
-        color: $blue-gray-1;
-      }
-
-      &.from-20-to-100-category {
-        color: $blue-gray-2;
-      }
-
-      &.from-100-to-500-category {
-        color: $blue-gray-3;
-      }
-
-      &.from-500-to-1000-category {
-        color: $blue-gray-4;
-      }
-
-      &.greater-than-or-equal-to-1000-category {
-        color: $blue-gray-5;
-      }
-
-      &.not-specified-category {
-        color: lightgray;
-      }
-
-      &.greater-than-or-equal-to-5-error-category {
-        color: $red-5;
-      }
     }
   }
 }