mirror of https://github.com/portainer/portainer
fix(ui): remove extra margins from Dockerfile details section EE-4790 (#8213)
parent
e5fd0c9595
commit
b2bc4b92d6
|
@ -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>
|
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue