feat: conditional container widget

projects/dashboards/src/widgets/conditional/conditional-widget-renderer.component.scss

@@ -0,0 +1,6 @@
+@import 'mixins';
+
+.conditional-widget {
+  width: 100%;
+  height: 100%;
+}

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: `
+    <div class="conditional-widget">
+      <ng-container [hdaDashboardModel]="this.getModel() | async"> </ng-container>
+    </div>
+  `
+})
+export class ConditionalWidgetRendererComponent extends WidgetRenderer<ConditionalModel> {
+  @ViewChild('containerContent', { read: ViewContainerRef, static: true })
+  public container!: ViewContainerRef;
+
+  public getModel(): Observable<ModelJson> {
+    return this.model.getModel().pipe(takeUntil(this.destroyed$));
+  }
+
+  protected fetchData(): Observable<ModelJson> {
+    return this.getModel();
+  }
+}

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 {}

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<boolean> {
+    return this.api.getData<boolean>();
+  }
+
+  public getModel(): Observable<ModelJson> {
+    return this.getData().pipe(map(result => (result ? this.true : this.false)));
+  }
+}

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 {}

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<boolean> {
+  public abstract getData(): Observable<boolean>;
+}

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';