262 lines
7.2 KiB
HTML
Executable File
262 lines
7.2 KiB
HTML
Executable File
{% load i18n %}
|
|
<style type="text/css">
|
|
svg#topology_canvas {
|
|
font-family: sans-serif;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
svg#topology_canvas .selected {
|
|
filter: url(#select-highlight);
|
|
}
|
|
svg#topology_canvas .network_alarmed {
|
|
fill: url(#diagonalHatch2);
|
|
}
|
|
svg#topology_canvas .network-rect {
|
|
cursor: pointer;
|
|
}
|
|
svg#topology_canvas .network-rect.nourl {
|
|
cursor: auto;
|
|
}
|
|
svg#topology_canvas .network-name {
|
|
font-size: 14px;
|
|
text-anchor: middle;
|
|
}
|
|
svg#topology_canvas .network-cidr {
|
|
font-size: 11px;
|
|
text-anchor: end;
|
|
}
|
|
svg#topology_canvas text.network-type {
|
|
font-family: FontAwesome;
|
|
text-anchor: end;
|
|
}
|
|
svg#topology_canvas .port_alarmed {
|
|
stroke-dasharray: 13,5;
|
|
}
|
|
svg#topology_canvas .port_text {
|
|
font-size: 9px;
|
|
fill: #666;
|
|
}
|
|
svg#topology_canvas .port_text.left {
|
|
text-anchor: end;
|
|
}
|
|
svg#topology_canvas .lldp_text {
|
|
font-size: 9px;
|
|
fill: #666;
|
|
}
|
|
svg#topology_canvas .lldp_text.right {
|
|
text-anchor: end;
|
|
}
|
|
svg#topology_canvas .base_bg_normal {
|
|
fill: #333;
|
|
}
|
|
svg#topology_canvas .loading_bg_normal {
|
|
fill: #555;
|
|
}
|
|
svg#topology_canvas .active {
|
|
fill: #45B035;
|
|
}
|
|
svg#topology_canvas .icon polygon {
|
|
fill: #333;
|
|
}
|
|
svg#topology_canvas .router_normal .frame,
|
|
svg#topology_canvas .host .frame {
|
|
fill: #f3f3f3;
|
|
stroke: #333;
|
|
stroke-width: 4;
|
|
cursor: pointer;
|
|
}
|
|
svg#topology_canvas .router_normal .icon_bg,
|
|
svg#topology_canvas .host .icon_bg {
|
|
fill: #fff;
|
|
stroke: #333;
|
|
stroke-width: 4;
|
|
}
|
|
svg#topology_canvas .host .unlocked {
|
|
visibility: hidden;
|
|
stroke-width: 0;
|
|
}
|
|
svg#topology_canvas .host .status {
|
|
fill: #222;
|
|
stroke-width: 0;
|
|
cursor: pointer;
|
|
}
|
|
svg#topology_canvas .host .status circle {
|
|
fill: #F3F3F3;
|
|
}
|
|
svg .alarm {
|
|
visibility: hidden;
|
|
stroke: #333;
|
|
stroke-width: 2;
|
|
cursor: pointer;
|
|
}
|
|
svg .level_4 {
|
|
visibility: visible;
|
|
fill: #CC0000;
|
|
stroke-width: 2;
|
|
}
|
|
svg .level_3 {
|
|
visibility: visible;
|
|
fill: #CC0000;
|
|
stroke-width: 2;
|
|
}
|
|
svg .level_2 {
|
|
visibility: visible;
|
|
fill: #FFCC33;
|
|
stroke-width: 2;
|
|
}
|
|
svg .level_1 {
|
|
visibility: visible;
|
|
fill: #336699;
|
|
stroke-width: 2;
|
|
}
|
|
svg#topology_canvas .host .texts_bg {
|
|
fill: #222;
|
|
cursor: pointer;
|
|
}
|
|
svg#topology_canvas .host .texts .name {
|
|
text-anchor: middle;
|
|
fill: #333;
|
|
font-size: 12px;
|
|
}
|
|
svg#topology_canvas .host .texts .type {
|
|
text-anchor: middle;
|
|
fill: #fff;
|
|
font-size: 12px;
|
|
}
|
|
svg#topology_canvas .host .instance_bg {
|
|
fill: #333;
|
|
}
|
|
svg#topology_canvas g.loading .active {
|
|
fill: #555;
|
|
}
|
|
svg#topology_canvas g.loading .icon polygon {
|
|
fill: #555;
|
|
}
|
|
svg#topology_canvas g.loading .instance_bg {
|
|
fill: #555;
|
|
}
|
|
svg#topology_canvas g.loading .host .frame {
|
|
stroke: #555;
|
|
}
|
|
svg#topology_canvas g.loading .host .name {
|
|
fill: #999;
|
|
}
|
|
svg#topology_canvas g.loading .host .texts_bg {
|
|
fill: #222;
|
|
}
|
|
svg#topology_canvas g.loading .host .icon_bg {
|
|
stroke: #555;
|
|
}
|
|
|
|
</style>
|
|
|
|
<div id="top_row">
|
|
<div id="lists_container">
|
|
<h4>Compute Hosts</h4>
|
|
<input id="host_list_search" class="form-control" type="text" placeholder="Search Compute Hosts" />
|
|
<div id="host_list" class="list-group">
|
|
</div>
|
|
<h4>Provider Networks</h4>
|
|
<input id="network_list_search" class="form-control" type="text" placeholder="Search Provider Networks" />
|
|
<div id="network_list" class="list-group">
|
|
</div>
|
|
</div>
|
|
|
|
<div id="canvas_container">
|
|
<svg id="topology_canvas">
|
|
<g id="zoom_container" transform="translate(50,25)scale(1)" >
|
|
<defs>
|
|
|
|
<pattern id="diagonalHatch2" patternUnits="userSpaceOnUse" width="4" height="4">
|
|
<path d="M-1,1 l2,-2
|
|
M0,4 l4,-4
|
|
M3,5 l2,-2" style="stroke:white; stroke-width:1" />
|
|
</pattern>
|
|
|
|
<pattern id="device_normal_bg" patternUnits="userSpaceOnUse" x="0" y="0" width="20" height="20">
|
|
<g>
|
|
<rect width="20" height="20" class="base_bg_normal"></rect>
|
|
</g>
|
|
</pattern>
|
|
<pattern id="device_normal_bg_loading" patternUnits="userSpaceOnUse" x="0" y="0" width="20" height="20">
|
|
<g>
|
|
<rect width="20" height="20" class="loading_bg_normal"></rect>
|
|
<path d='M0 20L20 0ZM22 18L18 22ZM-2 2L2 -2Z' stroke-linecap="square" stroke='rgba(0, 0, 0, 0.3)' stroke-width="7"></path>
|
|
</g>
|
|
<animate attributeName="x" attributeType="XML" begin="0s" dur="0.5s" from="0" to="-20" repeatCount="indefinite"></animate>
|
|
</pattern>
|
|
|
|
<filter x="0" y="0" width="1" height="1" id="text_bg">
|
|
<feFlood flood-color="white"/>
|
|
<feComposite in="SourceGraphic"/>
|
|
</filter>
|
|
|
|
<filter id="select-highlight" width="200%" height="200%" x="-50%" y="-50%" filterRes="1000">
|
|
<feOffset in="SourceGraphic" dx="0" dy="0" result="offset"></feOffset>
|
|
<feGaussianBlur stdDeviation="2" />
|
|
<feComponentTransfer result="offsetmorph">
|
|
<feFuncA type="table" tableValues="0 .05 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1"/>
|
|
</feComponentTransfer>
|
|
<feFlood flood-color="#51a1e7"></feFlood>
|
|
<feComposite operator="in" in2="offsetmorph" result="stroke"></feComposite>
|
|
<feGaussianBlur stdDeviation="4" result="offsetblur"></feGaussianBlur>
|
|
<feFlood flood-color="#51a1e7"></feFlood>
|
|
<feComposite operator="in" in2="offsetblur" result="blur"></feComposite>
|
|
<feMerge>
|
|
<feMergeNode in="blur"></feMergeNode>
|
|
<feMergeNode in="stroke"></feMergeNode>
|
|
<feMergeNode in="SourceGraphic"></feMergeNode>
|
|
</feMerge>
|
|
</filter>
|
|
|
|
</defs>
|
|
</g>
|
|
</svg>
|
|
<svg id="topology_template" display="none">
|
|
<g class="host_body">
|
|
<g class="connections"></g>
|
|
<rect class="frame" x="0" y="0" rx="5" ry="5" width="70" height="50"></rect>
|
|
<g class="texts">
|
|
<rect class="texts_bg" x="1.5" y="32" width="67" height="17"></rect>
|
|
<text x="35" y="22" class="name">instance</text>
|
|
</g>
|
|
<g class="alarm" transform="translate(20,0)">
|
|
<circle cx="0" cy="0" r="12"></circle>
|
|
<g transform="translate(-5,-6.5)">
|
|
<rect x="4" y="-2" fill="#000000" width="2" height="10"></rect>
|
|
<circle fill="#000000" cx="5" cy="14" r="1.3"></circle>
|
|
</g>
|
|
</g>
|
|
<g transform="translate(14,-13)">
|
|
<g class="status" transform="translate(0,0)">
|
|
<circle fill="#FFFFFF" stroke-width="5" cx="22" cy="4" r="10" stroke="#222" fill="#F3F3F3"></circle>
|
|
<rect height="22" width="33" y="5" x="5" stroke-width="0" fill="#222"></rect>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
<g class="network_container_normal">
|
|
<rect rx="9" ry="9" width="17" height="500" style="fill: #8541B5;" class="network-rect"></rect>
|
|
<rect rx="9" ry="9" width="17" height="500" pointer-events="none" style="fill: url(#diagonalHatch2);" class="network-rect-hash"></rect>
|
|
<text x="4" y="-5" class="network-name" transform="rotate(0 0 0)" pointer-events="none">Network</text>
|
|
<g class="alarm" transform="translate(8.5,13)">
|
|
<circle cx="0" cy="0" r="12"></circle>
|
|
<g transform="translate(-5,-6.5)">
|
|
<rect x="4" y="-2" fill="#000000" width="2" height="10"></rect>
|
|
<circle fill="#000000" cx="5" cy="14" r="1.3"></circle>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
|
|
<svg class="list_alarm">
|
|
<g class="alarm" transform="translate(13,13)">
|
|
<circle cx="0" cy="0" r="12"></circle>
|
|
<g transform="translate(-5,-6.5)">
|
|
<rect x="4" y="-2" fill="#000000" width="2" height="10"></rect>
|
|
<circle fill="#000000" cx="5" cy="14" r="1.3"></circle>
|
|
</g>
|
|
</g>
|
|
</svg>
|
|
</svg>
|
|
</div>
|
|
</div>
|