Bug 1759129 - Tests View - Change Alerts column to reflect improvements and regressions (#7408)

* Bug 1759129 - Add headers for Alerts column

* Bug 1759129 - Change accessor for regressions and untriaged alerts

ui/perfherder/tests/AlertsLink.jsx

@@ -10,13 +10,44 @@ export default class AlertsLink extends React.PureComponent {
     return (
       <>
         {type.charAt(0).toUpperCase() + type.slice(1)} <br />
-        <i>Note: Untriaged {type} can be seen through untriaged link</i>
+        {type !== 'untriaged' && (
+          <i>Note: Untriaged {type} can be seen through untriaged link</i>
+        )}
       </>
     );
   };
 
+  getCell = (type, alertsNumber, filterText, framework) => {
+    const summaryStatus = {
+      improvements: summaryStatusMap.improvement,
+      regressions: summaryStatusMap['all regressions'],
+      untriaged: summaryStatusMap.untriaged,
+    };
+
+    return (
+      <div className="d-flex justify-content-center">
+        <div data-testid={type} className="w-50">
+          <Link
+            to={`./alerts?hideDwnToInv=0&filterText=${filterText}&page=1&status=${summaryStatus[type]}&framework=${framework.id}`}
+            target="_blank"
+          >
+            <SimpleTooltip
+              text={`${alertsNumber[type] || 0}`}
+              tooltipText={this.getTooltip(type)}
+            />
+          </Link>
+        </div>
+      </div>
+    );
+  };
+
   render() {
-    const { alerts, framework: frameworkName, allFrameworks } = this.props;
+    const {
+      alerts,
+      framework: frameworkName,
+      allFrameworks,
+      type,
+    } = this.props;
     const {
       total_alerts: totalAlerts,
       total_regressions: regressions,
@@ -28,40 +59,13 @@ export default class AlertsLink extends React.PureComponent {
     const framework = allFrameworks.find((item) => item.name === frameworkName);
 
     const filterText = suite && test ? suite.concat(`+${test}`) : suite || test;
-    return (
-      <div className="d-flex justify-content-center">
-        <div data-testid="improvements" className="w-50">
-          <Link
-            to={`./alerts?hideDwnToInv=0&filterText=${filterText}&page=1&status=${summaryStatusMap.improvement}&framework=${framework.id}`}
-            target="_blank"
-          >
-            <SimpleTooltip
-              text={`${improvements || 0}`}
-              tooltipText={this.getTooltip('improvements')}
-            />
-          </Link>
-        </div>
-        <div data-testid="regressions" className="w-50">
-          <Link
-            to={`./alerts?hideDwnToInv=0&filterText=${filterText}&page=1&status=${summaryStatusMap['all regressions']}&framework=${framework.id}`}
-            target="_blank"
-          >
-            <SimpleTooltip
-              text={`${regressions || 0}`}
-              tooltipText={this.getTooltip('regressions')}
-            />
-          </Link>
-        </div>
-        <div data-testid="untriaged" className="w-50">
-          <Link
-            to={`./alerts?hideDwnToInv=0&filterText=${filterText}&page=1&status=${summaryStatusMap.untriaged}&framework=${framework.id}`}
-            target="_blank"
-          >
-            <SimpleTooltip text={`${untriaged || 0}`} tooltipText="Untriaged" />
-          </Link>
-        </div>
-      </div>
-    );
+    const alertsNumber = {
+      improvements,
+      regressions,
+      untriaged,
+    };
+
+    return this.getCell(type, alertsNumber, filterText, framework);
   }
 }
 

ui/perfherder/tests/TestsTable.jsx

@@ -2,9 +2,16 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { Container } from 'reactstrap';
 import ReactTable from 'react-table';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import {
+  faArrowAltCircleUp,
+  faArrowAltCircleDown,
+  faQuestionCircle,
+} from '@fortawesome/free-solid-svg-icons';
 
 import { noResultsMessage } from '../perf-helpers/constants';
 import { Perfdocs, perfViews } from '../perf-helpers/perfdocs';
+import SimpleTooltip from '../../shared/SimpleTooltip';
 
 import ItemList from './ItemList';
 import PlatformList from './PlatformList';
@@ -31,77 +38,159 @@ export default function TestsTable(props) {
   const columns = [
     {
       headerStyle,
-      Header: 'Suite',
-      accessor: 'suite',
-      Cell: ({ row }) => {
-        const perfdocs = new Perfdocs(framework, row.suite);
-        const hasDocumentation = perfdocs.hasDocumentation(perfViews.testsView);
-        return (
-          <div>
-            {hasDocumentation ? (
-              <a
-                href={perfdocs.documentationURL}
-                target="_blank"
-                rel="noopener noreferrer"
-              >
-                {row.suite}
-              </a>
-            ) : (
-              <div>{row.suite}</div>
-            )}
-          </div>
-        );
-      },
-    },
-    {
-      headerStyle,
-      Header: 'Test Name',
-      accessor: 'test',
-    },
-    {
-      headerStyle,
-      Header: 'Platforms',
-      accessor: 'platforms',
-      Cell: (props) => {
-        if (platformsMap) {
-          const platforms = props.value.map((id) => platformsMap[id]);
-          return <PlatformList items={platforms} />;
-        }
-        return null;
-      },
-      width: 300,
+      columns: [
+        {
+          headerStyle,
+          Header: 'Suite',
+          accessor: 'suite',
+          Cell: ({ row }) => {
+            const perfdocs = new Perfdocs(framework, row.suite);
+            const hasDocumentation = perfdocs.hasDocumentation(
+              perfViews.testsView,
+            );
+            return (
+              <div>
+                {hasDocumentation ? (
+                  <a
+                    href={perfdocs.documentationURL}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                  >
+                    {row.suite}
+                  </a>
+                ) : (
+                  <div>{row.suite}</div>
+                )}
+              </div>
+            );
+          },
+        },
+        {
+          headerStyle,
+          Header: 'Test Name',
+          accessor: 'test',
+        },
+        {
+          headerStyle,
+          Header: 'Platforms',
+          accessor: 'platforms',
+          Cell: (props) => {
+            if (platformsMap) {
+              const platforms = props.value.map((id) => platformsMap[id]);
+              return <PlatformList items={platforms} />;
+            }
+            return null;
+          },
+          width: 300,
+          style: { textAlign: 'center' },
+          sortable: false,
+        },
+        {
+          headerStyle,
+          Header: 'Projects',
+          accessor: 'repositories',
+          Cell: (props) => {
+            if (projectsMap) {
+              const repositories = props.value.map((id) => projectsMap[id]);
+              return <ItemList items={repositories} />;
+            }
+            return null;
+          },
+          width: 300,
+          style: { textAlign: 'center' },
+          sortable: false,
+        },
+      ],
+      width: 400,
       style: { textAlign: 'center' },
-      sortable: false,
-    },
-    {
-      headerStyle,
-      Header: 'Projects',
-      accessor: 'repositories',
-      Cell: (props) => {
-        if (projectsMap) {
-          const repositories = props.value.map((id) => projectsMap[id]);
-          return <ItemList items={repositories} />;
-        }
-        return null;
-      },
-      width: 300,
-      style: { textAlign: 'center' },
-      sortable: false,
     },
     {
       headerStyle,
       Header: 'Alerts',
-      accessor: 'total_alerts',
-      Cell: (props) => {
-        const { original } = props;
-        return (
-          <AlertsLink
-            alerts={original}
-            framework={framework}
-            allFrameworks={allFrameworks}
-          />
-        );
-      },
+      columns: [
+        {
+          headerStyle,
+          Header: () => (
+            <SimpleTooltip
+              tooltipText="Improvements"
+              text={
+                <FontAwesomeIcon
+                  icon={faArrowAltCircleUp}
+                  className="text-success"
+                />
+              }
+            />
+          ),
+          accessor: 'total_alerts',
+          Cell: (props) => {
+            const { original } = props;
+            return (
+              <AlertsLink
+                alerts={original}
+                framework={framework}
+                allFrameworks={allFrameworks}
+                type="improvements"
+              />
+            );
+          },
+          width: 50,
+          style: { textAlign: 'center' },
+          sortable: false,
+        },
+        {
+          headerStyle,
+          Header: () => (
+            <SimpleTooltip
+              tooltipText="Regressions"
+              text={
+                <FontAwesomeIcon
+                  icon={faArrowAltCircleDown}
+                  className="text-danger"
+                />
+              }
+            />
+          ),
+          accessor: 'total_regressions',
+          Cell: (props) => {
+            const { original } = props;
+            return (
+              <AlertsLink
+                alerts={original}
+                framework={framework}
+                allFrameworks={allFrameworks}
+                type="regressions"
+              />
+            );
+          },
+          width: 50,
+          style: { textAlign: 'center' },
+          sortable: false,
+        },
+        {
+          headerStyle,
+          Header: () => (
+            <SimpleTooltip
+              tooltipText="Untriaged alerts"
+              text={<FontAwesomeIcon icon={faQuestionCircle} />}
+            />
+          ),
+          accessor: 'total_untriaged',
+          Cell: (props) => {
+            const { original } = props;
+            return (
+              <AlertsLink
+                alerts={original}
+                framework={framework}
+                allFrameworks={allFrameworks}
+                type="untriaged"
+              />
+            );
+          },
+          width: 50,
+          style: { textAlign: 'center' },
+          sortable: false,
+        },
+      ],
       width: 100,
       style: { textAlign: 'center' },
     },