diff --git a/x-pack/plugins/infra/public/pages/metrics/inventory_view/components/node_details/overlay.tsx b/x-pack/plugins/infra/public/pages/metrics/inventory_view/components/node_details/overlay.tsx
index be953ded70d7..b0e6ab751f02 100644
--- a/x-pack/plugins/infra/public/pages/metrics/inventory_view/components/node_details/overlay.tsx
+++ b/x-pack/plugins/infra/public/pages/metrics/inventory_view/components/node_details/overlay.tsx
@@ -4,9 +4,9 @@
* you may not use this file except in compliance with the Elastic License.
*/
-import { EuiPortal, EuiTabs, EuiTab, EuiPanel, EuiTitle } from '@elastic/eui';
+import { EuiPortal, EuiTabs, EuiTab, EuiPanel, EuiTitle, EuiSpacer } from '@elastic/eui';
import { FormattedMessage } from '@kbn/i18n/react';
-import React, { CSSProperties, useMemo, useState } from 'react';
+import React, { useMemo, useState } from 'react';
import { EuiFlexGroup, EuiFlexItem, EuiButtonEmpty } from '@elastic/eui';
import { euiStyled } from '../../../../../../../observability/public';
import { InfraWaffleMapNode, InfraWaffleMapOptions } from '../../../../../lib/lib';
@@ -15,7 +15,7 @@ import { MetricsTab } from './tabs/metrics/metrics';
import { LogsTab } from './tabs/logs';
import { ProcessesTab } from './tabs/processes';
import { PropertiesTab } from './tabs/properties/index';
-import { OVERLAY_Y_START, OVERLAY_BOTTOM_MARGIN, OVERLAY_HEADER_SIZE } from './tabs/shared';
+import { OVERLAY_Y_START, OVERLAY_BOTTOM_MARGIN } from './tabs/shared';
import { useLinkProps } from '../../../../../hooks/use_link_props';
import { getNodeDetailUrl } from '../../../../link_to';
import { findInventoryModel } from '../../../../../../common/inventory_models';
@@ -70,21 +70,23 @@ export const NodeContextPopover = ({
return (
-
+
-
+
-
+
{node.name}
-
+
-
+
-
-
+
+
+
{tabs.map((tab, i) => (
setSelectedTab(i)}>
{tab.name}
@@ -112,32 +115,38 @@ export const NodeContextPopover = ({
{tabs[selectedTab].content}
-
+
);
};
const OverlayHeader = euiStyled.div`
- border-color: ${(props) => props.theme.eui.euiBorderColor};
- border-bottom-width: ${(props) => props.theme.eui.euiBorderWidthThick};
- padding-bottom: 0;
+ padding-top: ${(props) => props.theme.eui.paddingSizes.m};
+ padding-right: ${(props) => props.theme.eui.paddingSizes.m};
+ padding-left: ${(props) => props.theme.eui.paddingSizes.m};
+ background-color: ${(props) => props.theme.eui.euiPageBackgroundColor};
+ box-shadow: inset 0 -1px ${(props) => props.theme.eui.euiBorderColor};
+`;
+
+const OverlayPanel = euiStyled(EuiPanel).attrs({ paddingSize: 'none' })`
+ display: flex;
+ flex-direction: column;
+ position: absolute;
+ right: 16px;
+ top: ${OVERLAY_Y_START}px;
+ width: 100%;
+ max-width: 720px;
+ z-index: 2;
+ max-height: calc(100vh - ${OVERLAY_Y_START + OVERLAY_BOTTOM_MARGIN}px);
overflow: hidden;
- background-color: ${(props) => props.theme.eui.euiColorLightestShade};
- height: ${OVERLAY_HEADER_SIZE}px;
-`;
-const OverlayHeaderTitleWrapper = euiStyled(EuiFlexGroup).attrs({ alignItems: 'center' })`
- padding: ${(props) => props.theme.eui.paddingSizes.s} ${(props) =>
- props.theme.eui.paddingSizes.m} 0;
+ @media (max-width: 752px) {
+ border-radius: 0px !important;
+ left: 0px;
+ right: 0px;
+ top: 97px;
+ bottom: 0;
+ max-height: calc(100vh - 97px);
+ max-width: 100%;
+ }
`;
-
-const panelStyle: CSSProperties = {
- position: 'absolute',
- right: 10,
- top: OVERLAY_Y_START,
- width: '50%',
- maxWidth: 730,
- zIndex: 2,
- height: `calc(100vh - ${OVERLAY_Y_START + OVERLAY_BOTTOM_MARGIN}px)`,
- overflow: 'hidden',
-};
diff --git a/x-pack/plugins/infra/public/pages/metrics/inventory_view/components/node_details/tabs/logs.tsx b/x-pack/plugins/infra/public/pages/metrics/inventory_view/components/node_details/tabs/logs.tsx
index ce800a7d7370..81ca7d1dcd27 100644
--- a/x-pack/plugins/infra/public/pages/metrics/inventory_view/components/node_details/tabs/logs.tsx
+++ b/x-pack/plugins/infra/public/pages/metrics/inventory_view/components/node_details/tabs/logs.tsx
@@ -15,7 +15,6 @@ import { TabContent, TabProps } from './shared';
import { LogStream } from '../../../../../../components/log_stream';
import { useWaffleOptionsContext } from '../../../hooks/use_waffle_options';
import { findInventoryFields } from '../../../../../../../common/inventory_models';
-import { euiStyled } from '../../../../../../../../observability/public';
import { useLinkProps } from '../../../../../../hooks/use_link_props';
import { getNodeLogsUrl } from '../../../../../link_to';
@@ -51,22 +50,25 @@ const TabComponent = (props: TabProps) => {
return (
-
+
-
-
-
+
-
+
{
);
};
-const QueryWrapper = euiStyled.div`
- padding: ${(props) => props.theme.eui.paddingSizes.m};
- padding-right: 0;
-`;
-
export const LogsTab = {
id: 'logs',
name: i18n.translate('xpack.infra.nodeDetails.tabs.logs', {
diff --git a/x-pack/plugins/infra/public/pages/metrics/inventory_view/components/node_details/tabs/metrics/chart_header.tsx b/x-pack/plugins/infra/public/pages/metrics/inventory_view/components/node_details/tabs/metrics/chart_header.tsx
index 63004072c08d..ad4a48635d37 100644
--- a/x-pack/plugins/infra/public/pages/metrics/inventory_view/components/node_details/tabs/metrics/chart_header.tsx
+++ b/x-pack/plugins/infra/public/pages/metrics/inventory_view/components/node_details/tabs/metrics/chart_header.tsx
@@ -11,7 +11,6 @@ import { EuiFlexGroup } from '@elastic/eui';
import { EuiIcon } from '@elastic/eui';
import { colorTransformer } from '../../../../../../../../common/color_palette';
import { MetricsExplorerOptionsMetric } from '../../../../../metrics_explorer/hooks/use_metrics_explorer_options';
-import { euiStyled } from '../../../../../../../../../observability/public';
interface Props {
title: string;
@@ -20,33 +19,33 @@ interface Props {
export const ChartHeader = ({ title, metrics }: Props) => {
return (
-
+
-
- {title}
+
+ {title}
-
+
{metrics.map((chartMetric) => (
-
-
-
-
-
- {chartMetric.label}
-
-
+
+
+
+
+
+
+ {chartMetric.label}
+
+
+
))}
-
+
);
};
-
-const ChartHeaderWrapper = euiStyled.div`
- display: flex;
- width: 100%;
- padding: ${(props) => props.theme.eui.paddingSizes.s} ${(props) =>
- props.theme.eui.paddingSizes.m};
-`;
diff --git a/x-pack/plugins/infra/public/pages/metrics/inventory_view/components/node_details/tabs/metrics/metrics.tsx b/x-pack/plugins/infra/public/pages/metrics/inventory_view/components/node_details/tabs/metrics/metrics.tsx
index 789658c06040..a295d8293632 100644
--- a/x-pack/plugins/infra/public/pages/metrics/inventory_view/components/node_details/tabs/metrics/metrics.tsx
+++ b/x-pack/plugins/infra/public/pages/metrics/inventory_view/components/node_details/tabs/metrics/metrics.tsx
@@ -10,6 +10,7 @@ import { i18n } from '@kbn/i18n';
import {
Axis,
Chart,
+ ChartSizeArray,
niceTimeFormatter,
Position,
Settings,
@@ -17,7 +18,7 @@ import {
PointerEvent,
} from '@elastic/charts';
import moment from 'moment';
-import { EuiLoadingChart } from '@elastic/eui';
+import { EuiLoadingChart, EuiSpacer, EuiFlexGrid, EuiFlexItem } from '@elastic/eui';
import { TabContent, TabProps } from '../shared';
import { useSnapshot } from '../../../../hooks/use_snaphot';
import { useWaffleOptionsContext } from '../../../../hooks/use_waffle_options';
@@ -39,7 +40,6 @@ import { createInventoryMetricFormatter } from '../../../../lib/create_inventory
import { calculateDomain } from '../../../../../metrics_explorer/components/helpers/calculate_domain';
import { getTimelineChartTheme } from '../../../../../metrics_explorer/components/helpers/get_chart_theme';
import { useUiSetting } from '../../../../../../../../../../../src/plugins/kibana_react/public';
-import { euiStyled } from '../../../../../../../../../observability/public';
import { ChartHeader } from './chart_header';
import {
SYSTEM_METRIC_NAME,
@@ -56,6 +56,8 @@ import {
import { TimeDropdown } from './time_dropdown';
const ONE_HOUR = 60 * 60 * 1000;
+const CHART_SIZE: ChartSizeArray = ['100%', 160];
+
const TabComponent = (props: TabProps) => {
const cpuChartRef = useRef(null);
const networkChartRef = useRef(null);
@@ -282,217 +284,184 @@ const TabComponent = (props: TabProps) => {
return (
-
-
-
-
-
+
+
+
+
+
+
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
-
+
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
-
+
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
-
+
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
);
};
-const ChartsContainer = euiStyled.div`
- display: flex;
- flex-direction: row;
- flex-wrap: wrap;
-`;
-
-const ChartContainerWrapper = euiStyled.div`
- width: 50%
-`;
-
-const TimepickerWrapper = euiStyled.div`
- padding: ${(props) => props.theme.eui.paddingSizes.m};
- width: 50%;
-`;
-
-const ChartContainer: React.FC = ({ children }) => (
-
- {children}
-
-);
-
const LoadingPlaceholder = () => {
return (
(
{
};
const TableWrapper = euiStyled.div`
- margin-bottom: 20px
+ &:not(:last-child) {
+ margin-bottom: 16px
+ }
`;
const LoadingPlaceholder = () => {
diff --git a/x-pack/plugins/infra/public/pages/metrics/inventory_view/components/node_details/tabs/properties/table.tsx b/x-pack/plugins/infra/public/pages/metrics/inventory_view/components/node_details/tabs/properties/table.tsx
index c3e47b6084eb..7f0ca2b6e262 100644
--- a/x-pack/plugins/infra/public/pages/metrics/inventory_view/components/node_details/tabs/properties/table.tsx
+++ b/x-pack/plugins/infra/public/pages/metrics/inventory_view/components/node_details/tabs/properties/table.tsx
@@ -4,18 +4,20 @@
* you may not use this file except in compliance with the Elastic License.
*/
-import { EuiText } from '@elastic/eui';
-import { EuiToolTip } from '@elastic/eui';
-import { EuiButtonIcon } from '@elastic/eui';
-import { EuiFlexGroup } from '@elastic/eui';
-import { EuiFlexItem } from '@elastic/eui';
-import { EuiLink } from '@elastic/eui';
-import { EuiBasicTable } from '@elastic/eui';
+import {
+ EuiText,
+ EuiToolTip,
+ EuiButtonIcon,
+ EuiFlexGroup,
+ EuiFlexItem,
+ EuiLink,
+ EuiBasicTable,
+ EuiSpacer,
+} from '@elastic/eui';
import { i18n } from '@kbn/i18n';
import { first } from 'lodash';
import React, { useCallback, useMemo, useState } from 'react';
import { FormattedMessage } from 'react-intl';
-import { euiStyled } from '../../../../../../../../../observability/public';
interface Row {
name: string;
@@ -51,15 +53,19 @@ export const Table = (props: Props) => {
render: (_name: string, item: Row) => {
return (
-
-
-
+
+
+
{
)}
onClick={() => onClick(item)}
/>
-
-
- {!Array.isArray(item.value) && item.value}
- {Array.isArray(item.value) && }
-
-
-
+
+
+
+ {!Array.isArray(item.value) && item.value}
+ {Array.isArray(item.value) && }
+
+
);
},
@@ -86,20 +92,21 @@ export const Table = (props: Props) => {
return (
<>
-
-
- {title}
-
-
-
+
+ {title}
+
+
+
>
);
};
-const TitleWrapper = euiStyled.div`
- margin-bottom: 10px
-`;
-
class TableWithoutHeader extends EuiBasicTable {
renderTableHead() {
return <>>;
@@ -123,7 +130,7 @@ const ArrayValue = (props: MoreProps) => {
return (
<>
{!isExpanded && (
-
+
{first(values)}
{' ... '}
@@ -148,7 +155,7 @@ const ArrayValue = (props: MoreProps) => {
))}
{i18n.translate('xpack.infra.nodeDetails.tabs.metadata.seeLess', {
- defaultMessage: 'See less',
+ defaultMessage: 'Show less',
})}
diff --git a/x-pack/plugins/infra/public/pages/metrics/inventory_view/components/node_details/tabs/shared.tsx b/x-pack/plugins/infra/public/pages/metrics/inventory_view/components/node_details/tabs/shared.tsx
index 7386fa64aca9..6ff31e86c9d5 100644
--- a/x-pack/plugins/infra/public/pages/metrics/inventory_view/components/node_details/tabs/shared.tsx
+++ b/x-pack/plugins/infra/public/pages/metrics/inventory_view/components/node_details/tabs/shared.tsx
@@ -17,11 +17,9 @@ export interface TabProps {
export const OVERLAY_Y_START = 266;
export const OVERLAY_BOTTOM_MARGIN = 16;
-export const OVERLAY_HEADER_SIZE = 96;
-const contentHeightOffset = OVERLAY_Y_START + OVERLAY_BOTTOM_MARGIN + OVERLAY_HEADER_SIZE;
export const TabContent = euiStyled.div`
- padding: ${(props) => props.theme.eui.paddingSizes.s};
- height: calc(100vh - ${contentHeightOffset}px);
+ padding: ${(props) => props.theme.eui.paddingSizes.m};
+ flex: 1;
overflow-y: auto;
overflow-x: hidden;
`;