[Metrics UI] Fix Process List layout issues (#87005)

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>

x-pack/plugins/infra/public/pages/metrics/inventory_view/components/node_details/tabs/processes/process_row.tsx

@@ -51,7 +51,7 @@ export const ProcessRow = ({ cells, item }: Props) => {
             {({ measureRef, bounds: { height = 0 } }) => (
               <ExpandedRowCell commandHeight={height}>
                 <EuiSpacer size="s" />
-                <EuiDescriptionList compressed>
+                <ExpandedRowDescriptionList>
                   <EuiFlexGroup gutterSize="s">
                     <EuiFlexItem>
                       <div ref={measureRef}>
@@ -81,7 +81,7 @@ export const ProcessRow = ({ cells, item }: Props) => {
                       </EuiFlexItem>
                     )}
                   </EuiFlexGroup>
-                  <EuiFlexGrid columns={2} gutterSize="s">
+                  <EuiFlexGrid columns={2} gutterSize="s" responsive={false}>
                     <EuiFlexItem>
                       <EuiDescriptionListTitle>
                         {i18n.translate(
@@ -92,7 +92,7 @@ export const ProcessRow = ({ cells, item }: Props) => {
                         )}
                       </EuiDescriptionListTitle>
                       <EuiDescriptionListDescription>
-                        <CodeLine>{item.pid}</CodeLine>
+                        <CodeListItem>{item.pid}</CodeListItem>
                       </EuiDescriptionListDescription>
                     </EuiFlexItem>
                     <EuiFlexItem>
@@ -105,12 +105,12 @@ export const ProcessRow = ({ cells, item }: Props) => {
                         )}
                       </EuiDescriptionListTitle>
                       <EuiDescriptionListDescription>
-                        <CodeLine>{item.user}</CodeLine>
+                        <CodeListItem>{item.user}</CodeListItem>
                       </EuiDescriptionListDescription>
                     </EuiFlexItem>
                     <ProcessRowCharts command={item.command} />
                   </EuiFlexGrid>
-                </EuiDescriptionList>
+                </ExpandedRowDescriptionList>
               </ExpandedRowCell>
             )}
           </AutoSizer>
@@ -120,11 +120,15 @@ export const ProcessRow = ({ cells, item }: Props) => {
   );
 };
 
-export const CodeLine = euiStyled(EuiCode).attrs({
+const ExpandedRowDescriptionList = euiStyled(EuiDescriptionList).attrs({
+  compressed: true,
+})`
+  width: 100%;
+`;
+
+const CodeListItem = euiStyled(EuiCode).attrs({
   transparentBackground: true,
 })`
-  text-overflow: ellipsis;
-  overflow: hidden;
   padding: 0 !important;
   & code.euiCodeBlock__code {
     white-space: nowrap !important;

x-pack/plugins/infra/public/pages/metrics/inventory_view/components/node_details/tabs/processes/process_row_charts.tsx

@@ -138,7 +138,7 @@ const ProcessChart = ({ timeseries, color, label }: ProcessChartProps) => {
 };
 
 const ChartContainer = euiStyled.div`
-  width: 300px;
+  width: 100%;
   height: 140px;
 `;
 

x-pack/plugins/infra/public/pages/metrics/inventory_view/components/node_details/tabs/processes/processes_table.tsx

@@ -28,7 +28,7 @@ import { FORMATTERS } from '../../../../../../../../common/formatters';
 import { euiStyled } from '../../../../../../../../../observability/public';
 import { SortBy } from '../../../../hooks/use_process_list';
 import { Process } from './types';
-import { ProcessRow, CodeLine } from './process_row';
+import { ProcessRow } from './process_row';
 import { StateBadge } from './state_badge';
 import { STATE_ORDER } from './states';
 
@@ -150,7 +150,7 @@ export const ProcessesTable = ({
 
   return (
     <>
-      <EuiTable>
+      <EuiTable responsive={false}>
         <EuiTableHeader>
           <EuiTableHeaderCell width={24} />
           {columns.map((column) => (
@@ -296,3 +296,11 @@ const columns: Array<{
     render: (value: number) => FORMATTERS.percent(value),
   },
 ];
+
+const CodeLine = euiStyled.div`
+  font-family: ${(props) => props.theme.eui.euiCodeFontFamily};
+  font-size: ${(props) => props.theme.eui.euiFontSizeS};
+  white-space: pre;
+  overflow: hidden;
+  text-overflow: ellipsis;
+`;

x-pack/plugins/infra/public/pages/metrics/inventory_view/components/node_details/tabs/processes/summary_table.tsx

@@ -7,7 +7,15 @@
 import React, { useMemo } from 'react';
 import { mapValues } from 'lodash';
 import { i18n } from '@kbn/i18n';
-import { EuiBasicTable, EuiLoadingSpinner, EuiBasicTableColumn } from '@elastic/eui';
+import {
+  EuiLoadingSpinner,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiDescriptionList,
+  EuiDescriptionListTitle,
+  EuiDescriptionListDescription,
+  EuiHorizontalRule,
+} from '@elastic/eui';
 import { euiStyled } from '../../../../../../../../../observability/public';
 import { ProcessListAPIResponse } from '../../../../../../../../common/http_api';
 import { STATE_NAMES } from './states';
@@ -17,63 +25,51 @@ interface Props {
   isLoading: boolean;
 }
 
-type SummaryColumn = {
+type SummaryRecord = {
   total: number;
 } & Record<keyof typeof STATE_NAMES, number>;
 
 export const SummaryTable = ({ processSummary, isLoading }: Props) => {
   const processCount = useMemo(
     () =>
-      [
-        {
-          total: isLoading ? -1 : processSummary.total,
-          ...mapValues(STATE_NAMES, () => (isLoading ? -1 : 0)),
-          ...(isLoading ? {} : processSummary),
-        },
-      ] as SummaryColumn[],
+      ({
+        total: isLoading ? -1 : processSummary.total,
+        ...mapValues(STATE_NAMES, () => (isLoading ? -1 : 0)),
+        ...(isLoading ? {} : processSummary),
+      } as SummaryRecord),
     [processSummary, isLoading]
   );
   return (
-    <StyleWrapper>
-      <EuiBasicTable items={processCount} columns={columns} />
-    </StyleWrapper>
+    <>
+      <EuiFlexGroup gutterSize="m" responsive={false} wrap={true}>
+        {Object.entries(processCount).map(([field, value]) => (
+          <EuiFlexItem>
+            <EuiDescriptionList compressed={true}>
+              <ColumnTitle>{columnTitles[field as keyof SummaryRecord]}</ColumnTitle>
+              <EuiDescriptionListDescription>
+                {value === -1 ? <LoadingSpinner /> : value}
+              </EuiDescriptionListDescription>
+            </EuiDescriptionList>
+          </EuiFlexItem>
+        ))}
+      </EuiFlexGroup>
+      <EuiHorizontalRule margin="m" />
+    </>
   );
 };
 
-const loadingRenderer = (value: number) => (value === -1 ? <LoadingSpinner /> : value);
-
-const columns = [
-  {
-    field: 'total',
-    name: i18n.translate('xpack.infra.metrics.nodeDetails.processes.headingTotalProcesses', {
-      defaultMessage: 'Total processes',
-    }),
-    width: 125,
-    render: loadingRenderer,
-  },
-  ...Object.entries(STATE_NAMES).map(([field, name]) => ({ field, name, render: loadingRenderer })),
-] as Array<EuiBasicTableColumn<SummaryColumn>>;
+const columnTitles = {
+  total: i18n.translate('xpack.infra.metrics.nodeDetails.processes.headingTotalProcesses', {
+    defaultMessage: 'Total processes',
+  }),
+  ...STATE_NAMES,
+};
 
 const LoadingSpinner = euiStyled(EuiLoadingSpinner).attrs({ size: 'm' })`
   margin-top: 2px;
   margin-bottom: 3px;
 `;
 
-const StyleWrapper = euiStyled.div`
-  & .euiTableHeaderCell {
-    border-bottom: none;
-    & .euiTableCellContent {
-      padding-bottom: 0;
-    }
-    & .euiTableCellContent__text {
-      font-size: ${(props) => props.theme.eui.euiFontSizeS};
-    }
-  }
-
-  & .euiTableRowCell {
-    border-top: none;
-    & .euiTableCellContent {
-      padding-top: 0;
-    }
-  }
+const ColumnTitle = euiStyled(EuiDescriptionListTitle)`
+  white-space: nowrap;
 `;