Merge branch 'main' into AddingFilterURLService

palbizu · web-flow · commit 1f4bdfdba756 · 2021-11-10T13:55:40.000-03:00
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -60,7 +60,7 @@
     "d3-transition": "^1.2.0",
     "d3-zoom": "^1.8.3",
     "graphql": "^15.6.1",
-    "graphql-tag": "^2.12.5",
+    "graphql-tag": "^2.12.6",
     "iso8601-duration": "^1.3.0",
     "lodash-es": "^4.17.21",
     "mixpanel-browser": "^2.41.0",
diff --git a/projects/components/src/table/controls/table-controls-api.ts b/projects/components/src/table/controls/table-controls-api.ts
@@ -37,6 +37,7 @@ export interface TablePropertyControlOption {
 
 export interface TableSelectControl {
   placeholder: string;
+  isMultiSelect: boolean;
   options: TableSelectControlOption[];
 }
 
diff --git a/projects/components/src/table/controls/table-controls.component.test.ts b/projects/components/src/table/controls/table-controls.component.test.ts
@@ -62,6 +62,7 @@ describe('Table Controls component', () => {
         selectControls: [
           {
             placeholder: 'test1',
+            isMultiSelect: true,
             options: [
               {
                 label: 'first1',
@@ -88,6 +89,7 @@ describe('Table Controls component', () => {
         selectControls: [
           {
             placeholder: 'test1',
+            isMultiSelect: true,
             options: [
               {
                 label: 'first1',
diff --git a/projects/components/src/table/controls/table-controls.component.ts b/projects/components/src/table/controls/table-controls.component.ts
@@ -43,21 +43,39 @@ import {
         ></ht-search-box>
 
         <!-- Selects -->
-        <ht-multi-select
-          *ngFor="let selectControl of this.selectControls"
-          [selected]="this.appliedFilters(selectControl)"
-          [placeholder]="selectControl.placeholder"
-          class="control select"
-          showBorder="true"
-          searchMode="${MultiSelectSearchMode.CaseInsensitive}"
-          (selectedChange)="this.onMultiSelectChange(selectControl, $event)"
-        >
-          <ht-select-option
-            *ngFor="let option of selectControl.options"
-            [label]="option.label"
-            [value]="option"
-          ></ht-select-option>
-        </ht-multi-select>
+        <ng-container *ngFor="let selectControl of this.selectControls">
+          <ht-multi-select
+            *ngIf="selectControl.isMultiSelect"
+            [selected]="this.appliedFilters(selectControl)"
+            [placeholder]="selectControl.placeholder"
+            class="control select"
+            showBorder="true"
+            searchMode="${MultiSelectSearchMode.CaseInsensitive}"
+            (selectedChange)="this.onMultiSelectChange(selectControl, $event)"
+          >
+            <ht-select-option
+              *ngFor="let option of selectControl.options"
+              [label]="option.label"
+              [value]="option"
+            ></ht-select-option>
+          </ht-multi-select>
+
+          <ht-select
+            *ngIf="!selectControl.isMultiSelect"
+            [selected]="this.appliedFilters(selectControl)"
+            [placeholder]="selectControl.placeholder"
+            class="control select"
+            showBorder="true"
+            searchMode="${MultiSelectSearchMode.CaseInsensitive}"
+            (selectedChange)="this.onMultiSelectChange(selectControl, $event)"
+          >
+            <ht-select-option
+              *ngFor="let option of selectControl.options"
+              [label]="option.label"
+              [value]="option"
+            ></ht-select-option>
+          </ht-select>
+        </ng-container>
       </div>
 
       <!-- Right -->
diff --git a/projects/components/src/table/table.component.scss b/projects/components/src/table/table.component.scss
@@ -110,6 +110,10 @@ $header-height: 32px;
     border-bottom: unset;
   }
 
+  &.hide-divider {
+    border-bottom: unset;
+  }
+
   .data-cell-renderer {
     display: block;
     height: 100%;
diff --git a/projects/components/src/table/table.component.ts b/projects/components/src/table/table.component.ts
@@ -106,7 +106,8 @@ import { TableColumnConfigExtended, TableService } from './table.service';
               [style.margin-left]="index === 0 ? this.calcLeftMarginIndent(row) : 0"
               [style.margin-right]="index === 1 ? this.calcRightMarginIndent(row, columnDef) : 0"
               [ngClass]="{
-                'detail-expanded': this.isDetailExpanded(row)
+                'detail-expanded': this.isDetailExpanded(row),
+                'hide-divider': this.isDetailList()
               }"
               class="data-cell"
             >
@@ -699,6 +700,10 @@ export class TableComponent
     return this.isDetailType() || this.isTreeType();
   }
 
+  public isDetailList(): boolean {
+    return this.isDetailType() && this.display === TableStyle.List;
+  }
+
   public isDetailExpanded(row: StatefulTableRow): boolean {
     return this.isDetailType() && row.$$state.expanded;
   }
diff --git a/projects/observability/src/pages/apis/endpoints/endpoint-list.dashboard.ts b/projects/observability/src/pages/apis/endpoints/endpoint-list.dashboard.ts
@@ -22,7 +22,7 @@ export const endpointListDashboard: DashboardDefaultConfiguration = {
         searchAttribute: 'name',
         'select-control-options': [
           {
-            type: 'table-widget-select-option',
+            type: 'table-widget-multi-select-option',
             'unique-values': true,
             placeholder: 'Services',
             data: {
diff --git a/projects/observability/src/pages/explorer/explorer.component.scss b/projects/observability/src/pages/explorer/explorer.component.scss
@@ -1,4 +1,5 @@
 @import 'font';
+@import 'layout';
 
 .explorer {
   display: flex;
@@ -11,21 +12,19 @@
   }
 
   .explorer-content {
+    @include scrollable-container(24px);
     display: flex;
     flex-direction: column;
-    padding: 24px 24px 0;
-    flex: 1;
-    min-height: 0;
   }
 
   .explorer-data-toggle {
     flex: 0;
-    padding-bottom: 16px;
+    padding: 24px 24px 16px;
   }
 
   .explorer-filter-bar {
     flex: 0;
-    padding-bottom: 8px;
+    padding: 0 24px 8px;
   }
 
   .panel-title {
@@ -49,14 +48,9 @@
 
   .results-panel {
     flex: 1;
-    overflow: hidden;
 
     .label {
       @include body-1-medium;
     }
-
-    .results-panel-content {
-      padding-top: 12px;
-    }
   }
 }
diff --git a/projects/observability/src/pages/explorer/explorer.component.ts b/projects/observability/src/pages/explorer/explorer.component.ts
@@ -23,21 +23,20 @@ import {
   template: `
     <div class="explorer">
       <ht-page-header class="explorer-header"></ht-page-header>
+      <ht-toggle-group
+        class="explorer-data-toggle"
+        [items]="this.contextItems"
+        [activeItem]="this.activeContextItem$ | async"
+        (activeItemChange)="this.onContextUpdated($event.value)"
+      ></ht-toggle-group>
+
+      <ht-filter-bar
+        class="explorer-filter-bar"
+        [attributes]="this.attributes$ | async"
+        [syncWithUrl]="true"
+        (filtersChange)="this.onFiltersUpdated($event)"
+      ></ht-filter-bar>
       <div class="explorer-content">
-        <ht-toggle-group
-          class="explorer-data-toggle"
-          [items]="this.contextItems"
-          [activeItem]="this.activeContextItem$ | async"
-          (activeItemChange)="this.onContextUpdated($event.value)"
-        ></ht-toggle-group>
-
-        <ht-filter-bar
-          class="explorer-filter-bar"
-          [attributes]="this.attributes$ | async"
-          [syncWithUrl]="true"
-          (filtersChange)="this.onFiltersUpdated($event)"
-        ></ht-filter-bar>
-
         <ht-panel class="visualization-panel" [(expanded)]="this.visualizationExpanded">
           <ht-panel-header>
             <ht-panel-title [expanded]="this.visualizationExpanded"
diff --git a/projects/observability/src/shared/dashboard/widgets/table/table-widget-control-multi-select-option.model.ts b/projects/observability/src/shared/dashboard/widgets/table/table-widget-control-multi-select-option.model.ts
@@ -0,0 +1,9 @@
+import { Model } from '@hypertrace/hyperdash';
+import { TableWidgetControlSelectOptionModel } from './table-widget-control-select-option.model';
+
+@Model({
+  type: 'table-widget-multi-select-option'
+})
+export class TableWidgetControlMultiSelectOptionModel extends TableWidgetControlSelectOptionModel {
+  public readonly isMultiselect: boolean = true;
+}
diff --git a/projects/observability/src/shared/dashboard/widgets/table/table-widget-control-select-option.model.ts b/projects/observability/src/shared/dashboard/widgets/table/table-widget-control-select-option.model.ts
@@ -8,6 +8,8 @@ import { TableWidgetControlModel } from './table-widget-control.model';
   type: 'table-widget-select-option'
 })
 export class TableWidgetControlSelectOptionModel extends TableWidgetControlModel<TableSelectControlOption> {
+  public readonly isMultiselect: boolean = false;
+
   @ModelProperty({
     key: 'placeholder',
     displayName: 'Placeholder',
diff --git a/projects/observability/src/shared/dashboard/widgets/table/table-widget-renderer.component.ts b/projects/observability/src/shared/dashboard/widgets/table/table-widget-renderer.component.ts
@@ -255,6 +255,7 @@ export class TableWidgetRendererComponent
                   return (
                     foundPreferences ?? {
                       placeholder: selectControlModel.placeholder,
+                      isMultiSelect: selectControlModel.isMultiselect,
                       options: options.map(option => ({
                         ...option,
                         applied: this.isFilterApplied(option.metaValue, filters)
diff --git a/projects/observability/src/shared/dashboard/widgets/table/table-widget.module.ts b/projects/observability/src/shared/dashboard/widgets/table/table-widget.module.ts
@@ -14,6 +14,7 @@ import { TracingTableCellRendererModule } from '../../../components/table/tracin
 import { TableWidgetRowInteractionModel } from './selections/table-widget-row-interaction.model';
 import { TableWidgetColumnModel } from './table-widget-column.model';
 import { TableWidgetControlCheckboxOptionModel } from './table-widget-control-checkbox-option.model';
+import { TableWidgetControlMultiSelectOptionModel } from './table-widget-control-multi-select-option.model';
 import { TableWidgetControlSelectOptionModel } from './table-widget-control-select-option.model';
 import { TableWidgetRendererComponent } from './table-widget-renderer.component';
 import { TableWidgetViewToggleModel } from './table-widget-view-toggle.model';
@@ -30,6 +31,7 @@ import { TableWidgetModel } from './table-widget.model';
         TableWidgetRowInteractionModel,
         TableWidgetControlCheckboxOptionModel,
         TableWidgetControlSelectOptionModel,
+        TableWidgetControlMultiSelectOptionModel,
         WidgetHeaderModel,
         TableWidgetViewToggleModel,
         TableWidgetViewModel
diff --git a/projects/observability/src/shared/graphql/request/builders/selections/observability-specification-builder.ts b/projects/observability/src/shared/graphql/request/builders/selections/observability-specification-builder.ts
@@ -37,9 +37,10 @@ export class ObservabilitySpecificationBuilder extends SpecificationBuilder {
     idKey: string,
     nameKey: string,
     entityType?: EntityType,
-    additionalAttributes?: string[]
+    additionalAttributes?: string[],
+    additionalSpecifications: Specification[] = []
   ): EntitySpecification {
-    return this.entitySpecBuilder.build(idKey, nameKey, entityType, additionalAttributes);
+    return this.entitySpecBuilder.build(idKey, nameKey, entityType, additionalAttributes, additionalSpecifications);
   }
 
   public neighborAttributeSpecificationForKey(
diff --git a/projects/observability/src/shared/graphql/request/builders/specification/entity/entity-specification-builder.test.ts b/projects/observability/src/shared/graphql/request/builders/specification/entity/entity-specification-builder.test.ts
diff --git a/projects/observability/src/shared/graphql/request/builders/specification/entity/entity-specification-builder.ts b/projects/observability/src/shared/graphql/request/builders/specification/entity/entity-specification-builder.ts

Original file line number	Diff line number	Diff line change
`@@ -37,6 +37,7 @@ export interface TablePropertyControlOption {`
`37`	`37`
`38`	`38`	`export interface TableSelectControl {`
`39`	`39`	`placeholder: string;`
	`40`	`+ isMultiSelect: boolean;`
`40`	`41`	`options: TableSelectControlOption[];`
`41`	`42`	`}`
`42`	`43`
Original file line number	Diff line number	Diff line change
`@@ -62,6 +62,7 @@ describe('Table Controls component', () => {`
`62`	`62`	`selectControls: [`
`63`	`63`	`{`
`64`	`64`	`placeholder: 'test1',`
	`65`	`+ isMultiSelect: true,`
`65`	`66`	`options: [`
`66`	`67`	`{`
`67`	`68`	`label: 'first1',`
`@@ -88,6 +89,7 @@ describe('Table Controls component', () => {`
`88`	`89`	`selectControls: [`
`89`	`90`	`{`
`90`	`91`	`placeholder: 'test1',`
	`92`	`+ isMultiSelect: true,`
`91`	`93`	`options: [`
`92`	`94`	`{`
`93`	`95`	`label: 'first1',`
Original file line number	Diff line number	Diff line change
`@@ -106,7 +106,8 @@ import { TableColumnConfigExtended, TableService } from './table.service';`
`106`	`106`	`[style.margin-left]="index === 0 ? this.calcLeftMarginIndent(row) : 0"`
`107`	`107`	`[style.margin-right]="index === 1 ? this.calcRightMarginIndent(row, columnDef) : 0"`
`108`	`108`	`[ngClass]="{`
`109`		`- 'detail-expanded': this.isDetailExpanded(row)`
	`109`	`+ 'detail-expanded': this.isDetailExpanded(row),`
	`110`	`+ 'hide-divider': this.isDetailList()`
`110`	`111`	`}"`
`111`	`112`	`class="data-cell"`
`112`	`113`	`>`
`@@ -699,6 +700,10 @@ export class TableComponent`
`699`	`700`	`return this.isDetailType() \|\| this.isTreeType();`
`700`	`701`	`}`
`701`	`702`
	`703`	`+ public isDetailList(): boolean {`
	`704`	`+ return this.isDetailType() && this.display === TableStyle.List;`
	`705`	`+ }`
	`706`	`+`
`702`	`707`	`public isDetailExpanded(row: StatefulTableRow): boolean {`
`703`	`708`	`return this.isDetailType() && row.$$state.expanded;`
`704`	`709`	`}`
Original file line number	Diff line number	Diff line change
`@@ -22,7 +22,7 @@ export const endpointListDashboard: DashboardDefaultConfiguration = {`
`22`	`22`	`searchAttribute: 'name',`
`23`	`23`	`'select-control-options': [`
`24`	`24`	`{`
`25`		`- type: 'table-widget-select-option',`
	`25`	`+ type: 'table-widget-multi-select-option',`
`26`	`26`	`'unique-values': true,`
`27`	`27`	`placeholder: 'Services',`
`28`	`28`	`data: {`
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,5 @@`
`1`	`1`	`@import 'font';`
	`2`	`+@import 'layout';`
`2`	`3`
`3`	`4`	`.explorer {`
`4`	`5`	`display: flex;`
`@@ -11,21 +12,19 @@`
`11`	`12`	`}`
`12`	`13`
`13`	`14`	`.explorer-content {`
	`15`	`+ @include scrollable-container(24px);`
`14`	`16`	`display: flex;`
`15`	`17`	`flex-direction: column;`
`16`		`- padding: 24px 24px 0;`
`17`		`- flex: 1;`
`18`		`- min-height: 0;`
`19`	`18`	`}`
`20`	`19`
`21`	`20`	`.explorer-data-toggle {`
`22`	`21`	`flex: 0;`
`23`		`- padding-bottom: 16px;`
	`22`	`+ padding: 24px 24px 16px;`
`24`	`23`	`}`
`25`	`24`
`26`	`25`	`.explorer-filter-bar {`
`27`	`26`	`flex: 0;`
`28`		`- padding-bottom: 8px;`
	`27`	`+ padding: 0 24px 8px;`
`29`	`28`	`}`
`30`	`29`
`31`	`30`	`.panel-title {`
`@@ -49,14 +48,9 @@`
`49`	`48`
`50`	`49`	`.results-panel {`
`51`	`50`	`flex: 1;`
`52`		`- overflow: hidden;`
`53`	`51`
`54`	`52`	`.label {`
`55`	`53`	`@include body-1-medium;`
`56`	`54`	`}`
`57`		`-`
`58`		`- .results-panel-content {`
`59`		`- padding-top: 12px;`
`60`		`- }`
`61`	`55`	`}`
`62`	`56`	`}`