feat: i-frame component created (#1408)

* feat: iframe widget created

* feat: iframe widget - updated test cases

* feat: iframe widget - lint errors fixed

* feat: iframe widget - lint errors fixed

* feat: iframe widget - comments

* feat: iframe widget - lint errors fixed

* feat: iframe widget - lint errors fixed

* feat: iframe widget - comments

Author: jyothishjose6190

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/shared/dashboard/widgets/iframe/iframe-widget-renderer.component.scss

@@ -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', () => {
+    spectator = createComponent();
+    expect(spectator.query('iframe')).toExist();
+  });
+});

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

@@ -0,0 +1,33 @@
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Inject, OnInit } from '@angular/core';
+import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser';
+import { WidgetRenderer } from '@hypertrace/dashboards';
+import { Renderer } from '@hypertrace/hyperdash';
+import { RendererApi, RENDERER_API } from '@hypertrace/hyperdash-angular';
+import { EMPTY, Observable } from 'rxjs';
+
+import { IFrameWidgetModel } from './iframe-widget.model';
+
+@Renderer({ modelClass: IFrameWidgetModel })
+@Component({
+  selector: 'ht-iframe-widget-renderer',
+  template: ` <iframe width="100%" height="100%" frameBorder="0" [src]="urlSafe"></iframe> `,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  styleUrls: ['./iframe-widget-renderer.component.scss']
+})
+export class IframeWidgetRendererComponent extends WidgetRenderer<IFrameWidgetModel> implements OnInit {
+  public urlSafe?: SafeResourceUrl;
+
+  public constructor(
+    public sanitizer: DomSanitizer,
+    @Inject(RENDERER_API) api: RendererApi<IFrameWidgetModel>,
+    changeDetector: ChangeDetectorRef
+  ) {
+    super(api, changeDetector);
+  }
+  public ngOnInit(): void {
+    this.urlSafe = this.sanitizer.bypassSecurityTrustResourceUrl(this.model.source);
+  }
+  protected fetchData(): Observable<unknown> {
+    return EMPTY;
+  }
+}

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

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

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

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

projects/observability/src/shared/dashboard/widgets/iframe/iframe-widget.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/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 {}