src/chrome/browser/resources/chromeos/network_ui/network_ui.js

   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
   3 // found in the LICENSE file.
   4
   5 var NetworkUI = (function() {
   6   'use strict';
   7
   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
  10   // specified then the first non empty value is used.
  11   var NETWORK_STATE_FIELDS = [
  12     'GUID',
  13     'service_path',
  14     'Name',
  15     'Type',
  16     'ConnectionState',
  17     'connectable',
  18     'ErrorState',
  19     'WiFi.Security',
  20     ['Cellular.NetworkTechnology',
  21      'EAP.EAP'],
  22     'Cellular.ActivationState',
  23     'Cellular.RoamingState',
  24     'Cellular.OutOfCredits',
  25     'WiFi.SignalStrength'
  26   ];
  27
  28   var FAVORITE_STATE_FIELDS = [
  29     'GUID',
  30     'service_path',
  31     'Name',
  32     'Type',
  33     'profile_path',
  34     'visible',
  35     'onc_source'
  36   ];
  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       logEntry['description']);
  93     res.appendChild(createLevelTag(level));
  94     res.appendChild(textWrapper);
  95     return res;
  96   };
  97
  98   /**
  99    * Create event log entries.
 100    *
 101    * @param {Array.<string>} logEntries A array of strings that each string
 102    *     represents a log event in JSON format.
 103    */
 104   var createEventLog = function(logEntries) {
 105     var container = $('network-log-container');
 106     container.textContent = '';
 107     for (var i = 0; i < logEntries.length; ++i) {
 108       var entry = createLogEntryText(JSON.parse(logEntries[i]));
 109       if (entry)
 110         container.appendChild(entry);
 111     }
 112   };
 113
 114   /**
 115    * Create a cell with a button for expanding a network state table row.
 116    *
 117    * @param {string} guid The GUID identifying the network.
 118    * @return {DOMElement} The created td element that displays the given value.
 119    */
 120   var createStateTableExpandButton = function(guid) {
 121     var cell = document.createElement('td');
 122     cell.className = 'state-table-expand-button-cell';
 123     var button = document.createElement('button');
 124     button.addEventListener('click', function(event) {
 125       toggleExpandRow(event.target, guid);
 126     });
 127     button.className = 'state-table-expand-button';
 128     button.textContent = '+';
 129     cell.appendChild(button);
 130     return cell;
 131   };
 132
 133   /**
 134    * Create a cell in network state table.
 135    *
 136    * @param {string} value Content in the cell.
 137    * @return {DOMElement} The created td element that displays the given value.
 138    */
 139   var createStateTableCell = function(value) {
 140     var cell = document.createElement('td');
 141     cell.textContent = value || '';
 142     return cell;
 143   };
 144
 145   /**
 146    * Create a row in the network state table.
 147    *
 148    * @param {Array} stateFields The state fields to use for the row.
 149    * @param {Object} state Property values for the network or favorite.
 150    * @return {DOMElement} The created tr element that contains the network
 151    *     state information.
 152    */
 153   var createStateTableRow = function(stateFields, state) {
 154     var row = document.createElement('tr');
 155     row.className = 'state-table-row';
 156     var guid = state.GUID;
 157     row.appendChild(createStateTableExpandButton(guid));
 158     for (var i = 0; i < stateFields.length; ++i) {
 159       var field = stateFields[i];
 160       var value = '';
 161       if (typeof field == 'string') {
 162         value = networkConfig.getValueFromProperties(state, field);
 163       } else {
 164         for (var j = 0; j < field.length; ++j) {
 165           value = networkConfig.getValueFromProperties(state, field[j]);
 166           if (value)
 167             break;
 168         }
 169       }
 170       if (field == 'GUID')
 171         value = value.slice(0, 8);
 172       row.appendChild(createStateTableCell(value));
 173     }
 174     return row;
 175   };
 176
 177   /**
 178    * Create table for networks or favorites.
 179    *
 180    * @param {string} tablename The name of the table to be created.
 181    * @param {Array} stateFields The list of fields for the table.
 182    * @param {Array} states An array of network or favorite states.
 183    */
 184   var createStateTable = function(tablename, stateFields, states) {
 185     var table = $(tablename);
 186     var oldRows = table.querySelectorAll('.state-table-row');
 187     for (var i = 0; i < oldRows.length; ++i)
 188       table.removeChild(oldRows[i]);
 189     states.forEach(function(state) {
 190       table.appendChild(createStateTableRow(stateFields, state));
 191     });
 192   };
 193
 194   /**
 195    * This callback function is triggered when the network log is received.
 196    *
 197    * @param {Object} data A JSON structure of event log entries.
 198    */
 199   var getNetworkLogCallback = function(data) {
 200     createEventLog(JSON.parse(data));
 201   };
 202
 203   /**
 204    * This callback function is triggered when visible networks are received.
 205    *
 206    * @param {Array} data A list of network state information for each
 207    *     visible network.
 208    */
 209   var onVisibleNetworksReceived = function(states) {
 210     createStateTable('network-state-table', NETWORK_STATE_FIELDS, states);
 211   };
 212
 213   /**
 214    * This callback function is triggered when favorite networks are received.
 215    *
 216    * @param {Object} data A list of network state information for each
 217    *     favorite network.
 218    */
 219   var onFavoriteNetworksReceived = function(states) {
 220     createStateTable('favorite-state-table', FAVORITE_STATE_FIELDS, states);
 221   };
 222
 223   /**
 224    * Toggle the button state and add or remove a row displaying the complete
 225    * state information for a row.
 226    *
 227    * @param {DOMElement} btn The button that was clicked.
 228    * @param {string} guid GUID identifying the network.
 229    */
 230   var toggleExpandRow = function(btn, guid) {
 231     var cell = btn.parentNode;
 232     var row = cell.parentNode;
 233     if (btn.textContent == '-') {
 234       btn.textContent = '+';
 235       row.parentNode.removeChild(row.nextSibling);
 236     } else {
 237       btn.textContent = '-';
 238       var expandedRow = createExpandedRow(guid, row);
 239       row.parentNode.insertBefore(expandedRow, row.nextSibling);
 240     }
 241   };
 242
 243   /**
 244    * Creates the expanded row for displaying the complete state as JSON.
 245    *
 246    * @param {Object} state Property values for the network or favorite.
 247    * @param {DOMElement} baseRow The unexpanded row associated with the new row.
 248    * @return {DOMElement} The created tr element for the expanded row.
 249    */
 250   var createExpandedRow = function(guid, baseRow) {
 251     var expandedRow = document.createElement('tr');
 252     expandedRow.className = 'state-table-row';
 253     var emptyCell = document.createElement('td');
 254     emptyCell.style.border = 'none';
 255     expandedRow.appendChild(emptyCell);
 256     var detailCell = document.createElement('td');
 257     detailCell.className = 'state-table-expanded-cell';
 258     detailCell.colSpan = baseRow.childNodes.length - 1;
 259     expandedRow.appendChild(detailCell);
 260     var showDetail = function(state) {
 261       if (networkConfig.lastError)
 262         detailCell.textContent = networkConfig.lastError;
 263       else
 264         detailCell.textContent = JSON.stringify(state, null, '\t');
 265     };
 266     var selected = $('get-network-type').selectedIndex;
 267     var selectedId = $('get-network-type').options[selected].id;
 268     if (selectedId == 'shill')
 269       networkConfig.getShillProperties(guid, showDetail);
 270     else if (selectedId == 'managed')
 271       networkConfig.getManagedProperties(guid, showDetail);
 272     else
 273       networkConfig.getProperties(guid, showDetail);
 274     return expandedRow;
 275   };
 276
 277   /**
 278    * Requests a network log update.
 279    */
 280   var requestLog = function() {
 281     chrome.send('NetworkUI.getNetworkLog');
 282   };
 283
 284   /**
 285    * Requests an update of all network info.
 286    */
 287   var requestNetworks = function() {
 288     networkConfig.getNetworks(
 289         { 'type': 'All', 'visible': true },
 290         onVisibleNetworksReceived);
 291     networkConfig.getNetworks(
 292         { 'type': 'All', 'configured': true },
 293         onFavoriteNetworksReceived);
 294   };
 295
 296   /**
 297    * Sets refresh rate if the interval is found in the url.
 298    */
 299   var setRefresh = function() {
 300     var interval = parseQueryParams(window.location)['refresh'];
 301     if (interval && interval != '')
 302       setInterval(requestNetworks, parseInt(interval) * 1000);
 303   };
 304
 305   /**
 306    * Get network information from WebUI.
 307    */
 308   document.addEventListener('DOMContentLoaded', function() {
 309     $('log-refresh').onclick = requestLog;
 310     $('log-error').checked = true;
 311     $('log-error').onclick = requestLog;
 312     $('log-user').checked = true;
 313     $('log-user').onclick = requestLog;
 314     $('log-event').checked = true;
 315     $('log-event').onclick = requestLog;
 316     $('log-debug').checked = false;
 317     $('log-debug').onclick = requestLog;
 318     $('log-fileinfo').checked = false;
 319     $('log-fileinfo').onclick = requestLog;
 320     $('log-timedetail').checked = false;
 321     $('log-timedetail').onclick = requestLog;
 322     setRefresh();
 323     requestLog();
 324     requestNetworks();
 325   });
 326
 327   return {
 328     getNetworkLogCallback: getNetworkLogCallback
 329   };
 330 })();