feat: custom style for topology (#945)

Author: itssharmasandeep

projects/observability/src/shared/components/topology/d3/interactions/topology-interaction-control.component.scss

@@ -1,5 +1,6 @@
 @import 'color-palette';
 @import 'font';
+@import 'layout';
 
 .topology-control {
   border-radius: 6px;
@@ -21,7 +22,7 @@
   flex-direction: row;
   align-items: center;
   position: relative;
-  bottom: 24px;
+  bottom: 20px;
 }
 
 button {
@@ -38,7 +39,7 @@ button {
   align-items: center;
 
   .zoom-percentage {
-    @include body-1-medium($gray-7);
+    @include body-2-medium($gray-7);
     width: 60px;
     text-align: center;
     color: $gray-7;
@@ -60,6 +61,7 @@ button {
 }
 
 .topology-button {
-  height: 36px;
-  width: 36px;
+  @include center-contents();
+  height: 24px;
+  width: 24px;
 }

projects/observability/src/shared/components/topology/d3/interactions/topology-interaction-control.component.ts

@@ -73,7 +73,7 @@ export class TopologyInteractionControlComponent implements OnInit {
   public currentZoomPercentage: string = '100';
   public canIncrement: boolean = true;
   public canDecrement: boolean = true;
-  public readonly iconSize: IconSize = IconSize.Medium;
+  public readonly iconSize: IconSize = IconSize.Small;
   public readonly edgeDataSpecifiers: TopologyDataSpecifier[];
   public readonly nodeDataSpecifiers: TopologyDataSpecifier[];
   public get selectedEdgeDataSpecifier(): TopologyDataSpecifier | undefined {

projects/observability/src/shared/dashboard/widgets/topology/topology-widget-renderer.component.scss

@@ -1,6 +1,20 @@
 @import 'color-palette';
 @import 'font';
 
+.topology-container {
+  width: 100%;
+  height: 100%;
+
+  &.box-style {
+    height: calc(100% - 8px);
+    border-radius: 10px;
+    box-shadow: 0px 1px 3px rgba(63, 71, 74, 0.16), 0px 2px 2px rgba(63, 71, 74, 0.12),
+      0px 0px 2px rgba(63, 71, 74, 0.16);
+    margin-top: 4px;
+    padding: 0px 8px;
+  }
+}
+
 .visualization {
   width: 100%;
   height: 100%;

projects/observability/src/shared/dashboard/widgets/topology/topology-widget-renderer.component.ts

@@ -33,38 +33,40 @@ import { TopologyWidgetModel } from './topology-widget.model';
   providers: [TopologyNodeRendererService, TopologyEdgeRendererService, TopologyTooltipRendererService],
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: `
-    <ht-titled-content [title]="this.model.title | htDisplayTitle">
-      <div class="visualization" *htLoadAsync="this.data$ as data">
-        <div *ngIf="this.model.showLegend" class="legend">
-          <div class="latency">
-            <div class="label">P99 Latency:</div>
-            <div class="entry" *ngFor="let entry of this.getLatencyLegendConfig()">
-              <div [ngClass]="entry.categoryClass" class="symbol"></div>
-              <span class="label">{{ entry.label }}</span>
+    <div class="topology-container" [ngClass]="{ 'box-style': this.model.enableBoxStyle }">
+      <ht-titled-content [title]="this.model.title | htDisplayTitle">
+        <div class="visualization" *htLoadAsync="this.data$ as data">
+          <div *ngIf="this.model.showLegend" class="legend">
+            <div class="latency">
+              <div class="label">P99 Latency:</div>
+              <div class="entry" *ngFor="let entry of this.getLatencyLegendConfig()">
+                <div [ngClass]="entry.categoryClass" class="symbol"></div>
+                <span class="label">{{ entry.label }}</span>
+              </div>
             </div>
-          </div>
-          <div class="error-percentage">
-            <div class="label">Errors:</div>
-            <div class="entry" *ngFor="let entry of this.getErrorPercentageLegendConfig()">
-              <div [ngClass]="entry.categoryClass" class="symbol"></div>
-              <span class="label">{{ entry.label }}</span>
+            <div class="error-percentage">
+              <div class="label">Errors:</div>
+              <div class="entry" *ngFor="let entry of this.getErrorPercentageLegendConfig()">
+                <div [ngClass]="entry.categoryClass" class="symbol"></div>
+                <span class="label">{{ entry.label }}</span>
+              </div>
             </div>
           </div>
+          <ht-topology
+            class="topology"
+            [nodes]="data.nodes"
+            [nodeRenderer]="this.nodeRenderer"
+            [edgeRenderer]="this.edgeRenderer"
+            [tooltipRenderer]="this.tooltipRenderer"
+            [nodeDataSpecifiers]="data.nodeSpecs"
+            [edgeDataSpecifiers]="data.edgeSpecs"
+            [showBrush]="this.model.showBrush"
+            [shouldAutoZoomToFit]="this.model.shouldAutoZoomToFit"
+          >
+          </ht-topology>
         </div>
-        <ht-topology
-          class="topology"
-          [nodes]="data.nodes"
-          [nodeRenderer]="this.nodeRenderer"
-          [edgeRenderer]="this.edgeRenderer"
-          [tooltipRenderer]="this.tooltipRenderer"
-          [nodeDataSpecifiers]="data.nodeSpecs"
-          [edgeDataSpecifiers]="data.edgeSpecs"
-          [showBrush]="this.model.showBrush"
-          [shouldAutoZoomToFit]="this.model.shouldAutoZoomToFit"
-        >
-        </ht-topology>
-      </div>
-    </ht-titled-content>
+      </ht-titled-content>
+    </div>
   `
 })
 export class TopologyWidgetRendererComponent extends WidgetRenderer<TopologyWidgetModel, TopologyTemplateData> {

projects/observability/src/shared/dashboard/widgets/topology/topology-widget.model.ts

@@ -40,6 +40,14 @@ export class TopologyWidgetModel {
   })
   public shouldAutoZoomToFit?: boolean = false;
 
+  @ModelProperty({
+    key: 'enableBoxStyle',
+    displayName: 'Enable Box Style',
+    type: BOOLEAN_PROPERTY.type,
+    required: false
+  })
+  public enableBoxStyle?: boolean = false;
+
   @ModelInject(MODEL_API)
   private readonly api!: ModelApi;