Added group and version

Change owner to multi owners Support change/resize columns
rbaul · Jan 26, 2024 · 7e5cb33 · 7e5cb33
1 parent e7fe9a9
commit 7e5cb33
Show file tree

Hide file tree

Showing 8 changed files with 190 additions and 101 deletions.
diff --git a/microservice-visualization-webapp/mock-server/mock.json b/microservice-visualization-webapp/mock-server/mock.json
@@ -68,76 +68,80 @@
   },
   "projects": {
     "id": 2,
-    "version": "1.0.0",
+    "version": "main",
     "applications": [
       {
-        "id": 17,
-        "name": "ordering",
-        "label": "Ordering",
-        "description": "Ordering application",
-        "type": "MICROSERVICE",
-        "location": null,
-        "owner": "Team 2",
-        "tags": {
-          "gradle": "7.6.1",
-          "java": "17",
-          "Spring Boot": "3.0.5",
-          "MVC": "3.0.5"
-        }
-      },
-      {
-        "id": 13,
+        "id": 16,
         "name": "product-api",
         "label": "Product API",
         "description": "Product application",
         "type": "LIBRARY",
+        "group": null,
+        "version": null,
         "location": null,
-        "owner": "Team 3",
+        "owners": [
+          "Team 3"
+        ],
         "tags": {
           "gradle": "7.6.1",
           "java": "17",
           "Spring Boot": "3.0.5"
         }
       },
       {
-        "id": 14,
-        "name": "customer-api",
-        "label": "Customer API",
+        "id": 17,
+        "name": "customer",
+        "label": "Customer",
         "description": "Customer application",
-        "type": "LIBRARY",
+        "type": "MICROSERVICE",
+        "group": null,
+        "version": null,
         "location": null,
-        "owner": "Team 1",
+        "owners": [
+          "Team 1"
+        ],
         "tags": {
           "gradle": "7.6.1",
+          "RabbitMQ": "2.7.5",
           "java": "17",
           "Spring Boot": "2.7.5",
+          "MongoDB": "2.7.5",
           "MVC": "2.7.5",
           "Spring Cloud": "2021.0.5"
         }
       },
       {
-        "id": 15,
-        "name": "ordering-api",
-        "label": "Ordering API",
-        "description": "Ordering application",
+        "id": 9,
+        "name": "common-lib",
+        "label": "Common LIB",
+        "description": "Common library",
         "type": "LIBRARY",
+        "group": null,
+        "version": null,
         "location": null,
-        "owner": "Team 2",
+        "owners": [
+          "Team 1"
+        ],
         "tags": {
           "gradle": "7.6.1",
+          "RabbitMQ": "2.7.10",
           "java": "17",
-          "Spring Boot": "3.0.5",
-          "MVC": "3.0.5"
+          "Spring Boot": "2.7.10",
+          "Spring Cloud": "2022.0.2"
         }
       },
       {
-        "id": 11,
+        "id": 14,
         "name": "basket-api",
         "label": "Basket API",
         "description": "Basket application",
         "type": "LIBRARY",
+        "group": null,
+        "version": null,
         "location": null,
-        "owner": "Team 1",
+        "owners": [
+          "Team 1"
+        ],
         "tags": {
           "gradle": "7.6.1",
           "RabbitMQ": "2.7.10",
@@ -147,13 +151,36 @@
         }
       },
       {
-        "id": 9,
+        "id": 12,
+        "name": "ordering-api",
+        "label": "Ordering API",
+        "description": "Ordering application",
+        "type": "LIBRARY",
+        "group": null,
+        "version": null,
+        "location": null,
+        "owners": [
+          "Team 2"
+        ],
+        "tags": {
+          "gradle": "7.6.1",
+          "java": "17",
+          "Spring Boot": "3.0.5",
+          "MVC": "3.0.5"
+        }
+      },
+      {
+        "id": 11,
         "name": "basket",
         "label": "Basket",
         "description": "Basket application",
         "type": "MICROSERVICE",
+        "group": null,
+        "version": null,
         "location": null,
-        "owner": "Team 1",
+        "owners": [
+          "Team 1"
+        ],
         "tags": {
           "gradle": "7.6.1",
           "RabbitMQ": "2.7.10",
@@ -165,54 +192,63 @@
         }
       },
       {
-        "id": 10,
-        "name": "product",
-        "label": "Product",
-        "description": "Product application",
+        "id": 15,
+        "name": "ordering",
+        "label": "Ordering",
+        "description": "Ordering application",
         "type": "MICROSERVICE",
+        "group": null,
+        "version": null,
         "location": null,
-        "owner": "Team 3",
+        "owners": [
+          "Team 2"
+        ],
         "tags": {
           "gradle": "7.6.1",
-          "RabbitMQ": "3.0.5",
           "java": "17",
           "Spring Boot": "3.0.5",
-          "MongoDB": "3.0.5",
           "MVC": "3.0.5"
         }
       },
       {
-        "id": 12,
-        "name": "common-lib",
-        "label": "Common LIB",
-        "description": "Common library",
+        "id": 13,
+        "name": "customer-api",
+        "label": "Customer API",
+        "description": "Customer application",
         "type": "LIBRARY",
+        "group": null,
+        "version": null,
         "location": null,
-        "owner": "Team 1",
+        "owners": [
+          "Team 1"
+        ],
         "tags": {
           "gradle": "7.6.1",
-          "RabbitMQ": "2.7.10",
           "java": "17",
-          "Spring Boot": "2.7.10",
-          "Spring Cloud": "2022.0.2"
+          "Spring Boot": "2.7.5",
+          "MVC": "2.7.5",
+          "Spring Cloud": "2021.0.5"
         }
       },
       {
-        "id": 16,
-        "name": "customer",
-        "label": "Customer",
-        "description": "Customer application",
+        "id": 10,
+        "name": "product",
+        "label": "Product",
+        "description": "Product application",
         "type": "MICROSERVICE",
+        "group": null,
+        "version": null,
         "location": null,
-        "owner": "Team 1",
+        "owners": [
+          "Team 3"
+        ],
         "tags": {
           "gradle": "7.6.1",
-          "RabbitMQ": "2.7.5",
+          "RabbitMQ": "3.0.5",
           "java": "17",
-          "Spring Boot": "2.7.5",
-          "MongoDB": "2.7.5",
-          "MVC": "2.7.5",
-          "Spring Cloud": "2021.0.5"
+          "Spring Boot": "3.0.5",
+          "MongoDB": "3.0.5",
+          "MVC": "3.0.5"
         }
       }
     ],
@@ -272,10 +308,20 @@
         ]
       }
     ],
+    "tags": [
+      "gradle",
+      "RabbitMQ",
+      "java",
+      "Spring Boot",
+      "MongoDB",
+      "H2",
+      "MVC",
+      "Spring Cloud"
+    ],
     "projectVersion": {
       "id": 1,
-      "name": "Demo",
-      "description": "Demo description"
+      "name": "Demo project",
+      "description": "Demo project description"
     }
   },
   "applications": {
@@ -285,7 +331,9 @@
     "description": "Product application",
     "type": "MICROSERVICE",
     "location": null,
-    "owner": "Team 3",
+    "owners": [
+      "Team 3"
+    ],
     "tags": {
       "gradle": "7.6.1",
       "RabbitMQ": "3.0.5",

diff --git a/microservice-visualization-webapp/src/app/api/application-api.model.ts b/microservice-visualization-webapp/src/app/api/application-api.model.ts
@@ -17,7 +17,7 @@ export interface ApplicationLiteDto {
     description: string,
     type: ApplicationType,
     location: string,
-    owner: string,
+    owners: string[],
     tags: any
 }
 

diff --git a/microservice-visualization-webapp/src/app/project-view/project-view.component.html b/microservice-visualization-webapp/src/app/project-view/project-view.component.html
@@ -17,7 +17,8 @@
   [paginator]="true" [rows]="10" [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">
+  [globalFilterFields]="globalFilterFields" [resizableColumns]="true"
+  [reorderableColumns]="true" [columns]="selectedColumns">
 
   <ng-template pTemplate="caption">
     <div class="flex">
@@ -27,21 +28,21 @@
         <input #filterInput pInputText type="text" (input)="dt1.filterGlobal(filterInput.value, 'contains')"
           placeholder="Search keyword" />
       </span>
-      <p-multiSelect class="to-end" [options]="tagOptions" [(ngModel)]="selectedTags"
+      <p-multiSelect class="to-end" [options]="columnOptions" [(ngModel)]="selectedColumns"
         selectedItemsLabel="{0} columns selected" [style]="{'min-width': '250px'}"
-        placeholder="Choose Columns"></p-multiSelect>
+        placeholder="Choose Columns" optionLabel="name"></p-multiSelect>
     </div>
 
   </ng-template>
 
   <ng-template pTemplate="header" let-app>
     <tr>
-      <th pSortableColumn="name">
+      <th pSortableColumn="name" pResizableColumn [style]="{ 'width': '50px' }">
         <p-columnFilter type="text" field="name" display="menu"></p-columnFilter>
         Name
         <p-sortIcon field="name"></p-sortIcon>
       </th>
-      <th pSortableColumn="type">
+      <th pSortableColumn="type" [style]="{ 'width': '50px' }">
         <p-columnFilter field="type" matchMode="equals" display="menu">
           <ng-template pTemplate="filter" let-value let-filter="filterCallback">
             <p-dropdown [ngModel]="value" [options]="types" (onChange)="filter($event.value)" placeholder="Any">
@@ -58,19 +59,14 @@
         Type
         <p-sortIcon field="type"></p-sortIcon>
       </th>
-      <th pSortableColumn="owner">
-        <p-columnFilter type="text" field="owner" display="menu"></p-columnFilter>
-        Owner
-        <p-sortIcon field="owner"></p-sortIcon>
-      </th>
-      @for (tag of selectedTags; track $index) {
-      <th pSortableColumn="tags.{{tag}}">
-        <p-columnFilter type="text" field="tags.{{tag}}" display="menu"></p-columnFilter>
-        {{tag}}
-        <p-sortIcon field="tags.{{tag}}"></p-sortIcon>
+      @for (column of selectedColumns; track $index) {
+      <th pSortableColumn="{{column.path}}" [style]="{ 'width': '50px' }" pReorderableColumn pResizableColumn>
+        <p-columnFilter type="text" field="{{column.path}}" display="menu"></p-columnFilter>
+        {{column.name}}
+        <p-sortIcon field="{{column.path}}"></p-sortIcon>
       </th>
       }
-      <th style="width: 5rem"></th>
+      <th style="width: 5rem">Action</th>
     </tr>
   </ng-template>
   <ng-template pTemplate="body" let-app>
@@ -85,12 +81,10 @@
         <p-tag value="{{app.type | lowercase}}" severity="success"></p-tag>
         }
       </td>
-      <td>
-        {{ app.owner }}
-      </td>
-      @for (tag of selectedTags; track $index) {
-      <td>
-        {{app.tags[tag]}}
+      @for (column of selectedColumns; track $index) {
+      <td [style]="{ 'text-wrap': 'wrap' }">
+        {{getData(app, column)}}
+        <!-- {{app.tags[tag]}} -->
       </td>
       }
       <td>