Reset API key on a generic HTTP device

src/app/applications/iot-devices/iot-device-detail/iot-device-detail.component.html

@@ -1,6 +1,6 @@
 <div *ngIf="device">
   <app-top-bar [data]="device" [backButton]="backButton" [subPage]="true" [addDetailDowndown]="true"
-    [dropDownButton]="dropdownButton" (deleteSelectedInDropdown)="clickDelete()">
+        [dropDownButton]="dropdownButton" (deleteSelectedInDropdown)="clickDelete()" (extraDropdownOptions)="clickExtraDropdownOption($event)">
   </app-top-bar>
   <!-- General details & map -->
   <mat-tab-group animationDuration="200ms" (selectedTabChange)="selectedTabChange($event)">

src/app/applications/iot-devices/iot-device-detail/iot-device-detail.component.ts

@@ -11,7 +11,7 @@ import { Subscription } from 'rxjs';
 import { Downlink } from '../downlink.model';
 import { IotDevice, IoTDeviceStatsResponse } from '../iot-device.model';
 import { IoTDeviceService } from '../iot-device.service';
-import { DropdownButton } from '@shared/models/dropdown-button.model';
+import { DropdownButton, ExtraDropdownOption } from '@shared/models/dropdown-button.model';
 import { Title } from '@angular/platform-browser';
 import { MeService } from '@shared/services/me.service';
 import { MatTabChangeEvent } from '@angular/material/tabs';
@@ -72,13 +72,20 @@ export class IoTDeviceDetailComponent implements OnInit, OnDestroy {
     public dropdownButton: DropdownButton;
     public canStartDownlink = false;
 
+    private resetApiKeyId = 'RESET-API-KEY';
+    private resetApiKeyOption: ExtraDropdownOption;
+    private resetApiKeyBody: string;
+    private resetApiKeyConfirm: string;
+    private resetApiKeyCancel: string;
+
     public genericHttpDeviceUrl: string;
     private hasFetchedDeviceStats = false;
     dataRateChartData: ChartConfiguration['data'] = { datasets: [] };
     rssiChartData: ChartConfiguration['data'] = { datasets: [] };
     snrChartData: ChartConfiguration['data'] = { datasets: [] };
     rssiChartOptions = defaultChartOptions;
     snrChartOptions: typeof defaultChartOptions = defaultChartOptions;
+
     dataRateChartOptions: typeof defaultChartOptions = {
       ...defaultChartOptions,
       scales: {
@@ -102,7 +109,7 @@ export class IoTDeviceDetailComponent implements OnInit, OnDestroy {
         private deleteDialogService: DeleteDialogService,
         private dialog: MatDialog,
         private titleService: Title,
-        private meService: MeService
+        private meService: MeService,
     ) { }
 
     ngOnInit(): void {
@@ -118,12 +125,31 @@ export class IoTDeviceDetailComponent implements OnInit, OnDestroy {
             };
         }
 
-        this.translate.get(['NAV.APPLICATIONS', 'IOTDEVICE-TABLE-ROW.SHOW-OPTIONS', 'TITLE.IOTDEVICE'])
-            .subscribe(translations => {
-                this.backButton.label = translations['NAV.APPLICATIONS'];
-                this.dropdownButton.label = translations['IOTDEVICE-TABLE-ROW.SHOW-OPTIONS'];
-                this.titleService.setTitle(translations['TITLE.IOTDEVICE']);
-            });
+        this.translate
+          .get([
+            'NAV.APPLICATIONS',
+            'IOTDEVICE-TABLE-ROW.SHOW-OPTIONS',
+            'TITLE.IOTDEVICE',
+            'IOTDEVICE-TABLE-ROW.RESET-API-KEY',
+            'IOTDEVICE.GENERIC_HTTP.RESET-API-KEY',
+            'GEN.CANCEL'
+          ])
+          .subscribe((translations) => {
+            this.backButton.label = translations['NAV.APPLICATIONS'];
+            this.dropdownButton.label =
+              translations['IOTDEVICE-TABLE-ROW.SHOW-OPTIONS'];
+            this.titleService.setTitle(translations['TITLE.IOTDEVICE']);
+
+            this.resetApiKeyOption = {
+              id: this.resetApiKeyId,
+              label: translations['IOTDEVICE-TABLE-ROW.RESET-API-KEY'],
+            };
+            this.resetApiKeyBody = translations['IOTDEVICE.GENERIC_HTTP.RESET-API-KEY']['BODY'];
+            this.resetApiKeyConfirm = translations['IOTDEVICE.GENERIC_HTTP.RESET-API-KEY']['YESRESET'];
+            this.resetApiKeyCancel = translations['GEN.CANCEL'];
+          });
+
+        this.dropdownButton.extraOptions = [];
     }
 
     bindIoTDeviceAndApplication(deviceId: number) {
@@ -135,6 +161,13 @@ export class IoTDeviceDetailComponent implements OnInit, OnDestroy {
                 this.longitude = this.device.location.coordinates[0];
                 this.latitude = this.device.location.coordinates[1];
             }
+
+            if (
+              this.meService.canWriteInTargetOrganization() &&
+              this.device.type === DeviceType.GENERIC_HTTP
+            ) {
+              this.dropdownButton.extraOptions.push(this.resetApiKeyOption);
+            }
         });
     }
 
@@ -287,4 +320,28 @@ export class IoTDeviceDetailComponent implements OnInit, OnDestroy {
             this.deleteDialogSubscription.unsubscribe();
         }
     }
+
+    clickExtraDropdownOption(id: string) {
+      if (id === this.resetApiKeyId) {
+        this.deleteDialogService
+          .showSimpleDialog(
+            this.resetApiKeyBody,
+            true,
+            true,
+            false,
+            '',
+            this.resetApiKeyConfirm,
+            this.resetApiKeyCancel
+          )
+          .subscribe((isConfirmed) => {
+            if (isConfirmed) {
+              this.iotDeviceService
+                .resetHttpDeviceApiKey(this.device.id)
+                .subscribe((response) => {
+                  this.device.apiKey = response.apiKey;
+                });
+            }
+          });
+      }
+    }
 }

src/app/applications/iot-devices/iot-device.service.ts

@@ -78,4 +78,8 @@ export class IoTDeviceService {
     getDeviceStats(id: number): Observable<IoTDeviceStatsResponse[]> {
       return this.restService.get(`${this.BASEURL}/stats`, null, id);
     }
+
+    resetHttpDeviceApiKey(id: number): Observable<Pick<IotDevice, 'apiKey'>> {
+      return this.restService.put(`${this.BASEURL}/resetHttpDeviceApiKey`, null, id);
+    }
 }

src/app/shared/components/delete-dialog/delete-dialog.component.html

@@ -5,12 +5,12 @@ <h1 mat-dialog-title *ngIf="dialogModel.showOk">{{dialogModel.infoTitle | transl
 </div>
 <div mat-dialog-actions class="d-flex flex-row-reverse">
     <button *ngIf="dialogModel.showCancel" click="close()" mat-dialog-close class="btn btn-primary ml-2">
-        {{'DIALOG.CLOSE' | translate}}
+        {{ dialogModel.cancelText || 'DIALOG.CLOSE' | translate}}
     </button>
     <button *ngIf="dialogModel.showAccept" [mat-dialog-close]="true" mat-dialog-close class="btn btn-secondary ml-2">
-        {{'DIALOG.DIALOG-CONFIRM' | translate}}
+        {{ dialogModel.acceptText || 'DIALOG.DIALOG-CONFIRM' | translate}}
     </button>
     <button *ngIf="dialogModel.showOk" click="close()" mat-dialog-close class="btn btn-primary ml-2">
         {{'DIALOG.OK' | translate}}
     </button>
-</div>
+</div>

src/app/shared/components/delete-dialog/delete-dialog.service.ts

@@ -20,7 +20,9 @@ export class DeleteDialogService {
     showAccept = true,
     showCancel = true,
     showOk = false,
-    infoTitle = ''
+    infoTitle = '',
+    acceptText?: string,
+    cancelText?: string
   ): Observable<any> {
     return new Observable((observer) => {
       const dialog = this.dialog.open(DeleteDialogComponent, {
@@ -30,6 +32,8 @@ export class DeleteDialogService {
           showAccept,
           showCancel,
           message: message ? message : 'Er du sikker på at du vil slette?',
+          acceptText,
+          cancelText
         },
       });
 

src/app/shared/components/top-bar/top-bar.component.html

@@ -31,7 +31,7 @@ <h3 class="pl-md-3">{{title || staticTitle}}</h3>
 
             <button *ngIf="dtRouterLink && dtRouterLink != ''" [routerLink]="dtRouterLink" routerLinkActive="active"
             class="btn btn-primary mr-1" type="button" [attr.aria-label]="dtLabel">{{dtLabel}}</button>
-            
+
             <div class="btn-group float-md-right dropdown" *ngIf="dropDownButton && addDetailDowndown === true && canEdit">
               <button type="button" id="dropdown-{{ data.name }}" class="btn btn-primary dropdown-toggle"
                 data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
@@ -42,6 +42,11 @@ <h3 class="pl-md-3">{{title || staticTitle}}</h3>
                   <a [routerLink]="dropDownButton.editRouterLink">{{ 'TOPBAR.DROPDOWN.EDIT' | translate }}
                   </a>
                 </li>
+                <ng-container *ngIf="dropDownButton.extraOptions?.length > 0">
+                  <li class="dropdown-item" *ngFor="let option of dropDownButton.extraOptions">
+                    <a (click)="onClickExtraDropdownOption(option.id)">{{ option.label }}</a>
+                  </li>
+                </ng-container>
                 <li class="dropdown-item" *ngIf="dropDownButton.isErasable === true">
                   <a (click)="onClickDelete()">{{ 'TOPBAR.DROPDOWN.DELETE' | translate }}
                   </a>
@@ -71,4 +76,4 @@ <h3 class="pl-md-3">{{title || staticTitle}}</h3>
     </div>
 
 
-  </div>
+  </div>

src/app/shared/components/top-bar/top-bar.component.ts

@@ -48,6 +48,7 @@ export class TopBarComponent implements OnInit {
     @Output() updatePageLimit = new EventEmitter();
 
     @Output() deleteSelectedInDropdown = new EventEmitter();
+    @Output() extraDropdownOptions = new EventEmitter();
     @Input() addDetailDowndown: boolean;
     @Input() dropDownButton: DropdownButton;
     public canEdit = false;
@@ -107,4 +108,8 @@ export class TopBarComponent implements OnInit {
     onClickDelete() {
         this.deleteSelectedInDropdown.emit();
     }
+
+    onClickExtraDropdownOption(id: string) {
+      this.extraDropdownOptions.emit(id);
+    }
 }

src/app/shared/models/dialog.model.ts

@@ -4,4 +4,6 @@ export class DialogModel {
     showAccept = true;
     showCancel = true;
     message: string;
+    acceptText: string;
+    cancelText: string;
 }

src/app/shared/models/dropdown-button.model.ts

@@ -1,5 +1,20 @@
+import { PermissionType } from "@app/admin/permission/permission.model";
+
+export interface ExtraDropdownOption {
+  id: string | number;
+  label: string;
+}
+
 export interface DropdownButton {
     label: string;
     editRouterLink: string | string[];
     isErasable: boolean;
+    /**
+     * Show extra dropdown options
+     *
+     * **NB**: This interface does not scale well. It doesn't work for generic options and it's used in many components.
+     *
+     * By representing any new options in a separate property, this avoids changes in all dependent components and thus merge conflicts.
+     */
+    extraOptions?: ExtraDropdownOption[];
 }

src/assets/i18n/da.json

@@ -361,6 +361,8 @@
     "DELETE": "Slet",
     "EDIT": "Redigér",
     "SHOW-OPTIONS": "Håndter IoT enhed",
+    "BATTERY-ERROR-MESSAGE":"Den valgte teknologi understøtter ikke batteristatus",
+    "RESET-API-KEY": "Nulstil API nøgle",
     "NOT-SUPPORTED": "Ikke understøttet",
     "NOT-SUPPORTED-SHORT": "-",
     "NOT-AVAILABLE": "N/A"
@@ -760,7 +762,11 @@
     "NOCOMMENTONLOCATION": "Ingen beskrivelse af placeringen er angivet",
     "GENERIC_HTTP": {
       "APIKEY": "API kald",
-      "INSTRUCTIONS": "Du kalder denne url:"
+      "INSTRUCTIONS": "Du kalder denne url:",
+      "RESET-API-KEY": {
+        "BODY": "Advarsel! Nulstilling vil stoppe modtagelse af data på den eksisterende API Key. Vil du fortsætte?",
+        "YESRESET": "Ja, nulstil"
+      }
     },
     "LORAWANSETUP": "LoRaWAN specifik opsætning",
     "LATEST-DATAPACKAGE": "Seneste datapakke sendt fra enheden:",