Skip to content

Commit

Permalink
feat(#1814): Add details dialog to service configuration view (#1959)
Browse files Browse the repository at this point in the history
  • Loading branch information
dominikriemer committed Sep 25, 2023
1 parent 1e3bfd9 commit 5daaa82
Show file tree
Hide file tree
Showing 11 changed files with 244 additions and 25 deletions.
4 changes: 3 additions & 1 deletion ui/src/app/configuration/configuration.module.ts
Expand Up @@ -61,9 +61,10 @@ import { ServiceConfigsTextComponent } from './extensions-service-management/ext
import { ServiceConfigsPasswordComponent } from './extensions-service-management/extensions-service-configuration/service-configs/service-configs-password/service-configs-password.component';
import { ServiceConfigsBooleanComponent } from './extensions-service-management/extensions-service-configuration/service-configs/service-configs-boolean/service-configs-boolean.component';
import { ServiceConfigsNumberComponent } from './extensions-service-management/extensions-service-configuration/service-configs/service-configs-number/service-configs-number.component';
import { SpRegisteredExtensionsServiceComponent } from './extensions-service-management/registrered-extensions-services/registered-extensions-services.component';
import { SpRegisteredExtensionsServiceComponent } from './extensions-service-management/registered-extensions-services/registered-extensions-services.component';
import { SpExtensionsServiceConfigurationComponent } from './extensions-service-management/extensions-service-configuration/extensions-service-configuration.component';
import { SpMessagingBrokerConfigComponent } from './messaging-configuration/broker-config/broker-config.component';
import { SpExtensionsServiceDetailsDialogComponent } from './dialog/extensions-service-details/extensions-service-details-dialog.component';

@NgModule({
imports: [
Expand Down Expand Up @@ -154,6 +155,7 @@ import { SpMessagingBrokerConfigComponent } from './messaging-configuration/brok
SpDataExportItemComponent,
SpDataImportDialogComponent,
SpEditLabelComponent,
SpExtensionsServiceDetailsDialogComponent,
SpLabelConfigurationComponent,
SpMessagingBrokerConfigComponent,
SpRegisteredExtensionsServiceComponent,
Expand Down
@@ -0,0 +1,69 @@
<!--
~ 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 class="sp-dialog-container">
<div class="sp-dialog-content p-15">
<div fxLayout="column" fxLayoutGap="10px" class="p-15">
<div fxLayout="row" fxLayoutGap="10px" fxFlex="60">
<div fxFlex="20">Service ID</div>
<div fxFlex="80">{{ serviceReg.svcId }}</div>
</div>
<div fxLayout="row" fxLayoutGap="10px" fxFlex="60">
<div fxFlex="20">Service Group</div>
<div fxFlex="80">{{ serviceReg.svcGroup }}</div>
</div>
<div fxLayout="row" fxLayoutGap="10px" fxFlex="60">
<div fxFlex="20">Location</div>
<div fxFlex="80">
{{ serviceReg.scheme }}://{{ serviceReg.host }}:{{
serviceReg.port
}}
</div>
</div>
<div fxLayout="row" fxLayoutGap="10px" fxFlex="60">
<div fxFlex="20">Tags</div>
<div fxFlex="80">
<div>
<div
*ngFor="let tag of serviceReg.tags"
class="service-tag"
>
<span class="service-tag-prefix">{{
tag.prefix.toLowerCase()
}}</span>
<span class="service-tag-value">{{
tag.value
}}</span>
</div>
</div>
</div>
</div>
</div>
</div>
<mat-divider></mat-divider>
<div class="sp-dialog-actions actions-align-right">
<button
mat-button
mat-raised-button
class="mat-basic"
(click)="close()"
>
Close
</button>
</div>
</div>
@@ -0,0 +1,40 @@
/*!
* 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.
*
*/

@import '../../../../scss/sp/sp-dialog.scss';

.service-tag {
border-radius: 5px;
margin-right: 10px;
margin-top: 5px;
margin-bottom: 5px;
font-size: small;
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;
}
@@ -0,0 +1,39 @@
/*
* 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.
*
*/

import { Component, Input } from '@angular/core';
import { DialogRef } from '@streampipes/shared-ui';
import { SpServiceRegistration } 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'],
})
export class SpExtensionsServiceDetailsDialogComponent {
@Input()
serviceReg: SpServiceRegistration;

constructor(
private dialogRef: DialogRef<SpExtensionsServiceDetailsDialogComponent>,
) {}

close() {
this.dialogRef.close();
}
}
Expand Up @@ -25,15 +25,15 @@
>
<ng-container matColumnDef="group">
<th
fxFlex="40"
fxFlex="45"
fxLayoutAlign="start center"
mat-header-cell
*matHeaderCellDef
>
Service Name
Service Group
</th>
<td
fxFlex="40"
fxFlex="45"
fxLayoutAlign="start center"
mat-cell
*matCellDef="let element"
Expand All @@ -44,15 +44,15 @@

<ng-container matColumnDef="name">
<th
fxFlex="40"
fxFlex="45"
fxLayoutAlign="start center"
mat-header-cell
*matHeaderCellDef
>
Service Name
</th>
<td
fxFlex="40"
fxFlex="45"
fxLayoutAlign="start center"
mat-cell
*matCellDef="let element"
Expand All @@ -63,26 +63,32 @@

<ng-container matColumnDef="action">
<th
fxFlex="30"
fxFlex="10"
fxLayoutAlign="start center"
mat-header-cell
*matHeaderCellDef
>
Action
<button
mat-icon-button
color="accent"
(click)="getConsulServices()"
matTooltip="Refresh"
>
<mat-icon>refresh</mat-icon>
</button>
</th>
<td
fxFlex="30"
fxFlex="10"
fxLayoutAlign="start center"
mat-cell
*matCellDef="let element"
>
<button
mat-button
mat-raised-button
mat-icon-button
color="accent"
(click)="expand(element)"
>
Edit
<mat-icon>edit</mat-icon>
</button>
</td>
</ng-container>
Expand All @@ -100,10 +106,10 @@
"
>
<div fxFlex="100">
<sp-consul-configs
<sp-service-configs
[consulService]="element"
(updateConsulService)="updateConsulService($event)"
></sp-consul-configs>
></sp-service-configs>
</div>
</div>
</td>
Expand Down
Expand Up @@ -65,7 +65,6 @@ export class SpExtensionsServiceConfigurationComponent {
const sortedServices = this.sort(response);
this.consulServices = sortedServices;
this.dataSource.data = sortedServices;
console.log(this.consulServices);
},
error => {
console.error(error);
Expand Down
Expand Up @@ -26,6 +26,7 @@
fxLayout="column"
*ngFor="let configuration of consulService.configs"
>
<h5>{{ configuration.key }}</h5>
<sp-consul-configs-password
fxFlex="100"
*ngIf="configuration.isPassword"
Expand Down
Expand Up @@ -21,7 +21,7 @@ import { XsService } from '../../../../NS/xs.service';
import { SpServiceConfiguration } from '@streampipes/platform-services';

@Component({
selector: 'sp-consul-configs',
selector: 'sp-service-configs',
templateUrl: './service-configs.component.html',
providers: [XsService],
})
Expand Down
Expand Up @@ -25,15 +25,15 @@
>
<ng-container matColumnDef="status">
<th
fxFlex="30"
fxFlex="10"
fxLayoutAlign="start center"
mat-header-cell
*matHeaderCellDef
>
Status
</th>
<td
fxFlex="30"
fxFlex="10"
fxLayoutAlign="start center"
mat-cell
*matCellDef="let element"
Expand All @@ -50,6 +50,25 @@
</td>
</ng-container>

<ng-container matColumnDef="group">
<th
fxFlex="40"
fxLayoutAlign="start center"
mat-header-cell
*matHeaderCellDef
>
Service Group
</th>
<td
fxFlex="40"
fxLayoutAlign="start center"
mat-cell
*matCellDef="let element"
>
{{ element.svcGroup }}
</td>
</ng-container>

<ng-container matColumnDef="name">
<th
fxFlex="40"
Expand All @@ -69,16 +88,44 @@
</td>
</ng-container>

<ng-container matColumnDef="action">
<th
fxFlex="10"
fxLayoutAlign="start center"
mat-header-cell
*matHeaderCellDef
>
<button
mat-icon-button
color="accent"
matTooltip="Refresh"
(click)="getRegisteredServices()"
>
<mat-icon>refresh</mat-icon>
</button>
</th>
<td
fxFlex="10"
fxLayoutAlign="start center"
mat-cell
*matCellDef="let element"
>
<button
mat-icon-button
color="accent"
matTooltip="View service details"
(click)="openServiceDetails(element)"
>
<mat-icon>search</mat-icon>
</button>
</td>
</ng-container>

<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr
mat-row
*matRowDef="let element; columns: displayedColumns"
class="consul-configuration-row"
></tr>
<tr
mat-row
*matRowDef="let row; columns: ['expandedDetail']"
class="consul-configuration-detail-row"
></tr>
</table>
</div>

0 comments on commit 5daaa82

Please sign in to comment.