feat: i-frame component created

projects/observability/package.json

@@ -5,6 +5,7 @@
     "@angular/common": "^12.2.1",
     "@angular/core": "^12.2.1",
     "@angular/material": "^12.2.1",
+    "@angular/platform-browser": "^12.2.1",
     "@angular/cdk": "^12.2.1",
     "lodash-es": "^4.17.15",
     "@angular/router": "^12.2.1",

projects/observability/src/public-api.ts

@@ -388,3 +388,7 @@ export * from './shared/components/bar-gauge/bar-gauge.module';
 
 // Time Range utils
 export * from './shared/utils/time-range';
+
+// I-frame
+export * from './shared/components//iframe/iframe.component';
+export * from './shared/components/iframe/iframe.module';

projects/observability/src/shared/components/iframe/iframe.component.spec.ts

@@ -0,0 +1,17 @@
+import { createComponentFactory, Spectator } from '@ngneat/spectator/jest';
+
+import { IFrameComponent } from './iframe.component';
+
+describe('IFrame  Component', () => {
+  let spectator: Spectator<IFrameComponent>;
+
+  const createComponent = createComponentFactory<IFrameComponent>({
+    component: IFrameComponent,
+    shallow: true
+  });
+
+  test('should render the iframe', () => {
+    spectator = createComponent();
+    expect(spectator.query('iframe')).toExist();
+  });
+});

projects/observability/src/shared/components/iframe/iframe.component.ts

@@ -0,0 +1,20 @@
+import { ChangeDetectionStrategy, Component, Input, OnInit } from '@angular/core';
+import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser';
+
+@Component({
+  selector: 'ht-iframe',
+  template: `<iframe width="100%" height="100%" frameBorder="0" [src]="urlSafe"></iframe>`,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  styleUrls: ['./iframe.component.scss']
+})
+export class IFrameComponent implements OnInit {
+  @Input() public source: string = '';
+  @Input() public title?: string;
+
+  public urlSafe?: SafeResourceUrl;
+  public constructor(public sanitizer: DomSanitizer) {}
+
+  public ngOnInit(): void {
+    this.urlSafe = this.sanitizer.bypassSecurityTrustResourceUrl(this.source);
+  }
+}

projects/observability/src/shared/components/iframe/iframe.module.ts

@@ -0,0 +1,10 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { IFrameComponent } from './iframe.component';
+
+@NgModule({
+  declarations: [IFrameComponent],
+  imports: [CommonModule],
+  exports: [IFrameComponent]
+})
+export class IFrameModule {}

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

@@ -0,0 +1,19 @@
+import { mockDashboardWidgetProviders } from '@hypertrace/dashboards/testing';
+import { createComponentFactory, Spectator } from '@ngneat/spectator/jest';
+
+import { IframeWidgetRendererComponent } from './iframe-widget-renderer.component';
+
+describe('IFrame Widget Renderer Component', () => {
+  let spectator: Spectator<IframeWidgetRendererComponent>;
+
+  const createComponent = createComponentFactory<IframeWidgetRendererComponent>({
+    component: IframeWidgetRendererComponent,
+    providers: [...mockDashboardWidgetProviders({})],
+    shallow: true
+  });
+
+  test('should use iframe component', () => {
+    spectator = createComponent();
+    expect(spectator.query('ht-iframe')).toExist();
+  });
+});

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

@@ -0,0 +1,19 @@
+import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
+import { WidgetRenderer } from '@hypertrace/dashboards';
+import { Renderer } from '@hypertrace/hyperdash';
+import { Observable, of } from 'rxjs';
+
+import { IFrameWidgetModel } from './iframe-widget.model';
+
+@Renderer({ modelClass: IFrameWidgetModel })
+@Component({
+  selector: 'ht-iframe-widget-renderer',
+  template: ` <ht-iframe [source]="this.model.source" [title]="this.model.title"></ht-iframe> `,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  styleUrls: ['./iframe-widget-renderer.component.scss']
+})
+export class IframeWidgetRendererComponent extends WidgetRenderer<IFrameWidgetModel> implements OnInit {
+  protected fetchData(): Observable<unknown> {
+    return of();
+  }
+}

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

@@ -0,0 +1,18 @@
+import { Model, ModelProperty, STRING_PROPERTY } from '@hypertrace/hyperdash';
+
+@Model({
+  type: 'iframe-widget'
+})
+export class IFrameWidgetModel {
+  @ModelProperty({
+    key: 'title',
+    type: STRING_PROPERTY.type
+  })
+  public title: string = '';
+
+  @ModelProperty({
+    key: 'source',
+    type: STRING_PROPERTY.type
+  })
+  public source: string = '';
+}

projects/observability/src/shared/dashboard/widgets/iframe-widget/iframe-widget.module.ts

@@ -0,0 +1,20 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { DashboardCoreModule } from '@hypertrace/hyperdash-angular';
+import { IFrameModule } from '../../../components/iframe/iframe.module';
+import { IframeWidgetRendererComponent } from './iframe-widget-renderer.component';
+import { IFrameWidgetModel } from './iframe-widget.model';
+
+@NgModule({
+  declarations: [IframeWidgetRendererComponent],
+  imports: [
+    CommonModule,
+    IFrameModule,
+
+    DashboardCoreModule.with({
+      models: [IFrameWidgetModel],
+      renderers: [IframeWidgetRendererComponent]
+    })
+  ]
+})
+export class IframeWidgetModule {}

projects/observability/src/shared/dashboard/widgets/observability-dashboard-widgets.module.ts

@@ -3,6 +3,7 @@ import { ObservabilityTableCellRendererModule } from '../../components/table/obs
 import { CartesianWidgetModule } from './charts/cartesian-widget/cartesian-widget.module';
 import { DonutWidgetModule } from './donut/donut-widget.module';
 import { GaugeWidgetModule } from './gauge/gauge-widget.module';
+import { IframeWidgetModule } from './iframe-widget/iframe-widget.module';
 import { MetricDisplayWidgetModule } from './metric-display/metric-display-widget.module';
 import { RadarWidgetModule } from './radar/radar-widget.module';
 import { TopNWidgetModule } from './top-n/top-n-widget.module';
@@ -17,7 +18,8 @@ import { TopologyWidgetModule } from './topology/topology-widget.module';
     ObservabilityTableCellRendererModule,
     DonutWidgetModule,
     CartesianWidgetModule,
-    GaugeWidgetModule
+    GaugeWidgetModule,
+    IframeWidgetModule
   ]
 })
 export class ObservabilityDashboardWidgetsModule {}