Merge pull request #9020 from rusikv/feature/timeseries-api-improvements-ui

Refactoring of delete timeseries ui

ui-ngx/src/app/modules/home/components/attribute/attribute-table.component.html

@@ -85,20 +85,12 @@
                 'attribute.selected-telemetry' : 'attribute.selected-attributes') | translate:{count: dataSource.selection.selected.length} }}
         </span>
         <span fxFlex></span>
-        <button [fxShow]="!isClientSideTelemetryTypeMap.get(attributeScope)"
+        <button [fxShow]="attributeScope !== attributeScopeTypes.CLIENT_SCOPE"
                 class="button-widget-action"
                 mat-icon-button [disabled]="isLoading$ | async"
                 matTooltip="{{ 'action.delete' | translate }}"
                 matTooltipPosition="above"
-                (click)="deleteAttributes($event)">
+                (click)="deleteTelemetry($event)">
-          <mat-icon>delete</mat-icon>
-        </button>
-        <button [fxShow]="attributeScope === latestTelemetryTypes.LATEST_TELEMETRY"
-                class="button-widget-action"
-                mat-icon-button [disabled]="isLoading$ | async"
-                matTooltip="{{ 'action.delete' | translate }}"
-                matTooltipPosition="above"
-                (click)="deleteTimeseries($event)">
           <mat-icon>delete</mat-icon>
         </button>
         <button mat-raised-button color="accent"

ui-ngx/src/app/modules/home/components/attribute/attribute-table.component.ts

@@ -104,6 +104,7 @@ export class AttributeTableComponent extends PageComponent implements AfterViewI
   isClientSideTelemetryTypeMap = isClientSideTelemetryType;
 
   latestTelemetryTypes = LatestTelemetry;
+  attributeScopeTypes = AttributeScope;
 
   mode: 'default' | 'widget' = 'default';
 
@@ -423,29 +424,29 @@ export class AttributeTableComponent extends PageComponent implements AfterViewI
       this.viewContainerRef, injector));
     componentRef.onDestroy(() => {
       if (componentRef.instance.result !== null) {
-        const strategy = componentRef.instance.result;
+        const result = componentRef.instance.result;
         const deleteTimeseries = attribute ? [attribute]: this.dataSource.selection.selected;
         let deleteAllDataForKeys = false;
         let rewriteLatestIfDeleted = false;
         let startTs = null;
         let endTs = null;
         let deleteLatest = true;
-        if (strategy === TimeseriesDeleteStrategy.DELETE_ALL_DATA) {
+        if (result.strategy === TimeseriesDeleteStrategy.DELETE_ALL_DATA) {
           deleteAllDataForKeys = true;
         }
-        if (strategy === TimeseriesDeleteStrategy.DELETE_ALL_DATA_EXCEPT_LATEST_VALUE) {
+        if (result.strategy === TimeseriesDeleteStrategy.DELETE_ALL_DATA_EXCEPT_LATEST_VALUE) {
           deleteAllDataForKeys = true;
           deleteLatest = false;
         }
-        if (strategy === TimeseriesDeleteStrategy.DELETE_LATEST_VALUE) {
+        if (result.strategy === TimeseriesDeleteStrategy.DELETE_LATEST_VALUE) {
-          rewriteLatestIfDeleted = componentRef.instance.rewriteLatestIfDeleted;
+          rewriteLatestIfDeleted = result.rewriteLatest;
           startTs = deleteTimeseries[0].lastUpdateTs;
           endTs = startTs + 1;
         }
-        if (strategy === TimeseriesDeleteStrategy.DELETE_ALL_DATA_FOR_TIME_PERIOD) {
+        if (result.strategy === TimeseriesDeleteStrategy.DELETE_ALL_DATA_FOR_TIME_PERIOD) {
-          startTs = componentRef.instance.startDateTime.getTime();
+          startTs = result.startDateTime.getTime();
-          endTs = componentRef.instance.endDateTime.getTime();
+          endTs = result.endDateTime.getTime();
-          rewriteLatestIfDeleted = componentRef.instance.rewriteLatestIfDeleted;
+          rewriteLatestIfDeleted = result.rewriteLatest;
         }
         this.attributeService.deleteEntityTimeseries(this.entityIdValue, deleteTimeseries, deleteAllDataForKeys,
           startTs, endTs, rewriteLatestIfDeleted, deleteLatest).subscribe(() => this.reloadAttributes());
@@ -477,6 +478,14 @@ export class AttributeTableComponent extends PageComponent implements AfterViewI
     }
   }
 
+  deleteTelemetry($event: Event) {
+    if (this.attributeScope === this.latestTelemetryTypes.LATEST_TELEMETRY) {
+      this.deleteTimeseries($event);
+    } else {
+      this.deleteAttributes($event);
+    }
+  }
+
   enterWidgetMode() {
     this.mode = 'widget';
     this.widgetsList = [];

ui-ngx/src/app/modules/home/components/attribute/delete-timeseries-panel.component.html

@@ -16,20 +16,20 @@
 
 -->
 
-<div class="mat-elevation-z1" style="max-width: 488px">
+<form [formGroup]="deleteTimeseriesFormGroup" style="max-width: 488px">
   <mat-toolbar>
     <h2>{{ "attribute.delete-timeseries.delete-strategy" | translate }}</h2>
     <span fxFlex></span>
     <button mat-icon-button
-            (click)="cancel()"
+            type="button"
-            type="button">
+            (click)="cancel()">
       <mat-icon class="material-icons">close</mat-icon>
     </button>
   </mat-toolbar>
   <div style="padding: 16px; min-height: 188px">
     <mat-form-field fxFlex class="mat-block">
       <mat-label translate>attribute.delete-timeseries.strategy</mat-label>
-      <mat-select [(ngModel)]="strategy">
+      <mat-select formControlName="strategy">
         <mat-option *ngFor="let strategy of strategiesTranslationsMap.keys()" [value]="strategy">
           {{ strategiesTranslationsMap.get(strategy) | translate }}
         </mat-option>
@@ -41,25 +41,24 @@
           <mat-label translate>attribute.delete-timeseries.start-time</mat-label>
           <mat-datetimepicker-toggle [for]="startDateTimePicker" matPrefix></mat-datetimepicker-toggle>
           <mat-datetimepicker #startDateTimePicker type="datetime" openOnFocus="true"></mat-datetimepicker>
-          <input required matInput [(ngModel)]="startDateTime" [matDatetimepicker]="startDateTimePicker"
+          <input required matInput formControlName="startDateTime" [matDatetimepicker]="startDateTimePicker">
-                 (ngModelChange)="onStartDateTimeChange($event)">
         </mat-form-field>
         <mat-form-field class="mat-block">
           <mat-label translate>attribute.delete-timeseries.ends-on</mat-label>
           <mat-datetimepicker-toggle [for]="endDatePicker" matPrefix></mat-datetimepicker-toggle>
           <mat-datetimepicker #endDatePicker type="datetime" openOnFocus="true"></mat-datetimepicker>
-          <input required matInput [(ngModel)]="endDateTime" [matDatetimepicker]="endDatePicker"
+          <input required matInput formControlName="endDateTime" [matDatetimepicker]="endDatePicker">
-                 (ngModelChange)="onEndDateTimeChange($event)">
         </mat-form-field>
       </div>
     </div>
     <div *ngIf="isPeriodStrategy() || isDeleteLatestStrategy()">
-      <mat-slide-toggle [(ngModel)]="rewriteLatestIfDeleted">
+      <mat-slide-toggle formControlName="rewriteLatest">
         {{ "attribute.delete-timeseries.rewrite-latest-value" | translate }}
       </mat-slide-toggle>
     </div>
   </div>
-  <div fxLayout="row" class="tb-panel-actions">
+</form>
+<div fxLayout="row" class="tb-panel-actions">
   <span fxFlex></span>
   <button mat-button color="primary"
           type="button"
@@ -67,10 +66,9 @@
     {{ 'action.cancel' | translate }}
   </button>
   <button mat-button mat-raised-button color="primary"
-            type="submit"
+          type="button"
-            (click)="delete()">
+          (click)="delete()"
+          [disabled]="deleteTimeseriesFormGroup.invalid">
     {{ 'action.apply' | translate }}
   </button>
-  </div>
 </div>
-

ui-ngx/src/app/modules/home/components/attribute/delete-timeseries-panel.component.scss

@@ -22,7 +22,7 @@
 }
 
 :host ::ng-deep{
-  div .mat-toolbar {
+  form .mat-toolbar {
     background: none;
   }
 }

ui-ngx/src/app/modules/home/components/attribute/delete-timeseries-panel.component.ts

@@ -14,13 +14,16 @@
 /// limitations under the License.
 ///
 
-import { Component, Inject, InjectionToken, OnInit } from '@angular/core';
+import { Component, Inject, InjectionToken, OnDestroy, OnInit } from '@angular/core';
 import { OverlayRef } from '@angular/cdk/overlay';
 import {
   TimeseriesDeleteStrategy,
   timeseriesDeleteStrategyTranslations
 } from '@shared/models/telemetry/telemetry.models';
 import { MINUTE } from '@shared/models/time/time.models';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
 
 export const DELETE_TIMESERIES_PANEL_DATA = new InjectionToken<any>('DeleteTimeseriesPanelData');
 
@@ -28,22 +31,23 @@ export interface DeleteTimeseriesPanelData {
   isMultipleDeletion: boolean;
 }
 
+export interface DeleteTimeseriesPanelResult {
+  strategy: TimeseriesDeleteStrategy;
+  startDateTime: Date;
+  endDateTime: Date;
+  rewriteLatest: boolean;
+}
+
 @Component({
   selector: 'tb-delete-timeseries-panel',
   templateUrl: './delete-timeseries-panel.component.html',
   styleUrls: ['./delete-timeseries-panel.component.scss']
 })
-export class DeleteTimeseriesPanelComponent implements OnInit {
+export class DeleteTimeseriesPanelComponent implements OnInit, OnDestroy {
 
-  strategy: string = TimeseriesDeleteStrategy.DELETE_ALL_DATA;
+  deleteTimeseriesFormGroup: FormGroup;
 
-  result: string = null;
+  result: DeleteTimeseriesPanelResult = null;
-
-  startDateTime: Date;
-
-  endDateTime: Date;
-
-  rewriteLatestIfDeleted: boolean = true;
 
   strategiesTranslationsMap = timeseriesDeleteStrategyTranslations;
 
@@ -52,24 +56,60 @@ export class DeleteTimeseriesPanelComponent implements OnInit {
     TimeseriesDeleteStrategy.DELETE_ALL_DATA_EXCEPT_LATEST_VALUE
   ];
 
+  private destroy$ = new Subject<void>();
+
   constructor(@Inject(DELETE_TIMESERIES_PANEL_DATA) public data: DeleteTimeseriesPanelData,
-              public overlayRef: OverlayRef) { }
+              public overlayRef: OverlayRef,
+              public fb: FormBuilder) { }
 
   ngOnInit(): void {
-    let today = new Date();
+    const today = new Date();
-    this.startDateTime = new Date(today.getFullYear(), today.getMonth() - 1, today.getDate());
-    this.endDateTime = today;
     if (this.data.isMultipleDeletion) {
       this.strategiesTranslationsMap = new Map(Array.from(this.strategiesTranslationsMap.entries())
         .filter(([strategy]) => {
           return this.multipleDeletionStrategies.includes(strategy);
       }))
     }
+    this.deleteTimeseriesFormGroup = this.fb.group({
+      strategy: [TimeseriesDeleteStrategy.DELETE_ALL_DATA],
+      startDateTime: [
+        { value: new Date(today.getFullYear(), today.getMonth() - 1, today.getDate()), disabled: true },
+        [Validators.required]
+      ],
+      endDateTime: [{ value: today, disabled: true }, [Validators.required]],
+      rewriteLatest: [true]
+    })
+    this.deleteTimeseriesFormGroup.get('strategy').valueChanges.pipe(
+      takeUntil(this.destroy$)
+    ).subscribe(value => {
+      if (value === TimeseriesDeleteStrategy.DELETE_ALL_DATA_FOR_TIME_PERIOD) {
+        this.deleteTimeseriesFormGroup.get('startDateTime').enable({onlySelf: true, emitEvent: false});
+        this.deleteTimeseriesFormGroup.get('endDateTime').enable({onlySelf: true, emitEvent: false});
+      } else {
+        this.deleteTimeseriesFormGroup.get('startDateTime').disable({onlySelf: true, emitEvent: false});
+        this.deleteTimeseriesFormGroup.get('endDateTime').disable({onlySelf: true, emitEvent: false});
+      }
+    })
+    this.deleteTimeseriesFormGroup.get('startDateTime').valueChanges.pipe(
+      takeUntil(this.destroy$)
+    ).subscribe(value => this.onStartDateTimeChange(value));
+    this.deleteTimeseriesFormGroup.get('endDateTime').valueChanges.pipe(
+      takeUntil(this.destroy$)
+    ).subscribe(value => this.onEndDateTimeChange(value));
+  }
+
+  ngOnDestroy(): void {
+    this.destroy$.next();
+    this.destroy$.complete();
   }
 
   delete(): void {
-    this.result = this.strategy;
+    if (this.deleteTimeseriesFormGroup.valid) {
+      this.result = this.deleteTimeseriesFormGroup.value;
       this.overlayRef.dispose();
+    } else {
+      this.deleteTimeseriesFormGroup.markAllAsTouched();
+    }
   }
 
   cancel(): void {
@@ -77,28 +117,36 @@ export class DeleteTimeseriesPanelComponent implements OnInit {
   }
 
   isPeriodStrategy(): boolean {
-    return this.strategy === TimeseriesDeleteStrategy.DELETE_ALL_DATA_FOR_TIME_PERIOD;
+    return this.deleteTimeseriesFormGroup.get('strategy').value === TimeseriesDeleteStrategy.DELETE_ALL_DATA_FOR_TIME_PERIOD;
   }
 
   isDeleteLatestStrategy(): boolean {
-    return this.strategy === TimeseriesDeleteStrategy.DELETE_LATEST_VALUE;
+    return this.deleteTimeseriesFormGroup.get('strategy').value === TimeseriesDeleteStrategy.DELETE_LATEST_VALUE;
   }
 
   onStartDateTimeChange(newStartDateTime: Date) {
-    const endDateTimeTs = this.endDateTime.getTime();
+    if (newStartDateTime) {
+      const endDateTimeTs = this.deleteTimeseriesFormGroup.get('endDateTime').value.getTime();
       if (newStartDateTime.getTime() >= endDateTimeTs) {
-      this.startDateTime = new Date(endDateTimeTs - MINUTE);
+        this.deleteTimeseriesFormGroup.get('startDateTime')
+          .patchValue(new Date(endDateTimeTs - MINUTE), {onlySelf: true, emitEvent: false});
       } else {
-      this.startDateTime = newStartDateTime;
+        this.deleteTimeseriesFormGroup.get('startDateTime')
+          .patchValue(newStartDateTime, {onlySelf: true, emitEvent: false});
+      }
     }
   }
 
   onEndDateTimeChange(newEndDateTime: Date) {
-    const startDateTimeTs = this.startDateTime.getTime();
+    if (newEndDateTime) {
+      const startDateTimeTs = this.deleteTimeseriesFormGroup.get('startDateTime').value.getTime();
       if (newEndDateTime.getTime() <= startDateTimeTs) {
-      this.endDateTime = new Date(startDateTimeTs + MINUTE);
+        this.deleteTimeseriesFormGroup.get('endDateTime')
+          .patchValue(new Date(startDateTimeTs + MINUTE), {onlySelf: true, emitEvent: false});
       } else {
-      this.endDateTime = newEndDateTime;
+        this.deleteTimeseriesFormGroup.get('endDateTime')
+          .patchValue(newEndDateTime, {onlySelf: true, emitEvent: false});
+      }
     }
   }
 }