From fe8619a780abfdc1667b6f45efb9a59ea5813dac Mon Sep 17 00:00:00 2001 From: Senyoret1 <34079003+Senyoret1@users.noreply.github.com> Date: Fri, 20 May 2022 13:13:50 -0400 Subject: [PATCH 1/2] Make the UI work with the new app statuses --- .../src/app/app.datatypes.ts | 1 + .../node-apps-list.component.html | 16 ++++-- .../node-apps-list.component.ts | 54 ++++++++++++++----- .../src/app/services/node.service.ts | 1 + .../src/app/services/vpn-client.service.ts | 2 +- .../src/assets/i18n/en.json | 5 +- .../src/assets/i18n/es.json | 5 +- .../src/assets/i18n/es_base.json | 5 +- 8 files changed, 65 insertions(+), 24 deletions(-) diff --git a/static/skywire-manager-src/src/app/app.datatypes.ts b/static/skywire-manager-src/src/app/app.datatypes.ts index 4c672c1ce..ec61957a8 100644 --- a/static/skywire-manager-src/src/app/app.datatypes.ts +++ b/static/skywire-manager-src/src/app/app.datatypes.ts @@ -27,6 +27,7 @@ export interface Application { autostart: boolean; port: number; status: number; + detailedStatus: string; args: any[]; } diff --git a/static/skywire-manager-src/src/app/components/pages/node/apps/node-apps-list/node-apps-list.component.html b/static/skywire-manager-src/src/app/components/pages/node/apps/node-apps-list/node-apps-list.component.html index a2d50c971..ccc7df811 100644 --- a/static/skywire-manager-src/src/app/components/pages/node/apps/node-apps-list/node-apps-list.component.html +++ b/static/skywire-manager-src/src/app/components/pages/node/apps/node-apps-list/node-apps-list.component.html @@ -96,7 +96,13 @@ - + + warning {{ app.name }} @@ -144,10 +150,10 @@ @@ -194,8 +200,8 @@
{{ 'apps.apps-list.state' | translate }}: - - {{ (app.status === 1 ? 'apps.status-running' : 'apps.status-stopped') | translate }} + + {{ getSmallScreenStateTextVar(app) | translate:{error: app.detailedStatus ? app.detailedStatus : ''} }}
diff --git a/static/skywire-manager-src/src/app/components/pages/node/apps/node-apps-list/node-apps-list.component.ts b/static/skywire-manager-src/src/app/components/pages/node/apps/node-apps-list/node-apps-list.component.ts index f804f414e..2d38b2d53 100644 --- a/static/skywire-manager-src/src/app/components/pages/node/apps/node-apps-list/node-apps-list.component.ts +++ b/static/skywire-manager-src/src/app/components/pages/node/apps/node-apps-list/node-apps-list.component.ts @@ -85,7 +85,6 @@ export class NodeAppsListComponent implements OnDestroy { currentPageInUrl = 1; @Input() set apps(val: Application[]) { this.allApps = val ? val : []; - this.dataFilterer.setData(this.allApps); } @@ -206,7 +205,7 @@ export class NodeAppsListComponent implements OnDestroy { * Gets the link for openning the UI of an app. Currently only works for the Skychat app. */ getLink(app: Application): string { - if (app.name.toLocaleLowerCase() === 'skychat' && this.nodeIp && app.status === 1) { + if (app.name.toLocaleLowerCase() === 'skychat' && this.nodeIp && app.status !== 0 && app.status !== 2) { // Default port. let port = '8001'; @@ -237,26 +236,54 @@ export class NodeAppsListComponent implements OnDestroy { getStateClass(app: Application): string { if (app.status === 1) { return 'dot-green'; - } else if (app.name === 'vpn-client' && app.status === 3) { + } else if (app.status === 3) { return 'dot-yellow'; } return 'dot-red'; } + /** + * Gets the class for the app status text in small screens. + */ + getSmallScreenStateClass(app: Application): string { + if (app.status === 1) { + return 'green-clear-text'; + } else if (app.status === 3) { + return 'yellow-clear-text'; + } + + return 'red-clear-text'; + } + /** * Gets the tooltip text for the app status dot. */ getStateTooltip(app: Application): string { if (app.status === 1) { return 'apps.status-running-tooltip'; - } else if (app.name === 'vpn-client' && app.status === 3) { + } else if (app.status === 3) { return 'apps.status-connecting-tooltip'; } return 'apps.status-stopped-tooltip'; } + /** + * Gets the text for status shown in small screens. + */ + getSmallScreenStateTextVar(app: Application): string { + if (app.status === 1) { + return 'apps.status-running'; + } else if (app.status === 2) { + return 'apps.status-failed'; + } else if (app.status === 3) { + return 'apps.status-connecting'; + } + + return 'apps.status-stopped'; + } + /** * Changes the selection state of an entry (modifies the state of its checkbox). */ @@ -269,7 +296,7 @@ export class NodeAppsListComponent implements OnDestroy { } /** - * Check if at lest one entry has been selected via its checkbox. + * Check if at least one entry has been selected via its checkbox. */ hasSelectedElements(): boolean { if (!this.selections) { @@ -303,7 +330,10 @@ export class NodeAppsListComponent implements OnDestroy { // Ignore all elements which already have the desired settings applied. this.selections.forEach((val, key) => { if (val) { - if ((startApps && this.appsMap.get(key).status !== 1) || (!startApps && this.appsMap.get(key).status === 1)) { + if ( + (startApps && (this.appsMap.get(key).status === 0 || this.appsMap.get(key).status === 2)) || + (!startApps && (this.appsMap.get(key).status !== 0 && this.appsMap.get(key).status !== 2)) + ) { elementsToChange.push(key); } } @@ -359,8 +389,8 @@ export class NodeAppsListComponent implements OnDestroy { label: 'apps.view-logs', }, { - icon: app.status === 1 ? 'stop' : 'play_arrow', - label: 'apps.' + (app.status === 1 ? 'stop-app' : 'start-app'), + icon: app.status === 0 || app.status === 2 ? 'play_arrow' : 'stop', + label: 'apps.' + (app.status === 0 || app.status === 2 ? 'start-app' : 'stop-app'), }, { icon: app.autostart ? 'close' : 'done', @@ -392,9 +422,9 @@ export class NodeAppsListComponent implements OnDestroy { * Starts or stops a specific app. */ changeAppState(app: Application): void { - if (app.status !== 1) { + if (app.status === 0 || app.status === 2) { this.changeSingleAppVal( - this.startChangingAppState(app.name, app.status !== 1) + this.startChangingAppState(app.name, true) ); } else { // Ask for confirmation if the app is going to be stopped. @@ -404,7 +434,7 @@ export class NodeAppsListComponent implements OnDestroy { confirmationDialog.componentInstance.showProcessing(); this.changeSingleAppVal( - this.startChangingAppState(app.name, app.status !== 1), + this.startChangingAppState(app.name, false), confirmationDialog ); }); @@ -476,7 +506,7 @@ export class NodeAppsListComponent implements OnDestroy { * Shows a modal window with the logs of an app. */ viewLogs(app: Application): void { - if (app.status === 1) { + if (app.status !== 0 && app.status !== 2) { LogComponent.openDialog(this.dialog, app); } else { this.snackbarService.showError('apps.apps-list.unavailable-logs-error'); diff --git a/static/skywire-manager-src/src/app/services/node.service.ts b/static/skywire-manager-src/src/app/services/node.service.ts index 0136a8742..83632bf0c 100644 --- a/static/skywire-manager-src/src/app/services/node.service.ts +++ b/static/skywire-manager-src/src/app/services/node.service.ts @@ -707,6 +707,7 @@ export class NodeService { status: app.status, port: app.port, autostart: app.auto_start, + detailedStatus: app.detailed_status, args: app.args, }); }); diff --git a/static/skywire-manager-src/src/app/services/vpn-client.service.ts b/static/skywire-manager-src/src/app/services/vpn-client.service.ts index 6f05fc463..0967f28b4 100644 --- a/static/skywire-manager-src/src/app/services/vpn-client.service.ts +++ b/static/skywire-manager-src/src/app/services/vpn-client.service.ts @@ -680,7 +680,7 @@ export class VpnClientService { // Get the required data from the app properties. if (appData) { vpnClientData = new VpnClientAppData(); - vpnClientData.running = appData.status === 1 || appData.status === 3; + vpnClientData.running = appData.status !== 0 || appData.status !== 2; vpnClientData.connectionDuration = appData.connection_duration; vpnClientData.appState = AppState.Stopped; diff --git a/static/skywire-manager-src/src/assets/i18n/en.json b/static/skywire-manager-src/src/assets/i18n/en.json index 6445b594d..ac0197ec4 100644 --- a/static/skywire-manager-src/src/assets/i18n/en.json +++ b/static/skywire-manager-src/src/assets/i18n/en.json @@ -462,12 +462,13 @@ "operation-completed": "Operation completed.", "operation-unnecessary": "The selection already has the requested setting.", "status-running": "Running", + "status-connecting": "Connecting", "status-stopped": "Stopped", - "status-failed": "Failed", + "status-failed": "Ended with the following error: {{ error }}", "status-running-tooltip": "App is currently running", "status-connecting-tooltip": "App is currently connecting", "status-stopped-tooltip": "App is currently stopped", - "status-failed-tooltip": "Something went wrong. Check the app's messages for more information" + "status-failed-tooltip": "The app finished with the following error: {{ error }}" }, "transports": { diff --git a/static/skywire-manager-src/src/assets/i18n/es.json b/static/skywire-manager-src/src/assets/i18n/es.json index 1a0a4158c..6ac0e1352 100644 --- a/static/skywire-manager-src/src/assets/i18n/es.json +++ b/static/skywire-manager-src/src/assets/i18n/es.json @@ -466,12 +466,13 @@ "operation-completed": "Operación completada.", "operation-unnecessary": "La selección ya tiene la configuración solicitada.", "status-running": "Corriendo", + "status-connecting": "Conectando", "status-stopped": "Detenida", - "status-failed": "Fallida", + "status-failed": "Finalizó con el siguiente error: {{ error }}", "status-running-tooltip": "La aplicación está actualmente corriendo", "status-connecting-tooltip": "La aplicación está actualmente conectando", "status-stopped-tooltip": "La aplicación está actualmente detenida", - "status-failed-tooltip": "Algo salió mal. Revise los mensajes de la aplicación para más información" + "status-failed-tooltip": "La app finalizó con el siguiente error: {{ error }}" }, "transports": { diff --git a/static/skywire-manager-src/src/assets/i18n/es_base.json b/static/skywire-manager-src/src/assets/i18n/es_base.json index 6d5299dd5..b1208617d 100644 --- a/static/skywire-manager-src/src/assets/i18n/es_base.json +++ b/static/skywire-manager-src/src/assets/i18n/es_base.json @@ -466,12 +466,13 @@ "operation-completed": "Operation completed.", "operation-unnecessary": "The selection already has the requested setting.", "status-running": "Running", + "status-connecting": "Connecting", "status-stopped": "Stopped", - "status-failed": "Failed", + "status-failed": "Ended with the following error: {{ error }}", "status-running-tooltip": "App is currently running", "status-connecting-tooltip": "App is currently connecting", "status-stopped-tooltip": "App is currently stopped", - "status-failed-tooltip": "Something went wrong. Check the app's messages for more information" + "status-failed-tooltip": "The app finished with the following error: {{ error }}" }, "transports": { From 6b03b4ae69c12e49b6d9d677c3d3b13819e37d74 Mon Sep 17 00:00:00 2001 From: Senyoret1 <34079003+Senyoret1@users.noreply.github.com> Date: Fri, 20 May 2022 14:58:10 -0400 Subject: [PATCH 2/2] Small improvement for the app states in the UI --- .../node-apps-list/node-apps-list.component.ts | 14 +++++++++++++- 1 file changed, 13 insertions(+), 1 deletion(-) diff --git a/static/skywire-manager-src/src/app/components/pages/node/apps/node-apps-list/node-apps-list.component.ts b/static/skywire-manager-src/src/app/components/pages/node/apps/node-apps-list/node-apps-list.component.ts index 2d38b2d53..37461ea8d 100644 --- a/static/skywire-manager-src/src/app/components/pages/node/apps/node-apps-list/node-apps-list.component.ts +++ b/static/skywire-manager-src/src/app/components/pages/node/apps/node-apps-list/node-apps-list.component.ts @@ -20,6 +20,7 @@ import { SkysocksClientSettingsComponent } from '../node-apps/skysocks-client-se import { FilterProperties, FilterFieldTypes } from 'src/app/utils/filters'; import { SortingColumn, SortingModes, DataSorter } from 'src/app/utils/lists/data-sorter'; import { DataFilterer } from 'src/app/utils/lists/data-filterer'; +import { map } from 'rxjs/operators'; /** * Shows the list of applications of a node. I can be used to show a short preview, with just some @@ -588,7 +589,18 @@ export class NodeAppsListComponent implements OnDestroy { * subscribe to the response. */ private startChangingAppState(appName: string, startApp: boolean): Observable { - return this.appsService.changeAppState(NodeComponent.getCurrentNodeKey(), appName, startApp); + return this.appsService.changeAppState(NodeComponent.getCurrentNodeKey(), appName, startApp).pipe(map(response => { + if (response.status !== null && response.status !== undefined) { + this.dataSource.forEach(app => { + if (app.name === appName) { + app.status = response.status; + app.detailedStatus = response.detailed_status; + } + }); + } + + return response; + })); } /**