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>
+  );
+}