From 6debde77ba8a8166bff99c61deb072fdc90feb34 Mon Sep 17 00:00:00 2001 From: Jyothish Jose Date: Sun, 13 Feb 2022 23:15:14 +0530 Subject: [PATCH 1/8] feat: iframe widget created --- projects/observability/src/public-api.ts | 4 +++ .../components/iframe/iframe.component.scss | 0 .../iframe/iframe.component.spec.ts | 24 +++++++++++++++ .../components/iframe/iframe.component.ts | 21 +++++++++++++ .../shared/components/iframe/iframe.module.ts | 10 +++++++ .../iframe-widget-renderer.component.scss | 0 .../iframe-widget-renderer.component.spec.ts | 24 +++++++++++++++ .../iframe-widget-renderer.component.ts | 19 ++++++++++++ .../iframe-widget/iframe-widget.model.ts | 30 +++++++++++++++++++ .../iframe-widget/iframe-widget.module.ts | 20 +++++++++++++ .../observability-dashboard-widgets.module.ts | 4 ++- 11 files changed, 155 insertions(+), 1 deletion(-) create mode 100644 projects/observability/src/shared/components/iframe/iframe.component.scss create mode 100644 projects/observability/src/shared/components/iframe/iframe.component.spec.ts create mode 100644 projects/observability/src/shared/components/iframe/iframe.component.ts create mode 100644 projects/observability/src/shared/components/iframe/iframe.module.ts create mode 100644 projects/observability/src/shared/dashboard/widgets/iframe-widget/iframe-widget-renderer.component.scss create mode 100644 projects/observability/src/shared/dashboard/widgets/iframe-widget/iframe-widget-renderer.component.spec.ts create mode 100644 projects/observability/src/shared/dashboard/widgets/iframe-widget/iframe-widget-renderer.component.ts create mode 100644 projects/observability/src/shared/dashboard/widgets/iframe-widget/iframe-widget.model.ts create mode 100644 projects/observability/src/shared/dashboard/widgets/iframe-widget/iframe-widget.module.ts diff --git a/projects/observability/src/public-api.ts b/projects/observability/src/public-api.ts index 634484dbb..53537de31 100644 --- a/projects/observability/src/public-api.ts +++ b/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'; diff --git a/projects/observability/src/shared/components/iframe/iframe.component.scss b/projects/observability/src/shared/components/iframe/iframe.component.scss new file mode 100644 index 000000000..e69de29bb diff --git a/projects/observability/src/shared/components/iframe/iframe.component.spec.ts b/projects/observability/src/shared/components/iframe/iframe.component.spec.ts new file mode 100644 index 000000000..5d4df3955 --- /dev/null +++ b/projects/observability/src/shared/components/iframe/iframe.component.spec.ts @@ -0,0 +1,24 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { IFrameComponent } from './iframe.component'; + +describe('IFrameComponent', () => { + let component: IFrameComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [IFrameComponent] + }).compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(IFrameComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/projects/observability/src/shared/components/iframe/iframe.component.ts b/projects/observability/src/shared/components/iframe/iframe.component.ts new file mode 100644 index 000000000..ba1ba6781 --- /dev/null +++ b/projects/observability/src/shared/components/iframe/iframe.component.ts @@ -0,0 +1,21 @@ +import { ChangeDetectionStrategy, Component, Input, OnInit } from '@angular/core'; +import { SafeResourceUrl, DomSanitizer } from '@angular/platform-browser'; + +@Component({ + selector: 'ht-iframe', + template: ``, + changeDetection: ChangeDetectionStrategy.OnPush, + styleUrls: ['./iframe.component.scss'] +}) +export class IFrameComponent implements OnInit { + @Input() public source: string = ''; + @Input() public title?: string; + @Input() public allow?: boolean; + + public urlSafe?: SafeResourceUrl; + public constructor(public sanitizer: DomSanitizer) {} + + public ngOnInit(): void { + this.urlSafe = this.sanitizer.bypassSecurityTrustResourceUrl(this.source); + } +} diff --git a/projects/observability/src/shared/components/iframe/iframe.module.ts b/projects/observability/src/shared/components/iframe/iframe.module.ts new file mode 100644 index 000000000..0119f8307 --- /dev/null +++ b/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 {} diff --git a/projects/observability/src/shared/dashboard/widgets/iframe-widget/iframe-widget-renderer.component.scss b/projects/observability/src/shared/dashboard/widgets/iframe-widget/iframe-widget-renderer.component.scss new file mode 100644 index 000000000..e69de29bb diff --git a/projects/observability/src/shared/dashboard/widgets/iframe-widget/iframe-widget-renderer.component.spec.ts b/projects/observability/src/shared/dashboard/widgets/iframe-widget/iframe-widget-renderer.component.spec.ts new file mode 100644 index 000000000..1f83b20b3 --- /dev/null +++ b/projects/observability/src/shared/dashboard/widgets/iframe-widget/iframe-widget-renderer.component.spec.ts @@ -0,0 +1,24 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { IframeWidgetRendererComponent } from './iframe-widget-renderer.component'; + +describe('IframeWidgetRendererComponent', () => { + let component: IframeWidgetRendererComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [IframeWidgetRendererComponent] + }).compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(IframeWidgetRendererComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/projects/observability/src/shared/dashboard/widgets/iframe-widget/iframe-widget-renderer.component.ts b/projects/observability/src/shared/dashboard/widgets/iframe-widget/iframe-widget-renderer.component.ts new file mode 100644 index 000000000..6a5f4c668 --- /dev/null +++ b/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 } from 'rxjs'; + +import { IFrameWidgetModel } from './iframe-widget.model'; + +@Renderer({ modelClass: IFrameWidgetModel }) +@Component({ + selector: 'ht-iframe-widget-renderer', + template: ` `, + changeDetection: ChangeDetectionStrategy.OnPush, + styleUrls: ['./iframe-widget-renderer.component.scss'] +}) +export class IframeWidgetRendererComponent extends WidgetRenderer implements OnInit { + protected fetchData(): Observable { + throw new Error('Method not implemented.'); + } +} diff --git a/projects/observability/src/shared/dashboard/widgets/iframe-widget/iframe-widget.model.ts b/projects/observability/src/shared/dashboard/widgets/iframe-widget/iframe-widget.model.ts new file mode 100644 index 000000000..e239b703f --- /dev/null +++ b/projects/observability/src/shared/dashboard/widgets/iframe-widget/iframe-widget.model.ts @@ -0,0 +1,30 @@ +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: 'height', + type: STRING_PROPERTY.type + }) + public height: string = ''; + + @ModelProperty({ + key: 'width', + type: STRING_PROPERTY.type + }) + public width: string = ''; + + @ModelProperty({ + key: 'source', + type: STRING_PROPERTY.type + }) + public source: string = ''; +} diff --git a/projects/observability/src/shared/dashboard/widgets/iframe-widget/iframe-widget.module.ts b/projects/observability/src/shared/dashboard/widgets/iframe-widget/iframe-widget.module.ts new file mode 100644 index 000000000..86bfd197c --- /dev/null +++ b/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 {} diff --git a/projects/observability/src/shared/dashboard/widgets/observability-dashboard-widgets.module.ts b/projects/observability/src/shared/dashboard/widgets/observability-dashboard-widgets.module.ts index de02fabe5..59f990294 100644 --- a/projects/observability/src/shared/dashboard/widgets/observability-dashboard-widgets.module.ts +++ b/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 {} From 93b23ab9d4d35eedc56977575de7e83f1856853d Mon Sep 17 00:00:00 2001 From: Jyothish Jose Date: Mon, 14 Feb 2022 00:23:47 +0530 Subject: [PATCH 2/8] feat: iframe widget - updated test cases --- .../iframe/iframe.component.spec.ts | 25 +++++++---------- .../components/iframe/iframe.component.ts | 1 - .../iframe-widget-renderer.component.spec.ts | 27 ++++++++----------- .../iframe-widget-renderer.component.ts | 6 ++--- .../iframe-widget/iframe-widget.model.ts | 12 --------- 5 files changed, 23 insertions(+), 48 deletions(-) diff --git a/projects/observability/src/shared/components/iframe/iframe.component.spec.ts b/projects/observability/src/shared/components/iframe/iframe.component.spec.ts index 5d4df3955..58f36074b 100644 --- a/projects/observability/src/shared/components/iframe/iframe.component.spec.ts +++ b/projects/observability/src/shared/components/iframe/iframe.component.spec.ts @@ -1,24 +1,17 @@ -import { ComponentFixture, TestBed } from '@angular/core/testing'; +import { createComponentFactory, Spectator } from '@ngneat/spectator'; import { IFrameComponent } from './iframe.component'; -describe('IFrameComponent', () => { - let component: IFrameComponent; - let fixture: ComponentFixture; +describe('IFrame Component', () => { + let spectator: Spectator; - beforeEach(async () => { - await TestBed.configureTestingModule({ - declarations: [IFrameComponent] - }).compileComponents(); + const createComponent = createComponentFactory({ + component: IFrameComponent, + shallow: true }); - beforeEach(() => { - fixture = TestBed.createComponent(IFrameComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); - - it('should create', () => { - expect(component).toBeTruthy(); + test('should render the iframe', () => { + spectator = createComponent(); + expect(spectator.query('iframe')).toExist(); }); }); diff --git a/projects/observability/src/shared/components/iframe/iframe.component.ts b/projects/observability/src/shared/components/iframe/iframe.component.ts index ba1ba6781..2c66a66eb 100644 --- a/projects/observability/src/shared/components/iframe/iframe.component.ts +++ b/projects/observability/src/shared/components/iframe/iframe.component.ts @@ -10,7 +10,6 @@ import { SafeResourceUrl, DomSanitizer } from '@angular/platform-browser'; export class IFrameComponent implements OnInit { @Input() public source: string = ''; @Input() public title?: string; - @Input() public allow?: boolean; public urlSafe?: SafeResourceUrl; public constructor(public sanitizer: DomSanitizer) {} diff --git a/projects/observability/src/shared/dashboard/widgets/iframe-widget/iframe-widget-renderer.component.spec.ts b/projects/observability/src/shared/dashboard/widgets/iframe-widget/iframe-widget-renderer.component.spec.ts index 1f83b20b3..e63a6d9ee 100644 --- a/projects/observability/src/shared/dashboard/widgets/iframe-widget/iframe-widget-renderer.component.spec.ts +++ b/projects/observability/src/shared/dashboard/widgets/iframe-widget/iframe-widget-renderer.component.spec.ts @@ -1,24 +1,19 @@ -import { ComponentFixture, TestBed } from '@angular/core/testing'; +import { createComponentFactory, Spectator } from '@ngneat/spectator'; +import { mockDashboardWidgetProviders } from '../../../../../../dashboards/src/test/dashboard-verification'; import { IframeWidgetRendererComponent } from './iframe-widget-renderer.component'; -describe('IframeWidgetRendererComponent', () => { - let component: IframeWidgetRendererComponent; - let fixture: ComponentFixture; +describe('IFrame Widget Renderer Component', () => { + let spectator: Spectator; - beforeEach(async () => { - await TestBed.configureTestingModule({ - declarations: [IframeWidgetRendererComponent] - }).compileComponents(); + const createComponent = createComponentFactory({ + component: IframeWidgetRendererComponent, + providers: [...mockDashboardWidgetProviders({})], + shallow: true }); - beforeEach(() => { - fixture = TestBed.createComponent(IframeWidgetRendererComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); - - it('should create', () => { - expect(component).toBeTruthy(); + test('should use iframe component', () => { + spectator = createComponent(); + expect(spectator.query('ht-iframe')).toExist(); }); }); diff --git a/projects/observability/src/shared/dashboard/widgets/iframe-widget/iframe-widget-renderer.component.ts b/projects/observability/src/shared/dashboard/widgets/iframe-widget/iframe-widget-renderer.component.ts index 6a5f4c668..4d40bf258 100644 --- a/projects/observability/src/shared/dashboard/widgets/iframe-widget/iframe-widget-renderer.component.ts +++ b/projects/observability/src/shared/dashboard/widgets/iframe-widget/iframe-widget-renderer.component.ts @@ -1,19 +1,19 @@ import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core'; import { WidgetRenderer } from '@hypertrace/dashboards'; import { Renderer } from '@hypertrace/hyperdash'; -import { Observable } from 'rxjs'; +import { Observable, of } from 'rxjs'; import { IFrameWidgetModel } from './iframe-widget.model'; @Renderer({ modelClass: IFrameWidgetModel }) @Component({ selector: 'ht-iframe-widget-renderer', - template: ` `, + template: ` `, changeDetection: ChangeDetectionStrategy.OnPush, styleUrls: ['./iframe-widget-renderer.component.scss'] }) export class IframeWidgetRendererComponent extends WidgetRenderer implements OnInit { protected fetchData(): Observable { - throw new Error('Method not implemented.'); + return of(); } } diff --git a/projects/observability/src/shared/dashboard/widgets/iframe-widget/iframe-widget.model.ts b/projects/observability/src/shared/dashboard/widgets/iframe-widget/iframe-widget.model.ts index e239b703f..a3dddd555 100644 --- a/projects/observability/src/shared/dashboard/widgets/iframe-widget/iframe-widget.model.ts +++ b/projects/observability/src/shared/dashboard/widgets/iframe-widget/iframe-widget.model.ts @@ -10,18 +10,6 @@ export class IFrameWidgetModel { }) public title: string = ''; - @ModelProperty({ - key: 'height', - type: STRING_PROPERTY.type - }) - public height: string = ''; - - @ModelProperty({ - key: 'width', - type: STRING_PROPERTY.type - }) - public width: string = ''; - @ModelProperty({ key: 'source', type: STRING_PROPERTY.type From 3acba52f4dc40298c9b9ccef896958c26ca6308c Mon Sep 17 00:00:00 2001 From: Jyothish Jose Date: Mon, 14 Feb 2022 00:43:40 +0530 Subject: [PATCH 3/8] feat: iframe widget - lint errors fixed --- .../src/shared/components/iframe/iframe.component.spec.ts | 2 +- .../src/shared/components/iframe/iframe.component.ts | 2 +- .../iframe-widget/iframe-widget-renderer.component.spec.ts | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/projects/observability/src/shared/components/iframe/iframe.component.spec.ts b/projects/observability/src/shared/components/iframe/iframe.component.spec.ts index 58f36074b..17dbd6b34 100644 --- a/projects/observability/src/shared/components/iframe/iframe.component.spec.ts +++ b/projects/observability/src/shared/components/iframe/iframe.component.spec.ts @@ -1,4 +1,4 @@ -import { createComponentFactory, Spectator } from '@ngneat/spectator'; +import { createComponentFactory, Spectator } from '@ngneat/spectator/jest'; import { IFrameComponent } from './iframe.component'; diff --git a/projects/observability/src/shared/components/iframe/iframe.component.ts b/projects/observability/src/shared/components/iframe/iframe.component.ts index 2c66a66eb..8c84a0c96 100644 --- a/projects/observability/src/shared/components/iframe/iframe.component.ts +++ b/projects/observability/src/shared/components/iframe/iframe.component.ts @@ -1,5 +1,5 @@ import { ChangeDetectionStrategy, Component, Input, OnInit } from '@angular/core'; -import { SafeResourceUrl, DomSanitizer } from '@angular/platform-browser'; +import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser'; @Component({ selector: 'ht-iframe', diff --git a/projects/observability/src/shared/dashboard/widgets/iframe-widget/iframe-widget-renderer.component.spec.ts b/projects/observability/src/shared/dashboard/widgets/iframe-widget/iframe-widget-renderer.component.spec.ts index e63a6d9ee..a9484a2a0 100644 --- a/projects/observability/src/shared/dashboard/widgets/iframe-widget/iframe-widget-renderer.component.spec.ts +++ b/projects/observability/src/shared/dashboard/widgets/iframe-widget/iframe-widget-renderer.component.spec.ts @@ -1,5 +1,5 @@ +import { mockDashboardWidgetProviders } from '@hypertrace/dashboards/testing'; import { createComponentFactory, Spectator } from '@ngneat/spectator'; -import { mockDashboardWidgetProviders } from '../../../../../../dashboards/src/test/dashboard-verification'; import { IframeWidgetRendererComponent } from './iframe-widget-renderer.component'; From 90e9b281fc21e39191c8100de6b392eba084a8c3 Mon Sep 17 00:00:00 2001 From: Jyothish Jose Date: Mon, 14 Feb 2022 01:38:50 +0530 Subject: [PATCH 4/8] feat: iframe widget - lint errors fixed --- projects/observability/package.json | 1 + .../iframe-widget/iframe-widget-renderer.component.spec.ts | 2 +- 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/projects/observability/package.json b/projects/observability/package.json index dc2cc45e7..bb4849810 100644 --- a/projects/observability/package.json +++ b/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", diff --git a/projects/observability/src/shared/dashboard/widgets/iframe-widget/iframe-widget-renderer.component.spec.ts b/projects/observability/src/shared/dashboard/widgets/iframe-widget/iframe-widget-renderer.component.spec.ts index a9484a2a0..84425b494 100644 --- a/projects/observability/src/shared/dashboard/widgets/iframe-widget/iframe-widget-renderer.component.spec.ts +++ b/projects/observability/src/shared/dashboard/widgets/iframe-widget/iframe-widget-renderer.component.spec.ts @@ -1,5 +1,5 @@ import { mockDashboardWidgetProviders } from '@hypertrace/dashboards/testing'; -import { createComponentFactory, Spectator } from '@ngneat/spectator'; +import { createComponentFactory, Spectator } from '@ngneat/spectator/jest'; import { IframeWidgetRendererComponent } from './iframe-widget-renderer.component'; From 82d1d9ca5dee7edad663b67901faa7895e8963e8 Mon Sep 17 00:00:00 2001 From: Jyothish Jose Date: Tue, 15 Feb 2022 12:16:56 +0530 Subject: [PATCH 5/8] feat: iframe widget - comments --- projects/observability/src/public-api.ts | 4 ---- .../components/iframe/iframe.component.scss | 0 .../iframe/iframe.component.spec.ts | 17 ---------------- .../components/iframe/iframe.component.ts | 20 ------------------- .../shared/components/iframe/iframe.module.ts | 10 ---------- .../iframe-widget-renderer.component.scss | 0 .../iframe-widget-renderer.component.spec.ts | 0 .../iframe-widget-renderer.component.ts | 10 +++++----- .../iframe-widget.model.ts | 0 .../iframe-widget.module.ts | 2 -- .../observability-dashboard-widgets.module.ts | 2 +- 11 files changed, 6 insertions(+), 59 deletions(-) delete mode 100644 projects/observability/src/shared/components/iframe/iframe.component.scss delete mode 100644 projects/observability/src/shared/components/iframe/iframe.component.spec.ts delete mode 100644 projects/observability/src/shared/components/iframe/iframe.component.ts delete mode 100644 projects/observability/src/shared/components/iframe/iframe.module.ts rename projects/observability/src/shared/dashboard/widgets/{iframe-widget => iframe}/iframe-widget-renderer.component.scss (100%) rename projects/observability/src/shared/dashboard/widgets/{iframe-widget => iframe}/iframe-widget-renderer.component.spec.ts (100%) rename projects/observability/src/shared/dashboard/widgets/{iframe-widget => iframe}/iframe-widget-renderer.component.ts (64%) rename projects/observability/src/shared/dashboard/widgets/{iframe-widget => iframe}/iframe-widget.model.ts (100%) rename projects/observability/src/shared/dashboard/widgets/{iframe-widget => iframe}/iframe-widget.module.ts (86%) diff --git a/projects/observability/src/public-api.ts b/projects/observability/src/public-api.ts index 53537de31..634484dbb 100644 --- a/projects/observability/src/public-api.ts +++ b/projects/observability/src/public-api.ts @@ -388,7 +388,3 @@ 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'; diff --git a/projects/observability/src/shared/components/iframe/iframe.component.scss b/projects/observability/src/shared/components/iframe/iframe.component.scss deleted file mode 100644 index e69de29bb..000000000 diff --git a/projects/observability/src/shared/components/iframe/iframe.component.spec.ts b/projects/observability/src/shared/components/iframe/iframe.component.spec.ts deleted file mode 100644 index 17dbd6b34..000000000 --- a/projects/observability/src/shared/components/iframe/iframe.component.spec.ts +++ /dev/null @@ -1,17 +0,0 @@ -import { createComponentFactory, Spectator } from '@ngneat/spectator/jest'; - -import { IFrameComponent } from './iframe.component'; - -describe('IFrame Component', () => { - let spectator: Spectator; - - const createComponent = createComponentFactory({ - component: IFrameComponent, - shallow: true - }); - - test('should render the iframe', () => { - spectator = createComponent(); - expect(spectator.query('iframe')).toExist(); - }); -}); diff --git a/projects/observability/src/shared/components/iframe/iframe.component.ts b/projects/observability/src/shared/components/iframe/iframe.component.ts deleted file mode 100644 index 8c84a0c96..000000000 --- a/projects/observability/src/shared/components/iframe/iframe.component.ts +++ /dev/null @@ -1,20 +0,0 @@ -import { ChangeDetectionStrategy, Component, Input, OnInit } from '@angular/core'; -import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser'; - -@Component({ - selector: 'ht-iframe', - template: ``, - 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); - } -} diff --git a/projects/observability/src/shared/components/iframe/iframe.module.ts b/projects/observability/src/shared/components/iframe/iframe.module.ts deleted file mode 100644 index 0119f8307..000000000 --- a/projects/observability/src/shared/components/iframe/iframe.module.ts +++ /dev/null @@ -1,10 +0,0 @@ -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 {} diff --git a/projects/observability/src/shared/dashboard/widgets/iframe-widget/iframe-widget-renderer.component.scss b/projects/observability/src/shared/dashboard/widgets/iframe/iframe-widget-renderer.component.scss similarity index 100% rename from projects/observability/src/shared/dashboard/widgets/iframe-widget/iframe-widget-renderer.component.scss rename to projects/observability/src/shared/dashboard/widgets/iframe/iframe-widget-renderer.component.scss diff --git a/projects/observability/src/shared/dashboard/widgets/iframe-widget/iframe-widget-renderer.component.spec.ts b/projects/observability/src/shared/dashboard/widgets/iframe/iframe-widget-renderer.component.spec.ts similarity index 100% rename from projects/observability/src/shared/dashboard/widgets/iframe-widget/iframe-widget-renderer.component.spec.ts rename to projects/observability/src/shared/dashboard/widgets/iframe/iframe-widget-renderer.component.spec.ts diff --git a/projects/observability/src/shared/dashboard/widgets/iframe-widget/iframe-widget-renderer.component.ts b/projects/observability/src/shared/dashboard/widgets/iframe/iframe-widget-renderer.component.ts similarity index 64% rename from projects/observability/src/shared/dashboard/widgets/iframe-widget/iframe-widget-renderer.component.ts rename to projects/observability/src/shared/dashboard/widgets/iframe/iframe-widget-renderer.component.ts index 4d40bf258..9a35d7373 100644 --- a/projects/observability/src/shared/dashboard/widgets/iframe-widget/iframe-widget-renderer.component.ts +++ b/projects/observability/src/shared/dashboard/widgets/iframe/iframe-widget-renderer.component.ts @@ -1,19 +1,19 @@ -import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core'; +import { ChangeDetectionStrategy, Component } from '@angular/core'; import { WidgetRenderer } from '@hypertrace/dashboards'; import { Renderer } from '@hypertrace/hyperdash'; -import { Observable, of } from 'rxjs'; +import { EMPTY, Observable } from 'rxjs'; import { IFrameWidgetModel } from './iframe-widget.model'; @Renderer({ modelClass: IFrameWidgetModel }) @Component({ selector: 'ht-iframe-widget-renderer', - template: ` `, + template: ` `, changeDetection: ChangeDetectionStrategy.OnPush, styleUrls: ['./iframe-widget-renderer.component.scss'] }) -export class IframeWidgetRendererComponent extends WidgetRenderer implements OnInit { +export class IframeWidgetRendererComponent extends WidgetRenderer { protected fetchData(): Observable { - return of(); + return EMPTY; } } diff --git a/projects/observability/src/shared/dashboard/widgets/iframe-widget/iframe-widget.model.ts b/projects/observability/src/shared/dashboard/widgets/iframe/iframe-widget.model.ts similarity index 100% rename from projects/observability/src/shared/dashboard/widgets/iframe-widget/iframe-widget.model.ts rename to projects/observability/src/shared/dashboard/widgets/iframe/iframe-widget.model.ts diff --git a/projects/observability/src/shared/dashboard/widgets/iframe-widget/iframe-widget.module.ts b/projects/observability/src/shared/dashboard/widgets/iframe/iframe-widget.module.ts similarity index 86% rename from projects/observability/src/shared/dashboard/widgets/iframe-widget/iframe-widget.module.ts rename to projects/observability/src/shared/dashboard/widgets/iframe/iframe-widget.module.ts index 86bfd197c..cf22cacf7 100644 --- a/projects/observability/src/shared/dashboard/widgets/iframe-widget/iframe-widget.module.ts +++ b/projects/observability/src/shared/dashboard/widgets/iframe/iframe-widget.module.ts @@ -1,7 +1,6 @@ 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'; @@ -9,7 +8,6 @@ import { IFrameWidgetModel } from './iframe-widget.model'; declarations: [IframeWidgetRendererComponent], imports: [ CommonModule, - IFrameModule, DashboardCoreModule.with({ models: [IFrameWidgetModel], diff --git a/projects/observability/src/shared/dashboard/widgets/observability-dashboard-widgets.module.ts b/projects/observability/src/shared/dashboard/widgets/observability-dashboard-widgets.module.ts index 59f990294..8644dd6d7 100644 --- a/projects/observability/src/shared/dashboard/widgets/observability-dashboard-widgets.module.ts +++ b/projects/observability/src/shared/dashboard/widgets/observability-dashboard-widgets.module.ts @@ -3,7 +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 { 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'; From d4065b3a23a45e73880ae2d50f370f4253c3b85e Mon Sep 17 00:00:00 2001 From: Jyothish Jose Date: Tue, 15 Feb 2022 12:52:09 +0530 Subject: [PATCH 6/8] feat: iframe widget - lint errors fixed --- .../iframe-widget-renderer.component.ts | 20 ++++++++++++++++--- 1 file changed, 17 insertions(+), 3 deletions(-) diff --git a/projects/observability/src/shared/dashboard/widgets/iframe/iframe-widget-renderer.component.ts b/projects/observability/src/shared/dashboard/widgets/iframe/iframe-widget-renderer.component.ts index 9a35d7373..907197dbf 100644 --- a/projects/observability/src/shared/dashboard/widgets/iframe/iframe-widget-renderer.component.ts +++ b/projects/observability/src/shared/dashboard/widgets/iframe/iframe-widget-renderer.component.ts @@ -1,6 +1,8 @@ -import { ChangeDetectionStrategy, Component } from '@angular/core'; +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'; @@ -8,11 +10,23 @@ import { IFrameWidgetModel } from './iframe-widget.model'; @Renderer({ modelClass: IFrameWidgetModel }) @Component({ selector: 'ht-iframe-widget-renderer', - template: ` `, + template: ` `, changeDetection: ChangeDetectionStrategy.OnPush, styleUrls: ['./iframe-widget-renderer.component.scss'] }) -export class IframeWidgetRendererComponent extends WidgetRenderer { +export class IframeWidgetRendererComponent extends WidgetRenderer implements OnInit { + public urlSafe?: SafeResourceUrl; + + public constructor( + public sanitizer: DomSanitizer, + @Inject(RENDERER_API) api: RendererApi, + changeDetector: ChangeDetectorRef + ) { + super(api, changeDetector); + } + public ngOnInit(): void { + this.urlSafe = this.sanitizer.bypassSecurityTrustResourceUrl(this.model.source); + } protected fetchData(): Observable { return EMPTY; } From 5fd5453966a462ecd1d893cae67cbf5f59de927d Mon Sep 17 00:00:00 2001 From: Jyothish Jose Date: Tue, 15 Feb 2022 13:08:33 +0530 Subject: [PATCH 7/8] feat: iframe widget - lint errors fixed --- .../widgets/iframe/iframe-widget-renderer.component.spec.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/projects/observability/src/shared/dashboard/widgets/iframe/iframe-widget-renderer.component.spec.ts b/projects/observability/src/shared/dashboard/widgets/iframe/iframe-widget-renderer.component.spec.ts index 84425b494..67481f69d 100644 --- a/projects/observability/src/shared/dashboard/widgets/iframe/iframe-widget-renderer.component.spec.ts +++ b/projects/observability/src/shared/dashboard/widgets/iframe/iframe-widget-renderer.component.spec.ts @@ -14,6 +14,6 @@ describe('IFrame Widget Renderer Component', () => { test('should use iframe component', () => { spectator = createComponent(); - expect(spectator.query('ht-iframe')).toExist(); + expect(spectator.query('iframe')).toExist(); }); }); From 1f212c697c615d956b4304ac27ce63fc82bdbb80 Mon Sep 17 00:00:00 2001 From: Jyothish Jose Date: Tue, 15 Feb 2022 21:31:18 +0530 Subject: [PATCH 8/8] feat: iframe widget - comments --- .../widgets/iframe/iframe-widget-renderer.component.spec.ts | 2 +- .../shared/dashboard/widgets/iframe/iframe-widget.model.ts | 6 ------ 2 files changed, 1 insertion(+), 7 deletions(-) diff --git a/projects/observability/src/shared/dashboard/widgets/iframe/iframe-widget-renderer.component.spec.ts b/projects/observability/src/shared/dashboard/widgets/iframe/iframe-widget-renderer.component.spec.ts index 67481f69d..aa3127f55 100644 --- a/projects/observability/src/shared/dashboard/widgets/iframe/iframe-widget-renderer.component.spec.ts +++ b/projects/observability/src/shared/dashboard/widgets/iframe/iframe-widget-renderer.component.spec.ts @@ -12,7 +12,7 @@ describe('IFrame Widget Renderer Component', () => { shallow: true }); - test('should use iframe component', () => { + test('should use iframe', () => { spectator = createComponent(); expect(spectator.query('iframe')).toExist(); }); diff --git a/projects/observability/src/shared/dashboard/widgets/iframe/iframe-widget.model.ts b/projects/observability/src/shared/dashboard/widgets/iframe/iframe-widget.model.ts index a3dddd555..9da1f8cdb 100644 --- a/projects/observability/src/shared/dashboard/widgets/iframe/iframe-widget.model.ts +++ b/projects/observability/src/shared/dashboard/widgets/iframe/iframe-widget.model.ts @@ -4,12 +4,6 @@ import { Model, ModelProperty, STRING_PROPERTY } from '@hypertrace/hyperdash'; type: 'iframe-widget' }) export class IFrameWidgetModel { - @ModelProperty({ - key: 'title', - type: STRING_PROPERTY.type - }) - public title: string = ''; - @ModelProperty({ key: 'source', type: STRING_PROPERTY.type