Ubersicht widget to display information about currently running Docker images

docker-ps.coffee

command: '/usr/local/bin/docker ps --format "{{.ID}}\t{{.Image}}\t{{.Command}}\t{{.Ports}}\t{{.Names}}"'

refreshFrequency: 5000

render: (output) -> """
    <table>
      <thead>
        <tr>
          <th>Container Id</th>
          <th>Image</th>
          <th>Ports</th>
          <th>Names</th>
        </tr>
      </thead>
      <tbody></tbody>
    </table>
  """

update: (output, domEl) ->
  `
    var lines = output.split('\n')
    var lastLine = lines.pop()
    var content = lines.map( function(line) {
      var cells = line.split('\t')
      var image = cells[1]
                    .replace('docker.echo360.net/', 'docker.echo360.net/<br>')
                    .replace(':', '<br>')
      var command = cells[2]
                      .replace(/["']/g, '')
      var ports = cells[3]
                    .split(', ').join('<br>')
                    .replace(/0.0.0.0:/g, '')
                    .replace(/->/g, '</span> -> ')
      var names = cells[4]
                    .replace(/_/g, '<br>')
      return ['<tr><td class="container">',
               cells[0],
              '</td><td class="image">',
               image,
              //'</td><td class="command">',
               //command,
              '</td><td class="ports">',
               ports,
              '</td><td class="names">',
               cells[4],
               '</td></tr>'].join('')
    })
  `

  $(domEl).find('tbody').html(content)

style: """
  background-color: rgba(0,0,0,0.6)
  color: #ddd
  font-family: sans-serif
  font-size: 12px
  left: 15px
  padding: 0.5rem
  top: 15px
  table
    border-collapse: collapse
  tr
    border-bottom: 1px solid rgba(255, 255, 255, 0.5)
  th
    padding: 0 0.5em 0.25em 0.5em
    text-align: left
  td
    background-color: rgba(0,0,0,0.4)
    font-family: monospace
    line-height: 1.4
    max-width: 20em
    padding: 0.5em 0.75em
    text-align: left
  td.names, td.image
    max-width: none;
  td.ports > span
    display: inline-block
    width: 3em
"""