From 84c4e69ac0238e6476d03b58183c2e5653e84904 Mon Sep 17 00:00:00 2001 From: Sandeep Kumar Sharma Date: Mon, 7 Mar 2022 00:10:25 +0530 Subject: [PATCH 01/32] feat: update readme --- README.md | 460 +++++++++++++++++++++++++++++++++++++++++++++++++++--- 1 file changed, 437 insertions(+), 23 deletions(-) diff --git a/README.md b/README.md index db38e0447..a98dbf6a6 100644 --- a/README.md +++ b/README.md @@ -1,48 +1,462 @@ -# Hypertrace UI +

+ + Logo + -![build-and-test](https://github.com/hypertrace/hypertrace-ui/workflows/build-and-test/badge.svg) -[![codecov](https://codecov.io/gh/hypertrace/hypertrace-ui/branch/main/graph/badge.svg)](https://codecov.io/gh/hypertrace/hypertrace-ui) +

Hypertrace-UI

+

+ User interface for an open source distributed tracing & observability platform! +
+ More about hypertrace » +
+
+

+ [![Contributors][contributors-shield]][contributors-url] + [![Forks][forks-shield]][forks-url] + [![Stargazers][stars-shield]][stars-url] + [![Issues][issues-shield]][issues-url] +

+

+

-## Prerequisites +## Table of Contents -Install Node + NPM +- [Setup](#setup) +- [Technologies](#technologies) +- [Code Architecture](#code-architecture) +- [The Essentials](#the-essentials) + - [Angular Specifics](#angular-specifics) + - [Tables](#tables) + - [Cell Renderers](#cell-renderers) + - [Dashboards](#dasboards) + - [Widget](#widget) + - [Widget Renderer](#widget-renderer) + - [Data Source](#data-source) + - [Graphql Handlers](#graphql-handlers) +- [Testing](#testing) +- [Best Practices](#best-practices) +- [Contributions](#contributions) +- [Others](#others) + - [Building Image locally](#building-image-locally) + - [Docker Image Source](#docker-image-source) ## Setup -- Install Dependencies +Install `Node` and `npm`, if not done already ([Node and Npm](https://www.npmjs.com/get-npm)). Recommended node version is `16+`.
+[Fork](<(https://docs.github.com/en/github/getting-started-with-github/fork-a-repo)>) or clone the repository and Use following commands. - `npm install` +```sh +cd +npm ci +``` + +once done, start a development server -## Development server +```sh +npm start +``` -Run `npm start` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files. +Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files. -## Running unit tests +To run Unit test cases (execute the unit tests via Jest) -Run `npm run test` to execute the unit tests via Jest +```sh +npm run test +``` ## Technologies -1. Angular -2. Typescript -3. RxJS -4. [D3](https://d3js.org/) -5. [Spectator](https://github.com/ngneat/spectator) (_Unit Testing_) +Hypertrace-ui uses `angular` as the framework. On top of angular, following technologies are being used. -## UI Architecture +1. `Typescript` : As a core language, hypertrace-ui uses typescript instead of traditional javascript. Learn more about Typescript [here](https://www.typescriptlang.org/docs/) +2. `RxJS` : For reactive programming, hypertrace-ui uses RxJs library. Learn more about RxJs [here](https://rxjs.dev/api) +3. `D3.js` : Charts are the core part for hypertrace-ui. Charts are custom build here and use D3.js library. Learn more about D3.js [here](https://d3js.org/) +4. `Spectator`: For unit testing, hypertrace-ui uses spectator library. Learn more about Spectator [here](https://github.com/ngneat/spectator) +5. `Hyperdash & Hyperdash-Angular`: Hyperdash is dashboarding framework/library and hyperdash-angular is a wrapper, specific to angular. Learn more about dasboards in [dashboards](#dashboards) section. -| | -| :------------------------------------------------------------------------------------------------: | --- | -| _Hypertrace UI Architecture_ | d | +## Code Architecture -## Building Image locally +Hypertrace-UI code is divided into many smaller projects which gives the code base a better structure. Here are the following projects. -Hypertrace UI uses gradle to build a docker image. Gradle wrapper is already part of the source code. To build Hypertrace UI image, run: +1. `Assest Library` : This consits the assests which are being used in the application. For example images, icons etc. Check this out [here](https://github.com/hypertrace/hypertrace-ui/tree/main/projects/assets-library) +2. `Common` : This consits the common code/features such as application contants, colors, telemetry, utilities (with common angular pipes) etc. Check this out [here](https://github.com/hypertrace/hypertrace-ui/tree/main/projects/common) +3. `Components` : Hypertrace-ui has wide variety of custom made angular components. This is the place for generic components (eg. `Input` Component) and directives(eg. `LoadAsync` Directive). Check this out [here](https://github.com/hypertrace/hypertrace-ui/tree/main/projects/components) +4. `Dashboards` : This consits the common code for dashboards such as base model, properties etc. Check this out [here](https://github.com/hypertrace/hypertrace-ui/tree/main/projects/dashboards) +5. `Graphql-Client` : Hypertrace-ui uses the [apollo graphql](https://www.apollographql.com/) to fetch the data from backend. This is the place where all the base graphql request related code is present such as graphql arguments, resolvers, builders etc. Check this out [here](https://github.com/hypertrace/hypertrace-ui/tree/main/projects/graphql-client) +6. `Observability` : This consits all the different pages, components, services related to distributes tracing and observability. This is also the home for charts as well. Check this out [here](https://github.com/hypertrace/hypertrace-ui/tree/main/projects/observability) +7. `Test Utils` : This consits some unit test utilities for dashboards etc.. Check this out [here](https://github.com/hypertrace/hypertrace-ui/tree/main/projects/test-utils) +8. `UI App` : This is not a project but a entry point for hypertrace-ui app. This consists home page, routes, config module etc. Check this out [here](https://github.com/hypertrace/hypertrace-ui/tree/main/src) + +`NOTE` : Each project, consists a barrel file named `public-api.ts`. This handles all the exports at single place which improves the importing in the app. +For example + +```ts +@import { Color } from '@hypertrace/common' +``` + +## The Essentials + +Let's talk about the essentials for the development in the hypertrace-ui. + +### Angular Specifics + +Since hypertrace-ui uses `angular` as core framework, all the concepts specific to angular are being used and applied in hypertrace-ui. Such as `components`, `directives`, `pipes`, `dependency injection`, `services`, `modules`, `lazy loading` etc. Check out the angular [docs](https://angular.io/docs) for more info. + +`NOTE` : Test file name ends with `.test.ts` instead of `.spec.ts` for better readability. + +### Dashboards + +Hypertrace-UI uses dashboards to build custom pages. These dashboards are widely used in the application. These dashboards are build using `Hyperdash` and `Hyperdash-Angular` libraries. Check out both here ([Hyperdash](https://github.com/hypertrace/hyperdash/blob/main/README.md) & [Hyperdash angular](https://github.com/hypertrace/hyperdash-angular/blob/main/README.md)) +
+Let's check this example. + +`in Template` + +```html + +``` + +`in Component` + +```ts +public readonly location: string = 'HELLO_LOCATION'; +public readonly defaultJson: ModelJson = { + type: 'hello-widget', + name: 'name' + children: [], + data: { + 'upper-case': false, + type: 'hello-data-source' + } +} +``` + +Now let's break this down. + +- It will create a dasboard for an unique location. +- Dasboards are designed in a way that, it takes a modal json as input property and renders the corresponding widgets. +- There are 3 core concepts - widget , widget renderer and data source. + +Let's talk about these individually. + +#### Widget + +To create a widget, we need to create model class. +
+Continue with the above `ModelJson`. Let's create `hello-widget.model.ts` + +```ts +import { Model, ModelProperty, STRING_PROPERTY } from '@hypertrace/hyperdash'; + +@Model({ + type: 'hello-widget' +}) +export class HelloWidgetModel { + @ModelProperty({ + type: STRING_PROPERTY.type, + key: 'name', + required: false + }) + public name?: string; +} +``` + +Now let's break this down. + +- We have used decorator `Model` by which we're registering this widget (on build) for usage. +- `type` property is the unique string to define each widget. If we look closely we have used the same string as a type in the model json as well. +- We have used decorator `ModelProperty` for defining the custom properties like in this case `name`. + +But the question is how this class will render the dom? let's find out in next section! + +#### Widget Renderer + +Now after creating the widget model, let's create widget renderer component. +
+Using the same example. Let's create `hello-widget-renderer.component.ts + +```ts +import { ChangeDetectionStrategy, Component } from '@angular/core'; +import { Renderer } from '@hypertrace/hyperdash'; +import { Observable } from 'rxjs'; +import { WidgetRenderer } from '../widget-renderer'; +import { HelloWidgetModel } from './hello-widget.model'; + +@Renderer({ modelClass: HelloWidgetModel }) +@Component({ + selector: 'ht-hello-widget-renderer', + changeDetection: ChangeDetectionStrategy.OnPush, + template: `
{{ data }} {{ this.model.name }}
` +}) +export class HelloWidgetRendererComponent extends WidgetRenderer { + protected fetchData(): Observable { + return this.api.getData(); + } +} +``` + +Now let's break this down. + +- We have used decorator `Renderer` by which we're registering this widget renderer (on build) for usage. +- `modelClass` property is the same class for which we're building this renderer, inour case it is `HelloWidgetModel`. +- Now after extending the `WidgetRenderer` class, we have the access of `name` property which we defined in the model class. +- `fetchData` method is used to give us the access of `this.data$` observable. +- `htLoadAsync` directive is used to resolve the data observable, which can be done with `async` pipe as well. + +How are we getting data? Now let's understand this in the next section. + +#### Data Source + +Now after creating the widget renderer we need the data which we are using in the renderer component. +
+Continue with the above `ModelJson`. Let's create `hello-data-source.model.ts` + +```ts +import { Model, ModelProperty, STRING_PROPERTY} from '@hypertrace/hyperdash'; +import { Observable, of } from 'rxjs'; + +@Model({ + type: 'hello-data-source' +}) +export class HelloDataSourceModel { + @ModelProperty({ + key: 'upper-case', + required: false, + type: STRING_PROPERTY.type + }) + public upperCase: boolean = false; + + public getData(): Observable { + return of(this.upperCase ? 'HELLO' ? 'Hello') + } +} +``` + +Now let's break this down. + +- We have used decorator `Model` by which we're registering this data source (on build) for usage. +- `type` property is the unique string to define each data source. If we look closely we have used the same string as a type in the model json as well for key `data`. +- We have used decorator `ModelPropery` for defining the custom properties like in this case `upper-case`. +- We have implemented `getData` Method, and the same menthod we're using in the renderer component `return this.api.getData()`. + +Now after implemening all this we can use these as shown above and render the custom data. + +_Why we're doing this_? Answer is simple, once we do all this now, we can just write few lines we can render whole widget. This can be used at any place now with just few lines of code. This is a simple example foe more complex examples please check `home.dashboard.ts` and underlying all the widgets. + +### Tables + +Table is custom component in the hypertrace-ui. The following example shows how to add table inside another component. +
+Here is what table API Says: + +```ts +@Input() +public data?: TableDataSource; +``` + +```ts +@Input() +public columnConfigs?: TableColumnConfig[]; +``` + +So Let's use this. +`in Template` +```html + ``` + +`in Component` + +```ts +public datasource?: TableDataSource = { + getData : () => of({ + data: [{name: 'test-name1'}, {name: 'test-name2'}], + totalCount: 2 + }) +}; +public readonly columnConfigs: TableColumnConfig[] = [ + { + id: 'name', + title: 'Name' + visible: true, + sortable: false, + width: '48px', + } +]; +``` + +Now let's break this down. + +- It will create a table with a single column (In column configs we have only mentioned one column) and two rows (in the data source we have mentioned data as array of two objects.). +- Now if we look closely, table column config's id is same as the key we have used the key in data which is `name`. This is must for the table to render the data correctly. + +There is a lot there in the tables, like custom controls, configurations (for pagination and many other). We highly recommend you to check out the `table.component.ts` to learn about tables and check out all the different examples present in the application. + +#### Cell Renderers + +As we have talked about tables, now let's talk about the custom table cell renderers. in hypertrace-ui, we can create a custom table cell renderer to display the data in specifc format. These are nothing but angular component with another decorator `TableCellRenderer` +
+Now let's see how we can create a custom cell renderer. for example `hello-table-cell-renderer.component.ts` + +```ts +import { ChangeDetectionStrategy, Component } from '@angular/core'; +import { TableCellRenderer } from '../../table-cell-renderer'; +import { TableCellRendererBase } from '../../table-cell-renderer-base'; +import { CoreTableCellParserType } from '../../types/core-table-cell-parser-type'; +import { TableCellAlignmentType } from '../../types/table-cell-alignment-type'; + +@Component({ + selector: 'ht-hello-table-cell-renderer', + styleUrls: ['./hello-table-cell-renderer.component.scss'], + changeDetection: ChangeDetectionStrategy.OnPush, + template: `
Hello {{ this.value }}
` +}) +@TableCellRenderer({ + type: 'hello', + alignment: TableCellAlignmentType.Left, + parser: CoreTableCellParserType.NoOp +}) +export class HelloTableCellRendererComponent extends TableCellRendererBase {} +``` + +Now let's break this down. + +- We have used decorator `TableCellRenderer` by which we're registering this cell renderer (on build) for usage. +- `type` property is the unique string to define each cell renderer. +- `alignment` is used for the cell alignment, could be - left, right and center +- `parser` is used to parse the data, it is also defined in the similar way. Suppose we are getting a data as `['test1', 'test2']` and we want it be used like `{value1: 'test1', value2: 'test2'}` then we can create a custom parser and can handle this use case. For no operation we use `CoreTableCellParserType.NoOp` + +`Usage` : Now once this is done, we can use this in our table using `display` property. This will be same as the type of the cell renderer. + +`Module import` + +```ts +TableModule.withCellRenderers([HelloTableCellRendererComponent]); +``` + +`in Component` + +```ts +public readonly columnConfigs: TableColumnConfig[] = [ + { + id: 'name', + title: 'Name' + display: 'hello' + visible: true, + sortable: false, + width: '48px', + } +]; +``` + +`NOTE`: We highly recommend you to check out all the existing example of table and cell renderers to learn about these more. + +## GraphQl Handlers + +There are two type of graphql handlers we use. + +1. `Query` : To get the data from server / backend. +2. `Mutation` : For delete, post and put use cases. + +Let's see an example of a query graphql-handler: + +```ts +import { Injectable } from '@angular/core'; +import { GraphQlHandlerType, GraphQlQueryHandler, GraphQlSelection } from '@hypertrace/graphql-client'; + +@Injectable({ providedIn: 'root' }) +export class HelloGraphQlQueryHandlerService implements GraphQlQueryHandler { + public readonly type: GraphQlHandlerType.Query = GraphQlHandlerType.Query; + + public matchesRequest(request: unknown): request is GraphQlHelloRequest { + return ( + typeof request === 'object' && + request !== null && + (request as Partial).requestType === HELLO_GQL_REQUEST + ); + } + + public convertRequest(request: GraphQlHelloRequest): GraphQlSelection { + return { + path: 'getHello', + children: [ + { + path: 'result' + } + ] + }; + } + + public convertResponse(response: ExportSpansResponse): string | undefined { + return response.result; + } +} + +export const HELLO_GQL_REQUEST = Symbol('GraphQL Hello Request'); + +export interface GraphQlHelloRequest { + requestType: typeof HELLO_GQL_REQUEST; +} + +export interface GraphQlHelloResponse { + result: string; +} +``` + +Now let's break this down. + +- We have used a unique symbol, as a type for the request. +- Two interfaces `GraphQlHelloRequest` and `GraphQlHelloResponse` for request and response. +- `matchesRequest` method is used to verify the request. +- `convertRequest` method is used for converting request into graphql selection. +- `convertResponse` method is used to convert the response into desired format. + +`Usage` : Now once this is done, we can use this in the service/component + +`Module import` + +```ts +GraphQlModule.withHandlerProviders([HelloGraphQlQueryHandlerService]); +``` + +`in Component/Service` + +```ts +// Injection +private readonly graphQlQueryService: GraphQlRequestService + +// Usage +this.graphQlQueryService.query({ + requestType: HELLO_GQL_REQUEST +}) +``` + +## Testing + +Testing is an integral part of hypertrace-ui and hypertrace-ui maintains a good amount of code coverage using unit tests! We use `Spectator` library to test components. services, directives, pipes, dashboards etc. We always write `shallow` tests. + +## Best Pratices + +1. `Naming`: Always write a file and class name which is easy to understand and specific to use case. for example - asynchronous loading -> directive name is `LoadAsyncDirective`. Use `ht` as prefix in component selectors, pipes, directives etc. There is lint rule as well. +2. `Linting`: For a consistent in file code structure, linting is used and a requirement before merging the code. + +## Contributions + +Contributions are what make the open source community such an amazing place to be learn, inspire, and create. Any contributions you make are greatly appreciated. + +## Others + +These are some extra things that might be useful. + +#### Building Image locally + +Hypertrace UI uses gradle to build a docker image. Gradle wrapper is already part of the source code. To build Hypertrace UI image, run: + +```sh ./gradlew dockerBuildImages ``` -## Docker Image Source: +#### Docker Image Source: - [DockerHub > Hypertrace UI](https://hub.docker.com/r/hypertrace/hypertrace-ui) From 1424438c245bfba28d1115f74c995bd1c257f238 Mon Sep 17 00:00:00 2001 From: Sandeep Kumar Sharma Date: Mon, 7 Mar 2022 00:17:36 +0530 Subject: [PATCH 02/32] fix: remove unwanted code --- README.md | 7 ------- 1 file changed, 7 deletions(-) diff --git a/README.md b/README.md index a98dbf6a6..a4b73ec40 100644 --- a/README.md +++ b/README.md @@ -9,13 +9,6 @@
More about hypertrace »
-
-

- [![Contributors][contributors-shield]][contributors-url] - [![Forks][forks-shield]][forks-url] - [![Stargazers][stars-shield]][stars-url] - [![Issues][issues-shield]][issues-url] -

From 494a07593ea0d692fb707fb9d9c4dfd56ac5c786 Mon Sep 17 00:00:00 2001 From: Sandeep Sharma <78212931+itssharmasandeep@users.noreply.github.com> Date: Tue, 8 Mar 2022 23:25:26 +0530 Subject: [PATCH 03/32] Update README.md Co-authored-by: Arjunlal B <63222211+arjunlalb@users.noreply.github.com> --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index a4b73ec40..0d9080f27 100644 --- a/README.md +++ b/README.md @@ -51,7 +51,7 @@ npm start Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files. -To run Unit test cases (execute the unit tests via Jest) +To run unit test cases (execute the unit tests via Jest) ```sh npm run test From 5974b85ea9809d3966cf4ddb184dd362a07c2eea Mon Sep 17 00:00:00 2001 From: Sandeep Sharma <78212931+itssharmasandeep@users.noreply.github.com> Date: Tue, 8 Mar 2022 23:25:33 +0530 Subject: [PATCH 04/32] Update README.md Co-authored-by: Arjunlal B <63222211+arjunlalb@users.noreply.github.com> --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 0d9080f27..644cc1f78 100644 --- a/README.md +++ b/README.md @@ -69,7 +69,7 @@ Hypertrace-ui uses `angular` as the framework. On top of angular, following tech ## Code Architecture -Hypertrace-UI code is divided into many smaller projects which gives the code base a better structure. Here are the following projects. +Hypertrace-UI code is divided into many smaller projects which gives the code base a better structure. Here are the projects. 1. `Assest Library` : This consits the assests which are being used in the application. For example images, icons etc. Check this out [here](https://github.com/hypertrace/hypertrace-ui/tree/main/projects/assets-library) 2. `Common` : This consits the common code/features such as application contants, colors, telemetry, utilities (with common angular pipes) etc. Check this out [here](https://github.com/hypertrace/hypertrace-ui/tree/main/projects/common) From ee4c3c0b3327f27b4324d08b6dc477ce1f27a6e4 Mon Sep 17 00:00:00 2001 From: Sandeep Sharma <78212931+itssharmasandeep@users.noreply.github.com> Date: Tue, 8 Mar 2022 23:25:42 +0530 Subject: [PATCH 05/32] Update README.md Co-authored-by: Arjunlal B <63222211+arjunlalb@users.noreply.github.com> --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 644cc1f78..02f59f070 100644 --- a/README.md +++ b/README.md @@ -71,7 +71,7 @@ Hypertrace-ui uses `angular` as the framework. On top of angular, following tech Hypertrace-UI code is divided into many smaller projects which gives the code base a better structure. Here are the projects. -1. `Assest Library` : This consits the assests which are being used in the application. For example images, icons etc. Check this out [here](https://github.com/hypertrace/hypertrace-ui/tree/main/projects/assets-library) +1. `Assest Library` : This consists of the assets which are being used in the application. For example; images, icons etc. Check this out [here](https://github.com/hypertrace/hypertrace-ui/tree/main/projects/assets-library) 2. `Common` : This consits the common code/features such as application contants, colors, telemetry, utilities (with common angular pipes) etc. Check this out [here](https://github.com/hypertrace/hypertrace-ui/tree/main/projects/common) 3. `Components` : Hypertrace-ui has wide variety of custom made angular components. This is the place for generic components (eg. `Input` Component) and directives(eg. `LoadAsync` Directive). Check this out [here](https://github.com/hypertrace/hypertrace-ui/tree/main/projects/components) 4. `Dashboards` : This consits the common code for dashboards such as base model, properties etc. Check this out [here](https://github.com/hypertrace/hypertrace-ui/tree/main/projects/dashboards) From 2bd4bbc21f666c640874f84d49271ade0aa99de5 Mon Sep 17 00:00:00 2001 From: Sandeep Sharma <78212931+itssharmasandeep@users.noreply.github.com> Date: Tue, 8 Mar 2022 23:25:49 +0530 Subject: [PATCH 06/32] Update README.md Co-authored-by: Arjunlal B <63222211+arjunlalb@users.noreply.github.com> --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 02f59f070..3a438ec5c 100644 --- a/README.md +++ b/README.md @@ -72,7 +72,7 @@ Hypertrace-ui uses `angular` as the framework. On top of angular, following tech Hypertrace-UI code is divided into many smaller projects which gives the code base a better structure. Here are the projects. 1. `Assest Library` : This consists of the assets which are being used in the application. For example; images, icons etc. Check this out [here](https://github.com/hypertrace/hypertrace-ui/tree/main/projects/assets-library) -2. `Common` : This consits the common code/features such as application contants, colors, telemetry, utilities (with common angular pipes) etc. Check this out [here](https://github.com/hypertrace/hypertrace-ui/tree/main/projects/common) +2. `Common` : This consists of the common code/features such as application constants, colors, telemetry, utilities (with common angular pipes) etc. Check this out [here](https://github.com/hypertrace/hypertrace-ui/tree/main/projects/common) 3. `Components` : Hypertrace-ui has wide variety of custom made angular components. This is the place for generic components (eg. `Input` Component) and directives(eg. `LoadAsync` Directive). Check this out [here](https://github.com/hypertrace/hypertrace-ui/tree/main/projects/components) 4. `Dashboards` : This consits the common code for dashboards such as base model, properties etc. Check this out [here](https://github.com/hypertrace/hypertrace-ui/tree/main/projects/dashboards) 5. `Graphql-Client` : Hypertrace-ui uses the [apollo graphql](https://www.apollographql.com/) to fetch the data from backend. This is the place where all the base graphql request related code is present such as graphql arguments, resolvers, builders etc. Check this out [here](https://github.com/hypertrace/hypertrace-ui/tree/main/projects/graphql-client) From 3eb614ec5d897f369308268d6d410f738d0eb304 Mon Sep 17 00:00:00 2001 From: Sandeep Sharma <78212931+itssharmasandeep@users.noreply.github.com> Date: Tue, 8 Mar 2022 23:25:55 +0530 Subject: [PATCH 07/32] Update README.md Co-authored-by: Arjunlal B <63222211+arjunlalb@users.noreply.github.com> --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 3a438ec5c..1817891b8 100644 --- a/README.md +++ b/README.md @@ -73,7 +73,7 @@ Hypertrace-UI code is divided into many smaller projects which gives the code ba 1. `Assest Library` : This consists of the assets which are being used in the application. For example; images, icons etc. Check this out [here](https://github.com/hypertrace/hypertrace-ui/tree/main/projects/assets-library) 2. `Common` : This consists of the common code/features such as application constants, colors, telemetry, utilities (with common angular pipes) etc. Check this out [here](https://github.com/hypertrace/hypertrace-ui/tree/main/projects/common) -3. `Components` : Hypertrace-ui has wide variety of custom made angular components. This is the place for generic components (eg. `Input` Component) and directives(eg. `LoadAsync` Directive). Check this out [here](https://github.com/hypertrace/hypertrace-ui/tree/main/projects/components) +3. `Components` : Hypertrace-ui has a wide variety of custom made angular components. This is the place for generic components (eg. `Input` Component) and directives(eg. `LoadAsync` Directive). Check this out [here](https://github.com/hypertrace/hypertrace-ui/tree/main/projects/components) 4. `Dashboards` : This consits the common code for dashboards such as base model, properties etc. Check this out [here](https://github.com/hypertrace/hypertrace-ui/tree/main/projects/dashboards) 5. `Graphql-Client` : Hypertrace-ui uses the [apollo graphql](https://www.apollographql.com/) to fetch the data from backend. This is the place where all the base graphql request related code is present such as graphql arguments, resolvers, builders etc. Check this out [here](https://github.com/hypertrace/hypertrace-ui/tree/main/projects/graphql-client) 6. `Observability` : This consits all the different pages, components, services related to distributes tracing and observability. This is also the home for charts as well. Check this out [here](https://github.com/hypertrace/hypertrace-ui/tree/main/projects/observability) From 0ed8388aa4fc1fa4327951f25483a424528c697d Mon Sep 17 00:00:00 2001 From: Sandeep Sharma <78212931+itssharmasandeep@users.noreply.github.com> Date: Tue, 8 Mar 2022 23:26:03 +0530 Subject: [PATCH 08/32] Update README.md Co-authored-by: Arjunlal B <63222211+arjunlalb@users.noreply.github.com> --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 1817891b8..25a32aade 100644 --- a/README.md +++ b/README.md @@ -318,7 +318,7 @@ Now let's break this down. - We have used decorator `TableCellRenderer` by which we're registering this cell renderer (on build) for usage. - `type` property is the unique string to define each cell renderer. - `alignment` is used for the cell alignment, could be - left, right and center -- `parser` is used to parse the data, it is also defined in the similar way. Suppose we are getting a data as `['test1', 'test2']` and we want it be used like `{value1: 'test1', value2: 'test2'}` then we can create a custom parser and can handle this use case. For no operation we use `CoreTableCellParserType.NoOp` +- `parser` is used to parse the data. It can also be defined similar to a cell renderer. Suppose we are getting data as `['test1', 'test2']` and we want it to be marshalled into `{value1: 'test1', value2: 'test2'}` then we can create a custom parser and can handle the transformation. For no operation we use `CoreTableCellParserType.NoOp` `Usage` : Now once this is done, we can use this in our table using `display` property. This will be same as the type of the cell renderer. From d6650cf041f4e8e842937f2c8dd115ad4ed67e22 Mon Sep 17 00:00:00 2001 From: Sandeep Sharma <78212931+itssharmasandeep@users.noreply.github.com> Date: Tue, 8 Mar 2022 23:26:09 +0530 Subject: [PATCH 09/32] Update README.md Co-authored-by: Arjunlal B <63222211+arjunlalb@users.noreply.github.com> --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 25a32aade..6dd3af058 100644 --- a/README.md +++ b/README.md @@ -320,7 +320,7 @@ Now let's break this down. - `alignment` is used for the cell alignment, could be - left, right and center - `parser` is used to parse the data. It can also be defined similar to a cell renderer. Suppose we are getting data as `['test1', 'test2']` and we want it to be marshalled into `{value1: 'test1', value2: 'test2'}` then we can create a custom parser and can handle the transformation. For no operation we use `CoreTableCellParserType.NoOp` -`Usage` : Now once this is done, we can use this in our table using `display` property. This will be same as the type of the cell renderer. +`Usage` : Once this is done, we can use this in our table using `display` property. This will be same as the type of the cell renderer. `Module import` From f5a62a0bdbbf3d16fa2dad9fe212b9ef7f7a2407 Mon Sep 17 00:00:00 2001 From: Sandeep Sharma <78212931+itssharmasandeep@users.noreply.github.com> Date: Tue, 8 Mar 2022 23:26:15 +0530 Subject: [PATCH 10/32] Update README.md Co-authored-by: Arjunlal B <63222211+arjunlalb@users.noreply.github.com> --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 6dd3af058..9da4353d6 100644 --- a/README.md +++ b/README.md @@ -343,7 +343,7 @@ public readonly columnConfigs: TableColumnConfig[] = [ ]; ``` -`NOTE`: We highly recommend you to check out all the existing example of table and cell renderers to learn about these more. +`NOTE`: We highly recommend you to check out all the existing example of table and cell renderers to learn more. ## GraphQl Handlers From 3fcb7fcc09a1ce4f3a1e03d617180d28b37f6301 Mon Sep 17 00:00:00 2001 From: Sandeep Sharma <78212931+itssharmasandeep@users.noreply.github.com> Date: Tue, 8 Mar 2022 23:26:21 +0530 Subject: [PATCH 11/32] Update README.md Co-authored-by: Arjunlal B <63222211+arjunlalb@users.noreply.github.com> --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 9da4353d6..125460a0f 100644 --- a/README.md +++ b/README.md @@ -397,7 +397,7 @@ export interface GraphQlHelloResponse { } ``` -Now let's break this down. +Let's break this down. - We have used a unique symbol, as a type for the request. - Two interfaces `GraphQlHelloRequest` and `GraphQlHelloResponse` for request and response. From 48baf1d2cce00befacbd18e33831ea59d5c75495 Mon Sep 17 00:00:00 2001 From: Sandeep Sharma <78212931+itssharmasandeep@users.noreply.github.com> Date: Tue, 8 Mar 2022 23:26:28 +0530 Subject: [PATCH 12/32] Update README.md Co-authored-by: Arjunlal B <63222211+arjunlalb@users.noreply.github.com> --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 125460a0f..923f9c3e0 100644 --- a/README.md +++ b/README.md @@ -436,7 +436,7 @@ Testing is an integral part of hypertrace-ui and hypertrace-ui maintains a good ## Contributions -Contributions are what make the open source community such an amazing place to be learn, inspire, and create. Any contributions you make are greatly appreciated. +Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated. ## Others From c4edcbcf5471cd02393e47b74a022c4d389071ab Mon Sep 17 00:00:00 2001 From: Sandeep Sharma <78212931+itssharmasandeep@users.noreply.github.com> Date: Tue, 8 Mar 2022 23:26:42 +0530 Subject: [PATCH 13/32] Update README.md Co-authored-by: Arjunlal B <63222211+arjunlalb@users.noreply.github.com> --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 923f9c3e0..5bc5d156c 100644 --- a/README.md +++ b/README.md @@ -74,7 +74,7 @@ Hypertrace-UI code is divided into many smaller projects which gives the code ba 1. `Assest Library` : This consists of the assets which are being used in the application. For example; images, icons etc. Check this out [here](https://github.com/hypertrace/hypertrace-ui/tree/main/projects/assets-library) 2. `Common` : This consists of the common code/features such as application constants, colors, telemetry, utilities (with common angular pipes) etc. Check this out [here](https://github.com/hypertrace/hypertrace-ui/tree/main/projects/common) 3. `Components` : Hypertrace-ui has a wide variety of custom made angular components. This is the place for generic components (eg. `Input` Component) and directives(eg. `LoadAsync` Directive). Check this out [here](https://github.com/hypertrace/hypertrace-ui/tree/main/projects/components) -4. `Dashboards` : This consits the common code for dashboards such as base model, properties etc. Check this out [here](https://github.com/hypertrace/hypertrace-ui/tree/main/projects/dashboards) +4. `Dashboards` : This consists of the common code for dashboards such as base model, properties etc. Check this out [here](https://github.com/hypertrace/hypertrace-ui/tree/main/projects/dashboards) 5. `Graphql-Client` : Hypertrace-ui uses the [apollo graphql](https://www.apollographql.com/) to fetch the data from backend. This is the place where all the base graphql request related code is present such as graphql arguments, resolvers, builders etc. Check this out [here](https://github.com/hypertrace/hypertrace-ui/tree/main/projects/graphql-client) 6. `Observability` : This consits all the different pages, components, services related to distributes tracing and observability. This is also the home for charts as well. Check this out [here](https://github.com/hypertrace/hypertrace-ui/tree/main/projects/observability) 7. `Test Utils` : This consits some unit test utilities for dashboards etc.. Check this out [here](https://github.com/hypertrace/hypertrace-ui/tree/main/projects/test-utils) From b2eebbb420bdf67ed0206783df9437e17c6fb3ea Mon Sep 17 00:00:00 2001 From: Sandeep Sharma <78212931+itssharmasandeep@users.noreply.github.com> Date: Tue, 8 Mar 2022 23:27:01 +0530 Subject: [PATCH 14/32] Update README.md Co-authored-by: Arjunlal B <63222211+arjunlalb@users.noreply.github.com> --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 5bc5d156c..6c0b89e49 100644 --- a/README.md +++ b/README.md @@ -75,7 +75,7 @@ Hypertrace-UI code is divided into many smaller projects which gives the code ba 2. `Common` : This consists of the common code/features such as application constants, colors, telemetry, utilities (with common angular pipes) etc. Check this out [here](https://github.com/hypertrace/hypertrace-ui/tree/main/projects/common) 3. `Components` : Hypertrace-ui has a wide variety of custom made angular components. This is the place for generic components (eg. `Input` Component) and directives(eg. `LoadAsync` Directive). Check this out [here](https://github.com/hypertrace/hypertrace-ui/tree/main/projects/components) 4. `Dashboards` : This consists of the common code for dashboards such as base model, properties etc. Check this out [here](https://github.com/hypertrace/hypertrace-ui/tree/main/projects/dashboards) -5. `Graphql-Client` : Hypertrace-ui uses the [apollo graphql](https://www.apollographql.com/) to fetch the data from backend. This is the place where all the base graphql request related code is present such as graphql arguments, resolvers, builders etc. Check this out [here](https://github.com/hypertrace/hypertrace-ui/tree/main/projects/graphql-client) +5. `Graphql-Client` : Hypertrace-ui uses [apollo graphql](https://www.apollographql.com/) for API calls. This is the place where all the base graphql request related code is present such as graphql arguments, resolvers, builders etc. Check this out [here](https://github.com/hypertrace/hypertrace-ui/tree/main/projects/graphql-client) 6. `Observability` : This consits all the different pages, components, services related to distributes tracing and observability. This is also the home for charts as well. Check this out [here](https://github.com/hypertrace/hypertrace-ui/tree/main/projects/observability) 7. `Test Utils` : This consits some unit test utilities for dashboards etc.. Check this out [here](https://github.com/hypertrace/hypertrace-ui/tree/main/projects/test-utils) 8. `UI App` : This is not a project but a entry point for hypertrace-ui app. This consists home page, routes, config module etc. Check this out [here](https://github.com/hypertrace/hypertrace-ui/tree/main/src) From ed200c8797d2beaec4b1ea968c1a17f06d78cabb Mon Sep 17 00:00:00 2001 From: Sandeep Sharma <78212931+itssharmasandeep@users.noreply.github.com> Date: Tue, 8 Mar 2022 23:27:11 +0530 Subject: [PATCH 15/32] Update README.md Co-authored-by: Arjunlal B <63222211+arjunlalb@users.noreply.github.com> --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 6c0b89e49..154e4ee40 100644 --- a/README.md +++ b/README.md @@ -76,7 +76,7 @@ Hypertrace-UI code is divided into many smaller projects which gives the code ba 3. `Components` : Hypertrace-ui has a wide variety of custom made angular components. This is the place for generic components (eg. `Input` Component) and directives(eg. `LoadAsync` Directive). Check this out [here](https://github.com/hypertrace/hypertrace-ui/tree/main/projects/components) 4. `Dashboards` : This consists of the common code for dashboards such as base model, properties etc. Check this out [here](https://github.com/hypertrace/hypertrace-ui/tree/main/projects/dashboards) 5. `Graphql-Client` : Hypertrace-ui uses [apollo graphql](https://www.apollographql.com/) for API calls. This is the place where all the base graphql request related code is present such as graphql arguments, resolvers, builders etc. Check this out [here](https://github.com/hypertrace/hypertrace-ui/tree/main/projects/graphql-client) -6. `Observability` : This consits all the different pages, components, services related to distributes tracing and observability. This is also the home for charts as well. Check this out [here](https://github.com/hypertrace/hypertrace-ui/tree/main/projects/observability) +6. `Observability` : This consists of all the different pages, components, services related to distributed tracing and observability. This project is the home for charts as well. Check this out [here](https://github.com/hypertrace/hypertrace-ui/tree/main/projects/observability) 7. `Test Utils` : This consits some unit test utilities for dashboards etc.. Check this out [here](https://github.com/hypertrace/hypertrace-ui/tree/main/projects/test-utils) 8. `UI App` : This is not a project but a entry point for hypertrace-ui app. This consists home page, routes, config module etc. Check this out [here](https://github.com/hypertrace/hypertrace-ui/tree/main/src) From a69762138f503dca9ba40060d76dbe292b786b07 Mon Sep 17 00:00:00 2001 From: Sandeep Sharma <78212931+itssharmasandeep@users.noreply.github.com> Date: Tue, 8 Mar 2022 23:27:22 +0530 Subject: [PATCH 16/32] Update README.md Co-authored-by: Arjunlal B <63222211+arjunlalb@users.noreply.github.com> --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 154e4ee40..a422bfb57 100644 --- a/README.md +++ b/README.md @@ -77,7 +77,7 @@ Hypertrace-UI code is divided into many smaller projects which gives the code ba 4. `Dashboards` : This consists of the common code for dashboards such as base model, properties etc. Check this out [here](https://github.com/hypertrace/hypertrace-ui/tree/main/projects/dashboards) 5. `Graphql-Client` : Hypertrace-ui uses [apollo graphql](https://www.apollographql.com/) for API calls. This is the place where all the base graphql request related code is present such as graphql arguments, resolvers, builders etc. Check this out [here](https://github.com/hypertrace/hypertrace-ui/tree/main/projects/graphql-client) 6. `Observability` : This consists of all the different pages, components, services related to distributed tracing and observability. This project is the home for charts as well. Check this out [here](https://github.com/hypertrace/hypertrace-ui/tree/main/projects/observability) -7. `Test Utils` : This consits some unit test utilities for dashboards etc.. Check this out [here](https://github.com/hypertrace/hypertrace-ui/tree/main/projects/test-utils) +7. `Test Utils` : This consists of some unit test utilities for dashboards etc.. Check this out [here](https://github.com/hypertrace/hypertrace-ui/tree/main/projects/test-utils) 8. `UI App` : This is not a project but a entry point for hypertrace-ui app. This consists home page, routes, config module etc. Check this out [here](https://github.com/hypertrace/hypertrace-ui/tree/main/src) `NOTE` : Each project, consists a barrel file named `public-api.ts`. This handles all the exports at single place which improves the importing in the app. From 730f910a42b660709a1ecd4f9749f40adc463677 Mon Sep 17 00:00:00 2001 From: Sandeep Sharma <78212931+itssharmasandeep@users.noreply.github.com> Date: Tue, 8 Mar 2022 23:27:33 +0530 Subject: [PATCH 17/32] Update README.md Co-authored-by: Arjunlal B <63222211+arjunlalb@users.noreply.github.com> --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index a422bfb57..acc6950e7 100644 --- a/README.md +++ b/README.md @@ -78,7 +78,7 @@ Hypertrace-UI code is divided into many smaller projects which gives the code ba 5. `Graphql-Client` : Hypertrace-ui uses [apollo graphql](https://www.apollographql.com/) for API calls. This is the place where all the base graphql request related code is present such as graphql arguments, resolvers, builders etc. Check this out [here](https://github.com/hypertrace/hypertrace-ui/tree/main/projects/graphql-client) 6. `Observability` : This consists of all the different pages, components, services related to distributed tracing and observability. This project is the home for charts as well. Check this out [here](https://github.com/hypertrace/hypertrace-ui/tree/main/projects/observability) 7. `Test Utils` : This consists of some unit test utilities for dashboards etc.. Check this out [here](https://github.com/hypertrace/hypertrace-ui/tree/main/projects/test-utils) -8. `UI App` : This is not a project but a entry point for hypertrace-ui app. This consists home page, routes, config module etc. Check this out [here](https://github.com/hypertrace/hypertrace-ui/tree/main/src) +8. `UI App` : This is not a project but a entry point for hypertrace-ui app. This consists of the home page, routes, config module etc. Check this out [here](https://github.com/hypertrace/hypertrace-ui/tree/main/src) `NOTE` : Each project, consists a barrel file named `public-api.ts`. This handles all the exports at single place which improves the importing in the app. For example From dcc6edd7d45e374c6b33123f9f262cb88ce43b62 Mon Sep 17 00:00:00 2001 From: Sandeep Sharma <78212931+itssharmasandeep@users.noreply.github.com> Date: Tue, 8 Mar 2022 23:27:48 +0530 Subject: [PATCH 18/32] Update README.md Co-authored-by: Arjunlal B <63222211+arjunlalb@users.noreply.github.com> --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index acc6950e7..7025dabb8 100644 --- a/README.md +++ b/README.md @@ -80,7 +80,7 @@ Hypertrace-UI code is divided into many smaller projects which gives the code ba 7. `Test Utils` : This consists of some unit test utilities for dashboards etc.. Check this out [here](https://github.com/hypertrace/hypertrace-ui/tree/main/projects/test-utils) 8. `UI App` : This is not a project but a entry point for hypertrace-ui app. This consists of the home page, routes, config module etc. Check this out [here](https://github.com/hypertrace/hypertrace-ui/tree/main/src) -`NOTE` : Each project, consists a barrel file named `public-api.ts`. This handles all the exports at single place which improves the importing in the app. +`NOTE` : Each project contains a barrel file named `public-api.ts`. This handles all the exports at a single place which improves the importing in the app. For example ```ts From 0a02d35489cf2acd1ccc4e2760452862ab5b4bb0 Mon Sep 17 00:00:00 2001 From: Sandeep Sharma <78212931+itssharmasandeep@users.noreply.github.com> Date: Tue, 8 Mar 2022 23:27:58 +0530 Subject: [PATCH 19/32] Update README.md Co-authored-by: Arjunlal B <63222211+arjunlalb@users.noreply.github.com> --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 7025dabb8..78f2258a5 100644 --- a/README.md +++ b/README.md @@ -89,7 +89,7 @@ For example ## The Essentials -Let's talk about the essentials for the development in the hypertrace-ui. +Let's talk about the essentials for development in hypertrace-ui. ### Angular Specifics From 1d89caeb8f595c8e1282d58fe25aa782f5ad62a5 Mon Sep 17 00:00:00 2001 From: Sandeep Sharma <78212931+itssharmasandeep@users.noreply.github.com> Date: Tue, 8 Mar 2022 23:28:13 +0530 Subject: [PATCH 20/32] Update README.md Co-authored-by: Arjunlal B <63222211+arjunlalb@users.noreply.github.com> --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 78f2258a5..6e0524761 100644 --- a/README.md +++ b/README.md @@ -126,7 +126,7 @@ public readonly defaultJson: ModelJson = { Now let's break this down. -- It will create a dasboard for an unique location. +- It will create a dasboard for a unique location. - Dasboards are designed in a way that, it takes a modal json as input property and renders the corresponding widgets. - There are 3 core concepts - widget , widget renderer and data source. From 731d108f7015474bb62758d4d775c817473b37b2 Mon Sep 17 00:00:00 2001 From: Sandeep Sharma <78212931+itssharmasandeep@users.noreply.github.com> Date: Tue, 8 Mar 2022 23:28:28 +0530 Subject: [PATCH 21/32] Update README.md Co-authored-by: Arjunlal B <63222211+arjunlalb@users.noreply.github.com> --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 6e0524761..621c152d0 100644 --- a/README.md +++ b/README.md @@ -127,7 +127,7 @@ public readonly defaultJson: ModelJson = { Now let's break this down. - It will create a dasboard for a unique location. -- Dasboards are designed in a way that, it takes a modal json as input property and renders the corresponding widgets. +- Dasboards are designed in a way that it takes a modal json as input property and renders the corresponding widgets. - There are 3 core concepts - widget , widget renderer and data source. Let's talk about these individually. From 2b2cf9b3b1d10240349068ce22fc245d29ef00ec Mon Sep 17 00:00:00 2001 From: Sandeep Sharma <78212931+itssharmasandeep@users.noreply.github.com> Date: Tue, 8 Mar 2022 23:28:38 +0530 Subject: [PATCH 22/32] Update README.md Co-authored-by: Arjunlal B <63222211+arjunlalb@users.noreply.github.com> --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 621c152d0..b9f1a22fe 100644 --- a/README.md +++ b/README.md @@ -191,7 +191,7 @@ export class HelloWidgetRendererComponent extends WidgetRenderer Date: Tue, 8 Mar 2022 23:28:49 +0530 Subject: [PATCH 23/32] Update README.md Co-authored-by: Arjunlal B <63222211+arjunlalb@users.noreply.github.com> --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index b9f1a22fe..9c7fda5be 100644 --- a/README.md +++ b/README.md @@ -192,7 +192,7 @@ Now let's break this down. - We have used decorator `Renderer` by which we're registering this widget renderer (on build) for usage. - `modelClass` property is the same class for which we're building this renderer, in this case it is `HelloWidgetModel`. -- Now after extending the `WidgetRenderer` class, we have the access of `name` property which we defined in the model class. +- Now after extending the `WidgetRenderer` class, we have access to the `name` property which we defined in the model class. - `fetchData` method is used to give us the access of `this.data$` observable. - `htLoadAsync` directive is used to resolve the data observable, which can be done with `async` pipe as well. From 836caaaf3f6398f4ca94df1df241cff3ac0fe491 Mon Sep 17 00:00:00 2001 From: Sandeep Sharma <78212931+itssharmasandeep@users.noreply.github.com> Date: Tue, 8 Mar 2022 23:29:08 +0530 Subject: [PATCH 24/32] Update README.md Co-authored-by: Arjunlal B <63222211+arjunlalb@users.noreply.github.com> --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 9c7fda5be..f4bb4cc9c 100644 --- a/README.md +++ b/README.md @@ -193,7 +193,7 @@ Now let's break this down. - We have used decorator `Renderer` by which we're registering this widget renderer (on build) for usage. - `modelClass` property is the same class for which we're building this renderer, in this case it is `HelloWidgetModel`. - Now after extending the `WidgetRenderer` class, we have access to the `name` property which we defined in the model class. -- `fetchData` method is used to give us the access of `this.data$` observable. +- `fetchData` method is used to give us access to `this.data$` observable. - `htLoadAsync` directive is used to resolve the data observable, which can be done with `async` pipe as well. How are we getting data? Now let's understand this in the next section. From 5e3648e0cd64ad14861935b45b667d8eaca68620 Mon Sep 17 00:00:00 2001 From: Sandeep Sharma <78212931+itssharmasandeep@users.noreply.github.com> Date: Tue, 8 Mar 2022 23:29:18 +0530 Subject: [PATCH 25/32] Update README.md Co-authored-by: Arjunlal B <63222211+arjunlalb@users.noreply.github.com> --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index f4bb4cc9c..859aabcde 100644 --- a/README.md +++ b/README.md @@ -229,7 +229,7 @@ Now let's break this down. - We have used decorator `Model` by which we're registering this data source (on build) for usage. - `type` property is the unique string to define each data source. If we look closely we have used the same string as a type in the model json as well for key `data`. -- We have used decorator `ModelPropery` for defining the custom properties like in this case `upper-case`. +- We have used decorator `ModelPropery` for defining custom properties; like in this case `upper-case`. - We have implemented `getData` Method, and the same menthod we're using in the renderer component `return this.api.getData()`. Now after implemening all this we can use these as shown above and render the custom data. From 88bb59421a3bc4af7ac6a18a00f393a7396f9c4b Mon Sep 17 00:00:00 2001 From: Sandeep Sharma <78212931+itssharmasandeep@users.noreply.github.com> Date: Tue, 8 Mar 2022 23:29:28 +0530 Subject: [PATCH 26/32] Update README.md Co-authored-by: Arjunlal B <63222211+arjunlalb@users.noreply.github.com> --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 859aabcde..14ae54824 100644 --- a/README.md +++ b/README.md @@ -230,7 +230,7 @@ Now let's break this down. - We have used decorator `Model` by which we're registering this data source (on build) for usage. - `type` property is the unique string to define each data source. If we look closely we have used the same string as a type in the model json as well for key `data`. - We have used decorator `ModelPropery` for defining custom properties; like in this case `upper-case`. -- We have implemented `getData` Method, and the same menthod we're using in the renderer component `return this.api.getData()`. +- We have implemented `getData` method, and the same method is being used in the renderer component `return this.api.getData()`. Now after implemening all this we can use these as shown above and render the custom data. From 29577982aaeb8695b1bf7df4e2ceb7c8971bff7f Mon Sep 17 00:00:00 2001 From: Sandeep Sharma <78212931+itssharmasandeep@users.noreply.github.com> Date: Tue, 8 Mar 2022 23:29:36 +0530 Subject: [PATCH 27/32] Update README.md Co-authored-by: Arjunlal B <63222211+arjunlalb@users.noreply.github.com> --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 14ae54824..e120a2520 100644 --- a/README.md +++ b/README.md @@ -232,7 +232,7 @@ Now let's break this down. - We have used decorator `ModelPropery` for defining custom properties; like in this case `upper-case`. - We have implemented `getData` method, and the same method is being used in the renderer component `return this.api.getData()`. -Now after implemening all this we can use these as shown above and render the custom data. +Now after implemening all this we can use these as shown above and render custom data. _Why we're doing this_? Answer is simple, once we do all this now, we can just write few lines we can render whole widget. This can be used at any place now with just few lines of code. This is a simple example foe more complex examples please check `home.dashboard.ts` and underlying all the widgets. From d8140bc2a3ed2f4f909a849f2bbc30cf4457fd1c Mon Sep 17 00:00:00 2001 From: Sandeep Sharma <78212931+itssharmasandeep@users.noreply.github.com> Date: Tue, 8 Mar 2022 23:29:46 +0530 Subject: [PATCH 28/32] Update README.md Co-authored-by: Arjunlal B <63222211+arjunlalb@users.noreply.github.com> --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index e120a2520..14f99d1f0 100644 --- a/README.md +++ b/README.md @@ -238,7 +238,7 @@ _Why we're doing this_? Answer is simple, once we do all this now, we can just w ### Tables -Table is custom component in the hypertrace-ui. The following example shows how to add table inside another component. +Table is a custom component in the hypertrace-ui. The following example shows how to add table inside another component.
Here is what table API Says: From 6d7c9fc1908e14b81d23a1f8c2214c8f4772fd05 Mon Sep 17 00:00:00 2001 From: Sandeep Sharma <78212931+itssharmasandeep@users.noreply.github.com> Date: Tue, 8 Mar 2022 23:29:56 +0530 Subject: [PATCH 29/32] Update README.md Co-authored-by: Arjunlal B <63222211+arjunlalb@users.noreply.github.com> --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 14f99d1f0..f7f33e6f6 100644 --- a/README.md +++ b/README.md @@ -234,7 +234,7 @@ Now let's break this down. Now after implemening all this we can use these as shown above and render custom data. -_Why we're doing this_? Answer is simple, once we do all this now, we can just write few lines we can render whole widget. This can be used at any place now with just few lines of code. This is a simple example foe more complex examples please check `home.dashboard.ts` and underlying all the widgets. +_Why we're doing this_? Answer is simple, once we do all this, we can just write few lines of json to render a whole widget. For more complex examples please check `home.dashboard.ts` and its constituent widgets. ### Tables From a1f9c89b7923c2e49995f04d71b5ad7037ef4196 Mon Sep 17 00:00:00 2001 From: Sandeep Sharma <78212931+itssharmasandeep@users.noreply.github.com> Date: Tue, 8 Mar 2022 23:30:04 +0530 Subject: [PATCH 30/32] Update README.md Co-authored-by: Arjunlal B <63222211+arjunlalb@users.noreply.github.com> --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index f7f33e6f6..6404e95a2 100644 --- a/README.md +++ b/README.md @@ -284,7 +284,7 @@ Now let's break this down. - It will create a table with a single column (In column configs we have only mentioned one column) and two rows (in the data source we have mentioned data as array of two objects.). - Now if we look closely, table column config's id is same as the key we have used the key in data which is `name`. This is must for the table to render the data correctly. -There is a lot there in the tables, like custom controls, configurations (for pagination and many other). We highly recommend you to check out the `table.component.ts` to learn about tables and check out all the different examples present in the application. +There are more features in the table component, like custom controls, configurations (for pagination and many other). We highly recommend you to check out the `table.component.ts` to learn about tables and check out all the different examples present in the application. #### Cell Renderers From bbec95c1a29f322474e6782a992ea8dd4d982573 Mon Sep 17 00:00:00 2001 From: Sandeep Sharma <78212931+itssharmasandeep@users.noreply.github.com> Date: Tue, 8 Mar 2022 23:30:12 +0530 Subject: [PATCH 31/32] Update README.md Co-authored-by: Arjunlal B <63222211+arjunlalb@users.noreply.github.com> --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 6404e95a2..3aae16c1c 100644 --- a/README.md +++ b/README.md @@ -288,7 +288,7 @@ There are more features in the table component, like custom controls, configurat #### Cell Renderers -As we have talked about tables, now let's talk about the custom table cell renderers. in hypertrace-ui, we can create a custom table cell renderer to display the data in specifc format. These are nothing but angular component with another decorator `TableCellRenderer` +Continuing from tables, let's talk about custom table cell renderers. In hypertrace-ui, we can create a custom table cell renderer to handle presentation of a cell data. These are nothing but angular component with another decorator `TableCellRenderer`
Now let's see how we can create a custom cell renderer. for example `hello-table-cell-renderer.component.ts` From 1c802ae3adba9531480275785e63e87d4c5823f0 Mon Sep 17 00:00:00 2001 From: Sandeep Sharma <78212931+itssharmasandeep@users.noreply.github.com> Date: Tue, 8 Mar 2022 23:30:21 +0530 Subject: [PATCH 32/32] Update README.md Co-authored-by: Arjunlal B <63222211+arjunlalb@users.noreply.github.com> --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 3aae16c1c..5cd380eeb 100644 --- a/README.md +++ b/README.md @@ -282,7 +282,7 @@ public readonly columnConfigs: TableColumnConfig[] = [ Now let's break this down. - It will create a table with a single column (In column configs we have only mentioned one column) and two rows (in the data source we have mentioned data as array of two objects.). -- Now if we look closely, table column config's id is same as the key we have used the key in data which is `name`. This is must for the table to render the data correctly. +- If we look closely, table column config's id is same as the key we have used the key in data which is `name`. This is a must for the table to render the data correctly. There are more features in the table component, like custom controls, configurations (for pagination and many other). We highly recommend you to check out the `table.component.ts` to learn about tables and check out all the different examples present in the application.