CSS.

Makefile

@@ -0,0 +1,10 @@
+current_dir = $(shell pwd)
+
+compile:
+	docker run --rm -it --volume $(current_dir):/app sandrokeil/typescript tsc -p /app/tsconfig.json
+
+build-image: compile
+	docker build -t hub.codefirst.iut.uca.fr/thomas.bellembois/codefirst-dockerproxy-clientweb .
+
+run-container: build-image
+	docker run -p 8081:80 hub.codefirst.iut.uca.fr/thomas.bellembois/codefirst-dockerproxy-clientweb

README.md

@@ -1,5 +1,4 @@
 Build with docker:
 ```
-docker run --rm -it --volume $(pwd):/app sandrokeil/typescript tsc /app/src/index.ts
-mv src/index.js build/src/index.js
+make compile
 ```

src/index.ts

@@ -98,10 +98,14 @@ function getContainersSuccess(response: string) {
     const container = containers[index];
     const containerId = container.Id;
     const containerImage = container.Image;
+    const containerSize = container.SizeRootFs;
     const containerName = container.Labels['codefirst-containername'];
     const containerEndpoint = container.Labels['codefirst-container-endpoint'];
     const containerPrivate = JSON.parse(container.Labels['codefirst-private']);
 
+    let nf = new Intl.NumberFormat('en-US');
+    const formattedContainerSize = nf.format(containerSize); // "1,234,567,890"
+
     // Main div.
     const containerDiv = document.createElement('div');
     containerDiv.setAttribute('class', 'row');
@@ -115,53 +119,51 @@ function getContainersSuccess(response: string) {
     );
     containerInfo.setAttribute('class', 'eight columns');
 
-    // Action buttons.
-    const containerActions = document.createElement('div');
-    containerActions.setAttribute('class', 'four columns');
-
-    // Build container informations.
-    if (containerPrivate) {
-      let containerInfoString = `[${containerImage}]`;
-      containerInfoString += ` private container: ${containerEndpoint}`;
+    // Image name.
+    const imageNameDiv = document.createElement('div');
+    imageNameDiv.setAttribute('class', 'three columns');
+    imageNameDiv.innerHTML = `[${containerImage}]`;
 
-      const containerInfoContent = document.createElement('span');
-      containerInfoContent.innerHTML = containerInfoString;
-
-      containerInfo.appendChild(containerInfoContent);
-    } else {
-      const containerInfoString = `[${containerImage}] `;
+    // Container size.
+    const containerSizeDiv = document.createElement('div');
+    containerSizeDiv.setAttribute('class', 'two columns');
+    containerSizeDiv.innerHTML = ` size: ${formattedContainerSize}`;
 
-      const containerInfoContent = document.createElement('span');
-      containerInfoContent.innerHTML = containerInfoString;
 
-      containerInfo.appendChild(containerInfoContent);
+    // Container name.
+    const containerNameDiv = document.createElement('div');
+    containerNameDiv.setAttribute('class', 'five columns');
 
+    if (containerPrivate) {
+      containerNameDiv.innerHTML = ` private container: ${containerEndpoint}`;
+    } else {
       const containerEndpointLink = document.createElement('a');
       containerEndpointLink.setAttribute('href', `${containerEndpoint}`);
       containerEndpointLink.setAttribute('target', '_blank');
       containerEndpointLink.innerHTML = `${containerEndpoint}`;
 
-      containerInfo.appendChild(containerEndpointLink);
+      containerNameDiv.appendChild(containerEndpointLink);
     }
 
     // Build action buttons.
     const containerLogs = document.createElement('button');
     containerLogs.setAttribute('id', containerId);
+    containerLogs.setAttribute('class', '');
     containerLogs.innerHTML = 'logs';
     containerLogs.addEventListener('click', getContainerLog);
 
     const containerdDelete = document.createElement('button');
     containerdDelete.setAttribute('id', containerId);
+    containerdDelete.setAttribute('class', '');
     containerdDelete.innerHTML = 'remove';
     containerdDelete.addEventListener('click', removeContainer);
 
-    containerActions.appendChild(containerLogs);
-    containerActions.appendChild(document.createTextNode(' '));
-    containerActions.appendChild(containerdDelete);
-
     // Final layout.
-    containerDiv.appendChild(containerInfo);
-    containerDiv.appendChild(containerActions);
+    containerDiv.appendChild(imageNameDiv);
+    containerDiv.appendChild(containerSizeDiv);
+    containerDiv.appendChild(containerNameDiv);
+    containerDiv.appendChild(containerLogs);
+    containerDiv.appendChild(containerdDelete);
 
     containersDiv?.appendChild(containerDiv);
   }
@@ -174,9 +176,12 @@ function getContainersError(response: string) {
 function getContainerLogSuccess(response: string) {
   const logDiv = document.getElementById('log');
 
+  var newResponse = response.replaceAll('\u0002', "\n");
+  newResponse = newResponse.replaceAll('\u0001', "\n");
+
   if (logDiv !== null) {
     logDiv.innerHTML = ' ';
-    logDiv.appendChild(document.createTextNode(response));
+    logDiv.appendChild(document.createTextNode(newResponse));
   }
 }
 

tsconfig.json

@@ -4,7 +4,8 @@
     "rootDir": ".",
     "outDir": "build",
 		"lib": [
-			"dom"
+			"dom",
+      "ES2021.String"
 		],
   },
   "include": [