Skip to content

Commit

Permalink
Visualize Connector Status (#346)
Browse files Browse the repository at this point in the history
Co-authored-by: Richard Treier <richard.treier@sovity.de>
  • Loading branch information
SaadEGI and richardtreier authored Jul 12, 2023
1 parent d8ed8ec commit e214fc7
Show file tree
Hide file tree
Showing 15 changed files with 303 additions and 16 deletions.
126 changes: 126 additions & 0 deletions fake-backend/json/brokerCatalogPage.json
Original file line number Diff line number Diff line change
Expand Up @@ -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"
}
}
}
}
]
}
]
}
7 changes: 7 additions & 0 deletions fake-backend/json/brokerConnectorPage.json
Original file line number Diff line number Diff line change
Expand Up @@ -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
}
]
}
35 changes: 35 additions & 0 deletions fake-backend/json/logs.json
Original file line number Diff line number Diff line change
@@ -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"
}
}
]
8 changes: 4 additions & 4 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,11 @@
<mat-icon *ngIf="data.type === 'asset-details'" class="mat-icon-[40px]">
upload
</mat-icon>
<mat-icon *ngIf="data.type === 'broker-data-offer'" class="mat-icon-[40px]">
sim_card
</mat-icon>
<icon-with-online-status
*ngIf="data.type === 'broker-data-offer'"
mainIcon="sim_card"
[onlineStatus]="data.brokerDataOffer!!.connectorOnlineStatus">
</icon-with-online-status>
<mat-icon *ngIf="data.type === 'contract-agreement'" class="mat-icon-[40px]">
{{
data.contractAgreement!!.direction === 'PROVIDING' ? 'upload' : 'download'
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down Expand Up @@ -324,15 +328,19 @@ export class AssetPropertyGridGroupBuilder {
copyButton: true,
},
{
icon: 'link',
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,
),
},
],
};
Expand Down
3 changes: 3 additions & 0 deletions src/app/component-library/catalog/catalog.module.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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 './icon-with-online-status/icon-with-online-status.component';
import {TransferHistoryMiniListComponent} from './transfer-history-mini-list/transfer-history-mini-list.component';

@NgModule({
Expand Down Expand Up @@ -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],
})
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
import {Component, HostBinding, Input} from '@angular/core';
import {
ConnectorOnlineStatus,
getOnlineStatusColor,
getOnlineStatusIcon,
} from './online-status-utils';

@Component({
selector: 'icon-with-online-status',
template: `
<mat-icon
*ngIf="onlineStatus"
class="absolute mat-icon-[16px] mt-[26px] ml-[26px]"
[ngClass]="onlineStatusColor"
>{{ onlineStatusIcon }}</mat-icon
>
<mat-icon class="mat-icon-[40px]">{{ mainIcon }}</mat-icon>
`,
})
export class IconWithOnlineStatusComponent {
@HostBinding('class.mat-icon-[40px]')
cls = true;

@Input()
mainIcon!: string;

@Input()
onlineStatus!: ConnectorOnlineStatus;

get onlineStatusColor(): string {
return getOnlineStatusColor(this.onlineStatus);
}

get onlineStatusIcon(): string {
return getOnlineStatusIcon(this.onlineStatus);
}
}
Original file line number Diff line number Diff line change
@@ -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 '';
}
}
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -11,8 +11,9 @@
style="flex-shrink: 0; margin-top: 6px"
[matTooltip]="prop.tooltip!"
[attr.title]="prop.labelTitle"
>{{ prop.icon }}</mat-icon
>
[ngClass]="prop.additionalIconClasses">
{{ prop.icon }}
</mat-icon>
<div class="flex flex-col">
<!-- Property Label -->
<div
Expand Down
Loading

0 comments on commit e214fc7

Please sign in to comment.