From e27efdf2a7d7a781a775607dec8a73361eaa74c2 Mon Sep 17 00:00:00 2001 From: Dmytro Borzenko <51016717+dmitriy-borzenko@users.noreply.github.com> Date: Fri, 8 Sep 2023 15:20:02 +0300 Subject: [PATCH] Kamu UI 148 extend node content (#152) * Changed template content for graph nodes * Resolved avatarUrl by account name. --- CHANGELOG.md | 1 + src/app/api/mock/dataset.mock.ts | 2 + .../lineage-graph.component.html | 56 +++++++++--------- .../lineage-graph.component.spec.ts | 23 ++++++- .../lineage-graph/lineage-graph.component.ts | 11 ++++ .../lineage-component/lineage-component.ts | 16 ++--- .../settings.component.sass | 4 +- src/assets/images/private.png | Bin 0 -> 275 bytes src/assets/images/public.png | Bin 0 -> 431 bytes 9 files changed, 72 insertions(+), 41 deletions(-) create mode 100644 src/assets/images/private.png create mode 100644 src/assets/images/public.png diff --git a/CHANGELOG.md b/CHANGELOG.md index c99b3aaaa..5ff4bcc8b 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -9,6 +9,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ### Added - Deleting and renaming a dataset on Settings tab - Added icons for dataset's tabs +- Added more content for graph's node ### Changed - Upgraded to Node.JS generation 16.x - Upgraded to Angular 14.3 diff --git a/src/app/api/mock/dataset.mock.ts b/src/app/api/mock/dataset.mock.ts index ede8ee9fc..a4346563a 100644 --- a/src/app/api/mock/dataset.mock.ts +++ b/src/app/api/mock/dataset.mock.ts @@ -231,6 +231,7 @@ export const MOCK_NODES = [ isRoot: true, isCurrent: true, color: "#7aa3e5", + accountName: "kamu", }, meta: { forceDimensions: false, @@ -255,6 +256,7 @@ export const MOCK_NODES = [ isRoot: false, isCurrent: false, color: "#a8385d", + accountName: "kamu", }, meta: { forceDimensions: false, diff --git a/src/app/components/lineage-graph/lineage-graph.component.html b/src/app/components/lineage-graph/lineage-graph.component.html index 49f126228..cafb40111 100644 --- a/src/app/components/lineage-graph/lineage-graph.component.html +++ b/src/app/components/lineage-graph/lineage-graph.component.html @@ -34,7 +34,7 @@ {{ node.label }} - + + + {{ node.data.accountName }} + + + + + + - SQL + {{ node.data.isRoot ? "Root" : "Derivative" }} @@ -79,29 +100,6 @@ - - - - - - - - - - - - - - diff --git a/src/app/components/lineage-graph/lineage-graph.component.spec.ts b/src/app/components/lineage-graph/lineage-graph.component.spec.ts index bede247bd..bb715a3a9 100644 --- a/src/app/components/lineage-graph/lineage-graph.component.spec.ts +++ b/src/app/components/lineage-graph/lineage-graph.component.spec.ts @@ -1,21 +1,30 @@ -import { ComponentFixture, TestBed } from "@angular/core/testing"; +import { ComponentFixture, TestBed, fakeAsync, flush, tick } from "@angular/core/testing"; import { LineageGraphComponent } from "./lineage-graph.component"; import { NgxGraphModule } from "@swimlane/ngx-graph"; import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; import { MOCK_CLUSTERS, MOCK_LINKS, MOCK_NODES } from "src/app/api/mock/dataset.mock"; import { SimpleChange } from "@angular/core"; +import { Apollo, ApolloModule } from "apollo-angular"; +import { ApolloTestingModule } from "apollo-angular/testing"; +import { AccountService } from "src/app/services/account.service"; +import { of } from "rxjs"; +import { mockAccountDetails } from "src/app/api/mock/auth.mock"; +import { findElementByDataTestId } from "src/app/common/base-test.helpers.spec"; describe("LineageGraphComponent", () => { let component: LineageGraphComponent; let fixture: ComponentFixture; + let accountService: AccountService; beforeEach(async () => { await TestBed.configureTestingModule({ declarations: [LineageGraphComponent], - imports: [NgxGraphModule, BrowserAnimationsModule], + providers: [Apollo], + imports: [NgxGraphModule, BrowserAnimationsModule, ApolloModule, ApolloTestingModule], }).compileComponents(); fixture = TestBed.createComponent(LineageGraphComponent); + accountService = TestBed.inject(AccountService); component = fixture.componentInstance; component.view = [500, 600]; component.links = MOCK_LINKS; @@ -40,7 +49,15 @@ describe("LineageGraphComponent", () => { clusters: new SimpleChange(MOCK_CLUSTERS, [MOCK_CLUSTERS[0]], false), }); fixture.detectChanges(); - expect(component.graphNodes).toEqual([MOCK_NODES[0]]); }); + + it("should check render account avatar", fakeAsync(() => { + spyOn(accountService, "getAccountInfoByName").and.returnValue(of(mockAccountDetails)); + tick(); + fixture.detectChanges(); + const node = findElementByDataTestId(fixture, `account-avatar-${MOCK_NODES[0].label}`); + expect(node).toBeDefined(); + flush(); + })); }); diff --git a/src/app/components/lineage-graph/lineage-graph.component.ts b/src/app/components/lineage-graph/lineage-graph.component.ts index 6e5bd9969..b6c44fa9c 100644 --- a/src/app/components/lineage-graph/lineage-graph.component.ts +++ b/src/app/components/lineage-graph/lineage-graph.component.ts @@ -11,6 +11,10 @@ import { } from "@angular/core"; import { Edge, MiniMapPosition } from "@swimlane/ngx-graph"; import { ClusterNode, Node } from "@swimlane/ngx-graph/lib/models/node.model"; +import { Observable } from "rxjs"; +import { AccountDetailsFragment } from "src/app/api/kamu.graphql.interface"; +import AppValues from "src/app/common/app.values"; +import { AccountService } from "src/app/services/account.service"; @Component({ selector: "app-lineage-graph", @@ -38,6 +42,9 @@ export class LineageGraphComponent implements OnChanges, OnInit { public miniMapPosition: MiniMapPosition; public graphClusters: ClusterNode[]; public graphNodes: Node[]; + public readonly DEFAULT_AVATAR_URL = AppValues.DEFAULT_AVATAR_URL; + + constructor(private accountService: AccountService) {} public ngOnInit(): void { this.graphNodes = this.nodes; @@ -61,4 +68,8 @@ export class LineageGraphComponent implements OnChanges, OnInit { public onClickNode(node: Node): void { this.onClickNodeEvent.emit(node); } + + public getAccountUrl(accountName: string): Observable { + return this.accountService.getAccountInfoByName(accountName); + } } diff --git a/src/app/dataset-view/additional-components/lineage-component/lineage-component.ts b/src/app/dataset-view/additional-components/lineage-component/lineage-component.ts index 38768d318..5088a3a1d 100644 --- a/src/app/dataset-view/additional-components/lineage-component/lineage-component.ts +++ b/src/app/dataset-view/additional-components/lineage-component/lineage-component.ts @@ -76,7 +76,7 @@ export class LineageComponent extends BaseComponent implements OnInit { } if (cluster.label === dataset.kind) { - cluster.childNodeIds.push(dataset.id ); + cluster.childNodeIds.push(dataset.id); } return cluster; }); @@ -92,27 +92,29 @@ export class LineageComponent extends BaseComponent implements OnInit { const uniqueDatasets: Record = {}; edges.forEach((edge: DatasetBasicsFragment[]) => edge.forEach((dataset: DatasetBasicsFragment) => { - uniqueDatasets[dataset.id ] = dataset; + uniqueDatasets[dataset.id] = dataset; }), ); for (const [id, dataset] of Object.entries(uniqueDatasets)) { this.lineageGraphNodes.push({ id: this.sanitizeID(id), - label: dataset.name , + label: dataset.name, data: { - id: dataset.id , - name: dataset.name , + id: dataset.id, + name: dataset.name, kind: dataset.kind, isRoot: dataset.kind === DatasetKind.Root, isCurrent: dataset.id === currentDataset.id, + access: "private", + accountName: dataset.owner.name, }, }); } edges.forEach((edge: DatasetBasicsFragment[]) => { - const source: string = this.sanitizeID(edge[0].id ); - const target: string = this.sanitizeID(edge[1].id ); + const source: string = this.sanitizeID(edge[0].id); + const target: string = this.sanitizeID(edge[1].id); this.lineageGraphLink.push({ id: `${source}__and__${target}`, diff --git a/src/app/dataset-view/additional-components/settings-component/settings.component.sass b/src/app/dataset-view/additional-components/settings-component/settings.component.sass index 966107f7e..778926992 100644 --- a/src/app/dataset-view/additional-components/settings-component/settings.component.sass +++ b/src/app/dataset-view/additional-components/settings-component/settings.component.sass @@ -11,8 +11,8 @@ p h2 font-weight: 400 margin: 0 - dl - margin: 0 + dl + margin: 0 .p-responsive padding-left: 16px diff --git a/src/assets/images/private.png b/src/assets/images/private.png new file mode 100644 index 0000000000000000000000000000000000000000..f4567f491082e9ae9d5f4a8dca85994805306324 GIT binary patch literal 275 zcmeAS@N?(olHy`uVBq!ia0vp^av;pX1|+Qw)-3{3oCO|{#S9GG!XV7ZFl&wkQ1Gay zi(^Q|oVQbLxehr9xW%uZ+w~xI%jFv@mv8hyk~M^-QJB~T5U5r)*G#vd0<;hZAQmj6Y>Am zA0;eU&t>2J73ta)5&Y}j#&fH-NcVQmT`N_+bHn47T8BIF|5dmcO_wef+1M&m$=LR* WqaoSo;eDWo7(8A5T-G@yGywqk1#H9s literal 0 HcmV?d00001 diff --git a/src/assets/images/public.png b/src/assets/images/public.png new file mode 100644 index 0000000000000000000000000000000000000000..3813692d6f6211efe95838658dfc51677825e0f0 GIT binary patch literal 431 zcmV;g0Z{&lP)U@n;eBdz&8Kf(qu z23$nO+FKcGz^QRC(f0#51dcRzI+fF@QrSikoM%86c+va}SeIN#_YCy3*C|LeEpr(h z0|zpk0-Gj)AHQp@qrI7I8;hJLCg)u_y4L*8I1lomwV~#HQRTS^5fSVNt zxGD?qq{SVRhM9Ejk`%Q~eS&UJI`6B1nK@oC$fUCcwuKJe7IZD?ysrYLT5K&5U`x8U z?^3i|F-6;TQxsZq6*BylHciY$>*X%meMyQQa~Ew8yJ%%p(J@`Ih${AhlPXjZkecr3 zi_rZ1+yuBZWH+coc8GFQ{f#q}9O&Ag>@!E@wdgvaQRBghrX}`dj`X+o$@JW{)RXx) Z@CC~w_QBOcl$ihk002ovPDHLkV1ltiyI%kR literal 0 HcmV?d00001