servicedock/client/servicedock.js

var socket = io.connect()
var docker = new Docker(socket, error, sigstack, sigcontainer)
var parameters = docker.graphics.parameters
var zoom = 1
var stack = null
var standalone = null

function showdate() {
  $('#clock').text((new Date()).toLocaleString())
}

function error(e) {
  showdate()
  $('#status').removeClass().addClass('error')
  var txt = '<h1>Error</h1><p>'+(new Date()).toLocaleString()+'</p>'
  if (e)
    txt += (e.msg?'<p>'+e.msg+'</p>':'<pre>'+e+'</pre>')
        +  (e.data?'<pre>'+e.data+'</pre>':'')
  $('#error').html(txt).show()
  console.trace()
}

function update() {
  var data = {
    'containers': docker.containers.get(),
    'volumes':    docker.volumes.get(),
    'nodes':      docker.nodes.get(),
    'services':   docker.services.get(),
    'tasks':      docker.tasks.get()
  }
  $('a#data').attr('href', 'data:application/json;base64,'+btoa(unescape(encodeURIComponent(JSON.stringify(data)))))
             .attr('target', '_blank')
             .attr('download', window.location.hostname+'.json')
  var dot = docker.graphics.header(parameters)
  if (stack) dot += stack;
  if (standalone) dot += standalone;
  dot += docker.graphics.footer()
  $('a#dot').attr('href', 'data:text/vnd.graphviz;base64,'+btoa(unescape(encodeURIComponent(dot))))
            .attr('target', '_blank')
            .attr('download', window.location.hostname+'.dot')
  $('#error').hide()
  showdate()
  try {
    var svg = docker.graphics.viz(dot)
    $('#wizard').html(svg)
    $('a#svg').attr('href', 'data:image/svg;base64,'+btoa(unescape(encodeURIComponent(svg))))
                    .attr('target', '_blank')
                    .attr('download', window.location.hostname+'.svg')
    $('#status').removeClass().addClass('success')
  } catch (e) {
    error(e)
    console.trace()
  }
  showdate()
}

function sigstack() {
  showdate()
  $('#status').removeClass().addClass('wait')
  stack = docker.graphics.stack()
  update()
}

function sigcontainer() {
  showdate()
  $('#status').removeClass().addClass('wait')
  standalone = docker.graphics.standalone()
  update()
}

function setParameters() {
  localStorage.rankdir = (++localStorage.rankdir)%setParameters.rankdirs.length
  parameters.rankdir = setParameters.rankdirs[localStorage.rankdir]
  $('#orientation').removeClass().addClass(parameters.rankdir.toLowerCase())
}
setParameters.rankdirs = ['LR', 'TB', 'RL', 'BT']
if (!localStorage.rankdir)
  localStorage.rankdir = -1
else
  --localStorage.rankdir

function init() {
  // status and parameters
  showdate()
  $('#status').removeClass().addClass('wait')
  setParameters()
  $('#orientation').on('click', () => {
    setParameters()
    update()
  })
  if (localStorage.position)
    $('body').removeClass().addClass(localStorage.position)
  $('header').attr('draggable', 'true')
             .on('dragstart', (event) => {
               event.originalEvent.dataTransfer.setData("text", "");
             })
  // zoom in
  $('#zoomin').on('click', () => {
    zoom *= 1.5
    if (zoom>500) zoom=500;
    $('#wizard').width(100*zoom+'%')
    $('#wizard svg').width('100%')
  })
  // zoom reset
  $('#zoomreset').on('click', () => {
    zoom = 1
    $('#wizard').width('100%')
    $('#wizard svg').width('auto')
  })
  // zoom out
  $('#zoomout').on('click', () => {
    zoom /= 1.5
    if (zoom<0.1) zoom=0.1;
    $('#wizard').width(100*zoom+'%')
    $('#wizard svg').width('100%')
  })
  // restart on click on status
  $('#status').on('click', () => {
    docker.unpause()
  })
  // data file upload
  $('#upload').on('change', (ev) => {
    for (var i = 0, file; file = ev.currentTarget.files[i]; ++i) {
      if (file.type=='application/json') {
        var reader = new FileReader()
        reader.onload = (e) => {
          if (e.target.error) return error('cannot upload file', file);
          if (e.target.readyState==0||e.target.readyState==1) return;
          try {
            var data = JSON.parse(e.target.result)
            if (docker.upload(data))
              $('#status').removeClass().addClass('paused')
          } catch (e) {
            error(e)
          }
        }
        reader.readAsText(file)
        $('#upload').val('')
      }
    }
  })
  // drag and drop
  $('*').on('dragover', (event) => {
    event.preventDefault()
    var e = event.originalEvent
    var obj = $('body')
    var w = window.innerWidth
    var h = window.innerHeight
    if (e.clientY < h*.1) {
      obj.removeClass().addClass('top')
      if (localStorage) localStorage.position = 'top';
    } else if (e.clientY > h*.9) {
      obj.removeClass().addClass('bottom')
      if (localStorage) localStorage.position = 'bottom';
    } else if (e.clientX < w*.1) {
      obj.removeClass().addClass('left')
      if (localStorage) localStorage.position = 'left';
    } else if (e.clientX > w*.9) {
      obj.removeClass().addClass('right')
      if (localStorage) localStorage.position = 'right';
    }
  }).on('drop', (event) => {
    event.preventDefault()
  })
}
$(init)