fix(ui): remove extra margins from Dockerfile details section EE-4790 (#8213)

pull/8212/head^2
andres-portainer 2022-12-21 19:09:40 -03:00 committed by GitHub
parent e5fd0c9595
commit b2bc4b92d6
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 52 additions and 56 deletions

View File

@ -20,64 +20,60 @@ interface Props {
export function DockerfileDetails({ image }: Props) { export function DockerfileDetails({ image }: Props) {
return ( return (
<div className="row"> <TableContainer>
<div className="col-lg-12 col-md-12 col-xs-12"> <TableTitle label="Dockerfile details" icon={List} />
<TableContainer> <DetailsTable>
<TableTitle label="Dockerfile details" icon={List} /> <DetailsTable.Row label="CMD">
<DetailsTable> <code>{joinCommand(image.Command)}</code>
<DetailsTable.Row label="CMD"> </DetailsTable.Row>
<code>{joinCommand(image.Command)}</code>
</DetailsTable.Row>
{image.Entrypoint && ( {image.Entrypoint && (
<DetailsTable.Row label="ENTRYPOINT"> <DetailsTable.Row label="ENTRYPOINT">
<code>{joinCommand(image.Entrypoint)}</code> <code>{joinCommand(image.Entrypoint)}</code>
</DetailsTable.Row> </DetailsTable.Row>
)} )}
{image.ExposedPorts.length > 0 && ( {image.ExposedPorts.length > 0 && (
<DetailsTable.Row label="EXPOSE"> <DetailsTable.Row label="EXPOSE">
{image.ExposedPorts.map((port, index) => ( {image.ExposedPorts.map((port, index) => (
<span className="label label-default space-right" key={index}> <span className="label label-default space-right" key={index}>
{port} {port}
</span> </span>
))}
</DetailsTable.Row>
)}
{image.Volumes.length > 0 && (
<DetailsTable.Row label="VOLUME">
<div className="flex flex-wrap gap-1">
{image.Volumes.map((volume, index) => (
<span
key={index}
className="label label-default space-right"
ng-repeat="volume in image.Volumes"
>
{volume}
</span>
))}
</div>
</DetailsTable.Row>
)}
{image.Env.length > 0 && (
<DetailsTable.Row label="ENV">
<table className="table table-bordered table-condensed">
<tbody>
{image.Env.map((variable) => (
<tr key={variable}>
<td>{getPairKey(variable, '=')}</td>
<td>{getPairValue(variable, '=')}</td>
</tr>
))} ))}
</DetailsTable.Row> </tbody>
)} </table>
</DetailsTable.Row>
{image.Volumes.length > 0 && ( )}
<DetailsTable.Row label="VOLUME"> </DetailsTable>
<div className="flex flex-wrap gap-1"> </TableContainer>
{image.Volumes.map((volume, index) => (
<span
key={index}
className="label label-default space-right"
ng-repeat="volume in image.Volumes"
>
{volume}
</span>
))}
</div>
</DetailsTable.Row>
)}
{image.Env.length > 0 && (
<DetailsTable.Row label="ENV">
<table className="table table-bordered table-condensed">
<tbody>
{image.Env.map((variable) => (
<tr key={variable}>
<td>{getPairKey(variable, '=')}</td>
<td>{getPairValue(variable, '=')}</td>
</tr>
))}
</tbody>
</table>
</DetailsTable.Row>
)}
</DetailsTable>
</TableContainer>
</div>
</div>
); );
} }