This is an automated email from the ASF dual-hosted git repository. riemer pushed a commit to branch 4041-show-opc-ua-certificate-info-in-asset-view in repository https://gitbox.apache.org/repos/asf/streampipes.git
commit f1e74769ec44f95ab4dc1eeaee0718375965c228 Author: Dominik Riemer <[email protected]> AuthorDate: Tue Dec 9 22:11:26 2025 +0100 Show dns name in certificate table --- ui/src/app/configuration/configuration.module.ts | 2 + ...xtensions-service-details-dialog.component.html | 8 ++-- ...xtensions-service-details-dialog.component.scss | 11 ++---- .../extensions-service-details-dialog.component.ts | 6 +++ .../certificate-configuration.component.html | 7 +++- .../certificate-configuration.component.scss} | 20 +--------- .../certificate-configuration.component.ts | 1 + .../certificate-label.component.html | 28 ++++++++++++++ .../certificate-label.component.ts} | 25 ++++++------ ui/src/scss/sp/_spacing.scss | 44 +++++++++++++++++++++- 10 files changed, 106 insertions(+), 46 deletions(-) diff --git a/ui/src/app/configuration/configuration.module.ts b/ui/src/app/configuration/configuration.module.ts index 71a8f65e77..31069ba465 100644 --- a/ui/src/app/configuration/configuration.module.ts +++ b/ui/src/app/configuration/configuration.module.ts @@ -103,6 +103,7 @@ import { AlternateIdConfigurationComponent } from './security-configuration/alte import { UserAcknowledgmentComponent } from './general-configuration/user-acknowledgement/user-acknowledgment.component'; import { QuillEditorComponent } from 'ngx-quill'; import { MatStepperModule } from '@angular/material/stepper'; +import { CertificateLabelComponent } from './extensions-service-management/certificate-configuration/certificate-label/certificate-label.component'; @NgModule({ imports: [ @@ -257,6 +258,7 @@ import { MatStepperModule } from '@angular/material/stepper'; CertificateDetailsDialogComponent, AlternateIdConfigurationComponent, UserAcknowledgmentComponent, + CertificateLabelComponent, ], providers: [ OrderByPipe, diff --git a/ui/src/app/configuration/dialog/extensions-service-details/extensions-service-details-dialog.component.html b/ui/src/app/configuration/dialog/extensions-service-details/extensions-service-details-dialog.component.html index e079412736..8122b4f195 100644 --- a/ui/src/app/configuration/dialog/extensions-service-details/extensions-service-details-dialog.component.html +++ b/ui/src/app/configuration/dialog/extensions-service-details/extensions-service-details-dialog.component.html @@ -39,14 +39,14 @@ <div fxFlex="20">{{ 'Tags' | translate }}</div> <div fxFlex="80"> <div> - @for (tag of serviceReg.tags; track tag) { + @for (tag of sortedTags; track tag) { <div class="service-tag text-sm"> <span class="service-tag-prefix">{{ tag.prefix.toLowerCase() }}</span> - <span class="service-tag-value">{{ - tag.value - }}</span> + <span class="service-tag-value" + > {{ tag.value }}</span + > </div> } </div> diff --git a/ui/src/app/configuration/dialog/extensions-service-details/extensions-service-details-dialog.component.scss b/ui/src/app/configuration/dialog/extensions-service-details/extensions-service-details-dialog.component.scss index 0fed18c7fa..425e13e1b2 100644 --- a/ui/src/app/configuration/dialog/extensions-service-details/extensions-service-details-dialog.component.scss +++ b/ui/src/app/configuration/dialog/extensions-service-details/extensions-service-details-dialog.component.scss @@ -17,21 +17,16 @@ */ .service-tag { - border-radius: 5px; + border-radius: 20px; margin-right: 10px; margin-top: 5px; margin-bottom: 5px; border: 1px solid var(--color-bg-3); + background: var(--color-bg-3); display: inline-block; - padding-top: 5px; - padding-bottom: 5px; + padding: 5px 10px; } .service-tag-prefix { - padding: 5px; -} - -.service-tag-value { - padding: 5px; font-weight: bold; } diff --git a/ui/src/app/configuration/dialog/extensions-service-details/extensions-service-details-dialog.component.ts b/ui/src/app/configuration/dialog/extensions-service-details/extensions-service-details-dialog.component.ts index d225e3cd1f..b450b1124c 100644 --- a/ui/src/app/configuration/dialog/extensions-service-details/extensions-service-details-dialog.component.ts +++ b/ui/src/app/configuration/dialog/extensions-service-details/extensions-service-details-dialog.component.ts @@ -37,4 +37,10 @@ export class SpExtensionsServiceDetailsDialogComponent { close() { this.dialogRef.close(); } + + get sortedTags() { + return [...this.serviceReg.tags].sort((a, b) => + a.prefix.localeCompare(b.prefix), + ); + } } diff --git a/ui/src/app/configuration/extensions-service-management/certificate-configuration/certificate-configuration.component.html b/ui/src/app/configuration/extensions-service-management/certificate-configuration/certificate-configuration.component.html index d7bd8c7823..651a1e2d6f 100644 --- a/ui/src/app/configuration/extensions-service-management/certificate-configuration/certificate-configuration.component.html +++ b/ui/src/app/configuration/extensions-service-management/certificate-configuration/certificate-configuration.component.html @@ -40,7 +40,10 @@ *matCellDef="let certificate" data-cy="user-accounts-table-row" > - <b>{{ certificate.issuerDn }}</b> + <sp-certificate-label + style="display: block" + [certificate]="certificate" + ></sp-certificate-label> </td> </ng-container> <ng-container matColumnDef="expires"> @@ -60,7 +63,7 @@ *matCellDef="let certificate" data-cy="user-accounts-table-row" > - <b>{{ certificate.notAfter }}</b> + <span class="text-sm">{{ certificate.notAfter }}</span> </td> </ng-container> <ng-container matColumnDef="actions"> diff --git a/ui/src/app/configuration/dialog/extensions-service-details/extensions-service-details-dialog.component.scss b/ui/src/app/configuration/extensions-service-management/certificate-configuration/certificate-configuration.component.scss similarity index 70% copy from ui/src/app/configuration/dialog/extensions-service-details/extensions-service-details-dialog.component.scss copy to ui/src/app/configuration/extensions-service-management/certificate-configuration/certificate-configuration.component.scss index 0fed18c7fa..f2c005a77d 100644 --- a/ui/src/app/configuration/dialog/extensions-service-details/extensions-service-details-dialog.component.scss +++ b/ui/src/app/configuration/extensions-service-management/certificate-configuration/certificate-configuration.component.scss @@ -16,22 +16,6 @@ * */ -.service-tag { - border-radius: 5px; - margin-right: 10px; - margin-top: 5px; - margin-bottom: 5px; - border: 1px solid var(--color-bg-3); - display: inline-block; - padding-top: 5px; - padding-bottom: 5px; -} - -.service-tag-prefix { - padding: 5px; -} - -.service-tag-value { - padding: 5px; - font-weight: bold; +:host { + --mat-table-row-item-container-height: 100%; } diff --git a/ui/src/app/configuration/extensions-service-management/certificate-configuration/certificate-configuration.component.ts b/ui/src/app/configuration/extensions-service-management/certificate-configuration/certificate-configuration.component.ts index 66187a6a03..8ad8b35405 100644 --- a/ui/src/app/configuration/extensions-service-management/certificate-configuration/certificate-configuration.component.ts +++ b/ui/src/app/configuration/extensions-service-management/certificate-configuration/certificate-configuration.component.ts @@ -31,6 +31,7 @@ import { TranslateService } from '@ngx-translate/core'; selector: 'sp-certificate-configuration', standalone: false, templateUrl: './certificate-configuration.component.html', + styleUrls: ['./certificate-configuration.component.scss'], }) export class CertificateConfigurationComponent implements OnInit { private certificateService = inject(CertificateService); diff --git a/ui/src/app/configuration/extensions-service-management/certificate-configuration/certificate-label/certificate-label.component.html b/ui/src/app/configuration/extensions-service-management/certificate-configuration/certificate-label/certificate-label.component.html new file mode 100644 index 0000000000..97ffc23465 --- /dev/null +++ b/ui/src/app/configuration/extensions-service-management/certificate-configuration/certificate-label/certificate-label.component.html @@ -0,0 +1,28 @@ +<!-- + ~ Licensed to the Apache Software Foundation (ASF) under one or more + ~ contributor license agreements. See the NOTICE file distributed with + ~ this work for additional information regarding copyright ownership. + ~ The ASF licenses this file to You under the Apache License, Version 2.0 + ~ (the "License"); you may not use this file except in compliance with + ~ the License. You may obtain a copy of the License at + ~ + ~ http://www.apache.org/licenses/LICENSE-2.0 + ~ + ~ Unless required by applicable law or agreed to in writing, software + ~ distributed under the License is distributed on an "AS IS" BASIS, + ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + ~ See the License for the specific language governing permissions and + ~ limitations under the License. + ~ + --> + +<div fxLayout="column" class="pt-sm pb-sm"> + <span class="text-sm"> + {{ certificate.issuerDn }} + </span> + <div fxLayout="row wrap" class="mt-sm"> + @for (dnsName of dnsNames; track $index) { + <sp-label size="small" [labelText]="dnsName"></sp-label> + } + </div> +</div> diff --git a/ui/src/app/configuration/dialog/extensions-service-details/extensions-service-details-dialog.component.ts b/ui/src/app/configuration/extensions-service-management/certificate-configuration/certificate-label/certificate-label.component.ts similarity index 58% copy from ui/src/app/configuration/dialog/extensions-service-details/extensions-service-details-dialog.component.ts copy to ui/src/app/configuration/extensions-service-management/certificate-configuration/certificate-label/certificate-label.component.ts index d225e3cd1f..8e5afae50a 100644 --- a/ui/src/app/configuration/dialog/extensions-service-details/extensions-service-details-dialog.component.ts +++ b/ui/src/app/configuration/extensions-service-management/certificate-configuration/certificate-label/certificate-label.component.ts @@ -16,25 +16,24 @@ * */ -import { Component, Input } from '@angular/core'; -import { DialogRef } from '@streampipes/shared-ui'; -import { SpServiceRegistration } from '@streampipes/platform-services'; +import { Component, Input, OnInit } from '@angular/core'; +import { Certificate } from '@streampipes/platform-services'; @Component({ - selector: 'sp-extensions-service-details-dialog', - templateUrl: './extensions-service-details-dialog.component.html', - styleUrls: ['./extensions-service-details-dialog.component.scss'], + selector: 'sp-certificate-label', standalone: false, + templateUrl: './certificate-label.component.html', }) -export class SpExtensionsServiceDetailsDialogComponent { +export class CertificateLabelComponent implements OnInit { @Input() - serviceReg: SpServiceRegistration; + certificate: Certificate; - constructor( - private dialogRef: DialogRef<SpExtensionsServiceDetailsDialogComponent>, - ) {} + dnsNames: string[] = []; - close() { - this.dialogRef.close(); + ngOnInit(): void { + this.dnsNames = this.certificate.subjectAlternativeNames.filter(san => + san.startsWith('DNS'), + ); + console.log(this.dnsNames); } } diff --git a/ui/src/scss/sp/_spacing.scss b/ui/src/scss/sp/_spacing.scss index 06eeac4fe9..fa56d6869e 100644 --- a/ui/src/scss/sp/_spacing.scss +++ b/ui/src/scss/sp/_spacing.scss @@ -190,4 +190,46 @@ padding: var(--space-2xl); } -/* More padding directions available on request */ +.pt-2xs { + padding-top: var(--space-2xs); +} +.pt-xs { + padding-top: var(--space-xs); +} +.pt-sm { + padding-top: var(--space-sm); +} +.pt-md { + padding-top: var(--space-md); +} +.pt-lg { + padding-top: var(--space-lg); +} +.pt-xl { + padding-top: var(--space-xl); +} +.pt-2xl { + padding-top: var(--space-2xl); +} + +.pb-2xs { + padding-bottom: var(--space-2xs); +} +.pb-xs { + padding-bottom: var(--space-xs); +} +.pb-sm { + padding-bottom: var(--space-sm); +} +.pb-md { + padding-bottom: var(--space-md); +} +.pb-lg { + padding-bottom: var(--space-lg); +} +.pb-xl { + padding-bottom: var(--space-xl); +} +.pb-2xl { + padding-bottom: var(--space-2xl); +}
