This is an automated email from the ASF dual-hosted git repository. mfholz pushed a commit to branch translate-dashboard in repository https://gitbox.apache.org/repos/asf/streampipes.git
commit 68c8b7ebf163078d4cc6c5c20ff6a463d74942c3 Author: Marcelfrueh <[email protected]> AuthorDate: Mon Mar 10 15:44:47 2025 +0100 Add german translation to dashboard, core-ui and shared-ui --- ui/deployment/i18n/de.json | 152 ++++++++++++++++++++- ui/deployment/i18n/en.json | 152 ++++++++++++++++++++- .../asset-browser-hierarchy.component.ts | 11 +- .../asset-browser-filter-labels.component.html | 2 +- .../asset-browser-filter-outer.component.html | 4 +- .../asset-browser-filter-sites.component.html | 2 +- .../asset-browser-filter-type.component.html | 2 +- .../asset-browser-filter.component.html | 4 +- .../asset-browser-toolbar.component.html | 4 +- .../asset-browser/asset-browser.component.html | 12 +- .../asset-browser/asset-browser.component.ts | 6 +- .../basic-nav-tabs/basic-nav-tabs.component.html | 2 +- .../basic-view/basic-view.component.html | 2 +- .../exception-details-dialog.component.html | 2 +- .../exception-details.component.html | 12 +- .../sp-exception-message.component.html | 10 +- .../sp-exception-message.component.ts | 7 +- .../components/sp-table/sp-table.component.html | 2 +- .../refresh-interval-settings.component.html | 4 +- .../time-range-selector.component.html | 2 +- .../custom-time-range-selection.component.html | 2 +- .../src/lib/services/time-selection.service.ts | 55 ++++---- .../configuration-code-panel.component.html | 4 +- ui/src/app/core-ui/core-ui.module.ts | 2 + ui/src/app/core-ui/help/help.component.html | 2 +- ui/src/app/core-ui/help/help.component.ts | 11 +- .../loading-indicator.component.ts | 7 +- .../simple-logs/simple-logs.component.html | 4 +- .../object-permission-dialog.component.html | 43 ++++-- .../pipeline-element-documentation.component.html | 2 +- .../live-preview-error.component.html | 2 +- .../live-preview-loading.component.html | 2 +- .../live-preview-table.component.html | 18 ++- .../pipeline-element-schema.service.ts | 19 +-- ...ine-element-template-config-item.component.html | 2 +- ...pipeline-element-template-config.component.html | 18 +-- .../pipeline-started-status.component.html | 16 ++- .../base/abstract-validated-static-property.ts | 6 +- .../static-code-input.component.html | 4 +- .../add-to-collection.component.html | 8 +- .../add-to-collection.component.ts | 31 +++-- .../static-file-input.component.html | 18 +-- .../static-file-input.component.ts | 7 +- .../static-free-input.component.html | 2 +- .../static-free-input.component.ts | 16 ++- .../static-mapping-nary.component.html | 4 +- ...tic-runtime-resolvable-any-input.component.html | 8 +- .../static-runtime-resolvable-group.component.html | 2 +- ...c-runtime-resolvable-oneof-input.component.html | 4 +- .../static-tree-input-browse-nodes.component.html | 18 +-- .../static-tree-input-button-menu.component.html | 22 +-- .../static-tree-input-node-details.component.html | 2 +- ...static-tree-input-selected-nodes.component.html | 2 +- .../static-tree-input-text-editor.component.ts | 18 ++- .../status-indicator/status-indicator.component.ts | 7 +- ui/src/app/core-ui/topics/topics.component.html | 21 +-- ui/src/app/core-ui/topics/topics.component.ts | 10 +- .../dashboard-overview-table.component.html | 14 +- .../dashboard-overview-table.component.ts | 18 ++- .../overview/dashboard-overview.component.html | 2 +- .../overview/dashboard-overview.component.ts | 4 +- .../chart-selection-panel.component.html | 7 +- .../chart-selection/chart-selection.component.html | 10 +- .../panel/dashboard-panel.component.html | 5 +- .../components/panel/dashboard-panel.component.ts | 14 +- .../dashboard-toolbar.component.html | 26 ++-- ui/src/app/dashboard/dashboard.module.ts | 2 + .../edit-dashboard-dialog.component.html | 26 ++-- ui/src/app/dashboard/services/dashboard.service.ts | 10 +- .../config/heatmap-widget-config.component.html | 4 +- 70 files changed, 702 insertions(+), 253 deletions(-) diff --git a/ui/deployment/i18n/de.json b/ui/deployment/i18n/de.json index 43376d0635..56f862bfa5 100644 --- a/ui/deployment/i18n/de.json +++ b/ui/deployment/i18n/de.json @@ -100,6 +100,8 @@ "Minimum value": "Minimaler Wert", "Maximum value": "Maximaler Wert", "Show values as labels": "Werte als Beschriftung anzeigen", + "Visual Map Min": "Visuelle Heatmap Maximum", + "Visual Map Max": "Visuelle Heatmap Minimum", "Min": "Min", "Max": "Max", "X": "X", @@ -201,6 +203,86 @@ "Unit": "Einheit", "Background": "Hintergrund", "Text": "Text", + "Dashboard title": "Dashboardtitel", + "Title must not be empty": "Titel darf nicht leer sein!", + "Description": "Beschreibung", + "Default view mode": "Standard-Ansicht", + "Grid view": "Rasteransicht", + "Slide view": "Folienansicht", + "Time settings": "Zeiteinstellungen", + "Use global time settings instead of chart time settings": "Einheitliche Zeiteinstellungen anstelle von Diagramm-Zeiteinstellungen verwenden", + "This dashboard is empty and doesn't contain any charts.": "Dieses Dashboard ist leer und hat keine Diagramm zum Anzeigen.", + "View mode": "Ansicht", + "Grid": "Raster", + "Slides": "Folien", + "Edit dashboard": "Dashboard bearbeiten", + "Show time range selector": "Zeiteinstellungen anzeigen", + "Hide time range selector": "Zeiteinstellungen ausblenden", + "Delete dashboard": "Dashboard löschen", + "Configure dashboard": "Dashboard konfigurieren", + "No charts found - create a new chart first to add it to this dashboard.": "Keine Diagramme gefunden - erstellen Sie zuerst ein neues Diagramm, um es zu diesem Dashboard hinzuzufügen.", + "Create chart": "Diagramm erstellen", + "New dashboard": "Neues Dashboard", + "Dashboards": "Dashboards", + "Show dashboard": "Dashboard anzeigen", + "Dashboard settings": "Dashboard-Einstellungen", + "ID": "ID", + "Output Topics": "Output-Topics", + "Copy": "Kopieren", + "Input Topics": "Input-Topics", + "Selected Nodes": "Ausgewählte Knoten", + "Node Details": "Details zum Knoten", + "Clear selection & reload": "Auswahl löschen & neu laden", + "Reload": "Neu laden", + "Reloading nodes": "Knoten neu laden", + "Font Style": "Schriftstil", + "Tree": "Baum", + "Browse": "Durchsuchen", + "Add node": "Knoten hinzufügen", + "Remove node": "Knoten entfernen", + "Show details": "Details anzeigen", + "Add all direct children": "Alle direkten Unterknoten hinzufügen", + "(waiting for input)": "(warten auf Input)", + "Select none": "Keine auswählen", + "Possible placeholders:": "Mögliche Platzhalter:", + "Choose existing file": "Vorhandene Datei auswählen", + "Upload new file": "Neue Datei hochladen", + "Select file": "Datei auswählen", + "Clear": "Zurücksetzen", + "Upload": "Hochladen", + "Add": "Hinzufügen", + "Import from file": "Aus Datei importieren", + "File": "Datei", + "Reset code template": "Codevorlage zurücksetzen", + "Clean code": "Code aufräumen", + "Basics": "Allgemein", + "Template name": "Name der Vorlage", + "Template description": "Beschreibung der Vorlage", + "Configuration": "Konfiguration", + "(dynamic options cannot be saved and are hidden)": "(dynamische Optionen können nicht gespeichert werden und sind ausgeblendet)", + "Existing templates": "Vorhandene Vorlagen", + "(no templates available)": "(keine Vorlagen verfügbar)", + "Store as template": "Als Vorlage speichern", + "Here is a preview of your data:": "Vorschau Ihrer Daten:", + "Runtime Name": "Laufzeitname", + "Field Name": "Feldname", + "no data": "keine Daten", + "Gathering data for live preview...": "Sammeln von Daten für die Live-Vorschau...", + "Preview is currently unavailable.": "Die Vorschau ist derzeit nicht verfügbar.", + "(no documentation available)": "(keine Dokumentation verfügbar)", + "You can perform a forced stop, which will stop and reset the pipeline status.": "Sie können einen erzwungenen Stopp durchführen, der die Pipeline anhält und zurücksetzt.", + "Show Details": "Details anzeigen", + "Hide Details": "Details ausblenden", + "Force stop": "Stopp erzwingen", + "Owner": "Eigentümer", + "Public Element": "Öffentliches Element", + "Users": "Nutzer", + "Authorized Users": "Autorisierte Nutzer", + "User selection": "Auswahl der Nutzer", + "Groups": "Gruppen", + "Authorized Groups": "Autorisierte Gruppen", + "Group selection": "Auswahl der Gruppe", + "(no log messages available)": "(keine Protokollmeldungen verfügbar)", "success": "Erfolg", "error": "Fehler", "waiting": "Warten", @@ -234,6 +316,28 @@ "Hour": "Stunde", "Day": "Tag", "Week": "Woche", + "Update all changes to dashboard charts or discard current changes.": "Aktualisieren Sie alle Änderungen der Diagramme oder verwerfen Sie aktuelle Änderungen.", + "Off": "Aus", + "Are you sure you want to delete this dashboard?": "Sind Sie sicher, dass Sie dieses Dashboard löschen möchten?", + "This action cannot be undone!": "Diese Aktion kann nicht rückgängig gemacht werden!", + "Topics": "Themen", + "Code": "Code", + "Loading": "Laden", + "# Provide OPC UA Node IDs below, one per line.\n# Format: ns={{namespace}};s={{node_id}} (e.g., ns=3;s=SampleNodeId)\n": "# Geben Sie die OPC UA Node IDs unten an, eine pro Zeile.\n# Format: ns={{namespace}};s={{node_id}} (z. B. ns=3;s=SampleNodeId)\n", + "The value should be a number": "Der Wert sollte eine Zahl sein", + "Please enter a valid URL": "Bitte geben Sie eine gültige URL ein", + "Please enter a valid String": "Bitte geben Sie einen gültigen String ein", + "Please enter a value": "Bitte geben Sie einen Wert ein", + "This is a test": "Dies ist ein Test", + "Error in line {{rowNumber}}. Value for \"{{property}}\" is not supported.": "Fehler in Zeile {{Zeilennummer}}. Wert für \"{{Eigenschaft}}\" wird nicht unterstützt.", + "Error in line {{rowNumber}}. Value for \"{{property}}\" is not set.": "Fehler in Zeile {{Zeilennummer}}. Wert für \"{{Eigenschaft}}\" ist nicht gesetzt.", + "Timestamp": "Zeitstempel", + "Number": "Nummer", + "Boolean": "Boolean", + "List": "Liste", + "Nested": "Verschachtelt", + "TOPICS": "TOPICS", + "CODE": "CODE", "Select Data": "Daten auswählen", "Previous": "Zurück", "Download": "Download", @@ -256,5 +360,51 @@ "Behaviour in case of missing values": "Verhalten im Falle von fehlenden Daten", "Ignore lines with missing value": "Zeilen ohne Daten ignorieren", "Leave entry empty": "Leer lassen", - "Download successful": "Download erfolgreich" + "Download successful": "Download erfolgreich", + "Refresh": "Neu laden", + "Apply": "Anwenden", + "Refresh interval": "Aktualisierungsintervall", + "No entries available.": "Keine Einträge vorhanden.", + "Error": "Fehler", + "Details": "Einzelheiten", + "Probable cause": "Wahrscheinliche Ursache", + "No more information": "Keine weiteren Informationen", + "Full details": "Alle Einzelheiten", + "Full stack trace": "Vollständiger Stack-Trace", + "No assets found - use assets to better organize resources!": "Keine Assets gefunden - verwenden Sie Assets, um Ressourcen besser zu organisieren!", + "Manage assets": "Assets verwalten", + "Asset Browser": "Asset-Browser", + "Browse assets": "Assets durchsuchen", + "Filter assets": "Assets filtern", + "Reset filters": "Filter zurücksetzen", + "Sites": "Standorte", + "All": "Alle", + "None": "Keine", + "Labels": "Labels", + "Quick Selection": "Schnellauswahl", + "Custom": "Benutzerdefiniert", + "Maximum of ${this.maxDayRange} days can be displayed. Please select a smaller range.": "Es können maximal ${this.maxDayRange} Tage angezeigt werden. Bitte wählen Sie einen kleineren Bereich.", + "Modify time range": "Zeitspanne ändern", + "Last 15 min": "Letzten 15 Minuten", + "Last 1 hour": "Letzte Stunde", + "Last 1 day": "Letzter Tag", + "Last 1 week": "Letzte Woche", + "Last 1 month": "Letzter Monat", + "Last 1 year": "Letztes Jahr", + "Current day": "Aktueller Tag", + "Current hour": "Aktuelle Stunde", + "Current week": "Aktuelle Woche", + "Current month": "Aktueller Monat", + "Current year": "Aktuelles Jahr", + "1 sec": "1 Sekunde", + "2 sec": "2 Sekunden", + "5 sec": "5 Sekunden", + "10 sec": "10 Sekunden", + "30 sec": "30 Sekunden", + "1 min": "1 Minute", + "5 min": "5 Minuten", + "30 min": "30 Minuten", + "Error Details": "Fehler-Details", + "Resources": "Ressourcen", + "All {{allResourcesAlias}}": "Alle {{allResourcesAlias}}" } diff --git a/ui/deployment/i18n/en.json b/ui/deployment/i18n/en.json index 35053e32ed..a79b72b6f8 100644 --- a/ui/deployment/i18n/en.json +++ b/ui/deployment/i18n/en.json @@ -100,6 +100,8 @@ "Minimum value": null, "Maximum value": null, "Show values as labels": null, + "Visual Map Min": null, + "Visual Map Max": null, "Min": null, "Max": null, "X": null, @@ -201,6 +203,86 @@ "Unit": null, "Background": null, "Text": null, + "Dashboard title": null, + "Title must not be empty": null, + "Description": null, + "Default view mode": null, + "Grid view": null, + "Slide view": null, + "Time settings": null, + "Use global time settings instead of chart time settings": null, + "This dashboard is empty and doesn't contain any charts.": null, + "View mode": null, + "Grid": null, + "Slides": null, + "Edit dashboard": null, + "Show time range selector": null, + "Hide time range selector": null, + "Delete dashboard": null, + "Configure dashboard": null, + "No charts found - create a new chart first to add it to this dashboard.": null, + "Create chart": null, + "New dashboard": null, + "Dashboards": null, + "Show dashboard": null, + "Dashboard settings": null, + "ID": null, + "Output Topics": null, + "Copy": null, + "Input Topics": null, + "Selected Nodes": null, + "Node Details": null, + "Clear selection & reload": null, + "Reload": null, + "Reloading nodes": null, + "Font Style": null, + "Tree": null, + "Browse": null, + "Add node": null, + "Remove node": null, + "Show details": null, + "Add all direct children": null, + "(waiting for input)": null, + "Select none": null, + "Possible placeholders:": null, + "Choose existing file": null, + "Upload new file": null, + "Select file": null, + "Clear": null, + "Upload": null, + "Add": null, + "Import from file": null, + "File": null, + "Reset code template": null, + "Clean code": null, + "Basics": null, + "Template name": null, + "Template description": null, + "Configuration": null, + "(dynamic options cannot be saved and are hidden)": null, + "Existing templates": null, + "(no templates available)": null, + "Store as template": null, + "Here is a preview of your data:": null, + "Runtime Name": null, + "Field Name": null, + "no data": null, + "Gathering data for live preview...": null, + "Preview is currently unavailable.": null, + "(no documentation available)": null, + "You can perform a forced stop, which will stop and reset the pipeline status.": null, + "Show Details": null, + "Hide Details": null, + "Force stop": null, + "Owner": null, + "Public Element": null, + "Users": null, + "Authorized Users": null, + "User selection": null, + "Groups": null, + "Authorized Groups": null, + "Group selection": null, + "(no log messages available)": null, "success": null, "error": null, "waiting": null, @@ -234,6 +316,28 @@ "Hour": null, "Day": null, "Week": null, + "Update all changes to dashboard charts or discard current changes.": null, + "Off": null, + "Are you sure you want to delete this dashboard?": null, + "This action cannot be undone!": null, + "Topics": null, + "Code": null, + "Loading": null, + "# Provide OPC UA Node IDs below, one per line.\n# Format: ns={{namespace}};s={{node_id}} (e.g., ns=3;s=SampleNodeId)\n": null, + "The value should be a number": null, + "Please enter a valid URL": null, + "Please enter a valid String": null, + "Please enter a value": null, + "This is a test": null, + "Error in line {{rowNumber}}. Value for \"{{property}}\" is not supported.": "Error in line {{rowNumber}}. Value for \"{{property}}\" is not supported.", + "Error in line {{rowNumber}}. Value for \"{{property}}\" is not set.": "Error in line {{rowNumber}}. Value for \"{{property}}\" is not set.", + "Timestamp": null, + "Number": null, + "Boolean": null, + "List": null, + "Nested": null, + "TOPICS": null, + "CODE": null, "Select Data": null, "Previous": null, "Download": null, @@ -256,5 +360,51 @@ "Behaviour in case of missing values": null, "Ignore lines with missing value": null, "Leave entry empty": null, - "Download successful": null + "Download successful": null, + "Refresh": null, + "Apply": null, + "Refresh interval": null, + "No entries available.": null, + "Error": null, + "Details": null, + "Probable cause": null, + "No more information": null, + "Full details": null, + "Full stack trace": null, + "No assets found - use assets to better organize resources!": null, + "Manage assets": null, + "Asset Browser": null, + "Browse assets": null, + "Filter assets": null, + "Reset filters": null, + "Sites": null, + "All": null, + "None": null, + "Labels": null, + "Quick Selection": null, + "Custom": null, + "Maximum of ${this.maxDayRange} days can be displayed. Please select a smaller range.": "Maximum of ${this.maxDayRange} days can be displayed. Please select a smaller range.", + "Modify time range": null, + "Last 15 min": null, + "Last 1 hour": null, + "Last 1 day": null, + "Last 1 week": null, + "Last 1 month": null, + "Last 1 year": null, + "Current day": null, + "Current hour": null, + "Current week": null, + "Current month": null, + "Current year": null, + "1 sec": null, + "2 sec": null, + "5 sec": null, + "10 sec": null, + "30 sec": null, + "1 min": null, + "5 min": null, + "30 min": null, + "Error Details": null, + "Resources": null, + "All {{allResourcesAlias}}": "All {{allResourcesAlias}}" } diff --git a/ui/projects/streampipes/shared-ui/src/lib/components/asset-browser/asset-browser-hierarchy/asset-browser-hierarchy.component.ts b/ui/projects/streampipes/shared-ui/src/lib/components/asset-browser/asset-browser-hierarchy/asset-browser-hierarchy.component.ts index 5c84596a1f..55e1b5ecb0 100644 --- a/ui/projects/streampipes/shared-ui/src/lib/components/asset-browser/asset-browser-hierarchy/asset-browser-hierarchy.component.ts +++ b/ui/projects/streampipes/shared-ui/src/lib/components/asset-browser/asset-browser-hierarchy/asset-browser-hierarchy.component.ts @@ -24,11 +24,13 @@ import { Output, SimpleChanges, ViewChild, + inject, } from '@angular/core'; import { AssetBrowserData } from '../asset-browser.model'; import { NestedTreeControl } from '@angular/cdk/tree'; import { SpAsset } from '@streampipes/platform-services'; import { MatTreeNestedDataSource } from '@angular/material/tree'; +import { TranslateService } from '@ngx-translate/core'; @Component({ selector: 'sp-asset-browser-hierarchy', @@ -36,11 +38,13 @@ import { MatTreeNestedDataSource } from '@angular/material/tree'; styleUrls: ['./asset-browser-hierarchy.component.scss'], }) export class AssetBrowserHierarchyComponent implements OnChanges { + translateService = inject(TranslateService); + @Input() assetBrowserData: AssetBrowserData; @Input() - allResourcesAlias = 'Resources'; + allResourcesAlias = this.translateService.instant('Resources'); @Input() assetSelectionMode = false; @@ -91,7 +95,10 @@ export class AssetBrowserHierarchyComponent implements OnChanges { makeRootNode(): SpAsset { return { assetId: '_root', - assetName: `All ${this.allResourcesAlias}`, + assetName: this.translateService.instant( + 'All {{allResourcesAlias}}', + { allResourcesAlias: this.allResourcesAlias }, + ), assetDescription: '', assetLinks: [], assets: this.assetBrowserData.assets, diff --git a/ui/projects/streampipes/shared-ui/src/lib/components/asset-browser/asset-browser-toolbar/asset-browser-filter/asset-browser-filter-labels/asset-browser-filter-labels.component.html b/ui/projects/streampipes/shared-ui/src/lib/components/asset-browser/asset-browser-toolbar/asset-browser-filter/asset-browser-filter-labels/asset-browser-filter-labels.component.html index 8b734d48dd..547d81434d 100644 --- a/ui/projects/streampipes/shared-ui/src/lib/components/asset-browser/asset-browser-toolbar/asset-browser-filter/asset-browser-filter-labels/asset-browser-filter-labels.component.html +++ b/ui/projects/streampipes/shared-ui/src/lib/components/asset-browser/asset-browser-toolbar/asset-browser-filter/asset-browser-filter-labels/asset-browser-filter-labels.component.html @@ -41,7 +41,7 @@ > <i class="material-icons fs-icon">filter_alt</i> </div> - <span>Labels</span> + <span>{{ 'Labels' | translate }}</span> </div> </div> <div diff --git a/ui/projects/streampipes/shared-ui/src/lib/components/asset-browser/asset-browser-toolbar/asset-browser-filter/asset-browser-filter-outer/asset-browser-filter-outer.component.html b/ui/projects/streampipes/shared-ui/src/lib/components/asset-browser/asset-browser-toolbar/asset-browser-filter/asset-browser-filter-outer/asset-browser-filter-outer.component.html index d7e6848f49..db2ac84216 100644 --- a/ui/projects/streampipes/shared-ui/src/lib/components/asset-browser/asset-browser-toolbar/asset-browser-filter/asset-browser-filter-outer/asset-browser-filter-outer.component.html +++ b/ui/projects/streampipes/shared-ui/src/lib/components/asset-browser/asset-browser-toolbar/asset-browser-filter/asset-browser-filter-outer/asset-browser-filter-outer.component.html @@ -56,7 +56,7 @@ class="small-button btn-margin" (click)="selectAllEmitter.emit()" > - All + {{ 'All' | translate }} </button> <button mat-button @@ -64,7 +64,7 @@ class="small-button mat-basic btn-margin" (click)="deselectAllEmitter.emit()" > - None + {{ 'None' | translate }} </button> </div> </div> diff --git a/ui/projects/streampipes/shared-ui/src/lib/components/asset-browser/asset-browser-toolbar/asset-browser-filter/asset-browser-filter-sites/asset-browser-filter-sites.component.html b/ui/projects/streampipes/shared-ui/src/lib/components/asset-browser/asset-browser-toolbar/asset-browser-filter/asset-browser-filter-sites/asset-browser-filter-sites.component.html index ca4f1eefa1..f126a2370d 100644 --- a/ui/projects/streampipes/shared-ui/src/lib/components/asset-browser/asset-browser-toolbar/asset-browser-filter/asset-browser-filter-sites/asset-browser-filter-sites.component.html +++ b/ui/projects/streampipes/shared-ui/src/lib/components/asset-browser/asset-browser-toolbar/asset-browser-filter/asset-browser-filter-sites/asset-browser-filter-sites.component.html @@ -19,7 +19,7 @@ <sp-asset-browser-filter-outer [selectedItems]="activeFilters.selectedSites" [allItems]="sites" - title="Sites" + [title]="'Sites' | translate" (selectAllEmitter)="selectAll()" (deselectAllEmitter)="selectNone()" > diff --git a/ui/projects/streampipes/shared-ui/src/lib/components/asset-browser/asset-browser-toolbar/asset-browser-filter/asset-browser-filter-type/asset-browser-filter-type.component.html b/ui/projects/streampipes/shared-ui/src/lib/components/asset-browser/asset-browser-toolbar/asset-browser-filter/asset-browser-filter-type/asset-browser-filter-type.component.html index fd0ee9ebf0..b2d81fad89 100644 --- a/ui/projects/streampipes/shared-ui/src/lib/components/asset-browser/asset-browser-toolbar/asset-browser-filter/asset-browser-filter-type/asset-browser-filter-type.component.html +++ b/ui/projects/streampipes/shared-ui/src/lib/components/asset-browser/asset-browser-toolbar/asset-browser-filter/asset-browser-filter-type/asset-browser-filter-type.component.html @@ -19,7 +19,7 @@ <sp-asset-browser-filter-outer [selectedItems]="activeFilters.selectedTypes" [allItems]="allAssetTypes" - title="Type" + [title]="'Type' | translate" (selectAllEmitter)="selectAll()" (deselectAllEmitter)="selectNone()" > diff --git a/ui/projects/streampipes/shared-ui/src/lib/components/asset-browser/asset-browser-toolbar/asset-browser-filter/asset-browser-filter.component.html b/ui/projects/streampipes/shared-ui/src/lib/components/asset-browser/asset-browser-toolbar/asset-browser-filter/asset-browser-filter.component.html index fa78b95f08..c8a458bfd3 100644 --- a/ui/projects/streampipes/shared-ui/src/lib/components/asset-browser/asset-browser-toolbar/asset-browser-filter/asset-browser-filter.component.html +++ b/ui/projects/streampipes/shared-ui/src/lib/components/asset-browser/asset-browser-toolbar/asset-browser-filter/asset-browser-filter.component.html @@ -41,10 +41,10 @@ class="mat-basic" (click)="resetFilters()" > - Reset filters + {{ 'Reset filters' | translate }} </button> <button mat-raised-button color="accent" (click)="applyFilters()"> - Apply + {{ 'Apply' | translate }} </button> </div> </div> diff --git a/ui/projects/streampipes/shared-ui/src/lib/components/asset-browser/asset-browser-toolbar/asset-browser-toolbar.component.html b/ui/projects/streampipes/shared-ui/src/lib/components/asset-browser/asset-browser-toolbar/asset-browser-toolbar.component.html index dce9bb6e8d..1adfaf6fb4 100644 --- a/ui/projects/streampipes/shared-ui/src/lib/components/asset-browser/asset-browser-toolbar/asset-browser-toolbar.component.html +++ b/ui/projects/streampipes/shared-ui/src/lib/components/asset-browser/asset-browser-toolbar/asset-browser-toolbar.component.html @@ -17,7 +17,7 @@ --> <div fxFlex fxLayoutAlign="start center" *ngIf="expanded"> - <h4 class="ml-5">Browse assets</h4> + <h4 class="ml-5">{{ 'Browse assets' | translate }}</h4> </div> <div fxLayoutAlign="end center"> <button @@ -26,7 +26,7 @@ color="accent" [matMenuTriggerFor]="menu" #menuTrigger="matMenuTrigger" - matTooltip="Filter assets" + [matTooltip]="'Filter assets' | translate" (menuClosed)="menuTrigger.closeMenu()" > <mat-icon>filter_alt</mat-icon> diff --git a/ui/projects/streampipes/shared-ui/src/lib/components/asset-browser/asset-browser.component.html b/ui/projects/streampipes/shared-ui/src/lib/components/asset-browser/asset-browser.component.html index b84999e3c6..0a02d5c33e 100644 --- a/ui/projects/streampipes/shared-ui/src/lib/components/asset-browser/asset-browser.component.html +++ b/ui/projects/streampipes/shared-ui/src/lib/components/asset-browser/asset-browser.component.html @@ -50,17 +50,17 @@ fxLayout="column" fxFlex="100" > - <span class="asset-creation-hint" - >No assets found - use assets to better organize - resources!</span - > + <span class="asset-creation-hint">{{ + 'No assets found - use assets to better organize resources!' + | translate + }}</span> <button mat-button color="accent" class="mt-10" (click)="navigateToAssetManagement()" > - Manage assets + {{ 'Manage assets' | translate }} </button> </div> } @@ -70,7 +70,7 @@ class="asset-hierarchy asset-browser-text" fxLayoutAlign="center center" > - Asset Browser + {{ 'Asset Browser' | translate }} </div> } </sp-basic-view> diff --git a/ui/projects/streampipes/shared-ui/src/lib/components/asset-browser/asset-browser.component.ts b/ui/projects/streampipes/shared-ui/src/lib/components/asset-browser/asset-browser.component.ts index f9c027d136..bded79b834 100644 --- a/ui/projects/streampipes/shared-ui/src/lib/components/asset-browser/asset-browser.component.ts +++ b/ui/projects/streampipes/shared-ui/src/lib/components/asset-browser/asset-browser.component.ts @@ -23,6 +23,7 @@ import { OnDestroy, OnInit, Output, + inject, } from '@angular/core'; import { SpAssetBrowserService } from './asset-browser.service'; import { AssetBrowserData } from './asset-browser.model'; @@ -30,6 +31,7 @@ import { Subscription } from 'rxjs'; import { SpAsset } from '@streampipes/platform-services'; import { Router } from '@angular/router'; import { CurrentUserService } from '../../services/current-user.service'; +import { TranslateService } from '@ngx-translate/core'; @Component({ selector: 'sp-asset-browser', @@ -37,11 +39,13 @@ import { CurrentUserService } from '../../services/current-user.service'; styleUrls: ['./asset-browser.component.scss'], }) export class AssetBrowserComponent implements OnInit, OnDestroy { + translateService = inject(TranslateService); + @Input() showResources = false; @Input() - allResourcesAlias = 'Resources'; + allResourcesAlias = this.translateService.instant('Resources'); @Input() browserWidth = 20; diff --git a/ui/projects/streampipes/shared-ui/src/lib/components/basic-nav-tabs/basic-nav-tabs.component.html b/ui/projects/streampipes/shared-ui/src/lib/components/basic-nav-tabs/basic-nav-tabs.component.html index c613d3cda3..90fb47f37e 100644 --- a/ui/projects/streampipes/shared-ui/src/lib/components/basic-nav-tabs/basic-nav-tabs.component.html +++ b/ui/projects/streampipes/shared-ui/src/lib/components/basic-nav-tabs/basic-nav-tabs.component.html @@ -28,7 +28,7 @@ <button mat-icon-button color="accent" - matTooltip="Back" + [matTooltip]="'Back' | translate" (click)="navigateBack()" class="edit-menu-btn" data-cy="save-data-explorer-go-back-to-overview" diff --git a/ui/projects/streampipes/shared-ui/src/lib/components/basic-view/basic-view.component.html b/ui/projects/streampipes/shared-ui/src/lib/components/basic-view/basic-view.component.html index 59a322427e..84264219ee 100644 --- a/ui/projects/streampipes/shared-ui/src/lib/components/basic-view/basic-view.component.html +++ b/ui/projects/streampipes/shared-ui/src/lib/components/basic-view/basic-view.component.html @@ -32,7 +32,7 @@ <button mat-icon-button color="accent" - matTooltip="Back" + [matTooltip]="'Back' | translate" (click)="navigateBack()" class="edit-menu-btn" data-cy="save-data-explorer-go-back-to-overview" diff --git a/ui/projects/streampipes/shared-ui/src/lib/components/sp-exception-message/exception-details-dialog/exception-details-dialog.component.html b/ui/projects/streampipes/shared-ui/src/lib/components/sp-exception-message/exception-details-dialog/exception-details-dialog.component.html index 990888d2a3..79fc7f187a 100644 --- a/ui/projects/streampipes/shared-ui/src/lib/components/sp-exception-message/exception-details-dialog/exception-details-dialog.component.html +++ b/ui/projects/streampipes/shared-ui/src/lib/components/sp-exception-message/exception-details-dialog/exception-details-dialog.component.html @@ -29,7 +29,7 @@ class="mat-basic" (click)="close()" > - Close + {{ 'Close' | translate }} </button> </div> </div> diff --git a/ui/projects/streampipes/shared-ui/src/lib/components/sp-exception-message/exception-details/exception-details.component.html b/ui/projects/streampipes/shared-ui/src/lib/components/sp-exception-message/exception-details/exception-details.component.html index 03721063a2..8dfae6d560 100644 --- a/ui/projects/streampipes/shared-ui/src/lib/components/sp-exception-message/exception-details/exception-details.component.html +++ b/ui/projects/streampipes/shared-ui/src/lib/components/sp-exception-message/exception-details/exception-details.component.html @@ -32,10 +32,12 @@ > <span class="color-warn">{{ title }}</span> </div> - <div class="error-details-title">Probable cause</div> + <div class="error-details-title">{{ 'Probable cause' | translate }}</div> <div class="log-message" - [innerText]="message.cause || 'No more information'" + [innerText]=" + message.cause ? message.cause : ('No more information' | translate) + " ></div> <div class="mt-10"> <button @@ -44,11 +46,13 @@ color="accent" (click)="showDetails = !showDetails" > - Full details + {{ 'Full details' | translate }} </button> </div> <div fxFlex="100" fxLayout="column" *ngIf="showDetails" class="mt-10"> - <div class="error-details-title">Full stack trace</div> + <div class="error-details-title"> + {{ 'Full stack trace' | translate }} + </div> <div class="log-message"> <div [innerText]="message.fullStackTrace"></div> </div> diff --git a/ui/projects/streampipes/shared-ui/src/lib/components/sp-exception-message/sp-exception-message.component.html b/ui/projects/streampipes/shared-ui/src/lib/components/sp-exception-message/sp-exception-message.component.html index 2efd80acc1..9332b7c7c4 100644 --- a/ui/projects/streampipes/shared-ui/src/lib/components/sp-exception-message/sp-exception-message.component.html +++ b/ui/projects/streampipes/shared-ui/src/lib/components/sp-exception-message/sp-exception-message.component.html @@ -36,7 +36,11 @@ {{ messageTimestamp | date: 'short' }} </h5> <h5 data-cy="exception-message-title" kfxFlex> - {{ message.title || 'Error' }} + {{ + message.title + ? message.title + : ('Error' | translate) + }} </h5> </div> <span fxFlex></span> @@ -46,7 +50,9 @@ color="accent" (click)="openDetailsDialog()" > - <i class="material-icons">visibility</i> Details + <i class="material-icons">visibility</i> {{ + 'Details' | translate + }} </button> </div> </div> diff --git a/ui/projects/streampipes/shared-ui/src/lib/components/sp-exception-message/sp-exception-message.component.ts b/ui/projects/streampipes/shared-ui/src/lib/components/sp-exception-message/sp-exception-message.component.ts index 59860d99a1..7c8b783a97 100644 --- a/ui/projects/streampipes/shared-ui/src/lib/components/sp-exception-message/sp-exception-message.component.ts +++ b/ui/projects/streampipes/shared-ui/src/lib/components/sp-exception-message/sp-exception-message.component.ts @@ -16,11 +16,12 @@ * */ -import { Component, Input } from '@angular/core'; +import { Component, Input, inject } from '@angular/core'; import { SpLogMessage } from '@streampipes/platform-services'; import { DialogService } from '../../dialog/base-dialog/base-dialog.service'; import { PanelType } from '../../dialog/base-dialog/base-dialog.model'; import { SpExceptionDetailsDialogComponent } from './exception-details-dialog/exception-details-dialog.component'; +import { TranslateService } from '@ngx-translate/core'; @Component({ selector: 'sp-exception-message', @@ -28,6 +29,8 @@ import { SpExceptionDetailsDialogComponent } from './exception-details-dialog/ex styleUrls: ['./sp-exception-message.component.scss'], }) export class SpExceptionMessageComponent { + translateService = inject(TranslateService); + @Input() level = 'error'; @@ -46,7 +49,7 @@ export class SpExceptionMessageComponent { this.dialogService.open(SpExceptionDetailsDialogComponent, { panelType: PanelType.STANDARD_PANEL, width: '80vw', - title: 'Error Details', + title: this.translateService.instant('Error Details'), data: { message: this.message, }, diff --git a/ui/projects/streampipes/shared-ui/src/lib/components/sp-table/sp-table.component.html b/ui/projects/streampipes/shared-ui/src/lib/components/sp-table/sp-table.component.html index 52024357ff..c9134d4a7f 100644 --- a/ui/projects/streampipes/shared-ui/src/lib/components/sp-table/sp-table.component.html +++ b/ui/projects/streampipes/shared-ui/src/lib/components/sp-table/sp-table.component.html @@ -29,7 +29,7 @@ class="mat-cell" [colSpan]="columns.length" > - No entries available. + {{ 'No entries available.' | translate }} </td> </tr> </table> diff --git a/ui/projects/streampipes/shared-ui/src/lib/components/time-selector/refresh-interval-settings/refresh-interval-settings.component.html b/ui/projects/streampipes/shared-ui/src/lib/components/time-selector/refresh-interval-settings/refresh-interval-settings.component.html index 84f316bcda..f6fd561558 100644 --- a/ui/projects/streampipes/shared-ui/src/lib/components/time-selector/refresh-interval-settings/refresh-interval-settings.component.html +++ b/ui/projects/streampipes/shared-ui/src/lib/components/time-selector/refresh-interval-settings/refresh-interval-settings.component.html @@ -21,8 +21,8 @@ mat-button color="accent" [matMenuTriggerFor]="menu" - aria-label="Refresh interval" - matTooltip="Refresh interval" + [attr.aria-label]="'Refresh interval' | translate" + [matTooltip]="'Refresh interval' | translate" [disabled]="!liveRefreshEnabled" > <mat-icon>autorenew</mat-icon> diff --git a/ui/projects/streampipes/shared-ui/src/lib/components/time-selector/time-range-selector.component.html b/ui/projects/streampipes/shared-ui/src/lib/components/time-selector/time-range-selector.component.html index 2cee965d7f..8fe2a3e558 100644 --- a/ui/projects/streampipes/shared-ui/src/lib/components/time-selector/time-range-selector.component.html +++ b/ui/projects/streampipes/shared-ui/src/lib/components/time-selector/time-range-selector.component.html @@ -79,7 +79,7 @@ <div fxLayoutAlign="end center"> <button mat-icon-button - matTooltip="Refresh" + [matTooltip]="'Refresh' | translate" color="accent" (click)="updateTimeSettingsAndReload()" > diff --git a/ui/projects/streampipes/shared-ui/src/lib/components/time-selector/time-selector-menu/custom-time-range-selection/custom-time-range-selection.component.html b/ui/projects/streampipes/shared-ui/src/lib/components/time-selector/time-selector-menu/custom-time-range-selection/custom-time-range-selection.component.html index 3bf948975e..01564fb728 100644 --- a/ui/projects/streampipes/shared-ui/src/lib/components/time-selector/time-selector-menu/custom-time-range-selection/custom-time-range-selection.component.html +++ b/ui/projects/streampipes/shared-ui/src/lib/components/time-selector/time-selector-menu/custom-time-range-selection/custom-time-range-selection.component.html @@ -98,7 +98,7 @@ [disabled]="!dateSelectionComplete" *ngIf="enableTimePicker" > - Apply + {{ 'Apply' | translate }} </button> </div> </div> diff --git a/ui/projects/streampipes/shared-ui/src/lib/services/time-selection.service.ts b/ui/projects/streampipes/shared-ui/src/lib/services/time-selection.service.ts index e132bfb83e..725f202520 100644 --- a/ui/projects/streampipes/shared-ui/src/lib/services/time-selection.service.ts +++ b/ui/projects/streampipes/shared-ui/src/lib/services/time-selection.service.ts @@ -16,7 +16,7 @@ * */ -import { Injectable } from '@angular/core'; +import { Injectable, inject } from '@angular/core'; import { Subject } from 'rxjs'; import { DashboardLiveSettings, @@ -40,9 +40,12 @@ import { subYears, } from 'date-fns'; import { TimeSelectorLabel } from '../components/time-selector/time-selector.model'; +import { TranslateService } from '@ngx-translate/core'; @Injectable({ providedIn: 'root' }) export class TimeSelectionService { + translateService = inject(TranslateService); + legacyMappings: Record<number, string> = { 15: TimeSelectionConstants.LAST_15_MINUTES, 60: TimeSelectionConstants.LAST_HOUR, @@ -53,86 +56,88 @@ export class TimeSelectionService { }; defaultLabels: TimeSelectorLabel = { - quickSelectionLabel: 'Quick Selection', - customLabel: 'Custom', - maxDayRangeErrorLabel: + quickSelectionLabel: this.translateService.instant('Quick Selection'), + customLabel: this.translateService.instant('Custom'), + maxDayRangeErrorLabel: this.translateService.instant( 'Maximum of ${this.maxDayRange} days can be displayed. Please select a smaller range.', - timeRangeSelectorTooltip: 'Modify time range', + ), + timeRangeSelectorTooltip: + this.translateService.instant('Modify time range'), }; defaultQuickTimeSelections: QuickTimeSelection[] = [ { - label: 'Last 15 min', + label: this.translateService.instant('Last 15 min'), timeSelectionId: TimeSelectionConstants.LAST_15_MINUTES, startTime: now => subMinutes(now, 15), endTime: now => now, supportsLiveRefresh: true, }, { - label: 'Last 1 hour', + label: this.translateService.instant('Last 1 hour'), timeSelectionId: TimeSelectionConstants.LAST_HOUR, startTime: now => subHours(now, 1), endTime: now => now, supportsLiveRefresh: true, }, { - label: 'Last 1 day', + label: this.translateService.instant('Last 1 day'), timeSelectionId: TimeSelectionConstants.LAST_DAY, startTime: now => subDays(now, 1), endTime: now => now, supportsLiveRefresh: true, }, { - label: 'Last 1 week', + label: this.translateService.instant('Last 1 week'), timeSelectionId: TimeSelectionConstants.LAST_WEEK, startTime: now => subWeeks(now, 1), endTime: now => now, supportsLiveRefresh: true, }, { - label: 'Last 1 month', + label: this.translateService.instant('Last 1 month'), timeSelectionId: TimeSelectionConstants.LAST_MONTH, startTime: now => subMonths(now, 1), endTime: now => now, supportsLiveRefresh: true, }, { - label: 'Last 1 year', + label: this.translateService.instant('Last 1 year'), timeSelectionId: TimeSelectionConstants.LAST_YEAR, startTime: now => subYears(now, 1), endTime: now => now, supportsLiveRefresh: true, }, { - label: 'Current day', + label: this.translateService.instant('Current day'), timeSelectionId: TimeSelectionConstants.CURRENT_DAY, startTime: now => startOfDay(now), endTime: now => now, supportsLiveRefresh: true, }, { - label: 'Current hour', + label: this.translateService.instant('Current hour'), timeSelectionId: TimeSelectionConstants.CURRENT_HOUR, startTime: now => startOfHour(now), endTime: now => now, supportsLiveRefresh: true, }, { - label: 'Current week', + label: this.translateService.instant('Current week'), timeSelectionId: TimeSelectionConstants.CURRENT_WEEK, startTime: now => startOfWeek(now), endTime: now => now, supportsLiveRefresh: true, }, { - label: 'Current month', + label: this.translateService.instant('Current month'), timeSelectionId: TimeSelectionConstants.CURRENT_MONTH, startTime: now => startOfMonth(now), endTime: now => now, supportsLiveRefresh: true, }, { - label: 'Current year', + label: this.translateService.instant('Current year'), timeSelectionId: TimeSelectionConstants.CURRENT_YEAR, startTime: now => startOfYear(now), endTime: now => now, @@ -142,46 +147,46 @@ export class TimeSelectionService { defaultAvailableLiveSettingsOptions: DashboardLiveSettings[] = [ { - label: 'Off', + label: this.translateService.instant('Off'), refreshModeActive: false, }, { - label: '1 sec', + label: this.translateService.instant('1 sec'), refreshModeActive: true, refreshIntervalInSeconds: 1, }, { - label: '2 sec', + label: this.translateService.instant('2 sec'), refreshModeActive: true, refreshIntervalInSeconds: 2, }, { - label: '5 sec', + label: this.translateService.instant('5 sec'), refreshModeActive: true, refreshIntervalInSeconds: 5, }, { - label: '10 sec', + label: this.translateService.instant('10 sec'), refreshModeActive: true, refreshIntervalInSeconds: 10, }, { - label: '30 sec', + label: this.translateService.instant('30 sec'), refreshModeActive: true, refreshIntervalInSeconds: 30, }, { - label: '1 min', + label: this.translateService.instant('1 min'), refreshModeActive: true, refreshIntervalInSeconds: 60, }, { - label: '5 min', + label: this.translateService.instant('5 min'), refreshModeActive: true, refreshIntervalInSeconds: 300, }, { - label: '30 min', + label: this.translateService.instant('30 min'), refreshModeActive: true, refreshIntervalInSeconds: 60 * 30, }, diff --git a/ui/src/app/core-ui/configuration-code-panel/configuration-code-panel.component.html b/ui/src/app/core-ui/configuration-code-panel/configuration-code-panel.component.html index 7e232c3089..ace93cd333 100644 --- a/ui/src/app/core-ui/configuration-code-panel/configuration-code-panel.component.html +++ b/ui/src/app/core-ui/configuration-code-panel/configuration-code-panel.component.html @@ -27,7 +27,7 @@ <button mat-icon-button [cdkCopyToClipboard]="currentConfiguration" - matTooltip="Copy" + [matTooltip]="'Copy' | translate" > <mat-icon>content_copy</mat-icon> </button> @@ -46,7 +46,7 @@ <button mat-icon-button [cdkCopyToClipboard]="currentConfiguration" - matTooltip="Copy" + [matTooltip]="'Copy' | translate" > <mat-icon>content_copy</mat-icon> </button> diff --git a/ui/src/app/core-ui/core-ui.module.ts b/ui/src/app/core-ui/core-ui.module.ts index bc883c7620..24f4519fb8 100644 --- a/ui/src/app/core-ui/core-ui.module.ts +++ b/ui/src/app/core-ui/core-ui.module.ts @@ -113,6 +113,7 @@ import { ConfigurationCodePanelComponent } from './configuration-code-panel/conf import { JsonPrettyPrintPipe } from './pipes/json-pretty-print.pipe'; import { YamlPrettyPrintPipe } from './pipes/yaml-pretty-print.pipe'; import { TopicsComponent } from './topics/topics.component'; +import { TranslateModule } from '@ngx-translate/core'; @NgModule({ imports: [ @@ -162,6 +163,7 @@ import { TopicsComponent } from './topics/topics.component'; QuillModule.forRoot(), MatTreeModule, MarkdownModule.forRoot(), + TranslateModule.forChild(), LeafletModule, ], declarations: [ diff --git a/ui/src/app/core-ui/help/help.component.html b/ui/src/app/core-ui/help/help.component.html index fcdfbe7332..5c41bdbbb4 100644 --- a/ui/src/app/core-ui/help/help.component.html +++ b/ui/src/app/core-ui/help/help.component.html @@ -62,7 +62,7 @@ class="mat-basic" (click)="close()" > - Close + {{ 'Close' | translate }} </button> </div> </div> diff --git a/ui/src/app/core-ui/help/help.component.ts b/ui/src/app/core-ui/help/help.component.ts index fcfc5b8d2d..e918301fdc 100644 --- a/ui/src/app/core-ui/help/help.component.ts +++ b/ui/src/app/core-ui/help/help.component.ts @@ -16,10 +16,11 @@ * */ -import { Component, Input, OnInit } from '@angular/core'; +import { Component, Input, OnInit, inject } from '@angular/core'; import { SpDataStream } from '@streampipes/platform-services'; import { DialogRef } from '@streampipes/shared-ui'; import { PipelineElementUnion } from '../../editor/model/editor.model'; +import { TranslateService } from '@ngx-translate/core'; @Component({ selector: 'sp-pipeline-element-help', @@ -29,7 +30,13 @@ import { PipelineElementUnion } from '../../editor/model/editor.model'; export class HelpComponent implements OnInit { selectedTabIndex = 0; - availableTabs = ['Values', 'Documentation']; + translateService = inject(TranslateService); + + availableTabs = [ + this.translateService.instant('TOPICS'), + this.translateService.instant('CODE'), + ]; + tabs: string[] = []; @Input() diff --git a/ui/src/app/core-ui/loading-indicator/loading-indicator.component.ts b/ui/src/app/core-ui/loading-indicator/loading-indicator.component.ts index 1378cf7811..d3c2ebb941 100644 --- a/ui/src/app/core-ui/loading-indicator/loading-indicator.component.ts +++ b/ui/src/app/core-ui/loading-indicator/loading-indicator.component.ts @@ -16,7 +16,8 @@ * */ -import { Component, Input } from '@angular/core'; +import { Component, Input, inject } from '@angular/core'; +import { TranslateService } from '@ngx-translate/core'; @Component({ selector: 'sp-loading-indicator', @@ -24,6 +25,8 @@ import { Component, Input } from '@angular/core'; styleUrls: ['./loading-indicator.component.scss'], }) export class LoadingIndicatorComponent { + translateService = inject(TranslateService); + @Input() - message = 'Loading'; + message = this.translateService.instant('Loading'); } diff --git a/ui/src/app/core-ui/monitoring/simple-logs/simple-logs.component.html b/ui/src/app/core-ui/monitoring/simple-logs/simple-logs.component.html index abc33614c9..6963eb8c4b 100644 --- a/ui/src/app/core-ui/monitoring/simple-logs/simple-logs.component.html +++ b/ui/src/app/core-ui/monitoring/simple-logs/simple-logs.component.html @@ -26,7 +26,9 @@ fxLayoutAlign="center center" *ngIf="!logs || logs.length === 0" > - <h5 class="text-center">(no log messages available)</h5> + <h5 class="text-center"> + {{ '(no log messages available)' | translate }} + </h5> </div> <div fxFlex="100" fxLayout="column" *ngIf="logs && logs.length > 0"> <div *ngFor="let logEntry of logs"> diff --git a/ui/src/app/core-ui/object-permission-dialog/object-permission-dialog.component.html b/ui/src/app/core-ui/object-permission-dialog/object-permission-dialog.component.html index ba806e1b7b..b71686330d 100644 --- a/ui/src/app/core-ui/object-permission-dialog/object-permission-dialog.component.html +++ b/ui/src/app/core-ui/object-permission-dialog/object-permission-dialog.component.html @@ -22,9 +22,11 @@ <h4>{{ headerTitle }}</h4> <form [formGroup]="parentForm" fxFlex="100" fxLayout="column"> <div class="general-options-panel" fxLayout="column"> - <span class="general-options-header">Basics</span> + <span class="general-options-header">{{ + 'Basics' | translate + }}</span> <mat-form-field color="accent"> - <mat-label>Owner</mat-label> + <mat-label>{{ 'Owner' | translate }}</mat-label> <mat-select formControlName="owner" fxFlex required> <mat-option *ngFor="let user of allUsers" @@ -37,7 +39,7 @@ data-cy="permission-public-element" formControlName="publicElement" > - Public Element + {{ 'Public Element' | translate }} </mat-checkbox> </div> <div @@ -45,10 +47,17 @@ class="general-options-panel" *ngIf="!permission.publicElement" > - <span class="general-options-header">Users</span> + <span class="general-options-header">{{ + 'Users' | translate + }}</span> <mat-form-field color="accent"> - <mat-label>Authorized Users</mat-label> - <mat-chip-grid #chipList aria-label="User selection"> + <mat-label>{{ + 'Authorized Users' | translate + }}</mat-label> + <mat-chip-grid + #chipList + [attr.aria-label]="'User selection' | translate" + > <mat-chip-row *ngFor="let user of grantedUserAuthorities" selectable="true" @@ -61,7 +70,7 @@ </button> </mat-chip-row> <input - placeholder="Add" + [placeholder]="'Add' | translate" #userInput [formControl]="userCtrl" [matAutocomplete]="auto" @@ -92,10 +101,17 @@ class="general-options-panel" *ngIf="!permission.publicElement" > - <span class="general-options-header">Groups</span> + <span class="general-options-header">{{ + 'Groups' | translate + }}</span> <mat-form-field color="accent"> - <mat-label>Authorized Groups</mat-label> - <mat-chip-grid #chipList aria-label="Group selection"> + <mat-label>{{ + 'Authorized Groups' | translate + }}</mat-label> + <mat-chip-grid + #chipList + [attr.aria-label]="'Group selection' | translate" + > <mat-chip-row *ngFor="let group of grantedGroupAuthorities" selectable="true" @@ -108,7 +124,7 @@ </button> </mat-chip-row> <input - placeholder="Add" + [placeholder]="'Add' | translate" #groupInput [formControl]="groupCtrl" [matAutocomplete]="auto" @@ -147,7 +163,8 @@ [disabled]="!parentForm.valid" data-cy="sp-manage-permissions-save" > - <i class="material-icons">save</i><span> Save</span> + <i class="material-icons">save</i + ><span> {{ 'Save' | translate }}</span> </button> <button mat-button @@ -155,7 +172,7 @@ class="mat-basic" (click)="close(false)" > - Cancel + {{ 'Cancel' | translate }} </button> </div> </div> diff --git a/ui/src/app/core-ui/pipeline-element-documentation/pipeline-element-documentation.component.html b/ui/src/app/core-ui/pipeline-element-documentation/pipeline-element-documentation.component.html index 59a122dc28..ceee5313d8 100644 --- a/ui/src/app/core-ui/pipeline-element-documentation/pipeline-element-documentation.component.html +++ b/ui/src/app/core-ui/pipeline-element-documentation/pipeline-element-documentation.component.html @@ -23,5 +23,5 @@ data-cy="pipeline-element-documentation-markdown" ></markdown> <p *ngIf="error" [ngClass]="useStyling ? 'note' : ''"> - (no documentation available) + {{ '(no documentation available)' | translate }} </p> diff --git a/ui/src/app/core-ui/pipeline-element-runtime-info/live-preview-error/live-preview-error.component.html b/ui/src/app/core-ui/pipeline-element-runtime-info/live-preview-error/live-preview-error.component.html index 81e1a2d160..b373943003 100644 --- a/ui/src/app/core-ui/pipeline-element-runtime-info/live-preview-error/live-preview-error.component.html +++ b/ui/src/app/core-ui/pipeline-element-runtime-info/live-preview-error/live-preview-error.component.html @@ -17,5 +17,5 @@ --> <div> - <p>Preview is currently unavailable.</p> + <p>{{ 'Preview is currently unavailable.' | translate }}</p> </div> diff --git a/ui/src/app/core-ui/pipeline-element-runtime-info/live-preview-loading/live-preview-loading.component.html b/ui/src/app/core-ui/pipeline-element-runtime-info/live-preview-loading/live-preview-loading.component.html index ddd4d82e80..379a564480 100644 --- a/ui/src/app/core-ui/pipeline-element-runtime-info/live-preview-loading/live-preview-loading.component.html +++ b/ui/src/app/core-ui/pipeline-element-runtime-info/live-preview-loading/live-preview-loading.component.html @@ -27,6 +27,6 @@ </mat-spinner> </div> <div fxLayoutAlign="center"> - <h3>Gathering data for live preview...</h3> + <h3>{{ 'Gathering data for live preview...' | translate }}</h3> </div> </div> diff --git a/ui/src/app/core-ui/pipeline-element-runtime-info/live-preview-table/live-preview-table.component.html b/ui/src/app/core-ui/pipeline-element-runtime-info/live-preview-table/live-preview-table.component.html index ceb6851ab4..836f044115 100644 --- a/ui/src/app/core-ui/pipeline-element-runtime-info/live-preview-table/live-preview-table.component.html +++ b/ui/src/app/core-ui/pipeline-element-runtime-info/live-preview-table/live-preview-table.component.html @@ -17,11 +17,11 @@ --> <div data-cy="sp-connect-adapter-success-live-preview"> - <p *ngIf="showTitle">Here is a preview of your data:</p> + <p *ngIf="showTitle">{{ 'Here is a preview of your data:' | translate }}</p> <table mat-table [dataSource]="runtimeInfo"> <ng-container matColumnDef="runtimeName"> <th mat-header-cell *matHeaderCellDef> - <strong>Runtime Name</strong> + <strong>{{ 'Runtime Name' | translate }}</strong> </th> <td mat-cell *matCellDef="let element"> <div class="runtime-name">{{ element.runtimeName }}</div> @@ -30,7 +30,7 @@ <ng-container matColumnDef="label"> <th mat-header-cell *matHeaderCellDef> - <strong>Field Name</strong> + <strong>{{ 'Field Name' | translate }}</strong> </th> <td mat-cell *matCellDef="let element"> {{ element.label }} @@ -39,7 +39,7 @@ <ng-container matColumnDef="description"> <th mat-header-cell *matHeaderCellDef> - <strong>Description</strong> + <strong>{{ 'Description' | translate }}</strong> </th> <td mat-cell *matCellDef="let element"> {{ element.description }} @@ -47,21 +47,25 @@ </ng-container> <ng-container matColumnDef="runtimeType"> - <th mat-header-cell *matHeaderCellDef><strong>Type</strong></th> + <th mat-header-cell *matHeaderCellDef> + <strong>{{ 'Type' | translate }}</strong> + </th> <td mat-cell *matCellDef="let element"> {{ element.runtimeType }} </td> </ng-container> <ng-container matColumnDef="value"> - <th mat-header-cell *matHeaderCellDef><strong>Value</strong></th> + <th mat-header-cell *matHeaderCellDef> + <strong>{{ 'Value' | translate }}</strong> + </th> <td mat-cell *matCellDef="let element" style="width: 200px"> @if (element.value === undefined) { <div data-cy="live-preview-table-no-data" class="value no-data" > - no data + {{ 'no data' | translate }} </div> } @else { <ng-container *ngIf="element.isImage"> diff --git a/ui/src/app/core-ui/pipeline-element-runtime-info/pipeline-element-schema.service.ts b/ui/src/app/core-ui/pipeline-element-runtime-info/pipeline-element-schema.service.ts index 710143fa00..11e9824f83 100644 --- a/ui/src/app/core-ui/pipeline-element-runtime-info/pipeline-element-schema.service.ts +++ b/ui/src/app/core-ui/pipeline-element-runtime-info/pipeline-element-schema.service.ts @@ -16,7 +16,7 @@ * */ -import { Injectable } from '@angular/core'; +import { Injectable, inject } from '@angular/core'; import { DataType, EventPropertyList, @@ -24,26 +24,29 @@ import { EventPropertyUnion, SemanticType, } from '@streampipes/platform-services'; +import { TranslateService } from '@ngx-translate/core'; @Injectable({ providedIn: 'root' }) export class PipelineElementSchemaService { + translateService = inject(TranslateService); + getFriendlyRuntimeType(ep: EventPropertyUnion): string { if (ep instanceof EventPropertyPrimitive) { if (this.isTimestamp(ep)) { - return 'Timestamp'; + return this.translateService.instant('Timestamp'); } else if (this.isImage(ep)) { - return 'Image'; + return this.translateService.instant('Image'); } else if (DataType.isNumberType(ep.runtimeType)) { - return 'Number'; + return this.translateService.instant('Number'); } else if (DataType.isBooleanType(ep.runtimeType)) { - return 'Boolean'; + return this.translateService.instant('Boolean'); } else { - return 'Text'; + return this.translateService.instant('Text'); } } else if (ep instanceof EventPropertyList) { - return 'List'; + return this.translateService.instant('List'); } else { - return 'Nested'; + return this.translateService.instant('Nested'); } } diff --git a/ui/src/app/core-ui/pipeline-element-template-config/pipeline-element-template-config-item/pipeline-element-template-config-item.component.html b/ui/src/app/core-ui/pipeline-element-template-config/pipeline-element-template-config-item/pipeline-element-template-config-item.component.html index 877298dc49..2aee082769 100644 --- a/ui/src/app/core-ui/pipeline-element-template-config/pipeline-element-template-config-item/pipeline-element-template-config-item.component.html +++ b/ui/src/app/core-ui/pipeline-element-template-config/pipeline-element-template-config-item/pipeline-element-template-config-item.component.html @@ -23,6 +23,6 @@ name="store" class="sp" color="accent" - >Store as template + >{{ 'Store as template' | translate }} </mat-checkbox> </div> diff --git a/ui/src/app/core-ui/pipeline-element-template-config/pipeline-element-template-config.component.html b/ui/src/app/core-ui/pipeline-element-template-config/pipeline-element-template-config.component.html index a6c9c8e2de..78a248d288 100644 --- a/ui/src/app/core-ui/pipeline-element-template-config/pipeline-element-template-config.component.html +++ b/ui/src/app/core-ui/pipeline-element-template-config/pipeline-element-template-config.component.html @@ -18,9 +18,9 @@ <div class="p-15" *ngIf="templateConfigs"> <div fxFlex="100" fxLayout="column"> - <h4>Basics</h4> + <h4>{{ 'Basics' | translate }}</h4> <mat-form-field fxFlex color="accent"> - <mat-label>Template name</mat-label> + <mat-label>{{ 'Template name' | translate }}</mat-label> <input [(ngModel)]="template.templateName" matInput @@ -31,7 +31,7 @@ /> </mat-form-field> <mat-form-field fxFlex color="accent"> - <mat-label>Template description</mat-label> + <mat-label>{{ 'Template description' | translate }}</mat-label> <input [(ngModel)]="template.templateDescription" matInput @@ -42,10 +42,10 @@ /> </mat-form-field> <mat-divider class="divider"></mat-divider> - <h4>Configuration</h4> - <mat-hint style="margin-bottom: 10px" - >(dynamic options cannot be saved and are hidden)</mat-hint - > + <h4>{{ 'Configuration' | translate }}</h4> + <mat-hint style="margin-bottom: 10px">{{ + '(dynamic options cannot be saved and are hidden)' | translate + }}</mat-hint> <div fxLayout="column" *ngFor=" @@ -67,7 +67,7 @@ </div> </div> <mat-divider class="divider"></mat-divider> - <h4>Existing templates</h4> + <h4>{{ 'Existing templates' | translate }}</h4> <div fxLayout="column" *ngFor="let template of existingTemplates" @@ -92,7 +92,7 @@ <mat-hint style="margin-bottom: 10px" *ngIf="existingTemplates.length === 0" - >(no templates available)</mat-hint + >{{ '(no templates available)' | translate }}</mat-hint > </div> </div> diff --git a/ui/src/app/core-ui/pipeline/pipeline-started-status/pipeline-started-status.component.html b/ui/src/app/core-ui/pipeline/pipeline-started-status/pipeline-started-status.component.html index 45e70af034..bec1e6f214 100644 --- a/ui/src/app/core-ui/pipeline/pipeline-started-status/pipeline-started-status.component.html +++ b/ui/src/app/core-ui/pipeline/pipeline-started-status/pipeline-started-status.component.html @@ -45,8 +45,10 @@ !forceStopDisabled " class="message-small" - >You can perform a forced stop, which will stop and reset the - pipeline status.</span + >{{ + 'You can perform a forced stop, which will stop and reset the pipeline status.' + | translate + }}</span > </div> <div fxLayout="row"> @@ -56,8 +58,12 @@ class="mat-basic" (click)="toggleStatusDetailsVisible()" > - <div *ngIf="!statusDetailsVisible">Show Details</div> - <div *ngIf="statusDetailsVisible">Hide Details</div> + <div *ngIf="!statusDetailsVisible"> + {{ 'Show Details' | translate }} + </div> + <div *ngIf="statusDetailsVisible"> + {{ 'Hide Details' | translate }} + </div> </button> <button mat-button @@ -71,7 +77,7 @@ !forceStopDisabled " > - <div>Force stop</div> + <div>{{ 'Force stop' | translate }}</div> </button> </div> diff --git a/ui/src/app/core-ui/static-properties/base/abstract-validated-static-property.ts b/ui/src/app/core-ui/static-properties/base/abstract-validated-static-property.ts index a91a606691..bd0ca05b58 100644 --- a/ui/src/app/core-ui/static-properties/base/abstract-validated-static-property.ts +++ b/ui/src/app/core-ui/static-properties/base/abstract-validated-static-property.ts @@ -19,7 +19,8 @@ import { StaticProperty } from '@streampipes/platform-services'; import { AbstractStaticPropertyRenderer } from './abstract-static-property'; import { UntypedFormControl, ValidatorFn } from '@angular/forms'; -import { Directive, OnDestroy } from '@angular/core'; +import { Directive, OnDestroy, inject } from '@angular/core'; +import { TranslateService } from '@ngx-translate/core'; @Directive() export abstract class AbstractValidatedStaticPropertyRenderer< @@ -28,7 +29,8 @@ export abstract class AbstractValidatedStaticPropertyRenderer< extends AbstractStaticPropertyRenderer<T> implements OnDestroy { - errorMessage = 'Please enter a value'; + translateService = inject(TranslateService); + errorMessage = this.translateService.instant('Please enter a value'); fieldValid: boolean; constructor() { diff --git a/ui/src/app/core-ui/static-properties/static-code-input/static-code-input.component.html b/ui/src/app/core-ui/static-properties/static-code-input/static-code-input.component.html index e7273b1026..44cdf163cc 100644 --- a/ui/src/app/core-ui/static-properties/static-code-input/static-code-input.component.html +++ b/ui/src/app/core-ui/static-properties/static-code-input/static-code-input.component.html @@ -26,7 +26,7 @@ (click)="resetCode()" style="margin-right: 10px; margin-bottom: 10px" > - Reset code template + {{ 'Reset code template' | translate }} </button> <button mat-button @@ -37,7 +37,7 @@ [attr.data-cy]="'reset-code-' + fieldName" style="margin-right: 10px; margin-bottom: 10px" > - Clean code + {{ 'Clean code' | translate }} </button> </div> <div fxFlex="100" fxLayout="row"> diff --git a/ui/src/app/core-ui/static-properties/static-collection/add-to-collection/add-to-collection.component.html b/ui/src/app/core-ui/static-properties/static-collection/add-to-collection/add-to-collection.component.html index 45536fd8bf..65aa7a0491 100644 --- a/ui/src/app/core-ui/static-properties/static-collection/add-to-collection/add-to-collection.component.html +++ b/ui/src/app/core-ui/static-properties/static-collection/add-to-collection/add-to-collection.component.html @@ -18,17 +18,17 @@ <div *ngIf="!showFileSelecion"> <button mat-button mat-flat-button (click)="add()"> <mat-icon class="icon">add</mat-icon> - <span>Add</span> + <span>{{ 'Add' | translate }}</span> </button> <button mat-button mat-flat-button (click)="selectFileSelection()"> <mat-icon class="icon">add</mat-icon> - <span>Import from file</span> + <span>{{ 'Import from file' | translate }}</span> </button> </div> <div *ngIf="showFileSelecion"> <button mat-button mat-flat-button (click)="closeFileSelection()"> <mat-icon class="icon">arrow_back</mat-icon> - <span>Back</span> + <span>{{ 'Back' | translate }}</span> </button> <div fxFlex="100" style="margin: 5px; width: 100%"> <mat-form-field @@ -37,7 +37,7 @@ color="accent" *ngIf="!hasError" > - <input matInput placeholder="File" disabled /> + <input matInput [placeholder]="'File' | translate" disabled /> <input #fileInput type="file" diff --git a/ui/src/app/core-ui/static-properties/static-collection/add-to-collection/add-to-collection.component.ts b/ui/src/app/core-ui/static-properties/static-collection/add-to-collection/add-to-collection.component.ts index b54ce926fd..41cafa5d8a 100644 --- a/ui/src/app/core-ui/static-properties/static-collection/add-to-collection/add-to-collection.component.ts +++ b/ui/src/app/core-ui/static-properties/static-collection/add-to-collection/add-to-collection.component.ts @@ -16,7 +16,7 @@ * */ -import { Component, EventEmitter, Input, Output } from '@angular/core'; +import { Component, EventEmitter, Input, Output, inject } from '@angular/core'; import { StaticPropertyUtilService } from '../../static-property-util.service'; import { FreeTextStaticProperty, @@ -24,6 +24,7 @@ import { StaticProperty, } from '@streampipes/platform-services'; import { Observable } from 'rxjs'; +import { TranslateService } from '@ngx-translate/core'; @Component({ selector: 'sp-add-to-collection', @@ -31,6 +32,8 @@ import { Observable } from 'rxjs'; styleUrls: ['./add-to-collection.component.scss'], }) export class AddToCollectionComponent { + translateService = inject(TranslateService); + @Input() public staticPropertyTemplate: StaticProperty; @@ -45,7 +48,7 @@ export class AddToCollectionComponent { public fileName: string; public hasError = false; - public errorMessage = 'This is a test'; + public errorMessage = this.translateService.instant('This is a test'); constructor(private staticPropertyUtil: StaticPropertyUtilService) {} @@ -160,11 +163,13 @@ export class AddToCollectionComponent { option.selected = true; } else { this.setError( - 'Error in line ' + - rowNumber + - '. Value for "' + - property.label + - '" is not supported', + this.translateService.instant( + 'Error in line {{rowNumber}}. Value for "{{property}}" is not supported.', + { + rowNumber, + property: property.label, + }, + ), ); } } @@ -176,11 +181,13 @@ export class AddToCollectionComponent { ) { if (row[property.label] === undefined || row[property.label] === '') { this.setError( - 'Error in line ' + - rowNumber + - '. Value for "' + - property.label + - '" is not set', + this.translateService.instant( + 'Error in line {{rowNumber}}. Value for "{{property}}" is not set.', + { + rowNumber, + property: property.label, + }, + ), ); } else { property.value = row[property.label]; diff --git a/ui/src/app/core-ui/static-properties/static-file-input/static-file-input.component.html b/ui/src/app/core-ui/static-properties/static-file-input/static-file-input.component.html index 0c3e1ebca6..d91cd84ca6 100644 --- a/ui/src/app/core-ui/static-properties/static-file-input/static-file-input.component.html +++ b/ui/src/app/core-ui/static-properties/static-file-input/static-file-input.component.html @@ -23,12 +23,12 @@ [formControl]="chooseExistingFileControl" color="accent" > - <mat-radio-button style="margin-right: 10px" [value]="true" - >Choose existing file</mat-radio-button - > - <mat-radio-button [value]="false" - >Upload new file</mat-radio-button - > + <mat-radio-button style="margin-right: 10px" [value]="true">{{ + 'Choose existing file' | translate + }}</mat-radio-button> + <mat-radio-button [value]="false">{{ + 'Upload new file' | translate + }}</mat-radio-button> </mat-radio-group> </div> <div @@ -39,7 +39,7 @@ <input data-cy="file-input-file-name" type="text" - placeholder="Select file" + [placeholder]="'Select file' | translate" formControlName="{{ fieldName }}" matInput [matAutocomplete]="auto" @@ -48,7 +48,7 @@ *ngIf="selectedFile" matSuffix mat-icon-button - aria-label="Clear" + [attr.aria-label]="'Clear' | translate" (click)="selectedFile = {}" > <mat-icon>close</mat-icon> @@ -120,7 +120,7 @@ (click)="upload()" [disabled]="!fileName" > - Upload + {{ 'Upload' | translate }} </button> </div> </div> diff --git a/ui/src/app/core-ui/static-properties/static-file-input/static-file-input.component.ts b/ui/src/app/core-ui/static-properties/static-file-input/static-file-input.component.ts index 69ed38be1d..9f6a514e11 100644 --- a/ui/src/app/core-ui/static-properties/static-file-input/static-file-input.component.ts +++ b/ui/src/app/core-ui/static-properties/static-file-input/static-file-input.component.ts @@ -16,7 +16,7 @@ * */ -import { Component, EventEmitter, OnInit, Output } from '@angular/core'; +import { Component, EventEmitter, OnInit, Output, inject } from '@angular/core'; import { HttpEventType, HttpResponse } from '@angular/common/http'; import { FileMetadata, @@ -28,6 +28,7 @@ import { AbstractValidatedStaticPropertyRenderer } from '../base/abstract-valida import { UntypedFormControl, ValidatorFn, Validators } from '@angular/forms'; import { MatDialog, MatDialogRef } from '@angular/material/dialog'; import { FileRenameDialogComponent } from '../../../configuration/dialog/file-rename/file-rename-dialog.component'; +import { TranslateService } from '@ngx-translate/core'; @Component({ selector: 'sp-static-file-input', @@ -40,6 +41,8 @@ export class StaticFileInputComponent { public chooseExistingFileControl = new UntypedFormControl(); + translateService = inject(TranslateService); + dialogRef: MatDialogRef<FileRenameDialogComponent>; fileName: string; @@ -47,7 +50,7 @@ export class StaticFileInputComponent selectedUploadFile: File; hasInput: boolean; - errorMessage = 'Please enter a value'; + errorMessage = this.translateService.instant('Please enter a value'); uploadStatus = 0; diff --git a/ui/src/app/core-ui/static-properties/static-free-input/static-free-input.component.html b/ui/src/app/core-ui/static-properties/static-free-input/static-free-input.component.html index a17386325c..16ef21767d 100644 --- a/ui/src/app/core-ui/static-properties/static-free-input/static-free-input.component.html +++ b/ui/src/app/core-ui/static-properties/static-free-input/static-free-input.component.html @@ -66,7 +66,7 @@ fxLayout="column" *ngIf="staticProperty.placeholdersSupported" > - <h5>Possible placeholders:</h5> + <h5>{{ 'Possible placeholders:' | translate }}</h5> <div fxFlex="100" fxLayout="row" style="background: white"> <mat-chip-list style="margin-bottom: 10px"> <mat-chip diff --git a/ui/src/app/core-ui/static-properties/static-free-input/static-free-input.component.ts b/ui/src/app/core-ui/static-properties/static-free-input/static-free-input.component.ts index e71552b7ea..3b395fe38e 100644 --- a/ui/src/app/core-ui/static-properties/static-free-input/static-free-input.component.ts +++ b/ui/src/app/core-ui/static-properties/static-free-input/static-free-input.component.ts @@ -16,7 +16,7 @@ * */ -import { Component, OnInit, ViewChild } from '@angular/core'; +import { Component, OnInit, ViewChild, inject } from '@angular/core'; import { ValidatorFn, Validators } from '@angular/forms'; import { ConfigurationInfo } from '../../../connect/model/ConfigurationInfo'; import { @@ -31,6 +31,7 @@ import { } from '../input.validator'; import { AbstractValidatedStaticPropertyRenderer } from '../base/abstract-validated-static-property'; import { QuillEditorComponent } from 'ngx-quill'; +import { TranslateService } from '@ngx-translate/core'; @Component({ selector: 'sp-app-static-free-input', @@ -41,6 +42,7 @@ export class StaticFreeInputComponent extends AbstractValidatedStaticPropertyRenderer<FreeTextStaticProperty> implements OnInit { + translateService = inject(TranslateService); quillModules: any = { toolbar: [ ['bold', 'italic', 'underline', 'strike'], @@ -78,15 +80,21 @@ export class StaticFreeInputComponent DataType.isNumberType(this.staticProperty.requiredDomainProperty) ) { validators.push(ValidateNumber); - this.errorMessage = 'The value should be a number'; + this.errorMessage = this.translateService.instant( + 'The value should be a number', + ); } else if ( this.staticProperty.requiredDomainProperty === SemanticType.SO_URL ) { validators.push(ValidateUrl); - this.errorMessage = 'Please enter a valid URL'; + this.errorMessage = this.translateService.instant( + 'Please enter a valid URL', + ); } else if (this.staticProperty.requiredDatatype === DataType.STRING) { validators.push(ValidateString); - this.errorMessage = 'Please enter a valid String'; + this.errorMessage = this.translateService.instant( + 'Please enter a valid String', + ); } return validators; diff --git a/ui/src/app/core-ui/static-properties/static-mapping-nary/static-mapping-nary.component.html b/ui/src/app/core-ui/static-properties/static-mapping-nary/static-mapping-nary.component.html index 6843030344..dfa3038273 100644 --- a/ui/src/app/core-ui/static-properties/static-mapping-nary/static-mapping-nary.component.html +++ b/ui/src/app/core-ui/static-properties/static-mapping-nary/static-mapping-nary.component.html @@ -26,7 +26,7 @@ (click)="selectAll()" style="margin-right: 10px; margin-left: 10px" > - Select all + {{ 'Select all' | translate }} </button> <button mat-button @@ -34,7 +34,7 @@ class="mat-basic small-button" (click)="selectNone()" > - Select none + {{ 'Select none' | translate }} </button> </div> <div fxFlex="100" fxLayout="column" style="margin-top: 10px"> diff --git a/ui/src/app/core-ui/static-properties/static-runtime-resolvable-any-input/static-runtime-resolvable-any-input.component.html b/ui/src/app/core-ui/static-properties/static-runtime-resolvable-any-input/static-runtime-resolvable-any-input.component.html index ac1c4f7e54..fff60b9417 100644 --- a/ui/src/app/core-ui/static-properties/static-runtime-resolvable-any-input/static-runtime-resolvable-any-input.component.html +++ b/ui/src/app/core-ui/static-properties/static-runtime-resolvable-any-input/static-runtime-resolvable-any-input.component.html @@ -26,7 +26,7 @@ (click)="selectAll(true)" [disabled]="!showOptions" > - <span>Select all</span> + <span>{{ 'Select all' | translate }}</span> </button> <button mat-button @@ -35,7 +35,7 @@ (click)="selectAll(false)" [disabled]="!showOptions" > - <span>Select none</span> + <span>{{ 'Select none' | translate }}</span> </button> <button mat-button @@ -45,7 +45,7 @@ (click)="loadOptionsFromRestApi()" [disabled]="!showOptions" > - <span>Reload</span> + <span>{{ 'Reload' | translate }}</span> </button> <mat-spinner *ngIf="loading" @@ -66,7 +66,7 @@ </mat-checkbox> </div> <div fxLayout="column" *ngIf="!showOptions && !loading" class="mb-10"> - <span>(waiting for input)</span> + <span>{{ '(waiting for input)' | translate }}</span> </div> <div *ngIf="staticProperty.horizontalRendering && showOptions"> diff --git a/ui/src/app/core-ui/static-properties/static-runtime-resolvable-group/static-runtime-resolvable-group.component.html b/ui/src/app/core-ui/static-properties/static-runtime-resolvable-group/static-runtime-resolvable-group.component.html index c1c31055f4..4d319d7576 100644 --- a/ui/src/app/core-ui/static-properties/static-runtime-resolvable-group/static-runtime-resolvable-group.component.html +++ b/ui/src/app/core-ui/static-properties/static-runtime-resolvable-group/static-runtime-resolvable-group.component.html @@ -26,7 +26,7 @@ (click)="loadOptionsFromRestApi()" style="margin-right: 10px; margin-left: 10px" > - <span>Reload</span> + <span>{{ 'Reload' | translate }}</span> </button> </div> <div *ngIf="!staticProperty.horizontalRendering" fxLayout="column"> diff --git a/ui/src/app/core-ui/static-properties/static-runtime-resolvable-oneof-input/static-runtime-resolvable-oneof-input.component.html b/ui/src/app/core-ui/static-properties/static-runtime-resolvable-oneof-input/static-runtime-resolvable-oneof-input.component.html index 555b4d2a80..f49979e2d1 100644 --- a/ui/src/app/core-ui/static-properties/static-runtime-resolvable-oneof-input/static-runtime-resolvable-oneof-input.component.html +++ b/ui/src/app/core-ui/static-properties/static-runtime-resolvable-oneof-input/static-runtime-resolvable-oneof-input.component.html @@ -28,7 +28,7 @@ [disabled]="!showOptions" style="margin-right: 10px; margin-left: 10px" > - <span>Reload</span> + <span>{{ 'Reload' | translate }}</span> </button> </div> <div fxLayout="column" *ngIf="error" class="mt-10"> @@ -57,7 +57,7 @@ *ngIf="!showOptions && !loading" class="mt-10" > - <span>(waiting for input)</span> + <span>{{ '(waiting for input)' | translate }}</span> </div> <div fxLayout="column" *ngIf="loading"> <mat-spinner diff --git a/ui/src/app/core-ui/static-properties/static-runtime-resolvable-tree-input/static-tree-input-browse-nodes/static-tree-input-browse-nodes.component.html b/ui/src/app/core-ui/static-properties/static-runtime-resolvable-tree-input/static-tree-input-browse-nodes/static-tree-input-browse-nodes.component.html index 4f41a8c837..071b995f72 100644 --- a/ui/src/app/core-ui/static-properties/static-runtime-resolvable-tree-input/static-tree-input-browse-nodes/static-tree-input-browse-nodes.component.html +++ b/ui/src/app/core-ui/static-properties/static-runtime-resolvable-tree-input/static-tree-input-browse-nodes/static-tree-input-browse-nodes.component.html @@ -18,7 +18,9 @@ <div class="tree-input-header" fxLayoutAlign="start center"> <div fxLayout="row" fxFlex="100"> - <div fxFlex fxLayoutAlign="start center"><b>Browse</b></div> + <div fxFlex fxLayoutAlign="start center"> + <b>{{ 'Browse' | translate }}</b> + </div> <div fxLayoutAlign="end center"> <button mat-icon-button @@ -50,14 +52,14 @@ *ngIf="node.dataNode && !isNodeSelected(node)" (click)="addNode(node)" [attr.data-cy]="'select-' + node.nodeName" - matTooltip="Add node" + [matTooltip]="'Add node' | translate" >add_circle</i > <i class="material-icons pr-5 icon-button" *ngIf="node.dataNode && isNodeSelected(node)" (click)="removeNode(node)" - matTooltip="Remove node" + [matTooltip]="'Remove node' | translate" >remove_circle</i > <i @@ -65,7 +67,7 @@ *ngIf="selectedNodeId !== node.internalNodeName" [attr.data-cy]="'show-node-details-' + node.nodeName" (click)="showNodeDetails(node)" - matTooltip="Show details" + [matTooltip]="'Show details' | translate" >visibility</i > <i @@ -73,7 +75,7 @@ *ngIf="selectedNodeId === node.internalNodeName" [attr.data-cy]="'hide-node-details-' + node.nodeName" (click)="hideNodeDetails()" - matTooltip="Show details" + [matTooltip]="'Show details' | translate" >visibility_off</i > <span class="pr-5">{{ node.nodeName }}</span> @@ -108,7 +110,7 @@ <i class="material-icons pr-5 icon-button" *ngIf="tree.isExpanded(node) && hasDataChildren(node)" - matTooltip="Add all direct children" + [matTooltip]="'Add all direct children' | translate" (click)="addAllDirectChildren(node)" >add_circle</i > @@ -117,7 +119,7 @@ *ngIf="selectedNodeId !== node.internalNodeName" [attr.data-cy]="'show-node-details-' + node.nodeName" (click)="showNodeDetails(node)" - matTooltip="Show details" + [matTooltip]="'Show details' | translate" >visibility</i > <i @@ -125,7 +127,7 @@ *ngIf="selectedNodeId === node.internalNodeName" [attr.data-cy]="'hide-node-details-' + node.nodeName" (click)="hideNodeDetails()" - matTooltip="Show details" + [matTooltip]="'Show details' | translate" >visibility_off</i > <span class="node-name pr-5"> {{ node.nodeName }}</span> diff --git a/ui/src/app/core-ui/static-properties/static-runtime-resolvable-tree-input/static-tree-input-button-menu/static-tree-input-button-menu.component.html b/ui/src/app/core-ui/static-properties/static-runtime-resolvable-tree-input/static-tree-input-button-menu/static-tree-input-button-menu.component.html index a0c3df6e29..d2f9e2c624 100644 --- a/ui/src/app/core-ui/static-properties/static-runtime-resolvable-tree-input/static-tree-input-button-menu/static-tree-input-button-menu.component.html +++ b/ui/src/app/core-ui/static-properties/static-runtime-resolvable-tree-input/static-tree-input-button-menu/static-tree-input-button-menu.component.html @@ -27,7 +27,7 @@ [disabled]="!showOptions" data-cy="clear-tree-node-selection" > - <span>Clear selection & reload</span> + <span>{{ 'Clear selection & reload' | translate }}</span> </button> <button mat-raised-button @@ -38,7 +38,7 @@ *ngIf="editorMode === 'tree'" [disabled]="!showOptions" > - <span>Reload</span> + <span>{{ 'Reload' | translate }}</span> </button> </div> <div @@ -52,22 +52,24 @@ [mode]="'indeterminate'" [diameter]="15" ></mat-spinner> - <span class="reloading-nodes-label"> Reloading nodes</span> + <span class="reloading-nodes-label">{{ + 'Reloading nodes' | translate + }}</span> </div> <div fxFlex fxLayoutAlign="end center"> <mat-button-toggle-group - aria-label="Font Style" + [attr.aria-label]="'Font Style' | translate" class="small-button" [(value)]="editorMode" (change)="onChangeEditor($event.value)" > - <mat-button-toggle data-cy="editor-mode-tree" value="tree" - >Tree</mat-button-toggle - > - <mat-button-toggle data-cy="editor-mode-text" value="text" - >Text</mat-button-toggle - > + <mat-button-toggle data-cy="editor-mode-tree" value="tree">{{ + 'Tree' | translate + }}</mat-button-toggle> + <mat-button-toggle data-cy="editor-mode-text" value="text">{{ + 'Text' | translate + }}</mat-button-toggle> </mat-button-toggle-group> </div> </div> diff --git a/ui/src/app/core-ui/static-properties/static-runtime-resolvable-tree-input/static-tree-input-node-details/static-tree-input-node-details.component.html b/ui/src/app/core-ui/static-properties/static-runtime-resolvable-tree-input/static-tree-input-node-details/static-tree-input-node-details.component.html index 15d9b37faf..002844c23e 100644 --- a/ui/src/app/core-ui/static-properties/static-runtime-resolvable-tree-input/static-tree-input-node-details/static-tree-input-node-details.component.html +++ b/ui/src/app/core-ui/static-properties/static-runtime-resolvable-tree-input/static-tree-input-node-details/static-tree-input-node-details.component.html @@ -16,7 +16,7 @@ ~ --> <div class="tree-input-header" fxLayoutAlign="start center"> - <b>Node Details</b> + <b>{{ 'Node Details' | translate }}</b> </div> <div class="node-metadata" diff --git a/ui/src/app/core-ui/static-properties/static-runtime-resolvable-tree-input/static-tree-input-selected-nodes/static-tree-input-selected-nodes.component.html b/ui/src/app/core-ui/static-properties/static-runtime-resolvable-tree-input/static-tree-input-selected-nodes/static-tree-input-selected-nodes.component.html index 968e782252..e8631b27a6 100644 --- a/ui/src/app/core-ui/static-properties/static-runtime-resolvable-tree-input/static-tree-input-selected-nodes/static-tree-input-selected-nodes.component.html +++ b/ui/src/app/core-ui/static-properties/static-runtime-resolvable-tree-input/static-tree-input-selected-nodes/static-tree-input-selected-nodes.component.html @@ -16,7 +16,7 @@ ~ --> <div class="tree-input-header" fxLayoutAlign="start center"> - <b>Selected Nodes</b> + <b>{{ 'Selected Nodes' | translate }}</b> </div> <div *ngFor="let selectedNodeName of selectedNodesInternalNames"> <div diff --git a/ui/src/app/core-ui/static-properties/static-runtime-resolvable-tree-input/static-tree-input-text-editor/static-tree-input-text-editor.component.ts b/ui/src/app/core-ui/static-properties/static-runtime-resolvable-tree-input/static-tree-input-text-editor/static-tree-input-text-editor.component.ts index 66ba60a724..921d57b84c 100644 --- a/ui/src/app/core-ui/static-properties/static-runtime-resolvable-tree-input/static-tree-input-text-editor/static-tree-input-text-editor.component.ts +++ b/ui/src/app/core-ui/static-properties/static-runtime-resolvable-tree-input/static-tree-input-text-editor/static-tree-input-text-editor.component.ts @@ -16,10 +16,18 @@ * */ -import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core'; +import { + Component, + EventEmitter, + Input, + OnInit, + Output, + inject, +} from '@angular/core'; import { Subject } from 'rxjs'; import { debounceTime } from 'rxjs/operators'; import { RuntimeResolvableTreeInputStaticProperty } from '@streampipes/platform-services'; +import { TranslateService } from '@ngx-translate/core'; @Component({ selector: 'sp-static-tree-input-text-editor', @@ -32,6 +40,8 @@ export class StaticTreeInputTextEditorComponent implements OnInit { @Output() performValidationEmitter: EventEmitter<void> = new EventEmitter<void>(); + translateService = inject(TranslateService); + editorOptions = { mode: 'text/plain', autoRefresh: true, @@ -44,9 +54,9 @@ export class StaticTreeInputTextEditorComponent implements OnInit { }, }; - headerText = - '# Provide OPC UA Node IDs below, one per line.\n' + - '# Format: ns=<namespace>;s=<node_id> (e.g., ns=3;s=SampleNodeId)\n'; + headerText = this.translateService.instant( + '# Provide OPC UA Node IDs below, one per line.\n# Format: ns={{namespace}};s={{node_id}} (e.g., ns=3;s=SampleNodeId)\n', + ); textEditor: string = ''; private textChangeSubject: Subject<string> = new Subject<string>(); diff --git a/ui/src/app/core-ui/status-indicator/status-indicator.component.ts b/ui/src/app/core-ui/status-indicator/status-indicator.component.ts index fd89fccdc8..76d6bd66b1 100644 --- a/ui/src/app/core-ui/status-indicator/status-indicator.component.ts +++ b/ui/src/app/core-ui/status-indicator/status-indicator.component.ts @@ -16,7 +16,8 @@ * */ -import { Component, Input } from '@angular/core'; +import { Component, Input, inject } from '@angular/core'; +import { TranslateService } from '@ngx-translate/core'; @Component({ selector: 'sp-status-indicator', @@ -24,8 +25,10 @@ import { Component, Input } from '@angular/core'; styleUrls: ['./status-indicator.component.scss'], }) export class StatusIndicatorComponent { + translateService = inject(TranslateService); + @Input() - message = 'Loading'; + message = this.translateService.instant('Loading'); @Input() additionalDescription = ''; diff --git a/ui/src/app/core-ui/topics/topics.component.html b/ui/src/app/core-ui/topics/topics.component.html index 73c5be895c..bf50fefd80 100644 --- a/ui/src/app/core-ui/topics/topics.component.html +++ b/ui/src/app/core-ui/topics/topics.component.html @@ -24,7 +24,8 @@ <small>{{ pipelineElement?.description }}</small> </div> <div class="element-id" fxLayoutAlign="end start"> - <span>ID</span> + <span>{{ 'ID' | translate }}</span + > <b>{{ isDataStream ? pipelineElement?.elementId @@ -51,7 +52,7 @@ > <ng-container matColumnDef="outputTopics"> <th mat-header-cell *matHeaderCellDef> - <strong>Output Topics</strong> + <strong>{{ 'Output Topics' | translate }}</strong> </th> <td mat-cell *matCellDef="let element"> <div @@ -66,7 +67,7 @@ [cdkCopyToClipboard]=" element.topicDefinition.actualTopicName " - matTooltip="Copy" + [matTooltip]="'Copy' | translate" > <mat-icon>content_copy</mat-icon> </button> @@ -85,7 +86,7 @@ <table mat-table [dataSource]="pipelineElement?.inputStreams"> <ng-container matColumnDef="inputTopics"> <th mat-header-cell *matHeaderCellDef> - <strong>Input Topics</strong> + <strong>{{ 'Input Topics' | translate }}</strong> </th> <td mat-cell *matCellDef="let element"> <div @@ -104,7 +105,7 @@ ?.transportProtocols?.[0] ?.topicDefinition?.actualTopicName " - matTooltip="Copy" + [matTooltip]="'Copy' | translate" > <mat-icon>content_copy</mat-icon> </button> @@ -127,7 +128,7 @@ > <ng-container matColumnDef="outputTopics"> <th mat-header-cell *matHeaderCellDef> - <strong>Output Topics</strong> + <strong>{{ 'Output Topics' | translate }}</strong> </th> <td mat-cell *matCellDef="let element"> <div @@ -143,7 +144,7 @@ element?.topicDefinition ?.actualTopicName " - matTooltip="Copy" + [matTooltip]="'Copy' | translate" > <mat-icon>content_copy</mat-icon> </button> @@ -162,7 +163,7 @@ <table mat-table [dataSource]="pipelineElement?.inputStreams"> <ng-container matColumnDef="inputTopics"> <th mat-header-cell *matHeaderCellDef> - <strong>Input Topics</strong> + <strong>{{ 'Input Topics' | translate }}</strong> </th> <td mat-cell *matCellDef="let element"> <div @@ -181,7 +182,7 @@ ?.transportProtocols?.[0] ?.topicDefinition?.actualTopicName " - matTooltip="Copy" + [matTooltip]="'Copy' | translate" > <mat-icon>content_copy</mat-icon> </button> @@ -207,7 +208,7 @@ class="mat-basic" (click)="close()" > - Close + {{ 'Close' | translate }} </button> </div> </div> diff --git a/ui/src/app/core-ui/topics/topics.component.ts b/ui/src/app/core-ui/topics/topics.component.ts index 2ce28d6dc7..aa535f28e2 100644 --- a/ui/src/app/core-ui/topics/topics.component.ts +++ b/ui/src/app/core-ui/topics/topics.component.ts @@ -16,7 +16,7 @@ * */ -import { Component, Input, OnInit } from '@angular/core'; +import { Component, Input, OnInit, inject } from '@angular/core'; import { DataProcessorInvocation, DataSinkInvocation, @@ -24,6 +24,7 @@ import { } from '@streampipes/platform-services'; import { DialogRef } from '@streampipes/shared-ui'; import { PipelineElementUnion } from '../../editor/model/editor.model'; +import { TranslateService } from '@ngx-translate/core'; @Component({ selector: 'sp-pipeline-element-topics', @@ -31,9 +32,14 @@ import { PipelineElementUnion } from '../../editor/model/editor.model'; styleUrls: ['./topics.component.scss'], }) export class TopicsComponent implements OnInit { + translateService = inject(TranslateService); selectedTabIndex = 0; - availableTabs = ['Topics', 'Code']; + availableTabs = [ + this.translateService.instant('Topics'), + this.translateService.instant('Code'), + ]; + tabs: string[] = []; @Input() diff --git a/ui/src/app/dashboard/components/overview/dashboard-overview-table/dashboard-overview-table.component.html b/ui/src/app/dashboard/components/overview/dashboard-overview-table/dashboard-overview-table.component.html index 610cea8abb..0f256d57ef 100644 --- a/ui/src/app/dashboard/components/overview/dashboard-overview-table/dashboard-overview-table.component.html +++ b/ui/src/app/dashboard/components/overview/dashboard-overview-table/dashboard-overview-table.component.html @@ -18,7 +18,7 @@ <div fxFlex="100" fxLayout="column"> <sp-basic-header-title-component - title="Dashboards" + [title]="'Dashboards' | translate" ></sp-basic-header-title-component> <div fxFlex="100" fxLayout="row" fxLayoutAlign="center start"> <sp-table @@ -33,7 +33,7 @@ mat-header-cell *matHeaderCellDef > - Dashboard + {{ 'Dashboards' | translate }} </th> <td fxFlex="60" @@ -69,7 +69,7 @@ <button mat-icon-button color="accent" - matTooltip="Show data view" + [matTooltip]="'Show dashboard' | translate" (click)="showDashboard(element)" > <i class="material-icons">visibility</i> @@ -77,7 +77,7 @@ <button mat-icon-button color="accent" - matTooltip="Edit data view" + [matTooltip]="'Edit dashboard' | translate" *ngIf="hasDataExplorerWritePrivileges" [attr.data-cy]="'edit-dashboard-' + element.name" (click)="editDashboard(element)" @@ -87,7 +87,7 @@ <button mat-icon-button color="accent" - matTooltip="Edit data view settings" + [matTooltip]="'Dashboard settings' | translate" *ngIf="hasDataExplorerWritePrivileges" (click)="openEditDashboardDialog(element)" > @@ -96,7 +96,7 @@ <button mat-icon-button color="accent" - matTooltip="Manage permissions" + [matTooltip]="'Manage permissions' | translate" *ngIf="isAdmin" (click)="showPermissionsDialog(element)" > @@ -105,7 +105,7 @@ <button mat-icon-button color="accent" - matTooltip="Delete data view" + [matTooltip]="'Delete chart' | translate" *ngIf="hasDataExplorerWritePrivileges" [attr.data-cy]="'delete-dashboard-' + element.name" (click)="openDeleteDashboardDialog(element)" diff --git a/ui/src/app/dashboard/components/overview/dashboard-overview-table/dashboard-overview-table.component.ts b/ui/src/app/dashboard/components/overview/dashboard-overview-table/dashboard-overview-table.component.ts index cb353982cf..f6dc780c73 100644 --- a/ui/src/app/dashboard/components/overview/dashboard-overview-table/dashboard-overview-table.component.ts +++ b/ui/src/app/dashboard/components/overview/dashboard-overview-table/dashboard-overview-table.component.ts @@ -30,6 +30,7 @@ import { DataExplorerRoutingService } from '../../../../data-explorer-shared/ser import { MatDialog } from '@angular/material/dialog'; import { DataExplorerDashboardService } from '../../../services/dashboard.service'; import { DataExplorerSharedService } from '../../../../data-explorer-shared/services/data-explorer-shared.service'; +import { TranslateService } from '@ngx-translate/core'; @Component({ selector: 'sp-dashboard-overview-table', @@ -56,6 +57,7 @@ export class DashboardOverviewTableComponent extends SpDataExplorerOverviewDirec authService: AuthService, currentUserService: CurrentUserService, private dialog: MatDialog, + private translateService: TranslateService, ) { super(dialogService, authService, currentUserService, routingService); } @@ -68,7 +70,9 @@ export class DashboardOverviewTableComponent extends SpDataExplorerOverviewDirec showPermissionsDialog(dashboard: Dashboard) { const dialogRef = this.dataExplorerSharedService.openPermissionsDialog( dashboard.elementId, - `Manage permissions for dashboard ${dashboard.name}`, + this.translateService.instant( + `Manage permissions for dashboard ${dashboard.name}`, + ), ); dialogRef.afterClosed().subscribe(refresh => { @@ -94,10 +98,14 @@ export class DashboardOverviewTableComponent extends SpDataExplorerOverviewDirec const dialogRef = this.dialog.open(ConfirmDialogComponent, { width: '600px', data: { - title: 'Are you sure you want to delete this dashboard?', - subtitle: 'This action cannot be undone!', - cancelTitle: 'Cancel', - okTitle: 'Delete Dashboard', + title: this.translateService.instant( + 'Are you sure you want to delete this dashboard?', + ), + subtitle: this.translateService.instant( + 'This action cannot be undone!', + ), + cancelTitle: this.translateService.instant('Cancel'), + okTitle: this.translateService.instant('Delete dashboard'), confirmAndCancel: true, }, }); diff --git a/ui/src/app/dashboard/components/overview/dashboard-overview.component.html b/ui/src/app/dashboard/components/overview/dashboard-overview.component.html index b9eb7956d6..b6ec73f4e3 100644 --- a/ui/src/app/dashboard/components/overview/dashboard-overview.component.html +++ b/ui/src/app/dashboard/components/overview/dashboard-overview.component.html @@ -40,7 +40,7 @@ *ngIf="hasDashboardWritePrivileges" > <i class="material-icons">add</i> - <span>New dashboard</span> + <span>{{ 'New dashboard' | translate }}</span> </button> </div> <div fxFlex="100" fxLayout="column"> diff --git a/ui/src/app/dashboard/components/overview/dashboard-overview.component.ts b/ui/src/app/dashboard/components/overview/dashboard-overview.component.ts index 1ec10c33e5..562b9a47e2 100644 --- a/ui/src/app/dashboard/components/overview/dashboard-overview.component.ts +++ b/ui/src/app/dashboard/components/overview/dashboard-overview.component.ts @@ -29,6 +29,7 @@ import { SpDashboardRoutes } from '../../dashboard.routes'; import { Dashboard } from '@streampipes/platform-services'; import { DataExplorerDashboardService } from '../../services/dashboard.service'; import { DashboardOverviewTableComponent } from './dashboard-overview-table/dashboard-overview-table.component'; +import { TranslateService } from '@ngx-translate/core'; @Component({ selector: 'sp-dashboard-overview', @@ -51,6 +52,7 @@ export class DashboardOverviewComponent implements OnInit { private authService: AuthService, private currentUserService: CurrentUserService, private breadcrumbService: SpBreadcrumbService, + private translateService: TranslateService, ) {} ngOnInit(): void { @@ -74,7 +76,7 @@ export class DashboardOverviewComponent implements OnInit { dashboardLiveSettings: { refreshModeActive: false, refreshIntervalInSeconds: 10, - label: 'Off', + label: this.translateService.instant('Off'), }, }; diff --git a/ui/src/app/dashboard/components/panel/chart-selection-panel/chart-selection-panel.component.html b/ui/src/app/dashboard/components/panel/chart-selection-panel/chart-selection-panel.component.html index c5564dab2e..1c4f323cb4 100644 --- a/ui/src/app/dashboard/components/panel/chart-selection-panel/chart-selection-panel.component.html +++ b/ui/src/app/dashboard/components/panel/chart-selection-panel/chart-selection-panel.component.html @@ -19,7 +19,7 @@ <div fxFlex="100" class="designer-panel-content" fxLayout="column"> <div fxLayout="row" class="sp-tab-bg designer-panel-header"> <div fxLayoutAlign="start center" class="designer-panel-title"> - <span> Configure Dashboard </span> + <span> {{ 'Configure dashboard' | translate }} </span> </div> </div> <div fxFlex="100" fxLayout="column" class="no-overflow"> @@ -28,7 +28,10 @@ fxFlexFill class="small-tab-headers mat-tab-fill-height" > - <mat-tab data-cy="designer-panel-data-config" label="Charts"> + <mat-tab + data-cy="designer-panel-data-config" + [label]="'Charts' | translate" + > <div class="scroll-tab-content"> <sp-chart-selection (addChartEmitter)="addChartEmitter.emit($event)" diff --git a/ui/src/app/dashboard/components/panel/chart-selection-panel/chart-selection/chart-selection.component.html b/ui/src/app/dashboard/components/panel/chart-selection-panel/chart-selection/chart-selection.component.html index 50b0597599..8838a45048 100644 --- a/ui/src/app/dashboard/components/panel/chart-selection-panel/chart-selection/chart-selection.component.html +++ b/ui/src/app/dashboard/components/panel/chart-selection-panel/chart-selection/chart-selection.component.html @@ -27,17 +27,17 @@ </div> } @else { <div fxLayoutAlign="center center" fxLayout="column" fxFlex="100"> - <span class="no-widget-hint" - >No charts found - create a new chart first to add it to this - dashboard.</span - > + <span class="no-widget-hint">{{ + 'No charts found - create a new chart first to add it to this dashboard.' + | translate + }}</span> <button mat-button color="accent" class="mt-10" (click)="navigateToDataViewCreation()" > - Create chart + {{ 'Create chart' | translate }} </button> </div> } diff --git a/ui/src/app/dashboard/components/panel/dashboard-panel.component.html b/ui/src/app/dashboard/components/panel/dashboard-panel.component.html index 31fd3a752a..ad1f0e154e 100644 --- a/ui/src/app/dashboard/components/panel/dashboard-panel.component.html +++ b/ui/src/app/dashboard/components/panel/dashboard-panel.component.html @@ -66,7 +66,10 @@ data-cy="empty-dashboard" > <h4> - This dashboard is empty and doesn't contain any widgets. + {{ + "This dashboard is empty and doesn't contain any charts." + | translate + }} </h4> </div> <sp-dashboard-grid-view diff --git a/ui/src/app/dashboard/components/panel/dashboard-panel.component.ts b/ui/src/app/dashboard/components/panel/dashboard-panel.component.ts index ae282f5491..2182ec07c0 100644 --- a/ui/src/app/dashboard/components/panel/dashboard-panel.component.ts +++ b/ui/src/app/dashboard/components/panel/dashboard-panel.component.ts @@ -49,6 +49,7 @@ import { SpDataExplorerRoutes } from '../../../data-explorer/data-explorer.route import { DataExplorerRoutingService } from '../../../data-explorer-shared/services/data-explorer-routing.service'; import { DataExplorerDetectChangesService } from '../../../data-explorer/services/data-explorer-detect-changes.service'; import { SupportsUnsavedChangeDialog } from '../../../data-explorer-shared/models/dataview-dashboard.model'; +import { TranslateService } from '@ngx-translate/core'; @Component({ selector: 'sp-dashboard-panel', @@ -95,6 +96,7 @@ export class DashboardPanelComponent private route: ActivatedRoute, private routingService: DataExplorerRoutingService, private breadcrumbService: SpBreadcrumbService, + private translateService: TranslateService, ) {} public ngOnInit() { @@ -258,11 +260,13 @@ export class DashboardPanelComponent const dialogRef = this.dialog.open(ConfirmDialogComponent, { width: '500px', data: { - title: 'Save changes?', - subtitle: - 'Update all changes to dashboard widgets or discard current changes.', - cancelTitle: 'Discard changes', - okTitle: 'Update', + title: this.translateService.instant('Save changes?'), + subtitle: this.translateService.instant( + 'Update all changes to dashboard charts or discard current changes.', + ), + cancelTitle: + this.translateService.instant('Discard changes'), + okTitle: this.translateService.instant('Update'), confirmAndCancel: true, }, }); diff --git a/ui/src/app/dashboard/components/panel/dashboard-toolbar/dashboard-toolbar.component.html b/ui/src/app/dashboard/components/panel/dashboard-toolbar/dashboard-toolbar.component.html index bb5c92e63b..80a5a5d23f 100644 --- a/ui/src/app/dashboard/components/panel/dashboard-toolbar/dashboard-toolbar.component.html +++ b/ui/src/app/dashboard/components/panel/dashboard-toolbar/dashboard-toolbar.component.html @@ -25,23 +25,23 @@ <button mat-raised-button color="accent" - matTooltip="Save" + [matTooltip]="'Save' | translate" class="edit-menu-btn" (click)="saveDashboardEmitter.emit()" data-cy="save-dashboard-btn" > <mat-icon>save</mat-icon> - <span>Save</span> + <span>{{ 'Save' | translate }}</span> </button> <button mat-raised-button color="accent" - matTooltip="Discard" + [matTooltip]="'Discard' | translate" class="mat-basic mr-10 edit-menu-btn" (click)="discardDashboardEmitter.emit()" > <i class="material-icons">undo</i> - <span> Discard</span> + <span> {{ 'Discard' | translate }}</span> </button> </div> <div @@ -52,8 +52,8 @@ <button mat-icon-button [matMenuTriggerFor]="menu" - aria-label="View mode" - matTooltip="View mode" + [attr.aria-label]="'View mode' | translate" + [matTooltip]="'View mode' | translate" > <mat-icon >{{ viewMode === 'grid' ? 'grid_view' : 'web_asset' }} @@ -62,11 +62,11 @@ <mat-menu #menu="matMenu"> <button mat-menu-item (click)="viewModeChange.emit('grid')"> <mat-icon>grid_view</mat-icon> - <span>Grid</span> + <span>{{ 'Grid' | translate }}</span> </button> <button mat-menu-item (click)="viewModeChange.emit('slide')"> <mat-icon>web_asset</mat-icon> - <span>Slides</span> + <span>{{ 'Slides' | translate }}</span> </button> </mat-menu> </div> @@ -93,7 +93,7 @@ <button mat-icon-button [matMenuTriggerFor]="optMenu" - aria-label="Options" + [attr.aria-label]="'Options' | translate" data-cy="options-data-explorer" > <mat-icon>more_vert</mat-icon> @@ -106,7 +106,7 @@ data-cy="options-edit-dashboard" > <mat-icon>edit</mat-icon> - <span>Edit dashboard</span> + <span>{{ 'Edit dashboard' | translate }}</span> </button> <button mat-menu-item @@ -114,7 +114,7 @@ *ngIf="!editMode && !timeRangeVisible" > <mat-icon>alarm_on</mat-icon> - <span>Show time range selector</span> + <span>{{ 'Show time range selector' | translate }}</span> </button> <button mat-menu-item @@ -122,7 +122,7 @@ *ngIf="!editMode && timeRangeVisible" > <mat-icon>alarm_off</mat-icon> - <span>Hide time range selector</span> + <span>{{ 'Hide time range selector' | translate }}</span> </button> <button mat-menu-item @@ -130,7 +130,7 @@ (click)="deleteDashboardEmitter.emit()" > <mat-icon>clear</mat-icon> - <span>Delete dashboard</span> + <span>{{ 'Delete dashboard' | translate }}</span> </button> </mat-menu> </div> diff --git a/ui/src/app/dashboard/dashboard.module.ts b/ui/src/app/dashboard/dashboard.module.ts index 765fc818c3..64ccf4ad09 100644 --- a/ui/src/app/dashboard/dashboard.module.ts +++ b/ui/src/app/dashboard/dashboard.module.ts @@ -69,6 +69,7 @@ import { ChartPreviewComponent } from './components/panel/chart-selection-panel/ import { ChartSelectionComponent } from './components/panel/chart-selection-panel/chart-selection/chart-selection.component'; import { EditDashboardDialogComponent } from './dialogs/edit-dashboard/edit-dashboard-dialog.component'; import { DashboardOverviewTableComponent } from './components/overview/dashboard-overview-table/dashboard-overview-table.component'; +import { TranslateModule } from '@ngx-translate/core'; @NgModule({ imports: [ @@ -112,6 +113,7 @@ import { DashboardOverviewTableComponent } from './components/overview/dashboard ServicesModule, SharedUiModule, DataExplorerSharedModule, + TranslateModule.forChild(), RouterModule.forChild([ { path: '', diff --git a/ui/src/app/dashboard/dialogs/edit-dashboard/edit-dashboard-dialog.component.html b/ui/src/app/dashboard/dialogs/edit-dashboard/edit-dashboard-dialog.component.html index 98b4312145..4c7e69b87f 100644 --- a/ui/src/app/dashboard/dialogs/edit-dashboard/edit-dashboard-dialog.component.html +++ b/ui/src/app/dashboard/dialogs/edit-dashboard/edit-dashboard-dialog.component.html @@ -25,7 +25,7 @@ style="margin: 5px; width: 100%" > <mat-form-field class="w-100" floatLabel="auto" color="accent"> - <mat-label>Data View Name</mat-label> + <mat-label>{{ 'Dashboard title' | translate }}</mat-label> <input id="dvname" #dvname="ngModel" @@ -34,14 +34,16 @@ data-cy="data-view-name" [(ngModel)]="dashboard.name" /> - <mat-error>Name must not be empty</mat-error> + <mat-error>{{ + 'Title must not be empty' | translate + }}</mat-error> </mat-form-field> <mat-form-field class="w-100" color="accent"> - <mat-label>Description</mat-label> + <mat-label>{{ 'Description' | translate }}</mat-label> <input matInput [(ngModel)]="dashboard.description" /> </mat-form-field> <div class="mt-10" fxLayout="column"> - <label>Default view mode</label> + <label>{{ 'Default view mode' | translate }}</label> <mat-radio-group [(ngModel)]=" dashboard.dashboardGeneralSettings.defaultViewMode @@ -51,24 +53,26 @@ class="view-radio-button" [value]="'grid'" > - Grid View + {{ 'Grid view' | translate }} </mat-radio-button> <mat-radio-button class="view-radio-button" [value]="'slide'" > - Slide View + {{ 'Slide view' | translate }} </mat-radio-button> </mat-radio-group> </div> <div class="mt-10" fxLayout="column"> - <label>Time Settings</label> + <label>{{ 'Time settings' | translate }}</label> <mat-checkbox [(ngModel)]=" dashboard.dashboardGeneralSettings.globalTimeEnabled " - >Use global time settings instead of widget time - settings + >{{ + 'Use global time settings instead of chart time settings' + | translate + }} </mat-checkbox> </div> <!--<mat-checkbox [(ngModel)]="dashboard.displayHeader">Show name and description in dashboard</mat-checkbox>--> @@ -83,7 +87,7 @@ class="mat-basic mr-10" (click)="onCancel()" > - Close + {{ 'Close' | translate }} </button> <button [disabled]="dvname.invalid" @@ -93,7 +97,7 @@ data-cy="save-data-view" (click)="onSave()" > - {{ createMode ? 'Create' : 'Save' }} + {{ (createMode ? 'Create' : 'Save') | translate }} </button> </div> </div> diff --git a/ui/src/app/dashboard/services/dashboard.service.ts b/ui/src/app/dashboard/services/dashboard.service.ts index 741821a53e..e2f5b569fe 100644 --- a/ui/src/app/dashboard/services/dashboard.service.ts +++ b/ui/src/app/dashboard/services/dashboard.service.ts @@ -20,15 +20,21 @@ import { Dashboard } from '@streampipes/platform-services'; import { EditDashboardDialogComponent } from '../dialogs/edit-dashboard/edit-dashboard-dialog.component'; import { DialogService, PanelType } from '@streampipes/shared-ui'; import { Injectable } from '@angular/core'; +import { TranslateService } from '@ngx-translate/core'; @Injectable({ providedIn: 'root' }) export class DataExplorerDashboardService { - constructor(private dialogService: DialogService) {} + constructor( + private dialogService: DialogService, + private translateService: TranslateService, + ) {} openDashboardModificationDialog(createMode: boolean, dashboard: Dashboard) { return this.dialogService.open(EditDashboardDialogComponent, { panelType: PanelType.SLIDE_IN_PANEL, - title: createMode ? 'New Dashboard' : 'Edit Dashboard', + title: createMode + ? this.translateService.instant('New dashboard') + : this.translateService.instant('Edit dashboard'), width: '60vw', data: { createMode: createMode, diff --git a/ui/src/app/data-explorer-shared/components/charts/heatmap/config/heatmap-widget-config.component.html b/ui/src/app/data-explorer-shared/components/charts/heatmap/config/heatmap-widget-config.component.html index 7b4c463792..c44503a9e1 100644 --- a/ui/src/app/data-explorer-shared/components/charts/heatmap/config/heatmap-widget-config.component.html +++ b/ui/src/app/data-explorer-shared/components/charts/heatmap/config/heatmap-widget-config.component.html @@ -47,7 +47,7 @@ </mat-checkbox> </div> <div class="ml-10 mb-10" fxFlex fxLayoutAlign="start center"> - <small>Visual Map Min</small> + <small>{{ 'Visual Map Min' | translate }}</small> <span fxFlex></span> <mat-form-field appearance="outline" color="accent" fxFlex="30"> <input @@ -62,7 +62,7 @@ </mat-form-field> </div> <div class="ml-10 mb-10" fxFlex fxLayoutAlign="start center"> - <small>Visual Map Max</small> + <small>{{ 'Visual Map Max' | translate }}</small> <span fxFlex></span> <mat-form-field appearance="outline" color="accent" fxFlex="30"> <input
