Support of view all dependencies of project

microservice-visualization-webapp/src/app/api/project-api.model.ts

@@ -30,4 +30,16 @@ export interface ProjectDto {
 export interface ProjectLiteDto {
     id: number,
     version: string
+}
+
+export interface DependencyDto {
+    packageName: string,
+    artifactName: string,
+    version: string,
+    usageOf: string[]
+}
+
+export interface ProjectDependenciesDto extends ProjectLiteDto {
+    dependencies: DependencyDto[],
+    projectVersion: ProjectVersionLiteDto
 }

microservice-visualization-webapp/src/app/api/project-api.service.ts

@@ -3,7 +3,7 @@ import { Injectable, inject } from '@angular/core';
 import { Observable } from 'rxjs';
 import { httpJsonOptions } from '../utils/api-utils';
 import { Page } from './../utils/page';
-import { ProjectDto, ProjectLiteDto } from './project-api.model';
+import { ProjectDependenciesDto, ProjectDto, ProjectLiteDto } from './project-api.model';
 
 const API_URL = '/api/v1/projects';
 
@@ -27,4 +27,8 @@ export class ProjectApiService {
       { params: new HttpParams().set('projectVersionId', projectVersionId) });
   }
 
+  public getDependencies(id: number): Observable<ProjectDependenciesDto> {
+    return this.http.get<ProjectDependenciesDto>(`${API_URL}/${id}/dependencies`, httpJsonOptions);
+  }
+
 }

microservice-visualization-webapp/src/app/app.component.ts

@@ -19,7 +19,7 @@ import { ToolbarModule } from 'primeng/toolbar';
 export class AppComponent {
   router = inject(Router);
 
-  title = 'Microservice Visualization by Dependencies';
+  title = 'Version Control Management';
 
   navigateHome() {
     this.router.navigate(['projects']);

microservice-visualization-webapp/src/app/app.routes.ts

@@ -2,10 +2,12 @@ import { Routes } from '@angular/router';
 import { ProjectVersionsComponent } from './project-versions/project-versions.component';
 import { ProjectViewComponent } from './project-view/project-view.component';
 import { ProjectsComponent } from './projects/projects.component';
+import { ProjectDependenciesComponent } from './project-dependencies/project-dependencies.component';
 
 export const routes: Routes = [
   { path: 'projects', component: ProjectsComponent },
   { path: 'projects/:id/versions', component: ProjectVersionsComponent },
   { path: 'projects/:id', component: ProjectViewComponent },
+  { path: 'projects/:id/dependencies', component: ProjectDependenciesComponent },
   { path: '**', redirectTo: 'projects', pathMatch: 'full' }
 ];

microservice-visualization-webapp/src/app/project-dependencies/project-dependencies.component.html

@@ -0,0 +1,67 @@
+<p-toolbar>
+    <div class="p-toolbar-group-start">
+        Dependencies of {{data.projectVersion.name}}
+    </div>
+    <p-tag value="{{data.version}}" severity="success"></p-tag>
+    <div class="p-toolbar-group-end">
+        <button label="Open Project" pButton pRipple icon="pi pi-external-link" class="p-button-text"
+            (click)="openProject()"></button>
+    </div>
+</p-toolbar>
+<p-table #dt1 [value]="data.dependencies" [tableStyle]="{ 'min-width': '50rem' }" [paginator]="true" [rows]="25"
+    [showCurrentPageReport]="true" currentPageReportTemplate="Showing {first} to {last} of {totalRecords} entries"
+    [rowsPerPageOptions]="[10, 25, 50]" [scrollable]="true" scrollHeight="calc(80vh - 200px)" (sortFunction)="customSort($event)" [customSort]="true"
+    [styleClass]="'p-datatable-sm'" [resizableColumns]="true" [reorderableColumns]="true"
+    [globalFilterFields]="globalFilterFields">
+
+    <ng-template pTemplate="caption">
+        <div class="flex">
+            <button pButton label="Clear" class="p-button-outlined" icon="pi pi-filter-slash"
+                (click)="clear(dt1)"></button>
+            <span class="p-input-icon-left ml-auto">
+                <i class="pi pi-search"></i>
+                <input #filterInput pInputText type="text" (input)="dt1.filterGlobal(filterInput.value, 'contains')"
+                    placeholder="Search keyword" />
+            </span>
+        </div>
+    </ng-template>
+
+    <ng-template pTemplate="header">
+        <tr>
+            <th pSortableColumn="packageName" pResizableColumn [style]="{ 'width': '50px' }">
+                <p-columnFilter type="text" field="packageName" display="menu"></p-columnFilter>
+                Package Name
+                <p-sortIcon field="packageName"></p-sortIcon>
+            </th>
+            <th pSortableColumn="artifactName" pResizableColumn [style]="{ 'width': '50px' }">
+                <p-columnFilter type="text" field="artifactName" display="menu"></p-columnFilter>
+                Artifact Name
+                <p-sortIcon field="artifactName"></p-sortIcon>
+            </th>
+            <th pSortableColumn="version" pResizableColumn [style]="{ 'width': '50px' }">
+                <p-columnFilter type="text" field="version" display="menu"></p-columnFilter>
+                Version
+                <p-sortIcon field="version"></p-sortIcon>
+            </th>
+            <th>Usage</th>
+            <!-- <th style="width: 5rem"></th> -->
+        </tr>
+    </ng-template>
+    <ng-template pTemplate="body" let-dependency>
+        <tr>
+            <td>{{ dependency.packageName }}</td>
+            <td>{{ dependency.artifactName }}</td>
+            <td>{{ dependency.version }}</td>
+            <td [style]="{ 'text-wrap': 'wrap' }">{{ dependency.usageOf }}</td>
+            <!-- <td style="display: flex">
+        <button label="Open" pButton pRipple icon="pi pi-external-link" class="p-button-text" (click)="openVersion(project)"></button>
+        <button label="Dependencies" pButton pRipple icon="pi pi-window-maximize" class="p-button-text" (click)="showProjectDependencies(project)"></button>
+      </td> -->
+        </tr>
+    </ng-template>
+    <ng-template pTemplate="summary">
+        <div class="flex align-items-center justify-content-between">
+            In total there are {{data.dependencies ? data.dependencies.length : 0 }} dependencies.
+        </div>
+    </ng-template>
+</p-table>

microservice-visualization-webapp/src/app/project-dependencies/project-dependencies.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ProjectDependenciesComponent } from './project-dependencies.component';
+
+describe('ProjectDependenciesComponent', () => {
+  let component: ProjectDependenciesComponent;
+  let fixture: ComponentFixture<ProjectDependenciesComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [ProjectDependenciesComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(ProjectDependenciesComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

microservice-visualization-webapp/src/app/project-dependencies/project-dependencies.component.ts

@@ -0,0 +1,72 @@
+import { CommonModule } from '@angular/common';
+import { Component, inject } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+import { ButtonModule } from 'primeng/button';
+import { InputTextModule } from 'primeng/inputtext';
+import { Table, TableModule } from 'primeng/table';
+import { ToolbarModule } from 'primeng/toolbar';
+import { ProjectApiService } from '../api/project-api.service';
+import { TagModule } from 'primeng/tag';
+import { ProjectDependenciesDto } from '../api/project-api.model';
+
+@Component({
+  selector: 'app-project-dependencies',
+  standalone: true,
+  imports: [
+    CommonModule,
+    ToolbarModule,
+    TableModule,
+    InputTextModule,
+    ButtonModule,
+    TagModule
+  ],
+  templateUrl: './project-dependencies.component.html',
+  styleUrl: './project-dependencies.component.scss'
+})
+export class ProjectDependenciesComponent {
+  private activatedRoute = inject(ActivatedRoute);
+  private router = inject(Router);
+  private projectApiService = inject(ProjectApiService);
+
+  data!: ProjectDependenciesDto;
+
+  globalFilterFields: string[] = ['packageName', 'artifactName'];
+
+  ngOnInit() {
+    this.activatedRoute.params.subscribe(value => {
+      let projectId: number = value['id'];
+      if (projectId) {
+        this.projectApiService.getDependencies(projectId).subscribe(result => {
+          this.data = result;
+        });
+      }
+    });
+  }
+
+  openProject(): void {
+    this.router.navigate([`projects/${this.data.id}`]);
+  }
+
+  clear(table: Table) {
+    table.clear();
+  }
+
+  customSort(event: any) {
+    event.data.sort((data1: any, data2: any) => {
+      let value1 = data1[event.field];
+      let value2 = data2[event.field];
+      let result = null;
+
+      if (value1 == null && value2 != null) result = -1;
+      else if (value1 != null && value2 == null) result = 1;
+      else if (value1 == null && value2 == null) result = 0;
+      else if (typeof value1 === 'string' && typeof value2 === 'string') {
+        result = value1.localeCompare(value2, undefined, { numeric: true });
+      }
+      else result = value1 < value2 ? -1 : value1 > value2 ? 1 : 0;
+
+      return event.order * result;
+    });
+  }
+
+}

microservice-visualization-webapp/src/app/project-versions/project-versions.component.html

@@ -1,6 +1,6 @@
 <p-toolbar>
   <div class="p-toolbar-group-start">
-    Project: {{data.name}} - {{data.description}}
+    Versions of {{data.name}} - {{data.description}}
   </div>
 </p-toolbar>
 
@@ -32,8 +32,9 @@
           <p-tag value="main" severity="danger"></p-tag>
         }
       </td>
-      <td>
-        <button type="button" pButton pRipple icon="pi pi-external-link" (click)="openVersion(project)"></button>
+      <td style="display: flex">
+        <button label="Open" pButton pRipple icon="pi pi-external-link" class="p-button-text" (click)="openVersion(project)"></button>
+        <button label="Dependencies" pButton pRipple icon="pi pi-window-maximize" class="p-button-text" (click)="showProjectDependencies(project)"></button>
       </td>
     </tr>
   </ng-template>

microservice-visualization-webapp/src/app/project-versions/project-versions.component.ts

@@ -1,5 +1,5 @@
 import { CommonModule } from '@angular/common';
-import { Component, OnInit, inject } from '@angular/core';
+import { Component, OnDestroy, OnInit, inject } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
 import { ButtonModule } from 'primeng/button';
 import { InputTextModule } from 'primeng/inputtext';
@@ -58,4 +58,8 @@ export class ProjectVersionsComponent implements OnInit {
     this.router.navigate([`projects/${project.id}`]);
   }
 
+  showProjectDependencies(project: ProjectLiteDto) {
+    this.router.navigate([`projects/${project.id}/dependencies`]);
+  }
+
 }

microservice-visualization-webapp/src/app/project-view/project-view.component.html

@@ -1,7 +1,10 @@
 <p-toolbar>
   <div class="p-toolbar-group-start">
-    Project: {{data.projectVersion.name}} - {{data.version}}
+    {{data.projectVersion.name}}
+    <button label="Dependencies" pButton pRipple icon="pi pi-external-link" class="p-button-text"
+      (click)="showProjectDependencies()"></button>
   </div>
+  <p-tag value="{{data.version}}" severity="success"></p-tag>
   <div class="p-toolbar-group-end">
     <!-- <p-button (click)="sidebarVisible = true" icon="pi pi-arrow-right"></p-button> -->
     <p-selectButton [options]="toggleOptions" [(ngModel)]="toggleValue" optionLabel="name"
@@ -14,11 +17,11 @@
 @case (1) {
 <p-table #dt1 dataKey="id" selectionMode="single" (onRowSelect)="onRowSelect($event)"
   (onRowUnselect)="onRowUnselect($event)" [value]="data.applications" [tableStyle]="{ 'min-width': '50rem' }"
-  [paginator]="true" [rows]="10" [showCurrentPageReport]="true" (sortFunction)="customSort($event)" [customSort]="true"
+  [paginator]="true" [rows]="25" [showCurrentPageReport]="true" (sortFunction)="customSort($event)" [customSort]="true"
   currentPageReportTemplate="Showing {first} to {last} of {totalRecords} entries" [rowsPerPageOptions]="[10, 25, 50]"
   [scrollable]="true" scrollHeight="calc(80vh - 200px)" [styleClass]="'p-datatable-sm'"
-  [globalFilterFields]="globalFilterFields" [resizableColumns]="true"
-  [reorderableColumns]="true" [columns]="selectedColumns">
+  [globalFilterFields]="globalFilterFields" [resizableColumns]="true" [reorderableColumns]="true"
+  [columns]="selectedColumns">
 
   <ng-template pTemplate="caption">
     <div class="flex">
@@ -29,8 +32,8 @@
           placeholder="Search keyword" />
       </span>
       <p-multiSelect class="to-end" [options]="columnOptions" [(ngModel)]="selectedColumns"
-        selectedItemsLabel="{0} columns selected" [style]="{'min-width': '250px'}"
-        placeholder="Choose Columns" optionLabel="name"></p-multiSelect>
+        selectedItemsLabel="{0} columns selected" [style]="{'min-width': '250px'}" placeholder="Choose Columns"
+        optionLabel="name"></p-multiSelect>
     </div>
 
   </ng-template>
@@ -88,7 +91,8 @@
       </td>
       }
       <td>
-        <button type="button" pButton pRipple icon="pi pi-window-maximize" (click)="showApplication(app)"></button>
+        <button label="Dependencies" pButton pRipple icon="pi pi-window-maximize" class="p-button-text"
+          (click)="showApplication(app)"></button>
       </td>
     </tr>
   </ng-template>

microservice-visualization-webapp/src/app/project-view/project-view.component.ts

@@ -1,7 +1,7 @@
 import { CommonModule } from '@angular/common';
 import { Component, OnDestroy, OnInit, inject } from '@angular/core';
 import { FormsModule } from '@angular/forms';
-import { ActivatedRoute } from '@angular/router';
+import { ActivatedRoute, Router } from '@angular/router';
 import { ButtonModule } from 'primeng/button';
 import { DialogModule } from 'primeng/dialog';
 import { DialogService, DynamicDialogRef } from 'primeng/dynamicdialog';
@@ -20,6 +20,7 @@ import { ProjectTopologyComponent, TopologyType } from '../project-topology/proj
 import { get } from 'lodash';
 import { DropdownModule } from 'primeng/dropdown';
 import { MultiSelectModule } from 'primeng/multiselect';
+import { ProjectDependenciesComponent } from '../project-dependencies/project-dependencies.component';
 
 @Component({
   selector: 'app-project-view',
@@ -48,6 +49,7 @@ export class ProjectViewComponent implements OnInit, OnDestroy {
   private activatedRoute = inject(ActivatedRoute);
   public dialogService = inject(DialogService);
   private projectApi = inject(ProjectApiService);
+  private router = inject(Router);
 
   public TopologyTypeEnum = TopologyType;
 
@@ -131,6 +133,10 @@ export class ProjectViewComponent implements OnInit, OnDestroy {
     });
   }
 
+  showProjectDependencies() {
+    this.router.navigate([`projects/${this.data.id}/dependencies`]);
+  }
+
   getData(application: ApplicationLiteDto, column: ColumnData): string {
     return get(application, column.path);
   }

microservice-visualization-webapp/src/app/projects/projects.component.html

@@ -14,9 +14,9 @@
       <td>{{ project.description }}</td>
       <td>
         <div style="display: flex">
-          <button type="button" pButton pRipple icon="pi pi-angle-right"
+          <button label="Versions" pButton pRipple icon="pi pi-angle-right" class="p-button-text"
             (click)="selectProjectVersion(project)"></button>
-          <button type="button" pButton pRipple icon="pi pi-external-link"
+          <button label="Main" pButton pRipple icon="pi pi-external-link" class="p-button-text"
             (click)="openDefaultVersion(project)"></button>
         </div>
       </td>