feat: conditional container widget (#348)

* feat: conditional container widget

* feat: conditional widget

* fix: pr comments

* fix: import order

Author: jake-bassett

projects/dashboards/src/widgets/repeat/property-types/model-template-type.ts renamed to projects/dashboards/src/properties/property-types/model-template-type.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';

projects/dashboards/src/public-api.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: ` <ng-container [hdaDashboardModel]="this.getChildModel() | async"> </ng-container> `
+})
+export class ConditionalWidgetRendererComponent extends WidgetRenderer<ConditionalModel> {
+  public getChildModel(): Observable<object> {
+    return this.model.getChildModel().pipe(takeUntil(this.destroyed$));
+  }
+
+  protected fetchData(): Observable<object> {
+    return this.getChildModel();
+  }
+}

projects/dashboards/src/widgets/conditional/conditional-widget-renderer.component.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 {}

projects/dashboards/src/widgets/conditional/conditional-widget.module.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<boolean> {
+    return this.api.getData<boolean>();
+  }
+
+  public getChildModel(): Observable<object> {
+    return this.getData().pipe(map(result => this.api.createChild(result ? this.true : this.false)));
+  }
+}

projects/dashboards/src/widgets/conditional/conditional.model.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 {}

projects/dashboards/src/widgets/dashboard-widgets.module.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'

projects/dashboards/src/widgets/repeat/repeat.model.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';
 

projects/dashboards/src/widgets/repeat/repeat.module.ts

@@ -0,0 +1,6 @@
+import { Observable } from 'rxjs';
+import { GraphQlDataSourceModel } from '../graphql-data-source.model';
+
+export abstract class ConditionalDataSourceModel extends GraphQlDataSourceModel<boolean> {
+  public abstract getData(): Observable<boolean>;
+}

projects/distributed-tracing/src/shared/dashboard/data/graphql/conditional/conditional-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';