luci-app-mwan3: refactoring detail status view and controller
[project/luci.git] / applications / luci-app-mwan3 / luasrc / view / mwan / status_interface.htm
1 <%+header%>
2
3 <ul class="cbi-tabmenu">
4         <li class="cbi-tab"><a href="<%=luci.dispatcher.build_url("admin/status/mwan/overview")%>"><%:Interface Status%></a></li>
5         <li class="cbi-tab-disabled"><a href="<%=luci.dispatcher.build_url("admin/status/mwan/detail")%>"><%:Detailed Status%></a></li>
6         <li class="cbi-tab-disabled"><a href="<%=luci.dispatcher.build_url("admin/status/mwan/diagnostics")%>"><%:Diagnostics%></a></li>
7         <li class="cbi-tab-disabled"><a href="<%=luci.dispatcher.build_url("admin/status/mwan/troubleshooting")%>"><%:Troubleshooting%></a></li>
8 </ul>
9
10 <script type="text/javascript" src="<%=resource%>/cbi.js"></script>
11 <script type="text/javascript">//<![CDATA[
12         XHR.poll(5, '<%=luci.dispatcher.build_url("admin", "status", "mwan", "interface_status")%>', null,
13                 function(x, status)
14                 {
15                         var statusDiv = document.getElementById('mwan_status_text');
16                         if (status.interfaces)
17                         {
18                                 var statusview = '';
19                                 for ( var iface in status.interfaces)
20                                 {
21                                         var state = '';
22                                         var css = '';
23                                         switch (status.interfaces[iface].status)
24                                         {
25                                                 case 'online':
26                                                         state = '<%:Online (tracking active)%>';
27                                                         css = 'wanon';
28                                                         break;
29                                                 case 'notMonitored':
30                                                         state = '<%:Online (tracking off)%>';
31                                                         css = 'wanon';
32                                                         break;
33                                                 case 'offline':
34                                                         state = '<%:Offline%>';
35                                                         css = 'wanoff';
36                                                         break;
37                                                 default:
38                                                         state = '<%:Disabled%>';
39                                                         css = 'wanoff';
40                                                         break;
41                                         }
42                                         statusview += String.format(
43                                                 '<span class="%s"><strong>%s</strong><br />%s</span>',
44                                                 css,
45                                                 iface,
46                                                 state
47                                         );
48                                 }
49                                 statusDiv.innerHTML = statusview;
50                         }
51                         else
52                         {
53                                 statusDiv.innerHTML = '<strong><%:No MWAN interfaces found%></strong>';
54                         }
55                 }
56         );
57 //]]></script>
58
59 <div id="mwan_interface_status">
60         <fieldset id="interface_field" class="cbi-section">
61                 <legend><%:MWAN Interface Live Status%></legend>
62                 <div id="mwan_status_text"><img src="<%=resource%>/icons/loading.gif" alt="<%:Loading%>" style="vertical-align:middle" /><%:Collecting data...%></div>
63         </fieldset>
64 </div>
65
66 <style type="text/css">
67   #mwan_status_text {
68         display: table;
69         font-size: 14px;
70         margin: auto;
71         max-width: 1044px;
72         min-width: 246px;
73         width: 100%;
74   }
75   .wanon {
76         background-color: rgb(144, 240, 144);
77   }
78   .wanoff {
79         background-color: rgb(240, 144, 144);
80   }
81   .wanon, .wanoff {
82         border-radius: 60px;
83         box-shadow: 0px 2px 5px -3px;
84         float: left;
85         margin: 8px 3px 0px 3px;
86         min-height: 30px;
87         min-width: 235px;
88         padding: 5px 10px 8px 10px;
89         text-align: center;
90   }
91   #mwan_statuslog_text {
92         padding: 20px;
93         text-align: left;
94   }
95 </style>
96
97 <%+footer%>