1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
|
{% load i18n %}
<svg width="400" height="400" id="topology_canvas">
<defs>
<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>
<pattern id="device_small_bg" patternUnits="userSpaceOnUse" x="0" y="0" width="20" height="20">
<g>
<rect width="20" height="20" class="base_bg_small"></rect>
</g>
</pattern>
<pattern id="device_small_bg_loading" patternUnits="userSpaceOnUse" x="0" y="0" width="5" height="5">
<g>
<rect width="5" height="5" class="loading_bg_small"></rect>
<path d='M0 5L5 0ZM6 4L4 6ZM-1 1L1 -1Z' stroke-linecap="square" stroke='rgba(0, 0, 0, 0.4)' stroke-width="1.5"></path>
</g>
<animate attributeName="x" attributeType="XML" begin="0s" dur="0.5s" from="0" to="-5" repeatCount="indefinite"></animate>
</pattern>
</defs>
</svg>
<svg id="topology_template" display="none">
<g class="router_small device_body">
<g class="ports" pointer-events="none"></g>
<rect rx="3" ry="3" width="20" height="20" class="frame"></rect>
<g transform="translate(3.5,3)" class="icon">
<polygon points="12.51,4.23 12.51,0.49 8.77,0.49 9.68,1.4 6.92,4.16 8.84,6.08 11.6,3.32 "></polygon>
<polygon points="0.49,8.77 0.49,12.51 4.23,12.51 3.32,11.6 6.08,8.83 4.17,6.92 1.4,9.68 "></polygon>
<polygon points="1.85,5.59 5.59,5.59 5.59,1.85 4.68,2.76 1.92,0 0,1.92 2.76,4.68 "></polygon>
<polygon points="11.15,7.41 7.41,7.41 7.41,11.15 8.32,10.24 11.08,13 13,11.08 10.24,8.32 "></polygon>
</g>
</g>
<g class="instance_small device_body">
<g class="ports" pointer-events="none"></g>
<rect rx="3" ry="3" width="20" height="20" class="frame"></rect>
<g transform="translate(5,3)" class="icon">
<rect class="instance_bg" width="10" height="13"></rect>
<rect x="2" y="1" fill="#FFFFFF" width="6" height="2"></rect>
<rect x="2" y="4" fill="#FFFFFF" width="6" height="2"></rect>
<circle class="active" cx="3" cy="10" r="1.3"></circle>
</g>
</g>
<g class="network_container_small">
<rect rx="7" ry="7" width="15" height="200" style="fill: #8541B5;" class="network-rect"></rect>
<text x="250" y="-3" class="network-name" transform="rotate(90 0 0)" pointer-events="none">Network</text>
<text x="0" y="-20" class="network-cidr" transform="rotate(90 0 0)">0.0.0.0</text>
<text x="0" y="-20" class="network-type" transform="rotate(90 0 0)"
data-toggle="tooltip" data-placement="bottom" title="{% trans 'External Network' %}"></text>
</g>
<g class="router_normal device_body">
<g class="ports" pointer-events="none"></g>
<rect class="frame" x="0" y="0" rx="6" ry="6" width="90" height="50"></rect>
<g class="texts" pointer-events="none">
<rect class="texts_bg" x="1.5" y="32" width="87" height="17"></rect>
<text x="45" y="46" class="type">{% trans "Router" %}</text>
<text x="45" y="22" class="name">router</text>
</g>
<g class="icon" transform="translate(6,6)" pointer-events="none">
<circle class="icon_bg" cx="0" cy="0" r="12"></circle>
<g transform="translate(-6.5,-6.5)">
<polygon points="12.51,4.23 12.51,0.49 8.77,0.49 9.68,1.4 6.92,4.16 8.84,6.08 11.6,3.32 "></polygon>
<polygon points="0.49,8.77 0.49,12.51 4.23,12.51 3.32,11.6 6.08,8.83 4.17,6.92 1.4,9.68 "></polygon>
<polygon points="1.85,5.59 5.59,5.59 5.59,1.85 4.68,2.76 1.92,0 0,1.92 2.76,4.68 "></polygon>
<polygon points="11.15,7.41 7.41,7.41 7.41,11.15 8.32,10.24 11.08,13 13,11.08 10.24,8.32 "></polygon>
</g>
</g>
</g>
<g class="instance_normal device_body">
<g class="ports" pointer-events="none"></g>
<rect class="frame" x="0" y="0" rx="6" ry="6" width="90" height="50"></rect>
<g class="texts">
<rect class="texts_bg" x="1.5" y="32" width="87" height="17"></rect>
<text x="45" y="46" class="type">{% trans "Instance" %}</text>
<text x="45" y="22" class="name">instance</text>
</g>
<g class="icon" transform="translate(6,6)">
<circle class="icon_bg" cx="0" cy="0" r="12"></circle>
<g transform="translate(-5,-6.5)">
<rect class="instance_bg" width="10" height="13"></rect>
<rect x="2" y="1" fill="#FFFFFF" width="6" height="2"></rect>
<rect x="2" y="4" fill="#FFFFFF" width="6" height="2"></rect>
<circle class="active" cx="3" cy="10" r="1.3"></circle>
</g>
</g>
</g>
<g class="network_container_normal">
<rect rx="9" ry="9" width="17" height="500" style="fill: #8541B5;" class="network-rect"></rect>
<text x="250" y="-4" class="network-name" transform="rotate(90 0 0)" pointer-events="none">Network</text>
<text x="490" y="-20" class="network-cidr" transform="rotate(90 0 0)">0.0.0.0</text>
<text x="490" y="-20" class="network-type" transform="rotate(90 0 0)"
data-toggle="tooltip" data-placement="bottom" title="{% trans 'External Network' %}"></text>
</g>
</svg>
|
