Use container IDs.

README.md

@@ -0,0 +1,5 @@
+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
+```

src/index.ts

@@ -1,3 +1,11 @@
+// const proxyUrl = "http://localhost:8080";
+// const proxyPath = "/";
+
+const proxyUrl = "";
+const proxyPath = "/dockerrunner/";
+
+// console.log(proxyUrl);
+
 function getContainers() {
   const httpRequest = new XMLHttpRequest();
 
@@ -15,14 +23,14 @@ function getContainers() {
       }
     }
   };
-  httpRequest.open('GET', '/dockerrunner/containers/json');
+  httpRequest.open('GET', proxyUrl + proxyPath + 'containers/json');
   httpRequest.send();
 
   return '';
 }
 
 function getContainerLog(this: HTMLElement, ev: Event) {
-  const containerName = this.getAttribute('id');
+  const containerId = this.getAttribute('id');
   const httpRequest = new XMLHttpRequest();
 
   if (!httpRequest) {
@@ -41,7 +49,7 @@ function getContainerLog(this: HTMLElement, ev: Event) {
   };
   httpRequest.open(
     'GET',
-    '/dockerrunner/containers/' + containerName + '/logs'
+    proxyUrl + proxyPath + 'containers/' + containerId + '/logs'
   );
   httpRequest.send();
 
@@ -49,7 +57,7 @@ function getContainerLog(this: HTMLElement, ev: Event) {
 }
 
 function removeContainer(this: HTMLElement, ev: Event) {
-  const containerName = this.getAttribute('id');
+  const containerId = this.getAttribute('id');
   const httpRequest = new XMLHttpRequest();
 
   if (!httpRequest) {
@@ -60,13 +68,13 @@ function removeContainer(this: HTMLElement, ev: Event) {
   httpRequest.onreadystatechange = () => {
     if (httpRequest.readyState === XMLHttpRequest.DONE) {
       if (httpRequest.status === 204) {
-        removeContainerSuccess(containerName!);
+        removeContainerSuccess(containerId!);
       } else {
-        removeContainerError(containerName!);
+        removeContainerError(containerId!);
       }
     }
   };
-  httpRequest.open('DELETE', '/dockerrunner/containers/' + containerName);
+  httpRequest.open('DELETE', proxyUrl + proxyPath + 'containers/' + containerId);
   httpRequest.send();
 
   return '';
@@ -88,7 +96,7 @@ function getContainersSuccess(response: string) {
 
   for (let index = 0; index < containers.length; index++) {
     const container = containers[index];
-    // const containerId = container.Id;
+    const containerId = container.Id;
     const containerImage = container.Image;
     const containerName = container.Labels['codefirst-containername'];
     const containerEndpoint = container.Labels['codefirst-container-endpoint'];
@@ -97,7 +105,7 @@ function getContainersSuccess(response: string) {
     // Main div.
     const containerDiv = document.createElement('div');
     containerDiv.setAttribute('class', 'row');
-    containerDiv.setAttribute('id', `container${containerName}`);
+    containerDiv.setAttribute('id', containerId);
 
     // Container informations.
     const containerInfo = document.createElement('div');
@@ -138,12 +146,12 @@ function getContainersSuccess(response: string) {
 
     // Build action buttons.
     const containerLogs = document.createElement('button');
-    containerLogs.setAttribute('id', containerName);
+    containerLogs.setAttribute('id', containerId);
     containerLogs.innerHTML = 'logs';
     containerLogs.addEventListener('click', getContainerLog);
 
     const containerdDelete = document.createElement('button');
-    containerdDelete.setAttribute('id', containerName);
+    containerdDelete.setAttribute('id', containerId);
     containerdDelete.innerHTML = 'remove';
     containerdDelete.addEventListener('click', removeContainer);