|
|
|
|
<!DOCTYPE HTML>
|
|
|
|
|
<html>
|
|
|
|
|
<head>
|
|
|
|
|
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
|
|
|
|
<meta name="viewport" content="width=device-width initial-scale=1" />
|
|
|
|
|
<link href="stylesheets/servicedock.css" rel="stylesheet" type="text/css" />
|
|
|
|
|
<link href="stylesheets/jquery-ui.css" rel="stylesheet" type="text/css" />
|
|
|
|
|
<script type="text/javascript" src="javascripts/jquery.js"></script>
|
|
|
|
|
<script type="text/javascript" src="javascripts/jquery-ui.js"></script>
|
|
|
|
|
<script type="text/javascript" src="javascripts/viz.js"></script>
|
|
|
|
|
<script type="text/javascript" src="/socket.io/socket.io.js"></script>
|
|
|
|
|
<script type="text/javascript" src="/docker/docker.js"></script>
|
|
|
|
|
<script type="text/javascript" src="javascripts/servicedock.js"></script>
|
|
|
|
|
<title>ServiceDock: Docker as a Service</title>
|
|
|
|
|
</head>
|
|
|
|
|
|
|
|
|
|
<body>
|
|
|
|
|
|
|
|
|
|
<div id="header" class="header">
|
|
|
|
|
<h1>ServiceDock <%= packageversion %> - Docker as a Service</h1>
|
|
|
|
|
<div id="togglemenu">
|
|
|
|
|
<span id="imagetools" style="display: none">
|
|
|
|
|
<img class="btn" onclick="zoom(1)" src="images/zoom.svg" />
|
|
|
|
|
<img class="btn" onclick="rotateviz()" src="images/rotate.svg" />
|
|
|
|
|
</span>
|
|
|
|
|
<span class="btn" id="close" onclick="showImage()" style="display: none">×</span>
|
|
|
|
|
<img class="btn" id="menuicon" onclick="togglemenu()" src="images/menu.svg" />
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<ul id="menu" style="display: none" onmouseleave="$('#menu').hide();">
|
|
|
|
|
<li onclick="$('#menu').hide(); showCreate()">Create</li>
|
|
|
|
|
<li><label for="upload">Upload</label><input autocomplete="off" type="file" accept="*.json" id="upload"/></li>
|
|
|
|
|
</ul>
|
|
|
|
|
<script type="text/javascript">
|
|
|
|
|
$(function() {
|
|
|
|
|
if (!window.FileReader) $("#upload").hide(); // not supported by browser
|
|
|
|
|
})
|
|
|
|
|
$("#upload").change(function(evt){$("#menu").hide(); upload(evt)});
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<div id="main">
|
|
|
|
|
|
|
|
|
|
<p>start up engine, please wait ...</p>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div id="login">
|
|
|
|
|
<h1>Login</h1>
|
|
|
|
|
<form onsubmit="connect()">
|
|
|
|
|
<label for="usernamefield">User Name</label>
|
|
|
|
|
<input placeholder="User Name" id="usernamefield" type="text" />
|
|
|
|
|
<label for="passwordfield">Password</label>
|
|
|
|
|
<input placeholder="Password" id="passwordfield" type="password" />
|
|
|
|
|
<button type="button" onclick="connect()">Login</button>
|
|
|
|
|
</form>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div id="create" style="display: none">
|
|
|
|
|
<form>
|
|
|
|
|
<fieldset>
|
|
|
|
|
<legend>Name</legend>
|
|
|
|
|
<input placeholder="name" type="text" id="name" pattern="^[-_a-zA-Z0-9]*$" size="20" required />
|
|
|
|
|
</fieldset>
|
|
|
|
|
<fieldset>
|
|
|
|
|
<legend>Image</legend>
|
|
|
|
|
<input placeholder="image" type="text" id="image" size="20" pattern="^[-_:/a-zA-Z0-9]*$" list="imagedata" required /><datalist id="imagedata"></datalist>
|
|
|
|
|
</fieldset>
|
|
|
|
|
<fieldset>
|
|
|
|
|
<legend>Open Ports</legend>
|
|
|
|
|
<input placeholder="ip" type="text" pattern="^([0-9]{1,3}\.){3}[0-9]{1,3}$" id="portip" size="15" style="width: 13ex" data-name="ip" />:<input placeholder="ext" type="number" id="portext" size="4" style="width: 6ex" data-name="external" data-separator=":" />:<input placeholder="int" type="text" id="portint" list="portintdata" size="3" style="width: 6ex" data-name="internal" data-separator=":" /><datalist id="portintdata"></datalist><button id="portadd" type="button" class="add">+</button><button id="portremove" type="button" class="remove">-</button><br/>
|
|
|
|
|
<select class="collect" size="5" id="createports">
|
|
|
|
|
</select>
|
|
|
|
|
</fieldset>
|
|
|
|
|
<fieldset>
|
|
|
|
|
<legend>Environment</legend>
|
|
|
|
|
<input placeholder="name" type="text" id="varname" list="varnamedata" size="10" /><datalist id="varnamedata"></datalist>=<input placeholder="value" type="text" id="varvalue" list="varvaluedata" size="10" data-separator="=" /><datalist id="varvaluedata"></datalist><button id="varadd" type="button" class="add">+</button><button id="varremove" type="button" class="remove">-</button><br/>
|
|
|
|
|
<select class="collect" size="5" id="createvars">
|
|
|
|
|
</select>
|
|
|
|
|
</fieldset>
|
|
|
|
|
<fieldset>
|
|
|
|
|
<legend>Mount Volumes</legend>
|
|
|
|
|
<input placeholder="on host" type="text" id="volumeext" list="volumeextdata" size="10" data-name="outside host" /><datalist id="volumeextdata"></datalist>:<input placeholder="inside container" type="text" id="volumeint" list="volumeintdata" size="10" data-name="inside id" data-separator=":" /><datalist id="volumeintdata"></datalist>:<input placeholder="ro" value="ro" type="checkbox" id="volumero" data-name="rw" data-false="rw" data-separator=":" /><label for="volumero" >ro</label><button id="volumeadd" type="button" class="add">+</button><button id="volumeremove" type="button" class="remove">-</button><br/>
|
|
|
|
|
<select class="collect" size="5" id="createvolumes">
|
|
|
|
|
</select>
|
|
|
|
|
</fieldset>
|
|
|
|
|
<fieldset>
|
|
|
|
|
<legend>Volumes From</legend>
|
|
|
|
|
<input placeholder="container" type="text" id="volumesfrom" list="volumesfromdata" size="10" /><datalist id="volumesfromdata"></datalist><button id="volumesfromadd" type="button" class="add">+</button><button id="volumesfromremove" type="button" class="remove">-</button><br/>
|
|
|
|
|
<select class="collect" size="5" id="createvolumefroms" >
|
|
|
|
|
</select>
|
|
|
|
|
</fieldset>
|
|
|
|
|
<fieldset>
|
|
|
|
|
<legend>Links</legend>
|
|
|
|
|
<input placeholder="container" type="text" id="linkcontainer" list="linkcontainerdata" size="10" data-name="container" /><datalist id="linkcontainerdata"></datalist>:<input placeholder="name" type="text" id="linkname" size="10" data-name="name" data-separator=":" /><button id="linkadd" type="button" class="add">+</button><button id="linkremove" type="button" class="remove">-</button><br/>
|
|
|
|
|
<select class="collect" size="5" id="createlinks">
|
|
|
|
|
</select>
|
|
|
|
|
</fieldset>
|
|
|
|
|
<fieldset>
|
|
|
|
|
<legend>Entry Point</legend>
|
|
|
|
|
<input placeholder="entrypoint" type="text" id="entrypoint" size="10" /><button id="entrypointadd" type="button" class="add">+</button><button id="entrypointremove" type="button" class="remove">-</button><br/>
|
|
|
|
|
<select class="collect" size="5" id="createentrypoints">
|
|
|
|
|
</select>
|
|
|
|
|
</fieldset>
|
|
|
|
|
<fieldset>
|
|
|
|
|
<legend>Command</legend>
|
|
|
|
|
<input placeholder="command" type="text" id="command" size="10" /><button id="commandadd" type="button" class="add">+</button><button id="commandremove" type="button" class="remove">-</button><br/>
|
|
|
|
|
<select class="collect" size="5" id="createcommands">
|
|
|
|
|
</select>
|
|
|
|
|
</fieldset>
|
|
|
|
|
<fieldset>
|
|
|
|
|
<legend>Action</legend>
|
|
|
|
|
<button type="button" class="submit" id="doappend">+</button><button class="remove" type="button" id="doremove">-</button><button type="button" class="submit" id="dosend">Send</button><br/>
|
|
|
|
|
<select size="5" id="createpreview" required>
|
|
|
|
|
</select>
|
|
|
|
|
</fieldset>
|
|
|
|
|
</form>
|
|
|
|
|
<div id="preview"></div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<pre id="logs" style="display: none"> </pre>
|
|
|
|
|
|
|
|
|
|
<div id="console" style="display: none">
|
|
|
|
|
<pre id="screen" tabindex="1"></pre>
|
|
|
|
|
<!-- <form id="bash">
|
|
|
|
|
<input placeholder="command" type="text" id="command">
|
|
|
|
|
<input type="submit">
|
|
|
|
|
</form> -->
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div id="statusbar">
|
|
|
|
|
<span id="server">[unknown]</span>
|
|
|
|
|
<span id="connectionstatus">
|
|
|
|
|
<span id="good" title="connected" style="display: none">✔</span>
|
|
|
|
|
<span id="authentication" title="authentication" style="display:none">🔑</span>
|
|
|
|
|
<span id="bad" title="disconnected">✘</span>
|
|
|
|
|
</span>
|
|
|
|
|
<span id="status">
|
|
|
|
|
<noscript>JavaScript is required for the interface.</noscript>
|
|
|
|
|
</span>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
