Made it easier to identify different type of runs based on their names

src/models/testingPerfs.ts

@@ -121,6 +121,8 @@ export const testingPerfs: TestingPerfs = {
     selectedRunTab: 'summary',
 
     runs: [],
+    // Maximum number of runs to display in the transactions table
+    maxRunsCount: 100,
     selectedRun: {},
     selectedRunData: {},
     selectedRunProfile: '',
@@ -261,6 +263,9 @@ export const testingPerfs: TestingPerfs = {
     setRuns(state: any, payload: any) {
       return { ...state, runs: payload };
     },
+    setMaxRunsCount(state: any, payload: any) {
+      return { ...state, maxRunsCount: payload };
+    },
     setSelectedRun(state: any, payload: any) {
       return { ...state, selectedRun: payload };
     },

src/views/testingPerfs/content/runs/content/transactions/statistics/Transaction/index.tsx

@@ -26,6 +26,7 @@ interface Props {
   selectedRunProfile: string;
   availableProfiles: string[];
   setSelectedRunProfile: (value: string) => void;
+  runsWithShapes: { name: string; shape: string; color: string }[];
 }
 
 const getTrend = (metric: any, transaction: any, selectedRun: any, compareType: string) => {
@@ -38,6 +39,14 @@ const getTrend = (metric: any, transaction: any, selectedRun: any, compareType:
     return <TableCell key={metric.id} align="center"></TableCell>;
   }
 
+  //Do not compare if some metrics are not available
+  if (
+    transaction.runs[selectedTransactionIdx] === undefined ||
+    transaction.runs[selectedTransactionIdx - 5] === undefined
+  ) {
+    return <TableCell key={metric.id} align="center"></TableCell>;
+  }
+
   if (compareType === 'run') {
     currentValue = transaction.runs[selectedTransactionIdx].statistics[metric.id];
     compareToValue = transaction.runs[selectedTransactionIdx].velocityStatistics[metric.id];
@@ -81,6 +90,7 @@ const Transaction: React.FC<Props> = (props: Props) => {
     selectedRunProfile,
     availableProfiles,
     setSelectedRunProfile,
+    runsWithShapes,
   } = props;
 
   // Append velocity data to the transaction
@@ -179,6 +189,7 @@ const Transaction: React.FC<Props> = (props: Props) => {
             selectedRun={selectedRun}
             transactionMetrics={transactionMetrics}
             metricId={'medianResTime'}
+            runsWithShapes={runsWithShapes}
           />
         </Grid>
         <Grid item xs={4}>
@@ -187,6 +198,7 @@ const Transaction: React.FC<Props> = (props: Props) => {
             selectedRun={selectedRun}
             transactionMetrics={transactionMetrics}
             metricId={'pct1ResTime'}
+            runsWithShapes={runsWithShapes}
           />
         </Grid>
         <Grid item xs={4}>
@@ -195,6 +207,7 @@ const Transaction: React.FC<Props> = (props: Props) => {
             selectedRun={selectedRun}
             transactionMetrics={transactionMetrics}
             metricId={'pct2ResTime'}
+            runsWithShapes={runsWithShapes}
           />
         </Grid>
       </Grid>

src/views/testingPerfs/content/runs/content/transactions/statistics/Transaction/transactionChart.tsx

@@ -32,37 +32,48 @@ class TransactionChart extends Component<any, any> {
   };
 
   buildChart = () => {
-    const { transaction, metricId, transactionMetrics, selectedRun } = this.props;
+    const { transaction, metricId, transactionMetrics, selectedRun, runsWithShapes } = this.props;
 
     const transactionDetails = transactionMetrics.find((t: any) => t.id === metricId);
 
+    const dataPoints = runsWithShapes.map((r: any) => {
+      return {
+        type: 'line',
+        pointRadius: 4,
+        showLine: false,
+        label: r.name,
+        data: transaction.runs.map((ru: any) => {
+          if (ru.run.name !== r.name) {
+            return null;
+          }
+          return Math.round(ru.statistics[metricId] * 10) / 10;
+        }),
+        pointStyle: r.shape,
+        backgroundColor: r.color,
+        borderColor: r.color,
+        fill: false,
+      };
+    });
+
     const chartData = {
       datasets: [
         {
           type: 'line',
           pointRadius: 2,
-          label: transactionDetails.name,
+          label: 'Rolling Average',
           data: transaction.runs.map((r: any) => Math.round(r.velocityStatistics[metricId] * 10) / 10),
           backgroundColor: 'rgb(255, 99, 132)', // Red
           borderColor: 'rgb(255, 99, 132)', // Red
           fill: false,
         },
-        {
-          type: 'line',
-          borderColor: 'rgb(54, 162, 235)', // Blue
-          pointRadius: 4,
-          label: transactionDetails.name,
-          data: transaction.runs.map((r: any) => Math.round(r.statistics[metricId] * 10) / 10),
-          backgroundColor: 'rgb(54, 162, 235)', // Blue
-          showLine: false,
-        },
+        ...dataPoints,
         {
           // This is used to place a circle around the run currently selected
           type: 'line',
           pointRadius: 10,
           pointBorderColor: 'rgb(224, 224, 224)', // Grey
           pointBorderWidth: 3,
-          label: transactionDetails.name,
+          label: 'Current',
           data: transaction.runs.map((r: any) => {
             if (r.run.id === selectedRun.id) {
               return Math.round(r.statistics[metricId] * 10) / 10;
@@ -87,7 +98,7 @@ class TransactionChart extends Component<any, any> {
       data: chartData,
       options: {
         legend: {
-          display: false,
+          display: true,
         },
         title: {
           display: true,

src/views/testingPerfs/content/runs/content/transactions/statistics/index.tsx

@@ -30,6 +30,37 @@ const Statistics: React.FC<connectedProps> = (props: connectedProps) => {
 
   const availableProfiles = selectedRunData.runs.edges.map((r: any) => r.node.name);
 
+  // As per: https://www.chartjs.org/docs/2.9.4/configuration/elements.html#point-styles
+  const charJsDotShapes = [
+    { shape: 'circle', color: 'rgb(54, 162, 235)' },
+    { shape: 'triangle', color: 'rgb(255, 152, 0)' },
+    { shape: 'rect', color: 'rgb(76, 175, 80)' },
+    { shape: 'rectRounded', color: 'rgb(63, 81, 181)' },
+    { shape: 'rectRot', color: 'rgb(156, 39, 176)' },
+    { shape: 'cross', color: 'rgb(205, 220, 57)' },
+    { shape: 'crossRot', color: 'rgb(255, 172, 51)' },
+    { shape: 'star', color: 'rgb(213, 0, 249)' },
+    { shape: 'line', color: 'rgb(178, 135, 4)' },
+  ];
+
+  const runsWithShapes = runs.reduce((acc: any[], r: any) => {
+    if (acc.find((ru) => ru.name === r.name) === undefined) {
+      if (charJsDotShapes[acc.length] === undefined) {
+        acc.push({
+          shape: 'dash',
+          color: 'rgb(165, 42, 42)',
+          name: r.name,
+        });
+      } else {
+        acc.push({
+          ...charJsDotShapes[acc.length],
+          name: r.name,
+        });
+      }
+    }
+    return acc;
+  }, []);
+
   // Create an Array of all available transactions across all runs
   const transactions = runs
     .reduce((acc: any[], r: any) => {
@@ -39,6 +70,7 @@ const Statistics: React.FC<connectedProps> = (props: connectedProps) => {
             name: stat.transaction,
             run: {
               id: r.id,
+              name: r.name,
               profile: profile.node.name,
               startedAt: r.startedAt,
             },
@@ -98,6 +130,7 @@ const Statistics: React.FC<connectedProps> = (props: connectedProps) => {
             <Transaction
               key={t.name}
               transaction={t}
+              runsWithShapes={runsWithShapes}
               selectedRun={selectedRunData}
               transactionMetrics={transactionMetrics}
               selectedRunProfile={selectedRunProfile}

src/views/testingPerfs/content/runs/data/availableRuns/getQueries.graphql

@@ -1,7 +1,7 @@
-query($query: String) {
+query($query: String, $maxRunsSize: Int) {
   testingPerfs {
     data(query: $query) {
-      items(size: 1000) {
+      items(size: $maxRunsSize, orderBy: { direction: desc, field: "startedAt" }) {
         nodes {
           id
           name

src/views/testingPerfs/content/runs/data/availableRuns/index.tsx

@@ -9,6 +9,7 @@ const GQL_QUERY = loader('./getQueries.graphql');
 
 const mapState = (state: iRootState) => ({
   query: state.testingPerfs.query,
+  maxRunsCount: state.testingPerfs.maxRunsCount,
 });
 
 const mapDispatch = (dispatch: any) => ({
@@ -20,11 +21,12 @@ const mapDispatch = (dispatch: any) => ({
 type connectedProps = ReturnType<typeof mapState> & ReturnType<typeof mapDispatch>;
 
 const AvailableRuns: React.FC<connectedProps> = (props: connectedProps) => {
-  const { setAvailableRuns, query, setSelectedRunId, setLoading } = props;
+  const { setAvailableRuns, query, setSelectedRunId, setLoading, maxRunsCount } = props;
 
   const { data, loading } = useQuery(GQL_QUERY, {
     variables: {
       query: JSON.stringify(query),
+      maxRunsSize: maxRunsCount,
     },
     fetchPolicy: 'network-only',
   });

src/views/testingPerfs/content/runs/data/compareRuns/getQueries.graphql

@@ -1,7 +1,8 @@
-query($query: String, $transactions: [String!], $profileName: String) {
+query($query: String, $transactions: [String!], $profileName: String, $maxRunsSize: Int) {
   testingPerfs {
     data(query: $query) {
-      items(transactions: $transactions, profileName: $profileName, orderBy: { direction: desc, field: "startedAt" }) {
+      count
+      items(transactions: $transactions, profileName: $profileName, orderBy: { direction: desc, field: "startedAt" }, size: $maxRunsSize) {
         nodes {
           id
           name

src/views/testingPerfs/content/runs/data/compareRuns/index.tsx

@@ -10,6 +10,7 @@ const GQL_QUERY = loader('./getQueries.graphql');
 const mapState = (state: iRootState) => ({
   query: state.testingPerfs.query,
   selectedRunProfile: state.testingPerfs.selectedRunProfile,
+  maxRunsCount: state.testingPerfs.maxRunsCount,
 });
 
 const mapDispatch = (dispatch: any) => ({
@@ -19,13 +20,14 @@ const mapDispatch = (dispatch: any) => ({
 type connectedProps = ReturnType<typeof mapState> & ReturnType<typeof mapDispatch>;
 
 const Profiles: React.FC<connectedProps> = (props: connectedProps) => {
-  const { setRuns, query, selectedRunProfile } = props;
+  const { setRuns, query, selectedRunProfile, maxRunsCount } = props;
 
   const { data } = useQuery(GQL_QUERY, {
     variables: {
       query: JSON.stringify(query),
       transactions: ['*'],
       profileName: selectedRunProfile,
+      maxRunsSize: maxRunsCount,
     },
     fetchPolicy: 'network-only',
   });

src/views/testingPerfs/content/runs/toolbar/index.tsx

@@ -5,22 +5,25 @@ import Grid from '@material-ui/core/Grid';
 import SelectRun from './selectRun';
 import PreviousRun from './previousRun';
 import NextRun from './nextRun';
+import MaxRuns from './maxRuns';
 
 import { iRootState } from '../../../../../store';
 
 const mapState = (state: iRootState) => ({
   availableRuns: state.testingPerfs.availableRuns,
   selectedRunId: state.testingPerfs.selectedRunId,
+  maxRunsCount: state.testingPerfs.maxRunsCount,
 });
 
 const mapDispatch = (dispatch: any) => ({
   setSelectedRunId: dispatch.testingPerfs.setSelectedRunId,
+  setMaxRunsCount: dispatch.testingPerfs.setMaxRunsCount,
 });
 
 type connectedProps = ReturnType<typeof mapState> & ReturnType<typeof mapDispatch>;
 
 const Toolbar: React.FC<connectedProps> = (props: connectedProps) => {
-  const { availableRuns, selectedRunId, setSelectedRunId } = props;
+  const { availableRuns, selectedRunId, setSelectedRunId, setMaxRunsCount, maxRunsCount } = props;
 
   if (availableRuns.length === 0 || selectedRunId === '') {
     return null;
@@ -32,6 +35,7 @@ const Toolbar: React.FC<connectedProps> = (props: connectedProps) => {
 
   return (
     <Grid container spacing={3} direction="row" justify="center" alignItems="center">
+      <Grid item xs={12} sm container></Grid>
       <Grid item>
         <PreviousRun previousRun={previousRun} setSelectedRunId={setSelectedRunId} />
       </Grid>
@@ -41,6 +45,10 @@ const Toolbar: React.FC<connectedProps> = (props: connectedProps) => {
       <Grid item>
         <NextRun nextRun={nextRun} setSelectedRunId={setSelectedRunId} />
       </Grid>
+      <Grid item xs={12} sm container></Grid>
+      <Grid item>
+        <MaxRuns maxRunsCount={maxRunsCount} setMaxRunsCount={setMaxRunsCount} />
+      </Grid>
     </Grid>
   );
 };

src/views/testingPerfs/content/runs/toolbar/maxRuns.tsx

@@ -0,0 +1,46 @@
+import React from 'react';
+import MenuItem from '@material-ui/core/MenuItem/MenuItem';
+import Select from '@material-ui/core/Select/Select';
+import FormControl from '@material-ui/core/FormControl/FormControl';
+import FormHelperText from '@material-ui/core/FormHelperText/FormHelperText';
+
+interface Run {
+  id: string;
+  name: string;
+  startedAt: string;
+}
+
+interface Props {
+  setMaxRunsCount: (value: number) => void;
+  maxRunsCount: number;
+}
+
+const MaxRuns: React.FC<Props> = (props: Props) => {
+  const { maxRunsCount, setMaxRunsCount } = props;
+
+  return (
+    <FormControl>
+      <Select
+        label="Max Number of Runs"
+        id="max-number-of-runs"
+        value={maxRunsCount}
+        style={{ width: 150, textAlign: 'left' }}
+        onChange={(event: any) => {
+          if (event.target.value !== null) {
+            setMaxRunsCount(Number(event.target.value));
+          }
+        }}
+      >
+        <MenuItem value={5}>5</MenuItem>
+        <MenuItem value={10}>10</MenuItem>
+        <MenuItem value={50}>50</MenuItem>
+        <MenuItem value={100}>100</MenuItem>
+        <MenuItem value={200}>200</MenuItem>
+        <MenuItem value={500}>500</MenuItem>
+        <MenuItem value={1000}>1000</MenuItem>
+      </Select>
+      <FormHelperText>Max number of runs</FormHelperText>
+    </FormControl>
+  );
+};
+export default MaxRuns;