Merge pull request #363 from TeskaLabs/fature/implement-ws-connection…

…-to-remote-control-screen

Microservices container refactorisation with websocket

CHANGELOG.md

@@ -2,10 +2,17 @@
 
 ## Release Candidate
 
+## v22.46
+
+### Features
+
+- Refactor Microservices container to Services and implement websocket connection (INDIGO Sprint 221111, [!363](https://github.com/TeskaLabs/asab-webui/pull/363))
+
 ### Bugfixes
 
 - Change const variable customCellStyle to let variable in DataTable (INDIGO Sprint 221031, [!374](https://github.com/TeskaLabs/asab-webui/pull/374))
 
+
 ## v22.42
 
 ### Refactoring

demo/public/locales/cs/translation.json

@@ -108,28 +108,36 @@
 		"Only tar.gz files are allowed": "Povoleny jsou pouze soubory tar.gz",
 		"Choose file": "Vyberte soubor"
 	},
-	"MicroservicesContainer": {
-		"ID": "ID",
-		"Launch time": "Čas spuštění",
-		"Host": "Host",
-		"Created at": "Vytvořeno v",
+	"ServicesContainer": {
+		"Can't display data due to parsing error": "Nelze zobrazit data kvůli chybě v parsování",
+		"Can't establish websocket connection, data can't be loaded": "Nepodařilo se navázat websocket spojení, data nelze načíst",
+		"Services": "Služby",
+		"Filter state": "Filtrovat stav",
+		"Loading": "Načítání",
+		"Service": "Služba",
+		"Node ID": "Node ID",
+		"Name": "Název",
+		"Type": "Typ",
 		"Version": "Verze",
-		"Microservices": "Mikroslužby",
-		"Failed to fetch data": "Nezdařilo se získat data"
-	},
-	"MicroserviceDetailContainer" : {
-		"This microservice doesn't exist": "Tato mikroslužba neexistuje",
-		"Failed to get the microservice": "Nezdařilo se získat mikroslužbu",
-		"Something went wrong and this microservice wasn't found": "Něco se pokazilo a tato mikroslužba nebyla nalezena",
-		"Service": "Servica",
+		"Not defined": "Neurčeno",
+		"Running": "Běží",
+		"Starting": "Spouští se",
+		"Stopped": "Zastaveno",
+		"Unknown": "Neznámo",
+		"Service action accepted successfully": "Akce služby byla spuštěna",
+		"Service action has been rejected": "Akce služby nebyla spuštěna",
+		"Un-collapse": "Rozbalit",
+		"Collapse": "Sbalit",
+		"Start": "Spustit",
+		"Stop": "Zastavit",
+		"Restart": "Restartovat",
+		"Up": "Nahodit",
+		"Return code": "Return code",
+		"Error": "Error",
+		"Exception": "Exception",
+		"Console": "Console",
 		"Detail": "Detail",
-		"ID": "ID",
-		"Host": "Host",
-		"Server": "Server",
-		"Launch time": "Čas spuštění",
-		"Created at": "Vytvořeno v",
-		"Version": "Verze",
-		"Attention": "Pozor"
+		"Advertised data": "Advertised data"
 	},
 	"UserInterfaceCard": {
 		"User interface": "Uživatelské rozhraní",

demo/public/locales/en/translation.json

@@ -108,28 +108,36 @@
 		"Only tar.gz files are allowed": "Only tar.gz files are allowed",
 		"Choose file": "Choose file"
 	},
-	"MicroservicesContainer": {
-		"ID": "ID",
-		"Launch time": "Launch time",
-		"Host": "Host",
-		"Created at": "Created at",
-		"Version": "Version",
-		"Microservices": "Microservices",
-		"Failed to fetch data": "Failed to fetch data"
-	},
-	"MicroserviceDetailContainer" : {
-		"This microservice doesn't exist": "This microservice doesn't exist",
-		"Failed to get the microservice": "Failed to get the microservice",
-		"Something went wrong and this microservice wasn't found": "Something went wrong and this microservice wasn't found",
+	"ServicesContainer": {
+		"Can't display data due to parsing error": "Can't display data due to parsing error",
+		"Can't establish websocket connection, data can't be loaded": "Can't establish websocket connection, data can't be loaded",
+		"Services": "Services",
+		"Filter state": "Filter state",
+		"Loading": "Loading",
 		"Service": "Service",
-		"Detail": "Detail",
-		"ID": "ID",
-		"Host": "Host",
-		"Server": "Server",
-		"Launch time": "Launch time",
-		"Created at": "Created at",
+		"Node ID": "Node ID",
+		"Name": "Name",
+		"Type": "Type",
 		"Version": "Version",
-		"Attention": "Attention"
+		"Not defined": "Not defined",
+		"Running": "Running",
+		"Starting": "Starting",
+		"Stopped": "Stopped",
+		"Unknown": "Unknown",
+		"Service action accepted successfully": "Service action accepted successfully",
+		"Service action has been rejected": "Service action has been rejected",
+		"Un-collapse": "Un-collapse",
+		"Collapse": "Collapse",
+		"Start": "Start",
+		"Stop": "Stop",
+		"Restart": "Restart",
+		"Up": "Up",
+		"Return code": "Return code",
+		"Error": "Error",
+		"Exception": "Exception",
+		"Console": "Console",
+		"Detail": "Detail",
+		"Advertised data": "Advertised data"
 	},
 	"TenantSelectionCard": {
 		"Select valid tenant to enter the application": "Select valid tenant to enter the application",

doc/asab-services.md

@@ -0,0 +1,48 @@
+# ASAB Services
+
+ASAB WebUI Services is a page with a list of available instances. It use a websocket connection, so the data are propagated realtime.
+
+## Setup
+
+In `config` file, define ASAB Services as a service:
+
+```
+module.exports = {
+	app: {
+
+		...
+
+	},
+	webpackDevServer: {
+		port: 3000,
+		proxy: {
+			'/api/lmio_remote_control': {
+				target: 'http://localhost:8086',
+				ws: true,
+				pathRewrite: {'^/api/lmio_remote_control' : ''}
+			},
+		}
+	}
+}
+```
+
+In the top-level `index.js` of your ASAB UI application, load the ASAB services module
+
+```
+const modules = [];
+
+...
+
+import ASABServicesModule from 'asab-webui/modules/maintenance/ServicesModule';
+modules.push(ASABServicesModule);
+
+...
+
+ReactDOM.render((
+	<HashRouter>
+		<Application modules={modules} defaultpath="/" configdefaults={ConfigDefaults}/>
+	</HashRouter>
+), document.getElementById('app'));
+```
+
+The module will be displayed as a subitem of `Maintenance` in the sidebar navigation.