review update of connector & status infos in ConnectorConfigurationCo…

…mponent
Cumulocity-IoT · Sep 6, 2024 · e6d9a2b · e6d9a2b
1 parent ae7aa9a
commit e6d9a2b
Show file tree

Hide file tree

Showing 14 changed files with 213 additions and 312 deletions.
diff --git a/dynamic-mapping-ui/package.json b/dynamic-mapping-ui/package.json
@@ -1,6 +1,6 @@
 {
   "name": "dynamic-mapping",
-  "version": "4.4.1",
+  "version": "4.5.1",
   "author": "[email protected], [email protected]",
   "description": "Cumulocity plugin to map custom JSON payloads to C8Y payloads.The plugin support both directions: inbound/outbound. Currently MQTT is supported ",
   "repository": {

diff --git a/dynamic-mapping-ui/src/configuration/service-configuration.component.ts b/dynamic-mapping-ui/src/configuration/service-configuration.component.ts
@@ -74,7 +74,6 @@ export class ServiceConfigurationComponent implements OnInit {
   async loadData(): Promise<void> {
     this.serviceConfiguration =
       await this.sharedService.getServiceConfiguration();
-	// this.connectorConfigurationService.startConnectorConfigurations();
   }
 
   async clickedReconnect2NotificationEndpoint() {

diff --git a/dynamic-mapping-ui/src/connector/broker-connector.component.ts b/dynamic-mapping-ui/src/connector/broker-connector.component.ts
@@ -18,27 +18,27 @@
  *
  * @authors Christof Strack
  */
-import { Component, OnInit } from '@angular/core';
-import { AlertService, gettext } from '@c8y/ngx-components';
+import { Component, ViewChild } from '@angular/core';
+import { AlertService } from '@c8y/ngx-components';
 import { BsModalService } from 'ngx-bootstrap/modal';
-import { from, Observable } from 'rxjs';
+import { Observable } from 'rxjs';
 import packageJson from '../../package.json';
 import {
   ConnectorConfiguration,
   ConnectorSpecification,
   ConnectorStatus,
-  Feature,
-  uuidCustom
+  Feature
 } from '../shared';
 import { ConnectorConfigurationService } from '../shared/connector-configuration.service';
-import { ConfigurationConfigurationModalComponent } from '../shared';
+import { ConnectorConfigurationComponent } from '../shared/connector-configuration/connector-grid.component';
 
 @Component({
   selector: 'd11r-mapping-broker-connector',
   styleUrls: ['./broker-connector.component.style.css'],
   templateUrl: 'broker-connector.component.html'
 })
-export class BrokerConnectorComponent implements OnInit {
+export class BrokerConnectorComponent {
+  @ViewChild(ConnectorConfigurationComponent) connectorGrid!: ConnectorConfigurationComponent;
   version: string = packageJson.version;
   monitoring$: Observable<ConnectorStatus>;
   feature: Feature;
@@ -51,73 +51,11 @@ export class BrokerConnectorComponent implements OnInit {
     public alertService: AlertService
   ) {}
 
-  ngOnInit() {
-    // console.log('Running version', this.version);
-    from(
-      this.connectorConfigurationService.getConnectorSpecifications()
-    ).subscribe((specs) => {
-      this.specifications = specs;
-    });
-    this.connectorConfigurationService
-      .getConnectorConfigurationsLive()
-      .subscribe((confs) => {
-        this.configurations = confs;
-      });
-    this.loadData();
-  }
-
   refresh() {
-    this.connectorConfigurationService.resetCache();
-    this.loadData();
-  }
-
-  loadData(): void {
-    this.connectorConfigurationService.startConnectorConfigurations();
+    this.connectorGrid.refresh();
   }
 
   async onConfigurationAdd() {
-    const configuration: Partial<ConnectorConfiguration> = {
-      properties: {},
-      ident: uuidCustom()
-    };
-    const initialState = {
-      add: true,
-      configuration: configuration,
-      specifications: this.specifications,
-      configurationsCount: this.configurations.length
-    };
-    const modalRef = this.bsModalService.show(
-      ConfigurationConfigurationModalComponent,
-      {
-        initialState
-      }
-    );
-    modalRef.content.closeSubject.subscribe(async (addedConfiguration) => {
-      // console.log('Configuration after edit:', addedConfiguration);
-      if (addedConfiguration) {
-        // avoid to include status$
-        const clonedConfiguration = {
-          ident: addedConfiguration.ident,
-          connectorType: addedConfiguration.connectorType,
-          enabled: addedConfiguration.enabled,
-          name: addedConfiguration.name,
-          properties: addedConfiguration.properties
-        };
-        const response =
-          await this.connectorConfigurationService.createConnectorConfiguration(
-            clonedConfiguration
-          );
-        if (response.status < 300) {
-          this.alertService.success(
-            gettext('Added successfully configuration')
-          );
-        } else {
-          this.alertService.danger(
-            gettext('Failed to update connector configuration')
-          );
-        }
-        this.loadData();
-      }
-    });
+    this.connectorGrid.onConfigurationAdd();
   }
 }
diff --git a/dynamic-mapping-ui/src/mapping/step-connector/mapping-connector.component.html b/dynamic-mapping-ui/src/mapping/step-connector/mapping-connector.component.html
@@ -42,17 +42,6 @@
           [(deploymentMapEntry)]="deploymentMapEntry"
         ></d11r-mapping-connector-configuration>
       </div>
-      <div class="col-md-6 col-md-offset-3 col-lg-8 col-lg-offset-2 m-t-24">
-        <label>Selected connectors for mapping</label>
-        <div class="bg-level-1 p-t-2 p-b-2">
-          <span
-            class="text-10 label label-primary m-r-8"
-            *ngFor="let ident of deploymentMapEntry?.connectors; let i = index"
-          >
-            {{ findNameByIdent(ident) }}</span
-          >
-        </div>
-      </div>
     </div>
   </div>
 </div>
diff --git a/dynamic-mapping-ui/src/mapping/step-connector/mapping-connector.component.ts b/dynamic-mapping-ui/src/mapping/step-connector/mapping-connector.component.ts
@@ -25,24 +25,21 @@ import {
   OnDestroy,
   OnInit,
   Output,
+  ViewChild,
   ViewEncapsulation
 } from '@angular/core';
-import { AlertService, gettext } from '@c8y/ngx-components';
 import { BehaviorSubject } from 'rxjs';
 import {
-  ConfigurationConfigurationModalComponent,
-  ConnectorConfiguration,
-  ConnectorSpecification,
   DeploymentMapEntry,
   Direction,
   Feature,
-  StepperConfiguration,
-  uuidCustom
+  StepperConfiguration
 } from '../../shared';
 import { EditorMode } from '../shared/stepper-model';
 import { SharedService } from '../../shared/shared.service';
 import { BsModalService } from 'ngx-bootstrap/modal';
 import { ConnectorConfigurationService } from '../../connector';
+import { ConnectorConfigurationComponent } from '../../shared/connector-configuration/connector-grid.component';
 
 @Component({
   selector: 'd11r-mapping-connector',
@@ -51,6 +48,8 @@ import { ConnectorConfigurationService } from '../../connector';
   encapsulation: ViewEncapsulation.None
 })
 export class MappingConnectorComponent implements OnInit, OnDestroy {
+  @ViewChild(ConnectorConfigurationComponent)
+  connectorGrid!: ConnectorConfigurationComponent;
   @Input() stepperConfiguration: StepperConfiguration;
   private _deploymentMapEntry: DeploymentMapEntry;
   @Input()
@@ -68,82 +67,25 @@ export class MappingConnectorComponent implements OnInit, OnDestroy {
   readOnly: boolean;
 
   selectedResult$: BehaviorSubject<number> = new BehaviorSubject<number>(0);
-  specifications: ConnectorSpecification[] = [];
-  configurations: ConnectorConfiguration[];
 
   constructor(
-    private alertService: AlertService,
     private sharedService: SharedService,
     public bsModalService: BsModalService,
     public connectorConfigurationService: ConnectorConfigurationService
   ) {}
 
   async ngOnInit() {
-	this.readOnly = this.stepperConfiguration.editorMode == EditorMode.READ_ONLY;
+    this.readOnly =
+      this.stepperConfiguration.editorMode == EditorMode.READ_ONLY;
     this.feature = await this.sharedService.getFeatures();
-    this.specifications =
-      await this.connectorConfigurationService.getConnectorSpecifications();
-    this.connectorConfigurationService
-      .getConnectorConfigurationsLive()
-      .subscribe((confs) => {
-        this.configurations = confs;
-      });
-    this.loadData();
   }
 
   async onConfigurationAdd() {
-    const configuration: Partial<ConnectorConfiguration> = {
-      properties: {},
-      ident: uuidCustom()
-    };
-    const initialState = {
-      add: true,
-      configuration: configuration,
-      specifications: this.specifications,
-      configurationsCount: this.configurations?.length
-    };
-    const modalRef = this.bsModalService.show(
-      ConfigurationConfigurationModalComponent,
-      {
-        initialState
-      }
-    );
-    modalRef.content.closeSubject.subscribe(async (addedConfiguration) => {
-      // console.log('Configuration after edit:', addedConfiguration);
-      if (addedConfiguration) {
-        this.configurations.push(addedConfiguration);
-        // avoid to include status$
-        const clonedConfiguration = {
-          ident: addedConfiguration.ident,
-          connectorType: addedConfiguration.connectorType,
-          enabled: addedConfiguration.enabled,
-          name: addedConfiguration.name,
-          properties: addedConfiguration.properties
-        };
-        const response =
-          await this.connectorConfigurationService.createConnectorConfiguration(
-            clonedConfiguration
-          );
-        if (response.status < 300) {
-          this.alertService.success(
-            gettext('Added successfully configuration')
-          );
-        } else {
-          this.alertService.danger(
-            gettext('Failed to update connector configuration')
-          );
-        }
-      }
-      this.loadData();
-    });
+    this.connectorGrid.onConfigurationAdd();
   }
 
-  loadData(): void {
-    this.connectorConfigurationService.startConnectorConfigurations();
-  }
-
-  findNameByIdent(ident: string): string {
-    return this.configurations?.find((conf) => conf.ident == ident)?.name;
+  refresh() {
+    this.connectorGrid.refresh();
   }
 
   ngOnDestroy() {

diff --git a/dynamic-mapping-ui/src/shared/connector-configuration.service.ts b/dynamic-mapping-ui/src/shared/connector-configuration.service.ts
@@ -41,7 +41,7 @@ import {
   Observable,
   Subject
 } from 'rxjs';
-import { map, switchMap } from 'rxjs/operators';
+import { map, shareReplay, switchMap, tap } from 'rxjs/operators';
 import { Realtime } from '@c8y/ngx-components/api';
 
 @Injectable({ providedIn: 'root' })
@@ -51,18 +51,19 @@ export class ConnectorConfigurationService {
     private sharedService: SharedService
   ) {
     this.initConnectorConfigurations();
+    this.startConnectorStatusSubscriptions();
     this.realtime = new Realtime(this.client);
-    // console.log("Constructor:BrokerConfigurationService");
   }
 
   private _connectorConfigurations: ConnectorConfiguration[];
   private _connectorSpecifications: ConnectorSpecification[];
 
   private triggerConfigurations$: Subject<string> = new Subject();
-  private incomingRealtime$: Subject<IEvent> = new Subject();
+  private realtimeConnectorStatus$: Subject<IEvent> = new Subject();
   private connectorConfigurations$: Observable<ConnectorConfiguration[]>;
 
   private _agentId: string;
+  private initialized: boolean = false;
   private realtime: Realtime;
   private subscriptionEvents: any;
 
@@ -77,29 +78,30 @@ export class ConnectorConfigurationService {
   }
 
   startConnectorConfigurations() {
-    this.triggerConfigurations$.next('');
-    this.incomingRealtime$.next({} as any);
-	this.startConnectorStatusSubscriptions();
+    const n = Date.now();
+    if (!this.initialized) {
+      this.initConnectorConfigurations();
+      this.startConnectorStatusSubscriptions();
+      this.initialized = true;
+    }
+	this.realtimeConnectorStatus$.next({} as any);
+	this.triggerConfigurations$.next('start' + '/' + n);
   }
 
-  reloadConnectorConfigurations() {
-    this.triggerConfigurations$.next('');
+  updateConnectorConfigurations() {
+    const n = Date.now();
+    this.triggerConfigurations$.next('refresh' + '/' + n);
   }
 
   stopConnectorConfigurations() {
     this.realtime.unsubscribe(this.subscriptionEvents);
   }
 
-  refreshConnectorConfigurations() {
-    this.triggerConfigurations$.next('');
-  }
-
   initConnectorConfigurations() {
-    // console.log(
-    //   'Calling BrokerConfigurationService.initConnectorConfigurations()'
-    // );
     const connectorConfig$ = this.triggerConfigurations$.pipe(
-      // tap(() => console.log('New triggerConfigurations!')),
+      //   tap((state) =>
+      //     console.log('New triggerConfigurations:', state + '/' + Date.now())
+      //   ),
       switchMap(() => {
         const observableConfigurations = from(
           this.getConnectorConfigurations()
@@ -120,11 +122,12 @@ export class ConnectorConfigurationService {
           }
         });
         return configurations;
-      })
+      }),
+      shareReplay(1)
     );
     this.connectorConfigurations$ = combineLatest([
       connectorConfig$,
-      this.incomingRealtime$
+      this.realtimeConnectorStatus$
     ]).pipe(
       map((vars) => {
         const [configurations, payload] = vars;
@@ -245,6 +248,6 @@ export class ConnectorConfigurationService {
 
   private updateConnectorStatus = async (p: object) => {
     const payload = p['data']['data'];
-    this.incomingRealtime$.next(payload);
+    this.realtimeConnectorStatus$.next(payload);
   };
 }
diff --git a/dynamic-mapping-ui/src/shared/connector-configuration/connector-grid.component.html b/dynamic-mapping-ui/src/shared/connector-configuration/connector-grid.component.html
@@ -31,3 +31,14 @@
   (itemsSelect)="onSelectionChanged($event)"
 >
 </c8y-data-grid>
+<div  *ngIf ="selectable && !readOnly">
+	<label>Selected connectors for mapping</label>
+	<div class="bg-level-1 p-t-2 p-b-2">
+	  <span
+		class="text-10 label label-primary m-r-8"
+		*ngFor="let ident of deploymentMapEntry?.connectors; let i = index"
+	  >
+		{{ findNameByIdent(ident) }}</span
+	  >
+	</div>
+  </div>