apache · dominikriemer · Sep 25, 2023 · Sep 24, 2023
diff --git a/ui/src/app/configuration/configuration.module.ts b/ui/src/app/configuration/configuration.module.ts
@@ -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: [
@@ -154,6 +155,7 @@ import { SpMessagingBrokerConfigComponent } from './messaging-configuration/brok
         SpDataExportItemComponent,
         SpDataImportDialogComponent,
         SpEditLabelComponent,
+        SpExtensionsServiceDetailsDialogComponent,
         SpLabelConfigurationComponent,
         SpMessagingBrokerConfigComponent,
         SpRegisteredExtensionsServiceComponent,

diff --git a/...ration/dialog/extensions-service-details/extensions-service-details-dialog.component.html b/...ration/dialog/extensions-service-details/extensions-service-details-dialog.component.html
@@ -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>
diff --git a/...ration/dialog/extensions-service-details/extensions-service-details-dialog.component.scss b/...ration/dialog/extensions-service-details/extensions-service-details-dialog.component.scss
@@ -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;
+}
diff --git a/...guration/dialog/extensions-service-details/extensions-service-details-dialog.component.ts b/...guration/dialog/extensions-service-details/extensions-service-details-dialog.component.ts
@@ -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();
+    }
+}
diff --git a/...nagement/extensions-service-configuration/extensions-service-configuration.component.html b/...nagement/extensions-service-configuration/extensions-service-configuration.component.html
@@ -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"
@@ -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"
@@ -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>
@@ -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>

diff --git a/...management/extensions-service-configuration/extensions-service-configuration.component.ts b/...management/extensions-service-configuration/extensions-service-configuration.component.ts
@@ -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);

diff --git a/...anagement/extensions-service-configuration/service-configs/service-configs.component.html b/...anagement/extensions-service-configuration/service-configs/service-configs.component.html
@@ -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"

diff --git a/...-management/extensions-service-configuration/service-configs/service-configs.component.ts b/...-management/extensions-service-configuration/service-configs/service-configs.component.ts
@@ -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],
 })

diff --git a/...stered-extensions-services.component.html → ...stered-extensions-services.component.html b/...stered-extensions-services.component.html → ...stered-extensions-services.component.html
@@ -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"
@@ -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"
@@ -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>
diff --git a/...stered-extensions-services.component.scss → ...stered-extensions-services.component.scss b/...stered-extensions-services.component.scss → ...stered-extensions-services.component.scss