aboutsummaryrefslogtreecommitdiffstats
path: root/src/templates
diff options
context:
space:
mode:
Diffstat (limited to 'src/templates')
-rw-r--r--src/templates/resource/steps/pod_definition.html146
1 files changed, 48 insertions, 98 deletions
diff --git a/src/templates/resource/steps/pod_definition.html b/src/templates/resource/steps/pod_definition.html
index 8599bb0..2cb6257 100644
--- a/src/templates/resource/steps/pod_definition.html
+++ b/src/templates/resource/steps/pod_definition.html
@@ -22,23 +22,9 @@ var netColors = ['red', 'blue', 'purple', 'green', 'orange', '#8CCDF5', '#1E9BAC
var hostCount = 0;
var lastHostBottom = 100;
var networks = new Set([]);
-var network_names = new Set([]);
var has_public_net = false;
-var vlans = {{vlans|default:'null'}};
-var vlan_string = "";
function main(graphContainer, overviewContainer, toolbarContainer) {
- if(vlans){
- for(var i=0; i<vlans.length-1; i++){
- vlan_string += vlans[i] + ", ";
- }
- if(vlans.length > 0){
- vlan_string += vlans[vlans.length-1];
- }
-
- var str = "Available vlans for your POD: " + vlan_string;
- document.getElementById("vlan_notice").innerHTML = str;
- }
//check if the browser is supported
if (!mxClient.isBrowserSupported()) {
mxUtils.error('Browser is not supported', 200, false);
@@ -55,14 +41,6 @@ function main(graphContainer, overviewContainer, toolbarContainer) {
var model = graph.getModel();
editor.setGraphContainer(graphContainer);
- {% if debug %}
- editor.addAction('printXML', function(editor, cell) {
- mxLog.write(encodeGraph(graph));
- mxLog.show();
- });
- {% endif %}
-
-
doGlobalConfig(graph);
currentGraph = graph;
@@ -70,7 +48,6 @@ function main(graphContainer, overviewContainer, toolbarContainer) {
restoreFromXml('{{xml|safe}}', editor);
{% elif hosts %}
{% for host in hosts %}
-
var host = {{host|safe}};
makeHost(host);
{% endfor %}
@@ -87,12 +64,15 @@ function main(graphContainer, overviewContainer, toolbarContainer) {
addToolbarButton(editor, toolbarContainer, 'zoomOut', '', "/static/img/mxgraph/zoom_out.png", true);
{% if debug %}
+ editor.addAction('printXML', function(editor, cell) {
+ mxLog.write(encodeGraph(graph));
+ mxLog.show();
+ });
addToolbarButton(editor, toolbarContainer, 'printXML', '', '/static/img/mxgraph/fit_to_size.png', true);
{% endif %}
var outline = new mxOutline(graph, overviewContainer);
-
var checkAllowed = function(edge, terminal, source) {
//check if other terminal is null, and that they are different
otherTerminal = edge.getTerminal(!source);
@@ -145,14 +125,14 @@ function main(graphContainer, overviewContainer, toolbarContainer) {
}
});
- createDeleteDialog = function(id)
- {
- var content = document.createElement('div');
- var innerHTML = "<button style='width: 46%;' onclick=deleteCell('" + id + "');>Remove</button>"
- innerHTML += "<button style='width: 46%;' onclick='currentWindow.destroy();'>Cancel</button>"
- content.innerHTML = innerHTML;
- showWindow(currentGraph, 'Do you want to delete this network?', content, 200, 62);
+ createDeleteDialog = function(id) {
+ var content = document.createElement('div');
+ var innerHTML = "<button style='width: 46%;' onclick=deleteCell('" + id + "');>Remove</button>"
+ innerHTML += "<button style='width: 46%;' onclick='currentWindow.destroy();'>Cancel</button>"
+ content.innerHTML = innerHTML;
+ showWindow(currentGraph, 'Do you want to delete this network?', content, 200, 62);
}
+
graph.dblClick = function(evt, cell) {
if( cell != null ){
@@ -167,8 +147,6 @@ function main(graphContainer, overviewContainer, toolbarContainer) {
}
}
};
- graph.setCellsSelectable(false);
- graph.setCellsMovable(false);
updateHosts({{ removed_hosts|default:"[]"|safe }});
if(!has_public_net){
@@ -197,10 +175,8 @@ function restoreFromXml(xml, editor) {
var cell = root.getChildAt(i);
if(cell.getId().indexOf("network") > -1) {
var info = JSON.parse(cell.getValue());
- var vlan_id = info['vlan_id'];
- networks.add(vlan_id);
var name = info['name'];
- network_names.add(name);
+ networks.add(name);
var styles = cell.getStyle().split(";");
var color = null;
for(var j=0; j< styles.length; j++){
@@ -211,11 +187,10 @@ function restoreFromXml(xml, editor) {
}
}
if(info.public){
- vlan_id = "";
has_public_net = true;
}
netCount++;
- makeSidebarNetwork(name, vlan_id, color, cell.getId());
+ makeSidebarNetwork(name, color, cell.getId());
}
}
}
@@ -228,50 +203,27 @@ function deleteCell(cellId) {
}
currentGraph.removeCells([cell]);
currentWindow.destroy();
-
}
function newNetworkWindow() {
var innerHtml = 'Name: <input type="text" name="net_name" id="net_name_input" style="margin:5px;"><br>';
- innerHtml += 'Vlan: <input type="number" step="1" name="vlan_id" id="vlan_id_input" style="margin:5px;"><br>';
innerHtml += '<button style="width: 46%;" onclick="parseNetworkWindow()">Okay</button>';
innerHtml += '<button style="width: 46%;" onclick="currentWindow.destroy();">Cancel</button><br>';
- innerHtml += '<div id="current_window_vlans"/>';
innerHtml += '<div id="current_window_errors"/>';
var content = document.createElement("div");
content.innerHTML = innerHtml;
showWindow(currentGraph, "Network Creation", content, 300, 300);
-
- if(vlans){
- vlan_notice = document.getElementById("current_window_vlans");
- vlan_notice.appendChild(document.createTextNode("Available Vlans: " + vlan_string));
- }
}
function parseNetworkWindow() {
var net_name = document.getElementById("net_name_input").value
- var vlan_id = document.getElementById("vlan_id_input").value
var error_div = document.getElementById("current_window_errors");
- var vlan_valid = Number.isInteger(Number(vlan_id)) && (vlan_id < 4095) && (vlan_id > 1)
- if(vlans){
- vlan_valid = vlan_valid & vlans.indexOf(Number(vlan_id)) >= 0;
- }
- if( !vlan_valid)
- {
- error_div.innerHTML = "Please only enter an integer in the valid range (default 1-4095) for the VLAN ID";
- return;
- }
- if( networks.has(vlan_id))
- {
- error_div.innerHTML = "All VLAN IDs must be unique";
- return;
- }
- if( network_names.has(net_name) ){
+ if( networks.has(net_name) ){
error_div.innerHTML = "All network names must be unique";
return;
}
- addNetwork(net_name, vlan_id);
+ addNetwork(net_name);
currentWindow.destroy();
}
@@ -312,6 +264,12 @@ function encodeGraph(graph) {
function doGlobalConfig(graph) {
//general graph stuff
graph.setMultigraph(false);
+ graph.setCellsSelectable(false);
+ graph.setCellsMovable(false);
+
+ //testing
+ graph.vertexLabelIsMovable = true;
+
//edge behavior
graph.setConnectable(true);
@@ -332,6 +290,9 @@ function doGlobalConfig(graph) {
style[mxConstants.STYLE_ROUNDED] = true;
style[mxConstants.STYLE_EDGE] = mxEdgeStyle.EntityRelation;
+ hostStyle = graph.getStylesheet().getDefaultVertexStyle();
+ hostStyle[mxConstants.STYLE_ROUNDED] = 1;
+
// TODO: Proper override
graph.convertValueToString = function(cell) {
try{
@@ -395,29 +356,21 @@ function othersUntagged(edgeID) {
var end1 = edge.getTerminal(true);
var end2 = edge.getTerminal(false);
- if( end1.getParent().getId().split('_')[0] == 'host' )
- {
+ if( end1.getParent().getId().split('_')[0] == 'host' ){
var netint = end1;
- }
- else
- {
+ } else {
var netint = end2;
}
var edges = netint.edges;
- for( var i=0; i < edges.length; i++ )
- {
- if( edges[i].getValue() )
- {
+ for( var i=0; i < edges.length; i++ ) {
+ if( edges[i].getValue() ) {
var tagged = JSON.parse(edges[i].getValue()).tagged;
- }
- else
- {
+ } else {
var tagged = true;
}
- if( !tagged )
- {
+ if( !tagged ) {
return true;
}
}
@@ -454,12 +407,11 @@ function parseVlanWindow(edgeID) {
break;
}
}
- //edge.setValue(cellValue);
currentGraph.refresh(edge);
closeWindow();
}
-function makeMxNetwork(vlan_id, net_name) {
+function makeMxNetwork(net_name, public = false) {
model = currentGraph.getModel();
width = 10;
height = 1700;
@@ -472,9 +424,8 @@ function makeMxNetwork(vlan_id, net_name) {
//alert(color);
}
var net_val = Object();
- net_val['vlan_id'] = vlan_id;
net_val['name'] = net_name;
- net_val['public'] = vlan_id < 0;
+ net_val['public'] = public;
net = currentGraph.insertVertex(
currentGraph.getDefaultParent(),
'network_' + netCount,
@@ -505,23 +456,23 @@ function makeMxNetwork(vlan_id, net_name) {
retVal['color'] = color;
retVal['element_id'] = "network_" + netCount;
+ networks.add(net_name);
+
netCount++;
return retVal;
}
function addPublicNetwork() {
- var net = makeMxNetwork(-1, "public");
- network_names.add("public");
- makeSidebarNetwork("public", "", net['color'], net['element_id']);
+ var net = makeMxNetwork("public", true);
+ makeSidebarNetwork("public", net['color'], net['element_id']);
+ has_public_net = true;
}
-function addNetwork(net_name, vlan_id) {
- var ret = makeMxNetwork(vlan_id, net_name);
+function addNetwork(net_name) {
+ var ret = makeMxNetwork(net_name);
var color = ret['color'];
var net_id = ret['element_id'];
- networks.add(vlan_id);
- network_names.add(net_name);
- makeSidebarNetwork(net_name, vlan_id, color, net_id);
+ makeSidebarNetwork(net_name, color, net_id);
}
function updateHosts(removed) {
@@ -535,8 +486,7 @@ function updateHosts(removed) {
var hosts = currentGraph.getChildVertices(currentGraph.getDefaultParent());
var topdist = 100;
- for(var i=0; i<hosts.length; i++)
- {
+ for(var i=0; i<hosts.length; i++) {
var host = hosts[i];
if(!host.id.startsWith("host_"))
{
@@ -549,7 +499,7 @@ function updateHosts(removed) {
}
}
-function makeSidebarNetwork(net_name, vlan_id, color, net_id){
+function makeSidebarNetwork(net_name, color, net_id){
var newNet = document.createElement("li");
var colorBlob = document.createElement("div");
colorBlob.className = "colorblob";
@@ -565,9 +515,6 @@ function makeSidebarNetwork(net_name, vlan_id, color, net_id){
createDeleteDialog(net_id);
}, false);
var text = net_name;
- if(vlan_id){
- text += " : " + vlan_id;
- }
var newNetValue = document.createTextNode(text);
textContainer.appendChild(newNetValue);
colorBlob.style['background'] = color;
@@ -585,7 +532,7 @@ function makeHost(hostInfo) {
interfaces = hostInfo['interfaces'];
graph = currentGraph;
width = 100;
- height = (25 * interfaces.length) + 10;
+ height = (25 * interfaces.length) + 25;
xoff = 75;
yoff = lastHostBottom + 50;
lastHostBottom = yoff + height;
@@ -600,6 +547,7 @@ function makeHost(hostInfo) {
'editable=0',
false
);
+ host.getGeometry().offset = new mxPoint(-50,0);
host.setConnectable(false);
hostCount++;
@@ -609,13 +557,16 @@ function makeHost(hostInfo) {
null,
JSON.stringify(interfaces[i]),
90,
- (i * 25) + 5,
+ (i * 25) + 12,
20,
20,
'fillColor=blue;editable=0',
false
);
+ port.getGeometry().offset = new mxPoint(-4*interfaces[i].name.length -2,0);
+ currentGraph.refresh(port);
}
+ currentGraph.refresh(host);
}
function submitForm() {
@@ -709,7 +660,6 @@ function submitForm() {
</div>
<ul id="network_list">
</ul>
- <p id="vlan_notice"></p>
<button type="button" style="display: none" onclick="submitForm();">Submit</button>
</div>
<form id="xml_form" method="post" action="/wf/workflow/">