fix: Updated display of some items on layers tab

Signed-off-by: Raul Kele <raulkeleblk@gmail.com>
This commit is contained in:
Raul Kele 2022-10-17 13:57:42 +03:00
parent 576ef56ff7
commit 7e0cd7d3b1
2 changed files with 48 additions and 34 deletions

View File

@ -160,14 +160,27 @@ function HistoryLayers(props) {
</Typography> </Typography>
</Stack> </Stack>
</Grid> </Grid>
<Typography variant="body1" align="left" className={classes.title} sx={{ backgroundColor: '#F7F7F7' }}> <Stack direction="column" spacing={2}>
{historyData[selectedIndex].HistoryDescription?.CreatedBy} <Typography variant="body1" align="left" className={classes.title} sx={{ backgroundColor: '#F7F7F7' }}>
</Typography> {historyData[selectedIndex].HistoryDescription?.CreatedBy}
{!historyData[selectedIndex].HistoryDescription?.EmptyLayer ? ( </Typography>
<Typography data-testid="hash-typography">#: {historyData[selectedIndex].Layer?.Digest}</Typography> {!historyData[selectedIndex].HistoryDescription?.EmptyLayer ? (
) : ( <>
<Typography data-testid="no-hash-typography"></Typography> <Typography variant="body1" align="left" className={classes.title}>
)} DIGEST
</Typography>
<Typography
data-testid="hash-typography"
className={classes.title}
sx={{ backgroundColor: '#F7F7F7' }}
>
{historyData[selectedIndex].Layer?.Digest}
</Typography>
</>
) : (
<Typography data-testid="no-hash-typography" sx={{ backgroundColor: '#F7F7F7' }}></Typography>
)}
</Stack>
</CardContent> </CardContent>
</Card> </Card>
) )
@ -189,31 +202,32 @@ function HistoryLayers(props) {
variant="fullWidth" variant="fullWidth"
sx={{ margin: '5% 0% 0% 0%', background: 'rgba(0, 0, 0, 0.38)', height: '0.00625rem', width: '100%' }} sx={{ margin: '5% 0% 0% 0%', background: 'rgba(0, 0, 0, 0.38)', height: '0.00625rem', width: '100%' }}
/> />
{historyData ? ( <Stack direction="column" spacing={2}>
<Card className={classes.card} raised> {historyData ? (
<CardContent className={classes.content}> <Card className={classes.card} raised>
{historyData.map((layer, index) => { <CardContent className={classes.content}>
return ( {historyData.map((layer, index) => {
<div key={`${layer?.Layer?.Size}${index}`} onClick={() => setSelectedIndex(index)}> return (
<LayerCard <div key={`${layer?.Layer?.Size}${index}`} onClick={() => setSelectedIndex(index)}>
key={`${layer?.Layer?.Size}${index}`} <LayerCard
index={index + 1} key={`${layer?.Layer?.Size}${index}`}
isSelected={selectedIndex === index} index={index + 1}
layer={layer?.Layer} isSelected={selectedIndex === index}
historyDescription={layer?.HistoryDescription} layer={layer?.Layer}
/> historyDescription={layer?.HistoryDescription}
</div> />
); </div>
})} );
</CardContent> })}
</Card> </CardContent>
) : ( </Card>
<div> ) : (
<Typography className={classes.none}> No Layers </Typography> <div>
</div> <Typography className={classes.none}> No Layers </Typography>
)} </div>
)}
{!isLoaded ? <Loading /> : renderHistoryData()} {!isLoaded ? <Loading /> : renderHistoryData()}
</Stack>
</> </>
); );
} }

View File

@ -233,7 +233,7 @@ function TagDetails() {
gutterBottom gutterBottom
align="left" align="left"
> >
Digest:{' '} DIGEST:{' '}
{ {
// @ts-ignore // @ts-ignore
imageDetailData?.digest imageDetailData?.digest