Browse Source

feat(iot-hub): add authenticated docker-compose download button for gateway install

Markdown links can't pass JWT auth headers, so instead of relying on
${gateway.dockerComposeUrl} in markdown, add a download bar above the
instruction content when a gateway was created. Uses the existing
DeviceService.downloadGatewayDockerComposeFile() which handles
authenticated download via ResourcesService (JWT injected by interceptor,
Blob created, browser download triggered).
pull/15508/head
Andrii Shvaika 6 months ago
parent
commit
d5dfab6c7a
  1. 9
      ui-ngx/src/app/modules/home/components/iot-hub/device-install-dialog/device-install-dialog.component.html
  2. 16
      ui-ngx/src/app/modules/home/components/iot-hub/device-install-dialog/device-install-dialog.component.scss
  3. 12
      ui-ngx/src/app/modules/home/components/iot-hub/device-install-dialog/device-install-dialog.component.ts
  4. 1
      ui-ngx/src/assets/locale/locale.constant-en_US.json

9
ui-ngx/src/app/modules/home/components/iot-hub/device-install-dialog/device-install-dialog.component.html

@ -77,6 +77,15 @@
@case ('instruction') { @case ('instruction') {
<div class="tb-device-install-instruction"> <div class="tb-device-install-instruction">
@if (gatewayDockerComposeAvailable) {
<div class="tb-gateway-download-bar">
<span>{{ 'iot-hub.device-install-gateway-docker-compose' | translate }}</span>
<button mat-stroked-button color="primary" (click)="downloadGatewayDockerCompose()">
<mat-icon>download</mat-icon>
{{ 'action.download' | translate }}
</button>
</div>
}
<tb-markdown [data]="ws.markdown" <tb-markdown [data]="ws.markdown"
[usePlainMarkdown]="true"> [usePlainMarkdown]="true">
</tb-markdown> </tb-markdown>

16
ui-ngx/src/app/modules/home/components/iot-hub/device-install-dialog/device-install-dialog.component.scss

@ -123,6 +123,22 @@
min-height: 120px; min-height: 120px;
} }
// Gateway download bar
.tb-gateway-download-bar {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 16px;
margin-bottom: 16px;
background: #e3f2fd;
border-radius: 8px;
span {
font-size: 14px;
color: rgba(0, 0, 0, 0.87);
}
}
// Instruction view // Instruction view
.tb-device-install-instruction { .tb-device-install-instruction {
::ng-deep tb-markdown { ::ng-deep tb-markdown {

12
ui-ngx/src/app/modules/home/components/iot-hub/device-install-dialog/device-install-dialog.component.ts

@ -240,6 +240,18 @@ export class TbDeviceInstallDialogComponent extends DialogComponent<TbDeviceInst
} }
} }
get gatewayDockerComposeAvailable(): boolean {
const gateway = this.entityOutputs.get('gateway');
return !!gateway?.dockerComposeUrl;
}
downloadGatewayDockerCompose(): void {
const gateway = this.entityOutputs.get('gateway');
if (gateway?.id) {
this.deviceService.downloadGatewayDockerComposeFile(gateway.id).subscribe();
}
}
getPatternErrorMessage(field: FormFieldDefinition): string { getPatternErrorMessage(field: FormFieldDefinition): string {
return field.validators?.[0]?.message || 'Invalid format'; return field.validators?.[0]?.message || 'Invalid format';
} }

1
ui-ngx/src/assets/locale/locale.constant-en_US.json

@ -3895,6 +3895,7 @@
"device-install-step-type-GATEWAY": "Gateway", "device-install-step-type-GATEWAY": "Gateway",
"device-install-step-type-GATEWAY_CONNECTOR": "Gateway Connector", "device-install-step-type-GATEWAY_CONNECTOR": "Gateway Connector",
"device-install-step-type-RULE_CHAIN": "Rule Chain", "device-install-step-type-RULE_CHAIN": "Rule Chain",
"device-install-gateway-docker-compose": "Download docker-compose.yml for your gateway",
"device-install-title": "Install \"{{name}}\"", "device-install-title": "Install \"{{name}}\"",
"device-install-complete-title": "Install \"{{name}}\" — Complete", "device-install-complete-title": "Install \"{{name}}\" — Complete",
"device-installing-title": "Installing \"{{name}}\"" "device-installing-title": "Installing \"{{name}}\""

Loading…
Cancel
Save