Feat/adding parameterization details to asset card

CHANGELOG.md

@@ -16,6 +16,7 @@ the detailed section referring to by linking pull requests or issues.
 
 #### Added
 
+- Added viewing of parameterization options to asset details
 - Added custom 404 pages to connector and broker ui
 
 #### Changed

fake-backend/json/contractAgreementPage.json

@@ -127,9 +127,9 @@
           "http://w3id.org/mds#dataModel": "my-data-model-001",
           "http://w3id.org/mds#geoReferenceMethod": "my-geo-reference-method",
           "http://w3id.org/mds#transportMode": "Rail",
-          "asset:prop:some-unsupported-property": "F10E2821BBBEA527EA02200352313BC059445190",
+          "asset:prop:some-unsupported-property": "test",
           "asset:prop:datasource:http:hints:proxyMethod": "true",
-          "asset:prop:datasource:http:hints:proxyPath": "true",
+          "asset:prop:datasource:http:hints:proxyPath": "false",
           "asset:prop:datasource:http:hints:proxyQueryParams": "true",
           "asset:prop:datasource:http:hints:proxyBody": "true"
         }

src/app/component-library/catalog/asset-detail-dialog/asset-property-grid-group-builder.ts

@@ -6,7 +6,16 @@ import {Policy} from '../../../core/services/api/legacy-managent-api-client';
 import {AssetProperties} from '../../../core/services/asset-properties';
 import {Asset} from '../../../core/services/models/asset';
 import {BrokerDataOffer} from '../../../routes/broker-ui/catalog-page/catalog-page/mapping/broker-data-offer';
-import {ContractAgreementCardMapped} from '../../../routes/connector-ui/contract-agreement-page/contract-agreement-cards/contract-agreement-card-mapped';
+import {
+  ParameterizationDetailDialogComponent
+} from '../../../routes/connector-ui/asset-page/parameterization-detail-dialog/parameterization-detail-dialog.component';
+import {
+  ParameterizationDetailDialogData,
+  assetParameterizationDetail,
+} from '../../../routes/connector-ui/asset-page/parameterization-detail-dialog/parameterization-detail-dialog.data';
+import {
+  ContractAgreementCardMapped
+} from '../../../routes/connector-ui/contract-agreement-page/contract-agreement-cards/contract-agreement-card-mapped';
 import {JsonDialogComponent} from '../../json-dialog/json-dialog/json-dialog.component';
 import {JsonDialogData} from '../../json-dialog/json-dialog/json-dialog.data';
 import {PropertyGridGroup} from '../../property-grid/property-grid-group/property-grid-group';
@@ -19,13 +28,15 @@ import {
 } from '../icon-with-online-status/online-status-utils';
 import {getLegacyPolicy} from './policy-utils';
 
+
 @Injectable()
 export class AssetPropertyGridGroupBuilder {
   constructor(
     private matDialog: MatDialog,
     private activeFeatureSet: ActiveFeatureSet,
     private propertyGridUtils: PropertyGridFieldService,
-  ) {}
+  ) {
+  }
 
   buildAssetPropertiesGroup(
     asset: Asset,
@@ -87,12 +98,45 @@ export class AssetPropertyGridGroupBuilder {
       fields.push(...this.buildMdsProperties(asset, true));
     }
 
+    if (
+      asset.httpProxyMethod != null ||
+      asset.httpProxyBody != null ||
+      asset.httpProxyPath != null ||
+      asset.httpProxyQueryParams != null
+    ) {
+      this.addParametrizationFields(asset, fields);
+    }
+
     return {
       groupLabel,
       properties: fields,
     };
   }
 
+  private addParametrizationFields(asset: Asset, fields: PropertyGridField[]) {
+    let showDetailsObject = {
+      httpProxyMethod: asset.httpProxyMethod ? 'Enabled' : 'Disabled',
+      httpProxyBody: asset.httpProxyBody ? 'Enabled' : 'Disabled',
+      httpProxyPath: asset.httpProxyPath ? 'Enabled' : 'Disabled',
+      httpProxiedQueryParams: asset.httpProxyQueryParams
+        ? 'Enabled'
+        : 'Disabled',
+    };
+
+    fields.push({
+      icon: 'list',
+      label: 'Parameterization Options',
+      text: 'Show Details',
+      onclick: () =>
+        this.onShowDetailsClick(
+          `Parameterization Options`,
+          asset.name,
+          'list',
+          showDetailsObject,
+        ),
+    });
+  }
+
   buildAdditionalPropertiesGroup(asset: Asset): PropertyGridGroup {
     const fields: PropertyGridField[] = [];
 
@@ -176,6 +220,21 @@ export class AssetPropertyGridGroupBuilder {
     this.matDialog.open(JsonDialogComponent, {data});
   }
 
+  onShowDetailsClick(
+    title: string,
+    subtitle: string,
+    icon: string,
+    details: assetParameterizationDetail,
+  ) {
+    const data: ParameterizationDetailDialogData = {
+      title,
+      subtitle,
+      icon,
+      objectForDetailDialog: details,
+    };
+    this.matDialog.open(ParameterizationDetailDialogComponent, {data});
+  }
+
   buildContractOfferGroup(
     asset: Asset,
     contractOffer: CatalogContractOffer,

src/app/routes/connector-ui/asset-page/asset-page.module.ts

@@ -31,6 +31,7 @@ import {DataSubcategoryItemsPipe} from './data-subcategory-select/data-subcatego
 import {DataSubcategorySelectComponent} from './data-subcategory-select/data-subcategory-select.component';
 import {KeywordSelectComponent} from './keyword-select/keyword-select.component';
 import {LanguageSelectComponent} from './language-select/language-select.component';
+import {ParameterizationDetailDialogComponent} from './parameterization-detail-dialog/parameterization-detail-dialog.component';
 import {TransportModeSelectComponent} from './transport-mode-select/transport-mode-select.component';
 
 @NgModule({
@@ -71,10 +72,11 @@ import {TransportModeSelectComponent} from './transport-mode-select/transport-mo
     AssetCreateDialogComponent,
     AssetPageComponent,
     DataCategorySelectComponent,
-    DataSubcategorySelectComponent,
     DataSubcategoryItemsPipe,
+    DataSubcategorySelectComponent,
     KeywordSelectComponent,
     LanguageSelectComponent,
+    ParameterizationDetailDialogComponent,
     TransportModeSelectComponent,
   ],
   exports: [AssetPageComponent],

src/app/routes/connector-ui/asset-page/parameterization-detail-dialog/parameterization-detail-dialog.component.html

@@ -0,0 +1,19 @@
+<div class="mat-card-header" mat-dialog-title removeClass="mat-dialog-title">
+  <mat-icon class="mat-icon-[40px]"> {{ data.icon }} </mat-icon>
+  <div class="mat-card-header-text">
+    <div class="mat-card-title">{{ data.title }}</div>
+    <div class="mat-card-subtitle">{{ data.subtitle }}</div>
+  </div>
+</div>
+
+<div mat-dialog-content>
+  <ul>
+    <li *ngFor="let key of Object.keys(data.objectForDetailDialog)">
+      {{ key }} : {{ data.objectForDetailDialog[key] }}
+    </li>
+  </ul>
+</div>
+
+<div class="w-full flex flex-row justify-end" mat-dialog-actions>
+  <button mat-dialog-close mat-button color="default">Close</button>
+</div>

src/app/routes/connector-ui/asset-page/parameterization-detail-dialog/parameterization-detail-dialog.component.ts

@@ -0,0 +1,15 @@
+import {Component, Inject} from '@angular/core';
+import {MAT_DIALOG_DATA} from '@angular/material/dialog';
+import {ParameterizationDetailDialogData} from './parameterization-detail-dialog.data';
+
+@Component({
+  selector: 'app-parameterization-detail-dialog',
+  templateUrl: './parameterization-detail-dialog.component.html',
+})
+export class ParameterizationDetailDialogComponent {
+  constructor(
+    @Inject(MAT_DIALOG_DATA) public data: ParameterizationDetailDialogData,
+  ) {}
+
+  Object = Object;
+}

src/app/routes/connector-ui/asset-page/parameterization-detail-dialog/parameterization-detail-dialog.data.ts

@@ -0,0 +1,10 @@
+export interface ParameterizationDetailDialogData {
+  title: string;
+  subtitle: string;
+  icon: string;
+  objectForDetailDialog: assetParameterizationDetail;
+}
+
+export interface assetParameterizationDetail {
+  [key: string]: string;
+}

src/app/routes/connector-ui/contract-agreement-page/contract-agreement-page/contract-agreement-page.service.ts

@@ -13,7 +13,6 @@ import {ContractAgreementCardMapped} from '../contract-agreement-cards/contract-
 import {ContractAgreementCardMappedService} from '../contract-agreement-cards/contract-agreement-card-mapped.service';
 import {ContractAgreementPageData} from './contract-agreement-page.data';
 
-
 @Injectable({providedIn: 'root'})
 export class ContractAgreementPageService {
   constructor(