Skip to content

Commit

Permalink
Merge pull request #26 from delta-reporter/test-history
Browse files Browse the repository at this point in the history
Historical tests
  • Loading branch information
Jnegrier authored Jul 21, 2020
2 parents 8582431 + 370d978 commit 67caa9a
Show file tree
Hide file tree
Showing 10 changed files with 312 additions and 56 deletions.
36 changes: 0 additions & 36 deletions components/templates/SpacingPaper.tsx

This file was deleted.

Original file line number Diff line number Diff line change
Expand Up @@ -12,9 +12,9 @@ import {
import {
TestErrorMessageExpansionPanel,
TestMediaExpansionPanel,
} from "./TestExpansionPanel"
} from "./TestExpandablePanels"
import { TestResolution } from "./TestResolution"
import { showStatusText } from "."
import { showStatusText, HistoricalTests } from "."

const useStyles = makeStyles(theme => ({
root: {
Expand Down Expand Up @@ -113,6 +113,7 @@ export const TestExpanded = function(props: TestProps) {
function convertToSeconds(microseconds: number) {
return (microseconds / 1000).toString()[0]
}

return (
<div
key={children.test_history_id}
Expand Down Expand Up @@ -154,10 +155,10 @@ export const TestExpanded = function(props: TestProps) {
<Tab label="Test History" id="tab-1" />
</Tabs>
</AppBar>
<TabPanel value={historyTabValue} index={0} >
<Typography style={{ paddingTop: "20px"}}>
<TabPanel value={historyTabValue} index={0}>
<Typography style={{ paddingTop: "20px" }}>
Full path:
<span style={{ color: "grey"}}> {children.file}</span>
<span style={{ color: "grey" }}> {children.file}</span>
</Typography>
<Typography style={{ paddingTop: "20px" }}>
Duration:
Expand Down Expand Up @@ -238,16 +239,7 @@ export const TestExpanded = function(props: TestProps) {
)}
</TabPanel>
<TabPanel value={historyTabValue} index={1}>
<Typography style={{ padding: "10px" }}>
{" "}
COMING:
<span
style={{ color: "grey", fontStyle: "italic", padding: "10px" }}
>
Historical info for this test
</span>
{children.test_id}
</Typography>
<HistoricalTests>{children.test_id}</HistoricalTests>
</TabPanel>
</Paper>
) : (
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -100,7 +100,9 @@ export const TestErrorMessageExpansionPanel = function(props: TestProps) {
</CollapsedLineSummary>
<PanelDetails>
<List>
<ListItem style={{ wordBreak: "break-all", whiteSpace: "pre-wrap" }}>
<ListItem
style={{ wordBreak: "break-all", whiteSpace: "pre-wrap" }}
>
{" "}
{children.trace}
</ListItem>
Expand Down
166 changes: 166 additions & 0 deletions components/templates/TestHistory.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,166 @@
import React from "react"
import useSWR from "swr"
import ExpandMoreIcon from "@material-ui/icons/ExpandMore"
import MuiExpansionPanel from "@material-ui/core/ExpansionPanel"
import MuiExpansionPanelSummary from "@material-ui/core/ExpansionPanelSummary"
import MuiExpansionPanelDetails from "@material-ui/core/ExpansionPanelDetails"
import Container from "@material-ui/core/Container"
import { Typography, withStyles } from "@material-ui/core"
import {
showStatusText,
showResolutionText,
showDateText,
TestErrorMessageExpansionPanel,
TestMediaExpansionPanel,
} from "."

const fetcher = url => fetch(url).then(res => res.json())

const ExpandablePanel = withStyles({
root: {
width: "100%",
boxShadow: "none",
"&:not(:last-child)": {
borderBottom: 0,
},
"&:before": {
display: "none",
},
"&$expanded": {
margin: "auto",
},
},
expanded: {},
})(MuiExpansionPanel)

const CollapsedLineSummary = withStyles({
root: {
marginBottom: -1,
minHeight: 56,
"&$expanded": {
minHeight: 56,
},
width: "100%",
},
content: {
"&$expanded": {
margin: "12px 0",
},
},
expanded: {},
})(MuiExpansionPanelSummary)

const PanelDetails = withStyles(theme => ({
root: {
padding: theme.spacing(2),
width: "100%",
},
}))(MuiExpansionPanelDetails)

export const HistoricalTests = function(testId) {
const { data, error } = useSWR(
`${process.env.publicDeltaCore}/api/v1/test_history/test_id/${testId.children}`,
fetcher
)

const loading = !data && !error
const noData = !data
const [
historicalTestsExpandedPanel,
setHistoricalTestsExpandedPanel,
] = React.useState<string | false>(false)
const expandCollapsePanel = (historicalTestsPanel: string) => (
_event: React.ChangeEvent<{}>,
isExpanded: boolean
) => {
setHistoricalTestsExpandedPanel(isExpanded ? historicalTestsPanel : false)
}

if (noData) {
return (
<Typography
align="center"
variant="subtitle2"
style={{
paddingTop: "1em",
paddingBottom: "1em",
color: "#48D1CC",
margin: "5px",
border: "1px #48D1CC solid",
backgroundColor: "white",
}}
>
No historical data was found
</Typography>
)
} else {
return (
<div style={{ paddingTop: "10px" }}>
{loading
? "Loading historical tests..."
: data.map(test => (
<ExpandablePanel
key={test.test_history_id}
expanded={historicalTestsExpandedPanel === test.test_history_id}
onChange={expandCollapsePanel(test.test_history_id)}
TransitionProps={{ unmountOnExit: true }}
style={{
backgroundColor: "#F3EFEE", // media block expandable color
borderBottom: "1px solid #F3EFEE",
}}
>
<CollapsedLineSummary
expandIcon={<ExpandMoreIcon />}
style={{
backgroundColor: "#F3EFEE", // media block collapsed color
borderBottom: "1px solid #F3EFEE",
}}
>
<Typography color="textPrimary">
{showStatusText(test.status)}{" "}
{showResolutionText(test.resolution)}{" "}
{showDateText(test.end_datetime)}
</Typography>
</CollapsedLineSummary>
<PanelDetails>
<Container maxWidth="sm">
{test.error_type ? (
<Typography
align="center"
variant="subtitle2"
style={{
paddingTop: "1em",
paddingBottom: "1em",
color: "#C71585",
margin: "5px",
border: "1px #C71585 solid",
backgroundColor: "white",
}}
>
{test.error_type}
</Typography>
) : (
<div></div>
)}
{test.trace ? (
<TestErrorMessageExpansionPanel>
{test}
</TestErrorMessageExpansionPanel>
) : (
<div></div>
)}
{test.media ? (
<TestMediaExpansionPanel key={test.file_id}>
{test}
</TestMediaExpansionPanel>
) : (
<div></div>
)}
</Container>
</PanelDetails>
</ExpandablePanel>
))}
</div>
)
}
}
8 changes: 5 additions & 3 deletions components/templates/index.ts
Original file line number Diff line number Diff line change
@@ -1,10 +1,12 @@
export * from "./BasePage"
export * from "./PageHeader"
export * from "./SpacingPaper"
export * from "./TestExpanded"
export * from "./Test"
export * from "./Pagination"
export * from "./showDate"
export * from "./showResolution"
export * from "./showStatusIcon"
export * from "./showTestStats"
export * from "./TestExpansionPanel"
export * from "./TestExpandablePanels"
export * from "./TestResolution"
export * from "./ListOfSuites"
export * from "./TestHistory"
20 changes: 20 additions & 0 deletions components/templates/showDate.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
import React from "react"
import {Typography, Tooltip} from "@material-ui/core"

export function showDateText(date) {
let dateBadge
dateBadge = (
<Tooltip title="End date">
<button style={
{
color: "#6B8E23",
margin: "5px",
border: "1px #6B8E23 solid",
backgroundColor: "white"
}
}>
{date} </button>
</Tooltip>
)
return dateBadge
}
95 changes: 95 additions & 0 deletions components/templates/showResolution.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,95 @@
import React from "react"
import {Typography, Tooltip} from "@material-ui/core"

export function showResolutionText(resolution) {
let resolutionBadge
if (resolution === "Not set") {
resolutionBadge = (
<Tooltip title="Resolution">
<button style={
{
color: "#008B8B",
margin: "5px",
border: "1px #008B8B solid",
backgroundColor: "white"
}
}>Not set</button>
</Tooltip>
)
} else if (resolution === "Test is flaky") {
resolutionBadge = (
<Tooltip title="Resolution">
<button style={
{
color: "#FF8C00",
margin: "5px",
border: "1px #FF8C00 solid",
backgroundColor: "white"
}
}>Test is flaky</button>
</Tooltip>
)
} else if (resolution === "Product defect") {
resolutionBadge = (
<Tooltip title="Resolution">
<button style={
{
color: "#800000",
margin: "5px",
border: "1px #800000 solid",
backgroundColor: "white"
}
}>Product defect</button>
</Tooltip>
)
} else if (resolution === "Test needs to be updated") {
resolutionBadge = (
<Tooltip title="Resolution">
<button style={
{
color: "#66CDAA",
margin: "5px",
border: "1px #66CDAA solid",
backgroundColor: "white"
}
}>Test needs to be updated</button>
</Tooltip>
)
} else if (resolution === "To investigate") {
resolutionBadge = (
<Tooltip title="Resolution">
<button style={
{
color: "#00FF7F",
margin: "5px",
border: "1px #00FF7F solid",
backgroundColor: "white"
}
}>To investigate</button>
</Tooltip>
)
} else if (resolution === "Environment issue") {
resolutionBadge = (
<Tooltip title="Resolution">
<button style={
{
color: "#EE82EE",
margin: "5px",
border: "1px #EE82EE solid",
backgroundColor: "white"
}
}>Environment issue</button>
</Tooltip>
)
} else {
resolutionBadge = (
<Tooltip title="Resolution">
<Typography style={
{color: "grey"}
}>
{resolution} </Typography>
</Tooltip>
)
}
return resolutionBadge
}
Loading

0 comments on commit 67caa9a

Please sign in to comment.