Diagnostics: Wire realtime cpu chart into cpu card

https://screenshot.googleplex.com/7fXF2GjLWEPcAbs

Bug: 1125150
Test: browser_tests --gtest_filter=DiagnosticsApp*
Change-Id: I77af9ea199c2363636471d3b2b8b1ef739fdc1ef
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2441531
Commit-Queue: Joon Ahn <joonbug@chromium.org>
Reviewed-by: Zentaro Kavanagh <zentaro@chromium.org>
Cr-Commit-Position: refs/heads/master@{#813981}

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

@@ -64,6 +64,11 @@ suite('CpuCardTest', () => {
       assertEquals(currentlyUsingValue, dataPoints[0].value);
       assertEquals(
           fakeCpuUsage[0].cpu_temp_degrees_celcius, dataPoints[1].value);
+
+      const cpuChart =
+          diagnostics_test_utils.getRealtimeCpuChartElement(cpuElement);
+      assertEquals(fakeCpuUsage[0].percent_usage_user, cpuChart.user);
+      assertEquals(fakeCpuUsage[0].percent_usage_system, cpuChart.system);
     });
   });
 });
\ No newline at end of file

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

@@ -20,4 +20,14 @@ export function getDataPointElements(element) {
  */
 export function getPercentBarChartElement(element) {
   return element.shadowRoot.querySelector('percent-bar-chart');
-}
+}
\ No newline at end of file
+
+/**
+ * Helper function for getting a realtime-cpu-chart element from a
+ * diagnostics card.
+ * @param {!HTMLElement} element
+ * @return {!Array<!HTMLElement>}
+ */
+export function getRealtimeCpuChartElement(element) {
+  return element.shadowRoot.querySelector('realtime-cpu-chart');
+}

chromeos/components/diagnostics_ui/resources/cpu_card.html

@@ -4,6 +4,10 @@
 <diagnostics-card>
   <div id="cardTitle" slot="title">[[i18n('cpuTitle')]]</div>
   <!-- TODO(michaelcheco): Add i18n string for percent number format -->
+  <realtime-cpu-chart slot="left-panel" id="realtimeCpuChart"
+    user="[[cpuUsage_.percent_usage_user]]"
+    system="[[cpuUsage_.percent_usage_system]]">
+  </realtime-cpu-chart>
   <data-point slot="body" id="cpuUsageUser"
     value="[[computeCurrentlyUsing_(cpuUsage_.percent_usage_system,
         cpuUsage_.percent_usage_user)]]">

chromeos/components/diagnostics_ui/resources/cpu_card.js

@@ -5,8 +5,10 @@
 import './data_point.js';
 import './diagnostics_card.js';
 import './diagnostics_shared_css.js';
+import './realtime_cpu_chart.js';
 
 import {html, Polymer} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
+
 import {CpuUsage, SystemDataProviderInterface} from './diagnostics_types.js'
 import {getSystemDataProvider} from './mojo_interface_provider.js';
 import {I18nBehavior} from 'chrome://resources/js/i18n_behavior.m.js';