Feature/parent data dashboard history

frontend/src/components/parentData/ParentSeries.js

@@ -1,7 +1,7 @@
 import React, { useEffect } from 'react';
 import { useParams } from 'react-router';
 import { useStateValue } from '../../contexts/state';
-import { seriesTypes } from '../../utils/parentDataTypes';
+import { buildTypes } from '../../utils/parentDataTypes';
 
 import ParentTable from './ParentTable';
 
@@ -10,15 +10,15 @@ const ParentSeries = () => {
 
     const [
         {
-            parentData: { seriesData }
+            parentData: { seriesData, buildData },
         },
-        dispatch
+        dispatch,
     ] = useStateValue();
 
     useEffect(() => {
         const url = `/data/series/${seriesId}/info?`;
 
-        const fetchData = async () => {
+        const fetchSeriesData = async () => {
             try {
                 const res = await fetch(url);
                 const json = await res.json();
@@ -28,10 +28,28 @@ const ParentSeries = () => {
                 dispatch({ type: 'setErrorState', errorState: error });
             }
         };
-        fetchData();
-    }, [seriesId, dispatch]);
 
-    return <ParentTable data={seriesData} types={seriesTypes} />;
+        fetchSeriesData();
+    }, [dispatch, seriesId]);
+
+    useEffect(() => {
+        const fetchBuildData = async () => {
+            const { last_build } = seriesData;
+            const buildUrl = `/data/series/${seriesId}/builds/${last_build}/info?`;
+            try {
+                const res = await fetch(buildUrl);
+                const json = await res.json();
+                const buildData = json.build;
+                dispatch({ type: 'setBuildData', buildData });
+            } catch (error) {
+                dispatch({ type: 'setErrorState', errorState: error });
+            }
+        };
+
+        seriesData && fetchBuildData();
+    }, [dispatch, seriesData, seriesId]);
+
+    return <ParentTable data={buildData} types={buildTypes} />;
 };
 
 export default ParentSeries;

frontend/src/components/parentData/ParentTable.js

@@ -64,7 +64,7 @@ const ParentTable = props => {
 
 ParentTable.propTypes = {
     data: PropTypes.object,
-    types: PropTypes.array.isRequired
+    types: PropTypes.array.isRequired,
 };
 
 export default ParentTable;

frontend/src/locales/en/parentData.json

@@ -0,0 +1,3 @@
+{
+    "title": "Last Build Information"
+}

frontend/src/pages/Dashboard.js

@@ -2,12 +2,17 @@
 import { useLocation } from 'react-router-dom';
 /** @jsx jsx */
 import { css, jsx } from '@emotion/core';
+import { useTranslation } from 'react-i18next';
 import SuiteInstability from '../components/graphs/SuiteInstability';
 import StatusCount from '../components/graphs/StatusCount';
 import BreadcrumbNav from '../components/BreadcrumbNav';
 import { suiteLabels, testLabels } from '../utils/graphTypes';
+import ParentSeries from '../components/parentData/ParentSeries';
+import ParentBuild from '../components/parentData/ParentBuild';
 
 const Dashboard = () => {
+    const [t] = useTranslation(['parentData']);
+
     const pathname = useLocation().pathname;
     const buildUrl = pathname.includes('build');
 
@@ -19,18 +24,40 @@ const Dashboard = () => {
             display: flex;
             flex-wrap: wrap;
         }
+
+        .parentInfo-container {
+            display: flex;
+            flex-flow: row wrap;
+            padding: 20px 0;
+
+            .series-info-container {
+                padding-bottom: 45px;
+            }
+        }
     `;
 
     return (
         <main css={dashBoardStyles}>
             <BreadcrumbNav status={status} />
-            {buildUrl && (
-                <div className="pieContainer">
-                    <StatusCount labels={suiteLabels} />{' '}
-                    <StatusCount labels={testLabels} />
+            <div>
+                <div className="parentInfo-container">
+                    {!buildUrl ? (
+                        <div className="series-info-container">
+                            <h3>{t('title')}</h3>
+                            <ParentSeries />
+                        </div>
+                    ) : (
+                        <ParentBuild />
+                    )}
                 </div>
-            )}
-            <SuiteInstability />
+                {buildUrl && (
+                    <div className="pieContainer">
+                        <StatusCount labels={suiteLabels} />{' '}
+                        <StatusCount labels={testLabels} />
+                    </div>
+                )}
+                <SuiteInstability />
+            </div>
         </main>
     );
 };

frontend/src/pages/History.js

@@ -2,18 +2,20 @@
 import React, { Fragment, useEffect } from 'react';
 /** @jsx jsx */
 import { css, jsx } from '@emotion/core';
+import { useTranslation } from 'react-i18next';
 import Filter from '../components/historyTable/Filter';
 import Table from '../components/historyTable/Table';
 import ParentSeries from '../components/parentData/ParentSeries';
 import Checkbox from '../components/Checkbox';
 import { useStateValue } from '../contexts/state';
-// import BranchFilter from '../components/BranchFilter';
 import { useParams } from 'react-router';
 import BreadcrumbNav from '../components/BreadcrumbNav';
 import Loading from '../components/Loading';
 import { useQueryParams } from '../hooks/useQuery';
 
 const History = () => {
+    const [t] = useTranslation(['parentData']);
+
     const filterStyles = css`
         position: relative;
 
@@ -29,6 +31,7 @@ const History = () => {
 
         .parentInfo-container {
             padding: 20px 0;
+            flex-direction: column;
         }
     `;
     const [
@@ -84,11 +87,10 @@ const History = () => {
     return (
         <main id="history" css={filterStyles}>
             <BreadcrumbNav status={'series'} />
-            {!loadingState && (
-                <div className="parentInfo-container">
-                    <ParentSeries />
-                </div>
-            )}
+            <div className="parentInfo-container">
+                <h3>{t('title')}</h3>
+                <ParentSeries />
+            </div>
             <div className="filter-container">
                 <Filter />
                 <Checkbox />

frontend/src/utils/i118n.js

@@ -3,20 +3,22 @@ import { initReactI18next } from 'react-i18next';
 import frontpage from '../locales/en/frontpage.json';
 import mainnav from '../locales/en/mainnav.json';
 import team from '../locales/en/team.json';
+import parentData from '../locales/en/parentData.json';
 
 const resources = {
     en: {
         frontpage,
         mainnav,
-        team
-    }
+        team,
+        parentData,
+    },
 };
 
 i18n.use(initReactI18next).init({
     resources,
     lng: 'en',
     debug: false,
     interpolation: {
-        escapeValue: false
-    }
+        escapeValue: false,
+    },
 });

frontend/src/utils/parentDataTypes.js

@@ -1,5 +1,4 @@
-export const seriesTypes = ['team', 'name', 'builds'];
-export const buildTypes = [
+export const buildTypes = [
     'team',
     'name',
     'build_number',