From b58b5b0d74f22560024e6a0335ac708b85494b7d Mon Sep 17 00:00:00 2001 From: SaadBendou Date: Thu, 6 Jul 2023 11:55:25 +0200 Subject: [PATCH 1/7] Visualize Connector Status --- .../asset-property-grid-group-builder.ts | 5 +- .../property-grid.component.html | 8 ++++ .../data-offer-cards.component.html | 42 ++++++++++++----- .../connector-cards.component.html | 30 +++++++++--- src/styles.scss | 47 +++++++++++++++++++ 5 files changed, 114 insertions(+), 18 deletions(-) diff --git a/src/app/component-library/catalog/asset-detail-dialog/asset-property-grid-group-builder.ts b/src/app/component-library/catalog/asset-detail-dialog/asset-property-grid-group-builder.ts index c4a9ac2cd..2bec8b656 100644 --- a/src/app/component-library/catalog/asset-detail-dialog/asset-property-grid-group-builder.ts +++ b/src/app/component-library/catalog/asset-detail-dialog/asset-property-grid-group-builder.ts @@ -315,7 +315,10 @@ export class AssetPropertyGridGroupBuilder { copyButton: true, }, { - icon: 'link', + icon: + dataOffer.connectorOnlineStatus == 'ONLINE' + ? 'check_circle' + : 'remove_circle', label: 'Status', labelTitle: `Last updated ${lastUpdate}`, text: diff --git a/src/app/component-library/property-grid/property-grid/property-grid.component.html b/src/app/component-library/property-grid/property-grid/property-grid.component.html index edf70aea2..6d0afed15 100644 --- a/src/app/component-library/property-grid/property-grid/property-grid.component.html +++ b/src/app/component-library/property-grid/property-grid/property-grid.component.html @@ -10,6 +10,14 @@ {{ prop.icon }}
diff --git a/src/app/routes/broker-ui/catalog-page/data-offer-cards/data-offer-cards.component.html b/src/app/routes/broker-ui/catalog-page/data-offer-cards/data-offer-cards.component.html index 1e0eec1b5..f900e6fdb 100644 --- a/src/app/routes/broker-ui/catalog-page/data-offer-cards/data-offer-cards.component.html +++ b/src/app/routes/broker-ui/catalog-page/data-offer-cards/data-offer-cards.component.html @@ -1,16 +1,36 @@ - - sim_card - - - {{ asset.name }} - - - {{ asset.originatorOrganization }} + +
+ sim_card +
+ check_circle + remove_circle +
+
+
+ + + {{ asset.name }} + + + {{ + asset.originatorOrganization + }} +
diff --git a/src/app/routes/broker-ui/connector-page/connector-cards/connector-cards.component.html b/src/app/routes/broker-ui/connector-page/connector-cards/connector-cards.component.html index da29ffa1b..aeaec9773 100644 --- a/src/app/routes/broker-ui/connector-page/connector-cards/connector-cards.component.html +++ b/src/app/routes/broker-ui/connector-page/connector-cards/connector-cards.component.html @@ -1,10 +1,28 @@ - - link - - {{ connector.endpoint }} - - EDC Connector + +
+ link +
+ check_circle + remove_circle +
+
+
+ + {{ connector.endpoint }} + + EDC Connector +
diff --git a/src/styles.scss b/src/styles.scss index 176810ab1..6c16b8362 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -9,6 +9,53 @@ body { body { margin: 0; } +.header-content { + display: flex; + align-items: center; + justify-content: space-between; + width: 100%; +} + +.icon-wrapper { + display: flex; + align-items: flex-end; + justify-content: flex-end; + width: 40px; + height: 40px; + margin-right: 20px; +} + +.main-icon { + position: absolute; + font-size: 40px; + margin-right: 8px; +} + +.small-icon-wrapper { + position: absolute; + width: 15px; + height: 15px; +} + +.small-icon { + font-size: 15px; + z-index: 0; +} + +.title-wrapper { + display: flex; + flex-direction: column; + align-items: stretch; + width: 100%; +} + +.check-green { + color: green; +} + +.remove-red { + color: red; +} .snackbar-info-style { background-color: orange; From 3c2b0f735721bf13ffe90b1254c273fd6de79eec Mon Sep 17 00:00:00 2001 From: SaadBendou Date: Thu, 6 Jul 2023 15:15:51 +0200 Subject: [PATCH 2/7] Added 'DEAD' status + 2 more Test Cases for better visualization --- fake-backend/json/brokerCatalogPage.json | 126 ++++++++++++++++++ fake-backend/json/brokerConnectorPage.json | 7 + .../asset-property-grid-group-builder.ts | 2 + .../property-grid.component.html | 2 + .../data-offer-cards.component.html | 10 +- .../connector-cards.component.html | 6 + src/styles.scss | 1 + 7 files changed, 152 insertions(+), 2 deletions(-) diff --git a/fake-backend/json/brokerCatalogPage.json b/fake-backend/json/brokerCatalogPage.json index 7da924633..24e3a2c3b 100644 --- a/fake-backend/json/brokerCatalogPage.json +++ b/fake-backend/json/brokerCatalogPage.json @@ -109,6 +109,132 @@ } } ] + }, + { + "assetId": "urn:artifact:my-asset", + "connectorEndpoint": "http://my-connector/ids/data", + "connectorOnlineStatus": "OFFLINE", + "connectorOfflineSinceOrLastUpdatedAt": "2023-05-31T12:02:41+02:00", + "createdAt": "2023-05-26T12:02:41+02:00", + "updatedAt": "2023-05-31T12:02:41+02:00", + "properties": { + "asset:prop:id": "urn:artifact:db-rail-network-2023-jan", + "asset:prop:name": "Rail Network DB 2023 January TEST2", + "asset:prop:version": "1.1", + "asset:prop:originator": "https://example-connector.rail-mgmt.bahn.de/api/v1/ids/data", + "asset:prop:originatorOrganization": "Deutsche Bahn AG", + "asset:prop:keywords": "db, bahn, rail, Rail-Designer", + "asset:prop:contenttype": "application/json", + "asset:prop:description": "Train Network Map released on 10.01.2023, valid until 31.02.2023. \nFile format is xyz as exported by Rail-Designer.", + "asset:prop:language": "https://w3id.org/idsa/code/EN", + "asset:prop:publisher": "https://my.cool-api.gg/about", + "asset:prop:standardLicense": "https://my.cool-api.gg/license", + "asset:prop:endpointDocumentation": "https://my.cool-api.gg/docs", + "http://w3id.org/mds#dataCategory": "Infrastructure and Logistics", + "http://w3id.org/mds#dataSubcategory": "General Information About Planning Of Routes", + "http://w3id.org/mds#dataModel": "my-data-model-001", + "http://w3id.org/mds#geoReferenceMethod": "my-geo-reference-method", + "http://w3id.org/mds#transportMode": "Rail" + }, + "contractOffers": [ + { + "contractOfferId": "my-contract-offer-1", + "createdAt": "2023-05-26T12:02:41+02:00", + "updatedAt": "2023-05-31T12:02:41+02:00", + "contractPolicy": { + "legacyPolicy": { + "permissions": [ + { + "edctype": "dataspaceconnector:permission", + "action": { + "type": "USE" + }, + "constraints": [ + { + "edctype": "AtomicConstraint", + "leftExpression": { + "edctype": "dataspaceconnector:literalexpression", + "value": "ALWAYS_TRUE" + }, + "rightExpression": { + "edctype": "dataspaceconnector:literalexpression", + "value": "true" + }, + "operator": "EQ" + } + ] + } + ], + "@type": { + "@policytype": "set" + } + } + } + } + ] + }, + { + "assetId": "urn:artifact:my-asset", + "connectorEndpoint": "http://my-connector/ids/data", + "connectorOnlineStatus": "DEAD", + "connectorOfflineSinceOrLastUpdatedAt": "2023-05-31T12:02:41+02:00", + "createdAt": "2023-05-26T12:02:41+02:00", + "updatedAt": "2023-05-31T12:02:41+02:00", + "properties": { + "asset:prop:id": "urn:artifact:db-rail-network-2023-jan", + "asset:prop:name": "Rail Network DB 2023 January TEST3", + "asset:prop:version": "1.1", + "asset:prop:originator": "https://example-connector.rail-mgmt.bahn.de/api/v1/ids/data", + "asset:prop:originatorOrganization": "Deutsche Bahn AG", + "asset:prop:keywords": "db, bahn, rail, Rail-Designer", + "asset:prop:contenttype": "application/json", + "asset:prop:description": "Train Network Map released on 10.01.2023, valid until 31.02.2023. \nFile format is xyz as exported by Rail-Designer.", + "asset:prop:language": "https://w3id.org/idsa/code/EN", + "asset:prop:publisher": "https://my.cool-api.gg/about", + "asset:prop:standardLicense": "https://my.cool-api.gg/license", + "asset:prop:endpointDocumentation": "https://my.cool-api.gg/docs", + "http://w3id.org/mds#dataCategory": "Infrastructure and Logistics", + "http://w3id.org/mds#dataSubcategory": "General Information About Planning Of Routes", + "http://w3id.org/mds#dataModel": "my-data-model-001", + "http://w3id.org/mds#geoReferenceMethod": "my-geo-reference-method", + "http://w3id.org/mds#transportMode": "Rail" + }, + "contractOffers": [ + { + "contractOfferId": "my-contract-offer-1", + "createdAt": "2023-05-26T12:02:41+02:00", + "updatedAt": "2023-05-31T12:02:41+02:00", + "contractPolicy": { + "legacyPolicy": { + "permissions": [ + { + "edctype": "dataspaceconnector:permission", + "action": { + "type": "USE" + }, + "constraints": [ + { + "edctype": "AtomicConstraint", + "leftExpression": { + "edctype": "dataspaceconnector:literalexpression", + "value": "ALWAYS_TRUE" + }, + "rightExpression": { + "edctype": "dataspaceconnector:literalexpression", + "value": "true" + }, + "operator": "EQ" + } + ] + } + ], + "@type": { + "@policytype": "set" + } + } + } + } + ] } ] } diff --git a/fake-backend/json/brokerConnectorPage.json b/fake-backend/json/brokerConnectorPage.json index 51b7a5298..0ad1f36d4 100644 --- a/fake-backend/json/brokerConnectorPage.json +++ b/fake-backend/json/brokerConnectorPage.json @@ -25,6 +25,13 @@ "lastRefreshAttemptAt": "2023-05-31T14:06:21.536182+02:00", "onlineStatus": "ONLINE", "numContractOffers": 2 + }, + { + "id": "https://example2.com", + "endpoint": "https://example2.com/ids/data", + "createdAt": "2022-05-31T14:06:21.536182+02:00", + "onlineStatus": "DEAD", + "numContractOffers": 0 } ] } diff --git a/src/app/component-library/catalog/asset-detail-dialog/asset-property-grid-group-builder.ts b/src/app/component-library/catalog/asset-detail-dialog/asset-property-grid-group-builder.ts index 2bec8b656..f9c3dd3cb 100644 --- a/src/app/component-library/catalog/asset-detail-dialog/asset-property-grid-group-builder.ts +++ b/src/app/component-library/catalog/asset-detail-dialog/asset-property-grid-group-builder.ts @@ -318,6 +318,8 @@ export class AssetPropertyGridGroupBuilder { icon: dataOffer.connectorOnlineStatus == 'ONLINE' ? 'check_circle' + : dataOffer.connectorOnlineStatus == 'OFFLINE' + ? 'pause_circle' : 'remove_circle', label: 'Status', labelTitle: `Last updated ${lastUpdate}`, diff --git a/src/app/component-library/property-grid/property-grid/property-grid.component.html b/src/app/component-library/property-grid/property-grid/property-grid.component.html index 6d0afed15..9304dd90f 100644 --- a/src/app/component-library/property-grid/property-grid/property-grid.component.html +++ b/src/app/component-library/property-grid/property-grid/property-grid.component.html @@ -16,6 +16,8 @@ ? 'green' : prop.icon === 'remove_circle' ? 'red' + : prop.icon === 'pause_circle' + ? '#cb8e1a' : 'inherit' }" >{{ prop.icon }}sim_card
check_circle pause_circle + remove_circlepause_circle + remove_circle diff --git a/src/styles.scss b/src/styles.scss index 6c16b8362..66d4cce87 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -40,6 +40,7 @@ body { .small-icon { font-size: 15px; z-index: 0; + margin-top: 7px; } .title-wrapper { From a3e77dc38692693d0ad120bf7f1fdc881b8e3f33 Mon Sep 17 00:00:00 2001 From: SaadBendou Date: Thu, 6 Jul 2023 15:15:51 +0200 Subject: [PATCH 3/7] externalized color choices to styles.sc --- fake-backend/json/brokerCatalogPage.json | 126 ++++++++++++++++++ fake-backend/json/brokerConnectorPage.json | 19 ++- fake-backend/json/logs.json | 35 +++++ .../asset-property-grid-group-builder.ts | 2 + .../property-grid.component.html | 13 +- .../property-grid/property-grid.component.ts | 13 ++ .../data-offer-cards.component.html | 23 ++-- .../connector-cards.component.html | 19 +-- src/styles.scss | 12 ++ 9 files changed, 232 insertions(+), 30 deletions(-) create mode 100644 fake-backend/json/logs.json diff --git a/fake-backend/json/brokerCatalogPage.json b/fake-backend/json/brokerCatalogPage.json index 7da924633..24e3a2c3b 100644 --- a/fake-backend/json/brokerCatalogPage.json +++ b/fake-backend/json/brokerCatalogPage.json @@ -109,6 +109,132 @@ } } ] + }, + { + "assetId": "urn:artifact:my-asset", + "connectorEndpoint": "http://my-connector/ids/data", + "connectorOnlineStatus": "OFFLINE", + "connectorOfflineSinceOrLastUpdatedAt": "2023-05-31T12:02:41+02:00", + "createdAt": "2023-05-26T12:02:41+02:00", + "updatedAt": "2023-05-31T12:02:41+02:00", + "properties": { + "asset:prop:id": "urn:artifact:db-rail-network-2023-jan", + "asset:prop:name": "Rail Network DB 2023 January TEST2", + "asset:prop:version": "1.1", + "asset:prop:originator": "https://example-connector.rail-mgmt.bahn.de/api/v1/ids/data", + "asset:prop:originatorOrganization": "Deutsche Bahn AG", + "asset:prop:keywords": "db, bahn, rail, Rail-Designer", + "asset:prop:contenttype": "application/json", + "asset:prop:description": "Train Network Map released on 10.01.2023, valid until 31.02.2023. \nFile format is xyz as exported by Rail-Designer.", + "asset:prop:language": "https://w3id.org/idsa/code/EN", + "asset:prop:publisher": "https://my.cool-api.gg/about", + "asset:prop:standardLicense": "https://my.cool-api.gg/license", + "asset:prop:endpointDocumentation": "https://my.cool-api.gg/docs", + "http://w3id.org/mds#dataCategory": "Infrastructure and Logistics", + "http://w3id.org/mds#dataSubcategory": "General Information About Planning Of Routes", + "http://w3id.org/mds#dataModel": "my-data-model-001", + "http://w3id.org/mds#geoReferenceMethod": "my-geo-reference-method", + "http://w3id.org/mds#transportMode": "Rail" + }, + "contractOffers": [ + { + "contractOfferId": "my-contract-offer-1", + "createdAt": "2023-05-26T12:02:41+02:00", + "updatedAt": "2023-05-31T12:02:41+02:00", + "contractPolicy": { + "legacyPolicy": { + "permissions": [ + { + "edctype": "dataspaceconnector:permission", + "action": { + "type": "USE" + }, + "constraints": [ + { + "edctype": "AtomicConstraint", + "leftExpression": { + "edctype": "dataspaceconnector:literalexpression", + "value": "ALWAYS_TRUE" + }, + "rightExpression": { + "edctype": "dataspaceconnector:literalexpression", + "value": "true" + }, + "operator": "EQ" + } + ] + } + ], + "@type": { + "@policytype": "set" + } + } + } + } + ] + }, + { + "assetId": "urn:artifact:my-asset", + "connectorEndpoint": "http://my-connector/ids/data", + "connectorOnlineStatus": "DEAD", + "connectorOfflineSinceOrLastUpdatedAt": "2023-05-31T12:02:41+02:00", + "createdAt": "2023-05-26T12:02:41+02:00", + "updatedAt": "2023-05-31T12:02:41+02:00", + "properties": { + "asset:prop:id": "urn:artifact:db-rail-network-2023-jan", + "asset:prop:name": "Rail Network DB 2023 January TEST3", + "asset:prop:version": "1.1", + "asset:prop:originator": "https://example-connector.rail-mgmt.bahn.de/api/v1/ids/data", + "asset:prop:originatorOrganization": "Deutsche Bahn AG", + "asset:prop:keywords": "db, bahn, rail, Rail-Designer", + "asset:prop:contenttype": "application/json", + "asset:prop:description": "Train Network Map released on 10.01.2023, valid until 31.02.2023. \nFile format is xyz as exported by Rail-Designer.", + "asset:prop:language": "https://w3id.org/idsa/code/EN", + "asset:prop:publisher": "https://my.cool-api.gg/about", + "asset:prop:standardLicense": "https://my.cool-api.gg/license", + "asset:prop:endpointDocumentation": "https://my.cool-api.gg/docs", + "http://w3id.org/mds#dataCategory": "Infrastructure and Logistics", + "http://w3id.org/mds#dataSubcategory": "General Information About Planning Of Routes", + "http://w3id.org/mds#dataModel": "my-data-model-001", + "http://w3id.org/mds#geoReferenceMethod": "my-geo-reference-method", + "http://w3id.org/mds#transportMode": "Rail" + }, + "contractOffers": [ + { + "contractOfferId": "my-contract-offer-1", + "createdAt": "2023-05-26T12:02:41+02:00", + "updatedAt": "2023-05-31T12:02:41+02:00", + "contractPolicy": { + "legacyPolicy": { + "permissions": [ + { + "edctype": "dataspaceconnector:permission", + "action": { + "type": "USE" + }, + "constraints": [ + { + "edctype": "AtomicConstraint", + "leftExpression": { + "edctype": "dataspaceconnector:literalexpression", + "value": "ALWAYS_TRUE" + }, + "rightExpression": { + "edctype": "dataspaceconnector:literalexpression", + "value": "true" + }, + "operator": "EQ" + } + ] + } + ], + "@type": { + "@policytype": "set" + } + } + } + } + ] } ] } diff --git a/fake-backend/json/brokerConnectorPage.json b/fake-backend/json/brokerConnectorPage.json index 51b7a5298..3f80a6dbd 100644 --- a/fake-backend/json/brokerConnectorPage.json +++ b/fake-backend/json/brokerConnectorPage.json @@ -15,7 +15,10 @@ "endpoint": "https://example.com/ids/data", "createdAt": "2023-05-31T14:06:21.536182+02:00", "onlineStatus": "OFFLINE", - "numContractOffers": 0 + "numContractOffers": 0, + "ConnectorStatusUpdateDate": "2023-05-31T14:06:21.536182+02:00", + "UpdateDetails": "Update Details", + "UpdateDate": "2023-05-31T14:06:21.536182+02:00" }, { "id": "https://other-connector.com", @@ -24,7 +27,19 @@ "lastSuccessfulRefreshAt": "2023-05-31T14:06:21.536182+02:00", "lastRefreshAttemptAt": "2023-05-31T14:06:21.536182+02:00", "onlineStatus": "ONLINE", - "numContractOffers": 2 + "numContractOffers": 2,"ConnectorStatusUpdateDate": "2023-05-31T14:06:21.536182+02:00", + "UpdateDetails": "Update Details", + "UpdateDate": "2023-05-31T14:06:21.536182+02:00" + }, + { + "id": "https://example2.com", + "endpoint": "https://example2.com/ids/data", + "createdAt": "2022-05-31T14:06:21.536182+02:00", + "onlineStatus": "DEAD", + "numContractOffers": 0, + "ConnectorStatusUpdateDate": "2023-05-31T14:06:21.536182+02:00", + "UpdateDetails": "Update Details", + "UpdateDate": "2023-05-31T14:06:21.536182+02:00" } ] } diff --git a/fake-backend/json/logs.json b/fake-backend/json/logs.json new file mode 100644 index 000000000..82202a573 --- /dev/null +++ b/fake-backend/json/logs.json @@ -0,0 +1,35 @@ +[ + { + "properties": { + "asset:prop:id": "urn:artifact:db-rail-network-2023-jan", + "asset:prop:name": "Rail Network DB 2023 January", + "asset:prop:version": "1.1", + "asset:prop:originator": "https://example-connector.rail-mgmt.bahn.de/api/v1/ids/data", + "asset:prop:originatorOrganization": "Deutsche Bahn AG", + "asset:prop:keywords": "db, bahn, rail, Rail-Designer", + "asset:prop:contenttype": "application/json", + "asset:prop:description": "Train Network Map released on 10.01.2023, valid until 31.02.2023. \nFile format is xyz as exported by Rail-Designer.", + "asset:prop:language": "https://w3id.org/idsa/code/EN", + "asset:prop:publisher": "https://my.cool-api.gg/about", + "asset:prop:standardLicense": "https://my.cool-api.gg/license", + "asset:prop:endpointDocumentation": "https://my.cool-api.gg/docs", + "http://w3id.org/mds#dataCategory": "Infrastructure and Logistics", + "http://w3id.org/mds#dataSubcategory": "General Information About Planning Of Routes", + "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" + } + }, + { + "properties": { + "asset:prop:id": "urn:artifact:bitcoin-data", + "asset:prop:name": "Bitcoin Data", + "asset:prop:contenttype": "application/json", + "asset:prop:description": "description", + "asset:prop:version": "1.0", + "asset:prop:type": "HttpData", + "asset:prop:originator": "https://sovity-001.stage-sovity.azure.sovity.io/control/api/v1/ids/data" + } + } +] diff --git a/src/app/component-library/catalog/asset-detail-dialog/asset-property-grid-group-builder.ts b/src/app/component-library/catalog/asset-detail-dialog/asset-property-grid-group-builder.ts index 2bec8b656..f9c3dd3cb 100644 --- a/src/app/component-library/catalog/asset-detail-dialog/asset-property-grid-group-builder.ts +++ b/src/app/component-library/catalog/asset-detail-dialog/asset-property-grid-group-builder.ts @@ -318,6 +318,8 @@ export class AssetPropertyGridGroupBuilder { icon: dataOffer.connectorOnlineStatus == 'ONLINE' ? 'check_circle' + : dataOffer.connectorOnlineStatus == 'OFFLINE' + ? 'pause_circle' : 'remove_circle', label: 'Status', labelTitle: `Last updated ${lastUpdate}`, diff --git a/src/app/component-library/property-grid/property-grid/property-grid.component.html b/src/app/component-library/property-grid/property-grid/property-grid.component.html index 6d0afed15..dcd114f65 100644 --- a/src/app/component-library/property-grid/property-grid/property-grid.component.html +++ b/src/app/component-library/property-grid/property-grid/property-grid.component.html @@ -10,16 +10,9 @@ {{ prop.icon }} + [ngClass]="getStatusClass(prop.icon)"> + {{ prop.icon }} +
sim_card
check_circle + *ngIf="dataOffer.connectorOnlineStatus === 'ONLINE'" + class="small-icon broker-online-status-online"> + check_circle + remove_circle + *ngIf="dataOffer.connectorOnlineStatus === 'OFFLINE'" + class="small-icon broker-online-status-offline"> + pause_circle + + + remove_circle +
diff --git a/src/app/routes/broker-ui/connector-page/connector-cards/connector-cards.component.html b/src/app/routes/broker-ui/connector-page/connector-cards/connector-cards.component.html index aeaec9773..d2d350f2e 100644 --- a/src/app/routes/broker-ui/connector-page/connector-cards/connector-cards.component.html +++ b/src/app/routes/broker-ui/connector-page/connector-cards/connector-cards.component.html @@ -5,16 +5,19 @@
check_circle + class="small-icon broker-online-status-online"> + check_circle + remove_circle + class="small-icon broker-online-status-offline"> + pause_circle + + + remove_circle +
diff --git a/src/styles.scss b/src/styles.scss index 6c16b8362..797fd04a8 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -40,6 +40,7 @@ body { .small-icon { font-size: 15px; z-index: 0; + margin-top: 7px; } .title-wrapper { @@ -48,6 +49,17 @@ body { align-items: stretch; width: 100%; } +.broker-online-status-online { + color: green; +} + +.broker-online-status-offline { + color: #cb8e1a; +} + +.broker-online-status-dead { + color: red; +} .check-green { color: green; From 0d649348ae332e4636bd02f63d30bf31a074d6a1 Mon Sep 17 00:00:00 2001 From: SaadBendou Date: Mon, 10 Jul 2023 15:21:23 +0200 Subject: [PATCH 4/7] Added new Component for icons --- .../catalog/catalog.module.ts | 3 + .../status-icon/status-icon.component.ts | 67 +++++++++++++++++++ .../data-offer-cards.component.html | 26 ++----- .../connector-cards.component.html | 26 ++----- src/styles.scss | 27 -------- 5 files changed, 82 insertions(+), 67 deletions(-) create mode 100644 src/app/component-library/catalog/status-icon/status-icon.component.ts diff --git a/src/app/component-library/catalog/catalog.module.ts b/src/app/component-library/catalog/catalog.module.ts index c0d0b3db0..1242b0b6b 100644 --- a/src/app/component-library/catalog/catalog.module.ts +++ b/src/app/component-library/catalog/catalog.module.ts @@ -16,6 +16,7 @@ import {AssetDetailDialogComponent} from './asset-detail-dialog/asset-detail-dia import {AssetPropertyGridGroupBuilder} from './asset-detail-dialog/asset-property-grid-group-builder'; import {ContractOfferCardsComponent} from './contract-offer-cards/contract-offer-cards.component'; import {ContractOfferIconComponent} from './contract-offer-icon/contract-offer-icon.component'; +import {IconWithOnlineStatusComponent} from './status-icon/status-icon.component'; import {TransferHistoryMiniListComponent} from './transfer-history-mini-list/transfer-history-mini-list.component'; @NgModule({ @@ -43,12 +44,14 @@ import {TransferHistoryMiniListComponent} from './transfer-history-mini-list/tra ContractOfferCardsComponent, ContractOfferIconComponent, TransferHistoryMiniListComponent, + IconWithOnlineStatusComponent, ], exports: [ AssetDetailDialogComponent, ContractOfferCardsComponent, ContractOfferIconComponent, TransferHistoryMiniListComponent, + IconWithOnlineStatusComponent, ], providers: [AssetPropertyGridGroupBuilder, AssetDetailDialogDataService], }) diff --git a/src/app/component-library/catalog/status-icon/status-icon.component.ts b/src/app/component-library/catalog/status-icon/status-icon.component.ts new file mode 100644 index 000000000..422ee8ab6 --- /dev/null +++ b/src/app/component-library/catalog/status-icon/status-icon.component.ts @@ -0,0 +1,67 @@ +import {Component, Input} from '@angular/core'; +import { + CatalogDataOfferConnectorOnlineStatusEnum, + ConnectorDetailPageResultOnlineStatusEnum, + ConnectorListEntryOnlineStatusEnum, + DataOfferDetailPageResultConnectorOnlineStatusEnum, +} from '@sovity.de/broker-server-client'; + +@Component({ + selector: 'status-icon', + template: ` + {{ mainIcon }} + +
+ {{ getSmallIcon(onlineStatus) }} +
+ + `, +}) +export class IconWithOnlineStatusComponent { + @Input() + mainIcon!: string; + + @Input() + smallIcon!: string; + + @Input() + onlineStatus!: + | CatalogDataOfferConnectorOnlineStatusEnum + | ConnectorListEntryOnlineStatusEnum + | DataOfferDetailPageResultConnectorOnlineStatusEnum + | ConnectorDetailPageResultOnlineStatusEnum; + + getStatusClass(status: any) { + switch (status) { + case 'ONLINE': + return 'broker-online-status-online'; + case 'OFFLINE': + return 'broker-online-status-offline'; + case 'DEAD': + return 'broker-online-status-dead'; + default: + return ''; + } + } + getSmallIcon(status: any) { + switch (status) { + case 'ONLINE': + return 'check_circle'; + case 'OFFLINE': + return 'pause_circle'; + case 'DEAD': + return 'remove_circle'; + default: + return ''; + } + } +} diff --git a/src/app/routes/broker-ui/catalog-page/data-offer-cards/data-offer-cards.component.html b/src/app/routes/broker-ui/catalog-page/data-offer-cards/data-offer-cards.component.html index 305c1f451..9c672c0ad 100644 --- a/src/app/routes/broker-ui/catalog-page/data-offer-cards/data-offer-cards.component.html +++ b/src/app/routes/broker-ui/catalog-page/data-offer-cards/data-offer-cards.component.html @@ -1,26 +1,12 @@ -
- sim_card -
- - check_circle - - - pause_circle - - - remove_circle - -
-
+ + +
-
- link -
- - check_circle - - - pause_circle - - - remove_circle - -
-
+ + +
{{ connector.endpoint }} diff --git a/src/styles.scss b/src/styles.scss index a695cad16..c319213ac 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -16,33 +16,6 @@ body { width: 100%; } -.icon-wrapper { - display: flex; - align-items: flex-end; - justify-content: flex-end; - width: 40px; - height: 40px; - margin-right: 20px; -} - -.main-icon { - position: absolute; - font-size: 40px; - margin-right: 8px; -} - -.small-icon-wrapper { - position: absolute; - width: 15px; - height: 15px; -} - -.small-icon { - font-size: 15px; - z-index: 0; - margin-top: 7px; -} - .title-wrapper { display: flex; flex-direction: column; From 92a5dffd067a974cc4552f2460eff4b9c7e54633 Mon Sep 17 00:00:00 2001 From: SaadBendou Date: Mon, 10 Jul 2023 15:21:23 +0200 Subject: [PATCH 5/7] encapsulated style class in icon component --- .../catalog/catalog.module.ts | 3 + .../status-icon/status-icon.component.ts | 69 +++++++++++++++++++ .../data-offer-cards.component.html | 25 ++----- .../connector-cards.component.html | 23 +------ src/styles.scss | 27 -------- 5 files changed, 80 insertions(+), 67 deletions(-) create mode 100644 src/app/component-library/catalog/status-icon/status-icon.component.ts diff --git a/src/app/component-library/catalog/catalog.module.ts b/src/app/component-library/catalog/catalog.module.ts index c0d0b3db0..1242b0b6b 100644 --- a/src/app/component-library/catalog/catalog.module.ts +++ b/src/app/component-library/catalog/catalog.module.ts @@ -16,6 +16,7 @@ import {AssetDetailDialogComponent} from './asset-detail-dialog/asset-detail-dia import {AssetPropertyGridGroupBuilder} from './asset-detail-dialog/asset-property-grid-group-builder'; import {ContractOfferCardsComponent} from './contract-offer-cards/contract-offer-cards.component'; import {ContractOfferIconComponent} from './contract-offer-icon/contract-offer-icon.component'; +import {IconWithOnlineStatusComponent} from './status-icon/status-icon.component'; import {TransferHistoryMiniListComponent} from './transfer-history-mini-list/transfer-history-mini-list.component'; @NgModule({ @@ -43,12 +44,14 @@ import {TransferHistoryMiniListComponent} from './transfer-history-mini-list/tra ContractOfferCardsComponent, ContractOfferIconComponent, TransferHistoryMiniListComponent, + IconWithOnlineStatusComponent, ], exports: [ AssetDetailDialogComponent, ContractOfferCardsComponent, ContractOfferIconComponent, TransferHistoryMiniListComponent, + IconWithOnlineStatusComponent, ], providers: [AssetPropertyGridGroupBuilder, AssetDetailDialogDataService], }) diff --git a/src/app/component-library/catalog/status-icon/status-icon.component.ts b/src/app/component-library/catalog/status-icon/status-icon.component.ts new file mode 100644 index 000000000..0015b676e --- /dev/null +++ b/src/app/component-library/catalog/status-icon/status-icon.component.ts @@ -0,0 +1,69 @@ +import {Component, Input} from '@angular/core'; +import { + CatalogDataOfferConnectorOnlineStatusEnum, + ConnectorDetailPageResultOnlineStatusEnum, + ConnectorListEntryOnlineStatusEnum, + DataOfferDetailPageResultConnectorOnlineStatusEnum, +} from '@sovity.de/broker-server-client'; + +@Component({ + selector: 'status-icon', + template: ` +
+ {{ mainIcon }} + +
+ {{ getSmallIcon(onlineStatus) }} +
+
+ + `, +}) +export class IconWithOnlineStatusComponent { + @Input() + mainIcon!: string; + + @Input() + smallIcon!: string; + + @Input() + onlineStatus!: + | CatalogDataOfferConnectorOnlineStatusEnum + | ConnectorListEntryOnlineStatusEnum + | DataOfferDetailPageResultConnectorOnlineStatusEnum + | ConnectorDetailPageResultOnlineStatusEnum; + + getStatusClass(status: any) { + switch (status) { + case 'ONLINE': + return 'broker-online-status-online'; + case 'OFFLINE': + return 'broker-online-status-offline'; + case 'DEAD': + return 'broker-online-status-dead'; + default: + return ''; + } + } + getSmallIcon(status: any) { + switch (status) { + case 'ONLINE': + return 'check_circle'; + case 'OFFLINE': + return 'pause_circle'; + case 'DEAD': + return 'remove_circle'; + default: + return ''; + } + } +} diff --git a/src/app/routes/broker-ui/catalog-page/data-offer-cards/data-offer-cards.component.html b/src/app/routes/broker-ui/catalog-page/data-offer-cards/data-offer-cards.component.html index 305c1f451..a998a8cda 100644 --- a/src/app/routes/broker-ui/catalog-page/data-offer-cards/data-offer-cards.component.html +++ b/src/app/routes/broker-ui/catalog-page/data-offer-cards/data-offer-cards.component.html @@ -1,26 +1,11 @@ -
- sim_card -
- - check_circle - - - pause_circle - - - remove_circle - -
-
+ + +
-
- link -
- - check_circle - - - pause_circle - - - remove_circle - -
-
+ + +
{{ connector.endpoint }} diff --git a/src/styles.scss b/src/styles.scss index a695cad16..c319213ac 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -16,33 +16,6 @@ body { width: 100%; } -.icon-wrapper { - display: flex; - align-items: flex-end; - justify-content: flex-end; - width: 40px; - height: 40px; - margin-right: 20px; -} - -.main-icon { - position: absolute; - font-size: 40px; - margin-right: 8px; -} - -.small-icon-wrapper { - position: absolute; - width: 15px; - height: 15px; -} - -.small-icon { - font-size: 15px; - z-index: 0; - margin-top: 7px; -} - .title-wrapper { display: flex; flex-direction: column; From fbd35b37213bcc3c48f3cf1383b6dd8c467f4b41 Mon Sep 17 00:00:00 2001 From: Richard Treier Date: Wed, 12 Jul 2023 10:13:36 +0200 Subject: [PATCH 6/7] fix: clean up layouting and styles --- .../asset-detail-dialog.component.html | 8 +++-- .../catalog/catalog.module.ts | 2 +- .../icon-with-online-status.component.ts} | 33 +++++++------------ .../data-offer-cards.component.html | 33 +++++++++---------- .../connector-cards.component.html | 17 +++++----- src/styles.scss | 14 +------- 6 files changed, 43 insertions(+), 64 deletions(-) rename src/app/component-library/catalog/{status-icon/status-icon.component.ts => icon-with-online-status/icon-with-online-status.component.ts} (65%) diff --git a/src/app/component-library/catalog/asset-detail-dialog/asset-detail-dialog.component.html b/src/app/component-library/catalog/asset-detail-dialog/asset-detail-dialog.component.html index 814dca84c..22dd75f8f 100644 --- a/src/app/component-library/catalog/asset-detail-dialog/asset-detail-dialog.component.html +++ b/src/app/component-library/catalog/asset-detail-dialog/asset-detail-dialog.component.html @@ -2,9 +2,11 @@ upload - - sim_card - + + {{ data.contractAgreement!!.direction === 'PROVIDING' ? 'upload' : 'download' diff --git a/src/app/component-library/catalog/catalog.module.ts b/src/app/component-library/catalog/catalog.module.ts index 1242b0b6b..987959124 100644 --- a/src/app/component-library/catalog/catalog.module.ts +++ b/src/app/component-library/catalog/catalog.module.ts @@ -16,7 +16,7 @@ import {AssetDetailDialogComponent} from './asset-detail-dialog/asset-detail-dia import {AssetPropertyGridGroupBuilder} from './asset-detail-dialog/asset-property-grid-group-builder'; import {ContractOfferCardsComponent} from './contract-offer-cards/contract-offer-cards.component'; import {ContractOfferIconComponent} from './contract-offer-icon/contract-offer-icon.component'; -import {IconWithOnlineStatusComponent} from './status-icon/status-icon.component'; +import {IconWithOnlineStatusComponent} from './icon-with-online-status/icon-with-online-status.component'; import {TransferHistoryMiniListComponent} from './transfer-history-mini-list/transfer-history-mini-list.component'; @NgModule({ diff --git a/src/app/component-library/catalog/status-icon/status-icon.component.ts b/src/app/component-library/catalog/icon-with-online-status/icon-with-online-status.component.ts similarity index 65% rename from src/app/component-library/catalog/status-icon/status-icon.component.ts rename to src/app/component-library/catalog/icon-with-online-status/icon-with-online-status.component.ts index 0015b676e..1fcab9c0f 100644 --- a/src/app/component-library/catalog/status-icon/status-icon.component.ts +++ b/src/app/component-library/catalog/icon-with-online-status/icon-with-online-status.component.ts @@ -1,4 +1,4 @@ -import {Component, Input} from '@angular/core'; +import {Component, HostBinding, Input} from '@angular/core'; import { CatalogDataOfferConnectorOnlineStatusEnum, ConnectorDetailPageResultOnlineStatusEnum, @@ -7,33 +7,24 @@ import { } from '@sovity.de/broker-server-client'; @Component({ - selector: 'status-icon', + selector: 'icon-with-online-status', template: ` -
- {{ mainIcon }} + {{ getSmallIcon(onlineStatus) }} -
- {{ getSmallIcon(onlineStatus) }} -
-
- + {{ mainIcon }} `, }) export class IconWithOnlineStatusComponent { - @Input() - mainIcon!: string; + @HostBinding('class.mat-icon-[40px]') + cls = true; @Input() - smallIcon!: string; + mainIcon!: string; @Input() onlineStatus!: diff --git a/src/app/routes/broker-ui/catalog-page/data-offer-cards/data-offer-cards.component.html b/src/app/routes/broker-ui/catalog-page/data-offer-cards/data-offer-cards.component.html index a998a8cda..1a6a25365 100644 --- a/src/app/routes/broker-ui/catalog-page/data-offer-cards/data-offer-cards.component.html +++ b/src/app/routes/broker-ui/catalog-page/data-offer-cards/data-offer-cards.component.html @@ -1,24 +1,21 @@ - - + - - -
- - - {{ asset.name }} - - - {{ - asset.originatorOrganization - }} -
+ + + + {{ asset.name }} + + + {{ asset.originatorOrganization }} diff --git a/src/app/routes/broker-ui/connector-page/connector-cards/connector-cards.component.html b/src/app/routes/broker-ui/connector-page/connector-cards/connector-cards.component.html index 87cbd6524..239eadf66 100644 --- a/src/app/routes/broker-ui/connector-page/connector-cards/connector-cards.component.html +++ b/src/app/routes/broker-ui/connector-page/connector-cards/connector-cards.component.html @@ -1,14 +1,15 @@ - - + + -
- - {{ connector.endpoint }} - - EDC Connector -
+ + {{ connector.endpoint }} + + EDC Connector
diff --git a/src/styles.scss b/src/styles.scss index c319213ac..b8c120796 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -9,19 +9,7 @@ body { body { margin: 0; } -.header-content { - display: flex; - align-items: center; - justify-content: space-between; - width: 100%; -} -.title-wrapper { - display: flex; - flex-direction: column; - align-items: stretch; - width: 100%; -} .broker-online-status-online { color: green; } @@ -31,7 +19,7 @@ body { } .broker-online-status-dead { - color: red; + color: var(--warn-color); } .snackbar-info-style { From e90a65530d52fde330540edf5d1f369b4358538d Mon Sep 17 00:00:00 2001 From: Richard Treier Date: Wed, 12 Jul 2023 10:29:44 +0200 Subject: [PATCH 7/7] refactor: extract common code --- package-lock.json | 8 ++-- package.json | 2 +- .../asset-property-grid-group-builder.ts | 19 ++++---- .../icon-with-online-status.component.ts | 46 +++++-------------- .../online-status-utils.ts | 38 +++++++++++++++ .../property-grid/property-grid-field.ts | 9 ++++ .../property-grid.component.html | 2 +- .../property-grid/property-grid.component.ts | 13 ------ .../data-offer-cards.component.html | 1 - .../connector-cards.component.html | 1 - 10 files changed, 76 insertions(+), 63 deletions(-) create mode 100644 src/app/component-library/catalog/icon-with-online-status/online-status-utils.ts diff --git a/package-lock.json b/package-lock.json index bd4e71802..84ee3504a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -22,7 +22,7 @@ "@angular/router": "^14.3.0", "@ng-apimock/core": "^3.6.0", "@ngxs/store": "^3.8.1", - "@sovity.de/broker-server-client": "0.20230703.152001-main-d1ec5276", + "@sovity.de/broker-server-client": "0.20230712.71619-main-a4860cff", "@sovity.de/edc-client": "0.20230706.64046-main-d2fd35a8", "clean-deep": "^3.4.0", "date-fns": "^2.29.3", @@ -3438,9 +3438,9 @@ "dev": true }, "node_modules/@sovity.de/broker-server-client": { - "version": "0.20230703.152001-main-d1ec5276", - "resolved": "https://registry.npmjs.org/@sovity.de/broker-server-client/-/broker-server-client-0.20230703.152001-main-d1ec5276.tgz", - "integrity": "sha512-3azcUFMg0tLHrCqPG/vw8vIYqShLrJnAQDhtH0VyHvYyyt+waokdS6Pf0nGvL0RzWEBQZY81pFt2TvE56AS5ug==" + "version": "0.20230712.71619-main-a4860cff", + "resolved": "https://registry.npmjs.org/@sovity.de/broker-server-client/-/broker-server-client-0.20230712.71619-main-a4860cff.tgz", + "integrity": "sha512-305vHJj38Ma9x9YADM3SJh3sdqePeLcrUB1hHlYsuPdx7wYe9vwgb503KYStJ+5iN/ojP2xu8k6Unt+y+Bu5iQ==" }, "node_modules/@sovity.de/edc-client": { "version": "0.20230706.64046-main-d2fd35a8", diff --git a/package.json b/package.json index 90b40e4e9..976c960a9 100644 --- a/package.json +++ b/package.json @@ -27,7 +27,7 @@ "@angular/router": "^14.3.0", "@ng-apimock/core": "^3.6.0", "@ngxs/store": "^3.8.1", - "@sovity.de/broker-server-client": "0.20230703.152001-main-d1ec5276", + "@sovity.de/broker-server-client": "0.20230712.71619-main-a4860cff", "@sovity.de/edc-client": "0.20230706.64046-main-d2fd35a8", "clean-deep": "^3.4.0", "date-fns": "^2.29.3", diff --git a/src/app/component-library/catalog/asset-detail-dialog/asset-property-grid-group-builder.ts b/src/app/component-library/catalog/asset-detail-dialog/asset-property-grid-group-builder.ts index b131aad7f..5c45068dd 100644 --- a/src/app/component-library/catalog/asset-detail-dialog/asset-property-grid-group-builder.ts +++ b/src/app/component-library/catalog/asset-detail-dialog/asset-property-grid-group-builder.ts @@ -13,6 +13,10 @@ import {PropertyGridGroup} from '../../property-grid/property-grid-group/propert import {PropertyGridField} from '../../property-grid/property-grid/property-grid-field'; import {PropertyGridFieldService} from '../../property-grid/property-grid/property-grid-field.service'; import {formatDateAgo} from '../../ui-elements/ago/formatDateAgo'; +import { + getOnlineStatusColor, + getOnlineStatusIcon, +} from '../icon-with-online-status/online-status-utils'; @Injectable() export class AssetPropertyGridGroupBuilder { @@ -324,20 +328,19 @@ export class AssetPropertyGridGroupBuilder { copyButton: true, }, { - icon: - dataOffer.connectorOnlineStatus == 'ONLINE' - ? 'check_circle' - : dataOffer.connectorOnlineStatus == 'OFFLINE' - ? 'pause_circle' - : 'remove_circle', + icon: getOnlineStatusIcon(dataOffer.connectorOnlineStatus), label: 'Status', labelTitle: `Last updated ${lastUpdate}`, text: dataOffer.connectorOnlineStatus == 'ONLINE' ? `Online` : `Offline since ${lastUpdate}`, - additionalClasses: - dataOffer.connectorOnlineStatus == 'ONLINE' ? '' : 'text-warn', + additionalClasses: getOnlineStatusColor( + dataOffer.connectorOnlineStatus, + ), + additionalIconClasses: getOnlineStatusColor( + dataOffer.connectorOnlineStatus, + ), }, ], }; diff --git a/src/app/component-library/catalog/icon-with-online-status/icon-with-online-status.component.ts b/src/app/component-library/catalog/icon-with-online-status/icon-with-online-status.component.ts index 1fcab9c0f..83941eb5c 100644 --- a/src/app/component-library/catalog/icon-with-online-status/icon-with-online-status.component.ts +++ b/src/app/component-library/catalog/icon-with-online-status/icon-with-online-status.component.ts @@ -1,10 +1,9 @@ import {Component, HostBinding, Input} from '@angular/core'; import { - CatalogDataOfferConnectorOnlineStatusEnum, - ConnectorDetailPageResultOnlineStatusEnum, - ConnectorListEntryOnlineStatusEnum, - DataOfferDetailPageResultConnectorOnlineStatusEnum, -} from '@sovity.de/broker-server-client'; + ConnectorOnlineStatus, + getOnlineStatusColor, + getOnlineStatusIcon, +} from './online-status-utils'; @Component({ selector: 'icon-with-online-status', @@ -12,8 +11,8 @@ import { {{ getSmallIcon(onlineStatus) }}{{ onlineStatusIcon }} {{ mainIcon }} @@ -27,34 +26,13 @@ export class IconWithOnlineStatusComponent { mainIcon!: string; @Input() - onlineStatus!: - | CatalogDataOfferConnectorOnlineStatusEnum - | ConnectorListEntryOnlineStatusEnum - | DataOfferDetailPageResultConnectorOnlineStatusEnum - | ConnectorDetailPageResultOnlineStatusEnum; + onlineStatus!: ConnectorOnlineStatus; - getStatusClass(status: any) { - switch (status) { - case 'ONLINE': - return 'broker-online-status-online'; - case 'OFFLINE': - return 'broker-online-status-offline'; - case 'DEAD': - return 'broker-online-status-dead'; - default: - return ''; - } + get onlineStatusColor(): string { + return getOnlineStatusColor(this.onlineStatus); } - getSmallIcon(status: any) { - switch (status) { - case 'ONLINE': - return 'check_circle'; - case 'OFFLINE': - return 'pause_circle'; - case 'DEAD': - return 'remove_circle'; - default: - return ''; - } + + get onlineStatusIcon(): string { + return getOnlineStatusIcon(this.onlineStatus); } } diff --git a/src/app/component-library/catalog/icon-with-online-status/online-status-utils.ts b/src/app/component-library/catalog/icon-with-online-status/online-status-utils.ts new file mode 100644 index 000000000..ca4691f55 --- /dev/null +++ b/src/app/component-library/catalog/icon-with-online-status/online-status-utils.ts @@ -0,0 +1,38 @@ +import { + CatalogDataOfferConnectorOnlineStatusEnum, + ConnectorDetailPageResultOnlineStatusEnum, + ConnectorListEntryOnlineStatusEnum, + DataOfferDetailPageResultConnectorOnlineStatusEnum, +} from '@sovity.de/broker-server-client'; + +export type ConnectorOnlineStatus = + | CatalogDataOfferConnectorOnlineStatusEnum + | ConnectorListEntryOnlineStatusEnum + | DataOfferDetailPageResultConnectorOnlineStatusEnum + | ConnectorDetailPageResultOnlineStatusEnum; + +export function getOnlineStatusColor(status: ConnectorOnlineStatus): string { + switch (status) { + case 'ONLINE': + return 'broker-online-status-online'; + case 'OFFLINE': + return 'broker-online-status-offline'; + case 'DEAD': + return 'broker-online-status-dead'; + default: + return ''; + } +} + +export function getOnlineStatusIcon(status: ConnectorOnlineStatus): string { + switch (status) { + case 'ONLINE': + return 'check_circle'; + case 'OFFLINE': + return 'pause_circle'; + case 'DEAD': + return 'remove_circle'; + default: + return ''; + } +} diff --git a/src/app/component-library/property-grid/property-grid/property-grid-field.ts b/src/app/component-library/property-grid/property-grid/property-grid-field.ts index 7e73eb5e0..49eeb5721 100644 --- a/src/app/component-library/property-grid/property-grid/property-grid-field.ts +++ b/src/app/component-library/property-grid/property-grid/property-grid-field.ts @@ -18,8 +18,17 @@ export interface PropertyGridField { url?: string; onclick?: () => void; + + /** + * Additional classes for the value text. + */ additionalClasses?: string; + /** + * Additional classes for the icon. + */ + additionalIconClasses?: string; + copyButton?: boolean; tooltip?: string | null; textIconAfter?: string | null; diff --git a/src/app/component-library/property-grid/property-grid/property-grid.component.html b/src/app/component-library/property-grid/property-grid/property-grid.component.html index 59d146c20..eab8edd6d 100644 --- a/src/app/component-library/property-grid/property-grid/property-grid.component.html +++ b/src/app/component-library/property-grid/property-grid/property-grid.component.html @@ -11,7 +11,7 @@ style="flex-shrink: 0; margin-top: 6px" [matTooltip]="prop.tooltip!" [attr.title]="prop.labelTitle" - [ngClass]="getStatusClass(prop.icon)"> + [ngClass]="prop.additionalIconClasses"> {{ prop.icon }}
diff --git a/src/app/component-library/property-grid/property-grid/property-grid.component.ts b/src/app/component-library/property-grid/property-grid/property-grid.component.ts index dd3976bee..8adecaf87 100644 --- a/src/app/component-library/property-grid/property-grid/property-grid.component.ts +++ b/src/app/component-library/property-grid/property-grid/property-grid.component.ts @@ -19,17 +19,4 @@ export class PropertyGridComponent { cls = true; trackByIndex: TrackByFunction = (index: number) => index; - - getStatusClass(icon: string) { - switch (icon) { - case 'check_circle': - return 'broker-online-status-online'; - case 'pause_circle': - return 'broker-online-status-offline'; - case 'remove_circle': - return 'broker-online-status-dead'; - default: - return ''; - } - } } diff --git a/src/app/routes/broker-ui/catalog-page/data-offer-cards/data-offer-cards.component.html b/src/app/routes/broker-ui/catalog-page/data-offer-cards/data-offer-cards.component.html index 1a6a25365..512664537 100644 --- a/src/app/routes/broker-ui/catalog-page/data-offer-cards/data-offer-cards.component.html +++ b/src/app/routes/broker-ui/catalog-page/data-offer-cards/data-offer-cards.component.html @@ -9,7 +9,6 @@ {{ asset.name }} diff --git a/src/app/routes/broker-ui/connector-page/connector-cards/connector-cards.component.html b/src/app/routes/broker-ui/connector-page/connector-cards/connector-cards.component.html index 239eadf66..0a873f813 100644 --- a/src/app/routes/broker-ui/connector-page/connector-cards/connector-cards.component.html +++ b/src/app/routes/broker-ui/connector-page/connector-cards/connector-cards.component.html @@ -5,7 +5,6 @@ mainIcon="link" [onlineStatus]="connector.onlineStatus"> - {{ connector.endpoint }}