Diagnostics: Refactor routine section badge and status logic

Bug: 1125150
Test: browser_tests --gtest_filter=DiagnosticsApp*
Change-Id: I4b02fe1d0f5625a1c1562339f08f792a63b622e0
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2616741Reviewed-by: Bailey Berro <baileyberro@chromium.org>
Reviewed-by: Joon Ahn <joonbug@chromium.org>
Commit-Queue: Michael Checo <michaelcheco@google.com>
Cr-Commit-Position: refs/heads/master@{#844872}

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

@@ -194,6 +194,25 @@ export function routineResultEntryTestSuite() {
     });
   });
 
+  test('StoppedTest', () => {
+    const item = createIncompleteStatus(
+        chromeos.diagnostics.mojom.RoutineType.kCpuStress,
+        ExecutionProgress.kCancelled);
+    return initializeEntryWithItem(item).then(() => {
+      assertEquals(
+          getNameText(),
+          loadTimeData.getStringF(
+              'routineEntryText',
+              loadTimeData.getString('cpuStressRoutineText')));
+
+      // Status should show that the test was stopped.
+      assertEquals(
+          getStatusBadge().value,
+          loadTimeData.getString('testStoppedBadgeText'));
+      assertEquals(getStatusBadge().badgeType, BadgeType.STOPPED);
+    });
+  });
+
   test('PowerTest', () => {
     const item = createCompletedStatus(
         chromeos.diagnostics.mojom.RoutineType.kBatteryCharge,

chromeos/chromeos_strings.grd

@@ -746,6 +746,9 @@ Try tapping the mic to ask me anything.
       <message name="IDS_DIAGNOSTICS_TEST_QUEUED_BADGE_TEXT" desc="The text displayed to indicate that a test is currently queued.">
         QUEUED
       </message>
+      <message name="IDS_DIAGNOSTICS_TEST_STOPPED_BADGE_TEXT" desc="The text displayed to indicate that a test has been stopped.">
+        STOPPED
+      </message>
       <message name="IDS_DIAGNOSTICS_TEST_RUNNING_TEXT" desc="The text displayed while a test is running.">
         Test running
       </message>
@@ -782,6 +785,9 @@ Try tapping the mic to ask me anything.
       <message name="IDS_DIAGNOSTICS_MEMORY_AVAILABLE_TEXT" desc="The text that displays the amount of memory available on a users' device.">
         <ph name="AVAILABLE_MEMORY">$1<ex>13.12</ex></ph> GB of <ph name="TOTAL_MEMORY">$2<ex>16</ex></ph> GB available.
       </message>
+      <message name="IDS_DIAGNOSTICS_CANCELLED_TEST_TEXT" desc="The text that displays the test that was cancelled.">
+        <ph name="TEST_NAME">$1<ex>Stress</ex></ph> Test has been cancelled
+      </message>
 
       <!-- Quick Answers -->
       <message name="IDS_QUICK_ANSWERS_DEFINITION_TITLE_TEXT" desc="The title text format string used for Quick Answers definition result card. The first placeholder contains the source query text and the second placeholder contains the phonetics.">

chromeos/chromeos_strings_grd/IDS_DIAGNOSTICS_CANCELLED_TEST_TEXT.png.sha1

+7ec77363d51ed3c714bfc410cbad2b152bae037f
\ No newline at end of file

chromeos/chromeos_strings_grd/IDS_DIAGNOSTICS_TEST_STOPPED_BADGE_TEXT.png.sha1

+7ec77363d51ed3c714bfc410cbad2b152bae037f
\ No newline at end of file

chromeos/components/diagnostics_ui/diagnostics_ui.cc

@@ -87,11 +87,13 @@ void AddDiagnosticsStrings(content::WebUIDataSource* html_source) {
       {"seeReportText", IDS_DIAGNOSTICS_SEE_REPORT_TEXT},
       {"sessionLog", IDS_DIAGNOSTICS_SESSION_LOG_LABEL},
       {"stopTestButtonText", IDS_DIAGNOSTICS_STOP_TEST_BUTTON_TEXT},
+      {"testCancelledText", IDS_DIAGNOSTICS_CANCELLED_TEST_TEXT},
       {"testFailure", IDS_DIAGNOSTICS_TEST_FAILURE_TEXT},
       {"testFailedBadgeText", IDS_DIAGNOSTICS_TEST_FAILURE_BADGE_TEXT},
       {"testQueuedBadgeText", IDS_DIAGNOSTICS_TEST_QUEUED_BADGE_TEXT},
       {"testRunning", IDS_DIAGNOSTICS_TEST_RUNNING_TEXT},
       {"testRunningBadgeText", IDS_DIAGNOSTICS_TEST_RUNNING_BADGE_TEXT},
+      {"testStoppedBadgeText", IDS_DIAGNOSTICS_TEST_STOPPED_BADGE_TEXT},
       {"testSuccess", IDS_DIAGNOSTICS_TEST_SUCCESS_TEXT},
       {"testSucceededBadgeText", IDS_DIAGNOSTICS_TEST_SUCCESS_BADGE_TEXT},
   };

chromeos/components/diagnostics_ui/resources/routine_result_entry.js

@@ -115,7 +115,6 @@ Polymer({
    * @private
    */
   entryStatusChanged_() {
-    // TODO(michaelcheco): Display "STOPPED" state when routines are cancelled.
     switch (this.item.progress) {
       case ExecutionProgress.kNotStarted:
         this.setBadgeTypeAndText_(
@@ -125,6 +124,10 @@ Polymer({
         this.setBadgeTypeAndText_(
             BadgeType.RUNNING, loadTimeData.getString('testRunningBadgeText'));
         break;
+      case ExecutionProgress.kCancelled:
+        this.setBadgeTypeAndText_(
+            BadgeType.STOPPED, loadTimeData.getString('testStoppedBadgeText'));
+        break;
       case ExecutionProgress.kCompleted:
         const testPassed = this.item.result &&
             getSimpleResult(this.item.result) ===

chromeos/components/diagnostics_ui/resources/routine_section.html

@@ -50,13 +50,13 @@
   <div id="routineSection" class="routine-container">
     <div class="routine-status-container">
       <text-badge id="testStatusBadge"
-          badge-type="[[getBadgeType_(executionStatus_)]]"
+          badge-type="[[badgeType_]]"
           hidden="[[isStatusHidden_(executionStatus_)]]"
-          value="[[getBadgeText_(executionStatus_)]]">
+          value="[[badgeText_]]">
       </text-badge>
       <span id="testStatusText"
           hidden$="[[isStatusHidden_(executionStatus_)]]">
-        [[getTextStatus_(executionStatus_, currentTestName_)]]
+        [[statusText_]]
       </span>
       <span id="learnMoreText"
           hidden$="[[isLearnMoreHidden_(executionStatus_)]]"

chromeos/components/diagnostics_ui/resources/routine_section.js

@@ -9,7 +9,7 @@ import './routine_result_list.js';
 import './text_badge.js';
 import './strings.m.js';
 
-import {assert} from 'chrome://resources/js/assert.m.js';
+import {assert, assertNotReached} from 'chrome://resources/js/assert.m.js';
 import {I18nBehavior} from 'chrome://resources/js/i18n_behavior.m.js';
 import {loadTimeData} from 'chrome://resources/js/load_time_data.m.js';
 import {html, Polymer} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
@@ -97,8 +97,28 @@ Polymer({
       type: String,
       value: '',
     },
+
+    /** @private {!BadgeType} */
+    badgeType_: {
+      type: String,
+      value: BadgeType.RUNNING,
+    },
+
+    /** @private {string} */
+    badgeText_: {
+      type: String,
+      value: '',
+    },
+
+    /** @private {string} */
+    statusText_: {
+      type: String,
+      value: '',
+    },
   },
 
+  observers: ['routineStatusChanged_(executionStatus_, currentTestName_)'],
+
   /** @private */
   getResultListElem_() {
     return /** @type {!RoutineResultListElement} */ (
@@ -125,8 +145,9 @@ Polymer({
           .runRoutines(
               filteredRoutines,
               (status) => {
-                this.currentTestName_ = loadTimeData.getStringF(
-                    'routineNameText', getRoutineType(status.routine));
+                if (status.result && status.result.powerResult) {
+                  this.powerRoutineResult_ = status.result.powerResult;
+                }
 
                 if (status.result &&
                     getSimpleResult(status.result) !==
@@ -135,11 +156,9 @@ Polymer({
                   this.hasTestFailure_ = true;
                 }
 
-                resultListElem.onStatusUpdate.call(resultListElem, status);
+                this.currentTestName_ = getRoutineType(status.routine);
 
-                if (status.result && status.result.powerResult) {
-                  this.powerRoutineResult_ = status.result.powerResult;
-                }
+                resultListElem.onStatusUpdate.call(resultListElem, status);
               })
           .then(() => {
             this.executionStatus_ = ExecutionProgress.kCompleted;
@@ -197,40 +216,46 @@ Polymer({
   },
 
   /** @protected */
-  getBadgeType_() {
-    if (this.executionStatus_ === ExecutionProgress.kCompleted) {
-      if (this.hasTestFailure_) {
-        return BadgeType.ERROR;
-      }
-      return BadgeType.SUCCESS;
+  routineStatusChanged_() {
+    switch (this.executionStatus_) {
+      case ExecutionProgress.kNotStarted:
+        // Do nothing since status is hidden when tests have not been started.
+        break;
+      case ExecutionProgress.kRunning:
+        this.setBadgeAndStatusText_(
+            BadgeType.RUNNING, loadTimeData.getString('testRunning'),
+            loadTimeData.getStringF('routineNameText', this.currentTestName_));
+        break;
+      case ExecutionProgress.kCancelled:
+        this.setBadgeAndStatusText_(
+            BadgeType.STOPPED, loadTimeData.getString('testStoppedBadgeText'),
+            loadTimeData.getStringF(
+                'testCancelledText', this.currentTestName_));
+        break;
+      case ExecutionProgress.kCompleted:
+        const isPowerRoutine = this.isPowerRoutine || this.powerRoutineResult_;
+        if (this.hasTestFailure_) {
+          this.setBadgeAndStatusText_(
+              BadgeType.ERROR, loadTimeData.getString('testFailedBadgeText'),
+              loadTimeData.getString('testFailure'));
+        } else {
+          this.setBadgeAndStatusText_(
+              BadgeType.SUCCESS,
+              loadTimeData.getString('testSucceededBadgeText'),
+              isPowerRoutine ? this.getPowerRoutineString_() :
+                               loadTimeData.getString('testSuccess'));
+        }
+        break;
+      default:
+        assertNotReached();
     }
-    return BadgeType.RUNNING;
   },
 
-  /** @protected */
-  getBadgeText_() {
-    if (this.executionStatus_ === ExecutionProgress.kRunning) {
-      return loadTimeData.getString('testRunning');
-    }
-    return loadTimeData.getString(
-        this.hasTestFailure_ ? 'testFailedBadgeText' :
-                               'testSucceededBadgeText');
-  },
-
-  /** @protected */
-  getTextStatus_() {
-    if (this.executionStatus_ === ExecutionProgress.kRunning) {
-      return this.currentTestName_;
-    }
-
-    if (this.hasTestFailure_) {
-      return loadTimeData.getString('testFailure');
-    }
-
-    if (this.isPowerRoutine === false || this.powerRoutineResult_ === null) {
-      return loadTimeData.getString('testSuccess');
-    }
-
+  /**
+   * @private
+   * @return {string}
+   */
+  getPowerRoutineString_() {
     const stringId =
         this.routines.includes(
             chromeos.diagnostics.mojom.RoutineType.kBatteryCharge) ?
@@ -239,10 +264,21 @@ Polymer({
     const percentText = loadTimeData.getStringF(
         'percentageLabel', this.powerRoutineResult_.percentChange.toFixed(2));
     return loadTimeData.getStringF(
-        stringId,
-        percentText,
-        this.powerRoutineResult_.timeElapsedSeconds
-    );
+        stringId, percentText, this.powerRoutineResult_.timeElapsedSeconds);
+  },
+
+  /**
+   * @param {!BadgeType} badgeType
+   * @param {string} badgeText
+   * @param {string} statusText
+   * @private
+   */
+  setBadgeAndStatusText_(badgeType, badgeText, statusText) {
+    this.setProperties({
+      badgeType_: badgeType,
+      badgeText_: badgeText,
+      statusText_: statusText
+    });
   },
 
   /** @override */

chromeos/components/diagnostics_ui/resources/text_badge.html

@@ -16,6 +16,11 @@
     color: var(--google-blue-600);
   }
 
+  .stopped {
+    background-color: var(--google-yellow-50);
+    color: var(--google-yellow-600);
+  }
+
   .success {
     background-color: var(--google-green-50);
     color: var(--google-green-600);

chromeos/components/diagnostics_ui/resources/text_badge.js

@@ -15,6 +15,7 @@ export const BadgeType = {
   ERROR: 'error',
   QUEUED: 'queued',
   RUNNING: 'running',
+  STOPPED: 'stopped',
   SUCCESS: 'success',
 };