chore: merge distributed-tracing into observability

ONBOARDING.md

@@ -25,7 +25,6 @@ This documents contains the onboarding guide for hypertrace-ui.
   - [Common](https://github.com/hypertrace/hypertrace-ui/tree/main/projects/common)
   - [Components](https://github.com/hypertrace/hypertrace-ui/tree/main/projects/components)
   - [Dashboards](https://github.com/hypertrace/hypertrace-ui/tree/main/projects/dashboards)
-  - [Distributed Tracing](https://github.com/hypertrace/hypertrace-ui/tree/main/projects/distributed-tracing)
   - [Observability](https://github.com/hypertrace/hypertrace-ui/tree/main/projects/observability)
 
 - [Hypertrace ui app](https://github.com/hypertrace/hypertrace-ui/tree/main/src)

angular.json

@@ -29,11 +29,6 @@
                 "input": "./projects/assets-library/assets",
                 "output": "./assets"
               },
-              {
-                "glob": "**/*",
-                "input": "./projects/distributed-tracing/assets",
-                "output": "./assets"
-              },
               {
                 "glob": "**/*",
                 "input": "./projects/observability/assets",
@@ -177,40 +172,6 @@
         }
       }
     },
-    "distributed-tracing": {
-      "root": "projects/distributed-tracing",
-      "sourceRoot": "projects/distributed-tracing",
-      "projectType": "library",
-      "prefix": "lib",
-      "architect": {
-        "build": {
-          "builder": "@angular-devkit/build-angular:ng-packagr",
-          "options": {
-            "tsConfig": "projects/distributed-tracing/tsconfig.lib.json",
-            "project": "projects/distributed-tracing/ng-package.json"
-          },
-          "configurations": {
-            "production": {
-              "tsConfig": "projects/distributed-tracing/tsconfig.lib.prod.json"
-            }
-          }
-        },
-        "test": {
-          "builder": "@angular-builders/jest:run",
-          "options": {}
-        },
-        "lint": {
-          "builder": "@angular-devkit/build-angular:tslint",
-          "options": {
-            "tsConfig": [
-              "projects/distributed-tracing/tsconfig.lib.json",
-              "projects/distributed-tracing/tsconfig.spec.json"
-            ],
-            "exclude": ["**/node_modules/**"]
-          }
-        }
-      }
-    },
     "components": {
       "root": "projects/components",
       "sourceRoot": "projects/components",

jest.config.debug.js

@@ -25,7 +25,6 @@ module.exports = {
     '@hypertrace/dashboards/testing': '<rootDir>/projects/dashboards/src/test/public-api.ts',
     '@hypertrace/test-utils': '<rootDir>/projects/test-utils/src/public-api.ts',
     '@hypertrace/graphql-client': '<rootDir>/projects/graphql-client/src/public-api.ts',
-    '@hypertrace/distributed-tracing': '<rootDir>/projects/distributed-tracing/src/public-api.ts',
     '@hypertrace/observability': '<rootDir>/projects/observability/src/public-api.ts'
   }
 };

jest.config.js

@@ -50,7 +50,6 @@ module.exports = {
     '@hypertrace/dashboards/testing': '<rootDir>/projects/dashboards/src/test/public-api.ts',
     '@hypertrace/test-utils': '<rootDir>/projects/test-utils/src/public-api.ts',
     '@hypertrace/graphql-client': '<rootDir>/projects/graphql-client/src/public-api.ts',
-    '@hypertrace/distributed-tracing': '<rootDir>/projects/distributed-tracing/src/public-api.ts',
     '@hypertrace/observability': '<rootDir>/projects/observability/src/public-api.ts'
   }
 };

projects/components/src/modal/modal-container.component.scss

@@ -11,36 +11,6 @@
   display: flex;
   flex-direction: column;
 
-  &.modal-size-small {
-    height: 365px;
-    width: 420px;
-  }
-
-  &.modal-size-medium {
-    height: 530px;
-    width: 456px;
-  }
-
-  &.modal-size-large-short {
-    height: 540px;
-    width: 640px;
-  }
-
-  &.modal-size-large {
-    height: 720px;
-    width: 640px;
-  }
-
-  &.modal-size-large-tall {
-    height: 800px;
-    width: 640px;
-  }
-
-  &.modal-size-medium-wide {
-    height: 600px;
-    width: 840px;
-  }
-
   .header {
     display: flex;
     flex-direction: column;

projects/components/src/modal/modal-container.component.test.ts

@@ -22,6 +22,12 @@ class TestComponent {
 describe('Modal Container component', () => {
   let spectator: Spectator<ModalContainerComponent>;
 
+  const checkSyles = (width: string, height: string): void => {
+    const modalContainer = spectator.query('.modal-container') as HTMLElement;
+    expect(modalContainer.style.height).toBe(height);
+    expect(modalContainer.style.width).toBe(width);
+  };
+
   const createHost = createHostFactory({
     component: ModalContainerComponent,
     shallow: true,
@@ -77,14 +83,77 @@ describe('Modal Container component', () => {
     expect(spectator.query('.header')).toHaveText('Create User');
   });
 
-  test('uses the requested size', () => {
+  test('uses the requested small size', () => {
     spectator = createConfiguredHost({
       showControls: true,
       title: 'Create User',
       content: TestComponent,
       size: ModalSize.Small
     });
-    expect(spectator.query('.modal-container')).toHaveClass('modal-size-small');
+    checkSyles('420px', '365px');
+  });
+
+  test('uses the requested medium size', () => {
+    spectator = createConfiguredHost({
+      showControls: true,
+      title: 'Create User',
+      content: TestComponent,
+      size: ModalSize.Medium
+    });
+    checkSyles('456px', '530px');
+  });
+
+  test('uses the requested large-short size', () => {
+    spectator = createConfiguredHost({
+      showControls: true,
+      title: 'Create User',
+      content: TestComponent,
+      size: ModalSize.LargeShort
+    });
+    checkSyles('640px', '540px');
+  });
+
+  test('uses the requested large size', () => {
+    spectator = createConfiguredHost({
+      showControls: true,
+      title: 'Create User',
+      content: TestComponent,
+      size: ModalSize.Large
+    });
+    checkSyles('640px', '720px');
+  });
+
+  test('uses the requested large-tall size', () => {
+    spectator = createConfiguredHost({
+      showControls: true,
+      title: 'Create User',
+      content: TestComponent,
+      size: ModalSize.LargeTall
+    });
+    checkSyles('640px', '800px');
+  });
+
+  test('uses the requested medium-wide size', () => {
+    spectator = createConfiguredHost({
+      showControls: true,
+      title: 'Create User',
+      content: TestComponent,
+      size: ModalSize.MediumWide
+    });
+    checkSyles('840px', '600px');
+  });
+
+  test('custom size', () => {
+    spectator = createConfiguredHost({
+      showControls: true,
+      title: 'Create User',
+      content: TestComponent,
+      size: {
+        width: 100,
+        height: 100
+      }
+    });
+    checkSyles('100px', '100px');
   });
 
   test('closes on close button click', () => {

projects/components/src/modal/modal-container.component.ts

@@ -4,14 +4,14 @@ import { LayoutChangeService } from '@hypertrace/common';
 import { ButtonSize, ButtonStyle } from '../button/button';
 import { POPOVER_DATA } from '../popover/popover';
 import { PopoverRef } from '../popover/popover-ref';
-import { ModalConfig, ModalSize, MODAL_DATA } from './modal';
+import { getModalDimensions, ModalConfig, ModalDimension, MODAL_DATA } from './modal';
 
 @Component({
   selector: 'ht-modal-container',
   styleUrls: ['./modal-container.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: `
-    <div *ngIf="this.visible" class="modal-container" [ngClass]="'modal-size-' + this.size">
+    <div *ngIf="this.visible" class="modal-container" [style.height]="this.size.height" [style.width]="this.size.width">
       <div class="header">
         <ht-button
           *ngIf="this.showControls"
@@ -41,7 +41,7 @@ import { ModalConfig, ModalSize, MODAL_DATA } from './modal';
 export class ModalContainerComponent {
   public readonly modalTitle: string;
   public readonly showControls: boolean;
-  public readonly size: ModalSize;
+  public readonly size: ModalDimension;
   public readonly isComponentModal: boolean;
   public readonly renderer: TemplateRef<unknown> | Type<unknown>;
   public readonly rendererInjector: Injector;
@@ -58,7 +58,9 @@ export class ModalContainerComponent {
     const config = constructionData.config;
     this.showControls = config.showControls ?? false;
     this.modalTitle = config.title ?? '';
-    this.size = config.size;
+    this.size = this.isModalDimension(config.size)
+      ? this.getDimensionsWithUnits(config.size)
+      : this.getDimensionsWithUnits(getModalDimensions(config.size));
     this.isComponentModal = !(config.content instanceof TemplateRef);
     this.closeOnEscape = config.closeOnEscapeKey ?? true;
     this.renderer = config.content;
@@ -85,6 +87,24 @@ export class ModalContainerComponent {
     this.visible = false;
     this.popoverRef.close();
   }
+
+  private isModalDimension(size: unknown): size is ModalDimension {
+    // tslint:disable-next-line:strict-type-predicates
+    return typeof size === 'object' && size !== null && (size as ModalDimension).width !== undefined;
+  }
+
+  private getDimensionsWithUnits(dims: ModalDimension): ModalDimension {
+    const dimsWithUnits: ModalDimension = { ...dims };
+    if (typeof dims.height === 'number') {
+      dimsWithUnits.height = `${dims.height}px`;
+    }
+
+    if (typeof dims.width === 'number') {
+      dimsWithUnits.width = `${dims.width}px`;
+    }
+
+    return dimsWithUnits;
+  }
 }
 
 export interface ModalConstructionData {

projects/components/src/modal/modal.ts

@@ -2,8 +2,8 @@ import { InjectionToken, TemplateRef, Type } from '@angular/core';
 import { Observable } from 'rxjs';
 
 export interface ModalConfig<TData = unknown> {
-  size: ModalSize;
   content: TemplateRef<unknown> | Type<unknown>;
+  size: ModalSize | ModalDimension;
   showControls?: boolean;
   title?: string;
   data?: TData;
@@ -19,6 +19,33 @@ export const enum ModalSize {
   MediumWide = 'medium-wide'
 }
 
+export interface ModalDimension {
+  // Number => without unit (considered px) and String => with units (expression included)
+  width: number | string;
+  height: number | string;
+}
+
+export const getModalDimensions = (modalSize: ModalSize): ModalDimension => {
+  switch (modalSize) {
+    case ModalSize.Small:
+      return getModalDimensionObject(420, 365);
+    case ModalSize.Medium:
+      return getModalDimensionObject(456, 530);
+    case ModalSize.LargeShort:
+      return getModalDimensionObject(640, 540);
+    case ModalSize.Large:
+      return getModalDimensionObject(640, 720);
+    case ModalSize.LargeTall:
+      return getModalDimensionObject(640, 800);
+    case ModalSize.MediumWide:
+      return getModalDimensionObject(840, 600);
+    default:
+      return getModalDimensionObject(420, 365);
+  }
+};
+
+const getModalDimensionObject = (width: number, height: number): ModalDimension => ({ width: width, height: height });
+
 export const MODAL_DATA = new InjectionToken<unknown>('MODAL_DATA');
 
 export abstract class ModalRef<TResult> {

projects/components/src/table/cells/data-parsers/table-cell-string-parser.ts

@@ -1,4 +1,4 @@
-import { MetricAggregation } from '@hypertrace/distributed-tracing';
+import { MetricAggregation } from '@hypertrace/observability';
 import { TableCellParser } from '../table-cell-parser';
 import { TableCellParserBase } from '../table-cell-parser-base';
 import { CoreTableCellParserType } from '../types/core-table-cell-parser-type';

projects/dashboards/src/test/dashboard-verification.ts

@@ -9,10 +9,10 @@ import {
   TimeRangeService,
   TimeUnit
 } from '@hypertrace/common';
-import { GraphQlQueryEventService, MetadataService } from '@hypertrace/distributed-tracing';
 import { GraphQlRequestService } from '@hypertrace/graphql-client';
 import { ModelJson } from '@hypertrace/hyperdash';
 import { DashboardManagerService, LoggerService, RENDERER_API } from '@hypertrace/hyperdash-angular';
+import { GraphQlQueryEventService, MetadataService } from '@hypertrace/observability';
 import { getMockFlexLayoutProviders } from '@hypertrace/test-utils';
 import { mockProvider, Spectator } from '@ngneat/spectator/jest';
 import { EMPTY, of } from 'rxjs';