Improved the log display logic, and added a keyboard shortcut

Author: rajch

client/apiclient.js

@@ -3,7 +3,7 @@
 function apiclient (baseurl) {
   baseurl = baseurl || ''
 
-  function request (url, method, opts, successHandler, errorHandler) {
+  function createfetcher (url, method, opts) {
     let requesturl = baseurl + url
 
     const requestopts = {
@@ -21,41 +21,60 @@ function apiclient (baseurl) {
       }
     }
 
-    fetch(requesturl, requestopts)
+    return fetch(requesturl, requestopts)
       .then(function (response) {
         // Replicate axios behaviour of a non-ok response being an error
         if (!response.ok) {
           const errorvalue = new Error('Error status returned:' + response.status)
           errorvalue.response = response
           throw errorvalue
         } else {
-          // Only .text() is okay with an empty response. Later, we will parse it
-          // into valid json.
-          // This is a promise, so gets taken care of in the next .then
-          return response.text()
+          return response
         }
       })
-      .then(function (responseData) {
-        // Replicate axios behaviour of response body being sent back in
-        // data property
-        const responseBody = responseData ? { data: JSON.parse(responseData) } : {}
-        successHandler(responseBody)
-      })
-      .catch(function (error) {
-        errorHandler(error)
-      })
   }
 
-  function get (url, opts, successHandler, errorHandler, progressHandler) {
-    request(url, 'GET', opts, successHandler, errorHandler)
+  function requestJSON (url, method, opts, successHandler, errorHandler) {
+    const fetcher = createfetcher(url, method, opts)
+    fetcher.then(function (response) {
+      // Only .text() is okay with an empty response. Later, we will parse it
+      // into valid json.
+      // This is a promise, so gets taken care of in the next .then
+      return response.text()
+    }).then(function (responseData) {
+      // Replicate axios behaviour of response body being sent back in
+      // data property
+      const responseBody = responseData ? { data: JSON.parse(responseData) } : {}
+      successHandler(responseBody)
+    }).catch(function (error) {
+      errorHandler(error)
+    })
+  }
+
+  function requestBuffer (url, method, opts, successHandler, errorHandler) {
+    const fetcher = createfetcher(url, method, opts)
+    fetcher.then(function (response) {
+      return response.arrayBuffer()
+    }).then(function (responseData) {
+      // Replicate axios behaviour of response body being sent back in
+      // data property
+      const responseBody = responseData ? { data: responseData } : {}
+      successHandler(responseBody)
+    }).catch(function (error) {
+      errorHandler(error)
+    })
+  }
+
+  function get (url, opts, successHandler, errorHandler) {
+    requestJSON(url, 'GET', opts, successHandler, errorHandler)
   }
 
   function post (url, opts, successHandler, errorHandler) {
-    request(url, 'POST', opts, successHandler, errorHandler)
+    requestJSON(url, 'POST', opts, successHandler, errorHandler)
   }
 
   function deleteverb (url, opts, successHandler, errorHandler) {
-    request(url, 'DELETE', opts, successHandler, errorHandler)
+    requestJSON(url, 'DELETE', opts, successHandler, errorHandler)
   }
 
   this.listcontainers = function (opts, successHandler, errorHandler) {
@@ -83,12 +102,12 @@ function apiclient (baseurl) {
     get('/containers/' + name + '/top', opts, successHandler, errorHandler)
   }
 
-  this.logscontainer = function (name, opts, successHandler, errorHandler, progressHandler) {
+  this.logscontainer = function (name, opts, successHandler, errorHandler) {
     opts = opts || {}
     opts.stdout = true
     opts.stderr = true
 
-    get('/containers/' + name + '/logs', opts, successHandler, errorHandler, progressHandler)
+    requestBuffer('/containers/' + name + '/logs', 'GET', opts, successHandler, errorHandler)
   }
 
   this.startcontainer = function (name, opts, successHandler, errorHandler) {

client/commands.js

@@ -108,23 +108,56 @@ function commands (world) {
       world.apiClient.logscontainer(
         container.name(),
         {},
-        function () { },
-        function () { },
-        function onLogsProgress (event) { dialog.html(formatResponse(event.currentTarget.responseText)) })
-
-      function formatResponse (respText) {
-        const respArray = respText.split('\n')
-        const formattedArray = respArray.map(function formatter (index) {
-          const firstchar = index.charCodeAt(0)
-          let result = index.substring(2)
-          if (firstchar === 1) {
-            result = '<div class="stdout">STDOUT:' + result + '</div>'
-          } else if (firstchar === 2) {
-            result = '<div class="stdout">STDERR:' + result + '</div>'
+        function onLogsSuccess (success) {
+          if (success && (success.data instanceof ArrayBuffer)) {
+            const logdata = processLogdata(success.data)
+            dialog.html(logdata)
+          } else {
+            dialog.html('Could not fetch logs.')
           }
-          return result
-        })
-        return (formattedArray.join(''))
+        },
+        onRequestError
+      )
+
+      function processLogdata (databuffer) {
+        // This function processes a Docker container log retrieved
+        // via the API, as described in the following article:
+        // https://ahmet.im/blog/docker-logs-api-binary-format-explained/
+        // Many thanks to the author.
+        const byteArray = new Uint8Array(databuffer)
+        const records = []
+        const decoder = new TextDecoder()
+
+        let currentIndex = 0;
+        while (currentIndex < byteArray.length) {
+          // Read the header
+          // First byte contains record type. 1 is STDOUT, 2 is STDERR
+          const type = byteArray[currentIndex];
+          // Fifth through eightth bytes contain big-ending integer
+          // which is the length of the message
+          const recordLength = (byteArray[currentIndex + 4] << 24) |
+            (byteArray[currentIndex + 5] << 16) |
+            (byteArray[currentIndex + 6] << 8) |
+            byteArray[currentIndex + 7];
+
+          if (recordLength > 0) {
+            // Extract the message
+            const messageBytes = byteArray.slice(currentIndex + 8, currentIndex + 8 + recordLength);
+
+            const message = decoder.decode(messageBytes)
+            const newelement = document.createElement('div')
+            newelement.setAttribute('data-type', type)
+            newelement.classList.add('logmessage')
+            newelement.innerText = message
+            const record = newelement.outerHTML
+            records.push(record);
+          }
+
+          // Move to the next record
+          currentIndex += 8 + recordLength;
+        }
+
+        return records.join('')
       }
     },
     'containercommand')
@@ -301,6 +334,7 @@ function commands (world) {
           ],
           ['R key', 'toggle between first-person and third-person views.'],
           ['I key', 'to inspect the container in front of you. You have to stand right in front of a container.'],
+          ['L key', 'to see the logs of the container in front of you. You have to stand right in front of a container.'],
           [
             'Esc key',
             'remove focus from the window. You will have to click the window again for things to work. Try not to press Esc :)'

client/gameconsole.js

@@ -9,6 +9,7 @@ const dockergameconsole = function (world) {
 
   voxelconsole.keys.down.on('openconsole', openConsole)
   voxelconsole.keys.down.on('inspect', function () { processInput('inspect', true) })
+  voxelconsole.keys.down.on('logs', function () { processInput('logs', true) })
 
   widget.on('input', processInput)
 

client/world.js

@@ -39,7 +39,8 @@ const world = function (opts) {
     '<control>': 'alt',
     '`': 'openconsole',
     I: 'inspect',
-    R: 'pov'
+    R: 'pov',
+    L: 'logs'
   }
   opts.parentElement = opts.parentElement || document.body
   opts.container = opts.parentElement