Bug 1747989 - split alerts number in tests view (#7350)

tests/ui/perfherder/tests_table_test.jsx

@@ -12,6 +12,7 @@ const results = [
     platforms: ['2', '1'],
     repositories: ['2', '1'],
     total_alerts: 202,
+    total_regressions: 100,
   },
   {
     framework: 'awsy',
@@ -20,6 +21,7 @@ const results = [
     platforms: ['1'],
     repositories: ['2'],
     total_alerts: 97,
+    total_regressions: 30,
   },
 ];
 
@@ -83,3 +85,17 @@ test('Clicking on platform icon displays the list of platforms', async () => {
   expect(platformList.children[0]).toHaveTextContent('platform2');
   expect(platformList.children[1]).toHaveTextContent('platform1');
 });
+
+test('Test alerts from Alerts column are split into improvements and regressions', async () => {
+  const { getAllByTestId } = testsTable(results, projectsMap, platformsMap);
+
+  const improvements = await waitFor(() => getAllByTestId('improvements'));
+
+  expect(improvements[0]).toBeInTheDocument();
+  expect(improvements[0]).toHaveTextContent('102');
+
+  const regressions = await waitFor(() => getAllByTestId('regressions'));
+
+  expect(regressions[0]).toBeInTheDocument();
+  expect(regressions[0]).toHaveTextContent('100');
+});

treeherder/webapp/api/performance_data.py

@@ -740,6 +740,7 @@ class TestSuiteHealthViewSet(viewsets.ViewSet):
             .annotate(repositories=GroupConcat('repository_id', distinct=True))
             .annotate(platforms=GroupConcat('platform_id', distinct=True))
             .annotate(total_alerts=Count('performancealert'))
+            .annotate(total_regressions=Count('performancealert__is_regression'))
             .order_by('suite', 'test')
         )
 

treeherder/webapp/api/performance_serializers.py

@@ -389,3 +389,4 @@ class TestSuiteHealthSerializer(serializers.Serializer):
     platforms = CommaSeparatedField()
     repositories = CommaSeparatedField()
     total_alerts = serializers.IntegerField()
+    total_regressions = serializers.IntegerField()

ui/perfherder/tests/AlertsList.jsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import SimpleTooltip from '../../shared/SimpleTooltip';
+
+export default class AlertsList extends React.PureComponent {
+  render() {
+    const { alerts } = this.props;
+    const {
+      total_alerts: totalAlerts,
+      total_regressions: regressions,
+    } = alerts;
+    const improvements = totalAlerts - regressions;
+    return (
+      <div className="d-flex justify-content-around">
+        <div data-testid="improvements">
+          <SimpleTooltip
+            text={`${improvements || 0}`}
+            tooltipText="Improvements"
+          />
+        </div>
+        <div data-testid="regressions">
+          <SimpleTooltip
+            text={`${regressions || 0}`}
+            tooltipText="Regressions"
+          />
+        </div>
+      </div>
+    );
+  }
+}
+
+AlertsList.propTypes = {
+  alerts: PropTypes.shape({}).isRequired,
+};

ui/perfherder/tests/TestsTable.jsx

@@ -8,6 +8,7 @@ import { Perfdocs, perfViews } from '../perf-helpers/perfdocs';
 
 import ItemList from './ItemList';
 import PlatformList from './PlatformList';
+import AlertsList from './AlertsList';
 
 export default function TestsTable(props) {
   const {
@@ -82,8 +83,12 @@ export default function TestsTable(props) {
     },
     {
       headerStyle,
-      Header: 'Total Alerts',
+      Header: 'Alerts',
       accessor: 'total_alerts',
+      Cell: (props) => {
+        const { original } = props;
+        return <AlertsList alerts={original} />;
+      },
       width: 100,
       style: { textAlign: 'center' },
     },