Merge pull request #24 from delta-reporter/tests-runs-views

Delta View - Pyramid Rose chart view for test launches

azure-pipelines.yml

@@ -1,7 +1,12 @@
-# Starter pipeline
-# Start with a minimal pipeline that you can customize to build and deploy your code.
-# Add steps that build, run tests, deploy, and more:
-# https://aka.ms/yaml
+name: $[ variables['branchName'] ]
+
+# Using conditions to set the variable value. 
+# I guess if both conditions return true the last will be used.
+variables:
+  ${{ if startsWith(variables['Build.SourceBranch'], 'refs/heads/') }}:
+    branchName: $[ replace(variables['Build.SourceBranch'], 'refs/heads/', '') ]
+  ${{ if startsWith(variables['Build.SourceBranch'], 'refs/pull/') }}:
+    branchName: $[ replace(variables['System.PullRequest.SourceBranch'], 'refs/heads/', '') ]
 
 trigger:
 - master
@@ -43,6 +48,6 @@ steps:
 
 - script: |
     cd tests/end_to_end
-    ARGOS_COMMIT=$(Build.SourceVersion) ARGOS_BRANCH=$(Build.SourceBranchName) \
+    ARGOS_COMMIT=$(Build.SourceVersion) ARGOS_BRANCH=$(branchName) \
     ./node_modules/.bin/argos upload screenshots/reference --token $(ARGOS_TOKEN) || true
   displayName: 'Delta Frontend - Screenshots upload to Argos'

components/templates/TestExpanded.tsx

@@ -80,6 +80,7 @@ const testResolutions = [
   "Product defect",
   "Test needs to be updated",
   "To investigate",
+  "Environment issue",
 ]
 
 interface TestProps {

package.json

@@ -25,8 +25,11 @@
     "@material-ui/icons": "^4.9.1",
     "@material-ui/lab": "^4.0.0-alpha.53",
     "@material-ui/styles": "^4.9.14",
+    "@types/node": "^14.0.14",
     "@zeit/next-css": "^1.0.1",
     "compression": "^1.7.4",
+    "echarts": "^4.8.0",
+    "echarts-for-react": "^2.0.16",
     "express": "^4.17.1",
     "immer": "^4.0.2",
     "isomorphic-unfetch": "^3.0.0",

pages/launches/[launchesByProjectId].tsx

@@ -23,6 +23,10 @@ import {
 import Pagination from "../../components/templates/Pagination"
 import StopIcon from "@material-ui/icons/Stop"
 import CloseIcon from "@material-ui/icons/Close"
+import FormControlLabel from '@material-ui/core/FormControlLabel';
+import Switch from '@material-ui/core/Switch';
+import Router from 'next/router'
+import ReactEcharts from "echarts-for-react"
 
 const useStyles = makeStyles(theme => ({
   root: {},
@@ -45,11 +49,83 @@ type Props = {
 function Launches(props: Props) {
   const classes = useStyles(props)
 
+  let pyramidData = []
+
+  let roseData = []
+
+  const deltaViewStyle = {height: "190px", width: "800px"}
+
+  // The param echarts could be pass into this function as well
+  let onChartClick = (param) => {
+    if(param.seriesType === "funnel"){
+      Router.push('/tests/' + param.data.test_run_id)
+    } else if (param.seriesType === "pie") {
+      Router.push('/testruns/' + param.data.launch_id)
+    }
+ }
+
+  let onChartEvents = {
+    'click': onChartClick
+  }
+
+  const option = (pyramid, rose) => ({
+    tooltip: {
+      trigger: "item",
+      formatter: "{a} <br/>{b} : {c}",
+    },
+    toolbox: {
+      show: false
+    },
+    series: [
+      {
+        name: "Total tests",
+        type: "funnel",
+        top: "10%",
+        width: "40%",
+        height: "85%",
+        minSize: "0%",
+        maxSize: "80%",
+        sort: "ascending",
+        gap: 1,
+        label: {
+          show: true,
+          position: "inside",
+        },
+        labelLine: {
+          length: 2,
+          lineStyle: {
+            width: 1,
+            type: "solid",
+          },
+        },
+        itemStyle: {
+          borderColor: "#fff",
+          borderWidth: 1,
+        },
+        emphasis: {
+          label: {
+            fontSize: 20,
+          },
+        },
+        data: pyramid,
+      },
+      {
+        name: 'Tests by status',
+        type: 'pie',
+        radius: [10, 80],
+        center: ['80%', '50%'],
+        roseType: 'area',
+        data: rose
+    }
+    ],
+  })
+
   const [launchesList, setLaunchesList] = useState([])
   const [currentPage, setCurrentPage] = useState(1)
   const [launchesPerPage] = useState(20)
   const indexOfLastItem = currentPage * launchesPerPage
   const indexOfFirstItem = indexOfLastItem - launchesPerPage
+  // pagination (first 20)
   const currentLaunches = props.launches.slice(
     indexOfFirstItem,
     indexOfLastItem
@@ -158,7 +234,78 @@ function Launches(props: Props) {
     return statusIcon
   }
 
+  function insertChartData(key, value, name, item_id) {
+    if (key == 'pyramid'){
+      pyramidData.push({value: value, name: name, test_run_id: item_id})
+    } else if (key == 'rose'){
+      let testTypeIndex = roseData.findIndex(arr => arr.name === name)
+      if (testTypeIndex >= 0) {
+        let newValue = roseData[testTypeIndex].value + value;
+        roseData[testTypeIndex] = {value: newValue, name: name, launch_id: item_id}
+      } else {
+        roseData.push({value: value, name: name, launch_id: item_id})
+      }
+    }
+    return ""
+  }
+
+  function clearChartData() {
+    pyramidData = []
+    roseData = []
+    return ""
+  }
+
+  function testRunButtons(test_run_stats: any) {
+    return test_run_stats.map(testRun => (
+      <Button
+        key={testRun.test_run_id}
+        variant="contained"
+        href={`/tests/${testRun.test_run_id}`}
+        style={{
+          fontSize: "12px",
+          paddingLeft: "8px",
+          paddingRight: "3px",
+          paddingBottom: "0px",
+          paddingTop: "0px",
+          marginLeft: "5px",
+        }}
+      >
+        {testRun.test_type}{" "}
+        {testRun.tests_total ===
+        testRun.tests_passed + testRun.tests_skipped ? (
+          <div> {showStatusIcon("Successful")} </div>
+        ) : (
+          <div>{showStatusIcon("Failed")} </div>
+        )}{" "}
+      </Button>
+    ))
+  }
+
+  function testRunDelta(test_run_stats: any, launch_id: number) {
+    test_run_stats.map(
+      tr_data => (
+        insertChartData("pyramid", tr_data.tests_total, tr_data.test_type, tr_data.test_run_id),
+        insertChartData("rose", tr_data.tests_failed, "Failed", launch_id),
+        insertChartData("rose", tr_data.tests_passed, "Passed", launch_id),
+        insertChartData("rose", tr_data.tests_running, "Running", launch_id),
+        insertChartData("rose", tr_data.tests_incomplete, "Incomplete", launch_id),
+        insertChartData("rose", tr_data.tests_skipped, "Skipped", launch_id)
+      )
+    )
+    return <ReactEcharts option={option(pyramidData, roseData)} style={deltaViewStyle} onEvents={onChartEvents}/>
+
+  }
+
+  const [switchState, setSwitchState] = React.useState({
+    deltaView: false
+  });
+
+  const handleSwitchChange = (event) => {
+    setSwitchState({ ...switchState, [event.target.name]: event.target.checked });
+  };
+
   return (
+
     <BasePage className={classes.root}>
       <title>Δ | Launches</title>
       <Breadcrumbs aria-label="breadcrumb">
@@ -171,22 +318,39 @@ function Launches(props: Props) {
         <Grid container spacing={3}>
           <Grid item xs={12}>
             <Paper className={classes.paper}>
-              <Typography
-                variant="h6"
-                color="secondary"
-                style={{ fontWeight: 400, margin: "5px" }}
-              >
-                Launches for{" "}
-                <Link
-                  style={{ color: "#605959" }}
-                  underline="none"
+            <Grid container>
+              <Grid item xs={10}>
+                <Typography
+                  variant="h6"
                   color="secondary"
+                  style={{ fontWeight: 400, margin: "5px" }}
                 >
-                  {" "}
-                  {props.launches[0].project}
-                </Link>{" "}
-                project
-              </Typography>
+                  Launches for{" "}
+                  <Link
+                    style={{ color: "#605959" }}
+                    underline="none"
+                    color="secondary"
+                  >
+                    {" "}
+                    {props.launches[0].project}
+                  </Link>{" "}
+                  project
+                </Typography>
+              </Grid>
+              <Grid item xs={2}>
+                <FormControlLabel
+                  control={
+                    <Switch
+                      checked={switchState.deltaView}
+                      onChange={handleSwitchChange}
+                      name="deltaView"
+                      color="primary"
+                    />
+                  }
+                  label="Δ View"
+                />
+              </Grid>
+              </Grid>
               {props.launches[0] ? ( // checking if props exist
                 <div>
                   <Table size="small">
@@ -208,30 +372,13 @@ function Launches(props: Props) {
                           </TableCell>
                           <TableCell>{launch.name}</TableCell>
                           <TableCell>
-                            {launch.test_run_stats.map(testRun => (
-                              <Button
-                                key={testRun.test_run_id}
-                                variant="contained"
-                                href={`/tests/${testRun.test_run_id}`}
-                                style={{
-                                  fontSize: "12px",
-                                  paddingLeft: "8px",
-                                  paddingRight: "3px",
-                                  paddingBottom: "0px",
-                                  paddingTop: "0px",
-                                  marginLeft: "5px",
-                                }}
-                              >
-                                {testRun.test_type}{" "}
-                                {testRun.tests_total ===
-                                testRun.tests_passed + testRun.tests_skipped ? (
-                                  <div> {showStatusIcon("Successful")} </div>
-                                ) : (
-                                  <div>{showStatusIcon("Failed")} </div>
-                                )}{" "}
-                              </Button>
-                            ))}
+                            {!switchState.deltaView? (
+                              testRunButtons(launch.test_run_stats)
+                            ) : (
+                              testRunDelta(launch.test_run_stats, launch.launch_id)
+                            )}
                           </TableCell>
+                              {clearChartData()}
                         </TableRow>
                       ))}
                     </TableBody>{" "}