Merge main

Author: Dmitriy Potychkin

package-lock.json

@@ -24,17 +24,17 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^11.0.5",
+    "@angular/animations": "^11.0.7",
     "@angular/cdk": "^11.0.3",
-    "@angular/common": "^11.0.5",
-    "@angular/compiler": "^11.0.5",
-    "@angular/core": "^11.0.5",
+    "@angular/common": "^11.0.7",
+    "@angular/compiler": "^11.0.7",
+    "@angular/core": "^11.0.7",
     "@angular/flex-layout": "^11.0.0-beta.33",
-    "@angular/forms": "^11.0.5",
+    "@angular/forms": "^11.0.7",
     "@angular/material": "^11.0.3",
-    "@angular/platform-browser": "^11.0.5",
-    "@angular/platform-browser-dynamic": "^11.0.5",
-    "@angular/router": "^11.0.5",
+    "@angular/platform-browser": "^11.0.7",
+    "@angular/platform-browser-dynamic": "^11.0.7",
+    "@angular/router": "^11.0.7",
     "@apollo/client": "^3.3.6",
     "@hypertrace/hyperdash": "^1.1.2",
     "@hypertrace/hyperdash-angular": "^2.3.1",
@@ -59,6 +59,7 @@
     "d3-zoom": "^1.8.3",
     "graphql": "^15.4.0",
     "graphql-tag": "^2.11.0",
+    "iso8601-duration": "^1.3.0",
     "lodash-es": "^4.17.20",
     "rxjs": "~6.6.3",
     "tslib": "^2.1.0",
@@ -68,14 +69,14 @@
   "devDependencies": {
     "@angular-builders/jest": "^11.0.0",
     "@angular-devkit/build-angular": "~0.1101.1",
-    "@angular/cli": "11.1.1",
+    "@angular/cli": "11.1.2",
     "@angular/compiler-cli": "~11.0.2",
     "@angular/language-service": "~11.0.5",
     "@commitlint/cli": "^11.0.0",
     "@commitlint/config-conventional": "^11.0.0",
     "@compodoc/compodoc": "^1.1.11",
     "@ngneat/spectator": "^6.1.3",
-    "@types/d3-array": "^2.8.0",
+    "@types/d3-array": "^2.9.0",
     "@types/d3-axis": "^2.0.0",
     "@types/d3-brush": "^2.1.0",
     "@types/d3-drag": "^1.2.3",
@@ -101,7 +102,7 @@
     "jest-junit": "^12.0.0",
     "lodash": "^4.17.20",
     "ng-mocks": "^11.3.1",
-    "ng-packagr": "^11.0.3",
+    "ng-packagr": "^11.1.2",
     "prettier": "^2.2.1",
     "pretty-quick": "^3.0.0",
     "ts-node": "~9.1.1",

package.json

@@ -1,6 +1,6 @@
 @import 'color-palette';
 
-$paginator-height: 50px;
+$paginator-height: 48px;
 
 @mixin flex-layout($direction: column) {
   height: 100%;

projects/assets-library/assets/styles/_layout.scss

@@ -15,6 +15,7 @@
     "@angular/router": "^11.0.2",
     "@hypertrace/graphql-client": "^0.0.0",
     "core-js": "^3.7.0",
+    "iso8601-duration": "^1.3.0",
     "rxjs": "~6.6.3",
     "zone.js": "^0.10.3",
     "lodash-es": "^4.17.15",

projects/common/package.json

@@ -7,6 +7,10 @@ describe('Time duration', () => {
     expect(new TimeDuration(4, TimeUnit.Hour).toMillis()).toBe(4 * 60 * 60 * 1000);
   });
 
+  test('converts to ISO 8601 duration string correctly', () => {
+    expect(new TimeDuration(1, TimeUnit.Hour).toIso8601DurationString()).toBe('PT3600S');
+  });
+
   test('can print a multi unit string', () => {
     expect(
       new TimeDuration(4 * 60 * 60 * 1000 + 3 * 60 * 1000 + 5 * 1000 + 689, TimeUnit.Millisecond).toMultiUnitString(
@@ -76,4 +80,14 @@ describe('Time duration', () => {
       new TimeDuration(0, TimeUnit.Millisecond)
     );
   });
+
+  test('can parse ISO 8601 duration string', () => {
+    let duration = TimeDuration.parse('PT1H');
+    expect(duration.value).toBe(3600);
+    expect(duration.unit).toBe(TimeUnit.Second);
+
+    duration = TimeDuration.parse('PT1H5M');
+    expect(duration.value).toBe(3900);
+    expect(duration.unit).toBe(TimeUnit.Second);
+  });
 });

projects/common/src/time/time-duration.test.ts

@@ -1,8 +1,10 @@
+import { parse, toSeconds } from 'iso8601-duration';
 import { assertUnreachable } from '../utilities/lang/lang-utils';
 import { TimeUnit } from './time-unit.type';
 
 export class TimeDuration {
   private readonly millis: number;
+
   public constructor(public readonly value: number, public readonly unit: TimeUnit) {
     this.toUnitString(); // Fail if unrecognized TimeUnit
     this.millis = this.normalizeToMillis(value, unit);
@@ -12,10 +14,18 @@ export class TimeDuration {
     return this.millis;
   }
 
+  public static parse(durationString: string): TimeDuration {
+    return new TimeDuration(toSeconds(parse(durationString)), TimeUnit.Second);
+  }
+
   public getAmountForUnit(unit: ConvertibleTimeUnit): number {
     return this.toMillis() / this.unitInMillis(unit);
   }
 
+  public toIso8601DurationString(): string {
+    return `PT${this.toMillis() / 1000}S`;
+  }
+
   public toMultiUnitString(
     smallestUnit: ConvertibleTimeUnit = TimeUnit.Second,
     displayZero: boolean = true,

projects/common/src/time/time-duration.ts

@@ -30,7 +30,7 @@ export class OverlayService {
       parentInjector: injector,
       position: {
         type: PopoverPositionType.Fixed,
-        location: PopoverFixedPositionLocation.RightUnderHeader
+        location: config.position ?? PopoverFixedPositionLocation.RightUnderHeader
       },
       data: metadata
     });

projects/components/src/overlay/overlay.service.ts

@@ -2,7 +2,7 @@ import { ChangeDetectionStrategy, Component, Inject, Injector, TemplateRef, Type
 import { IconType } from '@hypertrace/assets-library';
 import { GLOBAL_HEADER_HEIGHT, LayoutChangeService } from '@hypertrace/common';
 import { ButtonStyle } from '../../button/button';
-import { POPOVER_DATA } from '../../popover/popover';
+import { PopoverFixedPositionLocation, POPOVER_DATA } from '../../popover/popover';
 import { PopoverRef } from '../../popover/popover-ref';
 import { SheetConstructionData } from '../overlay.service';
 import { SheetOverlayConfig, SheetSize } from './sheet';
@@ -58,7 +58,7 @@ export class SheetOverlayComponent {
     this.size = sheetConfig.size;
     this.isComponentSheet = !(sheetConfig.content instanceof TemplateRef);
     this.renderer = sheetConfig.content;
-    this.popoverRef.height(`calc(100vh - ${globalHeaderHeight})`);
+    this.popoverRef.height(this.getHeightForPopover(globalHeaderHeight, sheetConfig.position));
 
     if (this.size === SheetSize.ResponsiveExtraLarge) {
       this.popoverRef.width('60%');
@@ -79,4 +79,8 @@ export class SheetOverlayComponent {
     this.visible = false;
     this.popoverRef.close();
   }
+
+  private getHeightForPopover(globalHeaderHeight: string, position?: PopoverFixedPositionLocation): string {
+    return position === PopoverFixedPositionLocation.Right ? '100vh' : `calc(100vh - ${globalHeaderHeight})`;
+  }
 }

projects/components/src/overlay/sheet/sheet-overlay.component.ts

@@ -1,10 +1,12 @@
 import { InjectionToken } from '@angular/core';
 import { Observable } from 'rxjs';
+import { PopoverFixedPositionLocation } from '../../popover/popover';
 import { OverlayConfig } from './../overlay';
 
 export interface SheetOverlayConfig<TData = unknown> extends OverlayConfig {
   size: SheetSize;
   data?: TData;
+  position?: PopoverFixedPositionLocation.Right | PopoverFixedPositionLocation.RightUnderHeader;
 }
 
 export const enum SheetSize {

projects/components/src/overlay/sheet/sheet.ts

@@ -107,6 +107,8 @@ export class PopoverPositionBuilder {
     switch (popoverPosition.location) {
       case PopoverFixedPositionLocation.Centered:
         return globalPosition.centerHorizontally().centerVertically();
+      case PopoverFixedPositionLocation.Right:
+        return globalPosition.right('0').top('0');
       case PopoverFixedPositionLocation.RightUnderHeader:
       default:
         return globalPosition.right('0').top(this.headerHeight ?? '0');