You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
166 lines
4.9 KiB
166 lines
4.9 KiB
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)
|
|
|