From d42fb6cbf4783ecd48883356fe4a2d9a0c6d5647 Mon Sep 17 00:00:00 2001 From: lauri_koskela Date: Wed, 17 Jun 2020 09:34:41 +0300 Subject: [PATCH 01/22] local-stuff --- end_to_end_tests/robot_tests/__init__.robot | 2 +- .../history_page_tests/test_buttons.robot | 10 +- end_to_end_tests/run-e2e-all-scopes.sh | 161 ++++++++++++++++++ frontend/Dockerfile | 2 +- frontend/src/App.js | 139 +++++++++++++++ frontend/src/components/Card.js | 25 +++ .../src/components/ComparisonTable/Body.js | 101 +++++++++++ .../ComparisonTable/ComparisonCheckbox.js | 75 ++++++++ .../ComparisonTable/Metadata3Table.js | 66 +++++++ .../ComparisonTable/ParentBuildComparison.js | 57 +++++++ .../components/ComparisonTable/ParentTable.js | 75 ++++++++ .../src/components/ComparisonTable/Row.js | 77 +++++++++ .../src/components/ComparisonTable/Status.js | 9 + .../src/components/ComparisonTable/Table.js | 64 +++++++ frontend/src/components/SelectedTeam.js | 116 +++++++++++++ frontend/src/contexts/reducer.js | 24 ++- frontend/src/contexts/state.js | 7 + frontend/src/pages/Comparison.js | 161 ++++++++++++++++++ frontend/src/pages/Frontpage.js | 94 ++++++++++ frontend/src/utils/parentDataTypes.js | 8 + 20 files changed, 1265 insertions(+), 8 deletions(-) create mode 100644 end_to_end_tests/run-e2e-all-scopes.sh create mode 100644 frontend/src/App.js create mode 100644 frontend/src/components/Card.js create mode 100644 frontend/src/components/ComparisonTable/Body.js create mode 100644 frontend/src/components/ComparisonTable/ComparisonCheckbox.js create mode 100644 frontend/src/components/ComparisonTable/Metadata3Table.js create mode 100644 frontend/src/components/ComparisonTable/ParentBuildComparison.js create mode 100644 frontend/src/components/ComparisonTable/ParentTable.js create mode 100644 frontend/src/components/ComparisonTable/Row.js create mode 100644 frontend/src/components/ComparisonTable/Status.js create mode 100644 frontend/src/components/ComparisonTable/Table.js create mode 100644 frontend/src/components/SelectedTeam.js create mode 100644 frontend/src/pages/Comparison.js create mode 100644 frontend/src/pages/Frontpage.js diff --git a/end_to_end_tests/robot_tests/__init__.robot b/end_to_end_tests/robot_tests/__init__.robot index 44a677e0..2a7abaef 100644 --- a/end_to_end_tests/robot_tests/__init__.robot +++ b/end_to_end_tests/robot_tests/__init__.robot @@ -1,5 +1,5 @@ *** Settings *** -Resource ${EXECDIR}/resources/resource.robot +Resource ${EXECDIR}${/}resources${/}resource.robot Suite Setup Open Browser To Epimetheus Landing Page ${BROWSER} ${remote_url} Suite Teardown Custom Teardown diff --git a/end_to_end_tests/robot_tests/frontend/history_page_tests/test_buttons.robot b/end_to_end_tests/robot_tests/frontend/history_page_tests/test_buttons.robot index 0a978d06..d318f8bf 100644 --- a/end_to_end_tests/robot_tests/frontend/history_page_tests/test_buttons.robot +++ b/end_to_end_tests/robot_tests/frontend/history_page_tests/test_buttons.robot @@ -6,11 +6,11 @@ Resource ./history_keywords.robot Test Build Amount Dropdown Open history page of series 3 - Select From Dropdown ${history_build_selector_5} + Select From Dropdown ${history_build_selector_5} Table should be limited to number=5 - Select From Dropdown ${history_build_selector_10} + Select From Dropdown ${history_build_selector_10} Table should be limited to number=10 - Select From Dropdown ${history_build_selector_30} + Select From Dropdown ${history_build_selector_30} Table should be limited to number=30 Test Offset Functionality @@ -69,7 +69,7 @@ Most Recent Build Number should be [Arguments] ${build} Wait Until Element Is Enabled ${series_history_most_recent} ${temp_most_recent}= Get Text ${series_history_most_recent} - + Should be equal as Strings ${build} ${temp_most_recent} Offset should be @@ -86,5 +86,5 @@ Check offset url Click Right Button Click Element ${offset_right} Click Left Button - Click Element ${offset_left} + Click Element ${offset_left} diff --git a/end_to_end_tests/run-e2e-all-scopes.sh b/end_to_end_tests/run-e2e-all-scopes.sh new file mode 100644 index 00000000..696d5d38 --- /dev/null +++ b/end_to_end_tests/run-e2e-all-scopes.sh @@ -0,0 +1,161 @@ +#!/bin/sh + +python -m robot --outputdir ./logs/ \ + --variablefile variables.py \ + --metadata "version:0.3.0" \ + --metadata "cipipelineid:$cipipelineid" \ + --metadata "series:$series" \ + --metadata "branch:$branch" \ + --metadata "commitsha:$commitsha" \ + --metadata "changedfiles:$changedfiles" \ + --metadata "joburl:$joburl" \ + --metadata "cijobid:$cijobid" \ + --metadata "username:$username" \ + --metadata "environment:$environment" \ + --metadata "testframework:$testframework" \ + --include Backend \ + ./robot_tests +BACKEND=$? + +#Testarchiver data storing can be added here, +#Important to exit with the right exit value from the test execution, +#not with the exitvalue from data storing. + +DATABASE=github_test +HOST=testarchiverdb.postgres.database.azure.com +USER=testarchiver@testarchiverdb +PASSWORD=tallentaj123! + + + +echo "---------------------------------------------" +echo " Archiving Backend reports from ./logs -directory" +echo "---------------------------------------------" +find ./logs -name \*.xml -type f -print0 | xargs -0 -n1 testarchiver --dbengine postgresql --database "$DATABASE" --host "$HOST" \ + --user "$USER" --pw "$PASSWORD" \ + --team Epimetheus --series ci_backend#${BUILD_NUMBER} --format robotframework + + + +python -m robot --outputdir ./logs/ \ + --variablefile variables.py \ + --metadata "version:0.3.0" \ + --metadata "cipipelineid:$cipipelineid" \ + --metadata "series:$series" \ + --metadata "branch:$branch" \ + --metadata "commitsha:$commitsha" \ + --metadata "joburl:$joburl" \ + --metadata "cijobid:$cijobid" \ + --metadata "username:$username" \ + --metadata "environment:$environment" \ + --metadata "testframework:$testframework" \ + --include History \ + ./robot_tests +History=$? + +echo "---------------------------------------------" +echo " Archiving History Page reports from ./logs -directory" +echo "---------------------------------------------" +find ./logs -name \*.xml -type f -print0 | xargs -0 -n1 testarchiver --dbengine postgresql --database "$DATABASE" --host "$HOST" \ + --user "$USER" --pw "$PASSWORD" \ + --team Epimetheus --series ci_history_page#${BUILD_NUMBER} --format robotframework + +python -m robot --outputdir ./logs/ \ + --variablefile variables.py \ + --metadata "version:0.3.0" \ + --metadata "cipipelineid:$cipipelineid" \ + --metadata "series:$series" \ + --metadata "branch:$branch" \ + --metadata "commitsha:$commitsha" \ + --metadata "joburl:$joburl" \ + --metadata "cijobid:$cijobid" \ + --metadata "username:$username" \ + --metadata "environment:$environment" \ + --metadata "testframework:$testframework" \ + --include NavBar \ + ./robot_tests + +NAVBAR=$? + +echo "---------------------------------------------" +echo " Archiving Navigation Bar reports from ./logs -directory" +echo "---------------------------------------------" +find ./logs -name \*.xml -type f -print0 | xargs -0 -n1 testarchiver --dbengine postgresql --database "$DATABASE" --host "$HOST" \ + --user "$USER" --pw "$PASSWORD" \ + --team Epimetheus --series ci_navigation_bar#${BUILD_NUMBER} --format robotframework + +python -m robot --outputdir ./logs/ \ + --variablefile variables.py \ + --metadata "version:0.3.0" \ + --metadata "cipipelineid:$cipipelineid" \ + --metadata "series:$series" \ + --metadata "branch:$branch" \ + --metadata "commitsha:$commitsha" \ + --metadata "joburl:$joburl" \ + --metadata "cijobid:$cijobid" \ + --metadata "username:$username" \ + --metadata "environment:$environment" \ + --metadata "testframework:$testframework" \ + --include Team \ + ./robot_tests + +TEAM=$? + +echo "---------------------------------------------" +echo " Archiving Team Page reports from ./logs -directory" +echo "---------------------------------------------" +find ./logs -name \*.xml -type f -print0 | xargs -0 -n1 testarchiver --dbengine postgresql --database "$DATABASE" --host "$HOST" \ + --user "$USER" --pw "$PASSWORD" \ + --team Epimetheus --series ci_team_page#${BUILD_NUMBER} --format robotframework + +python -m robot --outputdir ./logs/ \ + --variablefile variables.py \ + --metadata "version:0.3.0" \ + --metadata "cipipelineid:$cipipelineid" \ + --metadata "series:$series" \ + --metadata "branch:$branch" \ + --metadata "commitsha:$commitsha" \ + --metadata "joburl:$joburl" \ + --metadata "cijobid:$cijobid" \ + --metadata "username:$username" \ + --metadata "environment:$environment" \ + --metadata "testframework:$testframework" \ + --include Series \ + ./robot_tests + +SERIES=$? + +echo "---------------------------------------------" +echo " Archiving Series Page reports from ./logs -directory" +echo "---------------------------------------------" +find ./logs -name \*.xml -type f -print0 | xargs -0 -n1 testarchiver --dbengine postgresql --database "$DATABASE" --host "$HOST" \ + --user "$USER" --pw "$PASSWORD" \ + --team Epimetheus --series ci_series_page#${BUILD_NUMBER} --format robotframework + + +python -m robot --outputdir ./logs/ \ + --variablefile variables.py \ + --metadata "version:0.3.0" \ + --metadata "cipipelineid:$cipipelineid" \ + --metadata "series:$series" \ + --metadata "branch:$branch" \ + --metadata "commitsha:$commitsha" \ + --metadata "joburl:$joburl" \ + --metadata "cijobid:$cijobid" \ + --metadata "username:$username" \ + --metadata "environment:$environment" \ + --metadata "testframework:$testframework" \ + --include Build \ + ./robot_tests + +BUILD=$? + +echo "---------------------------------------------" +echo " Archiving Build Page reports from ./logs -directory" +echo "---------------------------------------------" +find ./logs -name \*.xml -type f -print0 | xargs -0 -n1 testarchiver --dbengine postgresql --database "$DATABASE" --host "$HOST" \ + --user "$USER" --pw "$PASSWORD" \ + --team Epimetheus --series ci_build_page#${BUILD_NUMBER} --format robotframework + +EXITVAL=$((SERIES+TEAM+NAVBAR+HISTORY+BACKEND+BUILD)) +exit $EXITVAL diff --git a/frontend/Dockerfile b/frontend/Dockerfile index d3f163c2..4c47272f 100644 --- a/frontend/Dockerfile +++ b/frontend/Dockerfile @@ -5,7 +5,7 @@ COPY package*.json ./ RUN npm install COPY . . ENV REACT_APP_SERVER_URL=backend-server - +ENV REACT_APP_GITHUB_SHA=$GITHUB_SHA CMD [ "npm", "start" ] EXPOSE 3000 \ No newline at end of file diff --git a/frontend/src/App.js b/frontend/src/App.js new file mode 100644 index 00000000..71e617a7 --- /dev/null +++ b/frontend/src/App.js @@ -0,0 +1,139 @@ +// eslint-disable-next-line +import React, { useState, useEffect, Suspense } from 'react'; +/** @jsx jsx */ +import { css, jsx } from '@emotion/core'; +import { BrowserRouter as Router, Switch, Route } from 'react-router-dom'; +import theme from './styles/theme'; +import ThemeContext from './contexts/themeContext'; +import MainContent from './components/MainContent'; +import MainNav from './components/MainNav'; +import History from './pages/History'; +import Dashboard from './pages/Dashboard'; +import Build from './pages/Build'; +import Frontpage from './pages/Frontpage'; +import Team from './pages/Team'; +import Suite from './pages/Suite'; +import Comparison from './pages/Comparison' +import { useStateValue } from './contexts/state'; +import './utils/i118n'; + +import 'normalize.css'; +import './index.css'; + +const App = () => { + // eslint-disable-next-line + const [{ selectedBranchState, amountOfBuilds }, dispatch] = useStateValue(); + useEffect(() => { + const fetchData = async () => { + dispatch({ type: 'setLoadingState', loadingState: true }); + try { + const res = await fetch(`/data/series/`, {}); + const json = await res.json(); + dispatch({ type: 'setLoadingState', loadingState: false }); + dispatch({ + type: 'setBranches', + branches: json + }); + } catch (error) { + // console.log(error); + } + }; + fetchData(); + }, [dispatch]); + + const appStyles = css` + display: flex; + min-height: 100vh; + width: 100%; + ${theme.testTheme.container} .login-btn { + padding: 10px; + margin-bottom: 20px; + } + a { + color: ${theme.testTheme.linkColor}; + } + a:active, + a:hover { + color: ${theme.testTheme.linkColor}; + } + a.skip-main { + left: -999px; + position: absolute; + top: auto; + width: 1px; + height: 1px; + overflow: hidden; + z-index: -999; + } + a.skip-main:focus, + a.skip-main:active { + background-color: #fff; + left: auto; + top: auto; + width: 30%; + height: auto; + overflow: auto; + margin: 10px 35%; + padding: 5px; + border: 1px solid black; + text-align: center; + z-index: 999; + } + , + select:focus, + input:focus { + outline: 1px solid ${theme.testTheme.linkColor}; + } + `; + + return ( + +
+ + + + Skip to main content + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + ); +}; + +export default App; diff --git a/frontend/src/components/Card.js b/frontend/src/components/Card.js new file mode 100644 index 00000000..435c0e6a --- /dev/null +++ b/frontend/src/components/Card.js @@ -0,0 +1,25 @@ +import React from 'react'; +import { useHistory } from 'react-router-dom'; +import theme from '../styles/theme'; +import { useTranslation } from 'react-i18next'; + +const Card = ({ team, numberOfSeries }) => { + const [t] = useTranslation(['team']); + let history = useHistory(); + + return ( +
history.push(`/team/${team}`)} + role={'presentation'} + id={team + "_card"} + > +

{team}

+
+ {t('series')}: {numberOfSeries} +
+
+ ); +}; + +export default Card; diff --git a/frontend/src/components/ComparisonTable/Body.js b/frontend/src/components/ComparisonTable/Body.js new file mode 100644 index 00000000..24ed0d36 --- /dev/null +++ b/frontend/src/components/ComparisonTable/Body.js @@ -0,0 +1,101 @@ +// eslint-disable-next-line +import React from 'react'; +import Row from './Row'; +import { useStateValue } from '../../contexts/state'; +import { useParams } from 'react-router'; + +const Body = ({ id }) => { + const [ + { + comparedDataState, + compareFilterMatch, + compareFilterMismatch + } + ] = useStateValue(); + let { buildId, buildId2 } = useParams(); + + // Do we want last-run page filters to work on suite-level (false) + // or test-level (true)? + const SUITE_FILTER_NESTED = true; + + // Get result for this specific run , as well as parse the full name of a test case and the result of the test case. + + console.log(comparedDataState) + const firstBuildByBuildNumber = comparedDataState[0].filter(({ test_cases }) => { + return test_cases.some(({ builds }) => { + return builds.some( + ({ build_number }) => build_number === Number(buildId) + ); + }); + }).flatMap(x => x.test_cases).map(test => { + return {'full_name': test.full_name, 'status1': test.builds[0].test_status, 'status2': ''} + }); + //Done twice since 2 builds + const secondBuildByBuildNumber = comparedDataState[1].filter(({ test_cases }) => { + return test_cases.some(({ builds }) => { + return builds.some( + ({ build_number }) => build_number === Number(buildId2) + ); + }); + }).flatMap(x => x.test_cases).map(test => { + return {'full_name': test.full_name, 'status1': '', 'status2': test.builds[0].test_status} + }); + + + + //We create an array of matching test cases + + const matching_array = [] + secondBuildByBuildNumber.forEach(test_case2 => { + firstBuildByBuildNumber.forEach(test_case1=>{ + if(test_case1.full_name === test_case2.full_name){ + matching_array.push({'full_name': test_case1.full_name, 'status1': test_case1.status1, 'status2': test_case2.status2} ); + } + }) + }) + + const second_not_matching = secondBuildByBuildNumber.filter(test_case =>{ + return !(matching_array.some(matcher => { + return matcher.full_name === test_case.full_name + })) + }); + + const first_not_matching = firstBuildByBuildNumber.filter(test_case =>{ + return !(matching_array.some((matcher) => { + return matcher.full_name === test_case.full_name + })) + }); + + console.log(matching_array) + console.log(second_not_matching) + console.log(first_not_matching) + + //We now have 3 arrays, one with matching elements and 2 with unmatching elements + let combined_json = [] + if(!compareFilterMatch.isChecked && !compareFilterMismatch.isChecked){ + combined_json = first_not_matching.concat(matching_array, second_not_matching) + }else if(compareFilterMatch.isChecked && !compareFilterMismatch.isChecked){ + combined_json = first_not_matching.concat(second_not_matching) + }else if(!compareFilterMatch.isChecked && compareFilterMismatch.isChecked){ + combined_json = matching_array + } + + console.log(combined_json) + + // + return combined_json.map( + ({ full_name, status1, status2 }, i) => { + return ( + + ); + } + ); +}; + +export default Body; diff --git a/frontend/src/components/ComparisonTable/ComparisonCheckbox.js b/frontend/src/components/ComparisonTable/ComparisonCheckbox.js new file mode 100644 index 00000000..234d65b2 --- /dev/null +++ b/frontend/src/components/ComparisonTable/ComparisonCheckbox.js @@ -0,0 +1,75 @@ +// eslint-disable-next-line +import React, { useState } from 'react'; +/** @jsx jsx */ +import { css, jsx } from '@emotion/core'; +import { useStateValue } from '../../contexts/state'; + +const Checkbox = () => { + // eslint-disable-next-line + const [{ compareFilterMatch, compareFilterMismatch }, dispatch] = useStateValue(); + const [mismatchFilter, setMismatchFilter] = useState(compareFilterMatch.isChecked); + const [matchFilter, setMatchFilter] = useState(compareFilterMismatch.isChecked); + + const filterStyles = css` + padding: 20px 0 40px; + label { + margin-right: 20px; + display: block; + float: left; + input { + margin-left: 8px; + position: relative; + top: -2.5px; + display: inline-block; + transform: scale(1.2); + } + } + `; + + const handleMatchFilterChange = e => { + dispatch({ + type: 'setCompareMatchFilter', + filterType: matchFilter ? '' : e.target.value, + isChecked: !matchFilter + }); + + setMatchFilter(!matchFilter); + }; + + const handleMismatchFilterChange = e => { + dispatch({ + type: 'setCompareMismatchFilter', + filterType: mismatchFilter ? '' : e.target.value, + isChecked: !mismatchFilter + }); + + setMismatchFilter(!mismatchFilter); + }; + + return ( +
+ + +
+ ); +}; + +export default Checkbox; diff --git a/frontend/src/components/ComparisonTable/Metadata3Table.js b/frontend/src/components/ComparisonTable/Metadata3Table.js new file mode 100644 index 00000000..45de6ea1 --- /dev/null +++ b/frontend/src/components/ComparisonTable/Metadata3Table.js @@ -0,0 +1,66 @@ +// eslint-disable-next-line +import React, { useContext } from 'react'; +/** @jsx jsx */ +import { css, jsx } from '@emotion/core'; +import ThemeContext from '../../contexts/themeContext'; +import { useStateValue } from '../../contexts/state'; + +const Metadata3Table = () => { + const [ + { + metadataState, + parentData: {buildData} , + } + ] = useStateValue(); + const theme = useContext(ThemeContext); + + const tableStyles = css` + ${theme.baseTableStyle} + overflow: auto; + margin-bottom: 10px; + margin-top: 20px; + `; + + const metadata = metadataState.metadata + ? metadataState.metadata.filter( + ({ suite_id }) => suite_id === metadataState.metadata[0].suite_id + ) + : null; + + console.log(buildData) + return ( +
+ + + + + + + + + + {metadata !== null && + metadata.map(({ metadata_name, metadata_value, metadata2_value }, index) => { + const value = + metadata_value.length > 200 + ? `${metadata_value.substring(0, 200)}...` + : metadata_value; + const value2= + metadata2_value.length > 200 + ? `${metadata2_value.substring(0, 200)}...` + : metadata2_value; + return ( + + + + + + ); + })} + +
Metadata{buildData.name}{buildData.name2}
{metadata_name}{value}{value2}
+
+ ); +}; + +export default Metadata3Table; \ No newline at end of file diff --git a/frontend/src/components/ComparisonTable/ParentBuildComparison.js b/frontend/src/components/ComparisonTable/ParentBuildComparison.js new file mode 100644 index 00000000..774fd7ab --- /dev/null +++ b/frontend/src/components/ComparisonTable/ParentBuildComparison.js @@ -0,0 +1,57 @@ +import React, { useEffect } from 'react'; +import { useParams } from 'react-router'; +import { useStateValue } from '../../contexts/state'; +import { buildTypes, suiteTypes,compareTypes } from '../../utils/parentDataTypes'; + +import ParentTable from './ParentTable'; + +const ParentSeries = () => { + + const { seriesId, buildId, seriesId2, buildId2 } = useParams(); + + const [ + { + parentData: { + buildData + } + }, + dispatch + ] = useStateValue(); + + useEffect(() => { + const url = `/data/series/${seriesId}/builds/${buildId}/info?`; + const url2 = `/data/series/${seriesId2}/builds/${buildId2}/info?`; + const fetchData = async () => { + // dispatch({ type: 'setLoadingState', loadingState: true }); + try { + const res = await fetch(url); + const json = await res.json(); + const buildData1 = json.build; + const res2 = await fetch(url2); + const json2 = await res2.json(); + const buildData2 = json2.build; + + + buildData1.team2=buildData2.team + buildData1.name2=buildData2.name + buildData1.build_number2=buildData2.build_number + buildData1.build_id2=buildData2.build_id + buildData1.start_time2=buildData2.start_time + + const buildData = buildData1 + dispatch({ type: 'setBuildData', buildData }); + // dispatch({ type: 'setLoadingState', loadingState: false }); + } catch (error) { + dispatch({ type: 'setErrorState', errorState: error }); + } + }; + fetchData(); + }, [dispatch, seriesId, seriesId2, buildId, buildId2]); + + const types = suiteTypes; + + return ; + +}; + +export default ParentSeries; diff --git a/frontend/src/components/ComparisonTable/ParentTable.js b/frontend/src/components/ComparisonTable/ParentTable.js new file mode 100644 index 00000000..cc0908cb --- /dev/null +++ b/frontend/src/components/ComparisonTable/ParentTable.js @@ -0,0 +1,75 @@ +import React, { useContext } from 'react'; +import PropTypes from 'prop-types'; +/** @jsx jsx */ +import { css, jsx } from '@emotion/core'; +import * as R from 'ramda'; +import ThemeContext from '../../contexts/themeContext'; +import { compareTypes } from '../../utils/parentDataTypes' +const ParentTable = props => { + const theme = useContext(ThemeContext); + + const tableStyles = css` + ${theme.baseTableStyle} + + table { + border-collapse: collapse; + table-layout: fixed; + overflow: auto; + max-width: 100%; + } + + + td, + th { + vertical-align: middle; + } + `; + + const { data, types } = props; + + const headerRow = () => { + return types.map(name => { + return {name}; + }); + }; + + const bodyRow = () => { + const bodyValues = R.props(types, data); + + return bodyValues.map((value, index) => { + return {value}; + }); + }; + + const bodyRow2 = () => { + const bodyValues = R.props(compareTypes, data) + + return bodyValues.map((value, index) => { + return {value}; + }); + } + return ( + + {data && ( +
+ + + {headerRow()} + + + {bodyRow()} + + + {bodyRow2()} + +
+
+ + + )} + + ); +}; + + +export default ParentTable; diff --git a/frontend/src/components/ComparisonTable/Row.js b/frontend/src/components/ComparisonTable/Row.js new file mode 100644 index 00000000..03d78a36 --- /dev/null +++ b/frontend/src/components/ComparisonTable/Row.js @@ -0,0 +1,77 @@ +// eslint-disable-next-line +import React, { Fragment } from 'react'; +/** @jsx jsx */ +import { css, jsx } from '@emotion/core'; +import Status from './Status'; +import { dashify } from '../../utils/helpers'; +import { useLocation } from 'react-router'; +import { Link } from 'react-router-dom'; + +const Row = ({ full_name, status1, status2 }) => { + const tableRowStyles = css` + .test-time-row { + text-align: right; + } + + .flakiness-row { + font-size: 14px; + text-align: center; + span { + width: 13px; + } + span + span { + margin-left: 2px; + } + } + `; + + return ( + + {full_name} + + + + ); + +}; + +export default Row; + +const TestCase = ({ testCases, index, suiteId, testId }) => { + const testCase = testCases[index].test_case; + const pathname = useLocation().pathname; + const correctUrl = pathname.substring(0, pathname.lastIndexOf('/')); + return ( + + + {testCase} + + + ); +}; + +// Show suite name separated on different lines with dots showing depth level +const LinksSuiteName = ({ tableCellHeight, suiteName, suiteId }) => { + const pathname = useLocation().pathname; + const correctUrl = pathname.substring(0, pathname.lastIndexOf('/')); + let tempSuiteName = suiteName.split('.'); + let splitSuiteName = []; + for (var index = 0; index < tempSuiteName.length; index++) { + let el = tempSuiteName[index]; + splitSuiteName.push( + + .{el} +
+ + ); + } + + return ( + + + Build + {splitSuiteName} + + + ); +}; diff --git a/frontend/src/components/ComparisonTable/Status.js b/frontend/src/components/ComparisonTable/Status.js new file mode 100644 index 00000000..7b4ebb8c --- /dev/null +++ b/frontend/src/components/ComparisonTable/Status.js @@ -0,0 +1,9 @@ +// eslint-disable-next-line +import React from 'react'; +import { pickIcon } from '../TestIcon'; +const Status = ({ status }) => { + const testStatusIcon = pickIcon(status); + return {testStatusIcon}; +}; + +export default Status; diff --git a/frontend/src/components/ComparisonTable/Table.js b/frontend/src/components/ComparisonTable/Table.js new file mode 100644 index 00000000..cccfb239 --- /dev/null +++ b/frontend/src/components/ComparisonTable/Table.js @@ -0,0 +1,64 @@ +// eslint-disable-next-line +import React, { useContext } from 'react'; +/** @jsx jsx */ +import { css, jsx } from '@emotion/core'; +import ThemeContext from '../../contexts/themeContext'; +import { useStateValue } from '../../contexts/state'; + +import Body from './Body'; + +const Table = () => { + const [ + { + parentData: {buildData} , + } + ] = useStateValue(); + + const theme = useContext(ThemeContext); + + const tableStyles = css` + ${theme.baseTableStyle} + overflow: auto; + + table { + table-layout: fixed; + width: 100%; + border-collapse: collapse; + } + + thead th:nth-of-type(1) { + width: 80%; + } + + thead th:nth-of-type(2) { + width: 10%; + } + + thead th:nth-of-type(3) { + width: 10%; + } + + overflow: auto; + + ${theme.baseTableStyle} + `; + + return ( +
+ + + + + + + + + + + +
Full Test Name{buildData.name} Status{buildData.name2} Status
+
+ ); +}; + +export default Table; diff --git a/frontend/src/components/SelectedTeam.js b/frontend/src/components/SelectedTeam.js new file mode 100644 index 00000000..a401b56b --- /dev/null +++ b/frontend/src/components/SelectedTeam.js @@ -0,0 +1,116 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import NotFound from './NotFound'; +import { useHistory } from 'react-router-dom'; +import theme from '../styles/theme'; +import BreadcrumbNav from './BreadcrumbNav'; +import { pickIcon } from './TestIcon'; +import { useTranslation } from 'react-i18next'; + +/** @jsx jsx */ +import { css, jsx } from '@emotion/core'; + +const SelectedTeam = ({ selectedTeam }) => { + const [t] = useTranslation(['team']); + + const cardStyles = css` + background-color: #fafafa; + box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 4px, + rgba(0, 0, 0, 0.23) 0px 3px 4px; + margin: 10px; + padding: 10px; + + .series:hover, + .builds:hover { + cursor: pointer; + } + `; + + let history = useHistory(); + + const flexContainer = { + display: 'flex', + flexWrap: 'wrap' + }; + + const TeamCard = ({ data }) => { + const { + id, + name, + builds, + last_build, + last_build_id, + last_started, + last_status + } = data; + + const LastStarted = last_started.slice(0, 16); + const testStatusIcon = pickIcon(last_status); + return ( +
+
+

{name}

+
+
+
+
history.push(`/series/${id}/history`)} + role={'presentation'} + > +

{t('card.series.title')}

+ {t('card.series.builds')}: {builds} +
+
+
+ history.push( + `/series/${id}/build/${last_build}/history` + ) + } + role={'presentation'} + > +

{t('card.last_build.title')}

+ {t('card.last_build.build_number')}: {last_build} +
+ {t('card.last_build.build_id')}: {last_build_id} +
+ {t('card.last_build.last_build_started')}: {LastStarted} +
+ {t('card.last_build.last_status')}: {testStatusIcon} +
+
+
+ ); + }; + + return ( +
+ + {selectedTeam && selectedTeam.all_builds ? ( +
+ + {selectedTeam.series.reverse().map((serie, i) => { + return ; + })} +
+ ) : ( + + )} +
+ ); +}; + +SelectedTeam.propTypes = { + selectedTeam: PropTypes.shape({ + all_builds: PropTypes.object, + name: PropTypes.string, + series: PropTypes.array, + series_count: PropTypes.number + }) +}; + +export default SelectedTeam; diff --git a/frontend/src/contexts/reducer.js b/frontend/src/contexts/reducer.js index a60796d7..0521d702 100644 --- a/frontend/src/contexts/reducer.js +++ b/frontend/src/contexts/reducer.js @@ -1,5 +1,12 @@ const reducer = (state, action) => { switch (action.type) { + + case 'updateCompared': + return{ + ...state, + comparedDataState: action.compareData + } + case 'updateHistory': return { ...state, @@ -65,7 +72,22 @@ const reducer = (state, action) => { isChecked: action.isChecked, }, }; - + case 'setCompareMatchFilter': + return { + ...state, + compareFilterMatch: { + filterType: action.filterType, + isChecked: action.isChecked + } + } + case 'setCompareMismatchFilter': + return { + ...state, + compareFilterMismatch: { + filterType: action.filterType, + isChecked: action.isChecked + } + } case 'setBranches': return { ...state, diff --git a/frontend/src/contexts/state.js b/frontend/src/contexts/state.js index 201a54af..d9bba1b9 100644 --- a/frontend/src/contexts/state.js +++ b/frontend/src/contexts/state.js @@ -17,6 +17,13 @@ const initialState = { isChecked: false, filterType: '', }, + compareFilterMatch: { + isChecked: false, + }, + compareFilterMismatch: { + isChecked: false, + }, + comparedDataState: [[], []], branchesState: null, selectedBranchState: { name: 'All builds', id: 1 }, metadataState: [], diff --git a/frontend/src/pages/Comparison.js b/frontend/src/pages/Comparison.js new file mode 100644 index 00000000..b002eec9 --- /dev/null +++ b/frontend/src/pages/Comparison.js @@ -0,0 +1,161 @@ +import React, { Fragment, useEffect } from 'react'; +import Table from '../components/ComparisonTable/Table'; +import ComparisonCheckbox from '../components/ComparisonTable/ComparisonCheckbox'; +import { useStateValue } from '../contexts/state'; +import Metadata3Table from '../components/ComparisonTable/Metadata3Table'; +import { useParams } from 'react-router'; +/** @jsx jsx */ +import { css, jsx } from '@emotion/core'; +import BreadcrumbNav from '../components/BreadcrumbNav'; +import ParentBuildComparison from '../components/ComparisonTable/ParentBuildComparison'; + +const Build = () => { + const buildStyles = css` + position: relative; + margin-top: 10px; + .filter-container, + .parentInfo-container { + display: flex; + } + + .parentInfo-container { + padding: 20px 0; + } + `; + const [ + { loadingState, historyDataState, selectedBranchState, branchesState }, + dispatch + ] = useStateValue(); + + let { buildId, seriesId, buildId2, seriesId2 } = useParams(); + + + useEffect(() => { + const fetchData = async () => { + dispatch({ type: 'setLoadingState', loadingState: true }); + if (seriesId && buildId && seriesId2 && buildId2) { + try { + const res = await fetch( + `/data/series/${seriesId}/builds/${buildId}/metadata`, + {} + ); + let json = await res.json(); + + const res2 = await fetch( + `/data/series/${seriesId2}/builds/${buildId2}/metadata`, + {} + ); + let json2=await res2.json(); + + json2.metadata.forEach(meta => { + const name = meta.metadata_name; + let index = 0; + let found = 0; + let metadata_len = json.metadata.length + while(index < metadata_len && found === 0) { + if(json.metadata[index].metadata_name === name){ + found=1; + }else{ + index++; + } + } + if(found === 0){ + const temp = {'metadata_name': name, 'metadata_value':'', 'suite_id':'', 'test_run_id':'', 'metadata2_value':meta.metadata_value, 'suite2_id': meta.suite_id, 'test2_run_id': meta.test_run_id} + json.metadata.push(temp); + }else{ + json.metadata[index].metadata2_value= meta.metadata_value; + json.metadata[index].suite2_id=meta.suite_id; + json.metadata[index].test2_run_id=meta.test_run_id + } + }); + json.metadata.forEach(meta => { + if(!('metadata2_value' in meta)){ + meta.metadata2_value=''; + meta.suite2_id=''; + meta.test2_run_id=''; + } + }); + dispatch({ type: 'setLoadingState', loadingState: false }); + dispatch({ + type: 'setMetadata', + metadata: json + }); + } catch (error) { + //console.log(error); + } + } + }; + const fetchComparisonData = async () => { + dispatch({ type: 'setLoadingState', loadingState: true }); + if (seriesId && buildId && seriesId2 && buildId2) { + try { + const res = await fetch( + `/data/series/${seriesId}/history?start_from=${buildId}&builds=1`, + {} + ); + const json = await res.json(); + + const res2 = await fetch( + `/data/series/${seriesId2}/history?start_from=${buildId2}&builds=1`, + {} + ); + + const json2 = await res2.json(); + + const jsoni = [json.history, json2.history] + + //What is required? Json with Fullname as "key" -> 1 status of test, 2 status of test + + dispatch({ type: 'setLoadingState', loadingState: false }); + dispatch({ + type: 'updateCompared', + compareData: jsoni + }); + } catch (error) {} + } + }; + if (branchesState) { + fetchComparisonData(); + fetchData(); + } + }, [dispatch, seriesId, seriesId2, buildId2, buildId, branchesState]); + + return ( +
+
+ {loadingState ? ( +
+ Loading +
+ ) : ( + +
+ Content loaded. +
+ +
+ +
+ + + + + + )} + + ); +}; + +export default Build; diff --git a/frontend/src/pages/Frontpage.js b/frontend/src/pages/Frontpage.js new file mode 100644 index 00000000..b9037e13 --- /dev/null +++ b/frontend/src/pages/Frontpage.js @@ -0,0 +1,94 @@ +// eslint-disable-next-line +import React from 'react'; +/** @jsx jsx */ +import { css, jsx } from '@emotion/core'; +import { useTranslation } from 'react-i18next'; + + +const sha = process.env.REACT_APP_GITHUB_SHA + +const Frontpage = () => { + const frontpageStyles = css` + max-width: 800px; + width: 100%; + `; + const [t] = useTranslation(['frontpage']); + return ( +
+

{t('title')}

+

{t('opening_paragraph')}

+ +

{t('section.roadmap.title')}

+

{t('section.roadmap.opening_paragraph')}

+
    +
  • {t('section.roadmap.ms_202002')}
    • +
  • {t('section.roadmap.ms_202003_1')}
    • +
  • {t('section.roadmap.ms_202003_2')}
    • +
+ +

{t('section.terminology.title')}

+

{t('section.terminology.opening_paragraph')}

+ + +

{t('section.icons.title')}

+

{t('section.icons.opening_paragraph')}

+ icon legend + +

{t('section.views.title')}

+
    +
  • {t('section.views.history')}
    • +
  • {t('section.views.team')}
    • +
  • {t('section.views.suite')}
    • +
+ +

{t('section.feedback.title')}

+

+ {t('section.feedback.text')} + + {t('section.feedback.link_text')} + + . +

+ +

{t('section.contribute.title')}

+

+ {t('section.contribute.text')} + + {t('section.contribute.link_text')} + + . +

+

{t('section.licence.title')}

+

+ {t('section.licence.text')} + + {t('section.licence.link_text')} + + . +

+

{"Git Version"}

+

+ Built From Git Commit: {sha} +

+
+ ); +}; + +export default Frontpage; diff --git a/frontend/src/utils/parentDataTypes.js b/frontend/src/utils/parentDataTypes.js index 296b545e..11658988 100644 --- a/frontend/src/utils/parentDataTypes.js +++ b/frontend/src/utils/parentDataTypes.js @@ -6,3 +6,11 @@ 'status', 'start_time', ]; + +export const compareTypes = [ + 'team2', + 'name2', + 'build_number2', + 'build_id2', + 'start_time2' +] \ No newline at end of file From 621e199f3bde2974f47537123f06991269f12320 Mon Sep 17 00:00:00 2001 From: lauri_koskela Date: Tue, 23 Jun 2020 10:29:40 +0300 Subject: [PATCH 02/22] compare and search functionality --- frontend/src/App.js | 8 + frontend/src/components/BreadcrumbNav.js | 98 +++++++++++ .../ComparisonForm/ComparisonForm.js | 160 ++++++++++++++++++ .../src/components/ComparisonTable/Body.js | 20 +-- .../ComparisonTable/Metadata3Table.js | 2 +- frontend/src/components/MainNav.js | 158 +++++++++++++++++ frontend/src/pages/Comparison.js | 19 ++- frontend/src/pages/Search.js | 114 +++++++++++++ 8 files changed, 554 insertions(+), 25 deletions(-) create mode 100644 frontend/src/components/BreadcrumbNav.js create mode 100644 frontend/src/components/ComparisonForm/ComparisonForm.js create mode 100644 frontend/src/components/MainNav.js create mode 100644 frontend/src/pages/Search.js diff --git a/frontend/src/App.js b/frontend/src/App.js index 71e617a7..e1aebe85 100644 --- a/frontend/src/App.js +++ b/frontend/src/App.js @@ -14,6 +14,7 @@ import Frontpage from './pages/Frontpage'; import Team from './pages/Team'; import Suite from './pages/Suite'; import Comparison from './pages/Comparison' +import Search from './pages/Search' import { useStateValue } from './contexts/state'; import './utils/i118n'; @@ -124,9 +125,16 @@ const App = () => { + + + + + + + diff --git a/frontend/src/components/BreadcrumbNav.js b/frontend/src/components/BreadcrumbNav.js new file mode 100644 index 00000000..ecf55696 --- /dev/null +++ b/frontend/src/components/BreadcrumbNav.js @@ -0,0 +1,98 @@ +// eslint-disable-next-line +import React from 'react'; +/** @jsx jsx */ +import { css, jsx } from '@emotion/core'; +import { useStateValue } from '../contexts/state'; +import { useParams } from 'react-router'; +import { Link } from 'react-router-dom'; + +const BreadcrumbItem = () => { + const { name } = useParams(); + const [{ selectedBranchState }] = useStateValue(); + const teamName = name || selectedBranchState.team; + + return ( + + {teamName} + + ); +}; + +const BreadcrumbItemSeries = () => { + const { series } = useParams(); + const [{ selectedBranchState }] = useStateValue(); + const seriesId = series || selectedBranchState.id; + return ( +
+ > + + {selectedBranchState.name} + +
+ ); +}; + +const BreadcrumbItemBuild = () => { + const { buildId, seriesId } = useParams(); + return ( +
+ > + + {buildId} + +
+ ); +}; + +const BreadcrumbItemSuite = () => { + const { suiteId } = useParams(); + return ( +
+ > {suiteId} +
+ ); +}; + +const BreadcrumbCompare = () => { + return ( + + Compare + + ); +} + +const BreadcrumbNav = ({ status }) => { + const breadCrumbNavStyles = css` + font-size: 14px; + a { + padding: 5px 5px 5px 10px; + &:hover, + &:active { + background-color: #ccc; + transition: 0.1s background-color; + } + } + .BreadCrumbSeries { + padding-left: 0; + } + div { + display: inline; + } + `; + + return ( +
+
{BREADCRUMB_STATUS[`${status}`]}
+
+ ); +}; + +export default BreadcrumbNav; + +const BREADCRUMB_STATUS = { + team: , + series: , + build: , + suite: , + compare: +}; diff --git a/frontend/src/components/ComparisonForm/ComparisonForm.js b/frontend/src/components/ComparisonForm/ComparisonForm.js new file mode 100644 index 00000000..81b25836 --- /dev/null +++ b/frontend/src/components/ComparisonForm/ComparisonForm.js @@ -0,0 +1,160 @@ +// eslint-disable-next-line +import React,{ useState, useEffect, Fragment } from 'react'; +/** @jsx jsx */ +import { css, jsx } from '@emotion/core'; +import { useHistory } from 'react-router-dom'; + +const ComparisonForm = () =>{ + let history = useHistory(); + const [seriesList, setSeriesList] = useState([]); + const [buildList, setBuildList] = useState([]); + const [buildList2, setBuildList2] = useState([]); + const [series, setSeries] = useState(); + const [build, setBuild] = useState(); + + const [series2, setSeries2] = useState(); + const [build2, setBuild2] = useState(); + const [loadingState, setLoadingState] = useState(false); + const [seriesLoading, setSeriesLoading] = useState(true); + + const buildStyles = css` + position: relative; + margin-top: 10px; + .input-container { + display: inline-block; + + padding: 20px + } + .input-container div { + padding: 10px + } + + + `; + + useEffect(() => { + let isCancelled = false; + const fetchData = async () => { + setLoadingState(true) + try { + const res = await fetch('/data/series', {}); + const json = await res.json(); + if(!isCancelled){ + setLoadingState(false) + setSeriesLoading(false) + setSeriesList(json.series); + } + + } catch (error) { + console.log(error) + } + }; + + const fetchBuildData = async () => { + setLoadingState(true) + try { + const res = await fetch(`/data/series/${series}/builds/`, {}); + const json = await res.json(); + if(!isCancelled){ + setLoadingState(false) + setBuildList(json.builds); + } + } catch (error) { + console.log(error) + } + }; + const fetchBuildData2 = async () => { + setLoadingState(true) + try { + const res = await fetch(`/data/series/${series2}/builds/`, {}); + const json = await res.json(); + if(!isCancelled){ + setLoadingState(false) + setBuildList2(json.builds); + } + } catch (error) { + console.log(error) + } + }; + + if(!series){ + fetchData(); + } + if(!seriesLoading){ + if(series){ + fetchBuildData(); + } + if(series2){ + fetchBuildData2(); + } + + } + return() => { + isCancelled = true; + } + }, [series, series2, build, build2]); + + + + return( +
+ {loadingState ? ( +
Please Wait
+ ) : ( +
history.push(`/compare/${series}/${build}/to/${series2}/${build2}`)}> +
+
+

Series1

+ +
+
+

Build1

+ +
+
+
+
+

Series2

+ +
+
+

Build2

+ +
+
+ + + )} +
+ ) +} + +export default ComparisonForm \ No newline at end of file diff --git a/frontend/src/components/ComparisonTable/Body.js b/frontend/src/components/ComparisonTable/Body.js index 24ed0d36..8f775c38 100644 --- a/frontend/src/components/ComparisonTable/Body.js +++ b/frontend/src/components/ComparisonTable/Body.js @@ -20,7 +20,6 @@ const Body = ({ id }) => { // Get result for this specific run , as well as parse the full name of a test case and the result of the test case. - console.log(comparedDataState) const firstBuildByBuildNumber = comparedDataState[0].filter(({ test_cases }) => { return test_cases.some(({ builds }) => { return builds.some( @@ -41,8 +40,6 @@ const Body = ({ id }) => { return {'full_name': test.full_name, 'status1': '', 'status2': test.builds[0].test_status} }); - - //We create an array of matching test cases const matching_array = [] @@ -66,10 +63,6 @@ const Body = ({ id }) => { })) }); - console.log(matching_array) - console.log(second_not_matching) - console.log(first_not_matching) - //We now have 3 arrays, one with matching elements and 2 with unmatching elements let combined_json = [] if(!compareFilterMatch.isChecked && !compareFilterMismatch.isChecked){ @@ -80,19 +73,10 @@ const Body = ({ id }) => { combined_json = matching_array } - console.log(combined_json) - - // return combined_json.map( - ({ full_name, status1, status2 }, i) => { + ({ full_name, status1, status2 } ) => { return ( - + ); } ); diff --git a/frontend/src/components/ComparisonTable/Metadata3Table.js b/frontend/src/components/ComparisonTable/Metadata3Table.js index 45de6ea1..96142ac7 100644 --- a/frontend/src/components/ComparisonTable/Metadata3Table.js +++ b/frontend/src/components/ComparisonTable/Metadata3Table.js @@ -27,7 +27,7 @@ const Metadata3Table = () => { ) : null; - console.log(buildData) + console.log(metadata) return (
diff --git a/frontend/src/components/MainNav.js b/frontend/src/components/MainNav.js new file mode 100644 index 00000000..a78466e7 --- /dev/null +++ b/frontend/src/components/MainNav.js @@ -0,0 +1,158 @@ +// eslint-disable-next-line +import React, { useContext } from 'react'; +import { NavLink, useLocation } from 'react-router-dom'; +/** @jsx jsx */ +import { css, jsx } from '@emotion/core'; +import ThemeContext from '../contexts/themeContext'; +import packageJson from '../../package.json'; +import { useTranslation } from 'react-i18next'; + +const MainNav = () => { + const theme = useContext(ThemeContext); + const [t] = useTranslation(['mainnav']); + + const pathname = useLocation().pathname; + + const seriesUrl = pathname.includes('series'); + const suiteUrl = pathname.includes('suite'); + + const correctUrl = prop => { + if (pathname.includes(prop)) { + return pathname; + } + const beginningUrl = pathname.substring(0, pathname.lastIndexOf('/')); + return beginningUrl.concat('/' + prop); + }; + + const mainNavStyles = css` + flex: 0 0 240px; + @media only screen and (max-width: 999px) { + flex: 0 0 120px; + } + h2 { + padding: 0px 20px 0px 20px; + @media only screen and (max-width: 768px) { + display: block; + width: 0; + height: 40px; + padding: 0; + margin: 0; + overflow: hidden; + &:after { + display: block; + width: 100px; + top: 15px; + left: 10px; + content: 'Epi'; + position: absolute; + } + } + } + p { + padding: 20px 20px 0px 20px; + @media only screen and (max-width: 768px) { + display: block; + width: 0; + height: 40px; + padding: 0; + margin: 0; + overflow: hidden; + &:after { + display: none; + } + } + } + ul { + list-style-type: none; + padding: 0; + li { + font-size: 16px; + padding: & + li { + padding-top: ${theme.spacing.xs / 2}px; + } + + a { + display: block; + width: 100%; + padding: 15px 20px; + @media only screen and (max-width: 999px) { + padding: 15px 20px 15px 10px; + } + transition: 0.33s background-color; + &:hover, + &:active { + background-color: #ccc; + transition: 0.1s background-color; + } + } + &.nav-github { + margin-top: 1em; + font-weight: bold; + } + } + a.active { + font-weight: bold; + background-color: #ccc; + } + } + .sub-url { + padding-left: 5%; + } + `; + return ( + + ); +}; + +export default MainNav; diff --git a/frontend/src/pages/Comparison.js b/frontend/src/pages/Comparison.js index b002eec9..39b5b9c4 100644 --- a/frontend/src/pages/Comparison.js +++ b/frontend/src/pages/Comparison.js @@ -8,6 +8,7 @@ import { useParams } from 'react-router'; import { css, jsx } from '@emotion/core'; import BreadcrumbNav from '../components/BreadcrumbNav'; import ParentBuildComparison from '../components/ComparisonTable/ParentBuildComparison'; +import ComparisonForm from '../components/ComparisonForm/ComparisonForm' const Build = () => { const buildStyles = css` @@ -23,7 +24,7 @@ const Build = () => { } `; const [ - { loadingState, historyDataState, selectedBranchState, branchesState }, + { loadingState}, dispatch ] = useStateValue(); @@ -114,11 +115,11 @@ const Build = () => { } catch (error) {} } }; - if (branchesState) { + if ((seriesId && buildId && seriesId2 && buildId2)) { fetchComparisonData(); fetchData(); } - }, [dispatch, seriesId, seriesId2, buildId2, buildId, branchesState]); + }, [dispatch, seriesId, seriesId2, buildId2, buildId]); return (
@@ -133,7 +134,7 @@ const Build = () => { > Loading - ) : ( + ) : (seriesId && buildId && seriesId2 && buildId2) ? (
{ > Content loaded.
- +
@@ -153,7 +154,13 @@ const Build = () => {
- )} + ) : ( +
+ +
+ ) + + } ); }; diff --git a/frontend/src/pages/Search.js b/frontend/src/pages/Search.js new file mode 100644 index 00000000..450d01d5 --- /dev/null +++ b/frontend/src/pages/Search.js @@ -0,0 +1,114 @@ +// eslint-disable-next-line +import React,{ useState, useEffect, Fragment } from 'react'; +/** @jsx jsx */ +import { css, jsx } from '@emotion/core'; +import { useHistory } from 'react-router-dom'; + +const Search = () => { + + + let history = useHistory(); + const buildStyles = css` + position: relative; + margin-top: 10px; + .filter-container, + .parentInfo-container { + display: flex; + } + + .parentInfo-container { + padding: 20px 0; + } + `; + + const [seriesList, setSeriesList] = useState([]); + const [buildList, setBuildList] = useState([]); + const [series, setSeries] = useState(); + const [build, setBuild] = useState(); + const [loadingState, setLoadingState] = useState(false); + const [seriesLoading, setSeriesLoading] = useState(true); + + useEffect(() => { + let isCancelled = false; + const fetchData = async () => { + setLoadingState(true) + try { + const res = await fetch('/data/series', {}); + const json = await res.json(); + if(!isCancelled){ + setLoadingState(false) + setSeriesLoading(false) + setSeriesList(json.series); + } + + } catch (error) { + console.log(error) + } + }; + + const fetchBuildData = async () => { + setLoadingState(true) + try { + const res = await fetch(`/data/series/${series}/builds/`, {}); + const json = await res.json(); + if(!isCancelled){ + setLoadingState(false) + setBuildList(json.builds); + } + } catch (error) { + console.log(error) + } + }; + + + if(!series){ + fetchData(); + } + if(!seriesLoading){ + if(series){ + fetchBuildData(); + } + } + return() => { + isCancelled = true; + } + }, [series, build]); + + return( +
+ {loadingState ? ( +
Please Wait
+ ) : ( +
history.push(`/series/${series}/build/${build}/history`)}> +
+
+

Series1

+ +
+
+

Build1

+ +
+
+ + + )} +
+ ); +}; + +export default Search; From a45f05ce5ff4d1627b49abc8789aec4d27971dd5 Mon Sep 17 00:00:00 2001 From: lauri_koskela Date: Mon, 29 Jun 2020 10:14:05 +0300 Subject: [PATCH 03/22] Locali --- .../ComparisonForm/ComparisonForm.js | 341 +++++++++++++----- frontend/src/contexts/reducer.js | 9 +- 2 files changed, 252 insertions(+), 98 deletions(-) diff --git a/frontend/src/components/ComparisonForm/ComparisonForm.js b/frontend/src/components/ComparisonForm/ComparisonForm.js index 81b25836..918d0972 100644 --- a/frontend/src/components/ComparisonForm/ComparisonForm.js +++ b/frontend/src/components/ComparisonForm/ComparisonForm.js @@ -4,9 +4,10 @@ import React,{ useState, useEffect, Fragment } from 'react'; import { css, jsx } from '@emotion/core'; import { useHistory } from 'react-router-dom'; -const ComparisonForm = () =>{ +const ComparisonForm = () => { let history = useHistory(); const [seriesList, setSeriesList] = useState([]); + const [seriesList2, setSeriesList2] = useState([]); const [buildList, setBuildList] = useState([]); const [buildList2, setBuildList2] = useState([]); const [series, setSeries] = useState(); @@ -17,144 +18,298 @@ const ComparisonForm = () =>{ const [loadingState, setLoadingState] = useState(false); const [seriesLoading, setSeriesLoading] = useState(true); + const [team, setTeam] = useState(); + const [team2, setTeam2] = useState(); + const [teamList, setTeamList] = useState([]); + const buildStyles = css` position: relative; margin-top: 10px; .input-container { display: inline-block; - - padding: 20px + padding: 20px; } .input-container div { - padding: 10px + padding: 10px; } - - `; - useEffect(() => { let isCancelled = false; - const fetchData = async () => { - setLoadingState(true) + + const fetchSeriesList1 = async () => { + setLoadingState(true); + try { + if (!isCancelled) { + setLoadingState(false); + setSeriesLoading(false); + setSeriesList( + teamList.filter(x => x.name === team)[0].series + ); + } + } catch (error) { + console.log(error); + } + }; + + const fetchSeriesList2 = async () => { + setLoadingState(true); try { - const res = await fetch('/data/series', {}); - const json = await res.json(); - if(!isCancelled){ - setLoadingState(false) - setSeriesLoading(false) - setSeriesList(json.series); + if (!isCancelled) { + setLoadingState(false); + setSeriesLoading(false); + setSeriesList2( + teamList.filter(x => x.name === team2)[0].series + ); } - } catch (error) { - console.log(error) + console.log(error); + } + }; + + const fetchTeamData = async () => { + setLoadingState(true); + try { + const res = await fetch('/data/teams', {}); + const json = await res.json(); + if (!isCancelled) { + setLoadingState(false); + setTeamList(json.teams); + } + } catch (error) { + console.log(error); } }; const fetchBuildData = async () => { - setLoadingState(true) + setLoadingState(true); try { - const res = await fetch(`/data/series/${series}/builds/`, {}); - const json = await res.json(); - if(!isCancelled){ - setLoadingState(false) + const res = await fetch(`/data/series/${series}/builds/`, {}); + const json = await res.json(); + if (!isCancelled) { + setLoadingState(false); setBuildList(json.builds); } } catch (error) { - console.log(error) + console.log(error); } }; const fetchBuildData2 = async () => { - setLoadingState(true) + setLoadingState(true); try { - const res = await fetch(`/data/series/${series2}/builds/`, {}); - const json = await res.json(); - if(!isCancelled){ - setLoadingState(false) + const res = await fetch(`/data/series/${series2}/builds/`, {}); + const json = await res.json(); + if (!isCancelled) { + setLoadingState(false); setBuildList2(json.builds); } } catch (error) { - console.log(error) + console.log(error); } }; - if(!series){ - fetchData(); + if (!teamList.length) { + fetchTeamData(); + } + + if (team) { + fetchSeriesList1(); + } + if (team2) { + fetchSeriesList2(); } - if(!seriesLoading){ - if(series){ + if (!seriesLoading) { + if (series) { fetchBuildData(); } - if(series2){ + if (series2) { fetchBuildData2(); } - } - return() => { + return () => { isCancelled = true; - } - }, [series, series2, build, build2]); - - + }; + }, [team, team2, series, series2, build, build2]); - return( + return (
{loadingState ? (
Please Wait
) : ( -
history.push(`/compare/${series}/${build}/to/${series2}/${build2}`)}> -
-
-

Series1

- -
-
-

Build1

- -
-
-
-
-

Series2

- + + history.push( + `/compare/${series}/${build}/to/${series2}/${build2}` + ) + } + > +
+
+

Team1

+ +
+
+

Series1

+ +
+
+

Build1

+ +
-
-

Build2

- +
+
+

Team2

+ +
+
+

Series2

+ +
+
+

Build2

+ +
-
- - + + )}
- ) -} + ); +}; -export default ComparisonForm \ No newline at end of file +export default ComparisonForm; diff --git a/frontend/src/contexts/reducer.js b/frontend/src/contexts/reducer.js index 0521d702..8e1df8b9 100644 --- a/frontend/src/contexts/reducer.js +++ b/frontend/src/contexts/reducer.js @@ -1,11 +1,10 @@ const reducer = (state, action) => { switch (action.type) { - case 'updateCompared': - return{ + return { ...state, comparedDataState: action.compareData - } + }; case 'updateHistory': return { @@ -79,7 +78,7 @@ const reducer = (state, action) => { filterType: action.filterType, isChecked: action.isChecked } - } + }; case 'setCompareMismatchFilter': return { ...state, @@ -87,7 +86,7 @@ const reducer = (state, action) => { filterType: action.filterType, isChecked: action.isChecked } - } + }; case 'setBranches': return { ...state, From 8b9e853c726da3c2d357ab7f10e73192526e5a29 Mon Sep 17 00:00:00 2001 From: Tiia Valtonen Date: Wed, 7 Apr 2021 11:09:30 +0300 Subject: [PATCH 04/22] 176 - Resolve conflicts --- frontend/src/App.js | 147 ---------------- frontend/src/App.jsx | 11 ++ frontend/src/components/BreadcrumbNav.js | 98 ----------- frontend/src/components/Card.js | 25 --- .../{ComparisonForm.js => ComparisonForm.jsx} | 15 +- .../src/components/ComparisonTable/Body.js | 85 ---------- .../src/components/ComparisonTable/Body.jsx | 110 ++++++++++++ ...isonCheckbox.js => ComparisonCheckbox.jsx} | 32 +--- .../ComparisonTable/Metadata3Table.js | 66 -------- .../ComparisonTable/Metadata3Table.jsx | 68 ++++++++ ...omparison.js => ParentBuildComparison.jsx} | 31 ++-- .../components/ComparisonTable/ParentTable.js | 75 --------- .../ComparisonTable/ParentTable.jsx | 49 ++++++ .../ComparisonTable/{Row.js => Row.jsx} | 33 +--- .../ComparisonTable/{Status.js => Status.jsx} | 1 - .../src/components/ComparisonTable/Table.js | 64 ------- .../src/components/ComparisonTable/Table.jsx | 35 ++++ frontend/src/components/MainNav.js | 158 ------------------ frontend/src/components/SelectedTeam.js | 116 ------------- .../pages/{Comparison.js => Comparison.jsx} | 151 ++++++++--------- frontend/src/pages/Frontpage.js | 94 ----------- frontend/src/pages/Search.js | 114 ------------- frontend/src/pages/Search.jsx | 128 ++++++++++++++ frontend/src/utils/parentDataTypes.js | 14 +- 24 files changed, 510 insertions(+), 1210 deletions(-) delete mode 100644 frontend/src/App.js delete mode 100644 frontend/src/components/BreadcrumbNav.js delete mode 100644 frontend/src/components/Card.js rename frontend/src/components/ComparisonForm/{ComparisonForm.js => ComparisonForm.jsx} (96%) delete mode 100644 frontend/src/components/ComparisonTable/Body.js create mode 100644 frontend/src/components/ComparisonTable/Body.jsx rename frontend/src/components/ComparisonTable/{ComparisonCheckbox.js => ComparisonCheckbox.jsx} (66%) delete mode 100644 frontend/src/components/ComparisonTable/Metadata3Table.js create mode 100644 frontend/src/components/ComparisonTable/Metadata3Table.jsx rename frontend/src/components/ComparisonTable/{ParentBuildComparison.js => ParentBuildComparison.jsx} (67%) delete mode 100644 frontend/src/components/ComparisonTable/ParentTable.js create mode 100644 frontend/src/components/ComparisonTable/ParentTable.jsx rename frontend/src/components/ComparisonTable/{Row.js => Row.jsx} (71%) rename frontend/src/components/ComparisonTable/{Status.js => Status.jsx} (89%) delete mode 100644 frontend/src/components/ComparisonTable/Table.js create mode 100644 frontend/src/components/ComparisonTable/Table.jsx delete mode 100644 frontend/src/components/MainNav.js delete mode 100644 frontend/src/components/SelectedTeam.js rename frontend/src/pages/{Comparison.js => Comparison.jsx} (51%) delete mode 100644 frontend/src/pages/Frontpage.js delete mode 100644 frontend/src/pages/Search.js create mode 100644 frontend/src/pages/Search.jsx diff --git a/frontend/src/App.js b/frontend/src/App.js deleted file mode 100644 index e1aebe85..00000000 --- a/frontend/src/App.js +++ /dev/null @@ -1,147 +0,0 @@ -// eslint-disable-next-line -import React, { useState, useEffect, Suspense } from 'react'; -/** @jsx jsx */ -import { css, jsx } from '@emotion/core'; -import { BrowserRouter as Router, Switch, Route } from 'react-router-dom'; -import theme from './styles/theme'; -import ThemeContext from './contexts/themeContext'; -import MainContent from './components/MainContent'; -import MainNav from './components/MainNav'; -import History from './pages/History'; -import Dashboard from './pages/Dashboard'; -import Build from './pages/Build'; -import Frontpage from './pages/Frontpage'; -import Team from './pages/Team'; -import Suite from './pages/Suite'; -import Comparison from './pages/Comparison' -import Search from './pages/Search' -import { useStateValue } from './contexts/state'; -import './utils/i118n'; - -import 'normalize.css'; -import './index.css'; - -const App = () => { - // eslint-disable-next-line - const [{ selectedBranchState, amountOfBuilds }, dispatch] = useStateValue(); - useEffect(() => { - const fetchData = async () => { - dispatch({ type: 'setLoadingState', loadingState: true }); - try { - const res = await fetch(`/data/series/`, {}); - const json = await res.json(); - dispatch({ type: 'setLoadingState', loadingState: false }); - dispatch({ - type: 'setBranches', - branches: json - }); - } catch (error) { - // console.log(error); - } - }; - fetchData(); - }, [dispatch]); - - const appStyles = css` - display: flex; - min-height: 100vh; - width: 100%; - ${theme.testTheme.container} .login-btn { - padding: 10px; - margin-bottom: 20px; - } - a { - color: ${theme.testTheme.linkColor}; - } - a:active, - a:hover { - color: ${theme.testTheme.linkColor}; - } - a.skip-main { - left: -999px; - position: absolute; - top: auto; - width: 1px; - height: 1px; - overflow: hidden; - z-index: -999; - } - a.skip-main:focus, - a.skip-main:active { - background-color: #fff; - left: auto; - top: auto; - width: 30%; - height: auto; - overflow: auto; - margin: 10px 35%; - padding: 5px; - border: 1px solid black; - text-align: center; - z-index: 999; - } - , - select:focus, - input:focus { - outline: 1px solid ${theme.testTheme.linkColor}; - } - `; - - return ( - -
- - - - Skip to main content - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - ); -}; - -export default App; diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx index e0e8529f..ca6bb310 100644 --- a/frontend/src/App.jsx +++ b/frontend/src/App.jsx @@ -11,6 +11,8 @@ import BuildHistory from './pages/BuildHistory'; import Frontpage from './pages/Frontpage'; import Team from './pages/Team'; import Suite from './pages/Suite'; +import Comparison from './pages/Comparison'; +import Search from './pages/Search.jsx'; import { useStateValue } from './contexts/state'; import './utils/i118n'; import 'normalize.css'; @@ -67,6 +69,15 @@ const App = () => { + + + + + + + + + diff --git a/frontend/src/components/BreadcrumbNav.js b/frontend/src/components/BreadcrumbNav.js deleted file mode 100644 index ecf55696..00000000 --- a/frontend/src/components/BreadcrumbNav.js +++ /dev/null @@ -1,98 +0,0 @@ -// eslint-disable-next-line -import React from 'react'; -/** @jsx jsx */ -import { css, jsx } from '@emotion/core'; -import { useStateValue } from '../contexts/state'; -import { useParams } from 'react-router'; -import { Link } from 'react-router-dom'; - -const BreadcrumbItem = () => { - const { name } = useParams(); - const [{ selectedBranchState }] = useStateValue(); - const teamName = name || selectedBranchState.team; - - return ( - - {teamName} - - ); -}; - -const BreadcrumbItemSeries = () => { - const { series } = useParams(); - const [{ selectedBranchState }] = useStateValue(); - const seriesId = series || selectedBranchState.id; - return ( -
- > - - {selectedBranchState.name} - -
- ); -}; - -const BreadcrumbItemBuild = () => { - const { buildId, seriesId } = useParams(); - return ( -
- > - - {buildId} - -
- ); -}; - -const BreadcrumbItemSuite = () => { - const { suiteId } = useParams(); - return ( -
- > {suiteId} -
- ); -}; - -const BreadcrumbCompare = () => { - return ( - - Compare - - ); -} - -const BreadcrumbNav = ({ status }) => { - const breadCrumbNavStyles = css` - font-size: 14px; - a { - padding: 5px 5px 5px 10px; - &:hover, - &:active { - background-color: #ccc; - transition: 0.1s background-color; - } - } - .BreadCrumbSeries { - padding-left: 0; - } - div { - display: inline; - } - `; - - return ( -
-
{BREADCRUMB_STATUS[`${status}`]}
-
- ); -}; - -export default BreadcrumbNav; - -const BREADCRUMB_STATUS = { - team: , - series: , - build: , - suite: , - compare: -}; diff --git a/frontend/src/components/Card.js b/frontend/src/components/Card.js deleted file mode 100644 index 435c0e6a..00000000 --- a/frontend/src/components/Card.js +++ /dev/null @@ -1,25 +0,0 @@ -import React from 'react'; -import { useHistory } from 'react-router-dom'; -import theme from '../styles/theme'; -import { useTranslation } from 'react-i18next'; - -const Card = ({ team, numberOfSeries }) => { - const [t] = useTranslation(['team']); - let history = useHistory(); - - return ( -
history.push(`/team/${team}`)} - role={'presentation'} - id={team + "_card"} - > -

{team}

-
- {t('series')}: {numberOfSeries} -
-
- ); -}; - -export default Card; diff --git a/frontend/src/components/ComparisonForm/ComparisonForm.js b/frontend/src/components/ComparisonForm/ComparisonForm.jsx similarity index 96% rename from frontend/src/components/ComparisonForm/ComparisonForm.js rename to frontend/src/components/ComparisonForm/ComparisonForm.jsx index 918d0972..d65de0d3 100644 --- a/frontend/src/components/ComparisonForm/ComparisonForm.js +++ b/frontend/src/components/ComparisonForm/ComparisonForm.jsx @@ -1,7 +1,5 @@ // eslint-disable-next-line import React,{ useState, useEffect, Fragment } from 'react'; -/** @jsx jsx */ -import { css, jsx } from '@emotion/core'; import { useHistory } from 'react-router-dom'; const ComparisonForm = () => { @@ -22,17 +20,6 @@ const ComparisonForm = () => { const [team2, setTeam2] = useState(); const [teamList, setTeamList] = useState([]); - const buildStyles = css` - position: relative; - margin-top: 10px; - .input-container { - display: inline-block; - padding: 20px; - } - .input-container div { - padding: 10px; - } - `; useEffect(() => { let isCancelled = false; @@ -131,7 +118,7 @@ const ComparisonForm = () => { }, [team, team2, series, series2, build, build2]); return ( -
+
{loadingState ? (
Please Wait
) : ( diff --git a/frontend/src/components/ComparisonTable/Body.js b/frontend/src/components/ComparisonTable/Body.js deleted file mode 100644 index 8f775c38..00000000 --- a/frontend/src/components/ComparisonTable/Body.js +++ /dev/null @@ -1,85 +0,0 @@ -// eslint-disable-next-line -import React from 'react'; -import Row from './Row'; -import { useStateValue } from '../../contexts/state'; -import { useParams } from 'react-router'; - -const Body = ({ id }) => { - const [ - { - comparedDataState, - compareFilterMatch, - compareFilterMismatch - } - ] = useStateValue(); - let { buildId, buildId2 } = useParams(); - - // Do we want last-run page filters to work on suite-level (false) - // or test-level (true)? - const SUITE_FILTER_NESTED = true; - - // Get result for this specific run , as well as parse the full name of a test case and the result of the test case. - - const firstBuildByBuildNumber = comparedDataState[0].filter(({ test_cases }) => { - return test_cases.some(({ builds }) => { - return builds.some( - ({ build_number }) => build_number === Number(buildId) - ); - }); - }).flatMap(x => x.test_cases).map(test => { - return {'full_name': test.full_name, 'status1': test.builds[0].test_status, 'status2': ''} - }); - //Done twice since 2 builds - const secondBuildByBuildNumber = comparedDataState[1].filter(({ test_cases }) => { - return test_cases.some(({ builds }) => { - return builds.some( - ({ build_number }) => build_number === Number(buildId2) - ); - }); - }).flatMap(x => x.test_cases).map(test => { - return {'full_name': test.full_name, 'status1': '', 'status2': test.builds[0].test_status} - }); - - //We create an array of matching test cases - - const matching_array = [] - secondBuildByBuildNumber.forEach(test_case2 => { - firstBuildByBuildNumber.forEach(test_case1=>{ - if(test_case1.full_name === test_case2.full_name){ - matching_array.push({'full_name': test_case1.full_name, 'status1': test_case1.status1, 'status2': test_case2.status2} ); - } - }) - }) - - const second_not_matching = secondBuildByBuildNumber.filter(test_case =>{ - return !(matching_array.some(matcher => { - return matcher.full_name === test_case.full_name - })) - }); - - const first_not_matching = firstBuildByBuildNumber.filter(test_case =>{ - return !(matching_array.some((matcher) => { - return matcher.full_name === test_case.full_name - })) - }); - - //We now have 3 arrays, one with matching elements and 2 with unmatching elements - let combined_json = [] - if(!compareFilterMatch.isChecked && !compareFilterMismatch.isChecked){ - combined_json = first_not_matching.concat(matching_array, second_not_matching) - }else if(compareFilterMatch.isChecked && !compareFilterMismatch.isChecked){ - combined_json = first_not_matching.concat(second_not_matching) - }else if(!compareFilterMatch.isChecked && compareFilterMismatch.isChecked){ - combined_json = matching_array - } - - return combined_json.map( - ({ full_name, status1, status2 } ) => { - return ( - - ); - } - ); -}; - -export default Body; diff --git a/frontend/src/components/ComparisonTable/Body.jsx b/frontend/src/components/ComparisonTable/Body.jsx new file mode 100644 index 00000000..090f7d31 --- /dev/null +++ b/frontend/src/components/ComparisonTable/Body.jsx @@ -0,0 +1,110 @@ +import React from 'react'; +import Row from './Row'; +import { useStateValue } from '../../contexts/state'; +import { useParams } from 'react-router'; + +const Body = ({ id }) => { + const [ + { comparedDataState, compareFilterMatch, compareFilterMismatch }, + ] = useStateValue(); + let { buildId, buildId2 } = useParams(); + + // Do we want last-run page filters to work on suite-level (false) + // or test-level (true)? + const SUITE_FILTER_NESTED = true; + + // Get result for this specific run , as well as parse the full name of a test case and the result of the test case. + + const firstBuildByBuildNumber = comparedDataState[0] + .filter(({ test_cases }) => { + return test_cases.some(({ builds }) => { + return builds.some( + ({ build_number }) => build_number === Number(buildId) + ); + }); + }) + .flatMap(x => x.test_cases) + .map(test => { + return { + full_name: test.full_name, + status1: test.builds[0].test_status, + status2: '', + }; + }); + //Done twice since 2 builds + const secondBuildByBuildNumber = comparedDataState[1] + .filter(({ test_cases }) => { + return test_cases.some(({ builds }) => { + return builds.some( + ({ build_number }) => build_number === Number(buildId2) + ); + }); + }) + .flatMap(x => x.test_cases) + .map(test => { + return { + full_name: test.full_name, + status1: '', + status2: test.builds[0].test_status, + }; + }); + + //We create an array of matching test cases + + const matching_array = []; + secondBuildByBuildNumber.forEach(test_case2 => { + firstBuildByBuildNumber.forEach(test_case1 => { + if (test_case1.full_name === test_case2.full_name) { + matching_array.push({ + full_name: test_case1.full_name, + status1: test_case1.status1, + status2: test_case2.status2, + }); + } + }); + }); + + const second_not_matching = secondBuildByBuildNumber.filter(test_case => { + return !matching_array.some(matcher => { + return matcher.full_name === test_case.full_name; + }); + }); + + const first_not_matching = firstBuildByBuildNumber.filter(test_case => { + return !matching_array.some(matcher => { + return matcher.full_name === test_case.full_name; + }); + }); + + //We now have 3 arrays, one with matching elements and 2 with unmatching elements + let combined_json = []; + if (!compareFilterMatch.isChecked && !compareFilterMismatch.isChecked) { + combined_json = first_not_matching.concat( + matching_array, + second_not_matching + ); + } else if ( + compareFilterMatch.isChecked && + !compareFilterMismatch.isChecked + ) { + combined_json = first_not_matching.concat(second_not_matching); + } else if ( + !compareFilterMatch.isChecked && + compareFilterMismatch.isChecked + ) { + combined_json = matching_array; + } + + return combined_json.map(({ full_name, status1, status2 }) => { + return ( + + ); + }); +}; + +export default Body; diff --git a/frontend/src/components/ComparisonTable/ComparisonCheckbox.js b/frontend/src/components/ComparisonTable/ComparisonCheckbox.jsx similarity index 66% rename from frontend/src/components/ComparisonTable/ComparisonCheckbox.js rename to frontend/src/components/ComparisonTable/ComparisonCheckbox.jsx index 234d65b2..f3f81172 100644 --- a/frontend/src/components/ComparisonTable/ComparisonCheckbox.js +++ b/frontend/src/components/ComparisonTable/ComparisonCheckbox.jsx @@ -1,36 +1,22 @@ // eslint-disable-next-line import React, { useState } from 'react'; -/** @jsx jsx */ -import { css, jsx } from '@emotion/core'; import { useStateValue } from '../../contexts/state'; const Checkbox = () => { // eslint-disable-next-line const [{ compareFilterMatch, compareFilterMismatch }, dispatch] = useStateValue(); - const [mismatchFilter, setMismatchFilter] = useState(compareFilterMatch.isChecked); - const [matchFilter, setMatchFilter] = useState(compareFilterMismatch.isChecked); - - const filterStyles = css` - padding: 20px 0 40px; - label { - margin-right: 20px; - display: block; - float: left; - input { - margin-left: 8px; - position: relative; - top: -2.5px; - display: inline-block; - transform: scale(1.2); - } - } - `; + const [mismatchFilter, setMismatchFilter] = useState( + compareFilterMatch.isChecked + ); + const [matchFilter, setMatchFilter] = useState( + compareFilterMismatch.isChecked + ); const handleMatchFilterChange = e => { dispatch({ type: 'setCompareMatchFilter', filterType: matchFilter ? '' : e.target.value, - isChecked: !matchFilter + isChecked: !matchFilter, }); setMatchFilter(!matchFilter); @@ -40,14 +26,14 @@ const Checkbox = () => { dispatch({ type: 'setCompareMismatchFilter', filterType: mismatchFilter ? '' : e.target.value, - isChecked: !mismatchFilter + isChecked: !mismatchFilter, }); setMismatchFilter(!mismatchFilter); }; return ( -
+
- - - - - - - - - {metadata !== null && - metadata.map(({ metadata_name, metadata_value, metadata2_value }, index) => { - const value = - metadata_value.length > 200 - ? `${metadata_value.substring(0, 200)}...` - : metadata_value; - const value2= - metadata2_value.length > 200 - ? `${metadata2_value.substring(0, 200)}...` - : metadata2_value; - return ( - - - - - - ); - })} - -
Metadata{buildData.name}{buildData.name2}
{metadata_name}{value}{value2}
- - ); -}; - -export default Metadata3Table; \ No newline at end of file diff --git a/frontend/src/components/ComparisonTable/Metadata3Table.jsx b/frontend/src/components/ComparisonTable/Metadata3Table.jsx new file mode 100644 index 00000000..1d73b421 --- /dev/null +++ b/frontend/src/components/ComparisonTable/Metadata3Table.jsx @@ -0,0 +1,68 @@ +import React from 'react'; +import { useStateValue } from '../../contexts/state'; + +const Metadata3Table = () => { + const [ + { + metadataState, + parentData: { buildData }, + }, + ] = useStateValue(); + + const metadata = metadataState.metadata + ? metadataState.metadata.filter( + ({ suite_id }) => suite_id === metadataState.metadata[0].suite_id + ) + : null; + + return ( + buildData && ( + + + + + + + + + + {metadata !== null && + metadata.map( + ( + { + metadata_name, + metadata_value, + metadata2_value, + }, + index + ) => { + const value = + metadata_value.length > 200 + ? `${metadata_value.substring( + 0, + 200 + )}...` + : metadata_value; + const value2 = + metadata2_value.length > 200 + ? `${metadata2_value.substring( + 0, + 200 + )}...` + : metadata2_value; + return ( + + + + + + ); + } + )} + +
Metadata{buildData.name}{buildData.name2}
{metadata_name}{value}{value2}
+ ) + ); +}; + +export default Metadata3Table; diff --git a/frontend/src/components/ComparisonTable/ParentBuildComparison.js b/frontend/src/components/ComparisonTable/ParentBuildComparison.jsx similarity index 67% rename from frontend/src/components/ComparisonTable/ParentBuildComparison.js rename to frontend/src/components/ComparisonTable/ParentBuildComparison.jsx index 774fd7ab..d3708140 100644 --- a/frontend/src/components/ComparisonTable/ParentBuildComparison.js +++ b/frontend/src/components/ComparisonTable/ParentBuildComparison.jsx @@ -1,26 +1,23 @@ import React, { useEffect } from 'react'; import { useParams } from 'react-router'; import { useStateValue } from '../../contexts/state'; -import { buildTypes, suiteTypes,compareTypes } from '../../utils/parentDataTypes'; +import { suiteTypes } from '../../utils/parentDataTypes'; import ParentTable from './ParentTable'; const ParentSeries = () => { - const { seriesId, buildId, seriesId2, buildId2 } = useParams(); const [ { - parentData: { - buildData - } + parentData: { buildData }, }, - dispatch + dispatch, ] = useStateValue(); useEffect(() => { - const url = `/data/series/${seriesId}/builds/${buildId}/info?`; - const url2 = `/data/series/${seriesId2}/builds/${buildId2}/info?`; + const url = `/data/series/${seriesId}/builds/${buildId}/info/?`; + const url2 = `/data/series/${seriesId2}/builds/${buildId2}/info/?`; const fetchData = async () => { // dispatch({ type: 'setLoadingState', loadingState: true }); try { @@ -31,14 +28,13 @@ const ParentSeries = () => { const json2 = await res2.json(); const buildData2 = json2.build; - - buildData1.team2=buildData2.team - buildData1.name2=buildData2.name - buildData1.build_number2=buildData2.build_number - buildData1.build_id2=buildData2.build_id - buildData1.start_time2=buildData2.start_time + buildData1.team2 = buildData2.team; + buildData1.name2 = buildData2.name; + buildData1.build_number2 = buildData2.build_number; + buildData1.build_id2 = buildData2.build_id; + buildData1.start_time2 = buildData2.start_time; - const buildData = buildData1 + const buildData = buildData1; dispatch({ type: 'setBuildData', buildData }); // dispatch({ type: 'setLoadingState', loadingState: false }); } catch (error) { @@ -48,10 +44,7 @@ const ParentSeries = () => { fetchData(); }, [dispatch, seriesId, seriesId2, buildId, buildId2]); - const types = suiteTypes; - - return ; - + return ; }; export default ParentSeries; diff --git a/frontend/src/components/ComparisonTable/ParentTable.js b/frontend/src/components/ComparisonTable/ParentTable.js deleted file mode 100644 index cc0908cb..00000000 --- a/frontend/src/components/ComparisonTable/ParentTable.js +++ /dev/null @@ -1,75 +0,0 @@ -import React, { useContext } from 'react'; -import PropTypes from 'prop-types'; -/** @jsx jsx */ -import { css, jsx } from '@emotion/core'; -import * as R from 'ramda'; -import ThemeContext from '../../contexts/themeContext'; -import { compareTypes } from '../../utils/parentDataTypes' -const ParentTable = props => { - const theme = useContext(ThemeContext); - - const tableStyles = css` - ${theme.baseTableStyle} - - table { - border-collapse: collapse; - table-layout: fixed; - overflow: auto; - max-width: 100%; - } - - - td, - th { - vertical-align: middle; - } - `; - - const { data, types } = props; - - const headerRow = () => { - return types.map(name => { - return {name}; - }); - }; - - const bodyRow = () => { - const bodyValues = R.props(types, data); - - return bodyValues.map((value, index) => { - return {value}; - }); - }; - - const bodyRow2 = () => { - const bodyValues = R.props(compareTypes, data) - - return bodyValues.map((value, index) => { - return {value}; - }); - } - return ( - - {data && ( -
- - - {headerRow()} - - - {bodyRow()} - - - {bodyRow2()} - -
-
- - - )} - - ); -}; - - -export default ParentTable; diff --git a/frontend/src/components/ComparisonTable/ParentTable.jsx b/frontend/src/components/ComparisonTable/ParentTable.jsx new file mode 100644 index 00000000..3934563f --- /dev/null +++ b/frontend/src/components/ComparisonTable/ParentTable.jsx @@ -0,0 +1,49 @@ +import React from 'react'; +import * as R from 'ramda'; +import { compareTypes } from '../../utils/parentDataTypes'; +const ParentTable = props => { + const { data, types } = props; + + const headerRow = () => { + return types.map(name => { + return {name}; + }); + }; + + const bodyRow = () => { + const bodyValues = R.props(types, data); + + return bodyValues.map((value, index) => { + return {value}; + }); + }; + + const bodyRow2 = () => { + const bodyValues = R.props(compareTypes, data); + + return bodyValues.map((value, index) => { + return {value}; + }); + }; + return ( + + {data && ( +
+ + + {headerRow()} + + + {bodyRow()} + + + {bodyRow2()} + +
+
+ )} + + ); +}; + +export default ParentTable; diff --git a/frontend/src/components/ComparisonTable/Row.js b/frontend/src/components/ComparisonTable/Row.jsx similarity index 71% rename from frontend/src/components/ComparisonTable/Row.js rename to frontend/src/components/ComparisonTable/Row.jsx index 03d78a36..c6bb5c5e 100644 --- a/frontend/src/components/ComparisonTable/Row.js +++ b/frontend/src/components/ComparisonTable/Row.jsx @@ -1,38 +1,17 @@ -// eslint-disable-next-line import React, { Fragment } from 'react'; -/** @jsx jsx */ -import { css, jsx } from '@emotion/core'; import Status from './Status'; import { dashify } from '../../utils/helpers'; import { useLocation } from 'react-router'; import { Link } from 'react-router-dom'; const Row = ({ full_name, status1, status2 }) => { - const tableRowStyles = css` - .test-time-row { - text-align: right; - } - - .flakiness-row { - font-size: 14px; - text-align: center; - span { - width: 13px; - } - span + span { - margin-left: 2px; - } - } - `; - return ( - - {full_name} - - - - ); - + + {full_name} + + + + ); }; export default Row; diff --git a/frontend/src/components/ComparisonTable/Status.js b/frontend/src/components/ComparisonTable/Status.jsx similarity index 89% rename from frontend/src/components/ComparisonTable/Status.js rename to frontend/src/components/ComparisonTable/Status.jsx index 7b4ebb8c..178d0ca9 100644 --- a/frontend/src/components/ComparisonTable/Status.js +++ b/frontend/src/components/ComparisonTable/Status.jsx @@ -1,4 +1,3 @@ -// eslint-disable-next-line import React from 'react'; import { pickIcon } from '../TestIcon'; const Status = ({ status }) => { diff --git a/frontend/src/components/ComparisonTable/Table.js b/frontend/src/components/ComparisonTable/Table.js deleted file mode 100644 index cccfb239..00000000 --- a/frontend/src/components/ComparisonTable/Table.js +++ /dev/null @@ -1,64 +0,0 @@ -// eslint-disable-next-line -import React, { useContext } from 'react'; -/** @jsx jsx */ -import { css, jsx } from '@emotion/core'; -import ThemeContext from '../../contexts/themeContext'; -import { useStateValue } from '../../contexts/state'; - -import Body from './Body'; - -const Table = () => { - const [ - { - parentData: {buildData} , - } - ] = useStateValue(); - - const theme = useContext(ThemeContext); - - const tableStyles = css` - ${theme.baseTableStyle} - overflow: auto; - - table { - table-layout: fixed; - width: 100%; - border-collapse: collapse; - } - - thead th:nth-of-type(1) { - width: 80%; - } - - thead th:nth-of-type(2) { - width: 10%; - } - - thead th:nth-of-type(3) { - width: 10%; - } - - overflow: auto; - - ${theme.baseTableStyle} - `; - - return ( -
- - - - - - - - - - - -
Full Test Name{buildData.name} Status{buildData.name2} Status
-
- ); -}; - -export default Table; diff --git a/frontend/src/components/ComparisonTable/Table.jsx b/frontend/src/components/ComparisonTable/Table.jsx new file mode 100644 index 00000000..dd3a9235 --- /dev/null +++ b/frontend/src/components/ComparisonTable/Table.jsx @@ -0,0 +1,35 @@ +import React from 'react'; +import { useStateValue } from '../../contexts/state'; + +import Body from './Body'; + +const Table = () => { + const [ + { + parentData: { buildData }, + }, + ] = useStateValue(); + + return ( + buildData && ( + + + + + + + + + + + +
Full Test Name + {buildData.name} Status + + {buildData.name2} Status +
+ ) + ); +}; + +export default Table; diff --git a/frontend/src/components/MainNav.js b/frontend/src/components/MainNav.js deleted file mode 100644 index a78466e7..00000000 --- a/frontend/src/components/MainNav.js +++ /dev/null @@ -1,158 +0,0 @@ -// eslint-disable-next-line -import React, { useContext } from 'react'; -import { NavLink, useLocation } from 'react-router-dom'; -/** @jsx jsx */ -import { css, jsx } from '@emotion/core'; -import ThemeContext from '../contexts/themeContext'; -import packageJson from '../../package.json'; -import { useTranslation } from 'react-i18next'; - -const MainNav = () => { - const theme = useContext(ThemeContext); - const [t] = useTranslation(['mainnav']); - - const pathname = useLocation().pathname; - - const seriesUrl = pathname.includes('series'); - const suiteUrl = pathname.includes('suite'); - - const correctUrl = prop => { - if (pathname.includes(prop)) { - return pathname; - } - const beginningUrl = pathname.substring(0, pathname.lastIndexOf('/')); - return beginningUrl.concat('/' + prop); - }; - - const mainNavStyles = css` - flex: 0 0 240px; - @media only screen and (max-width: 999px) { - flex: 0 0 120px; - } - h2 { - padding: 0px 20px 0px 20px; - @media only screen and (max-width: 768px) { - display: block; - width: 0; - height: 40px; - padding: 0; - margin: 0; - overflow: hidden; - &:after { - display: block; - width: 100px; - top: 15px; - left: 10px; - content: 'Epi'; - position: absolute; - } - } - } - p { - padding: 20px 20px 0px 20px; - @media only screen and (max-width: 768px) { - display: block; - width: 0; - height: 40px; - padding: 0; - margin: 0; - overflow: hidden; - &:after { - display: none; - } - } - } - ul { - list-style-type: none; - padding: 0; - li { - font-size: 16px; - padding: & + li { - padding-top: ${theme.spacing.xs / 2}px; - } - - a { - display: block; - width: 100%; - padding: 15px 20px; - @media only screen and (max-width: 999px) { - padding: 15px 20px 15px 10px; - } - transition: 0.33s background-color; - &:hover, - &:active { - background-color: #ccc; - transition: 0.1s background-color; - } - } - &.nav-github { - margin-top: 1em; - font-weight: bold; - } - } - a.active { - font-weight: bold; - background-color: #ccc; - } - } - .sub-url { - padding-left: 5%; - } - `; - return ( - - ); -}; - -export default MainNav; diff --git a/frontend/src/components/SelectedTeam.js b/frontend/src/components/SelectedTeam.js deleted file mode 100644 index a401b56b..00000000 --- a/frontend/src/components/SelectedTeam.js +++ /dev/null @@ -1,116 +0,0 @@ -import React from 'react'; -import PropTypes from 'prop-types'; -import NotFound from './NotFound'; -import { useHistory } from 'react-router-dom'; -import theme from '../styles/theme'; -import BreadcrumbNav from './BreadcrumbNav'; -import { pickIcon } from './TestIcon'; -import { useTranslation } from 'react-i18next'; - -/** @jsx jsx */ -import { css, jsx } from '@emotion/core'; - -const SelectedTeam = ({ selectedTeam }) => { - const [t] = useTranslation(['team']); - - const cardStyles = css` - background-color: #fafafa; - box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 4px, - rgba(0, 0, 0, 0.23) 0px 3px 4px; - margin: 10px; - padding: 10px; - - .series:hover, - .builds:hover { - cursor: pointer; - } - `; - - let history = useHistory(); - - const flexContainer = { - display: 'flex', - flexWrap: 'wrap' - }; - - const TeamCard = ({ data }) => { - const { - id, - name, - builds, - last_build, - last_build_id, - last_started, - last_status - } = data; - - const LastStarted = last_started.slice(0, 16); - const testStatusIcon = pickIcon(last_status); - return ( -
-
-

{name}

-
-
-
-
history.push(`/series/${id}/history`)} - role={'presentation'} - > -

{t('card.series.title')}

- {t('card.series.builds')}: {builds} -
-
-
- history.push( - `/series/${id}/build/${last_build}/history` - ) - } - role={'presentation'} - > -

{t('card.last_build.title')}

- {t('card.last_build.build_number')}: {last_build} -
- {t('card.last_build.build_id')}: {last_build_id} -
- {t('card.last_build.last_build_started')}: {LastStarted} -
- {t('card.last_build.last_status')}: {testStatusIcon} -
-
-
- ); - }; - - return ( -
- - {selectedTeam && selectedTeam.all_builds ? ( -
- - {selectedTeam.series.reverse().map((serie, i) => { - return ; - })} -
- ) : ( - - )} -
- ); -}; - -SelectedTeam.propTypes = { - selectedTeam: PropTypes.shape({ - all_builds: PropTypes.object, - name: PropTypes.string, - series: PropTypes.array, - series_count: PropTypes.number - }) -}; - -export default SelectedTeam; diff --git a/frontend/src/pages/Comparison.js b/frontend/src/pages/Comparison.jsx similarity index 51% rename from frontend/src/pages/Comparison.js rename to frontend/src/pages/Comparison.jsx index 39b5b9c4..2524b314 100644 --- a/frontend/src/pages/Comparison.js +++ b/frontend/src/pages/Comparison.jsx @@ -4,33 +4,16 @@ import ComparisonCheckbox from '../components/ComparisonTable/ComparisonCheckbox import { useStateValue } from '../contexts/state'; import Metadata3Table from '../components/ComparisonTable/Metadata3Table'; import { useParams } from 'react-router'; -/** @jsx jsx */ -import { css, jsx } from '@emotion/core'; import BreadcrumbNav from '../components/BreadcrumbNav'; import ParentBuildComparison from '../components/ComparisonTable/ParentBuildComparison'; -import ComparisonForm from '../components/ComparisonForm/ComparisonForm' +import ComparisonForm from '../components/ComparisonForm/ComparisonForm'; +import { ContainerGrid12, ContentGrid6 } from '../styles/baseComponents'; const Build = () => { - const buildStyles = css` - position: relative; - margin-top: 10px; - .filter-container, - .parentInfo-container { - display: flex; - } + const [{ loadingState }, dispatch] = useStateValue(); - .parentInfo-container { - padding: 20px 0; - } - `; - const [ - { loadingState}, - dispatch - ] = useStateValue(); - let { buildId, seriesId, buildId2, seriesId2 } = useParams(); - useEffect(() => { const fetchData = async () => { dispatch({ type: 'setLoadingState', loadingState: true }); @@ -41,45 +24,55 @@ const Build = () => { {} ); let json = await res.json(); - + const res2 = await fetch( `/data/series/${seriesId2}/builds/${buildId2}/metadata`, {} ); - let json2=await res2.json(); + let json2 = await res2.json(); json2.metadata.forEach(meta => { const name = meta.metadata_name; let index = 0; let found = 0; - let metadata_len = json.metadata.length - while(index < metadata_len && found === 0) { - if(json.metadata[index].metadata_name === name){ - found=1; - }else{ + let metadata_len = json.metadata.length; + while (index < metadata_len && found === 0) { + if (json.metadata[index].metadata_name === name) { + found = 1; + } else { index++; } } - if(found === 0){ - const temp = {'metadata_name': name, 'metadata_value':'', 'suite_id':'', 'test_run_id':'', 'metadata2_value':meta.metadata_value, 'suite2_id': meta.suite_id, 'test2_run_id': meta.test_run_id} + if (found === 0) { + const temp = { + metadata_name: name, + metadata_value: '', + suite_id: '', + test_run_id: '', + metadata2_value: meta.metadata_value, + suite2_id: meta.suite_id, + test2_run_id: meta.test_run_id, + }; json.metadata.push(temp); - }else{ - json.metadata[index].metadata2_value= meta.metadata_value; - json.metadata[index].suite2_id=meta.suite_id; - json.metadata[index].test2_run_id=meta.test_run_id + } else { + json.metadata[index].metadata2_value = + meta.metadata_value; + json.metadata[index].suite2_id = meta.suite_id; + json.metadata[index].test2_run_id = + meta.test_run_id; } }); json.metadata.forEach(meta => { - if(!('metadata2_value' in meta)){ - meta.metadata2_value=''; - meta.suite2_id=''; - meta.test2_run_id=''; + if (!('metadata2_value' in meta)) { + meta.metadata2_value = ''; + meta.suite2_id = ''; + meta.test2_run_id = ''; } - }); + }); dispatch({ type: 'setLoadingState', loadingState: false }); dispatch({ type: 'setMetadata', - metadata: json + metadata: json, }); } catch (error) { //console.log(error); @@ -103,65 +96,61 @@ const Build = () => { const json2 = await res2.json(); - const jsoni = [json.history, json2.history] + const jsoni = [json.history, json2.history]; //What is required? Json with Fullname as "key" -> 1 status of test, 2 status of test dispatch({ type: 'setLoadingState', loadingState: false }); dispatch({ type: 'updateCompared', - compareData: jsoni + compareData: jsoni, }); } catch (error) {} } }; - if ((seriesId && buildId && seriesId2 && buildId2)) { + if (seriesId && buildId && seriesId2 && buildId2) { fetchComparisonData(); fetchData(); } }, [dispatch, seriesId, seriesId2, buildId2, buildId]); return ( -
-
- {loadingState ? ( -
- Loading -
- ) : (seriesId && buildId && seriesId2 && buildId2) ? ( - -
- Content loaded. -
- -
- -
- - - - - - ) : ( -
- + + +
+ {loadingState ? ( +
+ Loading +
+ ) : seriesId && buildId && seriesId2 && buildId2 ? ( + +
+ Content loaded. +
+ + + + +
+ + ) : ( + + )} - ) - - } - + + ); }; diff --git a/frontend/src/pages/Frontpage.js b/frontend/src/pages/Frontpage.js deleted file mode 100644 index b9037e13..00000000 --- a/frontend/src/pages/Frontpage.js +++ /dev/null @@ -1,94 +0,0 @@ -// eslint-disable-next-line -import React from 'react'; -/** @jsx jsx */ -import { css, jsx } from '@emotion/core'; -import { useTranslation } from 'react-i18next'; - - -const sha = process.env.REACT_APP_GITHUB_SHA - -const Frontpage = () => { - const frontpageStyles = css` - max-width: 800px; - width: 100%; - `; - const [t] = useTranslation(['frontpage']); - return ( -
-

{t('title')}

-

{t('opening_paragraph')}

- -

{t('section.roadmap.title')}

-

{t('section.roadmap.opening_paragraph')}

-
    -
  • {t('section.roadmap.ms_202002')}
    • -
  • {t('section.roadmap.ms_202003_1')}
    • -
  • {t('section.roadmap.ms_202003_2')}
    • -
- -

{t('section.terminology.title')}

-

{t('section.terminology.opening_paragraph')}

- - -

{t('section.icons.title')}

-

{t('section.icons.opening_paragraph')}

- icon legend - -

{t('section.views.title')}

-
    -
  • {t('section.views.history')}
    • -
  • {t('section.views.team')}
    • -
  • {t('section.views.suite')}
    • -
- -

{t('section.feedback.title')}

-

- {t('section.feedback.text')} - - {t('section.feedback.link_text')} - - . -

- -

{t('section.contribute.title')}

-

- {t('section.contribute.text')} - - {t('section.contribute.link_text')} - - . -

-

{t('section.licence.title')}

-

- {t('section.licence.text')} - - {t('section.licence.link_text')} - - . -

-

{"Git Version"}

-

- Built From Git Commit: {sha} -

-
- ); -}; - -export default Frontpage; diff --git a/frontend/src/pages/Search.js b/frontend/src/pages/Search.js deleted file mode 100644 index 450d01d5..00000000 --- a/frontend/src/pages/Search.js +++ /dev/null @@ -1,114 +0,0 @@ -// eslint-disable-next-line -import React,{ useState, useEffect, Fragment } from 'react'; -/** @jsx jsx */ -import { css, jsx } from '@emotion/core'; -import { useHistory } from 'react-router-dom'; - -const Search = () => { - - - let history = useHistory(); - const buildStyles = css` - position: relative; - margin-top: 10px; - .filter-container, - .parentInfo-container { - display: flex; - } - - .parentInfo-container { - padding: 20px 0; - } - `; - - const [seriesList, setSeriesList] = useState([]); - const [buildList, setBuildList] = useState([]); - const [series, setSeries] = useState(); - const [build, setBuild] = useState(); - const [loadingState, setLoadingState] = useState(false); - const [seriesLoading, setSeriesLoading] = useState(true); - - useEffect(() => { - let isCancelled = false; - const fetchData = async () => { - setLoadingState(true) - try { - const res = await fetch('/data/series', {}); - const json = await res.json(); - if(!isCancelled){ - setLoadingState(false) - setSeriesLoading(false) - setSeriesList(json.series); - } - - } catch (error) { - console.log(error) - } - }; - - const fetchBuildData = async () => { - setLoadingState(true) - try { - const res = await fetch(`/data/series/${series}/builds/`, {}); - const json = await res.json(); - if(!isCancelled){ - setLoadingState(false) - setBuildList(json.builds); - } - } catch (error) { - console.log(error) - } - }; - - - if(!series){ - fetchData(); - } - if(!seriesLoading){ - if(series){ - fetchBuildData(); - } - } - return() => { - isCancelled = true; - } - }, [series, build]); - - return( -
- {loadingState ? ( -
Please Wait
- ) : ( -
history.push(`/series/${series}/build/${build}/history`)}> -
-
-

Series1

- -
-
-

Build1

- -
-
- - - )} -
- ); -}; - -export default Search; diff --git a/frontend/src/pages/Search.jsx b/frontend/src/pages/Search.jsx new file mode 100644 index 00000000..e6d8f2c8 --- /dev/null +++ b/frontend/src/pages/Search.jsx @@ -0,0 +1,128 @@ +import React, { useState, useEffect } from 'react'; +import { useHistory } from 'react-router-dom'; +import { ContainerGrid12, ContentGrid6 } from '../styles/baseComponents'; + +const Search = () => { + let history = useHistory(); + + const [seriesList, setSeriesList] = useState([]); + const [buildList, setBuildList] = useState([]); + const [series, setSeries] = useState(); + const [build, setBuild] = useState(); + const [loadingState, setLoadingState] = useState(false); + const [seriesLoading, setSeriesLoading] = useState(true); + + useEffect(() => { + let isCancelled = false; + const fetchData = async () => { + setLoadingState(true); + try { + const res = await fetch('/data/series?', {}); + const json = await res.json(); + if (!isCancelled) { + setLoadingState(false); + setSeriesLoading(false); + setSeriesList(json.series); + } + } catch (error) { + console.log(error); + } + }; + + const fetchBuildData = async () => { + setLoadingState(true); + try { + const res = await fetch(`/data/series/${series}/builds/?`, {}); + const json = await res.json(); + if (!isCancelled) { + setLoadingState(false); + setBuildList(json.builds); + } + } catch (error) { + console.log(error); + } + }; + + if (!series) { + fetchData(); + } + if (!seriesLoading) { + if (series) { + fetchBuildData(); + } + } + return () => { + isCancelled = true; + }; + }, [series, build]); + + return ( + + + {loadingState ? ( +
Please Wait
+ ) : ( +
+ history.push( + `/series/${series}/build/${build}/history` + ) + } + > +
+
+

Series1

+ +
+
+

Build1

+ +
+
+ + + )} + + + ); +}; + +export default Search; diff --git a/frontend/src/utils/parentDataTypes.js b/frontend/src/utils/parentDataTypes.js index 11658988..840f19ed 100644 --- a/frontend/src/utils/parentDataTypes.js +++ b/frontend/src/utils/parentDataTypes.js @@ -1,4 +1,5 @@ -export const buildTypes = [ +export const seriesTypes = ['team', 'name', 'builds']; +export const buildTypes = [ 'team', 'name', 'build_number', @@ -6,11 +7,18 @@ 'status', 'start_time', ]; +export const suiteTypes = [ + 'team', + 'name', + 'build_number', + 'build_id', + 'start_time', +]; export const compareTypes = [ 'team2', 'name2', 'build_number2', 'build_id2', - 'start_time2' -] \ No newline at end of file + 'start_time2', +]; From 2fd68ad12748013b42599710faba54d3b917245b Mon Sep 17 00:00:00 2001 From: Tiia Valtonen Date: Wed, 7 Apr 2021 11:14:39 +0300 Subject: [PATCH 05/22] 176 - Add breadcrumbs for compare view --- frontend/src/components/BreadcrumbNav.jsx | 30 ++++++++++- frontend/src/pages/Comparison.jsx | 63 +++++++++++------------ 2 files changed, 59 insertions(+), 34 deletions(-) diff --git a/frontend/src/components/BreadcrumbNav.jsx b/frontend/src/components/BreadcrumbNav.jsx index 13290221..ad552adc 100644 --- a/frontend/src/components/BreadcrumbNav.jsx +++ b/frontend/src/components/BreadcrumbNav.jsx @@ -25,7 +25,15 @@ const LinkItem = props => { }; const ListItems = ({ status }) => { - const { name, series, seriesId, buildId, suiteId } = useParams(); + const { + name, + series, + seriesId, + buildId, + suiteId, + seriesId2, + buildId2, + } = useParams(); const [{ selectedBranchState }] = useStateValue(); const teamName = name || selectedBranchState.team; const seriesName = series || selectedBranchState.id; @@ -59,6 +67,16 @@ const ListItems = ({ status }) => { id: 'SuiteBreadCrumb', ariaLabel: `${suiteId}: suite's id`, name: suiteId, + }) + .set('compare', { + to: `/compare`, + id: 'CompareBreadCrumb', + name: 'Compare', + }) + .set('compareBuilds', { + to: `/compare/${seriesId}/${buildId}/to/${seriesId2}/${buildId2}`, + id: 'CompareBuildsBreadCrumb', + name: `Compare series ${seriesId} build ${buildId} to series ${seriesId2} build ${buildId2}`, }); const breadcrumbArray = []; @@ -93,6 +111,16 @@ const ListItems = ({ status }) => { ); break; + case 'compare': + breadcrumbArray.push( + , + + ); + break; default: breadcrumbArray.push(''); } diff --git a/frontend/src/pages/Comparison.jsx b/frontend/src/pages/Comparison.jsx index 2524b314..0d7e23a0 100644 --- a/frontend/src/pages/Comparison.jsx +++ b/frontend/src/pages/Comparison.jsx @@ -1,4 +1,4 @@ -import React, { Fragment, useEffect } from 'react'; +import React, { useEffect } from 'react'; import Table from '../components/ComparisonTable/Table'; import ComparisonCheckbox from '../components/ComparisonTable/ComparisonCheckbox'; import { useStateValue } from '../contexts/state'; @@ -8,6 +8,7 @@ import BreadcrumbNav from '../components/BreadcrumbNav'; import ParentBuildComparison from '../components/ComparisonTable/ParentBuildComparison'; import ComparisonForm from '../components/ComparisonForm/ComparisonForm'; import { ContainerGrid12, ContentGrid6 } from '../styles/baseComponents'; +import Loading from '../components/Loading'; const Build = () => { const [{ loadingState }, dispatch] = useStateValue(); @@ -115,42 +116,38 @@ const Build = () => { }, [dispatch, seriesId, seriesId2, buildId2, buildId]); return ( - - -
- {loadingState ? ( -
- Loading -
- ) : seriesId && buildId && seriesId2 && buildId2 ? ( - -
- Content loaded. -
- +
+ {loadingState ? ( + + + + + + ) : seriesId && buildId && seriesId2 && buildId2 ? ( + <> +
+ Content loaded. +
+ + +
- - ) : ( - - )} - - - + + + + ) : ( + + )} + ); }; From 84b36ce15d6bbd9a8616d3c73bcc273c8afb4522 Mon Sep 17 00:00:00 2001 From: Tiia Valtonen Date: Mon, 12 Apr 2021 12:49:06 +0300 Subject: [PATCH 06/22] 176 - Change Table's kebab case to camel case --- .../components/buildsTestResultTable/BuildsTestResultTable.jsx | 2 +- .../components/keywordAnalysisTable/KeywordAnalysisTable.jsx | 2 +- .../components/seriesTestResultTable/SeriesTestResultTable.jsx | 2 +- frontend/src/components/suite/LogMessagesTable.jsx | 2 +- frontend/src/components/table/Table.jsx | 3 +-- 5 files changed, 5 insertions(+), 6 deletions(-) diff --git a/frontend/src/components/buildsTestResultTable/BuildsTestResultTable.jsx b/frontend/src/components/buildsTestResultTable/BuildsTestResultTable.jsx index 9df44bc2..1020ea52 100644 --- a/frontend/src/components/buildsTestResultTable/BuildsTestResultTable.jsx +++ b/frontend/src/components/buildsTestResultTable/BuildsTestResultTable.jsx @@ -8,7 +8,7 @@ const BuildsTestResultTable = ({ id }) => { const [t] = useTranslation(['history']); return ( -
+
{t('build.table.suite')} diff --git a/frontend/src/components/keywordAnalysisTable/KeywordAnalysisTable.jsx b/frontend/src/components/keywordAnalysisTable/KeywordAnalysisTable.jsx index 82183e2e..6ebe89f8 100644 --- a/frontend/src/components/keywordAnalysisTable/KeywordAnalysisTable.jsx +++ b/frontend/src/components/keywordAnalysisTable/KeywordAnalysisTable.jsx @@ -28,7 +28,7 @@ const DashboardList = () => { }, [dispatch, seriesId, buildId]); return ( -
+
{t('table.library')} diff --git a/frontend/src/components/seriesTestResultTable/SeriesTestResultTable.jsx b/frontend/src/components/seriesTestResultTable/SeriesTestResultTable.jsx index c7778c97..f37d2c15 100644 --- a/frontend/src/components/seriesTestResultTable/SeriesTestResultTable.jsx +++ b/frontend/src/components/seriesTestResultTable/SeriesTestResultTable.jsx @@ -14,7 +14,7 @@ const SeriesTestResultTable = () => { if (max_build_num > 0) { return ( -
+
diff --git a/frontend/src/components/suite/LogMessagesTable.jsx b/frontend/src/components/suite/LogMessagesTable.jsx index 40d98d3f..a2241ea3 100644 --- a/frontend/src/components/suite/LogMessagesTable.jsx +++ b/frontend/src/components/suite/LogMessagesTable.jsx @@ -6,7 +6,7 @@ import { Table } from '../table/Table'; const LogMessagesTable = ({ test }) => { return test ? ( - +
diff --git a/frontend/src/components/table/Table.jsx b/frontend/src/components/table/Table.jsx index 926a800e..577cde14 100644 --- a/frontend/src/components/table/Table.jsx +++ b/frontend/src/components/table/Table.jsx @@ -8,8 +8,7 @@ import { import ScrollTableButton from './ScrollTableButton'; export const Table = props => { - const tableId = props['table-id']; - const simpleTable = props['simple-table']; + const { tableId, simpleTable } = props; const ref = React.createRef(); const [canScrollLeft, setCanScrollLeft] = useState(false); From 926c974a444467925de47b8af3c1d637c33bfad8 Mon Sep 17 00:00:00 2001 From: Tiia Valtonen Date: Wed, 7 Apr 2021 14:02:47 +0300 Subject: [PATCH 07/22] 176 - Some UI improvements --- .../ComparisonForm/ComparisonForm.jsx | 331 +++++++++--------- .../src/components/ComparisonTable/Body.jsx | 4 +- .../ComparisonTable/Metadata3Table.jsx | 5 +- .../ComparisonTable/ParentTable.jsx | 23 +- .../src/components/ComparisonTable/Row.jsx | 80 ++--- .../{Table.jsx => TestComparisonTable.jsx} | 9 +- frontend/src/pages/Comparison.jsx | 18 +- frontend/src/pages/Comparison.styles.js | 5 + frontend/src/pages/Search.jsx | 118 ++++--- 9 files changed, 316 insertions(+), 277 deletions(-) rename frontend/src/components/ComparisonTable/{Table.jsx => TestComparisonTable.jsx} (81%) create mode 100644 frontend/src/pages/Comparison.styles.js diff --git a/frontend/src/components/ComparisonForm/ComparisonForm.jsx b/frontend/src/components/ComparisonForm/ComparisonForm.jsx index d65de0d3..389a68cb 100644 --- a/frontend/src/components/ComparisonForm/ComparisonForm.jsx +++ b/frontend/src/components/ComparisonForm/ComparisonForm.jsx @@ -1,6 +1,7 @@ -// eslint-disable-next-line -import React,{ useState, useEffect, Fragment } from 'react'; +import React, { useState, useEffect } from 'react'; import { useHistory } from 'react-router-dom'; +import Loading from '../../components/Loading'; +import { ContainerGrid12, ContentGrid6 } from '../../styles/baseComponents'; const ComparisonForm = () => { let history = useHistory(); @@ -115,185 +116,203 @@ const ComparisonForm = () => { return () => { isCancelled = true; }; - }, [team, team2, series, series2, build, build2]); + }, [team, team2, series, series2, build, build2, seriesLoading, teamList]); return (
{loadingState ? ( -
Please Wait
+ + + + + ) : ( -
- history.push( - `/compare/${series}/${build}/to/${series2}/${build2}` - ) - } - > -
-
-

Team1

- setTeam(e.target.value)} + > - ); - })} - -
-
-

Series1

- +
+
+

Series1

+ -
-
-

Build1

- +
+
+

Build1

+ -
-
-
-
-

Team2

- +
+
+
- - {teamList.map(team => { - return ( +
+

Team2

+ -
-
-

Series2

- +
+
+

Series2

+ -
-
-

Build2

- +
+
+

Build2

+ -
-
- - + {buildList2.map(build => { + return ( + + ); + })} + +
+ + + + + )} ); diff --git a/frontend/src/components/ComparisonTable/Body.jsx b/frontend/src/components/ComparisonTable/Body.jsx index 090f7d31..de2c04db 100644 --- a/frontend/src/components/ComparisonTable/Body.jsx +++ b/frontend/src/components/ComparisonTable/Body.jsx @@ -3,7 +3,7 @@ import Row from './Row'; import { useStateValue } from '../../contexts/state'; import { useParams } from 'react-router'; -const Body = ({ id }) => { +const Body = () => { const [ { comparedDataState, compareFilterMatch, compareFilterMismatch }, ] = useStateValue(); @@ -11,7 +11,7 @@ const Body = ({ id }) => { // Do we want last-run page filters to work on suite-level (false) // or test-level (true)? - const SUITE_FILTER_NESTED = true; + // const SUITE_FILTER_NESTED = true; // Get result for this specific run , as well as parse the full name of a test case and the result of the test case. diff --git a/frontend/src/components/ComparisonTable/Metadata3Table.jsx b/frontend/src/components/ComparisonTable/Metadata3Table.jsx index 1d73b421..b5382cc5 100644 --- a/frontend/src/components/ComparisonTable/Metadata3Table.jsx +++ b/frontend/src/components/ComparisonTable/Metadata3Table.jsx @@ -1,5 +1,6 @@ import React from 'react'; import { useStateValue } from '../../contexts/state'; +import { Table } from '../table/Table'; const Metadata3Table = () => { const [ @@ -17,7 +18,7 @@ const Metadata3Table = () => { return ( buildData && ( -
Level
+
@@ -60,7 +61,7 @@ const Metadata3Table = () => { } )} -
Metadata
+ ) ); }; diff --git a/frontend/src/components/ComparisonTable/ParentTable.jsx b/frontend/src/components/ComparisonTable/ParentTable.jsx index 3934563f..f588efd6 100644 --- a/frontend/src/components/ComparisonTable/ParentTable.jsx +++ b/frontend/src/components/ComparisonTable/ParentTable.jsx @@ -1,6 +1,7 @@ import React from 'react'; import * as R from 'ramda'; import { compareTypes } from '../../utils/parentDataTypes'; +import { Table } from '../table/Table'; const ParentTable = props => { const { data, types } = props; @@ -28,19 +29,15 @@ const ParentTable = props => { return ( {data && ( -
- - - {headerRow()} - - - {bodyRow()} - - - {bodyRow2()} - -
-
+ + + {headerRow()} + + + {bodyRow()} + {bodyRow2()} + +
)} ); diff --git a/frontend/src/components/ComparisonTable/Row.jsx b/frontend/src/components/ComparisonTable/Row.jsx index c6bb5c5e..c18954f7 100644 --- a/frontend/src/components/ComparisonTable/Row.jsx +++ b/frontend/src/components/ComparisonTable/Row.jsx @@ -1,8 +1,8 @@ -import React, { Fragment } from 'react'; +import React from 'react'; import Status from './Status'; -import { dashify } from '../../utils/helpers'; -import { useLocation } from 'react-router'; -import { Link } from 'react-router-dom'; +// import { dashify } from '../../utils/helpers'; +// import { useLocation } from 'react-router'; +// import { Link } from 'react-router-dom'; const Row = ({ full_name, status1, status2 }) => { return ( @@ -16,41 +16,41 @@ const Row = ({ full_name, status1, status2 }) => { export default Row; -const TestCase = ({ testCases, index, suiteId, testId }) => { - const testCase = testCases[index].test_case; - const pathname = useLocation().pathname; - const correctUrl = pathname.substring(0, pathname.lastIndexOf('/')); - return ( - - - {testCase} - - - ); -}; +// const TestCase = ({ testCases, index, suiteId, testId }) => { +// const testCase = testCases[index].test_case; +// const pathname = useLocation().pathname; +// const correctUrl = pathname.substring(0, pathname.lastIndexOf('/')); +// return ( +// +// +// {testCase} +// +// +// ); +// }; // Show suite name separated on different lines with dots showing depth level -const LinksSuiteName = ({ tableCellHeight, suiteName, suiteId }) => { - const pathname = useLocation().pathname; - const correctUrl = pathname.substring(0, pathname.lastIndexOf('/')); - let tempSuiteName = suiteName.split('.'); - let splitSuiteName = []; - for (var index = 0; index < tempSuiteName.length; index++) { - let el = tempSuiteName[index]; - splitSuiteName.push( - - .{el} -
- - ); - } - - return ( - - - Build - {splitSuiteName} - - - ); -}; +// const LinksSuiteName = ({ tableCellHeight, suiteName, suiteId }) => { +// const pathname = useLocation().pathname; +// const correctUrl = pathname.substring(0, pathname.lastIndexOf('/')); +// let tempSuiteName = suiteName.split('.'); +// let splitSuiteName = []; +// for (var index = 0; index < tempSuiteName.length; index++) { +// let el = tempSuiteName[index]; +// splitSuiteName.push( +// +// .{el} +//
+// +// ); +// } +// +// return ( +// +// +// Build +// {splitSuiteName} +// +// +// ); +// }; diff --git a/frontend/src/components/ComparisonTable/Table.jsx b/frontend/src/components/ComparisonTable/TestComparisonTable.jsx similarity index 81% rename from frontend/src/components/ComparisonTable/Table.jsx rename to frontend/src/components/ComparisonTable/TestComparisonTable.jsx index dd3a9235..18486066 100644 --- a/frontend/src/components/ComparisonTable/Table.jsx +++ b/frontend/src/components/ComparisonTable/TestComparisonTable.jsx @@ -1,9 +1,10 @@ import React from 'react'; import { useStateValue } from '../../contexts/state'; +import { Table } from '../table/Table'; import Body from './Body'; -const Table = () => { +const TestComparisonTable = () => { const [ { parentData: { buildData }, @@ -12,7 +13,7 @@ const Table = () => { return ( buildData && ( - +
@@ -27,9 +28,9 @@ const Table = () => { -
Full Test Name
+ ) ); }; -export default Table; +export default TestComparisonTable; diff --git a/frontend/src/pages/Comparison.jsx b/frontend/src/pages/Comparison.jsx index 0d7e23a0..7398c2db 100644 --- a/frontend/src/pages/Comparison.jsx +++ b/frontend/src/pages/Comparison.jsx @@ -1,5 +1,5 @@ import React, { useEffect } from 'react'; -import Table from '../components/ComparisonTable/Table'; +import TestComparisonTable from '../components/ComparisonTable/TestComparisonTable'; import ComparisonCheckbox from '../components/ComparisonTable/ComparisonCheckbox'; import { useStateValue } from '../contexts/state'; import Metadata3Table from '../components/ComparisonTable/Metadata3Table'; @@ -9,6 +9,7 @@ import ParentBuildComparison from '../components/ComparisonTable/ParentBuildComp import ComparisonForm from '../components/ComparisonForm/ComparisonForm'; import { ContainerGrid12, ContentGrid6 } from '../styles/baseComponents'; import Loading from '../components/Loading'; +import { TableContainer } from './Comparison.styles'; const Build = () => { const [{ loadingState }, dispatch] = useStateValue(); @@ -137,10 +138,19 @@ const Build = () => { - - +

+ Comparison between series {seriesId} build{' '} + {buildId} and series {seriesId2} build{' '} + {buildId2} +

+ + + + + + - + diff --git a/frontend/src/pages/Comparison.styles.js b/frontend/src/pages/Comparison.styles.js new file mode 100644 index 00000000..e870ad28 --- /dev/null +++ b/frontend/src/pages/Comparison.styles.js @@ -0,0 +1,5 @@ +import styled from 'styled-components'; + +export const TableContainer = styled.div` + margin-bottom: var(--space-32); +`; diff --git a/frontend/src/pages/Search.jsx b/frontend/src/pages/Search.jsx index e6d8f2c8..6dc648ad 100644 --- a/frontend/src/pages/Search.jsx +++ b/frontend/src/pages/Search.jsx @@ -1,5 +1,6 @@ import React, { useState, useEffect } from 'react'; import { useHistory } from 'react-router-dom'; +import Loading from '../components/Loading'; import { ContainerGrid12, ContentGrid6 } from '../styles/baseComponents'; const Search = () => { @@ -60,65 +61,70 @@ const Search = () => { {loadingState ? ( -
Please Wait
+ ) : ( -
- history.push( - `/series/${series}/build/${build}/history` - ) - } - > -
+

Search

+ + history.push( + `/series/${series}/build/${build}/history` + ) + } > -
-

Series1

- +
+
+

Series1

+ +
+
+

Build1

+ +
-
-

Build1

- -
-
- - + + + )} From 391a3f08743d02444f47cd8cab61f5dd772ef982 Mon Sep 17 00:00:00 2001 From: Tiia Valtonen Date: Wed, 7 Apr 2021 14:12:52 +0300 Subject: [PATCH 08/22] 176 - Add Search and Compare links to mainNav at least for now --- frontend/src/components/MainNav.jsx | 14 +++++++++++++- frontend/src/components/MainNav.styles.js | 2 +- frontend/src/locales/en/mainnav.json | 2 ++ 3 files changed, 16 insertions(+), 2 deletions(-) diff --git a/frontend/src/components/MainNav.jsx b/frontend/src/components/MainNav.jsx index b6e84133..6dab762a 100644 --- a/frontend/src/components/MainNav.jsx +++ b/frontend/src/components/MainNav.jsx @@ -11,18 +11,30 @@ const MainNav = () => { const team = location.pathname.includes('team') || location.pathname.includes('series'); + const compare = location.pathname.includes('compare'); + const search = location.pathname.includes('search'); return (
{t('logo')} - + {t('help')} {t('team')} + + {t('compare')} + + + {t('search')} + Date: Wed, 7 Apr 2021 15:18:40 +0300 Subject: [PATCH 09/22] 176 - Improve search view --- .../dropdown/DropdownSelect.styles.js | 2 + frontend/src/pages/Search.jsx | 124 ++++++++---------- frontend/src/pages/Search.styles.js | 15 +++ 3 files changed, 70 insertions(+), 71 deletions(-) create mode 100644 frontend/src/pages/Search.styles.js diff --git a/frontend/src/components/dropdown/DropdownSelect.styles.js b/frontend/src/components/dropdown/DropdownSelect.styles.js index c5d5511f..5ef503b9 100644 --- a/frontend/src/components/dropdown/DropdownSelect.styles.js +++ b/frontend/src/components/dropdown/DropdownSelect.styles.js @@ -50,6 +50,8 @@ export const DropdownWrapper = styled.div` border-radius: var(--space-4); box-shadow: 0 3px 5px 1px var(--tonic-grey); padding: 5px 3px; + max-height: 30vh; + overflow: auto; z-index: 10; } diff --git a/frontend/src/pages/Search.jsx b/frontend/src/pages/Search.jsx index 6dc648ad..566c1edc 100644 --- a/frontend/src/pages/Search.jsx +++ b/frontend/src/pages/Search.jsx @@ -1,61 +1,63 @@ import React, { useState, useEffect } from 'react'; -import { useHistory } from 'react-router-dom'; import Loading from '../components/Loading'; +import DropdownSelect from '../components/buttons/DropdownSelect'; import { ContainerGrid12, ContentGrid6 } from '../styles/baseComponents'; +import { DropdownContainer, SearchAction } from './Search.styles'; const Search = () => { - let history = useHistory(); - const [seriesList, setSeriesList] = useState([]); const [buildList, setBuildList] = useState([]); const [series, setSeries] = useState(); const [build, setBuild] = useState(); const [loadingState, setLoadingState] = useState(false); + const [loadingStateBuild, setLoadingStateBuild] = useState(false); const [seriesLoading, setSeriesLoading] = useState(true); useEffect(() => { let isCancelled = false; - const fetchData = async () => { + const fetchSeriesData = async () => { setLoadingState(true); try { - const res = await fetch('/data/series?', {}); + const res = await fetch('/data/series/?', {}); const json = await res.json(); if (!isCancelled) { - setLoadingState(false); setSeriesLoading(false); setSeriesList(json.series); + setLoadingState(false); } } catch (error) { - console.log(error); + // console.log(error); } }; const fetchBuildData = async () => { - setLoadingState(true); + setLoadingStateBuild(true); try { const res = await fetch(`/data/series/${series}/builds/?`, {}); const json = await res.json(); if (!isCancelled) { - setLoadingState(false); setBuildList(json.builds); + setLoadingStateBuild(false); } } catch (error) { - console.log(error); + // console.log(error); } }; if (!series) { - fetchData(); + fetchSeriesData(); } if (!seriesLoading) { if (series) { + setBuild(undefined); + setBuildList([]); fetchBuildData(); } } return () => { isCancelled = true; }; - }, [series, build]); + }, [series, seriesLoading]); return ( @@ -64,66 +66,46 @@ const Search = () => { ) : ( <> -

Search

-
- history.push( - `/series/${series}/build/${build}/history` - ) - } - > -
Search for a build + + { + return { + value: series.id, + label: series.name, + id: series.id, + }; + })} + onChange={e => setSeries(e)} + initialValue={series ? series : ''} + id="select-series-search" + /> + + {!loadingStateBuild && ( + + { + return { + value: build.build_number, + label: build.build_number, + id: build.build_number, + }; + })} + onChange={e => setBuild(e)} + initialValue={build ? build : ''} + id="select-build-search" + /> + + )} + {build && ( + -
-

Series1

- -
-
-

Build1

- -
-
- - + Search + + )} )} diff --git a/frontend/src/pages/Search.styles.js b/frontend/src/pages/Search.styles.js new file mode 100644 index 00000000..ad4555ea --- /dev/null +++ b/frontend/src/pages/Search.styles.js @@ -0,0 +1,15 @@ +import styled from 'styled-components'; +import { Link } from 'react-router-dom'; + +export const DropdownContainer = styled.div` + margin-bottom: var(--space-16); + + @media only screen and (min-width: 1024px) { + max-width: 60%; + } +`; + +export const SearchAction = styled(Link)` + display: inline-block; + margin-top: var(--space-8); +`; From 7b278638381bc4ab89455231e2c137d05c5ef090 Mon Sep 17 00:00:00 2001 From: Tiia Valtonen Date: Thu, 8 Apr 2021 13:46:02 +0300 Subject: [PATCH 10/22] 176 - Add proper aria-label for dropdown's option --- frontend/src/components/dropdown/DropdownSelect.jsx | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/frontend/src/components/dropdown/DropdownSelect.jsx b/frontend/src/components/dropdown/DropdownSelect.jsx index 2264220c..3bf7ab4b 100644 --- a/frontend/src/components/dropdown/DropdownSelect.jsx +++ b/frontend/src/components/dropdown/DropdownSelect.jsx @@ -11,7 +11,11 @@ const DropdownSelect = props => { const selectorItems = selectorValues.map(element => { return ( - ); From adf9dfc0175a0bed6065ad16c9e3bf393f37e032 Mon Sep 17 00:00:00 2001 From: Tiia Valtonen Date: Thu, 8 Apr 2021 13:50:58 +0300 Subject: [PATCH 11/22] 176 - Change DropdownSelect's kebab case to camel case --- frontend/src/components/dropdown/DropdownSelect.jsx | 6 ++---- frontend/src/components/testFilters/BuildAmountSelector.jsx | 6 +++--- 2 files changed, 5 insertions(+), 7 deletions(-) diff --git a/frontend/src/components/dropdown/DropdownSelect.jsx b/frontend/src/components/dropdown/DropdownSelect.jsx index 3bf7ab4b..5c86933e 100644 --- a/frontend/src/components/dropdown/DropdownSelect.jsx +++ b/frontend/src/components/dropdown/DropdownSelect.jsx @@ -4,10 +4,8 @@ import { Select, Option } from 'react-a11y-select'; import 'react-a11y-select/src/styles.css'; const DropdownSelect = props => { - const { label, id } = props; - const selectorValues = props['selector-values']; - const onChange = props['on-change']; - const initialValue = props['initial-value'].toString(); + const { label, selectorValues, onChange, id } = props; + const initialValue = props.initialValue.toString(); const selectorItems = selectorValues.map(element => { return ( diff --git a/frontend/src/components/testFilters/BuildAmountSelector.jsx b/frontend/src/components/testFilters/BuildAmountSelector.jsx index 77cbe75c..129b5c17 100644 --- a/frontend/src/components/testFilters/BuildAmountSelector.jsx +++ b/frontend/src/components/testFilters/BuildAmountSelector.jsx @@ -44,9 +44,9 @@ const BuildAmountSelector = () => { From 78540161e6e7405e29501d0f5f9525afde469c53 Mon Sep 17 00:00:00 2001 From: Tiia Valtonen Date: Thu, 8 Apr 2021 14:39:35 +0300 Subject: [PATCH 12/22] 176 - Move Comparison view to Pages folder and rename one folder --- .../{ComparisonTable => comparisonTable}/Body.jsx | 0 .../ComparisonCheckbox.jsx | 0 .../Metadata3Table.jsx | 0 .../ParentBuildComparison.jsx | 0 .../ParentTable.jsx | 0 .../{ComparisonTable => comparisonTable}/Row.jsx | 0 .../{ComparisonTable => comparisonTable}/Status.jsx | 0 .../TestComparisonTable.jsx | 0 frontend/src/pages/Comparison.jsx | 10 +++++----- .../ComparisonForm => pages}/ComparisonForm.jsx | 4 ++-- 10 files changed, 7 insertions(+), 7 deletions(-) rename frontend/src/components/{ComparisonTable => comparisonTable}/Body.jsx (100%) rename frontend/src/components/{ComparisonTable => comparisonTable}/ComparisonCheckbox.jsx (100%) rename frontend/src/components/{ComparisonTable => comparisonTable}/Metadata3Table.jsx (100%) rename frontend/src/components/{ComparisonTable => comparisonTable}/ParentBuildComparison.jsx (100%) rename frontend/src/components/{ComparisonTable => comparisonTable}/ParentTable.jsx (100%) rename frontend/src/components/{ComparisonTable => comparisonTable}/Row.jsx (100%) rename frontend/src/components/{ComparisonTable => comparisonTable}/Status.jsx (100%) rename frontend/src/components/{ComparisonTable => comparisonTable}/TestComparisonTable.jsx (100%) rename frontend/src/{components/ComparisonForm => pages}/ComparisonForm.jsx (99%) diff --git a/frontend/src/components/ComparisonTable/Body.jsx b/frontend/src/components/comparisonTable/Body.jsx similarity index 100% rename from frontend/src/components/ComparisonTable/Body.jsx rename to frontend/src/components/comparisonTable/Body.jsx diff --git a/frontend/src/components/ComparisonTable/ComparisonCheckbox.jsx b/frontend/src/components/comparisonTable/ComparisonCheckbox.jsx similarity index 100% rename from frontend/src/components/ComparisonTable/ComparisonCheckbox.jsx rename to frontend/src/components/comparisonTable/ComparisonCheckbox.jsx diff --git a/frontend/src/components/ComparisonTable/Metadata3Table.jsx b/frontend/src/components/comparisonTable/Metadata3Table.jsx similarity index 100% rename from frontend/src/components/ComparisonTable/Metadata3Table.jsx rename to frontend/src/components/comparisonTable/Metadata3Table.jsx diff --git a/frontend/src/components/ComparisonTable/ParentBuildComparison.jsx b/frontend/src/components/comparisonTable/ParentBuildComparison.jsx similarity index 100% rename from frontend/src/components/ComparisonTable/ParentBuildComparison.jsx rename to frontend/src/components/comparisonTable/ParentBuildComparison.jsx diff --git a/frontend/src/components/ComparisonTable/ParentTable.jsx b/frontend/src/components/comparisonTable/ParentTable.jsx similarity index 100% rename from frontend/src/components/ComparisonTable/ParentTable.jsx rename to frontend/src/components/comparisonTable/ParentTable.jsx diff --git a/frontend/src/components/ComparisonTable/Row.jsx b/frontend/src/components/comparisonTable/Row.jsx similarity index 100% rename from frontend/src/components/ComparisonTable/Row.jsx rename to frontend/src/components/comparisonTable/Row.jsx diff --git a/frontend/src/components/ComparisonTable/Status.jsx b/frontend/src/components/comparisonTable/Status.jsx similarity index 100% rename from frontend/src/components/ComparisonTable/Status.jsx rename to frontend/src/components/comparisonTable/Status.jsx diff --git a/frontend/src/components/ComparisonTable/TestComparisonTable.jsx b/frontend/src/components/comparisonTable/TestComparisonTable.jsx similarity index 100% rename from frontend/src/components/ComparisonTable/TestComparisonTable.jsx rename to frontend/src/components/comparisonTable/TestComparisonTable.jsx diff --git a/frontend/src/pages/Comparison.jsx b/frontend/src/pages/Comparison.jsx index 7398c2db..7196b1a1 100644 --- a/frontend/src/pages/Comparison.jsx +++ b/frontend/src/pages/Comparison.jsx @@ -1,12 +1,12 @@ import React, { useEffect } from 'react'; -import TestComparisonTable from '../components/ComparisonTable/TestComparisonTable'; -import ComparisonCheckbox from '../components/ComparisonTable/ComparisonCheckbox'; +import TestComparisonTable from '../components/comparisonTable/TestComparisonTable'; +import ComparisonCheckbox from '../components/comparisonTable/ComparisonCheckbox'; import { useStateValue } from '../contexts/state'; -import Metadata3Table from '../components/ComparisonTable/Metadata3Table'; +import Metadata3Table from '../components/comparisonTable/Metadata3Table'; import { useParams } from 'react-router'; import BreadcrumbNav from '../components/BreadcrumbNav'; -import ParentBuildComparison from '../components/ComparisonTable/ParentBuildComparison'; -import ComparisonForm from '../components/ComparisonForm/ComparisonForm'; +import ParentBuildComparison from '../components/comparisonTable/ParentBuildComparison'; +import ComparisonForm from './ComparisonForm'; import { ContainerGrid12, ContentGrid6 } from '../styles/baseComponents'; import Loading from '../components/Loading'; import { TableContainer } from './Comparison.styles'; diff --git a/frontend/src/components/ComparisonForm/ComparisonForm.jsx b/frontend/src/pages/ComparisonForm.jsx similarity index 99% rename from frontend/src/components/ComparisonForm/ComparisonForm.jsx rename to frontend/src/pages/ComparisonForm.jsx index 389a68cb..63ec22a1 100644 --- a/frontend/src/components/ComparisonForm/ComparisonForm.jsx +++ b/frontend/src/pages/ComparisonForm.jsx @@ -1,7 +1,7 @@ import React, { useState, useEffect } from 'react'; import { useHistory } from 'react-router-dom'; -import Loading from '../../components/Loading'; -import { ContainerGrid12, ContentGrid6 } from '../../styles/baseComponents'; +import Loading from '../components/Loading'; +import { ContainerGrid12, ContentGrid6 } from '../styles/baseComponents'; const ComparisonForm = () => { let history = useHistory(); From a1260f80e8b8955015b29cd5340864c40eddc9a7 Mon Sep 17 00:00:00 2001 From: Tiia Valtonen Date: Fri, 9 Apr 2021 12:38:48 +0300 Subject: [PATCH 13/22] 176 - Improve ComparisonForm: - Changed native selects to DropdownSelect - Styled the view --- frontend/src/pages/ComparisonForm.jsx | 429 +++++++++----------- frontend/src/pages/ComparisonForm.styles.js | 22 + 2 files changed, 213 insertions(+), 238 deletions(-) create mode 100644 frontend/src/pages/ComparisonForm.styles.js diff --git a/frontend/src/pages/ComparisonForm.jsx b/frontend/src/pages/ComparisonForm.jsx index 63ec22a1..43cef9c2 100644 --- a/frontend/src/pages/ComparisonForm.jsx +++ b/frontend/src/pages/ComparisonForm.jsx @@ -1,122 +1,147 @@ import React, { useState, useEffect } from 'react'; -import { useHistory } from 'react-router-dom'; +import { Link } from 'react-router-dom'; import Loading from '../components/Loading'; import { ContainerGrid12, ContentGrid6 } from '../styles/baseComponents'; +import DropdownSelect from '../components/buttons/DropdownSelect'; +import { + ComparisonFormContainer, + ComparisonAction, +} from './ComparisonForm.styles'; const ComparisonForm = () => { - let history = useHistory(); - const [seriesList, setSeriesList] = useState([]); - const [seriesList2, setSeriesList2] = useState([]); - const [buildList, setBuildList] = useState([]); - const [buildList2, setBuildList2] = useState([]); - const [series, setSeries] = useState(); - const [build, setBuild] = useState(); - - const [series2, setSeries2] = useState(); - const [build2, setBuild2] = useState(); + const [teamList, setTeamList] = useState([]); const [loadingState, setLoadingState] = useState(false); - const [seriesLoading, setSeriesLoading] = useState(true); - const [team, setTeam] = useState(); + const [team1, setTeam1] = useState(); + const [series1, setSeries1] = useState(); + const [seriesList1, setSeriesList1] = useState([]); + const [build1, setBuild1] = useState(); + const [buildList1, setBuildList1] = useState([]); + const [series1Loading, setSeries1Loading] = useState(false); + const [build1Loading, setBuild1Loading] = useState(false); + const [team2, setTeam2] = useState(); - const [teamList, setTeamList] = useState([]); + const [series2, setSeries2] = useState(); + const [seriesList2, setSeriesList2] = useState([]); + const [build2, setBuild2] = useState(); + const [buildList2, setBuildList2] = useState([]); + const [series2Loading, setSeries2Loading] = useState(false); + const [build2Loading, setBuild2Loading] = useState(false); useEffect(() => { let isCancelled = false; - const fetchSeriesList1 = async () => { + const fetchTeamData = async () => { setLoadingState(true); try { + const res = await fetch('/data/teams/?', {}); + const json = await res.json(); if (!isCancelled) { + setTeamList(json.teams); setLoadingState(false); - setSeriesLoading(false); - setSeriesList( - teamList.filter(x => x.name === team)[0].series - ); } } catch (error) { - console.log(error); + // console.log(error); } }; - const fetchSeriesList2 = async () => { - setLoadingState(true); + if (!teamList.length) { + fetchTeamData(isCancelled); + } + + return () => { + isCancelled = true; + }; + }, [teamList]); + + useEffect(() => { + let isCancelled = false; + const filterSeriesList1 = async () => { + setSeries1Loading(true); try { if (!isCancelled) { - setLoadingState(false); - setSeriesLoading(false); - setSeriesList2( - teamList.filter(x => x.name === team2)[0].series + await setSeriesList1( + teamList.filter(x => x.name === team1)[0].series ); + setSeries1Loading(false); } } catch (error) { - console.log(error); + // console.log(error); } }; - const fetchTeamData = async () => { - setLoadingState(true); + const fetchBuildData = async () => { + setBuild1Loading(true); + setBuild1(''); try { - const res = await fetch('/data/teams', {}); + const res = await fetch(`/data/series/${series1}/builds/`, {}); const json = await res.json(); if (!isCancelled) { - setLoadingState(false); - setTeamList(json.teams); + setBuildList1(json.builds); + setBuild1Loading(false); } } catch (error) { - console.log(error); + // console.log(error); } }; - const fetchBuildData = async () => { - setLoadingState(true); + if (team1) { + filterSeriesList1(); + } + + if (series1) { + fetchBuildData(); + } + + return () => { + isCancelled = true; + }; + }, [team1, series1, teamList]); + + useEffect(() => { + let isCancelled = false; + + const filterSeriesList2 = async () => { + setSeries2Loading(true); try { - const res = await fetch(`/data/series/${series}/builds/`, {}); - const json = await res.json(); if (!isCancelled) { - setLoadingState(false); - setBuildList(json.builds); + await setSeriesList2( + teamList.filter(x => x.name === team2)[0].series + ); + setSeries2Loading(false); } } catch (error) { - console.log(error); + // console.log(error); } }; + const fetchBuildData2 = async () => { - setLoadingState(true); + setBuild2Loading(true); + setBuild2(''); try { const res = await fetch(`/data/series/${series2}/builds/`, {}); const json = await res.json(); if (!isCancelled) { - setLoadingState(false); setBuildList2(json.builds); + setBuild2Loading(false); } } catch (error) { - console.log(error); + // console.log(error); } }; - if (!teamList.length) { - fetchTeamData(); - } - - if (team) { - fetchSeriesList1(); - } if (team2) { - fetchSeriesList2(); + filterSeriesList2(); } - if (!seriesLoading) { - if (series) { - fetchBuildData(); - } - if (series2) { - fetchBuildData2(); - } + + if (series2) { + fetchBuildData2(); } + return () => { isCancelled = true; }; - }, [team, team2, series, series2, build, build2, seriesLoading, teamList]); + }, [team2, series2, teamList]); return (
@@ -130,187 +155,115 @@ const ComparisonForm = () => {

Compare

-
- history.push( - `/compare/${series}/${build}/to/${series2}/${build2}` - ) - } - > -
-
-

Team1

- -
-
-

Series1

- -
-
-

Build1

- -
+ +
+ { + return { + value: team.name, + label: team.name, + id: team.name, + }; + })} + onChange={e => setTeam1(e)} + initialValue={team1 ? team1 : ''} + id="select-team1-search" + /> + {!series1Loading && ( + { + return { + value: series.id, + label: series.name, + id: series.id, + }; + } + )} + onChange={e => setSeries1(e)} + initialValue={series1 ? series1 : ''} + id="select-series1-search" + /> + )} + {!build1Loading && ( + { + return { + value: build.build_number, + label: build.build_number, + id: build.build_number, + }; + } + )} + onChange={e => setBuild1(e)} + initialValue={build1 ? build1 : ''} + id="select-build1-search" + /> + )}
-
-
-

Team2

- -
-
-

Series2

- -
-
-

Build2

- -
+
+ { + return { + value: team.name, + label: team.name, + id: team.name, + }; + })} + onChange={e => setTeam2(e)} + initialValue={team2 ? team2 : ''} + id="select-team2-search" + /> + {!series2Loading && ( + { + return { + value: series.id, + label: series.name, + id: series.id, + }; + } + )} + onChange={e => setSeries2(e)} + initialValue={series2 ? series2 : ''} + id="select-series2-search" + /> + )} + {!build2Loading && ( + { + return { + value: build.build_number, + label: build.build_number, + id: build.build_number, + }; + } + )} + onChange={e => setBuild2(e)} + initialValue={build2 ? build2 : ''} + id="select-build2-search" + /> + )}
- - + + {series1 && build1 && series2 && build2 && ( + + + Compare + + + )} )} diff --git a/frontend/src/pages/ComparisonForm.styles.js b/frontend/src/pages/ComparisonForm.styles.js new file mode 100644 index 00000000..ed69f7cd --- /dev/null +++ b/frontend/src/pages/ComparisonForm.styles.js @@ -0,0 +1,22 @@ +import styled from 'styled-components'; + +export const ComparisonFormContainer = styled.div` + display: flex; + flex-wrap: wrap; + column-gap: var(--space-64); + row-gap: var(--space-32); + + & > div { + flex: 1; + min-width: 250px; + + label + div { + margin-bottom: var(--space-24); + } + } +`; + +export const ComparisonAction = styled.div` + text-align: center; + margin-top: var(--space-24); +`; From bf7ac1187c5a65822bf5e6be3ab6dbd7012cb2cd Mon Sep 17 00:00:00 2001 From: Tiia Valtonen Date: Fri, 9 Apr 2021 12:39:13 +0300 Subject: [PATCH 14/22] 176 - Fixed mainContent's margin to padding, so content is not cropped from bottom --- frontend/src/components/MainContent.styles.js | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/frontend/src/components/MainContent.styles.js b/frontend/src/components/MainContent.styles.js index db3a329d..3fab1983 100644 --- a/frontend/src/components/MainContent.styles.js +++ b/frontend/src/components/MainContent.styles.js @@ -3,8 +3,6 @@ export const StyledDiv = styled.main` overflow: auto; width: 100%; - min-height: calc( - 100vh - var(--space-80) - var(--space-48) - var(--space-64) - ); - margin-bottom: var(--space-64); + min-height: calc(100vh - var(--space-80) - var(--space-48)); + padding-bottom: var(--space-64); `; From e27e1ba9b5b300826cdb4c545923d988799d5747 Mon Sep 17 00:00:00 2001 From: Tiia Valtonen Date: Fri, 9 Apr 2021 13:00:26 +0300 Subject: [PATCH 15/22] 176 - Resolve conflicts and line break fixes --- .../components/comparisonTable/ParentBuildComparison.jsx | 1 - frontend/src/components/comparisonTable/ParentTable.jsx | 1 + frontend/src/components/comparisonTable/Status.jsx | 3 ++- .../src/components/comparisonTable/TestComparisonTable.jsx | 1 - frontend/src/pages/Comparison.jsx | 6 ++++-- frontend/src/pages/ComparisonForm.jsx | 2 +- frontend/src/pages/Search.jsx | 2 +- 7 files changed, 9 insertions(+), 7 deletions(-) diff --git a/frontend/src/components/comparisonTable/ParentBuildComparison.jsx b/frontend/src/components/comparisonTable/ParentBuildComparison.jsx index d3708140..c1718692 100644 --- a/frontend/src/components/comparisonTable/ParentBuildComparison.jsx +++ b/frontend/src/components/comparisonTable/ParentBuildComparison.jsx @@ -2,7 +2,6 @@ import React, { useEffect } from 'react'; import { useParams } from 'react-router'; import { useStateValue } from '../../contexts/state'; import { suiteTypes } from '../../utils/parentDataTypes'; - import ParentTable from './ParentTable'; const ParentSeries = () => { diff --git a/frontend/src/components/comparisonTable/ParentTable.jsx b/frontend/src/components/comparisonTable/ParentTable.jsx index f588efd6..d05f2e0f 100644 --- a/frontend/src/components/comparisonTable/ParentTable.jsx +++ b/frontend/src/components/comparisonTable/ParentTable.jsx @@ -2,6 +2,7 @@ import * as R from 'ramda'; import { compareTypes } from '../../utils/parentDataTypes'; import { Table } from '../table/Table'; + const ParentTable = props => { const { data, types } = props; diff --git a/frontend/src/components/comparisonTable/Status.jsx b/frontend/src/components/comparisonTable/Status.jsx index 178d0ca9..e360ee72 100644 --- a/frontend/src/components/comparisonTable/Status.jsx +++ b/frontend/src/components/comparisonTable/Status.jsx @@ -1,5 +1,6 @@ import React from 'react'; -import { pickIcon } from '../TestIcon'; +import { pickIcon } from '../../utils/TestIcon'; + const Status = ({ status }) => { const testStatusIcon = pickIcon(status); return
; diff --git a/frontend/src/components/comparisonTable/TestComparisonTable.jsx b/frontend/src/components/comparisonTable/TestComparisonTable.jsx index 18486066..396a3639 100644 --- a/frontend/src/components/comparisonTable/TestComparisonTable.jsx +++ b/frontend/src/components/comparisonTable/TestComparisonTable.jsx @@ -1,7 +1,6 @@ import React from 'react'; import { useStateValue } from '../../contexts/state'; import { Table } from '../table/Table'; - import Body from './Body'; const TestComparisonTable = () => { diff --git a/frontend/src/pages/Comparison.jsx b/frontend/src/pages/Comparison.jsx index 7196b1a1..ba791211 100644 --- a/frontend/src/pages/Comparison.jsx +++ b/frontend/src/pages/Comparison.jsx @@ -7,8 +7,8 @@ import { useParams } from 'react-router'; import BreadcrumbNav from '../components/BreadcrumbNav'; import ParentBuildComparison from '../components/comparisonTable/ParentBuildComparison'; import ComparisonForm from './ComparisonForm'; -import { ContainerGrid12, ContentGrid6 } from '../styles/baseComponents'; import Loading from '../components/Loading'; +import { ContainerGrid12, ContentGrid6 } from '../styles/baseComponents'; import { TableContainer } from './Comparison.styles'; const Build = () => { @@ -107,7 +107,9 @@ const Build = () => { type: 'updateCompared', compareData: jsoni, }); - } catch (error) {} + } catch (error) { + // console.log(error); + } } }; if (seriesId && buildId && seriesId2 && buildId2) { diff --git a/frontend/src/pages/ComparisonForm.jsx b/frontend/src/pages/ComparisonForm.jsx index 43cef9c2..1d2c6d79 100644 --- a/frontend/src/pages/ComparisonForm.jsx +++ b/frontend/src/pages/ComparisonForm.jsx @@ -1,8 +1,8 @@ import React, { useState, useEffect } from 'react'; import { Link } from 'react-router-dom'; import Loading from '../components/Loading'; +import DropdownSelect from '../components/dropdown/DropdownSelect'; import { ContainerGrid12, ContentGrid6 } from '../styles/baseComponents'; -import DropdownSelect from '../components/buttons/DropdownSelect'; import { ComparisonFormContainer, ComparisonAction, diff --git a/frontend/src/pages/Search.jsx b/frontend/src/pages/Search.jsx index 566c1edc..07c76343 100644 --- a/frontend/src/pages/Search.jsx +++ b/frontend/src/pages/Search.jsx @@ -1,6 +1,6 @@ import React, { useState, useEffect } from 'react'; import Loading from '../components/Loading'; -import DropdownSelect from '../components/buttons/DropdownSelect'; +import DropdownSelect from '../components/dropdown/DropdownSelect'; import { ContainerGrid12, ContentGrid6 } from '../styles/baseComponents'; import { DropdownContainer, SearchAction } from './Search.styles'; From 80c859c720636fa91545317906a3dfc87f57fc40 Mon Sep 17 00:00:00 2001 From: Tiia Valtonen Date: Mon, 12 Apr 2021 11:49:28 +0300 Subject: [PATCH 16/22] 176 - Style the Comparison view's checkboxes --- .../comparisonTable/ComparisonCheckbox.jsx | 30 ++++++++++++------- .../ComparisonCheckbox.styles.js | 23 ++++++++++++++ 2 files changed, 42 insertions(+), 11 deletions(-) create mode 100644 frontend/src/components/comparisonTable/ComparisonCheckbox.styles.js diff --git a/frontend/src/components/comparisonTable/ComparisonCheckbox.jsx b/frontend/src/components/comparisonTable/ComparisonCheckbox.jsx index f3f81172..2a2bbc8e 100644 --- a/frontend/src/components/comparisonTable/ComparisonCheckbox.jsx +++ b/frontend/src/components/comparisonTable/ComparisonCheckbox.jsx @@ -1,6 +1,12 @@ -// eslint-disable-next-line import React, { useState } from 'react'; import { useStateValue } from '../../contexts/state'; +import { + StyledInput, + StyledLabel, +} from '../testFilters/LastRunCheckbox.styles'; +import { ReactComponent as Checked } from '../../images/checked.svg'; +import { ReactComponent as Unchecked } from '../../images/unchecked.svg'; +import { CheckboxContainer } from './ComparisonCheckbox.styles'; const Checkbox = () => { // eslint-disable-next-line @@ -33,28 +39,30 @@ const Checkbox = () => { }; return ( -
- - -
+ {mismatchFilter ? : } + Hide Mismatched tests + + ); }; diff --git a/frontend/src/components/comparisonTable/ComparisonCheckbox.styles.js b/frontend/src/components/comparisonTable/ComparisonCheckbox.styles.js new file mode 100644 index 00000000..9b1516ca --- /dev/null +++ b/frontend/src/components/comparisonTable/ComparisonCheckbox.styles.js @@ -0,0 +1,23 @@ +import styled from 'styled-components'; + +export const CheckboxContainer = styled.div` + display: flex; + flex-direction: column; + border: 1px solid var(--evidence-grey); + border-radius: var(--space-4); + max-width: 300px; + line-height: 30px; + padding: 0 var(--space-8); + margin-bottom: var(--space-24); + + span { + padding-right: var(--space-8); + position: relative; + top: -1px; + + svg { + position: relative; + top: -1px; + } + } +`; From ac5278b93683529b6ede3f213429db83c084e145 Mon Sep 17 00:00:00 2001 From: Tiia Valtonen Date: Mon, 12 Apr 2021 14:03:18 +0300 Subject: [PATCH 17/22] 176 - Rename MetadataTable --- .../comparisonTable/{Metadata3Table.jsx => MetadataTable.jsx} | 4 ++-- frontend/src/pages/Comparison.jsx | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) rename frontend/src/components/comparisonTable/{Metadata3Table.jsx => MetadataTable.jsx} (97%) diff --git a/frontend/src/components/comparisonTable/Metadata3Table.jsx b/frontend/src/components/comparisonTable/MetadataTable.jsx similarity index 97% rename from frontend/src/components/comparisonTable/Metadata3Table.jsx rename to frontend/src/components/comparisonTable/MetadataTable.jsx index b5382cc5..34855116 100644 --- a/frontend/src/components/comparisonTable/Metadata3Table.jsx +++ b/frontend/src/components/comparisonTable/MetadataTable.jsx @@ -2,7 +2,7 @@ import React from 'react'; import { useStateValue } from '../../contexts/state'; import { Table } from '../table/Table'; -const Metadata3Table = () => { +const MetadataTable = () => { const [ { metadataState, @@ -66,4 +66,4 @@ const Metadata3Table = () => { ); }; -export default Metadata3Table; +export default MetadataTable; diff --git a/frontend/src/pages/Comparison.jsx b/frontend/src/pages/Comparison.jsx index ba791211..fdebde18 100644 --- a/frontend/src/pages/Comparison.jsx +++ b/frontend/src/pages/Comparison.jsx @@ -2,7 +2,7 @@ import React, { useEffect } from 'react'; import TestComparisonTable from '../components/comparisonTable/TestComparisonTable'; import ComparisonCheckbox from '../components/comparisonTable/ComparisonCheckbox'; import { useStateValue } from '../contexts/state'; -import Metadata3Table from '../components/comparisonTable/Metadata3Table'; +import MetadataTable from '../components/comparisonTable/MetadataTable'; import { useParams } from 'react-router'; import BreadcrumbNav from '../components/BreadcrumbNav'; import ParentBuildComparison from '../components/comparisonTable/ParentBuildComparison'; @@ -149,7 +149,7 @@ const Build = () => { - + From 8d1580856b4fdb05953ac855eecfdab1f33616b4 Mon Sep 17 00:00:00 2001 From: Tiia Valtonen Date: Tue, 13 Apr 2021 08:24:16 +0300 Subject: [PATCH 18/22] 176 - Rollback Dockerfile --- frontend/Dockerfile | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/frontend/Dockerfile b/frontend/Dockerfile index 4c47272f..46be2e82 100644 --- a/frontend/Dockerfile +++ b/frontend/Dockerfile @@ -5,7 +5,7 @@ COPY package*.json ./ RUN npm install COPY . . ENV REACT_APP_SERVER_URL=backend-server -ENV REACT_APP_GITHUB_SHA=$GITHUB_SHA + CMD [ "npm", "start" ] -EXPOSE 3000 \ No newline at end of file +EXPOSE 3000 From 6781774233f9c2c5dd9a4260b3d1c5ea210d16b8 Mon Sep 17 00:00:00 2001 From: Tiia Valtonen Date: Tue, 13 Apr 2021 09:53:27 +0300 Subject: [PATCH 19/22] 176 - Fix tests --- end_to_end_tests/run-e2e-all-scopes.sh | 30 +++++++++++++------------- frontend/src/pages/Search.jsx | 2 +- 2 files changed, 16 insertions(+), 16 deletions(-) diff --git a/end_to_end_tests/run-e2e-all-scopes.sh b/end_to_end_tests/run-e2e-all-scopes.sh index 696d5d38..8b6af1b5 100644 --- a/end_to_end_tests/run-e2e-all-scopes.sh +++ b/end_to_end_tests/run-e2e-all-scopes.sh @@ -1,4 +1,4 @@ -#!/bin/sh +#!/bin/sh python -m robot --outputdir ./logs/ \ --variablefile variables.py \ @@ -12,14 +12,14 @@ python -m robot --outputdir ./logs/ \ --metadata "cijobid:$cijobid" \ --metadata "username:$username" \ --metadata "environment:$environment" \ - --metadata "testframework:$testframework" \ + --metadata "testframework:$testframework" \ --include Backend \ ./robot_tests BACKEND=$? #Testarchiver data storing can be added here, #Important to exit with the right exit value from the test execution, -#not with the exitvalue from data storing. +#not with the exitvalue from data storing. DATABASE=github_test HOST=testarchiverdb.postgres.database.azure.com @@ -33,7 +33,7 @@ echo " Archiving Backend reports from ./logs -directory" echo "---------------------------------------------" find ./logs -name \*.xml -type f -print0 | xargs -0 -n1 testarchiver --dbengine postgresql --database "$DATABASE" --host "$HOST" \ --user "$USER" --pw "$PASSWORD" \ - --team Epimetheus --series ci_backend#${BUILD_NUMBER} --format robotframework + --team Epimetheus --series ci_backend#"${BUILD_NUMBER}" --format robotframework @@ -48,17 +48,17 @@ python -m robot --outputdir ./logs/ \ --metadata "cijobid:$cijobid" \ --metadata "username:$username" \ --metadata "environment:$environment" \ - --metadata "testframework:$testframework" \ + --metadata "testframework:$testframework" \ --include History \ ./robot_tests -History=$? +HISTORY=$? echo "---------------------------------------------" echo " Archiving History Page reports from ./logs -directory" echo "---------------------------------------------" find ./logs -name \*.xml -type f -print0 | xargs -0 -n1 testarchiver --dbengine postgresql --database "$DATABASE" --host "$HOST" \ --user "$USER" --pw "$PASSWORD" \ - --team Epimetheus --series ci_history_page#${BUILD_NUMBER} --format robotframework + --team Epimetheus --series ci_history_page#"${BUILD_NUMBER}" --format robotframework python -m robot --outputdir ./logs/ \ --variablefile variables.py \ @@ -71,7 +71,7 @@ python -m robot --outputdir ./logs/ \ --metadata "cijobid:$cijobid" \ --metadata "username:$username" \ --metadata "environment:$environment" \ - --metadata "testframework:$testframework" \ + --metadata "testframework:$testframework" \ --include NavBar \ ./robot_tests @@ -82,7 +82,7 @@ echo " Archiving Navigation Bar reports from ./logs -directory" echo "---------------------------------------------" find ./logs -name \*.xml -type f -print0 | xargs -0 -n1 testarchiver --dbengine postgresql --database "$DATABASE" --host "$HOST" \ --user "$USER" --pw "$PASSWORD" \ - --team Epimetheus --series ci_navigation_bar#${BUILD_NUMBER} --format robotframework + --team Epimetheus --series ci_navigation_bar#"${BUILD_NUMBER}" --format robotframework python -m robot --outputdir ./logs/ \ --variablefile variables.py \ @@ -95,7 +95,7 @@ python -m robot --outputdir ./logs/ \ --metadata "cijobid:$cijobid" \ --metadata "username:$username" \ --metadata "environment:$environment" \ - --metadata "testframework:$testframework" \ + --metadata "testframework:$testframework" \ --include Team \ ./robot_tests @@ -106,7 +106,7 @@ echo " Archiving Team Page reports from ./logs -directory" echo "---------------------------------------------" find ./logs -name \*.xml -type f -print0 | xargs -0 -n1 testarchiver --dbengine postgresql --database "$DATABASE" --host "$HOST" \ --user "$USER" --pw "$PASSWORD" \ - --team Epimetheus --series ci_team_page#${BUILD_NUMBER} --format robotframework + --team Epimetheus --series ci_team_page#"${BUILD_NUMBER}" --format robotframework python -m robot --outputdir ./logs/ \ --variablefile variables.py \ @@ -119,7 +119,7 @@ python -m robot --outputdir ./logs/ \ --metadata "cijobid:$cijobid" \ --metadata "username:$username" \ --metadata "environment:$environment" \ - --metadata "testframework:$testframework" \ + --metadata "testframework:$testframework" \ --include Series \ ./robot_tests @@ -130,7 +130,7 @@ echo " Archiving Series Page reports from ./logs -directory" echo "---------------------------------------------" find ./logs -name \*.xml -type f -print0 | xargs -0 -n1 testarchiver --dbengine postgresql --database "$DATABASE" --host "$HOST" \ --user "$USER" --pw "$PASSWORD" \ - --team Epimetheus --series ci_series_page#${BUILD_NUMBER} --format robotframework + --team Epimetheus --series ci_series_page#"${BUILD_NUMBER}" --format robotframework python -m robot --outputdir ./logs/ \ @@ -144,7 +144,7 @@ python -m robot --outputdir ./logs/ \ --metadata "cijobid:$cijobid" \ --metadata "username:$username" \ --metadata "environment:$environment" \ - --metadata "testframework:$testframework" \ + --metadata "testframework:$testframework" \ --include Build \ ./robot_tests @@ -155,7 +155,7 @@ echo " Archiving Build Page reports from ./logs -directory" echo "---------------------------------------------" find ./logs -name \*.xml -type f -print0 | xargs -0 -n1 testarchiver --dbengine postgresql --database "$DATABASE" --host "$HOST" \ --user "$USER" --pw "$PASSWORD" \ - --team Epimetheus --series ci_build_page#${BUILD_NUMBER} --format robotframework + --team Epimetheus --series ci_build_page#"${BUILD_NUMBER}" --format robotframework EXITVAL=$((SERIES+TEAM+NAVBAR+HISTORY+BACKEND+BUILD)) exit $EXITVAL diff --git a/frontend/src/pages/Search.jsx b/frontend/src/pages/Search.jsx index 07c76343..39e78d99 100644 --- a/frontend/src/pages/Search.jsx +++ b/frontend/src/pages/Search.jsx @@ -49,7 +49,7 @@ const Search = () => { } if (!seriesLoading) { if (series) { - setBuild(undefined); + setBuild(''); setBuildList([]); fetchBuildData(); } From 9f4ef92d6d46ea98ae13602bc4bbe34f8e606a74 Mon Sep 17 00:00:00 2001 From: lauri_koskela Date: Fri, 16 Apr 2021 09:08:49 +0300 Subject: [PATCH 20/22] removed all-scopes --- end_to_end_tests/run-e2e-all-scopes.sh | 161 ------------------------- 1 file changed, 161 deletions(-) delete mode 100644 end_to_end_tests/run-e2e-all-scopes.sh diff --git a/end_to_end_tests/run-e2e-all-scopes.sh b/end_to_end_tests/run-e2e-all-scopes.sh deleted file mode 100644 index 8b6af1b5..00000000 --- a/end_to_end_tests/run-e2e-all-scopes.sh +++ /dev/null @@ -1,161 +0,0 @@ -#!/bin/sh - -python -m robot --outputdir ./logs/ \ - --variablefile variables.py \ - --metadata "version:0.3.0" \ - --metadata "cipipelineid:$cipipelineid" \ - --metadata "series:$series" \ - --metadata "branch:$branch" \ - --metadata "commitsha:$commitsha" \ - --metadata "changedfiles:$changedfiles" \ - --metadata "joburl:$joburl" \ - --metadata "cijobid:$cijobid" \ - --metadata "username:$username" \ - --metadata "environment:$environment" \ - --metadata "testframework:$testframework" \ - --include Backend \ - ./robot_tests -BACKEND=$? - -#Testarchiver data storing can be added here, -#Important to exit with the right exit value from the test execution, -#not with the exitvalue from data storing. - -DATABASE=github_test -HOST=testarchiverdb.postgres.database.azure.com -USER=testarchiver@testarchiverdb -PASSWORD=tallentaj123! - - - -echo "---------------------------------------------" -echo " Archiving Backend reports from ./logs -directory" -echo "---------------------------------------------" -find ./logs -name \*.xml -type f -print0 | xargs -0 -n1 testarchiver --dbengine postgresql --database "$DATABASE" --host "$HOST" \ - --user "$USER" --pw "$PASSWORD" \ - --team Epimetheus --series ci_backend#"${BUILD_NUMBER}" --format robotframework - - - -python -m robot --outputdir ./logs/ \ - --variablefile variables.py \ - --metadata "version:0.3.0" \ - --metadata "cipipelineid:$cipipelineid" \ - --metadata "series:$series" \ - --metadata "branch:$branch" \ - --metadata "commitsha:$commitsha" \ - --metadata "joburl:$joburl" \ - --metadata "cijobid:$cijobid" \ - --metadata "username:$username" \ - --metadata "environment:$environment" \ - --metadata "testframework:$testframework" \ - --include History \ - ./robot_tests -HISTORY=$? - -echo "---------------------------------------------" -echo " Archiving History Page reports from ./logs -directory" -echo "---------------------------------------------" -find ./logs -name \*.xml -type f -print0 | xargs -0 -n1 testarchiver --dbengine postgresql --database "$DATABASE" --host "$HOST" \ - --user "$USER" --pw "$PASSWORD" \ - --team Epimetheus --series ci_history_page#"${BUILD_NUMBER}" --format robotframework - -python -m robot --outputdir ./logs/ \ - --variablefile variables.py \ - --metadata "version:0.3.0" \ - --metadata "cipipelineid:$cipipelineid" \ - --metadata "series:$series" \ - --metadata "branch:$branch" \ - --metadata "commitsha:$commitsha" \ - --metadata "joburl:$joburl" \ - --metadata "cijobid:$cijobid" \ - --metadata "username:$username" \ - --metadata "environment:$environment" \ - --metadata "testframework:$testframework" \ - --include NavBar \ - ./robot_tests - -NAVBAR=$? - -echo "---------------------------------------------" -echo " Archiving Navigation Bar reports from ./logs -directory" -echo "---------------------------------------------" -find ./logs -name \*.xml -type f -print0 | xargs -0 -n1 testarchiver --dbengine postgresql --database "$DATABASE" --host "$HOST" \ - --user "$USER" --pw "$PASSWORD" \ - --team Epimetheus --series ci_navigation_bar#"${BUILD_NUMBER}" --format robotframework - -python -m robot --outputdir ./logs/ \ - --variablefile variables.py \ - --metadata "version:0.3.0" \ - --metadata "cipipelineid:$cipipelineid" \ - --metadata "series:$series" \ - --metadata "branch:$branch" \ - --metadata "commitsha:$commitsha" \ - --metadata "joburl:$joburl" \ - --metadata "cijobid:$cijobid" \ - --metadata "username:$username" \ - --metadata "environment:$environment" \ - --metadata "testframework:$testframework" \ - --include Team \ - ./robot_tests - -TEAM=$? - -echo "---------------------------------------------" -echo " Archiving Team Page reports from ./logs -directory" -echo "---------------------------------------------" -find ./logs -name \*.xml -type f -print0 | xargs -0 -n1 testarchiver --dbengine postgresql --database "$DATABASE" --host "$HOST" \ - --user "$USER" --pw "$PASSWORD" \ - --team Epimetheus --series ci_team_page#"${BUILD_NUMBER}" --format robotframework - -python -m robot --outputdir ./logs/ \ - --variablefile variables.py \ - --metadata "version:0.3.0" \ - --metadata "cipipelineid:$cipipelineid" \ - --metadata "series:$series" \ - --metadata "branch:$branch" \ - --metadata "commitsha:$commitsha" \ - --metadata "joburl:$joburl" \ - --metadata "cijobid:$cijobid" \ - --metadata "username:$username" \ - --metadata "environment:$environment" \ - --metadata "testframework:$testframework" \ - --include Series \ - ./robot_tests - -SERIES=$? - -echo "---------------------------------------------" -echo " Archiving Series Page reports from ./logs -directory" -echo "---------------------------------------------" -find ./logs -name \*.xml -type f -print0 | xargs -0 -n1 testarchiver --dbengine postgresql --database "$DATABASE" --host "$HOST" \ - --user "$USER" --pw "$PASSWORD" \ - --team Epimetheus --series ci_series_page#"${BUILD_NUMBER}" --format robotframework - - -python -m robot --outputdir ./logs/ \ - --variablefile variables.py \ - --metadata "version:0.3.0" \ - --metadata "cipipelineid:$cipipelineid" \ - --metadata "series:$series" \ - --metadata "branch:$branch" \ - --metadata "commitsha:$commitsha" \ - --metadata "joburl:$joburl" \ - --metadata "cijobid:$cijobid" \ - --metadata "username:$username" \ - --metadata "environment:$environment" \ - --metadata "testframework:$testframework" \ - --include Build \ - ./robot_tests - -BUILD=$? - -echo "---------------------------------------------" -echo " Archiving Build Page reports from ./logs -directory" -echo "---------------------------------------------" -find ./logs -name \*.xml -type f -print0 | xargs -0 -n1 testarchiver --dbengine postgresql --database "$DATABASE" --host "$HOST" \ - --user "$USER" --pw "$PASSWORD" \ - --team Epimetheus --series ci_build_page#"${BUILD_NUMBER}" --format robotframework - -EXITVAL=$((SERIES+TEAM+NAVBAR+HISTORY+BACKEND+BUILD)) -exit $EXITVAL From d4f86f181e01eecf2f5455f5da799e0793bf14ff Mon Sep 17 00:00:00 2001 From: Tiia Valtonen Date: Mon, 19 Apr 2021 11:45:23 +0300 Subject: [PATCH 21/22] 176 - Fix Codacy issues and make suggested changes --- .../src/components/comparisonTable/Body.jsx | 89 ++++++++++--------- .../src/components/comparisonTable/Row.jsx | 42 --------- frontend/src/pages/Comparison.jsx | 12 ++- 3 files changed, 53 insertions(+), 90 deletions(-) diff --git a/frontend/src/components/comparisonTable/Body.jsx b/frontend/src/components/comparisonTable/Body.jsx index de2c04db..1f3041bd 100644 --- a/frontend/src/components/comparisonTable/Body.jsx +++ b/frontend/src/components/comparisonTable/Body.jsx @@ -13,44 +13,46 @@ const Body = () => { // or test-level (true)? // const SUITE_FILTER_NESTED = true; - // Get result for this specific run , as well as parse the full name of a test case and the result of the test case. - - const firstBuildByBuildNumber = comparedDataState[0] - .filter(({ test_cases }) => { - return test_cases.some(({ builds }) => { - return builds.some( - ({ build_number }) => build_number === Number(buildId) - ); - }); - }) - .flatMap(x => x.test_cases) - .map(test => { - return { - full_name: test.full_name, - status1: test.builds[0].test_status, - status2: '', - }; - }); - //Done twice since 2 builds - const secondBuildByBuildNumber = comparedDataState[1] - .filter(({ test_cases }) => { - return test_cases.some(({ builds }) => { - return builds.some( - ({ build_number }) => build_number === Number(buildId2) - ); + // Get result for this specific run, as well as parse the full name of a test case and the result of the test case. + function getRunResults(comparedDataState, buildId, status) { + return comparedDataState + .filter(({ test_cases }) => { + return test_cases.some(({ builds }) => { + return builds.some( + ({ build_number }) => build_number === Number(buildId) + ); + }); + }) + .flatMap(x => x.test_cases) + .map(test => { + if (status === 1) { + return { + full_name: test.full_name, + status1: test.builds[0].test_status, + status2: '', + }; + } else if (status === 2) { + return { + full_name: test.full_name, + status1: '', + status2: test.builds[0].test_status, + }; + } }); - }) - .flatMap(x => x.test_cases) - .map(test => { - return { - full_name: test.full_name, - status1: '', - status2: test.builds[0].test_status, - }; - }); + } - //We create an array of matching test cases + const firstBuildByBuildNumber = getRunResults( + comparedDataState[0], + buildId, + 1 + ); + const secondBuildByBuildNumber = getRunResults( + comparedDataState[1], + buildId2, + 2 + ); + //We create an array of matching test cases const matching_array = []; secondBuildByBuildNumber.forEach(test_case2 => { firstBuildByBuildNumber.forEach(test_case1 => { @@ -64,17 +66,16 @@ const Body = () => { }); }); - const second_not_matching = secondBuildByBuildNumber.filter(test_case => { - return !matching_array.some(matcher => { - return matcher.full_name === test_case.full_name; + function getNthMismatching(buildByNumber) { + return buildByNumber.filter(test_case => { + return !matching_array.some(matcher => { + return matcher.full_name === test_case.full_name; + }); }); - }); + } - const first_not_matching = firstBuildByBuildNumber.filter(test_case => { - return !matching_array.some(matcher => { - return matcher.full_name === test_case.full_name; - }); - }); + const second_not_matching = getNthMismatching(secondBuildByBuildNumber); + const first_not_matching = getNthMismatching(firstBuildByBuildNumber); //We now have 3 arrays, one with matching elements and 2 with unmatching elements let combined_json = []; diff --git a/frontend/src/components/comparisonTable/Row.jsx b/frontend/src/components/comparisonTable/Row.jsx index c18954f7..30b66207 100644 --- a/frontend/src/components/comparisonTable/Row.jsx +++ b/frontend/src/components/comparisonTable/Row.jsx @@ -1,8 +1,5 @@ import React from 'react'; import Status from './Status'; -// import { dashify } from '../../utils/helpers'; -// import { useLocation } from 'react-router'; -// import { Link } from 'react-router-dom'; const Row = ({ full_name, status1, status2 }) => { return ( @@ -15,42 +12,3 @@ const Row = ({ full_name, status1, status2 }) => { }; export default Row; - -// const TestCase = ({ testCases, index, suiteId, testId }) => { -// const testCase = testCases[index].test_case; -// const pathname = useLocation().pathname; -// const correctUrl = pathname.substring(0, pathname.lastIndexOf('/')); -// return ( -// -// ); -// }; - -// Show suite name separated on different lines with dots showing depth level -// const LinksSuiteName = ({ tableCellHeight, suiteName, suiteId }) => { -// const pathname = useLocation().pathname; -// const correctUrl = pathname.substring(0, pathname.lastIndexOf('/')); -// let tempSuiteName = suiteName.split('.'); -// let splitSuiteName = []; -// for (var index = 0; index < tempSuiteName.length; index++) { -// let el = tempSuiteName[index]; -// splitSuiteName.push( -// -// .{el} -//
-// -// ); -// } -// -// return ( -// -// ); -// }; diff --git a/frontend/src/pages/Comparison.jsx b/frontend/src/pages/Comparison.jsx index fdebde18..09e504bf 100644 --- a/frontend/src/pages/Comparison.jsx +++ b/frontend/src/pages/Comparison.jsx @@ -39,7 +39,10 @@ const Build = () => { let found = 0; let metadata_len = json.metadata.length; while (index < metadata_len && found === 0) { - if (json.metadata[index].metadata_name === name) { + if ( + json.metadata[parseInt(index)].metadata_name === + name + ) { found = 1; } else { index++; @@ -57,10 +60,11 @@ const Build = () => { }; json.metadata.push(temp); } else { - json.metadata[index].metadata2_value = + json.metadata[parseInt(index)].metadata2_value = meta.metadata_value; - json.metadata[index].suite2_id = meta.suite_id; - json.metadata[index].test2_run_id = + json.metadata[parseInt(index)].suite2_id = + meta.suite_id; + json.metadata[parseInt(index)].test2_run_id = meta.test_run_id; } }); From ce674cb1895db7b86f69cb7bc896ce34636957f7 Mon Sep 17 00:00:00 2001 From: Tiia Valtonen Date: Mon, 19 Apr 2021 12:51:25 +0300 Subject: [PATCH 22/22] 176 - Fix Codacy issues and make suggested changes --- end_to_end_tests/robot_tests/__init__.robot | 2 +- frontend/Dockerfile | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/end_to_end_tests/robot_tests/__init__.robot b/end_to_end_tests/robot_tests/__init__.robot index 2a7abaef..44a677e0 100644 --- a/end_to_end_tests/robot_tests/__init__.robot +++ b/end_to_end_tests/robot_tests/__init__.robot @@ -1,5 +1,5 @@ *** Settings *** -Resource ${EXECDIR}${/}resources${/}resource.robot +Resource ${EXECDIR}/resources/resource.robot Suite Setup Open Browser To Epimetheus Landing Page ${BROWSER} ${remote_url} Suite Teardown Custom Teardown diff --git a/frontend/Dockerfile b/frontend/Dockerfile index 46be2e82..d3f163c2 100644 --- a/frontend/Dockerfile +++ b/frontend/Dockerfile @@ -8,4 +8,4 @@ ENV REACT_APP_SERVER_URL=backend-server CMD [ "npm", "start" ] -EXPOSE 3000 +EXPOSE 3000 \ No newline at end of file
{testStatusIcon} -// -// {testCase} -// -// -// -// Build -// {splitSuiteName} -// -//