Feature/suite instability

.gitignore

@@ -13,4 +13,6 @@ test/*
 .vscode/
 robot_test/logs/
 *.env
-*.pyc
+*.pyc
+
+xeno

frontend/.prettierrc

@@ -1,4 +1,5 @@
 {
     "singleQuote": true,
-    "semi": true
+    "semi": true,
+    "trailingComma": "es5"
 }

frontend/package.json

@@ -4,17 +4,22 @@
     "private": true,
     "dependencies": {
         "@emotion/core": "^10.0.21",
+        "apexcharts": "^3.19.2",
         "i18next": "^19.4.4",
         "normalize.css": "^8.0.1",
         "prop-types": "^15.7.2",
         "ramda": "^0.27.0",
-        "react": "^16.10.2",
+        "react": "^16.13.1",
+        "react-apexcharts": "^1.3.7",
         "react-dom": "^16.10.2",
         "react-fontawesome": "^1.7.1",
         "react-i18next": "^11.4.0",
         "react-router": "^5.1.2",
         "react-router-dom": "^5.1.2",
-        "react-scripts": "^3.3.0"
+        "react-scripts": "^3.3.0",
+        "react-vega": "^7.3.0",
+        "vega": "^5.13.0",
+        "vega-lite": "^4.13.0"
     },
     "devDependencies": {
         "babel-eslint": "^10.0.3",

frontend/src/components/Card.js

@@ -9,7 +9,7 @@ const Card = ({ team, numberOfSeries }) => {
     let history = useHistory();
 
     const Mongolia = css`
-        background-color: var(--powder-white);
+        background-color: var(--nero-white);
         box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 4px,
             rgba(0, 0, 0, 0.23) 0px 3px 4px;
         margin: 10px;

frontend/src/components/SelectedTeam.js

@@ -14,7 +14,7 @@ const SelectedTeam = ({ selectedTeam }) => {
     const [t] = useTranslation(['team']);
 
     const cardStyles = css`
-        background-color: var(--powder-white);
+        background-color: var(--nero-white);
         box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 4px,
             rgba(0, 0, 0, 0.23) 0px 3px 4px;
         margin: 10px;
@@ -35,7 +35,7 @@ const SelectedTeam = ({ selectedTeam }) => {
             margin-top: 0;
         }
         .cardInfoContainer:hover {
-            background-color: var(--mithril-grey);
+            background-color: var(--hermanni-grey);
         }
 
         .cardValue {
@@ -55,7 +55,7 @@ const SelectedTeam = ({ selectedTeam }) => {
     const flexContainer = {
         display: 'flex',
         flexWrap: 'wrap',
-        paddingTop: '20px'
+        paddingTop: '20px',
     };
 
     const TeamCard = ({ data }) => {
@@ -66,7 +66,7 @@ const SelectedTeam = ({ selectedTeam }) => {
             last_build,
             last_build_id,
             last_started,
-            last_status
+            last_status,
         } = data;
 
         const LastStarted = last_started.slice(0, 16);
@@ -143,8 +143,8 @@ SelectedTeam.propTypes = {
         all_builds: PropTypes.object,
         name: PropTypes.string,
         series: PropTypes.array,
-        series_count: PropTypes.number
-    })
+        series_count: PropTypes.number,
+    }),
 };
 
 export default SelectedTeam;

frontend/src/components/graphs/StatusCount.js

@@ -0,0 +1,74 @@
+import React, { useEffect } from 'react';
+import Chart from 'react-apexcharts';
+import { useParams } from 'react-router';
+import { pluck } from 'ramda';
+import { useStateValue } from '../../contexts/state';
+import { colorTypes } from '../../utils/colorTypes';
+
+const StatusCount = ({ labels }) => {
+    const { seriesId, buildId } = useParams();
+
+    const [{ statusCount }, dispatch] = useStateValue();
+
+    useEffect(() => {
+        const url = `/data/series/${seriesId}/status_counts/?start_from=${buildId}&builds=1`;
+
+        const fetchData = async () => {
+            dispatch({ type: 'setLoadingState', loadingState: true });
+            try {
+                const res = await fetch(url);
+                const json = await res.json();
+                dispatch({ type: 'setLoadingState', loadingState: false });
+                const statusCount = json.status_counts;
+                dispatch({ type: 'setStatusCount', statusCount });
+            } catch (error) {
+                dispatch({ type: 'setErrorState', errorState: error });
+            }
+        };
+        fetchData();
+    }, [buildId, dispatch, seriesId]);
+
+    const data =
+        statusCount && labels.map(label => pluck(label, statusCount)).flat();
+
+    const series = data;
+    const options = {
+        labels,
+        colors: [
+            colorTypes['semolina red'],
+            colorTypes['pirlo blue'],
+            colorTypes['titan green'],
+            colorTypes['kumpula yellow'],
+        ],
+        plotOptions: {
+            pie: {
+                expandOnClick: true,
+                donut: {
+                    labels: {
+                        show: true,
+                        name: {
+                            show: true,
+                        },
+                        total: {
+                            show: true,
+                        },
+                    },
+                },
+            },
+        },
+    };
+    return (
+        <div>
+            {statusCount && (
+                <Chart
+                    options={options}
+                    series={series}
+                    type="donut"
+                    width="380"
+                />
+            )}
+        </div>
+    );
+};
+
+export default StatusCount;