Skip to content
Snippets Groups Projects

Deployment details: layout update

Merged Zoltan Runyo requested to merge deployment-details into develop
2 files
+ 60
101
Compare changes
  • Side-by-side
  • Inline
Files
2
import React from 'react';
import { TextField, Grid, Typography, Box, Button} from '@material-ui/core';
import { TextField, Grid, Typography, Box, Button, Card, CardContent, CardActions} from '@material-ui/core';
import { makeStyles, createMuiTheme } from '@material-ui/core/styles';
import {deploymentStatusColors} from "./DeploymentsTable"
import {DeploymentStepper} from "./DeploymentStepper"
import { KeyValueTable } from "../common/KeyValueTable/KeyValueTable";
import { SimpleAccordion } from "../common/Accordion/StandardAccordion";
const useStyles = makeStyles({
root: {
width: '100%'
},
paper: {
padding: "1%"
},
stepperContainer: {
width: "100%",
maxWidth: 950,
overflow: "auto",
actions: {
justifyContent: 'flex-end',
},
});
export function DeploymentDetails({ deployment, onDeploymentStart, startButtonDisabled }) {
deployment = {...deployment};
const deploymentDetails = {
version: deployment.iocVersion,
host: deployment.host,
repository: deployment.git,
startTime: deployment.startDate.toLocaleString(),
duration: deployment.duration + ' s',
};
const theme = createMuiTheme();
const classes = useStyles(theme);
return (
<Grid container spacing={1}>
<Grid item xs={12} md={10}>
<Typography variant="h4" component="h3" color="textPrimary" gutterBottom>
{deployment.iocName}
</Typography>
</Grid>
{ deployment.status !== "initialized" &&
<Grid item xs={6} md={2}>
<Box bgcolor={deploymentStatusColors[deployment.status]}
color="primary.contrastText" p={2} borderRadius={10}>
<Grid container justify="center">
<Typography variant="body2" component="p">
{deployment.status.toUpperCase()}
</Typography>
<Grid item xs={12} md={12}>
<SimpleAccordion summary={
<Grid container spacing={1}>
<Grid item xs={12} md={10}>
<Typography variant="h4" component="h3" color="textPrimary" gutterBottom>
{deployment.iocName}
</Typography>
</Grid>
{ deployment.status !== "initialized" &&
<Grid item xs={6} md={2}>
<Box bgcolor={deploymentStatusColors[deployment.status]}
color="primary.contrastText" p={2} borderRadius={10}>
<Grid container justify="center">
<Typography variant="body2" component="p">
{deployment.status.toUpperCase()}
</Typography>
</Grid>
</Box>
</Grid>
}
</Grid>
</Box>
</Grid>
}
<Grid item xs={12} md={12}>
<Typography className={classes.title} variant="h5" component="h2" color="textPrimary" gutterBottom>
Version: {deployment.iocVersion}
</Typography>
</Grid>
<Grid item xs={3} md={1}>
<Typography variant="body2" component="p" color="textPrimary">
Host:
</Typography>
</Grid>
<Grid item xs={9} md={11}>
<Typography variant="body2" component="p" color="textSecondary">
{deployment.host}
</Typography>
</Grid>
<Grid item xs={3} md={1}>
<Typography variant="body2" component="p" color="textPrimary">
Git repository:
</Typography>
</Grid>
<Grid item xs={9} md={11}>
<Typography variant="body2" component="p" color="textSecondary">
{deployment.git}
</Typography>
</Grid>
<Grid item xs={3} md={1}>
<Typography variant="body2" component="p" color="textPrimary">
Start time:
</Typography>
</Grid>
<Grid item xs={9} md={11}>
<Typography variant="body2" component="p" color="textSecondary">
{deployment.startDate.toLocaleString()}
</Typography>
</Grid>
<Grid item xs={3} md={1}>
<Typography variant="body2" component="p" color="textPrimary">
Duration:
</Typography>
</Grid>
<Grid item xs={9} md={11}>
<Typography variant="body2" component="p" color="textSecondary">
{deployment.duration} s
</Typography>
</Grid>
}>
<KeyValueTable obj={deploymentDetails} variant="overline" />
</SimpleAccordion>
</Grid>
<Grid item xs={12} md={12}>
<Card className={classes.root}>
<CardContent>
<div className={classes.stepperContainer}>
<DeploymentStepper activeStep={deployment.activeStep} deploymentStatus={deployment.status}/>
</div>
</CardContent>
{ deployment.manual &&
<Grid item xs={9} md={11}>
<CardActions className={classes.actions}>
<Button variant="contained" color="primary" onClick={onDeploymentStart} disabled={startButtonDisabled}>
Start deployment
</Button>
</Grid>
</CardActions>
}
<Grid item xs={12} md={12}>
<div className={classes.stepperContainer}>
<DeploymentStepper activeStep={deployment.activeStep} deploymentStatus={deployment.status}/>
</div>
</Grid>
<Grid item xs={12} md={12}>
<Typography variant="h6" component="p" color="textPrimary">
Deployment steps:
</Typography>
</Grid>
<Grid item xs={12} md={12}>
<TextField style={{ marginTop: "20px", width: "100%" }}
</Card>
</Grid>
<Grid item xs={12} md={12}>
<SimpleAccordion summary="Deployment steps" defaultExpanded>
<TextField style={{ marginTop: "20px", width: "100%" }}
id="outlined-multiline-static"
multiline
disabled
@@ -114,7 +81,8 @@ export function DeploymentDetails({ deployment, onDeploymentStart, startButtonDi
value={deployment.output.replaceAll(";", "\n")}
variant="outlined"
/>
</Grid>
</Grid>
</SimpleAccordion>
</Grid>
</Grid>
);
}
Loading