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 @@
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;
+ }));
}
/**