Add unstable counter to webui

doc/newsfragments/3668_changed.add_unstable_counter.rst

@@ -0,0 +1 @@
+Added an unstable counter (xpass + xfail) alongside the passed/failed counter in web UI.

testplan/web_ui/testing/src/Common/defaults.js

@@ -133,11 +133,11 @@ const STATUS_CATEGORY = {
   error: "error",
   failed: "failed",
   incomplete: "failed",
+  "xpass-strict": "failed",
   passed: "passed",
   skipped: "unstable",
   xfail: "unstable",
   xpass: "unstable",
-  "xpass-strict": "unstable",
   unstable: "unstable",
   unknown: "unknown",
 };
@@ -288,6 +288,10 @@ const FILTER_STATUS_GROUPS = [
 
 const FILTER_STATUSES = FILTER_STATUS_GROUPS.flatMap((g) => g.statuses);
 
+const NAV_ENTRY_TOOLTIPS = {
+  testcaseCounter: "passed/unstable/failed testcases",
+};
+
 export {
   BLUE,
   DARK_BLUE,
@@ -338,4 +342,5 @@ export {
   LOCALHOST,
   FILTER_STATUS_GROUPS,
   FILTER_STATUSES,
+  NAV_ENTRY_TOOLTIPS,
 };

testplan/web_ui/testing/src/Nav/InteractiveNavEntry.js

@@ -21,6 +21,7 @@ import {
   RUNTIME_STATUS,
   ENV_STATUSES,
   NAV_ENTRY_ACTIONS,
+  NAV_ENTRY_TOOLTIPS,
 } from "../Common/defaults";
 import { navStyles } from "../Common/Styles";
 import { generateNavTimeInfo, GetStatusIcon } from "./navUtils";
@@ -109,9 +110,13 @@ const InteractiveNavEntry = (props) => {
         </span>
         <span className={
           css(navStyles.entryIcon)
-        } title="passed/failed testcases">
+        } title={NAV_ENTRY_TOOLTIPS.testcaseCounter}>
           <span className={css(navStyles.passed)}>{props.caseCountPassed}</span>
           /
+          <span className={css(navStyles.unstable)}>
+            {props.caseCountUnstable}
+          </span>
+          /
           <span className={css(navStyles.failed)}>{props.caseCountFailed}</span>
         </span>
         {resetReportIcon}
@@ -440,6 +445,8 @@ InteractiveNavEntry.propTypes = {
   type: PropTypes.oneOf(ENTRY_TYPES),
   /** Number of passing testcases entry has */
   caseCountPassed: PropTypes.number,
+  /** Number of unstable (xpass + xfail + skipped) testcases entry has */
+  caseCountUnstable: PropTypes.number,
   /** Number of failing testcases entry has */
   caseCountFailed: PropTypes.number,
   /** Execution time measured in seconds */

testplan/web_ui/testing/src/Nav/NavBreadcrumbs.js

@@ -25,6 +25,7 @@ import {
 import { statusStyles } from "../Common/Styles";
 import { generateURLWithParameters } from "../Common/utils";
 import { isReportLeaf } from "../Report/reportUtils";
+import { computeUnstableCount, computeFailedCount } from "./navUtils";
 
 library.add(faHome);
 
@@ -212,8 +213,12 @@ const MenuEntry = (props) => {
            
       <span className={classes.passed}>{props.counter.passed}</span>
       <span className={classes.unknown}>/</span>
+      <span className={classes.unstable}>
+        {computeUnstableCount(props.counter)}
+      </span>
+      <span className={classes.unknown}>/</span>
       <span className={classes.failed}>
-        {props.counter.failed + (props.counter.error || 0)}
+        {computeFailedCount(props.counter)}
       </span>
     </>
   );

testplan/web_ui/testing/src/Nav/NavEntry.js

@@ -9,6 +9,7 @@ import {
   ENTRY_TYPES,
   STATUS,
   STATUS_CATEGORY,
+  NAV_ENTRY_TOOLTIPS,
 } from "../Common/defaults";
 import { navStyles } from "../Common/Styles";
 import { generateNavTimeInfo, GetStatusIcon } from "./navUtils";
@@ -70,9 +71,13 @@ const NavEntry = (props) => {
         </span>
         <span className={
           css(navStyles.entryIcon)
-        } title="passed/failed testcases">
+        } title={NAV_ENTRY_TOOLTIPS.testcaseCounter}>
           <span className={css(navStyles.passed)}>{props.caseCountPassed}</span>
           /
+          <span className={css(navStyles.unstable)}>
+            {props.caseCountUnstable}
+          </span>
+          /
           <span className={css(navStyles.failed)}>{props.caseCountFailed}</span>
         </span>
       </div>
@@ -91,6 +96,8 @@ NavEntry.propTypes = {
   type: PropTypes.oneOf(ENTRY_TYPES),
   /** Number of passing testcases entry has */
   caseCountPassed: PropTypes.number,
+  /** Number of unstable (xpass + xfail + skipped) testcases entry has */
+  caseCountUnstable: PropTypes.number,
   /** Number of failing testcases entry has */
   caseCountFailed: PropTypes.number,
   /** Execution time measured in seconds */

testplan/web_ui/testing/src/Nav/NavList.js

@@ -4,7 +4,12 @@ import base64url from "base64url";
 
 import InteractiveNavEntry from "./InteractiveNavEntry";
 import NavEntry from "./NavEntry";
-import { CreateNavButtons, GetNavColumn } from "./navUtils.js";
+import {
+  CreateNavButtons,
+  GetNavColumn,
+  computeUnstableCount,
+  computeFailedCount,
+} from "./navUtils.js";
 import { STATUS, RUNTIME_STATUS, NAV_ENTRY_ACTIONS, CATEGORIES } from "../Common/defaults";
 import { calcExecutionTime, calcElapsedTime } from "./../Common/utils";
 
@@ -26,7 +31,8 @@ const NavList = (props) => {
           envStatus={entry.env_status}
           type={entry.category}
           caseCountPassed={entry.counter.passed}
-          caseCountFailed={entry.counter.failed + (entry.counter.error || 0)}
+          caseCountUnstable={computeUnstableCount(entry.counter)}
+          caseCountFailed={computeFailedCount(entry.counter)}
           handleClick={(e, action) => props.handleClick(e, entry, action)}
           envCtrlCallback={(e, action) =>
             props.envCtrlCallback(e, entry, action)
@@ -51,7 +57,8 @@ const NavList = (props) => {
           status={entry.status}
           type={entry.category}
           caseCountPassed={entry.counter.passed}
-          caseCountFailed={entry.counter.failed + (entry.counter.error || 0)}
+          caseCountUnstable={computeUnstableCount(entry.counter)}
+          caseCountFailed={computeFailedCount(entry.counter)}
           executionTime={calcExecutionTime(entry)}
           setupTime={calcElapsedTime(entry?.timer?.setup)}
           teardownTime={calcElapsedTime(entry?.timer?.teardown)}

testplan/web_ui/testing/src/Nav/TreeView.js

@@ -10,7 +10,11 @@ import { css, StyleSheet } from "aphrodite";
 import Column from "./Column";
 import NavEntry from "./NavEntry";
 import InteractiveNavEntry from "./InteractiveNavEntry";
-import { applyAllFilters } from "./navUtils";
+import {
+  applyAllFilters,
+  computeUnstableCount,
+  computeFailedCount,
+} from "./navUtils";
 import {
   STATUS,
   MEDIUM_GREY,
@@ -340,7 +344,8 @@ const createNavEntry = (props, entry) => {
         envStatus={entry.env_status}
         type={entry.category}
         caseCountPassed={entry.counter.passed}
-        caseCountFailed={entry.counter.failed + (entry.counter.error || 0)}
+        caseCountUnstable={computeUnstableCount(entry.counter)}
+        caseCountFailed={computeFailedCount(entry.counter)}
         handleClick={(e, action) => props.handleClick(e, entry, action)}
         envCtrlCallback={(e, action) => props.envCtrlCallback(e, entry, action)}
         suiteRelated={entry.category === CATEGORIES.synthesized}
@@ -359,7 +364,8 @@ const createNavEntry = (props, entry) => {
         status={entry.status}
         type={entry.category}
         caseCountPassed={entry.counter.passed}
-        caseCountFailed={entry.counter.failed + (entry.counter.error || 0)}
+        caseCountUnstable={computeUnstableCount(entry.counter)}
+        caseCountFailed={computeFailedCount(entry.counter)}
         executionTime={calcExecutionTime(entry)}
         setupTime={calcElapsedTime(entry?.timer?.setup)}
         teardownTime={calcElapsedTime(entry?.timer?.teardown)}