UI: Handle error on apply preview upload and download

ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol.component.ts

@@ -253,43 +253,47 @@ export class ScadaSymbolComponent extends PageComponent
 
   enterPreviewMode() {
     this.previewMetadata = this.scadaSymbolFormGroup.get('metadata').value;
-    this.symbolData.scadaSymbolContent = this.prepareScadaSymbolContent(this.previewMetadata);
-    this.previewScadaSymbolObjectSettings = {
-      behavior: {},
-      properties: {}
-    };
-    this.scadaPreviewFormGroup.patchValue({
-      scadaSymbolObjectSettings: this.previewScadaSymbolObjectSettings
-    }, {emitEvent: false});
-    this.scadaPreviewFormGroup.markAsPristine();
-    const settings: ScadaSymbolWidgetSettings = {...scadaSymbolWidgetDefaultSettings,
-      ...{
+    try {
+      this.symbolData.scadaSymbolContent = this.prepareScadaSymbolContent(this.previewMetadata);
+      this.previewScadaSymbolObjectSettings = {
+        behavior: {},
+        properties: {}
+      };
+      this.scadaPreviewFormGroup.patchValue({
+        scadaSymbolObjectSettings: this.previewScadaSymbolObjectSettings
+      }, {emitEvent: false});
+      this.scadaPreviewFormGroup.markAsPristine();
+      const settings: ScadaSymbolWidgetSettings = {...scadaSymbolWidgetDefaultSettings,
+        ...{
           simulated: true,
           scadaSymbolUrl: null,
           scadaSymbolContent: this.symbolData.scadaSymbolContent,
           scadaSymbolObjectSettings: this.previewScadaSymbolObjectSettings,
           padding: '0',
           background: colorBackground('rgba(0,0,0,0)')
-         }
-    };
-    this.previewWidget = {
-      typeFullFqn: 'system.scada_symbol',
-      type: widgetType.rpc,
-      sizeX: this.previewMetadata.widgetSizeX || 3,
-      sizeY: this.previewMetadata.widgetSizeY || 3,
-      row: 0,
-      col: 0,
-      config: {
-        settings,
-        showTitle: false,
-        dropShadow: false,
-        padding: '0',
-        margin: '0',
-        backgroundColor: 'rgba(0,0,0,0)'
-      }
-    };
-    this.previewWidgets = [this.previewWidget];
-    this.previewMode = true;
+        }
+      };
+      this.previewWidget = {
+        typeFullFqn: 'system.scada_symbol',
+        type: widgetType.rpc,
+        sizeX: this.previewMetadata.widgetSizeX || 3,
+        sizeY: this.previewMetadata.widgetSizeY || 3,
+        row: 0,
+        col: 0,
+        config: {
+          settings,
+          showTitle: false,
+          dropShadow: false,
+          padding: '0',
+          margin: '0',
+          backgroundColor: 'rgba(0,0,0,0)'
+        }
+      };
+      this.previewWidgets = [this.previewWidget];
+      this.previewMode = true;
+    } catch (e) {
+      this.store.dispatch(new ActionNotificationShow({ message: e.message, type: 'error' }));
+    }
   }
 
   exitPreviewMode() {
@@ -379,19 +383,23 @@ export class ScadaSymbolComponent extends PageComponent
       metadata = parseScadaSymbolMetadataFromContent(this.origSymbolData.scadaSymbolContent);
     }
     const linkElement = document.createElement('a');
-    const scadaSymbolContent = this.prepareScadaSymbolContent(metadata);
-    const blob = new Blob([scadaSymbolContent], { type: this.symbolData.imageResource.descriptor.mediaType });
-    const url = URL.createObjectURL(blob);
-    linkElement.setAttribute('href', url);
-    linkElement.setAttribute('download', this.symbolData.imageResource.fileName);
-    const clickEvent = new MouseEvent('click',
-      {
-        view: window,
-        bubbles: true,
-        cancelable: false
-      }
-    );
-    linkElement.dispatchEvent(clickEvent);
+    try {
+      const scadaSymbolContent = this.prepareScadaSymbolContent(metadata);
+      const blob = new Blob([scadaSymbolContent], { type: this.symbolData.imageResource.descriptor.mediaType });
+      const url = URL.createObjectURL(blob);
+      linkElement.setAttribute('href', url);
+      linkElement.setAttribute('download', this.symbolData.imageResource.fileName);
+      const clickEvent = new MouseEvent('click',
+        {
+          view: window,
+          bubbles: true,
+          cancelable: false
+        }
+      );
+      linkElement.dispatchEvent(clickEvent);
+    } catch (e) {
+      this.store.dispatch(new ActionNotificationShow({ message: e.message, type: 'error' }));
+    }
   }
 
   createWidget() {

ui-ngx/src/app/shared/components/image/upload-image-dialog.component.html

@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<form [formGroup]="uploadImageFormGroup" (ngSubmit)="upload()" style="width: 560px;">
+<form [formGroup]="uploadImageFormGroup" (ngSubmit)="upload()" style="width: 560px;" tb-toast toastTarget="uploadRoot">
   <mat-toolbar color="primary">
     <h2>{{ ( uploadImage ? (isScada ? 'scada.upload-symbol' : 'image.upload-image') : (isScada ? 'scada.update-symbol' : 'image.update-image') ) | translate }}</h2>
     <span class="flex-1"></span>

ui-ngx/src/app/shared/components/image/upload-image-dialog.component.ts

@@ -41,6 +41,7 @@ import {
   updateScadaSymbolMetadataInContent
 } from '@home/components/widget/lib/scada/scada-symbol.models';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { ActionNotificationShow } from '@core/notification/notification.actions';
 
 export interface UploadImageDialogData {
   imageSubType: ResourceSubType;
@@ -135,38 +136,48 @@ export class UploadImageDialogComponent extends
   upload(): void {
     this.submitted = true;
     let file: File = this.uploadImageFormGroup.get('file').value;
-    if (this.uploadImage) {
-      const title: string = this.uploadImageFormGroup.get('title').value;
-      if (this.isScada) {
-        if (!this.scadaSymbolMetadata) {
-          this.scadaSymbolMetadata = emptyMetadata();
-        }
-        if (this.scadaSymbolMetadata.title !== title) {
-          this.scadaSymbolMetadata.title = title;
+    try {
+      if (this.uploadImage) {
+        const title: string = this.uploadImageFormGroup.get('title').value;
+        if (this.isScada) {
+          if (!this.scadaSymbolMetadata) {
+            this.scadaSymbolMetadata = emptyMetadata();
+          }
+          if (this.scadaSymbolMetadata.title !== title) {
+            this.scadaSymbolMetadata.title = title;
+          }
+          const newContent = updateScadaSymbolMetadataInContent(this.scadaSymbolContent, this.scadaSymbolMetadata);
+          file = updateFileContent(file, newContent);
         }
-        const newContent = updateScadaSymbolMetadataInContent(this.scadaSymbolContent, this.scadaSymbolMetadata);
-        file = updateFileContent(file, newContent);
-      }
-      forkJoin([
-        this.imageService.uploadImage(file, title, this.data.imageSubType),
-        blobToBase64(file)
-      ]).subscribe(([imageInfo, base64]) => {
-        this.dialogRef.close({image: Object.assign(imageInfo, {base64})});
-      });
-    } else {
-      if (this.isScada) {
-        blobToText(file).subscribe(scadaSymbolContent => {
-          this.dialogRef.close({scadaSymbolContent});
-        });
-      } else {
-        const image = this.data.image;
         forkJoin([
-          this.imageService.updateImage(imageResourceType(image), image.resourceKey, file),
+          this.imageService.uploadImage(file, title, this.data.imageSubType),
           blobToBase64(file)
         ]).subscribe(([imageInfo, base64]) => {
-          this.dialogRef.close({image:Object.assign(imageInfo, {base64})});
+          this.dialogRef.close({image: Object.assign(imageInfo, {base64})});
         });
+      } else {
+        if (this.isScada) {
+          blobToText(file).subscribe(scadaSymbolContent => {
+            this.dialogRef.close({scadaSymbolContent});
+          });
+        } else {
+          const image = this.data.image;
+          forkJoin([
+            this.imageService.updateImage(imageResourceType(image), image.resourceKey, file),
+            blobToBase64(file)
+          ]).subscribe(([imageInfo, base64]) => {
+            this.dialogRef.close({image:Object.assign(imageInfo, {base64})});
+          });
+        }
       }
+    } catch (e) {
+      this.store.dispatch(new ActionNotificationShow({
+        message: e.message,
+        type: 'error',
+        verticalPosition: 'bottom',
+        horizontalPosition: 'right',
+        target: 'uploadRoot'
+      }));
     }
   }
 }