Add widget view

front-end/src/App.js

@@ -4,6 +4,7 @@ import {BrowserRouter as Router, Route, Switch} from "react-router-dom";
 import TestDetails from "./components/TestDetails";
 import TestList from "./components/TestList";
 import NotFound from "./components/NotFound";
+import Widget from "./components/Widget";
 
 function App() {
   return (
@@ -16,6 +17,9 @@ function App() {
           <Route exact path="/:jobUuid">
             <TestList/>
           </Route>
+          <Route exact path="/:jobUuid/widget">
+            <Widget/>
+          </Route>
           <Route exact path="/:jobUuid/test/:testName">
             <TestDetails/>
           </Route>

front-end/src/components/Widget.css

@@ -0,0 +1,55 @@
+.status-success {
+    color: #549D90;
+    margin: 10px;
+}
+
+.status-failure {
+    color: #822525;
+    margin: 10px;
+}
+
+.main-container {
+    border-radius: 15px;
+    overflow: hidden;
+    margin-top: 30px
+}
+
+.section {
+    flex: 1 1 auto;
+    border-radius: 15px;
+    margin: 10px;
+}
+
+.section h5 {
+    font-size: 22px;
+    margin: 15px 0;
+}
+
+.section .status-subtext {
+    font-size: 50px;
+    margin: 25px 0;
+}
+
+.section.passed-tests hr {
+    border-color: #206E5F;
+}
+
+.section.passed-tests {
+    background-color: #258271;
+    color: #FFFFFF;
+}
+
+.section.failed-tests hr {
+    border-color: #AC4343;
+}
+
+.section.failed-tests {
+    background-color: #C65858;
+    color: #FFFFFF;
+}
+
+.topbar-text {
+    margin: 10px;
+    padding: 0;
+    font-size: 17px;
+}

front-end/src/components/Widget.js

@@ -0,0 +1,55 @@
+import React, {useEffect, useState} from "react";
+import {useParams} from "react-router-dom";
+import "./Widget.css"
+import {Box} from "@mui/material";
+
+export default function Widget() {
+    const { jobUuid } = useParams();
+    const [testResults, setTestResults] = useState({});
+
+    useEffect(() => {
+        fetch(`/${jobUuid}/test-list/`)
+            .then(x => x.json())
+            .then(x => setTestResults(x))
+            .catch(e => console.error(e));
+    }, [jobUuid]);
+
+    const passed = (testResults && testResults.totalInfo) ? testResults.totalInfo.passed : 0;
+    const failures = (testResults && testResults.totalInfo) ? testResults.totalInfo.failures : 0;
+
+    const status = <span className={failures > 0 ? "status-failure" : "status-success"}>
+        <i className="feather icon-check-circle"/>&nbsp;{failures > 0 ? failures +" Failures" : "Success"}
+    </span>
+
+    const sections = [];
+    if(failures > 0) {
+        sections.push(<div className="section failed-tests">
+            <h5>Failed</h5>
+            <hr />
+            <h3 className="status-subtext">{failures}</h3>
+        </div>)
+    }
+    if(passed > 0) {
+        sections.push(<div className="section passed-tests">
+            <h5>Passed</h5>
+            <hr />
+            <h3 className="status-subtext">{passed}</h3>
+        </div>)
+    }
+
+    if(sections.length === 0) {
+        sections.push(<div className="section stopped-containers">
+            <h5>No test results found</h5>
+        </div>)
+    }
+
+    return <Box display="flex" flexDirection="column" padding="30px">
+        <Box display="flex" flexDirection="row" justifyContent="space-between" alignItems="center">
+            <h5 className="topbar-text">Cypress Test Results</h5>
+            {status}
+        </Box>
+        <Box display="flex" className="main-container">
+            {sections}
+        </Box>
+    </Box>
+}