From 7fd2b1f9bb6298fb4620ac1243ceaab012d930e5 Mon Sep 17 00:00:00 2001 From: Jake Bassett Date: Wed, 11 Nov 2020 10:27:06 -0800 Subject: [PATCH 1/4] feat: conditional container widget --- .../conditional-container-widget.model.ts | 61 +++++++++++++++++++ .../container-widget-renderer.component.ts | 12 ++-- .../container/container-widget.model.ts | 5 ++ .../container/container-widget.module.ts | 2 + ...conditional-container-data-source.model.ts | 6 ++ .../graphql/table/table-data-source.model.ts | 2 +- 6 files changed, 83 insertions(+), 5 deletions(-) create mode 100644 projects/dashboards/src/widgets/container/conditional-container-widget.model.ts create mode 100644 projects/distributed-tracing/src/shared/dashboard/data/graphql/conditional-container/conditional-container-data-source.model.ts diff --git a/projects/dashboards/src/widgets/container/conditional-container-widget.model.ts b/projects/dashboards/src/widgets/container/conditional-container-widget.model.ts new file mode 100644 index 000000000..c9fc91ccc --- /dev/null +++ b/projects/dashboards/src/widgets/container/conditional-container-widget.model.ts @@ -0,0 +1,61 @@ +import { + ARRAY_PROPERTY, + Model, + ModelApi, + ModelModelPropertyTypeInstance, + ModelProperty, + ModelPropertyType, + STRING_PROPERTY +} from '@hypertrace/hyperdash'; +import { ModelInject, MODEL_API } from '@hypertrace/hyperdash-angular'; +import { Observable } from 'rxjs'; +import { map } from 'rxjs/operators'; +import { AutoContainerLayoutModel } from './layout/auto/auto-container-layout.model'; +import { ContainerLayout } from './layout/container-layout'; + +@Model({ + type: 'conditional-container-widget' +}) +export class ConditionalContainerWidgetModel { + @ModelProperty({ + key: 'title', + type: STRING_PROPERTY.type, + required: false + }) + public title?: string; + + @ModelProperty({ + key: 'layout', + // tslint:disable-next-line: no-object-literal-type-assertion + type: { + key: ModelPropertyType.TYPE, + defaultModelClass: AutoContainerLayoutModel + } as ModelModelPropertyTypeInstance + }) + public layout!: ContainerLayout; + + @ModelProperty({ + key: 'trueChildren', + type: ARRAY_PROPERTY.type, + required: true + }) + public trueChildren: object[] = []; + + @ModelProperty({ + key: 'falseChildren', + type: ARRAY_PROPERTY.type, + required: true + }) + public falseChildren: object[] = []; + + @ModelInject(MODEL_API) + private readonly api!: ModelApi; + + public getData(): Observable { + return this.api.getData(); + } + + public getChildren(): Observable { + return this.getData().pipe(map(result => (result ? this.trueChildren : this.falseChildren))); + } +} diff --git a/projects/dashboards/src/widgets/container/container-widget-renderer.component.ts b/projects/dashboards/src/widgets/container/container-widget-renderer.component.ts index 884e2ad8d..ca3ccb738 100644 --- a/projects/dashboards/src/widgets/container/container-widget-renderer.component.ts +++ b/projects/dashboards/src/widgets/container/container-widget-renderer.component.ts @@ -1,7 +1,9 @@ import { AfterViewInit, ChangeDetectionStrategy, Component, ViewChild, ViewContainerRef } from '@angular/core'; import { Renderer } from '@hypertrace/hyperdash'; -import { Observable, of } from 'rxjs'; +import { Observable } from 'rxjs'; +import { takeUntil } from 'rxjs/operators'; import { WidgetRenderer } from '../widget-renderer'; +import { ConditionalContainerWidgetModel } from './conditional-container-widget.model'; import { ContainerWidgetModel } from './container-widget.model'; @Renderer({ modelClass: ContainerWidgetModel }) @@ -18,15 +20,17 @@ import { ContainerWidgetModel } from './container-widget.model'; ` }) -export class ContainerWidgetRendererComponent extends WidgetRenderer implements AfterViewInit { +export class ContainerWidgetRendererComponent + extends WidgetRenderer + implements AfterViewInit { @ViewChild('containerContent', { read: ViewContainerRef, static: true }) public container!: ViewContainerRef; public ngAfterViewInit(): void { - this.model.layout.draw(this.container, this.model.children); + this.fetchData().subscribe(children => this.model.layout.draw(this.container, children)); } protected fetchData(): Observable { - return of(this.model.children); + return this.model.getChildren().pipe(takeUntil(this.destroyed$)); } } diff --git a/projects/dashboards/src/widgets/container/container-widget.model.ts b/projects/dashboards/src/widgets/container/container-widget.model.ts index a42807deb..ba2162cba 100644 --- a/projects/dashboards/src/widgets/container/container-widget.model.ts +++ b/projects/dashboards/src/widgets/container/container-widget.model.ts @@ -6,6 +6,7 @@ import { ModelPropertyType, STRING_PROPERTY } from '@hypertrace/hyperdash'; +import { Observable, of } from 'rxjs'; import { AutoContainerLayoutModel } from './layout/auto/auto-container-layout.model'; import { ContainerLayout } from './layout/container-layout'; @@ -35,4 +36,8 @@ export class ContainerWidgetModel { key: 'layout' }) public layout!: ContainerLayout; + + public getChildren(): Observable { + return of(this.children); + } } diff --git a/projects/dashboards/src/widgets/container/container-widget.module.ts b/projects/dashboards/src/widgets/container/container-widget.module.ts index aefadd5ab..627f083e8 100644 --- a/projects/dashboards/src/widgets/container/container-widget.module.ts +++ b/projects/dashboards/src/widgets/container/container-widget.module.ts @@ -4,6 +4,7 @@ import { FlexLayoutModule } from '@angular/flex-layout'; import { FormattingModule } from '@hypertrace/common'; import { LabelModule, TitledContentModule } from '@hypertrace/components'; import { DashboardCoreModule } from '@hypertrace/hyperdash-angular'; +import { ConditionalContainerWidgetModel } from './conditional-container-widget.model'; import { ContainerWidgetRendererComponent } from './container-widget-renderer.component'; import { ContainerWidgetModel } from './container-widget.model'; import { AutoContainerLayoutModel } from './layout/auto/auto-container-layout.model'; @@ -18,6 +19,7 @@ import { DimensionModel } from './layout/custom/dimension/dimension.model'; CommonModule, DashboardCoreModule.with({ models: [ + ConditionalContainerWidgetModel, ContainerWidgetModel, AutoContainerLayoutModel, CustomContainerLayoutModel, diff --git a/projects/distributed-tracing/src/shared/dashboard/data/graphql/conditional-container/conditional-container-data-source.model.ts b/projects/distributed-tracing/src/shared/dashboard/data/graphql/conditional-container/conditional-container-data-source.model.ts new file mode 100644 index 000000000..dc74d96ec --- /dev/null +++ b/projects/distributed-tracing/src/shared/dashboard/data/graphql/conditional-container/conditional-container-data-source.model.ts @@ -0,0 +1,6 @@ +import { Observable } from 'rxjs'; +import { GraphQlDataSourceModel } from '../graphql-data-source.model'; + +export abstract class ConditionalContainerDataSourceModel extends GraphQlDataSourceModel { + public abstract getData(): Observable; +} diff --git a/projects/distributed-tracing/src/shared/dashboard/data/graphql/table/table-data-source.model.ts b/projects/distributed-tracing/src/shared/dashboard/data/graphql/table/table-data-source.model.ts index dfdee494b..82d75b676 100644 --- a/projects/distributed-tracing/src/shared/dashboard/data/graphql/table/table-data-source.model.ts +++ b/projects/distributed-tracing/src/shared/dashboard/data/graphql/table/table-data-source.model.ts @@ -3,8 +3,8 @@ import { GraphQlArgumentValue } from '@hypertrace/graphql-client'; import { ModelProperty, NUMBER_PROPERTY } from '@hypertrace/hyperdash'; import { Observable, of as observableOf } from 'rxjs'; import { map } from 'rxjs/operators'; -import { GraphQlFilter } from '../../../../../shared/graphql/model/schema/filter/graphql-filter'; import { GraphQlFieldFilter } from '../../../../graphql/model/schema/filter/field/graphql-field-filter'; +import { GraphQlFilter } from '../../../../graphql/model/schema/filter/graphql-filter'; import { toGraphQlOperator } from '../../../../services/filter-builder/graphql-filter-builder.service'; import { SpecificationBackedTableColumnDef } from '../../../widgets/table/table-widget-column.model'; import { GraphQlDataSourceModel } from '../graphql-data-source.model'; From 7b328582212aaf6b1c3846217555f79561423418 Mon Sep 17 00:00:00 2001 From: Jake Bassett Date: Wed, 11 Nov 2020 17:18:47 -0800 Subject: [PATCH 2/4] feat: conditional widget --- ...conditional-widget-renderer.component.scss | 6 ++ .../conditional-widget-renderer.component.ts | 30 +++++++++ .../conditional/conditional-widget.module.ts | 17 ++++++ .../widgets/conditional/conditional.model.ts | 34 +++++++++++ .../conditional-container-widget.model.ts | 61 ------------------- .../container-widget-renderer.component.ts | 12 ++-- .../container/container-widget.model.ts | 5 -- .../container/container-widget.module.ts | 2 - .../src/widgets/dashboard-widgets.module.ts | 4 +- .../conditional-data-source.model.ts} | 2 +- 10 files changed, 95 insertions(+), 78 deletions(-) create mode 100644 projects/dashboards/src/widgets/conditional/conditional-widget-renderer.component.scss create mode 100644 projects/dashboards/src/widgets/conditional/conditional-widget-renderer.component.ts create mode 100644 projects/dashboards/src/widgets/conditional/conditional-widget.module.ts create mode 100644 projects/dashboards/src/widgets/conditional/conditional.model.ts delete mode 100644 projects/dashboards/src/widgets/container/conditional-container-widget.model.ts rename projects/distributed-tracing/src/shared/dashboard/data/graphql/{conditional-container/conditional-container-data-source.model.ts => conditional/conditional-data-source.model.ts} (61%) diff --git a/projects/dashboards/src/widgets/conditional/conditional-widget-renderer.component.scss b/projects/dashboards/src/widgets/conditional/conditional-widget-renderer.component.scss new file mode 100644 index 000000000..f9e046995 --- /dev/null +++ b/projects/dashboards/src/widgets/conditional/conditional-widget-renderer.component.scss @@ -0,0 +1,6 @@ +@import 'mixins'; + +.conditional-widget { + width: 100%; + height: 100%; +} diff --git a/projects/dashboards/src/widgets/conditional/conditional-widget-renderer.component.ts b/projects/dashboards/src/widgets/conditional/conditional-widget-renderer.component.ts new file mode 100644 index 000000000..b1a6495e0 --- /dev/null +++ b/projects/dashboards/src/widgets/conditional/conditional-widget-renderer.component.ts @@ -0,0 +1,30 @@ +import { ChangeDetectionStrategy, Component, ViewChild, ViewContainerRef } from '@angular/core'; +import { ModelJson, Renderer } from '@hypertrace/hyperdash'; +import { Observable } from 'rxjs'; +import { takeUntil } from 'rxjs/operators'; +import { WidgetRenderer } from '../widget-renderer'; +import { ConditionalModel } from './conditional.model'; + +@Renderer({ modelClass: ConditionalModel }) +@Component({ + selector: 'ht-conditional-widget', + styleUrls: ['./conditional-widget-renderer.component.scss'], + changeDetection: ChangeDetectionStrategy.OnPush, + template: ` +
+ +
+ ` +}) +export class ConditionalWidgetRendererComponent extends WidgetRenderer { + @ViewChild('containerContent', { read: ViewContainerRef, static: true }) + public container!: ViewContainerRef; + + public getModel(): Observable { + return this.model.getModel().pipe(takeUntil(this.destroyed$)); + } + + protected fetchData(): Observable { + return this.getModel(); + } +} diff --git a/projects/dashboards/src/widgets/conditional/conditional-widget.module.ts b/projects/dashboards/src/widgets/conditional/conditional-widget.module.ts new file mode 100644 index 000000000..e8941f652 --- /dev/null +++ b/projects/dashboards/src/widgets/conditional/conditional-widget.module.ts @@ -0,0 +1,17 @@ +import { CommonModule } from '@angular/common'; +import { NgModule } from '@angular/core'; +import { DashboardCoreModule } from '@hypertrace/hyperdash-angular'; +import { ConditionalWidgetRendererComponent } from './conditional-widget-renderer.component'; +import { ConditionalModel } from './conditional.model'; + +@NgModule({ + declarations: [ConditionalWidgetRendererComponent], + imports: [ + CommonModule, + DashboardCoreModule.with({ + models: [ConditionalModel], + renderers: [ConditionalWidgetRendererComponent] + }) + ] +}) +export class ConditionalWidgetModule {} diff --git a/projects/dashboards/src/widgets/conditional/conditional.model.ts b/projects/dashboards/src/widgets/conditional/conditional.model.ts new file mode 100644 index 000000000..81b70dd5d --- /dev/null +++ b/projects/dashboards/src/widgets/conditional/conditional.model.ts @@ -0,0 +1,34 @@ +import { Model, ModelApi, ModelJson, ModelProperty, PLAIN_OBJECT_PROPERTY } from '@hypertrace/hyperdash'; +import { ModelInject, MODEL_API } from '@hypertrace/hyperdash-angular'; +import { Observable } from 'rxjs'; +import { map } from 'rxjs/operators'; + +@Model({ + type: 'conditional' +}) +export class ConditionalModel { + @ModelProperty({ + key: 'true', + type: PLAIN_OBJECT_PROPERTY.type, + required: true + }) + public true!: ModelJson; + + @ModelProperty({ + key: 'false', + type: PLAIN_OBJECT_PROPERTY.type, + required: true + }) + public false!: ModelJson; + + @ModelInject(MODEL_API) + private readonly api!: ModelApi; + + public getData(): Observable { + return this.api.getData(); + } + + public getModel(): Observable { + return this.getData().pipe(map(result => (result ? this.true : this.false))); + } +} diff --git a/projects/dashboards/src/widgets/container/conditional-container-widget.model.ts b/projects/dashboards/src/widgets/container/conditional-container-widget.model.ts deleted file mode 100644 index c9fc91ccc..000000000 --- a/projects/dashboards/src/widgets/container/conditional-container-widget.model.ts +++ /dev/null @@ -1,61 +0,0 @@ -import { - ARRAY_PROPERTY, - Model, - ModelApi, - ModelModelPropertyTypeInstance, - ModelProperty, - ModelPropertyType, - STRING_PROPERTY -} from '@hypertrace/hyperdash'; -import { ModelInject, MODEL_API } from '@hypertrace/hyperdash-angular'; -import { Observable } from 'rxjs'; -import { map } from 'rxjs/operators'; -import { AutoContainerLayoutModel } from './layout/auto/auto-container-layout.model'; -import { ContainerLayout } from './layout/container-layout'; - -@Model({ - type: 'conditional-container-widget' -}) -export class ConditionalContainerWidgetModel { - @ModelProperty({ - key: 'title', - type: STRING_PROPERTY.type, - required: false - }) - public title?: string; - - @ModelProperty({ - key: 'layout', - // tslint:disable-next-line: no-object-literal-type-assertion - type: { - key: ModelPropertyType.TYPE, - defaultModelClass: AutoContainerLayoutModel - } as ModelModelPropertyTypeInstance - }) - public layout!: ContainerLayout; - - @ModelProperty({ - key: 'trueChildren', - type: ARRAY_PROPERTY.type, - required: true - }) - public trueChildren: object[] = []; - - @ModelProperty({ - key: 'falseChildren', - type: ARRAY_PROPERTY.type, - required: true - }) - public falseChildren: object[] = []; - - @ModelInject(MODEL_API) - private readonly api!: ModelApi; - - public getData(): Observable { - return this.api.getData(); - } - - public getChildren(): Observable { - return this.getData().pipe(map(result => (result ? this.trueChildren : this.falseChildren))); - } -} diff --git a/projects/dashboards/src/widgets/container/container-widget-renderer.component.ts b/projects/dashboards/src/widgets/container/container-widget-renderer.component.ts index ca3ccb738..884e2ad8d 100644 --- a/projects/dashboards/src/widgets/container/container-widget-renderer.component.ts +++ b/projects/dashboards/src/widgets/container/container-widget-renderer.component.ts @@ -1,9 +1,7 @@ import { AfterViewInit, ChangeDetectionStrategy, Component, ViewChild, ViewContainerRef } from '@angular/core'; import { Renderer } from '@hypertrace/hyperdash'; -import { Observable } from 'rxjs'; -import { takeUntil } from 'rxjs/operators'; +import { Observable, of } from 'rxjs'; import { WidgetRenderer } from '../widget-renderer'; -import { ConditionalContainerWidgetModel } from './conditional-container-widget.model'; import { ContainerWidgetModel } from './container-widget.model'; @Renderer({ modelClass: ContainerWidgetModel }) @@ -20,17 +18,15 @@ import { ContainerWidgetModel } from './container-widget.model'; ` }) -export class ContainerWidgetRendererComponent - extends WidgetRenderer - implements AfterViewInit { +export class ContainerWidgetRendererComponent extends WidgetRenderer implements AfterViewInit { @ViewChild('containerContent', { read: ViewContainerRef, static: true }) public container!: ViewContainerRef; public ngAfterViewInit(): void { - this.fetchData().subscribe(children => this.model.layout.draw(this.container, children)); + this.model.layout.draw(this.container, this.model.children); } protected fetchData(): Observable { - return this.model.getChildren().pipe(takeUntil(this.destroyed$)); + return of(this.model.children); } } diff --git a/projects/dashboards/src/widgets/container/container-widget.model.ts b/projects/dashboards/src/widgets/container/container-widget.model.ts index ba2162cba..a42807deb 100644 --- a/projects/dashboards/src/widgets/container/container-widget.model.ts +++ b/projects/dashboards/src/widgets/container/container-widget.model.ts @@ -6,7 +6,6 @@ import { ModelPropertyType, STRING_PROPERTY } from '@hypertrace/hyperdash'; -import { Observable, of } from 'rxjs'; import { AutoContainerLayoutModel } from './layout/auto/auto-container-layout.model'; import { ContainerLayout } from './layout/container-layout'; @@ -36,8 +35,4 @@ export class ContainerWidgetModel { key: 'layout' }) public layout!: ContainerLayout; - - public getChildren(): Observable { - return of(this.children); - } } diff --git a/projects/dashboards/src/widgets/container/container-widget.module.ts b/projects/dashboards/src/widgets/container/container-widget.module.ts index 627f083e8..aefadd5ab 100644 --- a/projects/dashboards/src/widgets/container/container-widget.module.ts +++ b/projects/dashboards/src/widgets/container/container-widget.module.ts @@ -4,7 +4,6 @@ import { FlexLayoutModule } from '@angular/flex-layout'; import { FormattingModule } from '@hypertrace/common'; import { LabelModule, TitledContentModule } from '@hypertrace/components'; import { DashboardCoreModule } from '@hypertrace/hyperdash-angular'; -import { ConditionalContainerWidgetModel } from './conditional-container-widget.model'; import { ContainerWidgetRendererComponent } from './container-widget-renderer.component'; import { ContainerWidgetModel } from './container-widget.model'; import { AutoContainerLayoutModel } from './layout/auto/auto-container-layout.model'; @@ -19,7 +18,6 @@ import { DimensionModel } from './layout/custom/dimension/dimension.model'; CommonModule, DashboardCoreModule.with({ models: [ - ConditionalContainerWidgetModel, ContainerWidgetModel, AutoContainerLayoutModel, CustomContainerLayoutModel, diff --git a/projects/dashboards/src/widgets/dashboard-widgets.module.ts b/projects/dashboards/src/widgets/dashboard-widgets.module.ts index 997070252..6d4b6a7d0 100644 --- a/projects/dashboards/src/widgets/dashboard-widgets.module.ts +++ b/projects/dashboards/src/widgets/dashboard-widgets.module.ts @@ -1,5 +1,6 @@ import { CommonModule } from '@angular/common'; import { NgModule } from '@angular/core'; +import { ConditionalWidgetModule } from './conditional/conditional-widget.module'; import { ContainerWidgetModule } from './container/container-widget.module'; import { DividerWidgetModule } from './divider/divider-widget.module'; import { GreetingLabelWidgetModule } from './greeting-label/greeting-label-widget.module'; @@ -18,7 +19,8 @@ import { TextWidgetModule } from './text/text-widget.module'; JsonWidgetModule, RepeatModule, TextWidgetModule, - GreetingLabelWidgetModule + GreetingLabelWidgetModule, + ConditionalWidgetModule ] }) export class DashboardWidgetsModule {} diff --git a/projects/distributed-tracing/src/shared/dashboard/data/graphql/conditional-container/conditional-container-data-source.model.ts b/projects/distributed-tracing/src/shared/dashboard/data/graphql/conditional/conditional-data-source.model.ts similarity index 61% rename from projects/distributed-tracing/src/shared/dashboard/data/graphql/conditional-container/conditional-container-data-source.model.ts rename to projects/distributed-tracing/src/shared/dashboard/data/graphql/conditional/conditional-data-source.model.ts index dc74d96ec..e527565af 100644 --- a/projects/distributed-tracing/src/shared/dashboard/data/graphql/conditional-container/conditional-container-data-source.model.ts +++ b/projects/distributed-tracing/src/shared/dashboard/data/graphql/conditional/conditional-data-source.model.ts @@ -1,6 +1,6 @@ import { Observable } from 'rxjs'; import { GraphQlDataSourceModel } from '../graphql-data-source.model'; -export abstract class ConditionalContainerDataSourceModel extends GraphQlDataSourceModel { +export abstract class ConditionalDataSourceModel extends GraphQlDataSourceModel { public abstract getData(): Observable; } From 97d893ab23b1eb401abeeae7492840b7e006bd80 Mon Sep 17 00:00:00 2001 From: Jake Bassett Date: Thu, 12 Nov 2020 10:36:36 -0800 Subject: [PATCH 3/4] fix: pr comments --- .../property-types/model-template-type.ts | 0 projects/dashboards/src/public-api.ts | 2 +- ...conditional-widget-renderer.component.scss | 6 ----- .../conditional-widget-renderer.component.ts | 22 ++++++------------- .../widgets/conditional/conditional.model.ts | 11 +++++----- .../src/widgets/repeat/repeat.model.ts | 2 +- .../src/widgets/repeat/repeat.module.ts | 2 +- 7 files changed, 16 insertions(+), 29 deletions(-) rename projects/dashboards/src/{widgets/repeat => properties}/property-types/model-template-type.ts (100%) delete mode 100644 projects/dashboards/src/widgets/conditional/conditional-widget-renderer.component.scss diff --git a/projects/dashboards/src/widgets/repeat/property-types/model-template-type.ts b/projects/dashboards/src/properties/property-types/model-template-type.ts similarity index 100% rename from projects/dashboards/src/widgets/repeat/property-types/model-template-type.ts rename to projects/dashboards/src/properties/property-types/model-template-type.ts diff --git a/projects/dashboards/src/public-api.ts b/projects/dashboards/src/public-api.ts index 44f824559..efb661a26 100644 --- a/projects/dashboards/src/public-api.ts +++ b/projects/dashboards/src/public-api.ts @@ -7,7 +7,7 @@ export * from './properties/primitives/string-property-editor.component'; export * from './properties/dashboard-properties.module'; // Repeat -export { ModelTemplatePropertyType } from './widgets/repeat/property-types/model-template-type'; +export { ModelTemplatePropertyType } from './properties/property-types/model-template-type'; export * from './persistence/dashboard-persistence.service'; export * from './widgets/widget-renderer'; diff --git a/projects/dashboards/src/widgets/conditional/conditional-widget-renderer.component.scss b/projects/dashboards/src/widgets/conditional/conditional-widget-renderer.component.scss deleted file mode 100644 index f9e046995..000000000 --- a/projects/dashboards/src/widgets/conditional/conditional-widget-renderer.component.scss +++ /dev/null @@ -1,6 +0,0 @@ -@import 'mixins'; - -.conditional-widget { - width: 100%; - height: 100%; -} diff --git a/projects/dashboards/src/widgets/conditional/conditional-widget-renderer.component.ts b/projects/dashboards/src/widgets/conditional/conditional-widget-renderer.component.ts index b1a6495e0..356be516a 100644 --- a/projects/dashboards/src/widgets/conditional/conditional-widget-renderer.component.ts +++ b/projects/dashboards/src/widgets/conditional/conditional-widget-renderer.component.ts @@ -1,5 +1,5 @@ -import { ChangeDetectionStrategy, Component, ViewChild, ViewContainerRef } from '@angular/core'; -import { ModelJson, Renderer } from '@hypertrace/hyperdash'; +import { ChangeDetectionStrategy, Component } from '@angular/core'; +import { Renderer } from '@hypertrace/hyperdash'; import { Observable } from 'rxjs'; import { takeUntil } from 'rxjs/operators'; import { WidgetRenderer } from '../widget-renderer'; @@ -8,23 +8,15 @@ import { ConditionalModel } from './conditional.model'; @Renderer({ modelClass: ConditionalModel }) @Component({ selector: 'ht-conditional-widget', - styleUrls: ['./conditional-widget-renderer.component.scss'], changeDetection: ChangeDetectionStrategy.OnPush, - template: ` -
- -
- ` + template: ` ` }) export class ConditionalWidgetRendererComponent extends WidgetRenderer { - @ViewChild('containerContent', { read: ViewContainerRef, static: true }) - public container!: ViewContainerRef; - - public getModel(): Observable { - return this.model.getModel().pipe(takeUntil(this.destroyed$)); + public getChildModel(): Observable { + return this.model.getChildModel().pipe(takeUntil(this.destroyed$)); } - protected fetchData(): Observable { - return this.getModel(); + protected fetchData(): Observable { + return this.getChildModel(); } } diff --git a/projects/dashboards/src/widgets/conditional/conditional.model.ts b/projects/dashboards/src/widgets/conditional/conditional.model.ts index 81b70dd5d..beee22bde 100644 --- a/projects/dashboards/src/widgets/conditional/conditional.model.ts +++ b/projects/dashboards/src/widgets/conditional/conditional.model.ts @@ -1,7 +1,8 @@ -import { Model, ModelApi, ModelJson, ModelProperty, PLAIN_OBJECT_PROPERTY } from '@hypertrace/hyperdash'; +import { Model, ModelApi, ModelJson, ModelProperty } from '@hypertrace/hyperdash'; import { ModelInject, MODEL_API } from '@hypertrace/hyperdash-angular'; import { Observable } from 'rxjs'; import { map } from 'rxjs/operators'; +import { ModelTemplatePropertyType } from '../../properties/property-types/model-template-type'; @Model({ type: 'conditional' @@ -9,14 +10,14 @@ import { map } from 'rxjs/operators'; export class ConditionalModel { @ModelProperty({ key: 'true', - type: PLAIN_OBJECT_PROPERTY.type, + type: ModelTemplatePropertyType.TYPE, required: true }) public true!: ModelJson; @ModelProperty({ key: 'false', - type: PLAIN_OBJECT_PROPERTY.type, + type: ModelTemplatePropertyType.TYPE, required: true }) public false!: ModelJson; @@ -28,7 +29,7 @@ export class ConditionalModel { return this.api.getData(); } - public getModel(): Observable { - return this.getData().pipe(map(result => (result ? this.true : this.false))); + public getChildModel(): Observable { + return this.getData().pipe(map(result => this.api.createChild(result ? this.true : this.false))); } } diff --git a/projects/dashboards/src/widgets/repeat/repeat.model.ts b/projects/dashboards/src/widgets/repeat/repeat.model.ts index 2a4478150..32e2575d8 100644 --- a/projects/dashboards/src/widgets/repeat/repeat.model.ts +++ b/projects/dashboards/src/widgets/repeat/repeat.model.ts @@ -12,7 +12,7 @@ import { map, tap } from 'rxjs/operators'; import { StaticDataSource } from '../../data/static/static-data-source.model'; import { AutoContainerLayoutModel } from '../container/layout/auto/auto-container-layout.model'; import { ContainerLayout } from '../container/layout/container-layout'; -import { ModelTemplatePropertyType } from './property-types/model-template-type'; +import { ModelTemplatePropertyType } from '../../properties/property-types/model-template-type'; @Model({ type: 'repeat' diff --git a/projects/dashboards/src/widgets/repeat/repeat.module.ts b/projects/dashboards/src/widgets/repeat/repeat.module.ts index e3d141d50..d40b1fc3f 100644 --- a/projects/dashboards/src/widgets/repeat/repeat.module.ts +++ b/projects/dashboards/src/widgets/repeat/repeat.module.ts @@ -3,7 +3,7 @@ import { NgModule, Type } from '@angular/core'; import { ModelPropertyTypeRegistrationInformation } from '@hypertrace/hyperdash'; import { DashboardCoreModule } from '@hypertrace/hyperdash-angular'; import { StaticDataSourceModule } from '../../data/static/static-data-source.module'; -import { ModelTemplatePropertyType } from './property-types/model-template-type'; +import { ModelTemplatePropertyType } from '../../properties/property-types/model-template-type'; import { RepeatRendererComponent } from './repeat-renderer.component'; import { RepeatModel } from './repeat.model'; From 556277d93a6d44fddd85a04dd610ebad268540b2 Mon Sep 17 00:00:00 2001 From: Jake Bassett Date: Thu, 12 Nov 2020 10:47:24 -0800 Subject: [PATCH 4/4] fix: import order --- projects/dashboards/src/widgets/repeat/repeat.model.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/projects/dashboards/src/widgets/repeat/repeat.model.ts b/projects/dashboards/src/widgets/repeat/repeat.model.ts index 32e2575d8..f78e6e2b8 100644 --- a/projects/dashboards/src/widgets/repeat/repeat.model.ts +++ b/projects/dashboards/src/widgets/repeat/repeat.model.ts @@ -10,9 +10,9 @@ import { ModelInject, MODEL_API } from '@hypertrace/hyperdash-angular'; import { Observable, of } from 'rxjs'; import { map, tap } from 'rxjs/operators'; import { StaticDataSource } from '../../data/static/static-data-source.model'; +import { ModelTemplatePropertyType } from '../../properties/property-types/model-template-type'; import { AutoContainerLayoutModel } from '../container/layout/auto/auto-container-layout.model'; import { ContainerLayout } from '../container/layout/container-layout'; -import { ModelTemplatePropertyType } from '../../properties/property-types/model-template-type'; @Model({ type: 'repeat'