Commit 2f6d7fbb authored by Michelle Nguyen's avatar Michelle Nguyen
Browse files

UI: Update tracepoints modal

Summary: we wanted to change the styling

Test Plan:
screenshot:
{F90686}

Reviewers: zasgar, #engineering

Reviewed By: zasgar, #engineering

Differential Revision: https://phab.corp.pixielabs.ai/D5860

GitOrigin-RevId: 57dc988a8a32a8451701e4e3fff33d59cb15c1ce
parent 006538a5
main snyk-fix-7eb526f73c75336b865418bda117e40b snyk-fix-a916784efb9d8870d42eeba63409bf85 release/vizier/vv0.9.8-pre-test.27 release/vizier/v0.11.7 release/vizier/v0.11.6 release/vizier/v0.11.5 release/vizier/v0.11.4 release/vizier/v0.11.3 release/vizier/v0.11.2 release/vizier/v0.11.1 release/vizier/v0.11.0 release/vizier/v0.10.22 release/vizier/v0.10.21 release/vizier/v0.10.20 release/vizier/v0.10.19 release/vizier/v0.10.18 release/vizier/v0.10.17 release/vizier/v0.10.16 release/vizier/v0.10.15 release/vizier/v0.10.14 release/vizier/v0.10.13 release/vizier/v0.10.12 release/vizier/v0.10.11 release/vizier/v0.10.10 release/vizier/v0.10.9 release/vizier/v0.10.8 release/vizier/v0.10.7 release/vizier/v0.10.6 release/vizier/v0.10.5 release/vizier/v0.10.4 release/vizier/v0.10.3 release/vizier/v0.10.2 release/vizier/v0.10.1 release/vizier/v0.10.0 release/vizier/v0.9.16 release/vizier/v0.9.14 release/vizier/v0.9.14-pre-main.5 release/vizier/v0.9.13 release/vizier/v0.9.13-pre-r0.17 release/vizier/v0.9.12 release/vizier/v0.9.12-pre-r0.1 release/vizier/v0.9.11 release/vizier/v0.9.11-pre-r0.32 release/vizier/v0.9.11-pre-r0.29 release/vizier/v0.9.11-pre-main.9 release/vizier/v0.9.8 release/vizier/v0.9.8-pre-test.27 release/vizier/v0.9.8-pre-test2.28 release/vizier/v0.9.7 release/vizier/v0.9.7-pre-r0.7 release/vizier/v0.9.7-pre-main.27 release/vizier/v0.9.6 release/vizier/v0.9.5 release/vizier/v0.9.5-pre-r0.13 release/vizier/v0.9.5-pre-main.18 release/vizier/v0.9.5-pre-main.17 release/vizier/v0.9.5-pre-main.14 release/vizier/v0.9.5-pre-etcdConfig.15 release/vizier/v0.9.4 release/vizier/v0.9.3 release/vizier/v0.9.2 release/vizier/v0.9.1 release/vizier/v0.9.0 release/vizier/v0.8.10 release/vizier/v0.8.9 release/vizier/v0.8.8 release/vizier/v0.8.7 release/vizier/v0.8.6 release/vizier/v0.8.5 release/vizier/v0.8.3 release/vizier/v0.8.2 release/vizier/v0.8.1 release/vizier/v0.8.0 release/vizier/v0.7.19 release/vizier/v0.7.18 release/vizier/v0.7.17 release/vizier/v0.7.16 release/vizier/v0.7.15 release/vizier/v0.7.14 release/vizier/v0.7.13 release/vizier/v0.7.12 release/vizier/v0.7.11 release/vizier/v0.7.10 release/vizier/v0.7.9 release/vizier/v0.7.8 release/vizier/v0.7.7 release/vizier/v0.7.6 release/vizier/v0.7.5 release/vizier/v0.7.4 release/vizier/v0.7.3 release/vizier/v0.7.2 release/vizier/v0.7.1 release/vizier/v0.6.5 release/vizier/v0.6.4 release/vizier/v0.6.3 release/vizier/v0.6.2 release/vizier/v0.6.1 release/vizier/v0.6.0 release/vizier/v0.5.34 release/vizier/v0.5.32 release/vizier/v0.5.31 release/vizier/v0.5.30 release/vizier/v0.5.29 release/vizier/v0.5.28 release/vizier/v0.5.27 release/vizier/v0.5.26 release/vizier/v0.5.25 release/vizier/v0.5.24 release/vizier/v0.5.23 release/vizier/v0.5.22 release/vizier/v0.5.21 release/vizier/v0.5.20 release/vizier/v0.5.19 release/vizier/v0.5.18 release/vizier/v0.5.17 release/vizier/v0.5.16 release/vizier/v0.5.15 release/vizier/v0.5.14 release/vizier/v0.5.13 release/vizier/v0.5.12 release/vizier/v0.5.11 release/vizier/v0.5.10 release/vizier/v0.5.9 release/vizier/v0.5.8 release/vizier/v0.5.7 release/vizier/v0.5.6 release/vizier/v0.5.5 release/vizier/v0.5.4 release/vizier/v0.5.3 release/vizier/v0.5.2 release/vizier/v0.5.0 release/vizier/v0.4.22 release/vizier/v0.4.21 release/vizier/v0.4.19 release/vizier/v0.4.18 release/vizier/v0.4.17 release/vizier/v0.4.16 release/vizier/v0.4.15 release/vizier/v0.4.14 release/vizier/v0.4.13 release/vizier/v0.4.12 release/vizier/v0.4.11 release/vizier/v0.4.10 release/vizier/v0.4.9 release/vizier/v0.4.8 release/vizier/v0.4.7 release/vizier/v0.4.6 release/vizier/v0.4.5 release/vizier/v0.4.2 release/vizier/v0.4.1 release/vizier/v0.4.0 release/vizier/v0.3.15 release/operator/v0.0.30 release/operator/v0.0.29 release/operator/v0.0.28 release/operator/v0.0.27 release/operator/v0.0.26 release/operator/v0.0.25 release/operator/v0.0.24 release/operator/v0.0.23 release/operator/v0.0.22 release/operator/v0.0.21 release/operator/v0.0.20 release/operator/v0.0.19 release/operator/v0.0.18 release/operator/v0.0.17 release/operator/v0.0.16 release/operator/v0.0.15 release/operator/v0.0.15-pre-r0.6 release/operator/v0.0.14 release/operator/v0.0.14-pre-zOperator3.8 release/operator/v0.0.14-pre-r0.8 release/operator/v0.0.13 release/operator/v0.0.13-pre-test.5 release/operator/v0.0.13-pre-main.5 release/operator/v0.0.12 release/operator/v0.0.12-pre-main.6 release/operator/v0.0.11 release/operator/v0.0.10 release/operator/v0.0.9 release/operator/v0.0.7 release/operator/v0.0.5 release/operator/v0.0.2 release/cloud/staging/1637355758 release/cloud/staging/1637266321 release/cloud/staging/1637083942 release/cloud/staging/1636658412 release/cloud/staging/1636655115 release/cloud/staging/1636566009 release/cloud/staging/1636486580 release/cloud/staging/1635273164 release/cloud/staging/1634664761 release/cloud/staging/1634662582 release/cloud/staging/1634426539 release/cloud/staging/1634255213 release/cloud/staging/1633889214 release/cloud/staging/1633467640 release/cloud/staging/1633377421 release/cloud/staging/1632931048 release/cloud/staging/1632880554 release/cloud/staging/1631813710 release/cloud/staging/1631205641 release/cloud/prod/1658198111 release/cloud/prod/1658185818 release/cloud/prod/1658183222 release/cloud/prod/1657740688 release/cloud/prod/1657049209 release/cloud/prod/1656629056 release/cloud/prod/1656527373 release/cloud/prod/1656452950 release/cloud/prod/1655997138 release/cloud/prod/1655226092 release/cloud/prod/1654806360 release/cloud/prod/1654144074 release/cloud/prod/1654133791 release/cloud/prod/1652313416 release/cloud/prod/1652304483 release/cloud/prod/1652214656 release/cloud/prod/1651864223 release/cloud/prod/1651799821 release/cloud/prod/1651704659 release/cloud/prod/1651616922 release/cloud/prod/1650645384 release/cloud/prod/1650480744 release/cloud/prod/1650306041 release/cloud/prod/1650056868 release/cloud/prod/1650039340 release/cloud/prod/1649978499 release/cloud/prod/1649797942 release/cloud/prod/1649787581 release/cloud/prod/1649269698 release/cloud/prod/1649107437 release/cloud/prod/1648586238 release/cloud/prod/1647992139 release/cloud/prod/1647379907 release/cloud/prod/1646182041 release/cloud/prod/1644961014 release/cloud/prod/1644348245 release/cloud/prod/1643849214 release/cloud/prod/1643826488 release/cloud/prod/1643153852 release/cloud/prod/1643056106 release/cloud/prod/1643052598 release/cloud/prod/1642705917 release/cloud/prod/1642632551 release/cloud/prod/1642205277 release/cloud/prod/1642145141 release/cloud/prod/1642141551 release/cloud/prod/1642139120 release/cloud/prod/1642134238 release/cloud/prod/1642130337 release/cloud/prod/1642126826 release/cloud/prod/1642124521 release/cloud/prod/1642109235 release/cloud/prod/1641941995 release/cloud/prod/1641420513 release/cloud/prod/1641254216 release/cloud/prod/1638917470 release/cloud/prod/1637096190 release/cloud/prod/1636492829 release/cloud/prod/1635286066 release/cloud/prod/1634668183 release/cloud/prod/1634663695 release/cloud/prod/1634282223 release/cloud/prod/1633893408 release/cloud/prod/1633710125 release/cloud/prod/1633560085 release/cloud/prod/1633495949 release/cloud/prod/1633474704 release/cloud/prod/1633379527 release/cloud/prod/1632935904 release/cloud/prod/1631826310 release/cloud/prod/1630737620 release/cloud/prod/1630714187 release/cloud/prod/1630622583 release/cloud/prod/1630433362 release/cloud/prod/1630110767 release/cloud/prod/1629952882 release/cloud/prod/1629920564 release/cloud/prod/1629851112 release/cloud/prod/1629494063 release/cloud/prod/1629339917 release/cloud/prod/1629337848 release/cloud/prod/1629335332 release/cloud/prod/1629311730 release/cloud/prod/1629166688 release/cloud/prod/1629166023 release/cloud/prod/1629165964 release/cloud/prod/1629151138 release/cloud/prod/1628025334 release/cloud/prod/1627971857 release/cloud/prod/1627943140 release/cloud/prod/1627935195 release/cloud/prod/1627644793 release/cloud/prod/1627601637 release/cloud/prod/1627445520 release/cloud/prod/1627421364 release/cloud/prod/1626909202 release/cloud/prod/1626824610 release/cloud/prod/1626391194 release/cloud/prod/1626321970 release/cloud/prod/1626073778 release/cloud/prod/1625699466 release/cloud/prod/1625253333 release/cloud/prod/1625249910 release/cloud/prod/1625013333 release/cloud/prod/1625003953 release/cloud/prod/1625001388 release/cloud/prod/1624993505 release/cloud/prod/1624989299 release/cloud/prod/1623456844 release/cloud/prod/1622779032 release/cloud/prod/1621989349 release/cloud/prod/1621986389 release/cloud/prod/1621964672 release/cloud/prod/1621920686 release/cloud/prod/1621917276 release/cloud/prod/1621882022 release/cloud/prod/1620958944 release/cloud/prod/1620945558 release/cloud/prod/1620327546 release/cloud/prod/1620273211 release/cloud/prod/1620271073 release/cloud/prod/1620090826 release/cloud/prod/1619828773 release/cloud/prod/1619741770 release/cloud/prod/1619126029 release/cloud/prod/1618639797 release/cloud/prod/1618522037 release/cloud/prod/1617918178 release/cloud/prod/1617647275 release/cloud/prod/1617133715 release/cloud/prod/1616658618 release/cloud/prod/1616654932 release/cloud/prod/1616448710 release/cloud/prod/1615945400 release/cloud/prod/1615831644 release/cloud/prod/1615576886 release/cloud/prod/1615411712 release/cloud/prod/1615077380 release/cloud/prod/1614910099 release/cloud/prod/1614641663 release/cloud/prod/1614386136 release/cloud/prod/1614285784 release/cloud/prod/1613673078 release/cloud/prod/1613098936 release/cloud/prod/1611730359 release/cloud/prod/1611722282 release/cloud/prod/1610649625 release/cloud/prod/1608860073 release/cloud/prod/1608187571 release/cloud/prod/1608153468 release/cloud/prod/1607821788 release/cloud/prod/1607641202 release/cloud/prod/1607635321 release/cloud/prod/1607579123 release/cloud/prod/1607572443 release/cloud/prod/1607565545 release/cloud/prod/1607558233 release/cloud/prod/1607365867 release/cloud/prod/1606268686 release/cloud/prod/1606262796 release/cloud/prod/1605919159 release/cloud/prod/1605299456 release/cloud/prod/1605291259 release/cloud/prod/1605232134 release/cloud/prod/1603946992 release/cloud/prod/1603940562 release/cloud/prod/1603914906 release/cloud/prod/1603758413 release/cloud/prod/1603502450 release/cloud/prod/1603500448 release/cloud/prod/1603496003 release/cloud/prod/1603472961 release/cloud/prod/1602870840 release/cloud/prod/1602869528 release/cloud/prod/1602797511 release/cloud/prod/1602707020 release/cloud/prod/1602029046 release/cloud/prod/1601689455 release/cloud/prod/1601662762 release/cloud/prod/1601544925 release/cloud/prod/1601529532 release/cloud/prod/1601515922 release/cloud/prod/1601492590 release/cloud/prod/1601488986 release/cloud/prod/1601450458 release/cloud/prod/1601347104 release/cloud/prod/1600927168 release/cloud/prod/1600915358 release/cloud/prod/1600896505 release/cloud/prod/1600747103 release/cloud/prod/1600722229 release/cloud/prod/1599873415 release/cloud/prod/1599600243 release/cloud/prod/1599345761 release/cloud/prod/1599190542 release/cloud/prod/1598661431 release/cloud/prod/1598510508 release/cloud/prod/1598481843 release/cloud/prod/1598380793 release/cloud/prod/1598058939 release/cloud/prod/1597957855 release/cloud/prod/1597626288 release/cloud/prod/1597515619 release/cloud/prod/1597468669 release/cloud/prod/1597256671 release/cloud/prod/1596840610 release/cloud/prod/1596173708 release/cli/v0.7.16 release/cli/v0.7.15 release/cli/v0.7.14 release/cli/v0.7.13 release/cli/v0.7.12 release/cli/v0.7.11 release/cli/v0.7.10 release/cli/v0.7.9 release/cli/v0.7.8 release/cli/v0.7.7 release/cli/v0.7.6 release/cli/v0.7.5 release/cli/v0.7.4 release/cli/v0.7.3 release/cli/v0.7.2 release/cli/v0.7.1 release/cli/v0.7.1-pre-r0.5 release/cli/v0.7.0 release/cli/v0.7.0-pre-main.11 release/cli/v0.6.8-pre-main.9 release/cli/v0.6.7 release/cli/v0.6.6 release/cli/v0.6.5 release/cli/v0.6.4 release/cli/v0.6.3 release/cli/v0.6.2 release/cli/v0.6.1 release/cli/v0.5.14 release/cli/v0.5.13 release/cli/v0.5.12 release/cli/v0.5.11 release/cli/v0.5.9 release/cli/v0.5.8 release/cli/v0.5.7 release/cli/v0.5.6 release/cli/v0.5.5 release/cli/v0.5.4 release/cli/v0.5.3 release/cli/v0.5.2 release/cli/v0.5.1 release/cli/v0.4.0 release/cli/v0.3.29 release/cli/v0.3.28 release/cli/v0.3.27 release/cli/v0.3.26 release/cli/v0.3.25 release/cli/v0.3.24 release/cli/v0.3.23 release/cli/v0.3.22 release/cli/v0.3.21 release/cli/v0.3.20 release/cli/v0.3.19 release/cli/v0.3.18 release/cli/v0.3.17 release/cli/v0.3.15 release/cli/v0.3.14 release/cli/v0.3.13 release/cli/v0.3.12 release/cli/v0.3.11 release/cli/v0.3.7 release/cli/v0.3.6 release/cli/v0.3.5
No related merge requests found
Showing with 75 additions and 23 deletions
+75 -23
......@@ -2,6 +2,7 @@ import * as React from 'react';
import Card from '@material-ui/core/Card';
import Modal from '@material-ui/core/Modal';
import Button from '@material-ui/core/Button';
import Grid from '@material-ui/core/Grid';
import {
createStyles, Theme, withStyles, WithStyles,
......@@ -37,10 +38,11 @@ const styles = ({ spacing, typography, palette }: Theme) => createStyles({
...typography.h6,
color: palette.foreground.two,
paddingBottom: spacing(2),
display: 'flex',
justifyContent: 'center',
},
image: {
width: spacing(30),
paddingBottom: spacing(3),
width: spacing(16),
},
icon: {
minWidth: spacing(4),
......@@ -49,6 +51,11 @@ const styles = ({ spacing, typography, palette }: Theme) => createStyles({
paddingTop: 0,
paddingBottom: 0,
},
schema: {
paddingTop: spacing(1),
paddingBottom: spacing(1),
justifyContent: 'center',
},
spinner: {
width: spacing(5),
height: spacing(5),
......@@ -56,6 +63,20 @@ const styles = ({ spacing, typography, palette }: Theme) => createStyles({
states: {
paddingBottom: spacing(2),
},
leftStates: {
'& > li': {
paddingLeft: spacing(5),
},
},
cancelButton: {
display: 'flex',
flexDirection: 'row-reverse',
alignSelf: 'flex-end',
paddingBottom: spacing(1),
},
schemaText: {
flex: 'none',
},
});
interface MutationModalProps extends WithStyles<typeof styles> {
......@@ -81,27 +102,58 @@ const MutationModal = ({ classes, mutationInfo }: MutationModalProps) => {
return (
<Modal open>
<Card className={classes.mutationCard}>
<div className={classes.cardHeader}>
Deploying Tracepoints
</div>
<img className={classes.image} src={moonwalkerSVG} />
<div className={classes.states}>
{
mutationInfo.getStatesList().map((mutation) => (
<ListItem className={classes.mutation} key={mutation.getId()}>
<ListItemIcon className={classes.icon}>
<MutationState state={mutation.getState()} classes={classes} />
</ListItemIcon>
<ListItemText>{mutation.getName()}</ListItemText>
</ListItem>
))
}
</div>
{ mutationInfo.getStatus().getMessage().includes('Schema')
? 'Waiting for schema to initialize...' : '' }
<Button onClick={cancelExecution}>
Cancel
</Button>
<Grid container spacing={3}>
<Grid item xs={12}>
<div className={classes.cardHeader}>
Deploying Tracepoints
</div>
</Grid>
<Grid item xs={6} className={classes.leftStates}>
{
mutationInfo.getStatesList().slice(0, Math.ceil(mutationInfo.getStatesList().length)).map((mutation) => (
<ListItem className={classes.mutation} key={mutation.getId()}>
<ListItemIcon className={classes.icon}>
<MutationState state={mutation.getState()} classes={classes} />
</ListItemIcon>
<ListItemText>{mutation.getName()}</ListItemText>
</ListItem>
))
}
</Grid>
<Grid item xs={6}>
{
mutationInfo.getStatesList().slice(Math.ceil(mutationInfo.getStatesList().length)).map((mutation) => (
<ListItem className={classes.mutation} key={mutation.getId()}>
<ListItemIcon className={classes.icon}>
<MutationState state={mutation.getState()} classes={classes} />
</ListItemIcon>
<ListItemText>{mutation.getName()}</ListItemText>
</ListItem>
))
}
</Grid>
<Grid item xs={12}>
{
(true || mutationInfo.getStatus().getMessage().includes('Schema'))
&& (
<ListItem className={classes.schema} key='schema'>
<ListItemIcon className={classes.icon}>
<MutationState state={LifeCycleState.PENDING_STATE} classes={classes} />
</ListItemIcon>
<ListItemText className={classes.schemaText}>Prepare schema</ListItemText>
</ListItem>
)
}
</Grid>
<Grid item xs={6}>
<img className={classes.image} src={moonwalkerSVG} />
</Grid>
<Grid item xs={6} className={classes.cancelButton}>
<Button onClick={cancelExecution}>
Cancel
</Button>
</Grid>
</Grid>
</Card>
</Modal>
);
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment