Diagnostics: Wire CPU usage to CPU card

Bug: 1125150
Test: browser_tests --gtest_filter=DiagnosticsApp*
Change-Id: Id975e82ce1fd43dfb7bf3ce9debffe9efd848581
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2420535
Commit-Queue: Zentaro Kavanagh <zentaro@chromium.org>
Reviewed-by: Bailey Berro <baileyberro@chromium.org>
Cr-Commit-Position: refs/heads/master@{#809621}

chrome/test/data/webui/chromeos/diagnostics/diagnostics_test.js

@@ -171,9 +171,16 @@ suite('CpuCardTest', () => {
     provider = null;
   });
 
-  function initializeCpuCard() {
+  /**
+   * @param {!CpuUsage} cpuUsage
+   * @return {!Promise}
+   */
+  function initializeCpuCard(cpuUsage) {
     assertFalse(!!cpuElement);
 
+    // Initialize the fake data.
+    provider.setFakeCpuUsage(cpuUsage);
+
     // Add the CPU card to the DOM.
     cpuElement = document.createElement('cpu-card');
     assertTrue(!!cpuElement);
@@ -183,9 +190,19 @@ suite('CpuCardTest', () => {
   }
 
   test('CpuCardPopulated', () => {
-    return initializeCpuCard().then(() => {
+    return initializeCpuCard(fakeCpuUsage).then(() => {
       // TODO(zentaro): Update when strings are finalized.
       assertEquals('CPU', cpuElement.$$('#cardTitle').textContent);
+
+      assertEquals(
+          fakeCpuUsage[0].cpu_temp_degrees_celcius.toString(),
+          cpuElement.$$('#cpuTemp').textContent);
+      assertEquals(
+          fakeCpuUsage[0].percent_usage_user.toString(),
+          cpuElement.$$('#cpuUsageUser').textContent);
+      assertEquals(
+          fakeCpuUsage[0].percent_usage_system.toString(),
+          cpuElement.$$('#cpuUsageSystem').textContent);
     });
   });
 });

chromeos/components/diagnostics_ui/resources/cpu_card.html

@@ -7,5 +7,8 @@
     <div id="cardTitle">CPU</div>
   </div>
   <div slot="body">
+    <div id="cpuTemp">[[cpuUsage_.cpu_temp_degrees_celcius]]</div>
+    <div id="cpuUsageUser">[[cpuUsage_.percent_usage_user]]</div>
+    <div id="cpuUsageSystem">[[cpuUsage_.percent_usage_system]]</div>
   </div>
 </diagnostics-card>

chromeos/components/diagnostics_ui/resources/cpu_card.js

@@ -6,7 +6,7 @@ import './diagnostics_card.js';
 import './diagnostics_shared_css.js';
 
 import {html, Polymer} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
-import {SystemDataProviderInterface} from './diagnostics_types.js'
+import {CpuUsage, SystemDataProviderInterface} from './diagnostics_types.js'
 import {getSystemDataProvider} from './mojo_interface_provider.js';
 
 /**
@@ -23,9 +23,30 @@ Polymer({
    */
   systemDataProvider_: null,
 
+  properties: {
+    /** @private {!CpuUsage} */
+    cpuUsage_: {
+      type: Object,
+    },
+  },
+
   /** @override */
   created() {
     this.systemDataProvider_ = getSystemDataProvider();
+    this.observeCpuUsage_();
+  },
+
+  /** @private */
+  observeCpuUsage_() {
+    this.systemDataProvider_.observeCpuUsage(this);
+  },
+
+  /**
+   * Implements CpuUsageObserver.onCpuUsageUpdated.
+   * @param {!CpuUsage} cpuUsage
+   */
+  onCpuUsageUpdated(cpuUsage) {
+    this.cpuUsage_ = cpuUsage;
   },
 
 });

chromeos/components/diagnostics_ui/resources/mojo_interface_provider.js

@@ -4,7 +4,7 @@
 
 import {assert} from 'chrome://resources/js/assert.m.js';
 import {SystemDataProviderInterface, SystemInfo} from './diagnostics_types.js'
-import {fakeBatteryInfo, fakeSystemInfo} from './fake_data.js'
+import {fakeBatteryInfo, fakeCpuUsage, fakeSystemInfo} from './fake_data.js'
 import {FakeSystemDataProvider} from './fake_system_data_provider.js'
 
 /**
@@ -23,6 +23,7 @@ function setupFakeSystemDataProvider_() {
 
   // Setup fake method data.
   provider.setFakeBatteryInfo(fakeBatteryInfo);
+  provider.setFakeCpuUsage(fakeCpuUsage);
   provider.setFakeSystemInfo(fakeSystemInfo);
 
   // Set the fake provider.