From b04e387f82a8f5a219ed384214e5df18ae47ee43 Mon Sep 17 00:00:00 2001 From: Sandeep Kumar Sharma Date: Fri, 18 Jun 2021 16:29:06 +0530 Subject: [PATCH 1/3] feat: custom configurations for topology --- .../components/topology/d3/d3-topology.ts | 2 +- .../topology-interaction-control.component.ts | 10 +++++-- .../components/topology/topology.component.ts | 10 ++++++- .../shared/components/topology/topology.ts | 10 +++++++ .../topology-widget-renderer.component.ts | 4 ++- .../widgets/topology/topology-widget.model.ts | 26 ++++++++++++++++++- 6 files changed, 56 insertions(+), 6 deletions(-) diff --git a/projects/observability/src/shared/components/topology/d3/d3-topology.ts b/projects/observability/src/shared/components/topology/d3/d3-topology.ts index 2b5a18c0a..f6821ca61 100644 --- a/projects/observability/src/shared/components/topology/d3/d3-topology.ts +++ b/projects/observability/src/shared/components/topology/d3/d3-topology.ts @@ -182,7 +182,7 @@ export class D3Topology implements Topology { target: data, scroll: this.config.zoomable ? zoomScrollConfig : undefined, pan: this.config.zoomable ? zoomPanConfig : undefined, - showBrush: true + showBrush: this.config.showBrush }); this.onDestroy(() => { diff --git a/projects/observability/src/shared/components/topology/d3/interactions/topology-interaction-control.component.ts b/projects/observability/src/shared/components/topology/d3/interactions/topology-interaction-control.component.ts index 6831eb7c0..8ea86893b 100644 --- a/projects/observability/src/shared/components/topology/d3/interactions/topology-interaction-control.component.ts +++ b/projects/observability/src/shared/components/topology/d3/interactions/topology-interaction-control.component.ts @@ -1,4 +1,4 @@ -import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Inject, InjectionToken } from '@angular/core'; +import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Inject, InjectionToken, OnInit } from '@angular/core'; import { IconType } from '@hypertrace/assets-library'; import { SubscriptionLifecycle, throwIfNil } from '@hypertrace/common'; @@ -69,7 +69,7 @@ export const TOPOLOGY_INTERACTION_CONTROL_DATA = new InjectionToken ` }) -export class TopologyInteractionControlComponent { +export class TopologyInteractionControlComponent implements OnInit { public currentZoomPercentage: string = '100'; public canIncrement: boolean = true; public canDecrement: boolean = true; @@ -111,6 +111,12 @@ export class TopologyInteractionControlComponent { this.nodeDataSpecifiers = interactionControlData.topologyConfig.nodeDataSpecifiers; } + public ngOnInit(): void { + if (this.interactionControlData.topologyConfig.autoZoomToFit) { + this.zoomToFit(); + } + } + // TODO should make the increments logarithmic public incrementZoom(): void { this.getZoomOrThrow().setZoomScale(this.getZoomOrThrow().getZoomScale() + 0.1); diff --git a/projects/observability/src/shared/components/topology/topology.component.ts b/projects/observability/src/shared/components/topology/topology.component.ts index a839a3852..acf4fc923 100644 --- a/projects/observability/src/shared/components/topology/topology.component.ts +++ b/projects/observability/src/shared/components/topology/topology.component.ts @@ -43,6 +43,12 @@ export class TopologyComponent implements OnChanges, OnDestroy { @Input() public edgeDataSpecifiers?: TopologyDataSpecifier[]; + @Input() + public showBrush?: boolean = true; + + @Input() + public autoZoomToFit?: boolean = false; + @ViewChild('topologyContainer', { static: true }) private readonly container!: ElementRef; @@ -65,7 +71,9 @@ export class TopologyComponent implements OnChanges, OnDestroy { edgeRenderer: this.edgeRenderer, nodeDataSpecifiers: this.nodeDataSpecifiers, edgeDataSpecifiers: this.edgeDataSpecifiers, - tooltipRenderer: this.tooltipRenderer + tooltipRenderer: this.tooltipRenderer, + showBrush: this.showBrush, + autoZoomToFit: this.autoZoomToFit }); // Angular doesn't like introducing new child views mid-change detection diff --git a/projects/observability/src/shared/components/topology/topology.ts b/projects/observability/src/shared/components/topology/topology.ts index 2c9558f1d..152526d94 100644 --- a/projects/observability/src/shared/components/topology/topology.ts +++ b/projects/observability/src/shared/components/topology/topology.ts @@ -44,6 +44,16 @@ export interface TopologyConfiguration { */ zoomable: boolean; + /** + * If true, brush will be shown + */ + showBrush?: boolean; + + /** + * If true, it will be automatic zoom to fit + */ + autoZoomToFit?: boolean; + /** * A list of specifiers for node data. Up to one will be selectable to the user, * and provided to the node renderer. diff --git a/projects/observability/src/shared/dashboard/widgets/topology/topology-widget-renderer.component.ts b/projects/observability/src/shared/dashboard/widgets/topology/topology-widget-renderer.component.ts index 8b4757eef..36a8a9db0 100644 --- a/projects/observability/src/shared/dashboard/widgets/topology/topology-widget-renderer.component.ts +++ b/projects/observability/src/shared/dashboard/widgets/topology/topology-widget-renderer.component.ts @@ -35,7 +35,7 @@ import { TopologyWidgetModel } from './topology-widget.model'; template: `
-
+
P99 Latency:
@@ -59,6 +59,8 @@ import { TopologyWidgetModel } from './topology-widget.model'; [tooltipRenderer]="this.tooltipRenderer" [nodeDataSpecifiers]="data.nodeSpecs" [edgeDataSpecifiers]="data.edgeSpecs" + [showBrush]="this.model.showBrush" + [autoZoomToFit]="this.model.autoZoomToFit" >
diff --git a/projects/observability/src/shared/dashboard/widgets/topology/topology-widget.model.ts b/projects/observability/src/shared/dashboard/widgets/topology/topology-widget.model.ts index d2309c1b4..44435cf9a 100644 --- a/projects/observability/src/shared/dashboard/widgets/topology/topology-widget.model.ts +++ b/projects/observability/src/shared/dashboard/widgets/topology/topology-widget.model.ts @@ -1,4 +1,4 @@ -import { Model, ModelApi, ModelProperty, STRING_PROPERTY } from '@hypertrace/hyperdash'; +import { BOOLEAN_PROPERTY, Model, ModelApi, ModelProperty, STRING_PROPERTY } from '@hypertrace/hyperdash'; import { ModelInject, MODEL_API } from '@hypertrace/hyperdash-angular'; import { Observable } from 'rxjs'; import { TopologyData, TopologyDataSourceModel } from '../../data/graphql/topology/topology-data-source.model'; @@ -16,6 +16,30 @@ export class TopologyWidgetModel { }) public title?: string; + @ModelProperty({ + key: 'showLegend', + displayName: 'Show Legend', + type: BOOLEAN_PROPERTY.type, + required: false + }) + public showLegend?: boolean = true; + + @ModelProperty({ + key: 'showBrush', + displayName: 'Show Brush', + type: BOOLEAN_PROPERTY.type, + required: false + }) + public showBrush?: boolean = true; + + @ModelProperty({ + key: 'autoZoomToFit', + displayName: 'Auto Zoom To Fit', + type: BOOLEAN_PROPERTY.type, + required: false + }) + public autoZoomToFit?: boolean = false; + @ModelInject(MODEL_API) private readonly api!: ModelApi; From 8d31364390eb86d72f9393d436a09b020ea98189 Mon Sep 17 00:00:00 2001 From: Sandeep Kumar Sharma Date: Fri, 18 Jun 2021 17:40:46 +0530 Subject: [PATCH 2/3] fix: test cases --- .../topology/topology-widget-renderer.component.test.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/projects/observability/src/shared/dashboard/widgets/topology/topology-widget-renderer.component.test.ts b/projects/observability/src/shared/dashboard/widgets/topology/topology-widget-renderer.component.test.ts index 42eb6bf19..a475b3a7f 100644 --- a/projects/observability/src/shared/dashboard/widgets/topology/topology-widget-renderer.component.test.ts +++ b/projects/observability/src/shared/dashboard/widgets/topology/topology-widget-renderer.component.test.ts @@ -83,7 +83,8 @@ describe('Topology Widget renderer', () => { edgeSpecification: edgeSpec, nodeTypes: uniq(mockResponse.map(node => node.data[entityTypeKey])) }) - ) + ), + showLegend: true }; const createComponent = createComponentFactory({ From 07c544b0b75db7ad4fbe48347524b90397e20c34 Mon Sep 17 00:00:00 2001 From: Sandeep Kumar Sharma Date: Fri, 18 Jun 2021 17:59:49 +0530 Subject: [PATCH 3/3] fix: addressing review comments --- .../interactions/topology-interaction-control.component.ts | 2 +- .../src/shared/components/topology/topology.component.ts | 4 ++-- .../src/shared/components/topology/topology.ts | 2 +- .../widgets/topology/topology-widget-renderer.component.ts | 2 +- .../dashboard/widgets/topology/topology-widget.model.ts | 6 +++--- 5 files changed, 8 insertions(+), 8 deletions(-) diff --git a/projects/observability/src/shared/components/topology/d3/interactions/topology-interaction-control.component.ts b/projects/observability/src/shared/components/topology/d3/interactions/topology-interaction-control.component.ts index 8ea86893b..8f7c90e7e 100644 --- a/projects/observability/src/shared/components/topology/d3/interactions/topology-interaction-control.component.ts +++ b/projects/observability/src/shared/components/topology/d3/interactions/topology-interaction-control.component.ts @@ -112,7 +112,7 @@ export class TopologyInteractionControlComponent implements OnInit { } public ngOnInit(): void { - if (this.interactionControlData.topologyConfig.autoZoomToFit) { + if (this.interactionControlData.topologyConfig.shouldAutoZoomToFit) { this.zoomToFit(); } } diff --git a/projects/observability/src/shared/components/topology/topology.component.ts b/projects/observability/src/shared/components/topology/topology.component.ts index acf4fc923..748324a3b 100644 --- a/projects/observability/src/shared/components/topology/topology.component.ts +++ b/projects/observability/src/shared/components/topology/topology.component.ts @@ -47,7 +47,7 @@ export class TopologyComponent implements OnChanges, OnDestroy { public showBrush?: boolean = true; @Input() - public autoZoomToFit?: boolean = false; + public shouldAutoZoomToFit?: boolean = false; @ViewChild('topologyContainer', { static: true }) private readonly container!: ElementRef; @@ -73,7 +73,7 @@ export class TopologyComponent implements OnChanges, OnDestroy { edgeDataSpecifiers: this.edgeDataSpecifiers, tooltipRenderer: this.tooltipRenderer, showBrush: this.showBrush, - autoZoomToFit: this.autoZoomToFit + shouldAutoZoomToFit: this.shouldAutoZoomToFit }); // Angular doesn't like introducing new child views mid-change detection diff --git a/projects/observability/src/shared/components/topology/topology.ts b/projects/observability/src/shared/components/topology/topology.ts index 152526d94..9aa74464e 100644 --- a/projects/observability/src/shared/components/topology/topology.ts +++ b/projects/observability/src/shared/components/topology/topology.ts @@ -52,7 +52,7 @@ export interface TopologyConfiguration { /** * If true, it will be automatic zoom to fit */ - autoZoomToFit?: boolean; + shouldAutoZoomToFit?: boolean; /** * A list of specifiers for node data. Up to one will be selectable to the user, diff --git a/projects/observability/src/shared/dashboard/widgets/topology/topology-widget-renderer.component.ts b/projects/observability/src/shared/dashboard/widgets/topology/topology-widget-renderer.component.ts index 36a8a9db0..0dc778555 100644 --- a/projects/observability/src/shared/dashboard/widgets/topology/topology-widget-renderer.component.ts +++ b/projects/observability/src/shared/dashboard/widgets/topology/topology-widget-renderer.component.ts @@ -60,7 +60,7 @@ import { TopologyWidgetModel } from './topology-widget.model'; [nodeDataSpecifiers]="data.nodeSpecs" [edgeDataSpecifiers]="data.edgeSpecs" [showBrush]="this.model.showBrush" - [autoZoomToFit]="this.model.autoZoomToFit" + [shouldAutoZoomToFit]="this.model.shouldAutoZoomToFit" >
diff --git a/projects/observability/src/shared/dashboard/widgets/topology/topology-widget.model.ts b/projects/observability/src/shared/dashboard/widgets/topology/topology-widget.model.ts index 44435cf9a..0162ff0c4 100644 --- a/projects/observability/src/shared/dashboard/widgets/topology/topology-widget.model.ts +++ b/projects/observability/src/shared/dashboard/widgets/topology/topology-widget.model.ts @@ -33,12 +33,12 @@ export class TopologyWidgetModel { public showBrush?: boolean = true; @ModelProperty({ - key: 'autoZoomToFit', - displayName: 'Auto Zoom To Fit', + key: 'shouldAutoZoomToFit', + displayName: 'Should Auto Zoom To Fit', type: BOOLEAN_PROPERTY.type, required: false }) - public autoZoomToFit?: boolean = false; + public shouldAutoZoomToFit?: boolean = false; @ModelInject(MODEL_API) private readonly api!: ModelApi;