Skip to content

Commit

Permalink
renaming components, moving testHistory into a separate file
Browse files Browse the repository at this point in the history
  • Loading branch information
opishcheiko committed Jul 21, 2020
1 parent b11d1fa commit 370d978
Show file tree
Hide file tree
Showing 5 changed files with 178 additions and 153 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,10 +12,9 @@ import {
import {
TestErrorMessageExpansionPanel,
TestMediaExpansionPanel,
HistoricalTests,
} from "./TestExpansionPanel"
} from "./TestExpandablePanels"
import { TestResolution } from "./TestResolution"
import { showStatusText } from "."
import { showStatusText, HistoricalTests } from "."

const useStyles = makeStyles(theme => ({
root: {
Expand Down Expand Up @@ -156,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 @@ -240,9 +239,7 @@ export const TestExpanded = function(props: TestProps) {
)}
</TabPanel>
<TabPanel value={historyTabValue} index={1}>
<HistoricalTests>
{children.test_id}
</HistoricalTests>
<HistoricalTests>{children.test_id}</HistoricalTests>
</TabPanel>
</Paper>
) : (
Expand Down
Original file line number Diff line number Diff line change
@@ -1,10 +1,8 @@
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,
List,
Expand All @@ -14,15 +12,8 @@ import {
CardActionArea,
CardMedia,
} from "@material-ui/core"
import {
showStatusText,
showResolutionText,
showDateText
} from "."
import ReactPlayer from "react-player"

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

const ExpandablePanel = withStyles({
root: {
width: "100%",
Expand Down Expand Up @@ -109,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 Expand Up @@ -193,98 +186,3 @@ export const TestMediaExpansionPanel = function(props: TestProps) {
</div>
)
}

export const HistoricalTests = function(test_id) {

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

const loading = !data && !error;
const no_data = error && error.status === 204;

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

if(no_data){
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>
)
}
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>
)
}
}
6 changes: 3 additions & 3 deletions components/templates/index.ts
Original file line number Diff line number Diff line change
@@ -1,12 +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"

0 comments on commit 370d978

Please sign in to comment.