Diagnostics: Wire system info to overview card

- Data is just in placeholder elements now
- No styling is applied yet

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

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

@@ -7,9 +7,12 @@ import 'chrome://resources/mojo/mojo/public/js/mojo_bindings_lite.js';
 import 'chrome://diagnostics/diagnostics_app.js';
 
 import {SystemDataProviderInterface} from 'chrome://diagnostics/diagnostics_types.js';
+import {fakeSystemInfo} from 'chrome://diagnostics/fake_data.js';
 import {FakeMethodResolver} from 'chrome://diagnostics/fake_method_resolver.js';
 import {FakeSystemDataProvider} from 'chrome://diagnostics/fake_system_data_provider.js';
 import {getSystemDataProvider, setSystemDataProviderForTesting} from 'chrome://diagnostics/mojo_interface_provider.js';
+import {flush} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
+import {flushTasks} from 'chrome://test/test_util.m.js';
 
 suite('DiagnosticsFakeMethodResolver', () => {
   /** @type {?FakeMethodResolver} */
@@ -57,6 +60,7 @@ suite('DiagnosticsAppTest', () => {
   setup(function() {
     PolymerTest.clearBody();
     page = document.createElement('diagnostics-app');
+    assertTrue(!!page);
     document.body.appendChild(page);
   });
 
@@ -75,6 +79,61 @@ suite('DiagnosticsAppTest', () => {
   });
 });
 
+suite('OverviewCardTest', () => {
+  /** @type {?HTMLElement} */
+  let overviewElement = null;
+
+  /** @type {?FakeSystemDataProvider} */
+  let provider = null;
+
+  suiteSetup(() => {
+    provider = new FakeSystemDataProvider();
+    setSystemDataProviderForTesting(provider);
+  });
+
+  setup(function() {
+    PolymerTest.clearBody();
+  });
+
+  teardown(function() {
+    overviewElement.remove();
+    overviewElement = null;
+    provider = null;
+  });
+
+  /** @param {!SystemInfo} */
+  function initializeOverviewCard(fakeSystemInfo) {
+    assertFalse(!!overviewElement);
+
+    // Initialize the fake data.
+    provider.setFakeSystemInfo(fakeSystemInfo);
+
+    // Add the overview card to the DOM.
+    overviewElement = document.createElement('overview-card');
+    assertTrue(!!overviewElement);
+    document.body.appendChild(overviewElement);
+
+    return flushTasks();
+  }
+
+  test('OverviewCardPopulated', () => {
+    return initializeOverviewCard(fakeSystemInfo).then(() => {
+      assertEquals(
+          fakeSystemInfo.board_name,
+          overviewElement.$$('#boardName').textContent);
+      assertEquals(
+          fakeSystemInfo.cpu_model_name,
+          overviewElement.$$('#cpuModelName').textContent);
+      assertEquals(
+          fakeSystemInfo.total_memory_kib.toString(),
+          overviewElement.$$('#totalMemory').textContent);
+      assertEquals(
+          fakeSystemInfo.version.milestone_version,
+          overviewElement.$$('#version').textContent);
+    });
+  });
+});
+
 suite('FakeMojoProviderTest', () => {
   test('SettingGettingTestProvider', () => {
     // TODO(zentaro): Replace with fake when built.

chromeos/components/diagnostics_ui/resources/BUILD.gn

@@ -13,6 +13,7 @@ js_type_check("closure_compile_module") {
     ":diagnostics_app",
     ":diagnostics_card",
     ":diagnostics_types",
+    ":fake_data",
     ":fake_method_resolver",
     ":fake_system_data_provider",
     ":mojo_interface_provider",
@@ -37,6 +38,10 @@ js_library("diagnostics_card") {
 js_library("diagnostics_types") {
 }
 
+js_library("fake_data") {
+  deps = [ ":diagnostics_types" ]
+}
+
 js_library("fake_method_resolver") {
   deps = [ "//ui/webui/resources/js:cr.m" ]
 }
@@ -46,12 +51,17 @@ js_library("fake_system_data_provider") {
 }
 
 js_library("mojo_interface_provider") {
-  deps = [ "//ui/webui/resources/js:cr.m" ]
+  deps = [
+    ":diagnostics_types",
+    ":fake_data",
+    "//ui/webui/resources/js:cr.m",
+  ]
 }
 
 js_library("overview_card") {
   deps = [
     ":diagnostics_card",
+    ":mojo_interface_provider",
     "//third_party/polymer/v3_0/components-chromium/polymer:polymer_bundled",
   ]
 }

chromeos/components/diagnostics_ui/resources/diagnostics_app_resources.grd

@@ -17,6 +17,7 @@
       <include name="IDR_DIAGNOSTICS_APP_INDEX_HTML" file="index.html" type="BINDATA" />
       <include name="IDR_DIAGNOSTICS_APP_JS" file="${root_gen_dir}/chromeos/components/diagnostics_ui/resources/diagnostics_app.js" use_base_dir="false" type="BINDATA"/>
       <include name="IDR_DIAGNOSTICS_CARD_JS" file="${root_gen_dir}/chromeos/components/diagnostics_ui/resources/diagnostics_card.js" use_base_dir="false" type="BINDATA"/>
+      <include name="IDR_DIAGNOSTICS_FAKE_DATA_JS" file="fake_data.js" type="BINDATA"/>
       <include name="IDR_DIAGNOSTICS_FAKE_METHOD_RESOLVER_JS" file="fake_method_resolver.js" type="BINDATA"/>
       <include name="IDR_DIAGNOSTICS_FAKE_SYSTEM_DATA_PROVIDER_JS" file="fake_system_data_provider.js" type="BINDATA"/>
       <include name="IDR_DIAGNOSTICS_MOJO_INTERFACE_PROVIDER_JS" file="mojo_interface_provider.js" type="BINDATA"/>

chromeos/components/diagnostics_ui/resources/diagnostics_types.js

@@ -13,7 +13,9 @@
 /**
  * Type alias for the SystemDataProviderInterface.
  * TODO(zentaro): Replace with a real mojo type when implemented.
- * @typedef {!Object}
+ * @typedef {{
+ *   getSystemInfo: !function(): !Promise<!SystemInfo>
+ * }}
  */
 export let SystemDataProviderInterface;
 

chromeos/components/diagnostics_ui/resources/fake_data.js

+// Copyright 2020 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import {SystemInfo} from './diagnostics_types.js'
+
+/* @type {!SystemInfo} */
+export const fakeSystemInfo = {
+  board_name: 'CrOS Board',
+  cpu_model_name: 'BestCpu SoFast 1000',
+  cpu_threads_count: 8,
+  device_capabilities: {has_battery: true},
+  total_memory_kib: 128000,
+  version: {milestone_version: 'M99'},
+};

chromeos/components/diagnostics_ui/resources/mojo_interface_provider.js

@@ -4,7 +4,8 @@
 
 import {assert} from 'chrome://resources/js/assert.m.js';
 import {SystemDataProviderInterface, SystemInfo} from './diagnostics_types.js'
-import {FakeMethodResolver} from './fake_method_resolver.js'
+import {fakeSystemInfo} from './fake_data.js'
+import {FakeSystemDataProvider} from './fake_system_data_provider.js'
 
 /**
  * @fileoverview
@@ -12,6 +13,21 @@ import {FakeMethodResolver} from './fake_method_resolver.js'
  * to override them with test/fake implementations.
  */
 
+/**
+ * Sets up a FakeSystemDataProvider to be used at runtime.
+ * TODO(zentaro): Remove once mojo bindings are implemented.
+ */
+function setupFakeSystemDataProvider_() {
+  // Create provider.
+  let provider = new FakeSystemDataProvider();
+
+  // Setup SystemInfo
+  provider.setFakeSystemInfo(fakeSystemInfo);
+
+  // Set the fake provider.
+  setSystemDataProviderForTesting(provider);
+}
+
 /**
  * @type {?SystemDataProviderInterface}
  */
@@ -28,8 +44,11 @@ export function setSystemDataProviderForTesting(testProvider) {
  * @return {!SystemDataProviderInterface}
  */
 export function getSystemDataProvider() {
-  // TODO(zentaro): Instantiate a real mojo interface here.
-  assert(!!systemDataProvider);
+  if (!systemDataProvider) {
+    // TODO(zentaro): Instantiate a real mojo interface here.
+    setupFakeSystemDataProvider_();
+  }
 
+  assert(!!systemDataProvider);
   return systemDataProvider;
 }

chromeos/components/diagnostics_ui/resources/overview_card.html

 <style include="diagnostics-shared">
 </style>
 
-<div id="overviewCardContainer"></div>
+<div id="overviewCardContainer">
+  <div id="boardName">[[systemInfo_.board_name]]</div>
+  <div id="cpuModelName">[[systemInfo_.cpu_model_name]]</div>
+  <div id="totalMemory">[[systemInfo_.total_memory_kib]]</div>
+  <div id="version">[[systemInfo_.version.milestone_version]]</div>
+</div>

chromeos/components/diagnostics_ui/resources/overview_card.js

@@ -6,6 +6,10 @@ import './diagnostics_shared_css.js';
 
 import {html, Polymer} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
 
+import {SystemDataProviderInterface, SystemInfo} from './diagnostics_types.js'
+import {getSystemDataProvider} from './mojo_interface_provider.js';
+
+
 /**
  * @fileoverview
  * 'overview-card' shows an overview of system information such
@@ -16,4 +20,36 @@ Polymer({
 
   _template: html`{__html_template__}`,
 
+  /**
+   * @private {?SystemDataProviderInterface}
+   */
+  systemDataProvider_: null,
+
+  properties: {
+    /** @private {!SystemInfo} */
+    systemInfo_: {
+      type: Object,
+    },
+  },
+
+  /** @override */
+  created() {
+    this.systemDataProvider_ = getSystemDataProvider();
+    this.fetchSystemInfo_();
+  },
+
+  /** @private */
+  fetchSystemInfo_() {
+    this.systemDataProvider_.getSystemInfo().then(
+        this.onSystemInfoReceived_.bind(this));
+  },
+
+  /**
+   * @param {!SystemInfo} systemInfo
+   * @private
+   */
+  onSystemInfoReceived_(systemInfo) {
+    this.systemInfo_ = systemInfo;
+  },
+
 });