also show proxied urls

master
Marc Wäckerlin 6 years ago
parent cdb0a28bb9
commit b32aa874e7
  1. 16
      app.js
  2. 29
      client/servicedock.js
  3. 3
      package.json
  4. 88
      style/style.styl
  5. 1
      views/index.pug
  6. 19
      views/layout.pug

@ -19,7 +19,21 @@ app.use(cookieParser())
app.use(require('stylus').middleware(path.join(__dirname, 'style'))) app.use(require('stylus').middleware(path.join(__dirname, 'style')))
app.use(express.static(path.join(__dirname, 'style'))) app.use(express.static(path.join(__dirname, 'style')))
app.use(express.static(path.join(__dirname, 'client'))) app.use(express.static(path.join(__dirname, 'client')))
app.use(express.static(path.join(__dirname, 'node_modules', 'jquery', 'dist'))) app.get('/jquery.min.js', (req, res) => {
res.sendFile(path.join(__dirname, 'node_modules', 'jquery', 'dist', 'jquery.min.js'))
})
app.get('/jquery-ui.structure.min.css', (req, res) => {
res.sendFile(path.join(__dirname, 'node_modules', 'jqueryui', 'jquery-ui.structure.min.css'))
})
app.get('/jquery-ui.theme.min.css', (req, res) => {
res.sendFile(path.join(__dirname, 'node_modules', 'jqueryui', 'jquery-ui.theme.min.css'))
})
app.get('/jquery-ui.min.css', (req, res) => {
res.sendFile(path.join(__dirname, 'node_modules', 'jqueryui', 'jquery-ui.min.css'))
})
app.get('/jquery-ui.min.js', (req, res) => {
res.sendFile(path.join(__dirname, 'node_modules', 'jqueryui', 'jquery-ui.min.js'))
})
app.use(express.static(path.join(__dirname, 'node_modules', 'viz.js'))) app.use(express.static(path.join(__dirname, 'node_modules', 'viz.js')))
app.use(express.static(path.join(__dirname, 'node_modules', 'socket.io-client', 'dist'))) app.use(express.static(path.join(__dirname, 'node_modules', 'socket.io-client', 'dist')))
app.use(express.static(path.join(__dirname, 'node_modules', 'docker.js'))) app.use(express.static(path.join(__dirname, 'node_modules', 'docker.js')))

@ -10,14 +10,39 @@ function sigstack() {
var dot = docker.graphics.stack() var dot = docker.graphics.stack()
var svg = docker.graphics.viz(dot, error) var svg = docker.graphics.viz(dot, error)
$('#stacks').html(svg) $('#stacks').html(svg)
$('a#svgStacks').attr('href', 'data:image/svg;base64,'+btoa(svg)) $('a#svg').attr('href', 'data:image/svg;base64,'+btoa(svg))
.attr('target', '_blank') .attr('target', '_blank')
.attr('download', window.location.hostname+'.svg') .attr('download', window.location.hostname+'.svg')
.show() $('a#dot').attr('href', 'data:text/vnd.graphviz;base64,'+btoa(dot))
.attr('target', '_blank')
.attr('download', window.location.hostname+'.dot')
} }
function init() { function init() {
socket = io.connect() socket = io.connect()
docker = new Docker(socket, error, sigstack) docker = new Docker(socket, error, sigstack)
$('header').attr('draggable', 'true')
.on('dragstart', (event) => {
event.originalEvent.dataTransfer.setData("text", event.originalEvent.target.id);
})
$('*').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('bottom').removeClass('left').removeClass('right').addClass('top')
} else if (e.clientY > h*.9) {
obj.addClass('bottom').removeClass('left').removeClass('right').removeClass('top')
} else if (e.clientX < w*.1) {
obj.removeClass('bottom').addClass('left').removeClass('right').removeClass('top')
} else if (e.clientX > w*.9) {
obj.removeClass('bottom').removeClass('left').addClass('right').removeClass('top')
}
}).on('drop', (event) => {
event.preventDefault()
})
} }
$(init) $(init)

@ -10,10 +10,11 @@
"child_process": "^1.0.2", "child_process": "^1.0.2",
"cookie-parser": "*", "cookie-parser": "*",
"debug": "*", "debug": "*",
"docker.js": "^1.4.0", "docker.js": "^1.4.2",
"dockerode": "^2.5.7", "dockerode": "^2.5.7",
"express": "*", "express": "*",
"jquery": "^3.1.1", "jquery": "^3.1.1",
"jqueryui": "^1.11.1",
"morgan": "*", "morgan": "*",
"pty.js": "^0.3.1", "pty.js": "^0.3.1",
"pug": "*", "pug": "*",

@ -2,9 +2,95 @@ svg
width: 100% width: 100%
height: auto height: auto
header
display: flex
justify-content: space-between
background-color: blue
color: white
line-height: 1em
h1
font-size: 100%
a:link
color: white
#downloads
display: flex
#info
display: none
#error #error
display: none display: none
background-color: red background-color: red
#svgStacks #svg, #dot
text-decoration: inherit
color: white
display: none display: none
&[href]
display: block
.top
header
position: absolute
top: 0
left: 0
right: 0
height: 2em
overflow: hidden
main
position: absolute
top: 2em
left: 0
right: 0
bottom: 0
overflow: auto
.bottom
header
position: absolute
bottom: 0
left: 0
right: 0
height: 2em
overflow: hidden
main
position: absolute
top: 0
left: 0
right: 0
bottom: 2em
overflow: auto
.left
header
position: absolute
top: 0
right: 2em
left: 0
height: 2em
overflow: hidden
transform: translate(-50%) translate(1em) rotate(270deg) translate(-50%) translate(2em)
main
position: absolute
top: 0
left: 2em
right: 0
bottom: 0
overflow: auto
.right
header
position: absolute
top: 0
right: 0
left: 3em
height: 2em
overflow: hidden
transform: translate(50%) translate(-1em) rotate(90deg) translate(50%) translate(-1em)
main
position: absolute
top: 0
left: 0
right: 2em
bottom: 0
overflow: auto

@ -2,4 +2,3 @@ extends layout
block content block content
div#stacks loading... div#stacks loading...
a#svgStacks download image

@ -3,12 +3,23 @@ html
head head
title= title title= title
link(rel='stylesheet', href='/style.css') link(rel='stylesheet', href='/style.css')
link(rel='stylesheet', href='/jquery-ui.structure.min.css')
link(rel='stylesheet', href='/jquery-ui.theme.min.css')
link(rel='stylesheet', href='/jquery-ui.min.css')
script(type="text/javascript", src="/jquery.min.js") script(type="text/javascript", src="/jquery.min.js")
script(type="text/javascript", src="/jquery-ui.min.js")
script(type="text/javascript", src="/viz.js") script(type="text/javascript", src="/viz.js")
script(type="text/javascript", src="/docker.js") script(type="text/javascript", src="/docker.js")
script(type="text/javascript", src="/socket.io.js") script(type="text/javascript", src="/socket.io.js")
script(type="text/javascript", src="/servicedock.js") script(type="text/javascript", src="/servicedock.js")
body body.top
block content header#header
footer h1 ServiceDock
div#error div#downloads
a#svg download image
a#dot download source
main
block content
footer
div#info
div#error

Loading…
Cancel
Save