This is an automated email from the ASF dual-hosted git repository. riemer pushed a commit to branch ngx-translate in repository https://gitbox.apache.org/repos/asf/streampipes.git
commit 1746dcbf396aba4aef92dc3e2f42edb97383f161 Author: Dominik Riemer <[email protected]> AuthorDate: Mon Feb 17 23:21:38 2025 +0100 feat(#3489): Add UI translation framework --- ui/deployment/i18n/de.json | 56 ++++++++++++++++++++-- ui/deployment/i18n/en.json | 56 ++++++++++++++++++++-- .../actions/pipeline-actions.component.html | 16 +++---- ...pipeline-details-expansion-panel.component.html | 6 +-- .../pipeline-element-details-row.component.html | 2 +- .../status/pipeline-status.component.html | 2 +- .../pipeline-details-toolbar.component.html | 18 ++++--- .../pipeline-code-dialog.component.html | 2 +- .../pipeline-logs-dialog.component.html | 6 ++- .../pipeline-details/pipeline-details.module.ts | 2 + .../pipeline-overview.component.html | 27 ++++++----- .../delete-pipeline-dialog.component.html | 18 ++++--- .../delete-pipeline-dialog.component.ts | 20 +++++--- .../pipeline-notifications.component.html | 7 ++- .../pipeline-status-dialog.component.html | 28 +++++++++-- .../pipeline-status-dialog.component.ts | 16 ++++--- .../start-all-pipelines-dialog.component.html | 45 ++++++++++++----- .../start-all-pipelines-dialog.component.ts | 39 ++++++++------- 18 files changed, 271 insertions(+), 95 deletions(-) diff --git a/ui/deployment/i18n/de.json b/ui/deployment/i18n/de.json index 46e370ccac..ceb9bbc46c 100644 --- a/ui/deployment/i18n/de.json +++ b/ui/deployment/i18n/de.json @@ -2,7 +2,54 @@ "New Pipeline": "Neue Pipeline", "Start All Pipelines": "Alle Pipelines starten", "Stop all pipelines": "Alle Pipelines stoppen", + "You are about to start the following pipelines:": "Sie sind dabei, die folgenden Pipelines zu starten:", + "You are about to stop the following pipelines:": "Sie sind dabei, die folgenden Pipelines zu stoppen:", + "Press Next to start the process.": "Klicken Sie auf Weiter, um den Vorgang zu starten.", + "Starting pipeline ": "Starte Pipeline", + "Stopping pipeline": "Pipeline stoppen", + "of": "von", + "Sorry, there are no pipelines that are currently idle.": "Leider gibt es keine Pipelines, die derzeit gestoppt sind.", + "Sorry, there are no pipelines that are currently running.": "Es gibt leider keine Pipelines, die derzeit gestartet sind", + "Cancel": "Abbrechen", + "Starting": "Starte", + "Stopping": "Stoppe", + "Please wait while the pipeline is starting": "Bitte warten Sie, während die Pipeline gestartet wird", + "Please wait while the pipeline is stopping": "Bitte warten Sie, während die Pipeline gestoppt wird", + "Forced stop successful": "Erzwungener Stopp erfolgreich", + "Close": "Schließen", + "Pipeline health monitoring discovered the following issues:": "Die Zustandsüberwachung der Pipeline hat folgende Probleme festgestellt:", + "Acknowledge": "Bestätigen", + "Do you really want to delete pipeline": "Wollen Sie die Pipeline wirklich löschen?", + "This pipeline is still running.": "Diese Pipeline ist noch in Betrieb.", + "This operation cannot be undone.": "Dieser Vorgang kann nicht rückgängig gemacht werden.", + "Delete pipeline": "Pipeline löschen", + "Stop and delete pipeline": "Pipeline stoppen und löschen", + "Status": "Status", + "Stopped": "Gestoppt", + "Invalid pipeline: Modify to fix problems": "Ungültige Pipeline: Ändern, um Probleme zu beheben", + "Start": "Start", + "Start pipeline": "Pipeline starten", + "Stop pipeline": "Pipeline stoppen", + "Name": "Name", "Last modified": "Zuletzt geändert", + "Show pipeline": "Pipeline anzeigen", + "Modify pipeline": "Pipeline ändern", + "Permissions": "Berechtigungen", + "no log messages available": "keine Logs verfügbar", + "Data Preview": "Datenvorschau", + "Enable live preview": "Live-Vorschau aktivieren", + "Disable live preview": "Live-Vorschau deaktivieren", + "Pipeline as code": "Pipeline als Code", + "View pipeline as code": "Pipeline als Code anzeigen", + "Refresh metrics": "Metriken aktualisieren", + "Auto refresh": "Automatische Aktualisierung", + "Logs": "Logs", + "Actions": "Aktionen", + "no status information available": "keine Statusinformationen verfügbar", + "Start Pipeline": "Pipeline starten", + "Stop Pipeline": "Pipeline stoppen", + "Modify Pipeline": "Pipeline bearbeiten", + "Delete Pipeline": "Pipeline löschen", "Field": "Feld", "Settings": "Einstellungen", "Resolution": "Auflösung", @@ -123,7 +170,6 @@ "Expand More": "Einklappen", "No data available! Please connect an adapter or verify your pipeline is running": "Keine Daten verfügbar! Bitte schließen Sie einen Adapter an oder überprüfen Sie, ob Ihre Pipeline läuft", "Connect Adapter": "Adapter anschließen", - "Start Pipeline": "Pipeline starten", "Pipeline": "Pipeline", "Select this option if you want to use data from one of your pipelines.": "Wählen Sie diese Option, wenn Sie Daten aus einer Ihrer Pipelines verwenden möchten.", "Database Identifier": "Datenbankname", @@ -155,10 +201,15 @@ "Unit": "Einheit", "Background": "Hintergrund", "Text": "Text", + "success": "Erfolg", + "error": "Fehler", + "waiting": "Warten", + "Network Error": "Netzwerkfehler", + "Deleting pipeline...": "Löschen der Pipeline...", + "Stopping pipeline...": "Pipeline stoppen...", "Gauge": "Gauge", "Table": "Tabelle", "Traffic Light": "Ampel", - "Status": "Status", "Map": "Karte", "Time-Series Heatmap": "Zeitreihen-Heatmap", "Time Series Chart": "Zeitreihen-Diagramm", @@ -173,7 +224,6 @@ "to": "zu", "Are you sure you want to delete this chart?": "Sind Sie sicher, dass Sie dieses Diagramm löschen wollen?", "The chart will be removed from all dashboards as well. This action cannot be undone!": "Das Diagramm wird auch aus allen Dashboards entfernt. Diese Aktion kann nicht rückgängig gemacht werden!", - "Cancel": "Abbrechen", "Save changes?": "Änderungen speichern?", "Update all changes to chart or discard current changes.": "Aktualisieren Sie alle Änderungen im Diagramm oder verwerfen Sie die aktuellen Änderungen.", "Discard changes": "Änderungen verwerfen", diff --git a/ui/deployment/i18n/en.json b/ui/deployment/i18n/en.json index 640292da1f..90499c0a0e 100644 --- a/ui/deployment/i18n/en.json +++ b/ui/deployment/i18n/en.json @@ -2,7 +2,54 @@ "New Pipeline": null, "Start All Pipelines": null, "Stop all pipelines": null, + "You are about to start the following pipelines:": null, + "You are about to stop the following pipelines:": null, + "Press Next to start the process.": null, + "Starting pipeline ": null, + "Stopping pipeline": null, + "of": null, + "Sorry, there are no pipelines that are currently idle.": null, + "Sorry, there are no pipelines that are currently running.": null, + "Cancel": null, + "Starting": null, + "Stopping": null, + "Please wait while the pipeline is starting": null, + "Please wait while the pipeline is stopping": null, + "Forced stop successful": null, + "Close": null, + "Pipeline health monitoring discovered the following issues:": null, + "Acknowledge": null, + "Do you really want to delete pipeline": null, + "This pipeline is still running.": null, + "This operation cannot be undone.": null, + "Delete pipeline": null, + "Stop and delete pipeline": null, + "Status": null, + "Stopped": null, + "Invalid pipeline: Modify to fix problems": null, + "Start": null, + "Start pipeline": null, + "Stop pipeline": null, + "Name": null, "Last modified": null, + "Show pipeline": null, + "Modify pipeline": null, + "Permissions": null, + "no log messages available": null, + "Data Preview": null, + "Enable live preview": null, + "Disable live preview": null, + "Pipeline as code": null, + "View pipeline as code": null, + "Refresh metrics": null, + "Auto refresh": null, + "Logs": null, + "Actions": null, + "no status information available": null, + "Start Pipeline": null, + "Stop Pipeline": null, + "Modify Pipeline": null, + "Delete Pipeline": null, "Field": null, "Settings": null, "Resolution": null, @@ -123,7 +170,6 @@ "Expand More": null, "No data available! Please connect an adapter or verify your pipeline is running": null, "Connect Adapter": null, - "Start Pipeline": null, "Pipeline": null, "Select this option if you want to use data from one of your pipelines.": null, "Database Identifier": null, @@ -155,10 +201,15 @@ "Unit": null, "Background": null, "Text": null, + "success": null, + "error": null, + "waiting": null, + "Network Error": null, + "Deleting pipeline...": null, + "Stopping pipeline...": null, "Gauge": null, "Table": null, "Traffic Light": null, - "Status": null, "Map": null, "Time-Series Heatmap": null, "Time Series Chart": null, @@ -173,7 +224,6 @@ "to": null, "Are you sure you want to delete this chart?": null, "The chart will be removed from all dashboards as well. This action cannot be undone!": null, - "Cancel": null, "Save changes?": null, "Update all changes to chart or discard current changes.": null, "Discard changes": null, diff --git a/ui/src/app/pipeline-details/components/pipeline-details-expansion-panel/actions/pipeline-actions.component.html b/ui/src/app/pipeline-details/components/pipeline-details-expansion-panel/actions/pipeline-actions.component.html index b409532420..8d126522ee 100644 --- a/ui/src/app/pipeline-details/components/pipeline-details-expansion-panel/actions/pipeline-actions.component.html +++ b/ui/src/app/pipeline-details/components/pipeline-details-expansion-panel/actions/pipeline-actions.component.html @@ -26,46 +26,46 @@ <button mat-icon-button color="accent" - matTooltip="Start Pipeline" + [matTooltip]="'Start Pipeline' | translate" matTooltipPosition="above" (click)="startPipeline()" [disabled]="starting || !hasWritePipelinePrivileges" > <mat-icon>play_arrow</mat-icon> </button> - <span> Start pipeline</span> + <span> {{ 'Start pipeline' | translate }}</span> </div> <div fxLayout="row" *ngIf="pipeline.running" fxLayoutAlign="start center"> <button mat-icon-button color="accent" - matTooltip="Stop Pipeline" + [matTooltip]="'Stop Pipeline' | translate" matTooltipPosition="above" (click)="stopPipeline()" [disabled]="stopping || !hasWritePipelinePrivileges" > <mat-icon>stop</mat-icon> </button> - <span> Stop pipeline</span> + <span> {{ 'Stop pipeline' | translate }}</span> </div> <div fxLayout="row" fxLayoutAlign="start center"> <button mat-icon-button color="accent" - matTooltip="Modify Pipeline" + [matTooltip]="'Modify Pipeline' | translate" matTooltipPosition="above" [disabled]="!hasWritePipelinePrivileges" (click)="pipelineOperationsService.modifyPipeline(pipeline._id)" > <mat-icon>mode_edit</mat-icon> </button> - <span> Modify pipeline</span> + <span> {{ 'Modify pipeline' | translate }}</span> </div> <div fxLayout="row" fxLayoutAlign="start center"> <button mat-icon-button color="accent" - matTooltip="Delete Pipeline" + [matTooltip]="'Delete Pipeline' | translate" matTooltipPosition="above" [disabled]="!hasWritePipelinePrivileges" (click)=" @@ -78,6 +78,6 @@ > <mat-icon>delete</mat-icon> </button> - <span> Delete pipeline</span> + <span> {{ 'Delete pipeline' | translate }}</span> </div> </div> diff --git a/ui/src/app/pipeline-details/components/pipeline-details-expansion-panel/pipeline-details-expansion-panel.component.html b/ui/src/app/pipeline-details/components/pipeline-details-expansion-panel/pipeline-details-expansion-panel.component.html index 0f65683cf6..02180ec11d 100644 --- a/ui/src/app/pipeline-details/components/pipeline-details-expansion-panel/pipeline-details-expansion-panel.component.html +++ b/ui/src/app/pipeline-details/components/pipeline-details-expansion-panel/pipeline-details-expansion-panel.component.html @@ -19,7 +19,7 @@ <mat-accordion> <mat-expansion-panel [(expanded)]="expanded"> <mat-expansion-panel-header class="expansion-panel-header"> - Logs + {{ 'Logs' | translate }} </mat-expansion-panel-header> <div fxLayout="column" fxFlex="100" class="p-10"> <div @@ -37,13 +37,13 @@ </mat-expansion-panel> <mat-expansion-panel> <mat-expansion-panel-header class="expansion-panel-header"> - Status + {{ 'Status' | translate }} </mat-expansion-panel-header> <sp-pipeline-status [pipeline]="pipeline"> </sp-pipeline-status> </mat-expansion-panel> <mat-expansion-panel> <mat-expansion-panel-header class="expansion-panel-header"> - Actions + {{ 'Actions' | translate }} </mat-expansion-panel-header> <sp-pipeline-actions (reloadPipelineEmitter)="reloadPipelineEmitter.emit()" diff --git a/ui/src/app/pipeline-details/components/pipeline-details-expansion-panel/pipeline-element-details-row/pipeline-element-details-row.component.html b/ui/src/app/pipeline-details/components/pipeline-details-expansion-panel/pipeline-element-details-row/pipeline-element-details-row.component.html index 4c3a6cf22e..ca0e5fd2a7 100644 --- a/ui/src/app/pipeline-details/components/pipeline-details-expansion-panel/pipeline-element-details-row/pipeline-element-details-row.component.html +++ b/ui/src/app/pipeline-details/components/pipeline-details-expansion-panel/pipeline-element-details-row/pipeline-element-details-row.component.html @@ -26,7 +26,7 @@ (click)="openLogsDialog()" mat-icon-button color="accent" - matTooltip="Logs" + [matTooltip]="'Logs' | translate" [disabled]="!pipelineRunning || logInfo.length === 0" > <mat-icon>topic</mat-icon> diff --git a/ui/src/app/pipeline-details/components/pipeline-details-expansion-panel/status/pipeline-status.component.html b/ui/src/app/pipeline-details/components/pipeline-details-expansion-panel/status/pipeline-status.component.html index b17081e3d7..120115b568 100644 --- a/ui/src/app/pipeline-details/components/pipeline-details-expansion-panel/status/pipeline-status.component.html +++ b/ui/src/app/pipeline-details/components/pipeline-details-expansion-panel/status/pipeline-status.component.html @@ -48,5 +48,5 @@ style="min-height: 100px; padding: 5px; padding-left: 15px" *ngIf="pipelineStatus.length === 0" > - (no status information available) + ({{ 'no status information available' | translate }}) </div> diff --git a/ui/src/app/pipeline-details/components/pipeline-details-toolbar/pipeline-details-toolbar.component.html b/ui/src/app/pipeline-details/components/pipeline-details-toolbar/pipeline-details-toolbar.component.html index 01e230ab4a..1df6b32768 100644 --- a/ui/src/app/pipeline-details/components/pipeline-details-toolbar/pipeline-details-toolbar.component.html +++ b/ui/src/app/pipeline-details/components/pipeline-details-toolbar/pipeline-details-toolbar.component.html @@ -20,26 +20,30 @@ <button mat-button color="accent" - matTooltip="Data Preview" + [matTooltip]="'Data Preview' | translate" [matTooltipPosition]="'above'" (click)="togglePreviewEmitter.emit()" > <div fxLayoutAlign="start center" fxLayout="row"> <i class="material-icons">visibility</i> - <span *ngIf="!previewModeActive"> Enable live preview</span> - <span *ngIf="previewModeActive"> Disable live preview</span> + <span *ngIf="!previewModeActive" + > {{ 'Enable live preview' | translate }}</span + > + <span *ngIf="previewModeActive" + > {{ 'Disable live preview' | translate }}</span + > </div> </button> <button mat-button color="accent" - matTooltip="Pipeline as code" + [matTooltip]="'Pipeline as code' | translate" [matTooltipPosition]="'above'" (click)="openCodeDialogEmitter.emit()" > <div fxLayoutAlign="start center" fxLayout="row"> <i class="material-icons">code</i> - <span> View pipeline as code</span> + <span> {{ 'View pipeline as code' | translate }}</span> </div> </button> <div fxFlex></div> @@ -52,13 +56,13 @@ (click)="reloadMetricsEmitter.emit()" > <i class="material-icons">refresh</i> - Refresh metrics + {{ 'Refresh metrics' | translate }} </button> <mat-slide-toggle [(ngModel)]="autoRefresh" (ngModelChange)="autoRefreshChange.emit($event)" color="accent" - >Auto refresh + >{{ 'Auto refresh' | translate }} </mat-slide-toggle> </div> </div> diff --git a/ui/src/app/pipeline-details/dialogs/pipeline-code/pipeline-code-dialog.component.html b/ui/src/app/pipeline-details/dialogs/pipeline-code/pipeline-code-dialog.component.html index 9e17a966ea..b8a18f25dc 100644 --- a/ui/src/app/pipeline-details/dialogs/pipeline-code/pipeline-code-dialog.component.html +++ b/ui/src/app/pipeline-details/dialogs/pipeline-code/pipeline-code-dialog.component.html @@ -35,7 +35,7 @@ class="mat-basic" (click)="close()" > - Close + {{ 'Close' | translate }} </button> </div> </div> diff --git a/ui/src/app/pipeline-details/dialogs/pipeline-logs/pipeline-logs-dialog.component.html b/ui/src/app/pipeline-details/dialogs/pipeline-logs/pipeline-logs-dialog.component.html index 8edd5242bb..a0df8eaf89 100644 --- a/ui/src/app/pipeline-details/dialogs/pipeline-logs/pipeline-logs-dialog.component.html +++ b/ui/src/app/pipeline-details/dialogs/pipeline-logs/pipeline-logs-dialog.component.html @@ -29,7 +29,9 @@ ></sp-exception-message> </div> <div *ngIf="logInfo.length === 0"> - <h5 class="text-center">(no log messages available)</h5> + <h5 class="text-center"> + ({{ 'no log messages available' | translate }}) + </h5> </div> </div> </div> @@ -42,7 +44,7 @@ class="mat-basic" (click)="close()" > - Close + {{ 'Close' | translate }} </button> </div> </div> diff --git a/ui/src/app/pipeline-details/pipeline-details.module.ts b/ui/src/app/pipeline-details/pipeline-details.module.ts index 6eb5f6fb11..47e52672c7 100644 --- a/ui/src/app/pipeline-details/pipeline-details.module.ts +++ b/ui/src/app/pipeline-details/pipeline-details.module.ts @@ -43,6 +43,7 @@ import { PipelineDetailsToolbarComponent } from './components/pipeline-details-t import { MatSlideToggleModule } from '@angular/material/slide-toggle'; import { MatDivider } from '@angular/material/divider'; import { PipelineCodeDialogComponent } from './dialogs/pipeline-code/pipeline-code-dialog.component'; +import { TranslateModule } from '@ngx-translate/core'; @NgModule({ imports: [ @@ -64,6 +65,7 @@ import { PipelineCodeDialogComponent } from './dialogs/pipeline-code/pipeline-co MatSlideToggleModule, MatDivider, ClipboardModule, + TranslateModule.forChild(), ], declarations: [ PipelineActionsComponent, diff --git a/ui/src/app/pipelines/components/pipeline-overview/pipeline-overview.component.html b/ui/src/app/pipelines/components/pipeline-overview/pipeline-overview.component.html index 305a07013f..1299149540 100644 --- a/ui/src/app/pipelines/components/pipeline-overview/pipeline-overview.component.html +++ b/ui/src/app/pipelines/components/pipeline-overview/pipeline-overview.component.html @@ -23,7 +23,7 @@ data-cy="all-pipelines-table" > <ng-container matColumnDef="status"> - <th mat-header-cell *matHeaderCellDef>Status</th> + <th mat-header-cell *matHeaderCellDef>{{ 'Status' | translate }}</th> <td mat-cell *matCellDef="let pipeline"> <div> <div fxLayout="row" fxLayoutAlign="start center" fxFlex="150px"> @@ -51,7 +51,7 @@ <div *ngIf="!pipeline.running" class="light light-neutral" - [matTooltip]="'Stopped'" + [matTooltip]="'Stopped' | translate" ></div> <div class="notification-icon"> <button @@ -80,7 +80,10 @@ > <mat-icon color="warn" - matTooltip="Invalid pipeline: Modify to fix problems" + [matTooltip]=" + 'Invalid pipeline: Modify to fix problems' + | translate + " *ngIf="!pipeline.valid" >sync_problem </mat-icon> @@ -90,12 +93,12 @@ </td> </ng-container> <ng-container matColumnDef="start"> - <th mat-header-cell *matHeaderCellDef>Start</th> + <th mat-header-cell *matHeaderCellDef>{{ 'Start' | translate }}</th> <td mat-cell *matCellDef="let pipeline"> <button color="accent" mat-icon-button - matTooltip="Start pipeline" + [matTooltip]="'Start pipeline' | translate" matTooltipPosition="above" data-cy="start-pipeline-button" (click)=" @@ -115,7 +118,7 @@ <button color="accent" mat-icon-button - matTooltip="Stop pipeline" + [matTooltip]="'Stop pipeline' | translate" matTooltipPosition="above" data-cy="stop-pipeline-button" (click)=" @@ -134,7 +137,9 @@ </ng-container> <ng-container matColumnDef="name"> - <th mat-header-cell mat-sort-header *matHeaderCellDef>Name</th> + <th mat-header-cell mat-sort-header *matHeaderCellDef> + {{ 'Name' | translate }} + </th> <td mat-cell *matCellDef="let pipeline"> <div> <b>{{ pipeline.name }}</b> @@ -161,7 +166,7 @@ <button color="accent" mat-icon-button - matTooltip="Show pipeline" + [matTooltip]="'Show pipeline' | translate" matTooltipPosition="above" (click)=" pipelineOperationsService.showPipelineDetails( @@ -174,7 +179,7 @@ <button color="accent" mat-icon-button - matTooltip="Modify pipeline" + [matTooltip]="'Modify pipeline' | translate" matTooltipPosition="above" *ngIf="hasPipelineWritePrivileges" (click)=" @@ -187,7 +192,7 @@ <button color="accent" mat-icon-button - matTooltip="Permissions" + [matTooltip]="'Permissions' | translate" matTooltipPosition="above" *ngIf="isAdmin" (click)=" @@ -203,7 +208,7 @@ <button color="accent" mat-icon-button - matTooltip="Delete pipeline" + [matTooltip]="'Delete pipeline' | translate" matTooltipPosition="above" *ngIf="hasPipelineWritePrivileges" (click)=" diff --git a/ui/src/app/pipelines/dialog/delete-pipeline/delete-pipeline-dialog.component.html b/ui/src/app/pipelines/dialog/delete-pipeline/delete-pipeline-dialog.component.html index b9bbc7873f..c925f25b4f 100644 --- a/ui/src/app/pipelines/dialog/delete-pipeline/delete-pipeline-dialog.component.html +++ b/ui/src/app/pipelines/dialog/delete-pipeline/delete-pipeline-dialog.component.html @@ -22,16 +22,22 @@ <div fxFlex="100" fxLayoutAlign="center center" fxLayout="column"> <b ><h4> - Do you really want to delete pipeline + {{ + 'Do you really want to delete pipeline' | translate + }} {{ pipeline.name }}? </h4></b > <b ><h4 *ngIf="pipeline.running"> - This pipeline is still running. + {{ 'This pipeline is still running.' | translate }} </h4></b > - <b><h5>This operation cannot be undone.</h5></b> + <b + ><h5> + {{ 'This operation cannot be undone.' | translate }} + </h5></b + > </div> <div fxFlex="100" fxLayoutAlign="center center" fxLayout="column"> @@ -42,7 +48,7 @@ *ngIf="!pipeline.running" (click)="deletePipeline()" > - Delete pipeline + {{ 'Delete pipeline' | translate }} </button> <button mat-button @@ -52,7 +58,7 @@ (click)="stopAndDeletePipeline()" data-cy="sp-pipeline-stop-and-delete" > - Stop and delete pipeline + {{ 'Stop and delete pipeline' | translate }} </button> </div> </div> @@ -82,7 +88,7 @@ class="mat-basic" (click)="close(false)" > - Close + {{ 'Close' | translate }} </button> </div> </div> diff --git a/ui/src/app/pipelines/dialog/delete-pipeline/delete-pipeline-dialog.component.ts b/ui/src/app/pipelines/dialog/delete-pipeline/delete-pipeline-dialog.component.ts index 34f55646e6..75faf5b835 100644 --- a/ui/src/app/pipelines/dialog/delete-pipeline/delete-pipeline-dialog.component.ts +++ b/ui/src/app/pipelines/dialog/delete-pipeline/delete-pipeline-dialog.component.ts @@ -16,9 +16,10 @@ * */ -import { Component, Input } from '@angular/core'; +import { Component, inject, Input } from '@angular/core'; import { Pipeline, PipelineService } from '@streampipes/platform-services'; import { DialogRef } from '@streampipes/shared-ui'; +import { TranslateService } from '@ngx-translate/core'; @Component({ selector: 'sp-delete-pipeline-dialog', @@ -32,10 +33,11 @@ export class DeletePipelineDialogComponent { isInProgress = false; currentStatus: any; - constructor( - private dialogRef: DialogRef<DeletePipelineDialogComponent>, - private pipelineService: PipelineService, - ) {} + private translateService = inject(TranslateService); + private pipelineService = inject(PipelineService); + private dialogRef = inject(DialogRef<DeletePipelineDialogComponent>); + + constructor() {} close(refreshPipelines: boolean) { this.dialogRef.close(refreshPipelines); @@ -43,7 +45,9 @@ export class DeletePipelineDialogComponent { deletePipeline() { this.isInProgress = true; - this.currentStatus = 'Deleting pipeline...'; + this.currentStatus = this.translateService.instant( + 'Deleting pipeline...', + ); this.pipelineService .deleteOwnPipeline(this.pipeline._id) .subscribe(data => { @@ -53,7 +57,9 @@ export class DeletePipelineDialogComponent { stopAndDeletePipeline() { this.isInProgress = true; - this.currentStatus = 'Stopping pipeline...'; + this.currentStatus = this.translateService.instant( + 'Stopping pipeline...', + ); this.pipelineService.stopPipeline(this.pipeline._id).subscribe( data => { this.deletePipeline(); diff --git a/ui/src/app/pipelines/dialog/pipeline-notifications/pipeline-notifications.component.html b/ui/src/app/pipelines/dialog/pipeline-notifications/pipeline-notifications.component.html index 6bf9f1c805..9ce812c8a7 100644 --- a/ui/src/app/pipelines/dialog/pipeline-notifications/pipeline-notifications.component.html +++ b/ui/src/app/pipelines/dialog/pipeline-notifications/pipeline-notifications.component.html @@ -19,7 +19,10 @@ <div class="sp-dialog-container" fxLayout="column"> <div class="sp-dialog-content p-15" fxFlex="100" fxLayout="column"> <div class="info-message"> - Pipeline health monitoring discovered the following issues: + {{ + 'Pipeline health monitoring discovered the following issues:' + | translate + }} </div> <div class="log-message" fxFlex="100" fxLayout="column"> <span *ngFor="let notification of pipeline.pipelineNotifications"> @@ -35,7 +38,7 @@ color="accent" (click)="acknowledgeAndClose()" > - Acknowledge + {{ 'Acknowledge' | translate }} </button> </div> </div> diff --git a/ui/src/app/pipelines/dialog/pipeline-status/pipeline-status-dialog.component.html b/ui/src/app/pipelines/dialog/pipeline-status/pipeline-status-dialog.component.html index 048f2c5693..fc31410e41 100644 --- a/ui/src/app/pipelines/dialog/pipeline-status/pipeline-status-dialog.component.html +++ b/ui/src/app/pipelines/dialog/pipeline-status/pipeline-status-dialog.component.html @@ -35,7 +35,12 @@ [diameter]="50" fxLayoutAlign="center" style="margin: 10px 0 5px 0" - >{{ action === 0 ? 'Starting...' : 'Stopping' }} + > + @if (action === 0) { + {{ 'Starting' | translate }} + } @else { + {{ 'Stopping' | translate }} + } </mat-spinner> </div> <div @@ -44,8 +49,17 @@ fxLayout="column" > <h3> - Please wait while the pipeline is - {{ action === 0 ? 'starting...' : 'stopping' }}... + @if (action === 0) { + {{ + 'Please wait while the pipeline is starting' + | translate + }} + } @else { + {{ + 'Please wait while the pipeline is stopping' + | translate + }} + } </h3> </div> </div> @@ -64,7 +78,11 @@ > <div fxLayout="row"> <mat-icon color="accent">done</mat-icon> - <span> Forced stop successful</span> + <span + > {{ + 'Forced stop successful' | translate + }}</span + > </div> </div> </div> @@ -91,7 +109,7 @@ (click)="close()" data-cy="sp-pipeline-dialog-close" > - Close + {{ 'Close' | translate }} </button> </div> </div> diff --git a/ui/src/app/pipelines/dialog/pipeline-status/pipeline-status-dialog.component.ts b/ui/src/app/pipelines/dialog/pipeline-status/pipeline-status-dialog.component.ts index 31c411bdbf..d6c5633ab3 100644 --- a/ui/src/app/pipelines/dialog/pipeline-status/pipeline-status-dialog.component.ts +++ b/ui/src/app/pipelines/dialog/pipeline-status/pipeline-status-dialog.component.ts @@ -21,8 +21,9 @@ import { PipelineOperationStatus, PipelineService, } from '@streampipes/platform-services'; -import { Component, Input, OnInit } from '@angular/core'; +import { Component, inject, Input, OnInit } from '@angular/core'; import { PipelineAction } from '../../model/pipeline-model'; +import { TranslateService } from '@ngx-translate/core'; @Component({ selector: 'sp-pipeline-status-dialog', @@ -40,10 +41,11 @@ export class PipelineStatusDialogComponent implements OnInit { @Input() action: PipelineAction; - constructor( - private dialogRef: DialogRef<PipelineStatusDialogComponent>, - private pipelineService: PipelineService, - ) {} + private translateService = inject(TranslateService); + private pipelineService = inject(PipelineService); + private dialogRef = inject(DialogRef<PipelineStatusDialogComponent>); + + constructor() {} ngOnInit(): void { if (this.action === PipelineAction.Start) { @@ -66,7 +68,7 @@ export class PipelineStatusDialogComponent implements OnInit { error => { this.operationInProgress = false; this.pipelineOperationStatus = { - title: 'Network Error', + title: this.translateService.instant('Network Error'), success: false, pipelineId: undefined, pipelineName: undefined, @@ -106,7 +108,7 @@ export class PipelineStatusDialogComponent implements OnInit { error => { this.operationInProgress = false; this.pipelineOperationStatus = { - title: 'Network Error', + title: this.translateService.instant('Network Error'), success: false, pipelineId: undefined, pipelineName: undefined, diff --git a/ui/src/app/pipelines/dialog/start-all-pipelines/start-all-pipelines-dialog.component.html b/ui/src/app/pipelines/dialog/start-all-pipelines/start-all-pipelines-dialog.component.html index ab9af64d48..d7976fb238 100644 --- a/ui/src/app/pipelines/dialog/start-all-pipelines/start-all-pipelines-dialog.component.html +++ b/ui/src/app/pipelines/dialog/start-all-pipelines/start-all-pipelines-dialog.component.html @@ -25,14 +25,24 @@ style="padding: 20px" *ngIf="page === 'preview'" > - <h4> - You are about to {{ action ? 'start' : 'stop' }} the - following pipelines: + <h4 *ngIf="action"> + {{ + 'You are about to start the following pipelines:' + | translate + }} + </h4> + <h4 *ngIf="!action"> + {{ + 'You are about to stop the following pipelines:' + | translate + }} </h4> <div *ngFor="let pipeline of pipelinesToModify"> <h5>{{ pipeline.name }}</h5> </div> - <h5><b>Press 'Next' to start the process.</b></h5> + <h5> + <b>{{ 'Press Next to start the process.' | translate }}</b> + </h5> </div> <div fxFlex="100" @@ -42,19 +52,30 @@ > <div *ngFor="let status of installationStatus"> <h4> - {{ - action ? 'Starting pipeline ' : 'Stopping pipeline' - }} - {{ status.id + 1 }} of + @if (action) { + {{ 'Starting pipeline ' | translate }} + } @else { + {{ 'Stopping pipeline' | translate }} + } + {{ status.id + 1 }} {{ 'of' | translate }} {{ pipelinesToModify.length }} ({{ status.name }})...{{ status.status }} </h4> </div> <div *ngIf="pipelinesToModify.length === 0"> - <h4> - Sorry, there are no pipelines that are currently - {{ action ? 'idle.' : 'running.' }} + <h4 *ngIf="action"></h4> + <h4 *ngIf="!action"> + {{ + 'Sorry, there are no pipelines that are currently idle.' + | translate + }} + </h4> + <h4 *ngIf="action"> + {{ + 'Sorry, there are no pipelines that are currently running.' + | translate + }} </h4> </div> </div> @@ -69,7 +90,7 @@ (click)="close(false)" style="margin-right: 10px" > - Cancel + {{ 'Cancel' | translate }} </button> <button mat-button diff --git a/ui/src/app/pipelines/dialog/start-all-pipelines/start-all-pipelines-dialog.component.ts b/ui/src/app/pipelines/dialog/start-all-pipelines/start-all-pipelines-dialog.component.ts index e92ff7a1d7..9d29362162 100644 --- a/ui/src/app/pipelines/dialog/start-all-pipelines/start-all-pipelines-dialog.component.ts +++ b/ui/src/app/pipelines/dialog/start-all-pipelines/start-all-pipelines-dialog.component.ts @@ -16,9 +16,10 @@ * */ -import { Component, Input, OnInit } from '@angular/core'; +import { Component, inject, Input, OnInit } from '@angular/core'; import { DialogRef } from '@streampipes/shared-ui'; import { Pipeline, PipelineService } from '@streampipes/platform-services'; +import { TranslateService } from '@ngx-translate/core'; @Component({ selector: 'sp-start-all-pipelines-dialog', @@ -39,22 +40,28 @@ export class StartAllPipelinesDialogComponent implements OnInit { @Input() action: boolean; - constructor( - private dialogRef: DialogRef<StartAllPipelinesDialogComponent>, - private pipelineService: PipelineService, - ) { + translateService = inject(TranslateService); + pipelineService = inject(PipelineService); + dialogRef = inject(DialogRef<StartAllPipelinesDialogComponent>); + + successStr = this.translateService.instant('success'); + errorStr = this.translateService.instant('error'); + nextBtnStr = this.translateService.instant('Next'); + closeBtnStr = this.translateService.instant('Close'); + + constructor() { this.pipelinesToModify = []; this.installationStatus = []; this.installationFinished = false; this.page = 'preview'; - this.nextButton = 'Next'; + this.nextButton = this.nextBtnStr; this.installationRunning = false; } ngOnInit() { this.getPipelinesToModify(); if (this.pipelinesToModify.length === 0) { - this.nextButton = 'Close'; + this.nextButton = this.closeBtnStr; this.page = 'installation'; } } @@ -85,7 +92,7 @@ export class StartAllPipelinesDialogComponent implements OnInit { this.installationStatus.push({ name: pipeline.name, id: index, - status: 'waiting', + status: this.translateService.instant('waiting'), }); if (this.action) { this.startPipeline(pipeline, index); @@ -100,11 +107,11 @@ export class StartAllPipelinesDialogComponent implements OnInit { .subscribe( data => { this.installationStatus[index].status = data.success - ? 'success' - : 'error'; + ? this.successStr + : this.errorStr; }, data => { - this.installationStatus[index].status = 'error'; + this.installationStatus[index].status = this.errorStr; }, ) .add(() => { @@ -115,7 +122,7 @@ export class StartAllPipelinesDialogComponent implements OnInit { index, ); } else { - this.nextButton = 'Close'; + this.nextButton = this.closeBtnStr; this.installationRunning = false; } }); @@ -127,11 +134,11 @@ export class StartAllPipelinesDialogComponent implements OnInit { .subscribe( data => { this.installationStatus[index].status = data.success - ? 'success' - : 'error'; + ? this.successStr + : this.errorStr; }, data => { - this.installationStatus[index].status = 'error'; + this.installationStatus[index].status = this.errorStr; }, ) .add(() => { @@ -142,7 +149,7 @@ export class StartAllPipelinesDialogComponent implements OnInit { index, ); } else { - this.nextButton = 'Close'; + this.nextButton = this.closeBtnStr; this.installationRunning = false; } });
