diff --git a/ui-ngx/src/app/modules/home/components/iot-hub/device-install-dialog/device-install-dialog.component.html b/ui-ngx/src/app/modules/home/components/iot-hub/device-install-dialog/device-install-dialog.component.html index 733ed0a906..402381ad67 100644 --- a/ui-ngx/src/app/modules/home/components/iot-hub/device-install-dialog/device-install-dialog.component.html +++ b/ui-ngx/src/app/modules/home/components/iot-hub/device-install-dialog/device-install-dialog.component.html @@ -164,8 +164,8 @@ @if (loading) { -
- +
+
} @else {
diff --git a/ui-ngx/src/app/modules/home/components/iot-hub/device-install-dialog/device-install-dialog.component.ts b/ui-ngx/src/app/modules/home/components/iot-hub/device-install-dialog/device-install-dialog.component.ts index 53dc3ac523..e4df929fd2 100644 --- a/ui-ngx/src/app/modules/home/components/iot-hub/device-install-dialog/device-install-dialog.component.ts +++ b/ui-ngx/src/app/modules/home/components/iot-hub/device-install-dialog/device-install-dialog.component.ts @@ -53,10 +53,10 @@ import { InstallStepType, stepTypeAliasMap } from '@shared/models/iot-hub/device-package.models'; +import { mergeMap } from 'rxjs/operators'; export interface DeviceInstallDialogData { item: MpItemVersionView; - zipData: ArrayBuffer; reviewMode?: boolean; selectedInstallMethod?: string; installState?: Record; @@ -138,8 +138,11 @@ export class TbDeviceInstallDialogComponent extends DialogComponent { try { + const zipData = await firstValueFrom(this.iotHubApiService.getVersionFileData(this.data.item.id, { ignoreLoading: true }).pipe( + mergeMap((blob: Blob) => blob.arrayBuffer()) + )); const JSZip = (await import('jszip')).default; - const zip = await JSZip.loadAsync(this.data.zipData); + const zip = await JSZip.loadAsync(zipData); const imageExtensions = new Set(['png', 'jpg', 'jpeg', 'gif', 'svg']); for (const [path, entry] of Object.entries(zip.files) as [string, any][]) { if (!entry.dir) { diff --git a/ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-actions.service.ts b/ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-actions.service.ts index 4fd1565c07..bae080a464 100644 --- a/ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-actions.service.ts +++ b/ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-actions.service.ts @@ -129,34 +129,24 @@ export class IotHubActionsService { } installDevice(item: MpItemVersionView): Observable { - return this.fetchZipData(item).pipe( - mergeMap((zipData: ArrayBuffer) => this.openDeviceInstallDialog(item, zipData)) - ); + return this.openDeviceInstallDialog(item); } reviewDevice(item: MpItemVersionView, deviceDescriptor: DeviceInstalledItemDescriptor): Observable { - return this.fetchZipData(item).pipe( - mergeMap((zipData: ArrayBuffer) => this.openDeviceInstallDialog(item, zipData, { + return this.openDeviceInstallDialog(item, { reviewMode: true, selectedInstallMethod: deviceDescriptor.selectedInstallMethod, installState: deviceDescriptor.installState - })) - ); - } - - private fetchZipData(item: MpItemVersionView): Observable { - return this.iotHubApiService.getVersionFileData(item.id as string, { ignoreLoading: true }).pipe( - mergeMap((blob: Blob) => blob.arrayBuffer()) - ); + }); } - private openDeviceInstallDialog(item: MpItemVersionView, zipData: ArrayBuffer, + private openDeviceInstallDialog(item: MpItemVersionView, options?: { reviewMode?: boolean; selectedInstallMethod?: string; installState?: any }): Observable { - return this.dialog.open(TbDeviceInstallDialogComponent, { + return this.dialog.open(TbDeviceInstallDialogComponent, { panelClass: ['tb-dialog', 'tb-fullscreen-dialog-lt-md'], disableClose: true, autoFocus: false, - data: { item, zipData, ...options } as DeviceInstallDialogData + data: { item, ...options } }).afterClosed(); } }