OLD | NEW |
1 // Copyright 2013 The Chromium Authors. All rights reserved. | 1 // Copyright 2013 The Chromium Authors. All rights reserved. |
2 // Use of this source code is governed by a BSD-style license that can be | 2 // Use of this source code is governed by a BSD-style license that can be |
3 // found in the LICENSE file. | 3 // found in the LICENSE file. |
4 | 4 |
5 var NetworkUI = (function() { | 5 var NetworkUI = (function() { |
6 'use strict'; | 6 'use strict'; |
7 | 7 |
8 // Properties to display in the network state table. Each entry can be either | 8 // Properties to display in the network state table. Each entry can be either |
9 // a single state field or an array of state fields. If more than one is | 9 // a single state field or an array of state fields. If more than one is |
10 // specified then the first non empty value is used. | 10 // specified then the first non empty value is used. |
(...skipping 17 matching lines...) Expand all Loading... |
28 var FAVORITE_STATE_FIELDS = [ | 28 var FAVORITE_STATE_FIELDS = [ |
29 'GUID', | 29 'GUID', |
30 'service_path', | 30 'service_path', |
31 'Name', | 31 'Name', |
32 'Type', | 32 'Type', |
33 'profile_path', | 33 'profile_path', |
34 'visible', | 34 'visible', |
35 'onc_source' | 35 'onc_source' |
36 ]; | 36 ]; |
37 | 37 |
38 var LOG_LEVEL_CLASSNAME = { | |
39 'Error': 'network-log-level-error', | |
40 'User': 'network-log-level-user', | |
41 'Event': 'network-log-level-event', | |
42 'Debug': 'network-log-level-debug' | |
43 }; | |
44 | |
45 var LOG_LEVEL_CHECKBOX = { | |
46 'Error': 'log-error', | |
47 'User': 'log-user', | |
48 'Event': 'log-event', | |
49 'Debug': 'log-debug' | |
50 }; | |
51 | |
52 /** | |
53 * Create a tag of log level. | |
54 * | |
55 * @param {string} level A string that represents log level. | |
56 * @return {DOMElement} The created span element. | |
57 */ | |
58 var createLevelTag = function(level) { | |
59 var tag = document.createElement('span'); | |
60 tag.className = 'network-level-tag'; | |
61 tag.textContent = level; | |
62 tag.classList.add(LOG_LEVEL_CLASSNAME[level]); | |
63 return tag; | |
64 }; | |
65 | |
66 /** | |
67 * Creates an element that contains the time, the event, the level and | |
68 * the description of the given log entry. | |
69 * | |
70 * @param {Object} logEntry An object that represents a single line of log. | |
71 * @return {DOMElement} The created p element that represents the log entry. | |
72 */ | |
73 var createLogEntryText = function(logEntry) { | |
74 var level = logEntry['level']; | |
75 if (!$(LOG_LEVEL_CHECKBOX[level]).checked) | |
76 return null; | |
77 var res = document.createElement('p'); | |
78 var textWrapper = document.createElement('span'); | |
79 var fileinfo = ''; | |
80 if ($('log-fileinfo').checked) | |
81 fileinfo = logEntry['file']; | |
82 var timestamp = ''; | |
83 if ($('log-timedetail').checked) | |
84 timestamp = logEntry['timestamp']; | |
85 else | |
86 timestamp = logEntry['timestampshort']; | |
87 textWrapper.textContent = loadTimeData.getStringF( | |
88 'logEntryFormat', | |
89 timestamp, | |
90 fileinfo, | |
91 logEntry['event']); | |
92 res.appendChild(createLevelTag(level)); | |
93 res.appendChild(textWrapper); | |
94 return res; | |
95 }; | |
96 | |
97 /** | |
98 * Create event log entries. | |
99 * | |
100 * @param {Array.<string>} logEntries A array of strings that each string | |
101 * represents a log event in JSON format. | |
102 */ | |
103 var createEventLog = function(logEntries) { | |
104 var container = $('network-log-container'); | |
105 container.textContent = ''; | |
106 for (var i = 0; i < logEntries.length; ++i) { | |
107 var entry = createLogEntryText(JSON.parse(logEntries[i])); | |
108 if (entry) | |
109 container.appendChild(entry); | |
110 } | |
111 }; | |
112 | |
113 /** | 38 /** |
114 * Create a cell with a button for expanding a network state table row. | 39 * Create a cell with a button for expanding a network state table row. |
115 * | 40 * |
116 * @param {string} guid The GUID identifying the network. | 41 * @param {string} guid The GUID identifying the network. |
117 * @return {DOMElement} The created td element that displays the given value. | 42 * @return {DOMElement} The created td element that displays the given value. |
118 */ | 43 */ |
119 var createStateTableExpandButton = function(guid) { | 44 var createStateTableExpandButton = function(guid) { |
120 var cell = document.createElement('td'); | 45 var cell = document.createElement('td'); |
121 cell.className = 'state-table-expand-button-cell'; | 46 cell.className = 'state-table-expand-button-cell'; |
122 var button = document.createElement('button'); | 47 var button = document.createElement('button'); |
(...skipping 61 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
184 var table = $(tablename); | 109 var table = $(tablename); |
185 var oldRows = table.querySelectorAll('.state-table-row'); | 110 var oldRows = table.querySelectorAll('.state-table-row'); |
186 for (var i = 0; i < oldRows.length; ++i) | 111 for (var i = 0; i < oldRows.length; ++i) |
187 table.removeChild(oldRows[i]); | 112 table.removeChild(oldRows[i]); |
188 states.forEach(function(state) { | 113 states.forEach(function(state) { |
189 table.appendChild(createStateTableRow(stateFields, state)); | 114 table.appendChild(createStateTableRow(stateFields, state)); |
190 }); | 115 }); |
191 }; | 116 }; |
192 | 117 |
193 /** | 118 /** |
194 * This callback function is triggered when the network log is received. | |
195 * | |
196 * @param {Object} data A JSON structure of event log entries. | |
197 */ | |
198 var getNetworkLogCallback = function(data) { | |
199 createEventLog(JSON.parse(data)); | |
200 }; | |
201 | |
202 /** | |
203 * This callback function is triggered when visible networks are received. | 119 * This callback function is triggered when visible networks are received. |
204 * | 120 * |
205 * @param {Array} data A list of network state information for each | 121 * @param {Array} data A list of network state information for each |
206 * visible network. | 122 * visible network. |
207 */ | 123 */ |
208 var onVisibleNetworksReceived = function(states) { | 124 var onVisibleNetworksReceived = function(states) { |
209 createStateTable('network-state-table', NETWORK_STATE_FIELDS, states); | 125 createStateTable('network-state-table', NETWORK_STATE_FIELDS, states); |
210 }; | 126 }; |
211 | 127 |
212 /** | 128 /** |
(...skipping 42 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
255 var detailCell = document.createElement('td'); | 171 var detailCell = document.createElement('td'); |
256 detailCell.className = 'state-table-expanded-cell'; | 172 detailCell.className = 'state-table-expanded-cell'; |
257 detailCell.colSpan = baseRow.childNodes.length - 1; | 173 detailCell.colSpan = baseRow.childNodes.length - 1; |
258 expandedRow.appendChild(detailCell); | 174 expandedRow.appendChild(detailCell); |
259 var showDetail = function(state) { | 175 var showDetail = function(state) { |
260 if (networkConfig.lastError) | 176 if (networkConfig.lastError) |
261 detailCell.textContent = networkConfig.lastError; | 177 detailCell.textContent = networkConfig.lastError; |
262 else | 178 else |
263 detailCell.textContent = JSON.stringify(state, null, '\t'); | 179 detailCell.textContent = JSON.stringify(state, null, '\t'); |
264 }; | 180 }; |
265 var selected = $('get-network-type').selectedIndex; | 181 var selected = $('get-property-format').selectedIndex; |
266 var selectedId = $('get-network-type').options[selected].id; | 182 var selectedId = $('get-property-format').options[selected].value; |
267 if (selectedId == 'shill') | 183 if (selectedId == 'shill') |
268 networkConfig.getShillProperties(guid, showDetail); | 184 networkConfig.getShillProperties(guid, showDetail); |
269 else if (selectedId == 'managed') | 185 else if (selectedId == 'managed') |
270 networkConfig.getManagedProperties(guid, showDetail); | 186 networkConfig.getManagedProperties(guid, showDetail); |
271 else | 187 else |
272 networkConfig.getProperties(guid, showDetail); | 188 networkConfig.getProperties(guid, showDetail); |
273 return expandedRow; | 189 return expandedRow; |
274 }; | 190 }; |
275 | 191 |
276 /** | 192 /** |
277 * Requests a network log update. | |
278 */ | |
279 var requestLog = function() { | |
280 chrome.send('NetworkUI.getNetworkLog'); | |
281 }; | |
282 | |
283 /** | |
284 * Requests an update of all network info. | 193 * Requests an update of all network info. |
285 */ | 194 */ |
286 var requestNetworks = function() { | 195 var requestNetworks = function() { |
287 networkConfig.getNetworks( | 196 networkConfig.getNetworks( |
288 { 'type': 'All', 'visible': true }, | 197 { 'type': 'All', 'visible': true }, |
289 onVisibleNetworksReceived); | 198 onVisibleNetworksReceived); |
290 networkConfig.getNetworks( | 199 networkConfig.getNetworks( |
291 { 'type': 'All', 'configured': true }, | 200 { 'type': 'All', 'configured': true }, |
292 onFavoriteNetworksReceived); | 201 onFavoriteNetworksReceived); |
293 }; | 202 }; |
294 | 203 |
295 /** | 204 /** |
296 * Sets refresh rate if the interval is found in the url. | 205 * Sets refresh rate if the interval is found in the url. |
297 */ | 206 */ |
298 var setRefresh = function() { | 207 var setRefresh = function() { |
299 var interval = parseQueryParams(window.location)['refresh']; | 208 var interval = parseQueryParams(window.location)['refresh']; |
300 if (interval && interval != '') | 209 if (interval && interval != '') |
301 setInterval(requestNetworks, parseInt(interval) * 1000); | 210 setInterval(requestNetworks, parseInt(interval) * 1000); |
302 }; | 211 }; |
303 | 212 |
304 /** | 213 /** |
305 * Get network information from WebUI. | 214 * Get network information from WebUI. |
306 */ | 215 */ |
307 document.addEventListener('DOMContentLoaded', function() { | 216 document.addEventListener('DOMContentLoaded', function() { |
308 $('log-refresh').onclick = requestLog; | 217 $('refresh').onclick = requestNetworks; |
309 $('log-error').checked = true; | |
310 $('log-error').onclick = requestLog; | |
311 $('log-user').checked = true; | |
312 $('log-user').onclick = requestLog; | |
313 $('log-event').checked = true; | |
314 $('log-event').onclick = requestLog; | |
315 $('log-debug').checked = false; | |
316 $('log-debug').onclick = requestLog; | |
317 $('log-fileinfo').checked = false; | |
318 $('log-fileinfo').onclick = requestLog; | |
319 $('log-timedetail').checked = false; | |
320 $('log-timedetail').onclick = requestLog; | |
321 setRefresh(); | 218 setRefresh(); |
322 requestLog(); | |
323 requestNetworks(); | 219 requestNetworks(); |
324 }); | 220 }); |
325 | 221 |
326 return { | 222 return {}; |
327 getNetworkLogCallback: getNetworkLogCallback | |
328 }; | |
329 })(); | 223 })(); |
OLD | NEW |