fix(docker): remove word break in details [EE-4481] (#7996)

app/react/docker/containers/ItemView/HealthStatus.tsx

@@ -0,0 +1,54 @@
+import { ComponentProps } from 'react';
+import { Server } from 'react-feather';
+
+import { TableContainer, TableTitle } from '@@/datatables';
+import { DetailsTable } from '@@/DetailsTable';
+import { Icon } from '@@/Icon';
+
+import { Health } from '../types/response';
+
+const StatusMode: Record<
+  Health['Status'],
+  ComponentProps<typeof Icon>['mode']
+> = {
+  healthy: 'success',
+  unhealthy: 'danger',
+  starting: 'warning',
+};
+
+interface Props {
+  health: Health;
+}
+
+export function HealthStatus({ health }: Props) {
+  return (
+    <div className="row">
+      <div className="col-lg-12 col-md-12 col-xs-12">
+        <TableContainer>
+          <TableTitle label="Container health" icon={Server} />
+
+          <DetailsTable>
+            <DetailsTable.Row label="Status">
+              <div className="vertical-center">
+                <Icon
+                  icon="fa fa-heartbeat"
+                  mode={StatusMode[health.Status]}
+                  className="space-right"
+                />
+                {health.Status}
+              </div>
+            </DetailsTable.Row>
+
+            <DetailsTable.Row label="Failure count">
+              {health.FailingStreak}
+            </DetailsTable.Row>
+
+            <DetailsTable.Row label="Last output">
+              {health.Log[health.Log.length - 1].Output}
+            </DetailsTable.Row>
+          </DetailsTable>
+        </TableContainer>
+      </div>
+    </div>
+  );
+}

app/react/docker/containers/types/response.ts

@@ -70,6 +70,12 @@ interface MountPoint {
   Propagation: MountPropagation;
 }
 
+export interface Health {
+  Status: 'healthy' | 'unhealthy' | 'starting';
+  FailingStreak: number;
+  Log: Array<{ Output: string }>;
+}
+
 export interface DockerContainerResponse {
   Id: string;
   Names: string[];
@@ -88,7 +94,6 @@ export interface DockerContainerResponse {
   };
   NetworkSettings?: SummaryNetworkSettings;
   Mounts: MountPoint[];
-
   Portainer: PortainerMetadata;
   IsPortainer: boolean;
 }

app/react/docker/images/ItemView/DockerfileDetails.tsx

@@ -0,0 +1,83 @@
+import { List } from 'react-feather';
+
+import { joinCommand } from '@/docker/filters/utils';
+import { getPairKey, getPairValue } from '@/portainer/filters/filters';
+
+import { TableContainer, TableTitle } from '@@/datatables';
+import { DetailsTable } from '@@/DetailsTable';
+
+interface DockerImage {
+  Command: Array<string>;
+  Entrypoint: Array<string>;
+  ExposedPorts: Array<number>;
+  Volumes: Array<string>;
+  Env: Array<string>;
+}
+
+interface Props {
+  image: DockerImage;
+}
+
+export function DockerfileDetails({ image }: Props) {
+  return (
+    <div className="row">
+      <div className="col-lg-12 col-md-12 col-xs-12">
+        <TableContainer>
+          <TableTitle label="Dockerfile details" icon={List} />
+          <DetailsTable>
+            <DetailsTable.Row label="CMD">
+              <code>{joinCommand(image.Command)}</code>
+            </DetailsTable.Row>
+
+            {image.Entrypoint && (
+              <DetailsTable.Row label="ENTRYPOINT">
+                <code>{joinCommand(image.Entrypoint)}</code>
+              </DetailsTable.Row>
+            )}
+
+            {image.ExposedPorts.length > 0 && (
+              <DetailsTable.Row label="EXPOSE">
+                {image.ExposedPorts.map((port, index) => (
+                  <span className="label label-default space-right" key={index}>
+                    {port}
+                  </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>
+                    ))}
+                  </tbody>
+                </table>
+              </DetailsTable.Row>
+            )}
+          </DetailsTable>
+        </TableContainer>
+      </div>
+    </div>
+  );
+}