UI: Refactoring delete telemetry

3 years ago · a85f9fbabc
6 changed files with 114 additions and 90 deletions
--- a/ui-ngx/src/app/core/http/attribute.service.ts
+++ b/ui-ngx/src/app/core/http/attribute.service.ts
@ -53,8 +53,16 @@ export class AttributeService {
                                startTs?: number, endTs?: number, rewriteLatestIfDeleted = false, deleteLatest = true,
                                config?: RequestConfig): Observable<any> {
    const keys = timeseries.map(attribute => encodeURIComponent(attribute.key)).join(',');
-    let url = `/api/plugins/telemetry/${entityId.entityType}/${entityId.id}/timeseries/delete` +
-      `?keys=${keys}&deleteAllDataForKeys=${deleteAllDataForKeys}&rewriteLatestIfDeleted=${rewriteLatestIfDeleted}&deleteLatest=${deleteLatest}`;
+    let url = `/api/plugins/telemetry/${entityId.entityType}/${entityId.id}/timeseries/delete?keys=${keys}`;
+    if (isDefinedAndNotNull(deleteAllDataForKeys)) {
+      url += `&deleteAllDataForKeys=${deleteAllDataForKeys}`;
+    }
+    if (isDefinedAndNotNull(rewriteLatestIfDeleted)) {
+      url += `&rewriteLatestIfDeleted=${rewriteLatestIfDeleted}`;
+    }
+    if (isDefinedAndNotNull(deleteLatest)) {
+      url += `&deleteLatest=${deleteLatest}`;
+    }
    if (isDefinedAndNotNull(startTs)) {
      url += `&startTs=${startTs}`;
    }
--- a/ui-ngx/src/app/modules/home/components/attribute/attribute-table.component.html
+++ b/ui-ngx/src/app/modules/home/components/attribute/attribute-table.component.html
@ -198,7 +198,7 @@
              <span [fxShow]="!isClientSideTelemetryTypeMap.get(attributeScope)">
                <mat-icon>edit</mat-icon>
              </span>
-              <button mat-icon-button [fxShow]="attributeScope === latestTelemetryTypes.LATEST_TELEMETRY"
+              <button mat-icon-button *ngIf="attributeScope === latestTelemetryTypes.LATEST_TELEMETRY"
                      (click)="deleteTimeseries($event, attribute)">
                <mat-icon>delete</mat-icon>
              </button>
--- a/ui-ngx/src/app/modules/home/components/attribute/attribute-table.component.ts
+++ b/ui-ngx/src/app/modules/home/components/attribute/attribute-table.component.ts
@ -38,7 +38,7 @@ import { TranslateService } from '@ngx-translate/core';
 import { MatDialog } from '@angular/material/dialog';
 import { DialogService } from '@core/services/dialog.service';
 import { Direction, SortOrder } from '@shared/models/page/sort-order';
-import { fromEvent, merge, Observable } from 'rxjs';
+import { fromEvent, merge } from 'rxjs';
 import { debounceTime, distinctUntilChanged, tap } from 'rxjs/operators';
 import { EntityId } from '@shared/models/id/entity-id';
 import {
@ -48,7 +48,8 @@ import {
  isClientSideTelemetryType,
  LatestTelemetry,
  TelemetryType,
-  telemetryTypeTranslations, TimeseriesDeleteStrategy,
+  telemetryTypeTranslations,
+  TimeseriesDeleteStrategy,
  toTelemetryType
 } from '@shared/models/telemetry/telemetry.models';
 import { AttributeDatasource } from '@home/models/datasource/attribute-datasource';
@ -88,7 +89,8 @@ import { hidePageSizePixelValue } from '@shared/models/constants';
 import { ResizeObserver } from '@juggle/resize-observer';
 import {
  DELETE_TIMESERIES_PANEL_DATA,
-  DeleteTimeseriesPanelComponent, DeleteTimeseriesPanelData
+  DeleteTimeseriesPanelComponent,
+  DeleteTimeseriesPanelData
 } from '@home/components/attribute/delete-timeseries-panel.component';


@ -383,15 +385,19 @@ export class AttributeTableComponent extends PageComponent implements AfterViewI
    });
  }

-  deleteTimeseries($event: Event, attribute?: AttributeData) {
+  deleteTimeseries($event: Event, telemetry?: AttributeData) {
    if ($event) {
      $event.stopPropagation();
    }
-    const isMultipleDeletion = isUndefinedOrNull(attribute) && this.dataSource.selection.selected.length > 1;
+    const isMultipleDeletion = isUndefinedOrNull(telemetry) && this.dataSource.selection.selected.length > 1;
    const target = $event.target || $event.srcElement || $event.currentTarget;
-    const config = new OverlayConfig();
-    config.backdropClass = 'cdk-overlay-transparent-backdrop';
-    config.hasBackdrop = true;
+    const config = new OverlayConfig({
+      panelClass: 'tb-filter-panel',
+      backdropClass: 'cdk-overlay-transparent-backdrop',
+      hasBackdrop: true,
+      maxWidth: 488,
+      width: '100%'
+    });
    const connectedPosition: ConnectedPosition = {
      originX: 'start',
      originY: 'top',
@ -400,8 +406,6 @@ export class AttributeTableComponent extends PageComponent implements AfterViewI
    };
    config.positionStrategy = this.overlay.position().flexibleConnectedTo(target as HTMLElement)
      .withPositions([connectedPosition]);
-    config.maxWidth = '488px';
-    config.width = '100%';
    const overlayRef = this.overlay.create(config);
    overlayRef.backdropClick().subscribe(() => {
      overlayRef.dispose();
@ -411,7 +415,7 @@ export class AttributeTableComponent extends PageComponent implements AfterViewI
      {
        provide: DELETE_TIMESERIES_PANEL_DATA,
        useValue: {
-          isMultipleDeletion: isMultipleDeletion
+          isMultipleDeletion
        } as DeleteTimeseriesPanelData
      },
      {
@ -425,31 +429,34 @@ export class AttributeTableComponent extends PageComponent implements AfterViewI
    componentRef.onDestroy(() => {
      if (componentRef.instance.result !== null) {
        const result = componentRef.instance.result;
-        const deleteTimeseries = attribute ? [attribute]: this.dataSource.selection.selected;
+        const deleteTimeseries = telemetry ? [telemetry]: this.dataSource.selection.selected;
        let deleteAllDataForKeys = false;
        let rewriteLatestIfDeleted = false;
        let startTs = null;
        let endTs = null;
        let deleteLatest = true;
-        if (result.strategy === TimeseriesDeleteStrategy.DELETE_ALL_DATA) {
-          deleteAllDataForKeys = true;
-        }
-        if (result.strategy === TimeseriesDeleteStrategy.DELETE_ALL_DATA_EXCEPT_LATEST_VALUE) {
-          deleteAllDataForKeys = true;
-          deleteLatest = false;
-        }
-        if (result.strategy === TimeseriesDeleteStrategy.DELETE_LATEST_VALUE) {
-          rewriteLatestIfDeleted = result.rewriteLatest;
-          startTs = deleteTimeseries[0].lastUpdateTs;
-          endTs = startTs + 1;
-        }
-        if (result.strategy === TimeseriesDeleteStrategy.DELETE_ALL_DATA_FOR_TIME_PERIOD) {
-          startTs = result.startDateTime.getTime();
-          endTs = result.endDateTime.getTime();
-          rewriteLatestIfDeleted = result.rewriteLatest;
+        switch (result.strategy) {
+          case TimeseriesDeleteStrategy.DELETE_ALL_DATA:
+            deleteAllDataForKeys = true;
+            break;
+          case TimeseriesDeleteStrategy.DELETE_ALL_DATA_EXCEPT_LATEST_VALUE:
+            deleteAllDataForKeys = true;
+            deleteLatest = false;
+            break;
+          case TimeseriesDeleteStrategy.DELETE_LATEST_VALUE:
+            rewriteLatestIfDeleted = result.rewriteLatest;
+            startTs = deleteTimeseries[0].lastUpdateTs;
+            endTs = startTs + 1;
+            break;
+          case TimeseriesDeleteStrategy.DELETE_ALL_DATA_FOR_TIME_PERIOD:
+            startTs = result.startDateTime.getTime();
+            endTs = result.endDateTime.getTime();
+            rewriteLatestIfDeleted = result.rewriteLatest;
+            break;
        }
        this.attributeService.deleteEntityTimeseries(this.entityIdValue, deleteTimeseries, deleteAllDataForKeys,
-          startTs, endTs, rewriteLatestIfDeleted, deleteLatest).subscribe(() => this.reloadAttributes());
+                                                      startTs, endTs, rewriteLatestIfDeleted, deleteLatest)
+          .subscribe(() => this.reloadAttributes());
      }
    });
  }
--- a/ui-ngx/src/app/modules/home/components/attribute/delete-timeseries-panel.component.html
+++ b/ui-ngx/src/app/modules/home/components/attribute/delete-timeseries-panel.component.html
@ -16,47 +16,41 @@

 -->

-<form [formGroup]="deleteTimeseriesFormGroup" style="max-width: 488px">
-  <mat-toolbar>
-    <h2>{{ "attribute.delete-timeseries.delete-strategy" | translate }}</h2>
-    <span fxFlex></span>
-    <button mat-icon-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 formControlName="strategy">
-        <mat-option *ngFor="let strategy of strategiesTranslationsMap.keys()" [value]="strategy">
-          {{ strategiesTranslationsMap.get(strategy) | translate }}
-        </mat-option>
-      </mat-select>
+<mat-toolbar>
+  <h2>{{ "attribute.delete-timeseries.delete-strategy" | translate }}</h2>
+  <span fxFlex></span>
+  <button mat-icon-button
+          type="button"
+          (click)="cancel()">
+    <mat-icon class="material-icons">close</mat-icon>
+  </button>
+</mat-toolbar>
+<form [formGroup]="deleteTimeseriesFormGroup" class="mat-content mat-padding tb-form-settings">
+  <mat-form-field class="mat-block" subscriptSizing="dynamic">
+    <mat-label translate>attribute.delete-timeseries.strategy</mat-label>
+    <mat-select formControlName="strategy">
+      <mat-option *ngFor="let strategy of strategiesTranslationsMap.keys()" [value]="strategy">
+        {{ strategiesTranslationsMap.get(strategy) | translate }}
+      </mat-option>
+    </mat-select>
+  </mat-form-field>
+  <div *ngIf="isPeriodStrategy()" class="tb-select-interval">
+    <mat-form-field class="mat-block" subscriptSizing="dynamic">
+      <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 formControlName="startDateTime" [matDatetimepicker]="startDateTimePicker">
+    </mat-form-field>
+    <mat-form-field class="mat-block" subscriptSizing="dynamic">
+      <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 formControlName="endDateTime" [matDatetimepicker]="endDatePicker">
    </mat-form-field>
-    <div *ngIf="isPeriodStrategy()">
-      <div fxLayout="row" fxLayoutGap="22px" fxLayout.xs="column" fxLayoutGap.xs="8px">
-        <mat-form-field class="mat-block">
-          <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 formControlName="startDateTime" [matDatetimepicker]="startDateTimePicker">
-        </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 formControlName="endDateTime" [matDatetimepicker]="endDatePicker">
-        </mat-form-field>
-      </div>
-    </div>
-    <div *ngIf="isPeriodStrategy() || isDeleteLatestStrategy()">
-      <mat-slide-toggle formControlName="rewriteLatest">
-        {{ "attribute.delete-timeseries.rewrite-latest-value" | translate }}
-      </mat-slide-toggle>
-    </div>
  </div>
+  <mat-slide-toggle class="tb-slide-toggle" formControlName="rewriteLatest" *ngIf="isPeriodStrategy() || isDeleteLatestStrategy()">
+    {{ "attribute.delete-timeseries.rewrite-latest-value" | translate }}
+  </mat-slide-toggle>
 </form>
 <div fxLayout="row" class="tb-panel-actions">
  <span fxFlex></span>
--- a/ui-ngx/src/app/modules/home/components/attribute/delete-timeseries-panel.component.scss
+++ b/ui-ngx/src/app/modules/home/components/attribute/delete-timeseries-panel.component.scss
@ -13,16 +13,32 @@
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
+@import '../../../../../scss/constants';

 :host {
  width: 100%;
-  background-color: #fff;
-  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.3), 0px 2px 6px 2px rgba(0, 0, 0, 0.15);
-  border-radius: 4px;
-}

-:host ::ng-deep{
-  form .mat-toolbar {
+  .mat-toolbar {
    background: none;
  }
+
+  .tb-form-settings {
+    flex-direction: column;
+    gap: 16px;
+    padding-top: 0;
+  }
+
+  .tb-select-interval {
+    display: flex;
+    flex-direction: row;
+    gap: 16px;
+    @media #{$mat-xs} {
+      flex-direction: column;
+      gap: 0;
+    }
+  }
+
+  .tb-slide-toggle {
+    margin-bottom: 8px;
+  }
 }
--- a/ui-ngx/src/app/modules/home/components/attribute/delete-timeseries-panel.component.ts
+++ b/ui-ngx/src/app/modules/home/components/attribute/delete-timeseries-panel.component.ts
@ -51,34 +51,33 @@ export class DeleteTimeseriesPanelComponent implements OnInit, OnDestroy {

  strategiesTranslationsMap = timeseriesDeleteStrategyTranslations;

-  multipleDeletionStrategies = [
+  private multipleDeletionStrategies = new Set<TimeseriesDeleteStrategy>([
    TimeseriesDeleteStrategy.DELETE_ALL_DATA,
    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 fb: FormBuilder) { }
+  constructor(@Inject(DELETE_TIMESERIES_PANEL_DATA) private data: DeleteTimeseriesPanelData,
+              private overlayRef: OverlayRef,
+              private fb: FormBuilder) { }

  ngOnInit(): void {
    const today = new Date();
    if (this.data.isMultipleDeletion) {
-      this.strategiesTranslationsMap = new Map(Array.from(this.strategiesTranslationsMap.entries())
-        .filter(([strategy]) => {
-          return this.multipleDeletionStrategies.includes(strategy);
-      }))
+      this.strategiesTranslationsMap = new Map(Array.from(this.strategiesTranslationsMap)
+        .filter(([strategy]) => this.multipleDeletionStrategies.has(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]
+        Validators.required
      ],
-      endDateTime: [{ value: today, disabled: true }, [Validators.required]],
+      endDateTime: [{ value: today, disabled: true }, Validators.required],
      rewriteLatest: [true]
    })
+
    this.deleteTimeseriesFormGroup.get('strategy').valueChanges.pipe(
      takeUntil(this.destroy$)
    ).subscribe(value => {
@ -124,7 +123,7 @@ export class DeleteTimeseriesPanelComponent implements OnInit, OnDestroy {
    return this.deleteTimeseriesFormGroup.get('strategy').value === TimeseriesDeleteStrategy.DELETE_LATEST_VALUE;
  }

-  onStartDateTimeChange(newStartDateTime: Date) {
+  private onStartDateTimeChange(newStartDateTime: Date) {
    if (newStartDateTime) {
      const endDateTimeTs = this.deleteTimeseriesFormGroup.get('endDateTime').value.getTime();
      if (newStartDateTime.getTime() >= endDateTimeTs) {
@ -137,7 +136,7 @@ export class DeleteTimeseriesPanelComponent implements OnInit, OnDestroy {
    }
  }

-  onEndDateTimeChange(newEndDateTime: Date) {
+  private onEndDateTimeChange(newEndDateTime: Date) {
    if (newEndDateTime) {
      const startDateTimeTs = this.deleteTimeseriesFormGroup.get('startDateTime').value.getTime();
      if (newEndDateTime.getTime() <= startDateTimeTs) {