Bug 1519995 - Convert Graphs view to React - test cards section (#5096)

Move the cards for selected test data to react; update styling

ui/css/perf.css

@@ -41,7 +41,7 @@ h1 {
 
 #graph-chooser {
   flex: none;
-  width: 240px;
+  width: 300px;
   padding: 8px;
 }
 
@@ -56,34 +56,24 @@ h1 {
   cursor: crosshair;
 }
 
-.graph-legend-table {
-  table-layout: fixed;
-}
-
-.graph-legend-table tbody > tr > td {
-  padding: 0;
-}
-
 .graph-legend {
-  padding: 8px 20px 8px 8px;
-  text-overflow: ellipsis;
-  font-size: 12px;
-  border-left: 10px solid;
+  width: 275px;
 }
 
-.graph-legend .series-inactive {
-  border-color: #d3d3d3;
-  color: #d3d3d3;
+.graph-legend-card > p {
+  cursor: pointer;
+  font-size: 13px;
 }
 
-.graph-legend-table .close {
-  margin-right: 6px;
+.graph-legend-card > p:hover {
+  text-decoration: underline;
 }
 
-.graph-legend-table .show-hide-check {
-  float: right;
-  margin-top: -20px;
-  margin-right: 6px;
+.show-hide-check {
+  float: left;
+  position: static;
+  margin-top: 20px;
+  margin-left: 15px;
 }
 
 .graph-right-padding {
@@ -172,13 +162,6 @@ h1 {
   display: inline-block;
 }
 
-.graph-legend .signature {
-  display: inline-block;
-  max-width: 100px;
-  text-overflow: ellipsis;
-  overflow: hidden;
-}
-
 /* Test Chooser graph */
 
 .test-chooser {
@@ -421,3 +404,36 @@ li.pagination-active.active > button {
   background-color: lightgray !Important;
   border-color: lightgray !Important;
 }
+
+/* graph colors */
+.blue {
+  color: blue !Important;
+}
+
+.darkgreen {
+  color: darkgreen;
+}
+
+.darkcyan {
+  color: darkcyan;
+}
+
+.darkseagreen {
+  color: darkseagreen;
+}
+
+.steelblue {
+  color: steelblue;
+}
+
+.darkorchid {
+  color: darkorchid;
+}
+
+.lightseagreen {
+  color: lightseagreen;
+}
+
+.darkslateblue {
+  color: darkslateblue;
+}

ui/entry-perf.js

@@ -61,6 +61,7 @@ import './perfherder/compare/CompareSubtestsView';
 import './perfherder/alerts/AlertTable';
 import './perfherder/alerts/AlertsView';
 import './perfherder/graphs/TestDataModal';
+import './perfherder/graphs/SelectedTestsContainer';
 
 config.showMissingIcons = true;
 

ui/js/controllers/perf/graphs.js

@@ -35,8 +35,7 @@ perf.controller('GraphsCtrl', [
     '$window', '$q', '$timeout',
     function GraphsCtrl($state, $stateParams, $scope, $rootScope,
         $uibModal, $window, $q, $timeout) {
-        var availableColors = ['maroon', 'navy', 'pink', 'turquoise', 'brown',
-            'red', 'green', 'blue', 'orange', 'purple'];
+        const availableColors = ['darkseagreen', 'lightseagreen', 'darkslateblue', 'darkgreen', 'steelblue', 'darkorchid', 'blue', 'darkcyan'];
     
         $scope.highlightedRevisions = [undefined, undefined];
         $scope.highlightAlerts = true;
@@ -697,6 +696,7 @@ perf.controller('GraphsCtrl', [
                         showTooltip($scope.selectedDataPoint);
                     }
                 });
+                $scope.seriesList = [...$scope.seriesList];
             }));
         }
 
@@ -741,7 +741,9 @@ perf.controller('GraphsCtrl', [
             }
         };
 
-        $scope.showHideSeries = function () {
+        $scope.showHideSeries = function (signature) {
+            const updatedSeries = $scope.seriesList.find(series => series.signature === signature);
+            updatedSeries.visible = !updatedSeries.visible;
             updateDocument();
             plotGraph();
         };
@@ -919,6 +921,7 @@ perf.controller('GraphsCtrl', [
                         plotGraph();
                         $scope.loadingGraphs = false;
                     });
+                    $scope.seriesList = [...$scope.seriesList];
                 });
             };
         });

ui/partials/perf/graphsctrl.html

@@ -4,23 +4,7 @@
       <div ng-show="seriesList.length == 0">
         <p>Nothing here yet</p>
       </div>
-      <table class="table table-bordered graph-legend-table">
-        <tr ng-repeat="series in seriesList">
-          <td>
-            <button class="close" ng-click="removeSeries(series.projectName, series.signature)">
-              <span aria-hidden="true">&times;</span>
-              <span class="sr-only">Remove series</span>
-            </button>
-              <div class="graph-legend" style="border-left-color: {{series.blockColor}}" ng-class="{'series-inactive':!series.visible}">
-                <a href="" id="test-name" ng-click="addTestData('addRelatedConfigs', series.signature)" title="Add related configurations">{{series.name}}</a><br/>
-                <a href="" id="project-name" ng-click="addTestData('addRelatedBranches', series.signature)" title="Add related branches">{{series.projectName}}</a><br/>
-                <a href="" id="platform" ng-click="addTestData('addRelatedPlatform', series.signature)" title="Add related platforms">{{series.platform}}</a><br/>
-                <div class="signature"><small>{{series.signature}}</small></div>
-              </div>
-              <input title="Show/Hide series" type="checkbox" ng-model="series.visible" class="show-hide-check" ng-change="showHideSeries(series.signature)">
-          </td>
-        </tr>
-      </table>
+      <selected-tests-container series-list="seriesList" add-test-data="addTestData" remove-series="removeSeries" show-hide-series="showHideSeries"/>
       <button id="add-test-data-button" class="btn btn-primary-soft" ng-click="addTestData()">
         <span class="fas fa-plus" aria-hidden="true"></span> Add <span ng-show="seriesList.length > 0">more</span> test data</button>
     </div>

ui/perfherder/graphs/SelectedTestsContainer.jsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { react2angular } from 'react2angular/index.es2015';
+import { Container } from 'reactstrap';
+
+import perf from '../../js/perf';
+
+import TestCard from './TestCard';
+
+const SelectedTestsContainer = props => {
+  // TODO seriesList is the same as testsDisplayed in TestDataModel - change
+  // name to keep it consistent
+  const { seriesList } = props;
+
+  return (
+    <Container className="graph-legend pl-0 pb-4">
+      {seriesList.length > 0 &&
+        seriesList.map(series => (
+          <div key={series.id}>
+            <TestCard series={series} {...props} />
+          </div>
+        ))}
+    </Container>
+  );
+};
+
+SelectedTestsContainer.propTypes = {
+  seriesList: PropTypes.arrayOf(PropTypes.shape({})),
+};
+
+SelectedTestsContainer.defaultProps = {
+  seriesList: undefined,
+};
+
+perf.component(
+  'selectedTestsContainer',
+  react2angular(
+    SelectedTestsContainer,
+    ['seriesList', 'addTestData', 'removeSeries', 'showHideSeries'],
+    ['$stateParams', '$state'],
+  ),
+);
+
+export default SelectedTestsContainer;

ui/perfherder/graphs/TestCard.jsx

@@ -0,0 +1,97 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { FormGroup, Input } from 'reactstrap';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faTimes } from '@fortawesome/free-solid-svg-icons';
+
+export class TestContainer extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      checked: this.props.series.visible,
+    };
+  }
+
+  updateSelectedTest = () => {
+    const { checked } = this.state;
+    const { series, showHideSeries } = this.props;
+    this.setState({ checked: !checked });
+    showHideSeries(series.signature);
+  };
+
+  render() {
+    const { series, addTestData, removeSeries } = this.props;
+    const { checked } = this.state;
+    const subtitleStyle = 'p-0 mb-0 border-0 text-muted text-left';
+
+    return (
+      <FormGroup check className="pl-0">
+        <span
+          className="close mr-3 my-2 ml-2"
+          onClick={() => removeSeries(series.projectName, series.signature)}
+        >
+          <FontAwesomeIcon
+            className="pointer"
+            icon={faTimes}
+            size="xs"
+            title=""
+          />
+        </span>
+        <Input
+          className="show-hide-check"
+          type="checkbox"
+          checked={checked}
+          aria-label="Show/Hide series"
+          title="Show/Hide series"
+          onChange={this.updateSelectedTest}
+        />
+        <div className="graph-legend-card border pl-5 py-3 pr-3">
+          <p
+            className={`p-0 mb-0 pointer border-0 ${
+              checked ? series.color : 'text-muted'
+            } text-left`}
+            onClick={() => addTestData('addRelatedConfigs', series.signature)}
+            title="Add related configurations"
+            type="button"
+          >
+            {series.name}
+          </p>
+          <p
+            className={subtitleStyle}
+            onClick={() => addTestData('addRelatedBranches', series.signature)}
+            title="Add related branches"
+            type="button"
+          >
+            {series.projectName}
+          </p>
+          <p
+            className={subtitleStyle}
+            onClick={() => addTestData('addRelatedPlatform', series.signature)}
+            title="Add related branches"
+            type="button"
+          >
+            {series.platform}
+          </p>
+          <span className="small">{`${series.signature.slice(0, 16)}...`}</span>
+        </div>
+      </FormGroup>
+    );
+  }
+}
+
+TestContainer.propTypes = {
+  series: PropTypes.PropTypes.shape({
+    visible: PropTypes.bool,
+  }).isRequired,
+  addTestData: PropTypes.func,
+  removeSeries: PropTypes.func,
+  showHideSeries: PropTypes.func,
+};
+
+TestContainer.defaultProps = {
+  showHideSeries: undefined,
+  addTestData: undefined,
+  removeSeries: undefined,
+};
+
+export default TestContainer;