tsai
/
thingsboard
mirror of https://github.com/thingsboard/thingsboard.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

Merge pull request #13110 from ArtemDzhereleiko/AD/bug-fix/scada-bad-xml 

Show Error msg for bad xml on save SCADA symbol
pull/13184/head
Igor Kulikov 1 year ago
committed by GitHub
parent
df78cbbdf6 84778afc0d
commit
e7c007f444
No known key found for this signature in database GPG Key ID: B5690EEEBB952194
4 changed files with 121 additions and 97 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      ui-ngx/src/app/modules/home/components/widget/lib/scada/scada-symbol.models.ts
  2. 149
      ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol.component.ts
  3. 4
      ui-ngx/src/app/shared/components/image/upload-image-dialog.component.html
  4. 63
      ui-ngx/src/app/shared/components/image/upload-image-dialog.component.ts

2
ui-ngx/src/app/modules/home/components/widget/lib/scada/scada-symbol.models.ts
View File

@ -271,7 +271,7 @@ export const updateScadaSymbolMetadataInContent = (svgContent: string, metadata:
const svgDoc = new DOMParser().parseFromString(svgContent, 'image/svg+xml');
const parsererror = svgDoc.getElementsByTagName('parsererror');
if (parsererror?.length) {
return parsererror[0].outerHTML;
throw Error(parsererror[0].textContent)
}
updateScadaSymbolMetadataInDom(svgDoc, metadata);
return svgDoc.documentElement.outerHTML;

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

@ -79,6 +79,7 @@ import {
SaveWidgetTypeAsDialogResult
} from '@home/pages/widget/save-widget-type-as-dialog.component';
import { WidgetService } from '@core/http/widget.service';
import { ActionNotificationShow } from '@core/notification/notification.actions';
@Component({
selector: 'tb-scada-symbol',
@ -213,32 +214,36 @@ export class ScadaSymbolComponent extends PageComponent
this.editObjectCallbacks.tagsUpdated(tags);
}
const metadata: ScadaSymbolMetadata = this.scadaSymbolFormGroup.get('metadata').value;
const scadaSymbolContent = this.prepareScadaSymbolContent(metadata);
const file = createFileFromContent(scadaSymbolContent, this.symbolData.imageResource.fileName,
this.symbolData.imageResource.descriptor.mediaType);
const type = imageResourceType(this.symbolData.imageResource);
let imageInfoObservable =
this.imageService.updateImage(type, this.symbolData.imageResource.resourceKey, file);
if (metadata.title !== this.symbolData.imageResource.title) {
imageInfoObservable = imageInfoObservable.pipe(
switchMap(imageInfo => {
imageInfo.title = metadata.title;
return this.imageService.updateImageInfo(imageInfo);
})
);
}
imageInfoObservable.pipe(
switchMap(imageInfo => this.imageService.getImageString(
try {
const scadaSymbolContent = this.prepareScadaSymbolContent(metadata);
const file = createFileFromContent(scadaSymbolContent, this.symbolData.imageResource.fileName,
this.symbolData.imageResource.descriptor.mediaType);
const type = imageResourceType(this.symbolData.imageResource);
let imageInfoObservable =
this.imageService.updateImage(type, this.symbolData.imageResource.resourceKey, file);
if (metadata.title !== this.symbolData.imageResource.title) {
imageInfoObservable = imageInfoObservable.pipe(
switchMap(imageInfo => {
imageInfo.title = metadata.title;
return this.imageService.updateImageInfo(imageInfo);
})
);
}
imageInfoObservable.pipe(
switchMap(imageInfo => this.imageService.getImageString(
`${IMAGES_URL_PREFIX}/${type}/${encodeURIComponent(imageInfo.resourceKey)}`).pipe(
map(content => ({
imageResource: imageInfo,
scadaSymbolContent: content
}))
map(content => ({
imageResource: imageInfo,
scadaSymbolContent: content
}))
))
).subscribe(data => {
this.init(data);
this.updateBreadcrumbs.emit();
});
).subscribe(data => {
this.init(data);
this.updateBreadcrumbs.emit();
});
} catch (e) {
this.store.dispatch(new ActionNotificationShow({ message: e.message, type: 'error' }));
}
}
}
@ -248,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() {
@ -374,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() {

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

@ -28,8 +28,8 @@
<mat-progress-bar color="warn" mode="indeterminate" *ngIf="isLoading$ | async">
</mat-progress-bar>
<div style="height: 4px;" *ngIf="!(isLoading$ | async)"></div>
<div mat-dialog-content>
<fieldset [disabled]="isLoading$ | async">
<div mat-dialog-content class="relative">
<fieldset [disabled]="isLoading$ | async" tb-toast toastTarget="uploadRoot" >
<tb-image-input resultAsFile
processImageApiLink
label="{{(isScada ? 'scada.symbol-preview' : 'image.image-preview') | translate}}"

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

@ -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: 'top',
horizontalPosition: 'right',
target: 'uploadRoot'
}));
}
}
}

Write Preview
Loading…
Cancel
Save