Merge the latest changes from upstream

Dockerfile

@@ -1,5 +1,6 @@
 FROM nginx:1.21-alpine
 COPY dist/hypertrace-ui /usr/share/nginx/html
 COPY conf/default.conf /etc/nginx/conf.d/default.conf
+RUN chmod a+w /var/cache/nginx /var/run
 EXPOSE 2020
 HEALTHCHECK --interval=1s --retries=5 --timeout=1s CMD wget -qO- http://localhost:2020/graphql?query={__schema{queryType{name}}} &> /dev/null || exit 1

package.json

@@ -15,7 +15,7 @@
     "build:components": "ng build components",
     "build:dashboards": "ng build dashboards",
     "build:ci": "node --max_old_space_size=3584 node_modules/@angular/cli/bin/ng build --configuration production --no-progress",
-    "test": "ng test hypertrace-ui --cache",
+    "test": "ng test hypertrace-ui --cache --maxWorkers=2",
     "lint": "ng lint hypertrace-ui",
     "lint:fix": "ng lint --fix hypertrace-ui",
     "prettier:check": "prettier --check '**'",
@@ -30,20 +30,20 @@
     "@angular/common": "^12.2.1",
     "@angular/compiler": "^12.2.1",
     "@angular/core": "^12.2.1",
-    "@angular/flex-layout": "^12.0.0-beta.34",
+    "@angular/flex-layout": "^12.0.0-beta.35",
     "@angular/forms": "^12.2.1",
     "@angular/material": "^12.2.1",
     "@angular/platform-browser": "^12.2.1",
     "@angular/platform-browser-dynamic": "^12.2.1",
     "@angular/router": "^12.2.1",
-    "@apollo/client": "^3.4.13",
+    "@apollo/client": "^3.5.5",
     "@fullstory/browser": "^1.4.9",
     "@hypertrace/hyperdash": "^1.2.1",
     "@hypertrace/hyperdash-angular": "^2.6.0",
     "@types/d3-hierarchy": "^2.0.2",
     "@types/d3-transition": "1.1.5",
     "apollo-angular": "^2.6.0",
-    "core-js": "^3.18.1",
+    "core-js": "^3.20.1",
     "d3-array": "^2.12.0",
     "d3-axis": "^2.1.0",
     "d3-brush": "^1.1.6",
@@ -59,11 +59,12 @@
     "d3-shape": "^1.3.5",
     "d3-transition": "^1.2.0",
     "d3-zoom": "^1.8.3",
-    "graphql": "^15.6.0",
-    "graphql-tag": "^2.12.5",
+    "graphql": "^15.8.0",
+    "graphql-tag": "^2.12.6",
     "iso8601-duration": "^1.3.0",
     "lodash-es": "^4.17.21",
-    "mixpanel-browser": "^2.41.0",
+    "mixpanel-browser": "^2.42.1",
+    "ngx-color": "7.0.0",
     "rxjs": "~6.6.7",
     "tslib": "^2.3.1",
     "uuid": "^8.3.2",
@@ -75,42 +76,42 @@
     "@angular/cli": "12.2.1",
     "@angular/compiler-cli": "~12.2.1",
     "@angular/language-service": "~12.2.1",
-    "@commitlint/cli": "^13.1.0",
-    "@commitlint/config-conventional": "^13.1.0",
-    "@compodoc/compodoc": "^1.1.14",
-    "@ngneat/spectator": "^8.1.0",
+    "@commitlint/cli": "^16.0.1",
+    "@commitlint/config-conventional": "^15.0.0",
+    "@compodoc/compodoc": "^1.1.16",
+    "@ngneat/spectator": "^8.3.2",
     "@types/d3-array": "^2.9.0",
     "@types/d3-axis": "^2.0.0",
     "@types/d3-brush": "^2.1.0",
     "@types/d3-drag": "^1.2.3",
     "@types/d3-force": "^2.1.0",
     "@types/d3-path": "^2.0.0",
     "@types/d3-quadtree": "^1.0.7",
-    "@types/d3-scale": "^2.1.1",
+    "@types/d3-scale": "^2.2.6",
     "@types/d3-selection": "^1.4.2",
     "@types/d3-shape": "^2.1.0",
     "@types/d3-zoom": "^1.7.5",
-    "@types/jest": "^26.0.24",
+    "@types/jest": "^27.4.0",
     "@types/lodash-es": "^4.17.5",
     "@types/mixpanel-browser": "^2.35.7",
-    "@types/node": "^16.7.10",
+    "@types/node": "^17.0.5",
     "@types/uuid": "^8.3.1",
-    "@types/webpack-env": "^1.16.2",
+    "@types/webpack-env": "^1.16.3",
     "codelyzer": "^6.0.2",
     "commitizen": "^4.2.4",
     "cz-conventional-changelog": "^3.3.0",
-    "husky": "^7.0.0",
+    "husky": "^7.0.4",
     "jest": "^26.6.3",
-    "jest-config": "^27.2.0",
-    "jest-html-reporter": "^3.4.1",
+    "jest-config": "^27.4.4",
+    "jest-html-reporter": "^3.4.2",
     "jest-junit": "^13.0.0",
     "jest-preset-angular": "^8.4.0",
     "lodash": "^4.17.21",
-    "ng-mocks": "^12.5.0",
-    "ng-packagr": "^12.2.1",
+    "ng-mocks": "^12.5.1",
+    "ng-packagr": "^12.2.5",
     "prettier": "^2.2.1",
-    "pretty-quick": "^3.1.1",
-    "ts-node": "~10.2.1",
+    "pretty-quick": "^3.1.2",
+    "ts-node": "~10.4.0",
     "tslint": "~6.1.3",
     "tslint-config-prettier": "^1.18.0",
     "typescript": "~4.3.5",

projects/assets-library/src/images/image-type.ts

@@ -0,0 +1,6 @@
+export const enum ImagesAssetPath {
+  ErrorPage = 'assets/images/error-page.svg',
+  LoaderSpinner = 'assets/images/loader-spinner.gif',
+  LoaderPage = 'assets/images/loader-page.gif',
+  LoaderExpandableRow = 'assets/images/loader-expandable-row.gif'
+}

projects/assets-library/src/public-api.ts

@@ -6,3 +6,4 @@ export * from './icons/icon-type';
 export * from './icons/icon-registry.service';
 export * from './icons/icon-library.module';
 export * from './icons/testing/icon-library-testing.module';
+export * from './images/image-type';

projects/common/src/navigation/navigation.service.test.ts

@@ -2,9 +2,7 @@ import { Location } from '@angular/common';
 import { Title } from '@angular/platform-browser';
 import { Router, UrlSegment } from '@angular/router';
 import { RouterTestingModule } from '@angular/router/testing';
-import { IconType } from '@hypertrace/assets-library';
 import { APP_TITLE } from '@hypertrace/common';
-import { NavItemType } from '@hypertrace/components';
 import { patchRouterNavigateForTest } from '@hypertrace/test-utils';
 import { createServiceFactory, mockProvider, SpectatorService } from '@ngneat/spectator/jest';
 import {
@@ -298,36 +296,6 @@ describe('Navigation Service', () => {
     }
   });
 
-  test('decorating navItem with features work as expected', () => {
-    expect(
-      spectator.service.decorateNavItem(
-        {
-          type: NavItemType.Header,
-          label: 'Label'
-        },
-        spectator.service.getCurrentActivatedRoute()
-      )
-    ).toEqual({ type: NavItemType.Header, label: 'Label' });
-
-    expect(
-      spectator.service.decorateNavItem(
-        {
-          type: NavItemType.Link,
-          label: 'Label',
-          icon: IconType.None,
-          matchPaths: ['root']
-        },
-        spectator.service.rootRoute()
-      )
-    ).toEqual({
-      type: NavItemType.Link,
-      label: 'Label',
-      icon: IconType.None,
-      matchPaths: ['root'],
-      features: ['test-feature']
-    });
-  });
-
   test('setting title should work as expected', () => {
     router.navigate(['root', 'child']);
     expect(spectator.inject(Title).setTitle).toHaveBeenCalledWith('defaultAppTitle | child1');

projects/common/src/navigation/navigation.service.ts

@@ -14,8 +14,6 @@ import {
   UrlSegment,
   UrlTree
 } from '@angular/router';
-import { NavItemConfig, NavItemType } from '@hypertrace/components';
-import { uniq } from 'lodash-es';
 import { from, Observable, of } from 'rxjs';
 import { distinctUntilChanged, filter, map, share, skip, startWith, switchMap, take, tap } from 'rxjs/operators';
 import { isEqualIgnoreFunctions, throwIfNil } from '../utilities/lang/lang-utils';
@@ -243,26 +241,6 @@ export class NavigationService {
     return this.findRouteConfig(path, childRoutes ? childRoutes : []);
   }
 
-  public decorateNavItem(navItem: NavItemConfig, activatedRoute: ActivatedRoute): NavItemConfig {
-    if (navItem.type !== NavItemType.Link) {
-      return { ...navItem };
-    }
-    const features = navItem.matchPaths
-      .map(path => this.getRouteConfig([path], activatedRoute))
-      .filter((maybeRoute): maybeRoute is HtRoute => maybeRoute !== undefined)
-      .flatMap(route => this.getFeaturesForRoute(route))
-      .concat(navItem.features || []);
-
-    return {
-      ...navItem,
-      features: uniq(features)
-    };
-  }
-
-  private getFeaturesForRoute(route: HtRoute): string[] {
-    return (route.data && route.data.features) || [];
-  }
-
   public rootRoute(): ActivatedRoute {
     return this.router.routerState.root;
   }
@@ -376,7 +354,7 @@ export class NavigationService {
 }
 
 export interface QueryParamObject extends Params {
-  [key: string]: string | string[] | number | number[] | undefined;
+  [key: string]: string | string[] | boolean | boolean[] | number | number[] | undefined;
 }
 
 export type NavigationPath = string | (string | Dictionary<string>)[];

projects/common/src/preference/preference.service.ts

@@ -1,42 +1,61 @@
 import { Injectable } from '@angular/core';
 import { Observable, of, throwError } from 'rxjs';
 import { map, switchMap } from 'rxjs/operators';
+import { AbstractStorage } from '../utilities/browser/storage/abstract-storage';
 import { LocalStorage } from '../utilities/browser/storage/local-storage';
+import { SessionStorage } from '../utilities/browser/storage/session-storage';
 import { BooleanCoercer } from '../utilities/coercers/boolean-coercer';
 import { NumberCoercer } from '../utilities/coercers/number-coercer';
 
+export const enum StorageType {
+  Local = 'local',
+  Session = 'session'
+}
+
 @Injectable({
   providedIn: 'root'
 })
 export class PreferenceService {
+  private static readonly DEFAULT_STORAGE_TYPE: StorageType = StorageType.Local;
+
   private static readonly PREFERENCE_STORAGE_NAMESPACE: string = 'preference';
   private static readonly SEPARATOR_CHAR: string = '.';
   private static readonly SEPARATOR_REGEX: RegExp = /\.(.+)/;
   private readonly numberCoercer: NumberCoercer = new NumberCoercer();
   private readonly booleanCoercer: BooleanCoercer = new BooleanCoercer();
 
-  public constructor(private readonly preferenceStorage: LocalStorage) {}
+  public constructor(private readonly localStorage: LocalStorage, private readonly sessionStorage: SessionStorage) {}
 
   /**
    * Returns the current storage value if defined, else the default value. The observable
    * will continue to emit as the preference is updated, reverting to default value if the
    * preference becomes unset. If default value is not provided, the observable will
    * throw in the case the preference is unset.
    */
-  public get<T extends PreferenceValue>(key: PreferenceKey, defaultValue?: T): Observable<T> {
-    return this.preferenceStorage.watch(this.asStorageKey(key)).pipe(
-      map(storedValue => this.fromStorageValue<T>(storedValue) ?? defaultValue),
-      switchMap(value =>
-        value === undefined
-          ? throwError(Error(`No value found or default provided for preferenceKey: ${key}`))
-          : of(value)
-      )
-    );
+  public get<T extends PreferenceValue>(
+    key: PreferenceKey,
+    defaultValue?: T,
+    type: StorageType = PreferenceService.DEFAULT_STORAGE_TYPE
+  ): Observable<T> {
+    return this.preferenceStorage(type)
+      .watch(this.asStorageKey(key))
+      .pipe(
+        map(storedValue => this.fromStorageValue<T>(storedValue) ?? defaultValue),
+        switchMap(value =>
+          value === undefined
+            ? throwError(Error(`No value found or default provided for preferenceKey: ${key}`))
+            : of(value)
+        )
+      );
   }
 
-  public set(key: PreferenceKey, value: PreferenceValue): void {
+  public set(
+    key: PreferenceKey,
+    value: PreferenceValue,
+    type: StorageType = PreferenceService.DEFAULT_STORAGE_TYPE
+  ): void {
     const val = this.asStorageValue(value);
-    this.preferenceStorage.set(this.asStorageKey(key), val);
+    this.preferenceStorage(type).set(this.asStorageKey(key), val);
   }
 
   private asStorageKey(key: PreferenceKey): PreferenceStorageKey {
@@ -70,6 +89,16 @@ export class PreferenceService {
         return undefined;
     }
   }
+
+  private preferenceStorage(type: StorageType): AbstractStorage {
+    switch (type) {
+      case StorageType.Session:
+        return this.sessionStorage;
+      case StorageType.Local:
+      default:
+        return this.localStorage;
+    }
+  }
 }
 
 type PreferenceStorageKey = string;

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

@@ -0,0 +1,17 @@
+import { Time } from './time';
+
+describe('Time', () => {
+  const mockedTime = new Time(8, 30);
+
+  test('can get label', () => {
+    expect(mockedTime.label).toBe('8:30 AM');
+  });
+
+  test('can get date', () => {
+    expect(mockedTime.date).toEqual(new Date(`${new Date().toDateString()} 08:30Z`));
+  });
+
+  test('can get ISO String from time', () => {
+    expect(mockedTime.toISOString()).toBe('08:30:00.000Z');
+  });
+});

projects/common/src/time/time.ts

@@ -31,4 +31,8 @@ export class Time {
   public get date(): Date {
     return this._date;
   }
+
+  public toISOString(): string {
+    return this.date.toISOString().substring(11);
+  }
 }

projects/common/src/utilities/browser/storage/session-storage.ts

@@ -0,0 +1,9 @@
+import { Injectable } from '@angular/core';
+import { AbstractStorage } from './abstract-storage';
+
+@Injectable({ providedIn: 'root' })
+export class SessionStorage extends AbstractStorage {
+  public constructor() {
+    super(sessionStorage);
+  }
+}

projects/components/package.json

@@ -27,7 +27,8 @@
     "d3-axis": "^2.1.0",
     "d3-scale": "^3.3.0",
     "d3-selection": "^1.4.2",
-    "d3-shape": "^1.3.5"
+    "d3-shape": "^1.3.5",
+    "ngx-color": "7.0.0"
   },
   "devDependencies": {
     "@hypertrace/test-utils": "^0.0.0"

projects/components/src/button/button.component.test.ts

@@ -4,7 +4,7 @@ import { TrackDirective } from '@hypertrace/common';
 import { createHostFactory, Spectator } from '@ngneat/spectator/jest';
 import { MockDirective } from 'ng-mocks';
 import { IconSize } from '../icon/icon-size';
-import { ButtonRole, ButtonSize, ButtonStyle } from './button';
+import { ButtonRole, ButtonSize, ButtonStyle, ButtonType } from './button';
 import { ButtonComponent } from './button.component';
 import { ButtonModule } from './button.module';
 
@@ -26,7 +26,22 @@ describe('Button Component', () => {
       }
     });
 
-    expect(spectator.query('.button')).toHaveClass('button secondary small solid');
+    const buttonEl = spectator.query('.button');
+    expect(buttonEl).toHaveClass('button secondary small solid');
+    expect(buttonEl).toHaveAttribute('type', 'button');
+  });
+
+  test('should set correct button type', () => {
+    spectator = createHost(`<ht-button [label]="label" [type]="type"></ht-button>`, {
+      hostProps: {
+        label: 'Button',
+        type: ButtonType.Submit
+      }
+    });
+
+    const buttonEl = spectator.query('.button');
+    expect(buttonEl).toHaveClass('button secondary small solid');
+    expect(buttonEl).toHaveAttribute('type', 'submit');
   });
 
   test('should have correct style class for selected role', () => {