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.ts b/projects/dashboards/src/widgets/conditional/conditional-widget-renderer.component.ts new file mode 100644 index 000000000..356be516a --- /dev/null +++ b/projects/dashboards/src/widgets/conditional/conditional-widget-renderer.component.ts @@ -0,0 +1,22 @@ +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'; +import { ConditionalModel } from './conditional.model'; + +@Renderer({ modelClass: ConditionalModel }) +@Component({ + selector: 'ht-conditional-widget', + changeDetection: ChangeDetectionStrategy.OnPush, + template: ` ` +}) +export class ConditionalWidgetRendererComponent extends WidgetRenderer { + public getChildModel(): Observable { + return this.model.getChildModel().pipe(takeUntil(this.destroyed$)); + } + + protected fetchData(): Observable { + return this.getChildModel(); + } +} 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..beee22bde --- /dev/null +++ b/projects/dashboards/src/widgets/conditional/conditional.model.ts @@ -0,0 +1,35 @@ +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' +}) +export class ConditionalModel { + @ModelProperty({ + key: 'true', + type: ModelTemplatePropertyType.TYPE, + required: true + }) + public true!: ModelJson; + + @ModelProperty({ + key: 'false', + type: ModelTemplatePropertyType.TYPE, + required: true + }) + public false!: ModelJson; + + @ModelInject(MODEL_API) + private readonly api!: ModelApi; + + public getData(): Observable { + return this.api.getData(); + } + + public getChildModel(): Observable { + return this.getData().pipe(map(result => this.api.createChild(result ? this.true : this.false))); + } +} 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/dashboards/src/widgets/repeat/repeat.model.ts b/projects/dashboards/src/widgets/repeat/repeat.model.ts index 2a4478150..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 './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'; diff --git a/projects/distributed-tracing/src/shared/dashboard/data/graphql/conditional/conditional-data-source.model.ts b/projects/distributed-tracing/src/shared/dashboard/data/graphql/conditional/conditional-data-source.model.ts new file mode 100644 index 000000000..e527565af --- /dev/null +++ b/projects/distributed-tracing/src/shared/dashboard/data/graphql/conditional/conditional-data-source.model.ts @@ -0,0 +1,6 @@ +import { Observable } from 'rxjs'; +import { GraphQlDataSourceModel } from '../graphql-data-source.model'; + +export abstract class ConditionalDataSourceModel 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';