feat: add visible option to table controls

Author: jake-bassett

projects/distributed-tracing/src/shared/dashboard/widgets/table/table-widget-control.model.ts

@@ -18,6 +18,14 @@ export abstract class TableWidgetControlModel {
   })
   public uniqueValues: boolean = false;
 
+  @ModelProperty({
+    key: 'visible',
+    displayName: 'Visible',
+    type: BOOLEAN_PROPERTY.type,
+    required: false
+  })
+  public visible: boolean = true;
+
   @ModelInject(MODEL_API)
   protected readonly api!: ModelApi;
 

projects/distributed-tracing/src/shared/dashboard/widgets/table/table-widget-renderer.component.ts

@@ -161,38 +161,44 @@ export class TableWidgetRendererComponent
 
   protected fetchAndPopulateSelectControls(): void {
     this.selectControls$ = forkJoinSafeEmpty(
-      this.model.getSelectControlOptions().map(selectControlModel =>
-        // Fetch the values for the selectFilter dropdown
-        selectControlModel.getOptions().pipe(
-          first(),
-          map(options => {
-            const selectOptions = options.map(option => ({
-              label: option.label,
-              value: option
-            }));
-
-            return {
-              placeholder: selectControlModel.placeholder,
-              options: selectOptions
-            };
-          })
+      this.model
+        .getSelectControlOptions()
+        .filter(checkboxControlModel => checkboxControlModel.visible)
+        .map(selectControlModel =>
+          // Fetch the values for the selectFilter dropdown
+          selectControlModel.getOptions().pipe(
+            first(),
+            map(options => {
+              const selectOptions = options.map(option => ({
+                label: option.label,
+                value: option
+              }));
+
+              return {
+                placeholder: selectControlModel.placeholder,
+                options: selectOptions
+              };
+            })
+          )
         )
-      )
     );
   }
 
   protected fetchAndPopulateCheckboxControls(): void {
     this.checkboxControls$ = forkJoinSafeEmpty(
-      this.model.getCheckboxControlOptions().map(checkboxControlModel =>
-        checkboxControlModel.getOptions().pipe(
-          first(),
-          map(options => ({
-            label: checkboxControlModel.checked ? options[0].label : options[1].label,
-            value: checkboxControlModel.checked,
-            options: options
-          }))
+      this.model
+        .getCheckboxControlOptions()
+        .filter(checkboxControlModel => checkboxControlModel.visible)
+        .map(checkboxControlModel =>
+          checkboxControlModel.getOptions().pipe(
+            first(),
+            map(options => ({
+              label: checkboxControlModel.checked ? options[0].label : options[1].label,
+              value: checkboxControlModel.checked,
+              options: options
+            }))
+          )
         )
-      )
     ).pipe(
       tap((checkboxControls: CheckboxControl[]) => {
         // Apply initial values for checkboxes

projects/observability/src/shared/dashboard/data/graphql/entity/attribute/entities-attribute-options-data-source.model.ts

@@ -1,9 +1,5 @@
-import {
-  FilterOperator,
-  TableControlOptionType,
-  TableFilterControlOption,
-  TableUnsetFilterControlOption
-} from '@hypertrace/components';
+import { FilterOperator, TableControlOptionType } from '@hypertrace/components';
+import { LabeledTableControlOption } from '@hypertrace/distributed-tracing';
 import { Model, ModelProperty, STRING_PROPERTY } from '@hypertrace/hyperdash';
 import { Observable } from 'rxjs';
 import { map } from 'rxjs/operators';
@@ -20,18 +16,14 @@ export class EntitiesAttributeOptionsDataSourceModel extends EntitiesAttributeDa
   })
   public unsetLabel: string = 'All';
 
-  private buildUnsetOption(attribute: string): Labeled<TableUnsetFilterControlOption> {
-    return {
-      type: TableControlOptionType.UnsetFilter,
-      label: this.unsetLabel,
-      metaValue: attribute
-    };
-  }
-
-  public getData(): Observable<(Labeled<TableUnsetFilterControlOption> | Labeled<TableFilterControlOption>)[]> {
+  public getData(): Observable<LabeledTableControlOption[]> {
     return super.getData().pipe(
       map((values: unknown[]) => [
-        this.buildUnsetOption(this.specification.name),
+        {
+          type: TableControlOptionType.UnsetFilter,
+          label: this.unsetLabel,
+          metaValue: this.specification.name
+        },
         ...values.map(value => ({
           type: TableControlOptionType.Filter as const,
           label: String(value),
@@ -46,5 +38,3 @@ export class EntitiesAttributeOptionsDataSourceModel extends EntitiesAttributeDa
     );
   }
 }
-
-type Labeled<T> = T & { label: string };