Skip to content

Commit

Permalink
Merge pull request #23 from delta-reporter/adjustments
Browse files Browse the repository at this point in the history 
Creating charts page (not in use for now) + showing resolution
  • Loading branch information
@opishcheiko
opishcheiko authored Jul 10, 2020
2 parents 7235dda + e557e16 commit 1c912c0
Show file tree
Hide file tree
Showing 17 changed files with 487 additions and 276 deletions.
54 changes: 9 additions & 45 deletions components/templates/BasePage.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,22 +2,16 @@ import React from "react"
import clsx from "clsx"
import { makeStyles } from "@material-ui/core/styles"
import {
Drawer,
CssBaseline,
Badge,
AppBar,
List,
Typography,
Divider,
IconButton,
Link,
Toolbar,
} from "@material-ui/core"
import { Search, AccountBox } from "@material-ui/icons"
import { SideBarMainItems, SideBarSecondaryItems } from "./Sidebar"
import { PageHeader } from "./PageHeader"
import ChevronLeftIcon from "@material-ui/icons/ChevronLeft"
import MenuIcon from "@material-ui/icons/Menu"
import { PageHeader } from "."

const drawerWidth = 240

Expand Down Expand Up @@ -98,14 +92,7 @@ type Props = {
export const BasePage = function(props: Props) {
const { children, className } = props
const classes = useStyles(props)
const [openSideBar, setOpenSideBar] = React.useState(false)

const handleDrawerOpen = () => {
setOpenSideBar(true)
}
const handleDrawerClose = () => {
setOpenSideBar(false)
}
const [openSideBar] = React.useState(false)

return (
<div className={`${classes.root} ${className}`}>
Expand All @@ -114,26 +101,20 @@ export const BasePage = function(props: Props) {
position="absolute"
className={clsx(classes.appBar, openSideBar && classes.appBarShift)}
>
{/* top navigation bar with Delta name */}
<Toolbar className={classes.toolbar}>
<IconButton
edge="start"
color="inherit"
aria-label="open drawer"
onClick={handleDrawerOpen}
className={clsx(
classes.menuButton,
openSideBar && classes.menuButtonHidden
)}
>
<MenuIcon />
</IconButton>
<Typography
variant="h5"
color="secondary"
style={{ fontWeight: 400, margin: "5px" }}
className={classes.title}
>
<Link underline="none" color="secondary" href="/">
<Link
underline="none"
color="secondary"
href="/"
style={{ paddingLeft: "20px" }}
>
Δ Delta Reporter
</Link>
</Typography>
Expand All @@ -149,23 +130,6 @@ export const BasePage = function(props: Props) {
</IconButton>
</Toolbar>
</AppBar>
<Drawer
variant="permanent"
classes={{
paper: clsx(classes.drawerPaper, !openSideBar && classes.drawerPaperClose),
}}
open={openSideBar}
>
<div className={classes.toolbarIcon}>
<IconButton onClick={handleDrawerClose}>
<ChevronLeftIcon />
</IconButton>
</div>
<Divider />
<List>{SideBarMainItems}</List>
<Divider />
<List>{SideBarSecondaryItems}</List>
</Drawer>
<main className={classes.content}>
<div className={classes.appBarSpacer} />
<PageHeader />
Expand Down
10 changes: 5 additions & 5 deletions components/templates/Sidebar.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,21 +1,21 @@
import React from "react"
import { ListItem, ListItemText, ListItemIcon, Link } from "@material-ui/core/"
import DashboardIcon from "@material-ui/icons/Dashboard"
import BarChartIcon from "@material-ui/icons/Assignment" // AssignmentIcon, LayersIcon, BarChartIcon
import HomeIcon from "@material-ui/icons/Home"
import InsertChartIcon from '@material-ui/icons/InsertChart';

export const SideBarMainItems = (
<div>
<Link color="inherit" href="/">
<ListItem button href="/">
<ListItemIcon>
<DashboardIcon />
<HomeIcon />
</ListItemIcon>
<ListItemText primary="Projects" />
</ListItem>
</Link>
<ListItem button disabled>
<ListItem button href="/charts">
<ListItemIcon>
<BarChartIcon />
<InsertChartIcon />
</ListItemIcon>
<ListItemText primary="Charts" />
</ListItem>
Expand Down
91 changes: 0 additions & 91 deletions components/templates/SuitesAndTestsList.tsx
View file

This file was deleted.

102 changes: 70 additions & 32 deletions components/templates/TestExpanded.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ import {
TestMediaExpansionPanel,
} from "./TestExpansionPanel"
import { TestResolution } from "./TestResolution"
import { showStatusText } from "."

const useStyles = makeStyles(theme => ({
root: {
Expand Down Expand Up @@ -109,6 +110,9 @@ export const TestExpanded = function(props: TestProps) {
setResolutionResponse(value)
}

function convertToSeconds(microseconds: number) {
return (microseconds / 1000).toString()[0]
}
return (
<div
key={children.test_history_id}
Expand All @@ -117,11 +121,22 @@ export const TestExpanded = function(props: TestProps) {
>
{children.name ? ( // when page is just loaded and no test selected - half page to be blank
<Paper className={classes.paperNoPadding} elevation={0}>
<Typography
style={{
padding: "10px",
fontWeight: 580,
fontSize: "18px",
marginTop: "20px",
}}
>
{showStatusText(children.status)}
{children.name}
</Typography>
<AppBar
style={{
backgroundColor: "white",
border: "none",
paddingTop: "45px",
paddingTop: "25px",
}}
variant="outlined"
position="relative"
Expand All @@ -139,65 +154,88 @@ export const TestExpanded = function(props: TestProps) {
<Tab label="Test History" id="tab-1" />
</Tabs>
</AppBar>
<TabPanel value={historyTabValue} index={0}>
<Typography style={{ padding: "10px" }}>
<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={{ padding: "10px" }}>
<Typography style={{ paddingTop: "20px" }}>
Duration:
{children.duration.minutes === 0 ? (
<span style={{ color: "grey" }}> </span>
) : (
<span style={{ color: "grey" }}>
{" "}
{children.duration.minutes}m{" "}
</span>
)}
<span style={{ color: "grey" }}>
{" "}
{children.duration.minutes} min {children.duration.seconds} sec{" "}
{children.duration.seconds}.
{convertToSeconds(children.duration.microseconds)}s{" "}
</span>
</Typography>
{children.message ? ( // if there is any error message - show the info, else - test passed
<div>
<Typography style={{ paddingTop: "10px", paddingLeft: "10px" }}>
<Typography
style={{ paddingTop: "20px", paddingBottom: "20px" }}
>
Error type:
<span style={{ color: "grey" }}> {children.error_type} </span>
</Typography>

<TestErrorMessageExpansionPanel>
{children}
</TestErrorMessageExpansionPanel>
{children.media ? ( // check if there is any media for this test
<TestMediaExpansionPanel key={children.file_id}>
{children}
</TestMediaExpansionPanel>
) : (
<div></div>
)}
<div style={{ paddingTop: "20px" }}>
{children.resolution === "Not set" ? ( // when resolution is not set - show button
<Typography className={classes.bigMargin}>
<Button
variant="outlined"
color="primary"
onClick={handleResolutionDialogOpen}
className={classes.bigMargin}
>
Set test resolution
</Button>{" "}
<span
style={{
color: "grey",
fontStyle: "italic",
}}
>
{resolutionResponse}
</span>
</Typography>
) : (
<Typography style={{ paddingTop: "10px" }}>
Test Resolution:
<span style={{ color: "grey" }}>
{" "}
{children.resolution}{" "}
</span>
</Typography>
)}

<div style={{ padding: "10px" }}>
<Typography className={classes.bigMargin}>
<Button
variant="outlined"
color="primary"
onClick={handleResolutionDialogOpen}
className={classes.bigMargin}
>
Set test resolution
</Button>{" "}
<span
style={{
color: "grey",
fontStyle: "italic",
padding: "10px",
}}
>
{resolutionResponse}
</span>
</Typography>
<TestResolution
open={openResolutionDialog}
selectedValue={resolutionResponse}
onClose={handleResolutionDialogClose}
testHistoryId={children.test_history_id}
testResolutions={testResolutions}
/>
</div>
</div>
) : (
<div></div>
)}
{children.media ? ( // check if there is any media for this test
<TestMediaExpansionPanel>{children}</TestMediaExpansionPanel>
) : (
<div></div>
)}
</TabPanel>
<TabPanel value={historyTabValue} index={1}>
<Typography style={{ padding: "10px" }}>
Expand Down
Loading

0 comments on commit 1c912c0

Please sign in to comment.