Feature/iot - 1522 test datatarget

src/app/applications/applications-routing.module.ts

@@ -23,6 +23,7 @@ import { IoTDeviceDetailComponent } from "./iot-devices/iot-device-detail/iot-de
 import { IotDeviceEditComponent } from "./iot-devices/iot-device-edit/iot-device-edit.component";
 import { MulticastDetailComponent } from "./multicast/multicast-detail/multicast-detail.component";
 import { MulticastEditComponent } from "./multicast/multicast-edit/multicast-edit.component";
+import { DatatargetTestConnectionComponent } from "./datatarget/datatarget-test-connection/datatarget-test-connection.component";
 
 const applicationRoutes: Routes = [
   {
@@ -76,6 +77,7 @@ const applicationRoutes: Routes = [
             component: DatatargetDetailComponent,
             children: [
               { path: "datatarget-log", component: DatatargetLogComponent },
+              { path: "datatarget-test-connection", component: DatatargetTestConnectionComponent },
               { path: "httppush-detail", component: HttppushDetailComponent },
               { path: "fiware-detail", component: FiwareDetailComponent },
               { path: "mqtt-detail", component: MqttDetailComponent },

src/app/applications/datatarget/datatarget-detail/datatarget-detail-tabs-common.ts

@@ -15,11 +15,9 @@ import { NavTab } from "@shared/types/nav-tabs.type";
 import { Subscription } from "rxjs";
 
 export abstract class DatatargetDetailTabsCommon implements DatatargetDetail {
-  protected abstract getDetailsLink(): string;
-
   faExclamationTriangle = faExclamationTriangle;
-
   logLink: "datatarget-log" = "datatarget-log";
+  testConnectionLink: "datatarget-test-connection" = "datatarget-test-connection";
   navTabs: NavTab[] = [
     {
       label: "APPLICATION.DETAILS",
@@ -31,13 +29,16 @@ export abstract class DatatargetDetailTabsCommon implements DatatargetDetail {
       link: this.logLink,
       index: 1,
     },
+    {
+      label: "DATATARGET.TEST_CONNECTION.TEST-CONNECTION",
+      link: this.testConnectionLink,
+      index: 2,
+    },
   ];
-
   datatarget: Datatarget;
   backButton: BackButton = { label: "", routerLink: undefined };
   dropdownButton: DropdownButton;
   canEdit: boolean;
-
   private subscriptions: Subscription[] = [];
   private deleteDialogSubscription: Subscription;
 
@@ -79,16 +80,6 @@ export abstract class DatatargetDetailTabsCommon implements DatatargetDetail {
     this.canEdit = meService.hasAccessToTargetOrganization(OrganizationAccessScope.ApplicationWrite, undefined, appId);
   }
 
-  protected onDestroy(): void {
-    this.subscriptions?.forEach(s => s?.unsubscribe());
-    this.deleteDialogSubscription?.unsubscribe();
-  }
-
-  private getDatatarget = (id: number) =>
-    this.datatargetService.get(id).subscribe((dataTarget: Datatarget) => {
-      this.datatarget = dataTarget;
-    });
-
   onDeleteDatatarget() {
     this.deleteDialogSubscription?.unsubscribe();
     this.deleteDialogSubscription = this.deleteDialogService.showSimpleDialog().subscribe(response => {
@@ -106,4 +97,16 @@ export abstract class DatatargetDetailTabsCommon implements DatatargetDetail {
       );
     });
   }
+
+  protected abstract getDetailsLink(): string;
+
+  protected onDestroy(): void {
+    this.subscriptions?.forEach(s => s?.unsubscribe());
+    this.deleteDialogSubscription?.unsubscribe();
+  }
+
+  private getDatatarget = (id: number) =>
+    this.datatargetService.get(id).subscribe((dataTarget: Datatarget) => {
+      this.datatarget = dataTarget;
+    });
 }

src/app/applications/datatarget/datatarget-test-connection/datatarget-test-connection.component.html

@@ -0,0 +1,84 @@
+<div class="container-fluid">
+  <div class="row">
+    <div class="col-md-6 d-flex align-items-stretch">
+      <div class="jumbotron jumbotron--full-width">
+        <h3>{{ "DATATARGET.TEST_CONNECTION.TEST-CONNECTION" | translate }}</h3>
+        <div *ngIf="dataTarget.type === DataTargetType.MQTT">
+          <button (click)="pingDataTarget()"
+                  class="mt-3 btn btn-primary">
+            {{ "DATATARGET.TEST_CONNECTION.TEST-CONNECTION" | translate }}
+          </button>
+          <p class="mt-2">{{ "DATATARGET.TEST_CONNECTION.SEND-PING-TO-DATATARGET" | translate }}</p>
+          <mat-divider></mat-divider>
+        </div>
+        <p class="mt-3 font-weight-bold">{{ "DATATARGET.TEST_CONNECTION.SEND-LATEST-PACKAGE" | translate }}</p>
+        <mat-select
+          (selectionChange)="getLastPackage($event)"
+          [placeholder]="'DATATARGET.TEST_CONNECTION.CHOOSE-IOT-DEVICE' | translate"
+          class="mt-3 form-control"
+        >
+          <mat-option *ngFor="let iotDevice of iotDevices" [value]="iotDevice.id">
+            {{ iotDevice.name }}
+          </mat-option>
+        </mat-select>
+        <mat-select
+          [(value)]="payloadDecoderId"
+          [placeholder]="'DATATARGET.TEST_CONNECTION.CHOOSE-PAYLOAD-DECODER' | translate"
+          class="mt-3 form-control">
+          <mat-option [value]="0">
+            {{ "QUESTION.DATATARGET.NO-PAYLOAD-DECODER-SELECTED" | translate }}
+          </mat-option>
+          <mat-option *ngFor="let payloadDecoder of payloadDecoders" [value]="payloadDecoder.id">
+            {{ payloadDecoder.name }}
+          </mat-option>
+        </mat-select>
+        <button (click)="pingDataTarget(payloadData)" [disabled]="!payloadData"
+                class="mt-3 btn btn-primary">{{ "DATATARGET.TEST_CONNECTION.SEND-DATA-PACKAGE" | translate }}
+        </button>
+        <p class="mt-2" style="white-space: pre-wrap">
+          {{ "DATATARGET.TEST_CONNECTION.SEND-DATA-PACKAGE-DESCRIPTION" | translate }}
+          {{ dataTarget.type === DataTargetType.MQTT ? ("DATATARGET.TEST_CONNECTION.MQTT-DISCLAIMER"| translate) : "" }}
+        </p>
+      </div>
+    </div>
+    <div class="col-md-6 d-flex align-items-stretch min-height-400">
+      <div class="jumbotron jumbotron--full-width">
+        <h3>{{ "DATATARGET.TEST_CONNECTION.CHOSEN-DATA-PACKAGE" | translate }}</h3>
+        <ngx-monaco-editor
+          [(ngModel)]="payloadData"
+          [ngModelOptions]="{ standalone: true }"
+          [options]="editorJsonOutpuOptions"
+          class="height-85"
+        >
+        </ngx-monaco-editor>
+      </div>
+    </div>
+    <div class="col-md-6 d-flex align-items-stretch min-height-400">
+      <div class="jumbotron jumbotron--full-width">
+        <h3>{{ "DATATARGET.TEST_CONNECTION.SENT-DECODED-REQUEST" | translate }}</h3>
+        <ngx-monaco-editor
+          [(ngModel)]="decodedData"
+          [ngModelOptions]="{ standalone: true }"
+          [options]="editorJsonOutpuOptions"
+          class="height-85"
+        >
+        </ngx-monaco-editor>
+      </div>
+    </div>
+    <div class="col-md-6 d-flex align-items-stretch min-height-400">
+      <div class="jumbotron jumbotron--full-width">
+        <h3>{{ "DATATARGET.TEST_CONNECTION.RECEIVED-RESPONSE" | translate }}</h3>
+        <ngx-monaco-editor
+          [(ngModel)]="testResponse"
+          [ngModelOptions]="{ standalone: true }"
+          [options]="editorJsonOutpuOptions"
+          class="height-85"
+        >
+        </ngx-monaco-editor>
+      </div>
+    </div>
+    <div *ngIf="loading">
+      <app-loading-spinner></app-loading-spinner>
+    </div>
+  </div>
+</div>

src/app/applications/datatarget/datatarget-test-connection/datatarget-test-connection.component.scss

@@ -0,0 +1,7 @@
+.height-85 {
+  height: 85%;
+}
+
+.min-height-400 {
+  min-height: 400px;
+}

src/app/applications/datatarget/datatarget-test-connection/datatarget-test-connection.component.ts

@@ -0,0 +1,129 @@
+import { Component, OnDestroy, OnInit } from "@angular/core";
+import { IoTDeviceService } from "@applications/iot-devices/iot-device.service";
+import { ApplicationService } from "@applications/application.service";
+import { Application } from "@applications/application.model";
+import { IotDevice } from "@applications/iot-devices/iot-device.model";
+import { ActivatedRoute } from "@angular/router";
+import { MatSelectChange } from "@angular/material/select";
+import { DatatargetService } from "@applications/datatarget/datatarget.service";
+import { Datatarget } from "@applications/datatarget/datatarget.model";
+import { DataTargetType } from "@shared/enums/datatarget-type";
+import { PayloadDecoderMinimal } from "@payload-decoder/payload-decoder.model";
+import { PayloadDecoderService } from "@payload-decoder/payload-decoder.service";
+import { PayloadDeviceDatatargetService } from "@payload-decoder/payload-device-datatarget.service";
+
+@Component({
+  selector: "app-datatarget-test-connection",
+  templateUrl: "./datatarget-test-connection.component.html",
+  styleUrl: "./datatarget-test-connection.component.scss",
+})
+export class DatatargetTestConnectionComponent implements OnInit, OnDestroy {
+  editorJsonOutpuOptions = {
+    theme: "vs",
+    language: "json",
+    autoIndent: true,
+    roundedSelection: true,
+    minimap: { enabled: false },
+    readOnly: true,
+  };
+
+  public iotDevices: IotDevice[];
+  public payloadDecoders: PayloadDecoderMinimal[];
+  public payloadData = "";
+  public testResponse = "";
+  public decodedData = "";
+  public dataTarget: Datatarget;
+  public payloadDecoderId: number;
+  public loading = false;
+  protected readonly DataTargetType = DataTargetType;
+  private applicationId: number;
+  private dataTargetId: number;
+  private iotDeviceId: number;
+  private subscriptions = [];
+
+  constructor(
+    private deviceService: IoTDeviceService,
+    private dataTargetService: DatatargetService,
+    private route: ActivatedRoute,
+    private payloadDecoderService: PayloadDecoderService,
+    private payloadDeviceDataTargetService: PayloadDeviceDatatargetService,
+    public applicationService: ApplicationService
+  ) {}
+
+  ngOnInit(): void {
+    this.applicationId = +this.route.parent.snapshot.paramMap.get("id");
+    this.dataTargetId = +this.route.parent.snapshot.paramMap.get("datatargetId");
+    this.getDevices();
+    this.getDatatarget();
+    this.getPayloadDecoders();
+  }
+
+  ngOnDestroy() {
+    this.subscriptions.forEach(s => s?.unsubscribe());
+  }
+
+  getDevices() {
+    const deviceSubscription = this.applicationService
+      .getApplication(this.applicationId)
+      .subscribe((application: Application) => {
+        this.iotDevices = application.iotDevices.sort((a, b) => a.name.localeCompare(b.name, "en", { numeric: true }));
+      });
+
+    this.subscriptions.push(deviceSubscription);
+  }
+
+  getLastPackage(event: MatSelectChange) {
+    this.iotDeviceId = event.value;
+    const deviceSub = this.deviceService.getIoTDevice(event.value).subscribe((device: IotDevice) => {
+      if (device.latestReceivedMessage) {
+        this.payloadData = JSON.stringify(device.latestReceivedMessage.rawData, null, 2);
+      }
+    });
+
+    const connectionSub = this.payloadDeviceDataTargetService.getByDataTarget(this.dataTargetId).subscribe(c => {
+      const connection = c.data.find(x => x.iotDevices.some(d => d.id === event.value));
+      this.payloadDecoderId = connection.payloadDecoder.id;
+    });
+
+    this.subscriptions.push(deviceSub, connectionSub);
+  }
+
+  pingDataTarget(dataPackage?: string) {
+    this.loading = true;
+    this.dataTargetService
+      .testDataTarget({
+        dataTargetId: this.dataTargetId,
+        iotDeviceId: this.iotDeviceId,
+        payloadDecoderId: this.payloadDecoderId,
+        dataPackage: dataPackage,
+      })
+      .subscribe(
+        response => {
+          this.testResponse = response?.result ? JSON.stringify(response.result, null, 2) : "";
+          this.decodedData = response?.decodedPayload ? JSON.stringify(response.decodedPayload, null, 2) : "";
+        },
+        error => {
+          console.log(error);
+        },
+        () => {
+          this.loading = false;
+        }
+      );
+  }
+
+  private getDatatarget() {
+    const dataTargetSubscription = this.dataTargetService.get(this.dataTargetId).subscribe((datatarget: Datatarget) => {
+      this.dataTarget = datatarget;
+    });
+
+    this.subscriptions.push(dataTargetSubscription);
+  }
+
+  private getPayloadDecoders() {
+    const sub = this.payloadDecoderService.getMinimal().subscribe(result => {
+      this.payloadDecoders = result.data;
+    });
+
+    this.subscriptions.push(sub);
+  }
+}

src/app/applications/datatarget/datatarget.model.ts

@@ -53,3 +53,10 @@ export class OddkMailInfo {
   comment?: string;
   sharingUrl?: string;
 }
+
+export class TestDataTargetDto {
+  dataTargetId: number;
+  iotDeviceId?: number;
+  payloadDecoderId?: number;
+  dataPackage?: string;
+}

src/app/applications/datatarget/datatarget.module.ts

@@ -29,6 +29,8 @@ import { OpendatadkDetailComponent } from "./opendatadk/opendatadk-detail/openda
 import { OpendatadkEditComponent } from "./opendatadk/opendatadk-edit/opendatadk-edit.component";
 import { OpenDataDkMailDialogComponent } from "./opendatadk/opendatadk-edit/opendatadk-mail-dialog/opendatadk-mail-dialog";
 import { OpenDataDkWarningDialogComponent } from "./opendatadk/opendatadk-edit/opendatadk-warning-dialog/opendatadk-warning-dialog";
+import { DatatargetTestConnectionComponent } from "./datatarget-test-connection/datatarget-test-connection.component";
+import { MonacoEditorModule } from "ngx-monaco-editor-v2";
 
 @NgModule({
   declarations: [
@@ -53,6 +55,7 @@ import { OpenDataDkWarningDialogComponent } from "./opendatadk/opendatadk-edit/o
     DatatargetDetailTypeSelectorDirective,
     DatatargetEditTypeSelectorDirective,
     DatatargetTabComponent,
+    DatatargetTestConnectionComponent,
   ],
   imports: [
     CommonModule,
@@ -65,6 +68,7 @@ import { OpenDataDkWarningDialogComponent } from "./opendatadk/opendatadk-edit/o
     FormsModule,
     SharedModule,
     PipesModule,
+    MonacoEditorModule,
   ],
   exports: [
     DatatargetTableComponent,