Merge branch 'main' into update-container-widget-style

Author: anandtiwary

projects/common/src/time/time-range.service.test.ts

@@ -81,4 +81,11 @@ describe('Time range service', () => {
       });
     });
   });
+
+  test('returns custom time filter', () => {
+    const spectator = buildService();
+    expect(spectator.service.toQueryParams(new Date(1642296703000), new Date(1642396703000))).toStrictEqual({
+      ['time']: new FixedTimeRange(new Date(1642296703000), new Date(1642396703000)).toUrlString()
+    });
+  });
 });

projects/common/src/time/time-range.service.ts

@@ -2,7 +2,7 @@ import { Injectable } from '@angular/core';
 import { isEmpty } from 'lodash-es';
 import { EMPTY, ReplaySubject } from 'rxjs';
 import { catchError, defaultIfEmpty, filter, map, switchMap, take } from 'rxjs/operators';
-import { NavigationService } from '../navigation/navigation.service';
+import { NavigationService, QueryParamObject } from '../navigation/navigation.service';
 import { ReplayObservable } from '../utilities/rxjs/rxjs-utils';
 import { FixedTimeRange } from './fixed-time-range';
 import { RelativeTimeRange } from './relative-time-range';
@@ -110,4 +110,12 @@ export class TimeRangeService {
   public static toFixedTimeRange(startTime: Date, endTime: Date): FixedTimeRange {
     return new FixedTimeRange(startTime, endTime);
   }
+
+  public toQueryParams(startTime: Date, endTime: Date): QueryParamObject {
+    const newTimeRange = new FixedTimeRange(startTime, endTime);
+
+    return {
+      [TimeRangeService.TIME_RANGE_QUERY_PARAM]: newTimeRange.toUrlString()
+    };
+  }
 }

projects/components/src/combo-box/combo-box.component.scss

@@ -45,6 +45,13 @@
     }
   }
 
+  &.disabled {
+    background-color: $gray-2;
+    .trigger-input {
+      color: black;
+    }
+  }
+
   .trigger-control {
     height: 100%;
     width: 24px;

projects/components/src/combo-box/combo-box.component.ts

@@ -34,15 +34,21 @@ import { ComboBoxMode, ComboBoxOption, ComboBoxResult } from './combo-box-api';
     }
   ],
   template: `
-    <ht-popover (popoverOpen)="this.onPopoverOpen($event)" (popoverClose)="this.onPopoverClose()" class="combo-box">
+    <ht-popover
+      class="combo-box"
+      [disabled]="this.disabled"
+      (popoverOpen)="this.onPopoverOpen($event)"
+      (popoverClose)="this.onPopoverClose()"
+    >
       <ht-popover-trigger>
         <div
           #trigger
           class="popover-trigger"
           [ngClass]="{
             input: this.mode === '${ComboBoxMode.Input}',
             chip: this.mode === '${ComboBoxMode.Chip}',
-            'show-border': this.showBorder
+            'show-border': this.showBorder,
+            disabled: this.disabled
           }"
           [class.has-text]="this.text"
           [class.input-focused]="input.matches(':focus')"
@@ -79,6 +85,7 @@ import { ComboBoxMode, ComboBoxOption, ComboBoxResult } from './combo-box-api';
 
           <!-- Clear Button -->
           <div
+            *ngIf="!this.disabled"
             [class.has-text]="this.text"
             [class.input-focused]="input.matches(':focus')"
             [ngClass]="this.mode"
@@ -427,6 +434,10 @@ export class ComboBoxComponent<TValue = string> implements AfterViewInit, OnChan
     });
   }
 
+  public setDisabledState(isDisabled?: boolean): void {
+    this.disabled = isDisabled ?? false;
+  }
+
   private propagateValueChangeToFormControl(value?: string): void {
     this.propagateControlValueChange?.(value);
     this.propagateControlValueChangeOnTouch?.(value);

projects/components/src/input/input.component.ts

@@ -86,6 +86,7 @@ export class InputComponent<T extends string | number> implements ControlValueAc
   public registerOnTouched(onTouch: (value: T | undefined) => void): void {
     this.propagateControlValueChangeOnTouch = onTouch;
   }
+
   public setDisabledState(isDisabled?: boolean): void {
     this.disabled = isDisabled ?? false;
   }

projects/components/src/popover/popover-position-builder.ts

@@ -109,6 +109,11 @@ export class PopoverPositionBuilder {
         return globalPosition.centerHorizontally().centerVertically();
       case PopoverFixedPositionLocation.Right:
         return globalPosition.right('0').top('0');
+
+      case PopoverFixedPositionLocation.Custom:
+        return globalPosition
+          .left(`${popoverPosition.customLocation!.x}px`)
+          .top(`${popoverPosition.customLocation!.y}px`);
       case PopoverFixedPositionLocation.RightUnderHeader:
       default:
         return globalPosition.right('0').top(this.headerHeight ?? '0');

projects/components/src/popover/popover.ts

@@ -34,6 +34,10 @@ export interface PopoverRelativePosition {
 export interface PopoverFixedPosition {
   type: PopoverPositionType.Fixed;
   location: PopoverFixedPositionLocation;
+  customLocation?: {
+    x: number;
+    y: number;
+  };
 }
 
 export type PopoverPosition =
@@ -65,7 +69,8 @@ export const enum PopoverRelativePositionLocation {
 export const enum PopoverFixedPositionLocation {
   RightUnderHeader,
   Centered,
-  Right
+  Right,
+  Custom
 }
 
 export const POPOVER_DATA = new InjectionToken<unknown>('POPOVER_DATA');

projects/components/src/select/select.component.ts

@@ -324,6 +324,10 @@ export class SelectComponent<V> implements ControlValueAccessor, AfterContentIni
     this.propagateControlValueChangeOnTouch = onTouch;
   }
 
+  public setDisabledState(isDisabled?: boolean): void {
+    this.disabled = isDisabled ?? false;
+  }
+
   private propagateValueChangeToFormControl(value: V | undefined): void {
     this.propagateControlValueChange?.(value);
     this.propagateControlValueChangeOnTouch?.(value);

projects/observability/src/pages/apis/api-detail/metrics/api-metrics.dashboard.ts

@@ -276,7 +276,10 @@ export const apiMetricsDashboard: DashboardDefaultConfiguration = {
                   }
                 }
               }
-            ]
+            ],
+            'selection-handler': {
+              type: 'cartesian-explorer-selection-handler'
+            }
           },
           {
             type: 'container-widget',
@@ -336,7 +339,11 @@ export const apiMetricsDashboard: DashboardDefaultConfiguration = {
                       type: 'entity-error-percentage-timeseries-data-source'
                     }
                   }
-                ]
+                ],
+                'selection-handler': {
+                  type: 'cartesian-explorer-selection-handler',
+                  'show-context-menu': true
+                }
               },
               {
                 type: 'cartesian-widget',
@@ -375,7 +382,11 @@ export const apiMetricsDashboard: DashboardDefaultConfiguration = {
                       }
                     }
                   }
-                ]
+                ],
+                'selection-handler': {
+                  type: 'cartesian-explorer-selection-handler',
+                  'show-context-menu': true
+                }
               }
             ]
           }
@@ -410,7 +421,11 @@ export const apiMetricsDashboard: DashboardDefaultConfiguration = {
               }
             }
           }
-        ]
+        ],
+        'selection-handler': {
+          type: 'cartesian-explorer-selection-handler',
+          'show-context-menu': true
+        }
       }
     ]
   }

projects/observability/src/pages/apis/api-detail/overview/api-overview.dashboard.ts

@@ -295,7 +295,10 @@ export const apiOverviewDashboard: DashboardDefaultConfiguration = {
                   }
                 }
               }
-            ]
+            ],
+            'selection-handler': {
+              type: 'cartesian-explorer-selection-handler'
+            }
           },
           {
             type: 'cartesian-widget',
@@ -389,7 +392,10 @@ export const apiOverviewDashboard: DashboardDefaultConfiguration = {
                   }
                 }
               }
-            ]
+            ],
+            'selection-handler': {
+              type: 'cartesian-explorer-selection-handler'
+            }
           },
           {
             type: 'cartesian-widget',
@@ -483,7 +489,10 @@ export const apiOverviewDashboard: DashboardDefaultConfiguration = {
                   }
                 }
               }
-            ]
+            ],
+            'selection-handler': {
+              type: 'cartesian-explorer-selection-handler'
+            }
           }
         ]
       },