Fixed dashboard callout (#403)

* switched dashboard callout to modal

test-result-summary-client/package.json

@@ -28,7 +28,8 @@
     "react-nl2br": "^0.6.1",
     "react-router": "^5.2.0",
     "react-router-dom": "^5.2.0",
-    "react-table": "^6.11.5"
+    "react-table": "^6.11.5",
+    "sweetalert2": "^10.15.7"
   },
   "scripts": {
     "start": "react-app-rewired start",

test-result-summary-client/src/Dashboard/Widgets/Graph/ChartComponent/StockChart.jsx

@@ -56,7 +56,7 @@ export default class StockChart extends Component {
             <Chart zoomType="x" />
 
             <Legend />
-            <Tooltip formatter={this.formatter} useHTML style={{ pointerEvents: 'auto' }} />
+            { this.props.showTooltip && <Tooltip formatter={this.formatter} useHTML style={{ pointerEvents: 'auto' }} />}
 
             <XAxis >
                 <XAxis.Title>Time</XAxis.Title>
@@ -84,4 +84,8 @@ export default class StockChart extends Component {
             </Navigator>
         </HighchartsStockChart>
     }
+}
+
+StockChart.defaultProps = {
+    showTooltip: true,
 }

test-result-summary-client/src/Dashboard/Widgets/Graph/Dacapo.jsx

@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import Settings from '../Settings';
 import StockChart from './ChartComponent/StockChart';
-import { getStatisticValues } from './utils';
+import { getStatisticValues, handlePointClick } from './utils';
 
 const builds = ["Test_openjdk8_j9_sanity.perf_x86-64_linux",
 				"Test_openjdk11_j9_sanity.perf_x86-64_linux",
@@ -111,14 +111,17 @@ export default class Dacapo extends Component {
 				visible: key === "h2Data",
 				name: key,
 				data: series[key],
-				keys: ['x', 'y', 'additionalData', 'CI']
+				keys: ['x', 'y', 'additionalData', 'CI'],
+				events: {
+					click: (event) => handlePointClick(event)
+				}
 			});
 		}
 		this.setState({ displaySeries });
 	}
 
 	render() {
 		const { displaySeries } = this.state;
-		return <StockChart displaySeries={displaySeries} />;
+		return <StockChart showTooltip={false} displaySeries={displaySeries} />;
 	}
 }

test-result-summary-client/src/Dashboard/Widgets/Graph/utils.js

@@ -1,4 +1,5 @@
 import math from 'mathjs';
+import Swal from 'sweetalert2';
 import BenchmarkMath from '../../../PerfCompare/lib/BenchmarkMath';
 
 export const parseSha = (str, sha) => {
@@ -57,3 +58,40 @@ export const getStatisticValues = (resultsByJDKBuild, key) => {
     });
     return [data, std, mean, median];
 }
+
+export const handlePointClick = (event) => {
+    const { buildName, buildNum, javaVersion, jdkDate, testId } = event.point.additionalData[0];
+
+    const buildLinks = ` <a href="/output/test?id=${testId}">${buildName} #${buildNum}</a>`;
+    const CIstr = (typeof event.point.CI === 'undefined') ? `` : `CI = ${event.point.CI}`;
+
+    let ret = `<b>${'NAME'}:</b> ${event.y}<br/> <b>Build: </b> ${jdkDate} <pre>${javaVersion}</pre><br/><b>Link to builds:</b> ${buildLinks}<br /> ${CIstr}`;
+
+    let i = event.point.series.data.indexOf(event.point);
+    let prevPoint = i === 0 ? null : event.point.series.data[i - 1];
+    let lengthPrev = prevPoint ?
+    prevPoint.additionalData.length : 0;
+    let prevJavaVersion = prevPoint ? prevPoint.additionalData[lengthPrev - 1].javaVersion : null;
+
+    prevJavaVersion = parseSha(prevJavaVersion, 'OpenJ9');
+    javaVersion = parseSha(javaVersion, 'OpenJ9');
+
+    if (prevJavaVersion && javaVersion) {
+        let githubLink = `<a href="https://github.com/eclipse/openj9/compare/${prevJavaVersion}…${javaVersion}">Github Link </a>`;
+        ret += `<br/> <b> Compare Builds: </b>${githubLink}`;
+    }
+
+    Swal.fire({
+        html: ret,
+        showCloseButton: true,
+        showConfirmButton: false,
+        width: '50%',
+        customClass: {
+            htmlContainer: 'text-align: left !important;',
+            container: 'text-align: left !important;',
+              content: 'text-align: left !important;',
+              input: 'text-align: left !important;',
+
+        }
+    });
+}

test-result-summary-client/src/Dashboard/dashboard.css

@@ -52,4 +52,8 @@
 	text-align: center;
 	font-size: 20px;
 	flex: 1 0 0%;
+}
+
+.swal2-content { 
+    text-align: left !important; 
 }