| 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 54 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 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 |