-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathtopology.html
140 lines (130 loc) · 7.13 KB
/
topology.html
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
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
{% load i18n %}
<style>
#topology_span{
margin: 5px 0 0 5px;
height: 20px;
line-height: 20px;
width: 110px;
display: none;
color:#ccc;
}
#topology_menu,#host_menu{
display:none;
position: absolute;
top: 35px;
left: 21px;
width: auto;
}
#topology_search{
border: 0;
padding-left: 5px;
width: 100%;
}
</style>
<div class="page-header">
</div>
<div ng-controller="adminPhyTopologyContrllor" ng-cloak >
<div class="title-topWraper" id="topWraper" style="position: relative; width: 96.5%; background: #EFEFEF;" >
<div class="title-top clearfix" style="padding-bottom: 10px;border-bottom: 0;">
<ul class="clearfix" style="border-bottom: 1px solid #BCBCBC;">
<!--<li class="first" style=" margin-bottom: 10px;"><img src="{{ STATIC_URL }}dashboard/img/img_topology/switch1.png"/><span class="title">{% trans "Level 1 Switch" %}</span></li>
<li class="first"><img src="{{ STATIC_URL }}dashboard/img/img_topology/switch2.png"/><span class="title">{% trans "Level 2 Switch" %}</span></li>
<li class="first"><img style="width:50px;height:20px;margin-top:10px;" src="{{ STATIC_URL }}dashboard/img/img_topology/iserver.png"/><span class="title">{% trans "server" %}</span></li>
-->
<li class="first" style=" margin-bottom: 10px; margin-right: 10px; width: 52px; height: 42px; background: #0058B0; border:1px solid #999; border-radius:4px; box-shadow:inset 0 2px 2px rgba(0,0,0,0.05); display:inline-block;" ></li><li><span> {% trans "Level 1 Switch" %}</span></li>
<li class="first" style=" margin-bottom: 10px; margin-right: 10px; width: 52px; height: 42px; background: #1E7CC8; border:1px solid #999; border-radius:4px; box-shadow:inset 0 2px 2px rgba(0,0,0,0.05); display:inline-block;"</li><li><span >{% trans "Level 2 Switch" %}</span></li>
<li class="first"><img style="width:50px;height:20px;margin-top:10px; margin-right: 0;" src="{{ STATIC_URL }}dashboard/img/img_topology/iserver.png"/><span class="title">   {% trans "server" %}</span></li>
<!--<li><span class="prompt lines" style="background:#5E5E5E;"></span><span>无法获取流量</span></li>-->
<!--<li><span class="prompt lines" style="background: #2E8B57;"></span><span>空闲流量</span></li>-->
<!--<li><span class="prompt lines" style="background:#7CFC00 ;"></span><span>正常流量</span></li>-->
<!--<li style=" margin-bottom: 10px;"><span class="prompt lines" style="background:red ;"></span><span>过载流量</span></li>-->
<div class="fr search-bar" style="position: relative">
<div class="ng-scope hz-magic-search-bar" style="width: 300px">
<div class="form-group has-feedback magic-search-bar" style="line-height: 30px;background-color: #ffffff">
<div class="input-group">
<span class="input-group-addon">
<span class="fa fa-search"></span>
</span>
<span id="topology_span"></span>
<input id="topology_search" type="text" placeholder="点击选择过滤条件"/>
<a class="magic-search-clear" style="padding-right: 8px" ng-click="clearTopologySearch()" title="取消">
<span class="fi-x fa fa-times cancel"></span>
</a>
<!-- ngIf: filterStrings && filterFacets -->
<!-- ngIf: showSettings -->
</div>
</div>
</div>
<ul id="topology_menu" class="facet-drop f-dropdown dropdown-menu ng-scope" >
<li><a id="1">主机名称</a></li>
<li><a id="2">虚拟机列表</a></li>
</ul>
<ul id="host_menu" class="facet-drop f-dropdown dropdown-menu ng-scope">
<li ng-repeat="item in menuList" ng-click="selectHost(item)"><a>{$ item.name $}</a></li>
</ul>
</div>
</ul>
</div>
</div>
<div id="topologyCanvas" style="
position:absolute;
left:10px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
width: 95%;
height: 300px;
overflow:auto;
background: #efefef;" >
<canvas id="canvas_proton_topo" ></canvas>
<div id="bl">
<div id="bl_1" class="topologyBalloon" >
<a href="#close" class="closeTopologyBalloon" ng-click="hide()">×</a>
<div class="contentBody">
<table id="tb"class="detailInfoTable">
</table>
<div class="portTableHeader">
<div class="title"></div>
<table class="detailInfoTable"id="table">
<caption id="m_title" style="width: 140px">manage the switch</caption>
<tbody id="tBody" style="display:none"> </tbody>
<tbody style="display: block;width:100%;">
<tr style="width: 100%;
display: block;
display: flex;
flex-flow: nowrap row;
justify-content: space-around;">
<td>
<button id="login" onclick="location.href=''" class="login" style="background-color:#5CACEE;border-color:#63B8FF;width:80px;color:#FFFFFF;margin-top:10px;margin-right:10px;-moz-border-radius: 5px; height:35px; /* Gecko browsers */
-webkit-border-radius: 5px;
border-radius:5px; font-size:10pt ">login</button>
</td>
<td>
<button id="shut"onclick="location.href=''" class="shut off"style="background-color:#5CACEE;border-color:#63B8FF;width:90px;color:#FFFFFF;margin-top:10px;margin-right:10px;-moz-border-radius: 5px; height:35px; /* Gecko browsers */
-webkit-border-radius: 5px;
border-radius:5px; font-size:10pt ">shut off</button>
</td>
<td>
<button id="restart"onclick="location.href=''"class="restart"style="background-color:#5CACEE;border-color:#63B8FF;color:#FFFFFF;width:80px;margin-top:10px;margin-right:10px;-moz-border-radius: 5px; height:35px; /* Gecko browsers */
-webkit-border-radius: 5px;
border-radius:5px; font-size:10pt ">Reboot</button>
</td>
</tr>
</tbody>
</table>
</div>
<div class="footer"id="foot">
<div class="footerInner">
<div class="cell link">
<a href=""id="link">» view switch detail</a> </div>
</div>
</div>
</div>
</div>
</div>
<div class="nodata"style="font-size: 150%;
text-align: center;
padding-top: 150px;
display: none; ">{% blocktrans %}There are no networks, routers, or connected instances to display.{% endblocktrans %}</div>
</div>
</div>