Skip to content

Instantly share code, notes, and snippets.

@Ladas

Ladas/cloud_networking.dot

Forked from Fryguy/cloud_networking.dot
Last active February 17, 2016 10:30
Show Gist options
  • Save Ladas/441b8847ff5aab3be1e5 to your computer and use it in GitHub Desktop.
Save Ladas/441b8847ff5aab3be1e5 to your computer and use it in GitHub Desktop.
Download ZIP
Networking rearchitecture
Raw
cloud_networking.dot
digraph CloudNetworking {
graph [ fontname="Helvetica-Bold" ]
node [ id="\N" shape="Mrecord" style="filled" fontname="Helvetica" fillcolor="#ffffff" penwidth="2" ]
edge [ arrowsize="0.5" fontname="Helvetica" ]
label = "Cloud Networking"
style = "rounded"
openstack_provider [label="OpenstackProvider"]
network_provider [label="NetworkProvider" style="dotted"]
{rank = "same" openstack_provider network_provider}
openstack_cloud_manager [label="{OpenstackCloudManager|CloudManager|ExtManagementSystem}"]
network_manager [label="{NeutronNetworkManager|NetworkManager|ExtManagementSystem}" style="dotted"]
{rank = "same" openstack_cloud_manager network_manager}
cloud_tenant [label="{CloudTenant|NetworkProject}"]
network_group [label="{NetworkGroup}"]
network_router [label="{NetworkRouter}"]
network_subnet [label="{NetworkSubnet}"]
network_port [label="NetworkPort"]
vm [label="Vm"]
floating_ip [label="FloatingIp"]
security_group [label="SecurityGroup"]
firewall_rule [label="FirewallRule"]
network [label="{Network|NetworkInterfaceInfo}"]
{rank = "max" network}
openstack_provider -> openstack_cloud_manager -> cloud_tenant -> vm
cloud_tenant -> network_group
cloud_tenant -> security_group
openstack_provider -> network_manager
network_provider -> network_manager [style="dashed"]
openstack_cloud_manager -> network_manager
network_manager -> network_manager [style="dashed" label="parent"]
network_manager -> network_group
network_manager -> network_subnet
network_group -> network_group_mapping -> network_group
{rank = "same" cloud_tenant network_group network_group_mapping}
network_group -> network_router -> network_subnet
network_group -> network_subnet
network_group -> security_group [label="optional"]
network_subnet -> network_port
network_subnet -> vm [label="<-- becomes\nhas_many\nthrough\nnetwork_port" style="dashed"]
network_subnet -> floating_ip
security_group -> firewall_rule
security_group -> network_port [dir = "both"]
network_group -> floating_ip [label="<-- becomes\nhas_many\nthrough network_subnet" style="dashed"]
network_port -> floating_ip [headlabel="1"]
vm -> network_port
vm -> floating_ip [label="<-- becomes\nhas_many\nthrough\nnetwork_port" style="dashed"]
}
Raw
index.html
<head>
<title>CloudNetworking</title>
<script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js" charset="utf-8"></script>
<style>/* layout */
body {
font-family: "helvetica";
font-size: 14px;
}
#diagram, #desc-wrap {
xborder: 1px solid blue;
}
#diagram {
float: left;
}
#desc-wrap {
margin: 0px;
margin-left: 840px;
padding: 15px 4px 4px 4px;
}
#desc, #choices {
border: 1.75px solid #000000;
border-radius: 8px;
/* cluster background */
background-color: #dddddd;
padding: 5px;
margin: 8px;
font-weight: bold;
}
/* diagram */
text {
fill: #666666;
}
.node.noui path {
fill: #dddddd;
}
.node.same path {
stroke: red;
}
.node.same text {
fill: red;
}
/* cluster title */
.cluster text {
fill: #000000;
}
/* cluster background */
.cluster path {
stroke: #000000;
fill: #dddddd;
}
.node path {
stroke-width: 2px;
stroke: #000000;
fill: #ffffff;
}
.node text {
font-size: 12px;
}
.client.node path,
.client.node polygon,
.client.node polyline,
.server.node path,
.server.node polygon,
.server.node polyline {
stroke: green;
}
.client-config.node path,
.client-config.node polygon,
.client-config.node polyline,
.server-config.node path,
.server-config.node polygon,
.server-config.node polyline {
fill: #cccc00;
}
.edge.src-dest polyton, .edge.src polygon, .edge.dest polygon {
stroke: #996600;
fill: #996600;
z-index: 1;
}
.edge.src-dest path, .edge.src path, .edge.dest path {
stroke: #996600;
z-index: 1;
}
.active.node text {
fill: #000000;
}
.active.node path,
.active.node polygon,
.active.node polyline {
stroke: red;
}
/* arrow head */
.edge polygon {
stroke: #996600;
fill: #996600;
}
/* lines */
.edge path {
stroke: #996600;
}
</style>
</head>
<body>
<div id="diagram">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="587pt" height="718pt" viewBox="0.00 0.00 586.59 718.00">
<g id="graph0" class="graph" transform="scale(1 1) rotate(0) translate(4 714)">
<title>CloudNetworking</title>
<polygon fill="white" stroke="none" points="-4,4 -4,-714 582.592,-714 582.592,4 -4,4"/>
<text text-anchor="middle" x="289.296" y="-6.8" font-family="Helvetica,sans-Serif" font-weight="bold" font-size="14.00">Cloud Networking</text>
<!-- openstack_provider -->
<g id="openstack_provider" class="node"><title>openstack_provider</title>
<path fill="#ffffff" stroke="black" stroke-width="2" d="M79.8516,-673.5C79.8516,-673.5 190.906,-673.5 190.906,-673.5 196.906,-673.5 202.906,-679.5 202.906,-685.5 202.906,-685.5 202.906,-697.5 202.906,-697.5 202.906,-703.5 196.906,-709.5 190.906,-709.5 190.906,-709.5 79.8516,-709.5 79.8516,-709.5 73.8516,-709.5 67.8516,-703.5 67.8516,-697.5 67.8516,-697.5 67.8516,-685.5 67.8516,-685.5 67.8516,-679.5 73.8516,-673.5 79.8516,-673.5"/>
<text text-anchor="middle" x="135.379" y="-687.3" font-family="Helvetica,sans-Serif" font-size="14.00">OpenstackProvider</text>
</g>
<!-- openstack_cloud_manager -->
<g id="openstack_cloud_manager" class="node"><title>openstack_cloud_manager</title>
<path fill="#ffffff" stroke="black" stroke-width="2" d="M12,-569.5C12,-569.5 162.758,-569.5 162.758,-569.5 168.758,-569.5 174.758,-575.5 174.758,-581.5 174.758,-581.5 174.758,-623.5 174.758,-623.5 174.758,-629.5 168.758,-635.5 162.758,-635.5 162.758,-635.5 12,-635.5 12,-635.5 6,-635.5 0,-629.5 0,-623.5 0,-623.5 0,-581.5 0,-581.5 0,-575.5 6,-569.5 12,-569.5"/>
<text text-anchor="middle" x="87.3789" y="-620.3" font-family="Helvetica,sans-Serif" font-size="14.00">OpenstackCloudManager</text>
<polyline fill="none" stroke="black" stroke-width="2" points="0,-613.5 174.758,-613.5 "/>
<text text-anchor="middle" x="87.3789" y="-598.3" font-family="Helvetica,sans-Serif" font-size="14.00">CloudManager</text>
<polyline fill="none" stroke="black" stroke-width="2" points="0,-591.5 174.758,-591.5 "/>
<text text-anchor="middle" x="87.3789" y="-576.3" font-family="Helvetica,sans-Serif" font-size="14.00">ExtManagementSystem</text>
</g>
<!-- openstack_provider&#45;&gt;openstack_cloud_manager -->
<g id="edge1" class="edge"><title>openstack_provider-&gt;openstack_cloud_manager</title>
<path fill="none" stroke="black" d="M125.896,-673.312C120.686,-663.869 114.014,-651.776 107.692,-640.317"/>
<polygon fill="black" stroke="black" points="109.145,-639.328 105.197,-635.795 106.08,-641.018 109.145,-639.328"/>
</g>
<!-- network_manager -->
<g id="network_manager" class="node"><title>network_manager</title>
<path fill="none" stroke="black" stroke-width="2" stroke-dasharray="1,5" d="M222.176,-569.5C222.176,-569.5 370.582,-569.5 370.582,-569.5 376.582,-569.5 382.582,-575.5 382.582,-581.5 382.582,-581.5 382.582,-623.5 382.582,-623.5 382.582,-629.5 376.582,-635.5 370.582,-635.5 370.582,-635.5 222.176,-635.5 222.176,-635.5 216.176,-635.5 210.176,-629.5 210.176,-623.5 210.176,-623.5 210.176,-581.5 210.176,-581.5 210.176,-575.5 216.176,-569.5 222.176,-569.5"/>
<text text-anchor="middle" x="296.379" y="-620.3" font-family="Helvetica,sans-Serif" font-size="14.00">NeutronNetworkManager</text>
<polyline fill="none" stroke="black" stroke-width="2" stroke-dasharray="1,5" points="210.176,-613.5 382.582,-613.5 "/>
<text text-anchor="middle" x="296.379" y="-598.3" font-family="Helvetica,sans-Serif" font-size="14.00">NetworkManager</text>
<polyline fill="none" stroke="black" stroke-width="2" stroke-dasharray="1,5" points="210.176,-591.5 382.582,-591.5 "/>
<text text-anchor="middle" x="296.379" y="-576.3" font-family="Helvetica,sans-Serif" font-size="14.00">ExtManagementSystem</text>
</g>
<!-- openstack_provider&#45;&gt;network_manager -->
<g id="edge6" class="edge"><title>openstack_provider-&gt;network_manager</title>
<path fill="none" stroke="black" d="M167.187,-673.312C185.831,-663.237 210.055,-650.147 232.482,-638.028"/>
<polygon fill="black" stroke="black" points="233.374,-639.535 236.941,-635.618 231.71,-636.456 233.374,-639.535"/>
</g>
<!-- network_provider -->
<g id="network_provider" class="node"><title>network_provider</title>
<path fill="none" stroke="black" stroke-width="2" stroke-dasharray="1,5" d="M248.641,-673.5C248.641,-673.5 344.117,-673.5 344.117,-673.5 350.117,-673.5 356.117,-679.5 356.117,-685.5 356.117,-685.5 356.117,-697.5 356.117,-697.5 356.117,-703.5 350.117,-709.5 344.117,-709.5 344.117,-709.5 248.641,-709.5 248.641,-709.5 242.641,-709.5 236.641,-703.5 236.641,-697.5 236.641,-697.5 236.641,-685.5 236.641,-685.5 236.641,-679.5 242.641,-673.5 248.641,-673.5"/>
<text text-anchor="middle" x="296.379" y="-687.3" font-family="Helvetica,sans-Serif" font-size="14.00">NetworkProvider</text>
</g>
<!-- network_provider&#45;&gt;network_manager -->
<g id="edge7" class="edge"><title>network_provider-&gt;network_manager</title>
<path fill="none" stroke="black" stroke-dasharray="5,2" d="M296.379,-673.312C296.379,-664.036 296.379,-652.203 296.379,-640.926"/>
<polygon fill="black" stroke="black" points="298.129,-640.795 296.379,-635.795 294.629,-640.795 298.129,-640.795"/>
</g>
<!-- openstack_cloud_manager&#45;&gt;network_manager -->
<g id="edge8" class="edge"><title>openstack_cloud_manager-&gt;network_manager</title>
<path fill="none" stroke="black" d="M175.143,-602.5C184.956,-602.5 194.769,-602.5 204.582,-602.5"/>
<polygon fill="black" stroke="black" points="204.714,-604.25 209.714,-602.5 204.714,-600.75 204.714,-604.25"/>
</g>
<!-- cloud_tenant -->
<g id="cloud_tenant" class="node"><title>cloud_tenant</title>
<path fill="#ffffff" stroke="black" stroke-width="2" d="M73.9204,-487.5C73.9204,-487.5 160.837,-487.5 160.837,-487.5 166.837,-487.5 172.837,-493.5 172.837,-499.5 172.837,-499.5 172.837,-519.5 172.837,-519.5 172.837,-525.5 166.837,-531.5 160.837,-531.5 160.837,-531.5 73.9204,-531.5 73.9204,-531.5 67.9204,-531.5 61.9204,-525.5 61.9204,-519.5 61.9204,-519.5 61.9204,-499.5 61.9204,-499.5 61.9204,-493.5 67.9204,-487.5 73.9204,-487.5"/>
<text text-anchor="middle" x="117.379" y="-516.3" font-family="Helvetica,sans-Serif" font-size="14.00">CloudTenant</text>
<polyline fill="none" stroke="black" stroke-width="2" points="61.9204,-509.5 172.837,-509.5 "/>
<text text-anchor="middle" x="117.379" y="-494.3" font-family="Helvetica,sans-Serif" font-size="14.00">NetworkProject</text>
</g>
<!-- openstack_cloud_manager&#45;&gt;cloud_tenant -->
<g id="edge2" class="edge"><title>openstack_cloud_manager-&gt;cloud_tenant</title>
<path fill="none" stroke="black" d="M97.9558,-569.417C101.493,-558.687 105.391,-546.864 108.76,-536.643"/>
<polygon fill="black" stroke="black" points="110.465,-537.062 110.368,-531.765 107.141,-535.966 110.465,-537.062"/>
</g>
<!-- network_manager&#45;&gt;network_manager -->
<g id="edge9" class="edge"><title>network_manager-&gt;network_manager</title>
<path fill="none" stroke="black" stroke-dasharray="5,2" d="M382.624,-610.991C393.455,-609.494 400.582,-606.664 400.582,-602.5 400.582,-599.052 395.694,-596.518 387.863,-594.899"/>
<polygon fill="black" stroke="black" points="387.847,-593.121 382.624,-594.009 387.26,-596.572 387.847,-593.121"/>
<text text-anchor="middle" x="420.43" y="-598.3" font-family="Helvetica,sans-Serif" font-size="14.00">parent</text>
</g>
<!-- network_group -->
<g id="network_group" class="node"><title>network_group</title>
<path fill="#ffffff" stroke="black" stroke-width="2" d="M236.251,-491.5C236.251,-491.5 318.506,-491.5 318.506,-491.5 324.506,-491.5 330.506,-497.5 330.506,-503.5 330.506,-503.5 330.506,-515.5 330.506,-515.5 330.506,-521.5 324.506,-527.5 318.506,-527.5 318.506,-527.5 236.251,-527.5 236.251,-527.5 230.251,-527.5 224.251,-521.5 224.251,-515.5 224.251,-515.5 224.251,-503.5 224.251,-503.5 224.251,-497.5 230.251,-491.5 236.251,-491.5"/>
<text text-anchor="middle" x="277.379" y="-505.3" font-family="Helvetica,sans-Serif" font-size="14.00">NetworkGroup</text>
</g>
<!-- network_manager&#45;&gt;network_group -->
<g id="edge10" class="edge"><title>network_manager-&gt;network_group</title>
<path fill="none" stroke="black" d="M289.68,-569.417C287.123,-557.169 284.269,-543.498 281.953,-532.41"/>
<polygon fill="black" stroke="black" points="283.666,-532.048 280.931,-527.511 280.24,-532.763 283.666,-532.048"/>
</g>
<!-- cloud_tenant&#45;&gt;network_group -->
<g id="edge4" class="edge"><title>cloud_tenant-&gt;network_group</title>
<path fill="none" stroke="black" d="M173.004,-509.5C188.267,-509.5 203.529,-509.5 218.792,-509.5"/>
<polygon fill="black" stroke="black" points="218.968,-511.25 223.968,-509.5 218.968,-507.75 218.968,-511.25"/>
</g>
<!-- vm -->
<g id="vm" class="node"><title>vm</title>
<path fill="#ffffff" stroke="black" stroke-width="2" d="M187.379,-197.5C187.379,-197.5 217.379,-197.5 217.379,-197.5 223.379,-197.5 229.379,-203.5 229.379,-209.5 229.379,-209.5 229.379,-221.5 229.379,-221.5 229.379,-227.5 223.379,-233.5 217.379,-233.5 217.379,-233.5 187.379,-233.5 187.379,-233.5 181.379,-233.5 175.379,-227.5 175.379,-221.5 175.379,-221.5 175.379,-209.5 175.379,-209.5 175.379,-203.5 181.379,-197.5 187.379,-197.5"/>
<text text-anchor="middle" x="202.379" y="-211.3" font-family="Helvetica,sans-Serif" font-size="14.00">Vm</text>
</g>
<!-- cloud_tenant&#45;&gt;vm -->
<g id="edge3" class="edge"><title>cloud_tenant-&gt;vm</title>
<path fill="none" stroke="black" d="M115.276,-487.4C113.652,-465.315 112.671,-429.774 119.379,-400 133.296,-338.229 169.058,-272.026 188.794,-238.572"/>
<polygon fill="black" stroke="black" points="190.533,-239.07 191.585,-233.878 187.525,-237.281 190.533,-239.07"/>
</g>
<!-- security_group -->
<g id="security_group" class="node"><title>security_group</title>
<path fill="#ffffff" stroke="black" stroke-width="2" d="M140.638,-400.5C140.638,-400.5 222.12,-400.5 222.12,-400.5 228.12,-400.5 234.12,-406.5 234.12,-412.5 234.12,-412.5 234.12,-424.5 234.12,-424.5 234.12,-430.5 228.12,-436.5 222.12,-436.5 222.12,-436.5 140.638,-436.5 140.638,-436.5 134.638,-436.5 128.638,-430.5 128.638,-424.5 128.638,-424.5 128.638,-412.5 128.638,-412.5 128.638,-406.5 134.638,-400.5 140.638,-400.5"/>
<text text-anchor="middle" x="181.379" y="-414.3" font-family="Helvetica,sans-Serif" font-size="14.00">SecurityGroup</text>
</g>
<!-- cloud_tenant&#45;&gt;security_group -->
<g id="edge5" class="edge"><title>cloud_tenant-&gt;security_group</title>
<path fill="none" stroke="black" d="M132.546,-487.408C142.663,-473.34 155.917,-454.908 166.064,-440.797"/>
<polygon fill="black" stroke="black" points="167.608,-441.647 169.107,-436.566 164.767,-439.604 167.608,-441.647"/>
</g>
<!-- network_router -->
<g id="network_router" class="node"><title>network_router</title>
<path fill="#ffffff" stroke="black" stroke-width="2" d="M302.696,-400.5C302.696,-400.5 388.062,-400.5 388.062,-400.5 394.062,-400.5 400.062,-406.5 400.062,-412.5 400.062,-412.5 400.062,-424.5 400.062,-424.5 400.062,-430.5 394.062,-436.5 388.062,-436.5 388.062,-436.5 302.696,-436.5 302.696,-436.5 296.696,-436.5 290.696,-430.5 290.696,-424.5 290.696,-424.5 290.696,-412.5 290.696,-412.5 290.696,-406.5 296.696,-400.5 302.696,-400.5"/>
<text text-anchor="middle" x="345.379" y="-414.3" font-family="Helvetica,sans-Serif" font-size="14.00">NetworkRouter</text>
</g>
<!-- network_group&#45;&gt;network_router -->
<g id="edge13" class="edge"><title>network_group-&gt;network_router</title>
<path fill="none" stroke="black" d="M290.49,-491.34C301.496,-476.934 317.271,-456.288 329.087,-440.823"/>
<polygon fill="black" stroke="black" points="330.663,-441.643 332.308,-436.607 327.882,-439.518 330.663,-441.643"/>
</g>
<!-- network_subnet -->
<g id="network_subnet" class="node"><title>network_subnet</title>
<path fill="#ffffff" stroke="black" stroke-width="2" d="M295.521,-326.5C295.521,-326.5 383.237,-326.5 383.237,-326.5 389.237,-326.5 395.237,-332.5 395.237,-338.5 395.237,-338.5 395.237,-350.5 395.237,-350.5 395.237,-356.5 389.237,-362.5 383.237,-362.5 383.237,-362.5 295.521,-362.5 295.521,-362.5 289.521,-362.5 283.521,-356.5 283.521,-350.5 283.521,-350.5 283.521,-338.5 283.521,-338.5 283.521,-332.5 289.521,-326.5 295.521,-326.5"/>
<text text-anchor="middle" x="339.379" y="-340.3" font-family="Helvetica,sans-Serif" font-size="14.00">NetworkSubnet</text>
</g>
<!-- network_group&#45;&gt;network_subnet -->
<g id="edge15" class="edge"><title>network_group-&gt;network_subnet</title>
<path fill="none" stroke="black" d="M274.169,-491.425C270.836,-469.252 267.805,-429.858 281.379,-400 287.49,-386.557 298.608,-374.839 309.486,-365.75"/>
<polygon fill="black" stroke="black" points="310.689,-367.028 313.474,-362.521 308.486,-364.307 310.689,-367.028"/>
</g>
<!-- floating_ip -->
<g id="floating_ip" class="node"><title>floating_ip</title>
<path fill="#ffffff" stroke="black" stroke-width="2" d="M275.638,-26.5C275.638,-26.5 329.12,-26.5 329.12,-26.5 335.12,-26.5 341.12,-32.5 341.12,-38.5 341.12,-38.5 341.12,-50.5 341.12,-50.5 341.12,-56.5 335.12,-62.5 329.12,-62.5 329.12,-62.5 275.638,-62.5 275.638,-62.5 269.638,-62.5 263.638,-56.5 263.638,-50.5 263.638,-50.5 263.638,-38.5 263.638,-38.5 263.638,-32.5 269.638,-26.5 275.638,-26.5"/>
<text text-anchor="middle" x="302.379" y="-40.3" font-family="Helvetica,sans-Serif" font-size="14.00">FloatingIp</text>
</g>
<!-- network_group&#45;&gt;floating_ip -->
<g id="edge22" class="edge"><title>network_group-&gt;floating_ip</title>
<path fill="none" stroke="black" stroke-dasharray="5,2" d="M323.094,-491.45C367.537,-473.421 428.379,-444.224 428.379,-419.5 428.379,-419.5 428.379,-419.5 428.379,-131 428.379,-110.381 381.593,-83.1426 345.04,-65.0087"/>
<polygon fill="black" stroke="black" points="345.442,-63.2569 340.183,-62.6227 343.899,-66.3982 345.442,-63.2569"/>
<text text-anchor="middle" x="503.485" y="-289.8" font-family="Helvetica,sans-Serif" font-size="14.00">&lt;-- becomes</text>
<text text-anchor="middle" x="503.485" y="-275.8" font-family="Helvetica,sans-Serif" font-size="14.00">has_many</text>
<text text-anchor="middle" x="503.485" y="-261.8" font-family="Helvetica,sans-Serif" font-size="14.00">through network_subnet</text>
</g>
<!-- network_group&#45;&gt;security_group -->
<g id="edge16" class="edge"><title>network_group-&gt;security_group</title>
<path fill="none" stroke="black" d="M229.675,-491.478C218.572,-485.721 207.597,-478.319 199.338,-469 192.585,-461.38 188.309,-451.021 185.632,-441.749"/>
<polygon fill="black" stroke="black" points="187.276,-441.119 184.304,-436.734 183.892,-442.015 187.276,-441.119"/>
<text text-anchor="middle" x="223.899" y="-457.8" font-family="Helvetica,sans-Serif" font-size="14.00">optional</text>
</g>
<!-- network_group_mapping -->
<g id="network_group_mapping" class="node"><title>network_group_mapping</title>
<path fill="#ffffff" stroke="black" stroke-width="2" d="M378.328,-491.5C378.328,-491.5 524.43,-491.5 524.43,-491.5 530.43,-491.5 536.43,-497.5 536.43,-503.5 536.43,-503.5 536.43,-515.5 536.43,-515.5 536.43,-521.5 530.43,-527.5 524.43,-527.5 524.43,-527.5 378.328,-527.5 378.328,-527.5 372.328,-527.5 366.328,-521.5 366.328,-515.5 366.328,-515.5 366.328,-503.5 366.328,-503.5 366.328,-497.5 372.328,-491.5 378.328,-491.5"/>
<text text-anchor="middle" x="451.379" y="-505.3" font-family="Helvetica,sans-Serif" font-size="14.00">network_group_mapping</text>
</g>
<!-- network_group&#45;&gt;network_group_mapping -->
<g id="edge11" class="edge"><title>network_group-&gt;network_group_mapping</title>
<path fill="none" stroke="black" d="M330.734,-497.7C340.767,-496.462 350.8,-495.778 360.833,-495.648"/>
<polygon fill="black" stroke="black" points="361.085,-497.397 366.079,-495.63 361.074,-493.897 361.085,-497.397"/>
</g>
<!-- network_router&#45;&gt;network_subnet -->
<g id="edge14" class="edge"><title>network_router-&gt;network_subnet</title>
<path fill="none" stroke="black" d="M343.957,-400.437C343.147,-390.717 342.122,-378.421 341.248,-367.928"/>
<polygon fill="black" stroke="black" points="342.992,-367.778 340.832,-362.941 339.504,-368.069 342.992,-367.778"/>
</g>
<!-- network_port -->
<g id="network_port" class="node"><title>network_port</title>
<path fill="#ffffff" stroke="black" stroke-width="2" d="M130.869,-114C130.869,-114 199.889,-114 199.889,-114 205.889,-114 211.889,-120 211.889,-126 211.889,-126 211.889,-138 211.889,-138 211.889,-144 205.889,-150 199.889,-150 199.889,-150 130.869,-150 130.869,-150 124.869,-150 118.869,-144 118.869,-138 118.869,-138 118.869,-126 118.869,-126 118.869,-120 124.869,-114 130.869,-114"/>
<text text-anchor="middle" x="165.379" y="-127.8" font-family="Helvetica,sans-Serif" font-size="14.00">NetworkPort</text>
</g>
<!-- network_subnet&#45;&gt;network_port -->
<g id="edge17" class="edge"><title>network_subnet-&gt;network_port</title>
<path fill="none" stroke="black" d="M330.733,-326.371C320.931,-307.522 304.01,-276.63 286.379,-252 267.494,-225.618 261.295,-219.968 238.379,-197 223.145,-181.731 204.9,-165.736 190.461,-153.555"/>
<polygon fill="black" stroke="black" points="191.45,-152.1 186.495,-150.224 189.199,-154.78 191.45,-152.1"/>
</g>
<!-- network_subnet&#45;&gt;vm -->
<g id="edge18" class="edge"><title>network_subnet-&gt;vm</title>
<path fill="none" stroke="black" stroke-dasharray="5,2" d="M283.2,-328.087C280.557,-327.378 277.94,-326.68 275.379,-326 244.359,-317.767 225.533,-333.031 205.448,-308 189.951,-288.686 192.179,-258.991 196.299,-238.704"/>
<polygon fill="black" stroke="black" points="198.021,-239.019 197.377,-233.761 194.601,-238.273 198.021,-239.019"/>
<text text-anchor="middle" x="246.844" y="-296.8" font-family="Helvetica,sans-Serif" font-size="14.00">&lt;-- becomes</text>
<text text-anchor="middle" x="246.844" y="-282.8" font-family="Helvetica,sans-Serif" font-size="14.00">has_many</text>
<text text-anchor="middle" x="246.844" y="-268.8" font-family="Helvetica,sans-Serif" font-size="14.00">through</text>
<text text-anchor="middle" x="246.844" y="-254.8" font-family="Helvetica,sans-Serif" font-size="14.00">network_port</text>
</g>
<!-- network_subnet&#45;&gt;floating_ip -->
<g id="edge19" class="edge"><title>network_subnet-&gt;floating_ip</title>
<path fill="none" stroke="black" d="M343.274,-326.423C351.637,-286.405 368.594,-183.911 343.379,-104 339.096,-90.4262 330.413,-77.2656 322.136,-66.8759"/>
<polygon fill="black" stroke="black" points="323.394,-65.6502 318.873,-62.8903 320.686,-67.8676 323.394,-65.6502"/>
</g>
<!-- network_port&#45;&gt;floating_ip -->
<g id="edge23" class="edge"><title>network_port-&gt;floating_ip</title>
<path fill="none" stroke="black" d="M190.37,-113.8C203.369,-104.991 219.593,-94.2111 234.379,-85 245.026,-78.3677 256.789,-71.4083 267.496,-65.2108"/>
<polygon fill="black" stroke="black" points="268.557,-66.619 272.013,-62.6046 266.808,-63.5873 268.557,-66.619"/>
<text text-anchor="middle" x="268.12" y="-65.4046" font-family="Helvetica,sans-Serif" font-size="14.00">1</text>
</g>
<!-- vm&#45;&gt;network_port -->
<g id="edge24" class="edge"><title>vm-&gt;network_port</title>
<path fill="none" stroke="black" d="M194.532,-197.216C188.94,-184.898 181.378,-168.24 175.356,-154.977"/>
<polygon fill="black" stroke="black" points="176.875,-154.088 173.214,-150.259 173.688,-155.535 176.875,-154.088"/>
</g>
<!-- vm&#45;&gt;floating_ip -->
<g id="edge25" class="edge"><title>vm-&gt;floating_ip</title>
<path fill="none" stroke="black" stroke-dasharray="5,2" d="M211.017,-197.351C222.245,-175.366 242.754,-136.235 262.448,-104 270.145,-91.4015 279.406,-77.7529 287.07,-66.8102"/>
<polygon fill="black" stroke="black" points="288.583,-67.7004 290.03,-62.6043 285.721,-65.6858 288.583,-67.7004"/>
<text text-anchor="middle" x="303.844" y="-148.8" font-family="Helvetica,sans-Serif" font-size="14.00">&lt;-- becomes</text>
<text text-anchor="middle" x="303.844" y="-134.8" font-family="Helvetica,sans-Serif" font-size="14.00">has_many</text>
<text text-anchor="middle" x="303.844" y="-120.8" font-family="Helvetica,sans-Serif" font-size="14.00">through</text>
<text text-anchor="middle" x="303.844" y="-106.8" font-family="Helvetica,sans-Serif" font-size="14.00">network_port</text>
</g>
<!-- security_group&#45;&gt;network_port -->
<g id="edge21" class="edge"><title>security_group-&gt;network_port</title>
<path fill="none" stroke="black" d="M172.259,-395.285C168.734,-385.554 165.131,-373.891 163.379,-363 151.245,-287.573 158.364,-196.427 162.737,-155.184"/>
<polygon fill="black" stroke="black" points="170.699,-396.11 174.085,-400.183 173.978,-394.887 170.699,-396.11"/>
<polygon fill="black" stroke="black" points="164.481,-155.331 163.281,-150.171 161.001,-154.953 164.481,-155.331"/>
</g>
<!-- firewall_rule -->
<g id="firewall_rule" class="node"><title>firewall_rule</title>
<path fill="#ffffff" stroke="black" stroke-width="2" d="M184.869,-326.5C184.869,-326.5 253.889,-326.5 253.889,-326.5 259.889,-326.5 265.889,-332.5 265.889,-338.5 265.889,-338.5 265.889,-350.5 265.889,-350.5 265.889,-356.5 259.889,-362.5 253.889,-362.5 253.889,-362.5 184.869,-362.5 184.869,-362.5 178.869,-362.5 172.869,-356.5 172.869,-350.5 172.869,-350.5 172.869,-338.5 172.869,-338.5 172.869,-332.5 178.869,-326.5 184.869,-326.5"/>
<text text-anchor="middle" x="219.379" y="-340.3" font-family="Helvetica,sans-Serif" font-size="14.00">FirewallRule</text>
</g>
<!-- security_group&#45;&gt;firewall_rule -->
<g id="edge20" class="edge"><title>security_group-&gt;firewall_rule</title>
<path fill="none" stroke="black" d="M190.384,-400.437C195.561,-390.628 202.122,-378.197 207.693,-367.642"/>
<polygon fill="black" stroke="black" points="209.388,-368.179 210.174,-362.941 206.293,-366.546 209.388,-368.179"/>
</g>
<!-- network -->
<g id="network" class="node"><title>network</title>
<path fill="#ffffff" stroke="black" stroke-width="2" d="M370.793,-22.5C370.793,-22.5 491.965,-22.5 491.965,-22.5 497.965,-22.5 503.965,-28.5 503.965,-34.5 503.965,-34.5 503.965,-54.5 503.965,-54.5 503.965,-60.5 497.965,-66.5 491.965,-66.5 491.965,-66.5 370.793,-66.5 370.793,-66.5 364.793,-66.5 358.793,-60.5 358.793,-54.5 358.793,-54.5 358.793,-34.5 358.793,-34.5 358.793,-28.5 364.793,-22.5 370.793,-22.5"/>
<text text-anchor="middle" x="431.379" y="-51.3" font-family="Helvetica,sans-Serif" font-size="14.00">Network</text>
<polyline fill="none" stroke="black" stroke-width="2" points="358.793,-44.5 503.965,-44.5 "/>
<text text-anchor="middle" x="431.379" y="-29.3" font-family="Helvetica,sans-Serif" font-size="14.00">NetworkInterfaceInfo</text>
</g>
<!-- network_group_mapping&#45;&gt;network_group -->
<g id="edge12" class="edge"><title>network_group_mapping-&gt;network_group</title>
<path fill="none" stroke="black" d="M366.079,-523.37C355.955,-523.433 345.83,-522.932 335.705,-521.868"/>
<polygon fill="black" stroke="black" points="335.901,-520.129 330.734,-521.3 335.503,-523.606 335.901,-520.129"/>
</g>
</g>
</svg>
</div>
<script>
var current_edge = {};
function markClass(id, className, enabled) {
if (id && className) {
d3.select("#"+id).classed(className, enabled);
}
}
function displayRelations(datum, nodeClass, enabled) {
if (!datum)
return;
// highlight current node (datum.id)
markClass(datum.id, nodeClass, enabled);
// highlight related nodes
for(var n in datum) {
if(n != "desc" && n != "id") {
markClass(datum[n], n, enabled);
}
}
// update node description
// since there are node and edge descriptions, have multiple #desc divs
var desc = enabled ? (datum.desc || "") : "";
d3.select("#desc ."+nodeClass).html(desc);
}
// store attributes in dot's tooltip attribute
// data associated with each node will split those up
function extractDatum(node, datum) {
var info = d3.select(node).select("a");
if (info && info[0] && info[0][0]) {
info = info.attr("xlink:title");
} else {
info = null;
}
if (info) {
var attrs = info.split("|");
// class:id:filename - class = (config|client|server|client_config|server_config)
for(var attr_num = 0; attr_num < attrs.length ; attr_num++) {
var attr = attrs[attr_num].trim();
attr_parts = attr.split(":");
if (attr_parts[1]) {
// TODO: handle duplicate attributes?
datum[attr_parts[0]] = attr_parts[1];
// TODO: add specific support for 3rd parameter (tablename/filename)
// if (attr_parts[2])
// attr["filename"] = attr_parts[2];
} else {
datum["desc"] = attr_parts[0];
}
}
}
return datum;
}
/* work around dot not supporting attribute `class="x"` */
function hackClass(node, datum) {
if (datum["class"]) {
d3.select(node).classed(datum["class"], true);
delete datum["class"];
}
return datum;
}
d3.selectAll(".node").datum(function() {
return hackClass(this, extractDatum(this, {"id" : this.id}));
})
.on('mouseover', function(datum) {
displayRelations(datum, 'active', true);
})
.on('mouseout', function(datum) {
displayRelations(datum, 'active', false);
});
d3.selectAll(".edge").datum(function(){
return extractDatum(this, {"id" : this.id});
})
/* selecting an edge is difficult
* instead of relying upon mouseover/mouseout, making mouseover sticky
*/
.on('mouseover', function(datum) {
if (datum.id != current_edge.id) {
displayRelations(current_edge, 'src-dest', false);
current_edge = datum;
displayRelations(datum, 'src-dest', true);
}
});
</script>
</body>
@Ladas
Copy link
Author

Ladas commented Feb 17, 2016

Rendered: http://bl.ocks.org/Ladas/441b8847ff5aab3be1e5

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment