github-mirrors/kibana
1
0
Fork 0
mirror of https://github.com/elastic/kibana.git synced 2025-04-24 09:48:58 -04:00
Code Issues Projects Releases Packages Wiki Activity

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

Browse source 
Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
This commit is contained in:
Zacqary Adam Xeper 2021-01-04 14:52:20 -06:00 • committed by GitHub
parent 96e9fdd78c
commit e9b43cdd3f
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 61 additions and 53 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -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;

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

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

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

@ -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;
`;

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

@ -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;
`;