Merge branch 'support-additional-spec' of github.com:hypertrace/hypertrace-ui into support-additional-spec

Author: anandtiwary

package-lock.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",

package.json

@@ -37,6 +37,7 @@ export interface TablePropertyControlOption {
 
 export interface TableSelectControl {
   placeholder: string;
+  isMultiSelect: boolean;
   options: TableSelectControlOption[];
 }
 

projects/components/src/table/controls/table-controls-api.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',

projects/components/src/table/controls/table-controls.component.test.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 -->

projects/components/src/table/controls/table-controls.component.ts

@@ -110,6 +110,10 @@ $header-height: 32px;
     border-bottom: unset;
   }
 
+  &.hide-divider {
+    border-bottom: unset;
+  }
+
   .data-cell-renderer {
     display: block;
     height: 100%;

projects/components/src/table/table.component.scss

@@ -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;
   }

projects/components/src/table/table.component.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: {

projects/observability/src/pages/apis/endpoints/endpoint-list.dashboard.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;
+}

projects/observability/src/shared/dashboard/widgets/table/table-widget-control-multi-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',