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

Optimized content to be more vertical for resizing consistancy (#37120) (#38058)

Browse source 
* Optimized content to be more vertical for resizing consistancy

* Fixed snapshots

* Feedback changes

* Update _summary_status.scss

* Fixed column order for testing
This commit is contained in:
igoristic 2019-06-05 00:24:10 -04:00 • committed by GitHub
parent d237403ba8
commit 2270dec5fc
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
8 changed files with 84 additions and 71 deletions
Download patch file Download diff file Expand all files Collapse all files

22
x-pack/plugins/monitoring/public/components/elasticsearch/nodes/__tests__/__snapshots__/cells.test.js.snap generated
View file

@ -16,18 +16,15 @@ exports[`Node Listing Metric Cell should format a non-percentage metric 1`] = `
<div
class="euiFlexItem euiFlexItem--flexGrowZero"
>
<h4
class="euiTitle euiTitle--medium"
<span
class="euiTitle euiTitle--small"
style="overflow-x:hidden;white-space:nowrap"
>
206.3 GB 
<span
class="fa fa-long-arrow-down"
/>
</h4>
</div>
<div
class="euiFlexItem euiFlexItem--flexGrowZero"
>
</span>
<div
class="euiText euiText--extraSmall"
>
@ -50,18 +47,15 @@ exports[`Node Listing Metric Cell should format a percentage metric 1`] = `
<div
class="euiFlexItem euiFlexItem--flexGrowZero"
>
<h4
class="euiTitle euiTitle--medium"
<span
class="euiTitle euiTitle--small"
style="overflow-x:hidden;white-space:nowrap"
>
0% 
<span
class="fa fa-long-arrow-down"
/>
</h4>
</div>
<div
class="euiFlexItem euiFlexItem--flexGrowZero"
>
</span>
<div
class="euiText euiText--extraSmall"
>

12
x-pack/plugins/monitoring/public/components/elasticsearch/nodes/cells.js
View file

@ -32,6 +32,8 @@ const metricVal = (metric, format, isPercent) => {
return formatMetric(metric, format);
};
const noWrapStyle = { overflowX: 'hidden', whiteSpace: 'nowrap' };
function MetricCell({ isOnline, metric = {}, isPercent, ...props }) {
if (isOnline) {
const { lastVal, maxVal, minVal, slope } = get(metric, 'summary', {});
@ -40,15 +42,13 @@ function MetricCell({ isOnline, metric = {}, isPercent, ...props }) {
return (
<EuiFlexGroup gutterSize="m" alignItems="center" wrap {...props}>
<EuiFlexItem grow={false}>
<EuiTitle size="m">
<h4>
{ metricVal(lastVal, format, isPercent) }
<EuiTitle size="s" style={noWrapStyle}>
<span>
{metricVal(lastVal, format, isPercent)}
&nbsp;
<span className={`fa fa-long-arrow-${getSlopeArrow(slope)}`} />
</h4>
</span>
</EuiTitle>
</EuiFlexItem>
<EuiFlexItem grow={false}>
<EuiText size="xs">
{i18n.translate('xpack.monitoring.elasticsearch.nodes.cells.maxText', {
defaultMessage: '{metric} max',

63
x-pack/plugins/monitoring/public/components/elasticsearch/nodes/nodes.js
View file

@ -18,6 +18,7 @@ import {
EuiPageContent,
EuiPageBody,
EuiPanel,
EuiText
} from '@elastic/eui';
import { i18n } from '@kbn/i18n';
import { injectI18n } from '@kbn/i18n/react';
@ -35,26 +36,29 @@ const getColumns = showCgroupMetricsElasticsearch => {
name: i18n.translate('xpack.monitoring.elasticsearch.nodes.nameColumnTitle', {
defaultMessage: 'Name',
}),
width: '20%',
field: 'name',
sortable: true,
render: (value, node) => (
<div>
<div className="monTableCell__name">
<EuiToolTip
position="bottom"
content={node.nodeTypeLabel}
>
<span className={`fa ${node.nodeTypeClass}`} />
</EuiToolTip>
&nbsp;
<span data-test-subj="name">
<EuiLink
href={`#/elasticsearch/nodes/${node.resolver}`}
data-test-subj={`nodeLink-${node.resolver}`}
<EuiText size="m">
<EuiToolTip
position="bottom"
content={node.nodeTypeLabel}
>
{value}
</EuiLink>
</span>
<span className={`fa ${node.nodeTypeClass}`} />
</EuiToolTip>
&nbsp;
<span data-test-subj="name">
<EuiLink
href={`#/elasticsearch/nodes/${node.resolver}`}
data-test-subj={`nodeLink-${node.resolver}`}
>
{value}
</EuiLink>
</span>
</EuiText>
</div>
<div className="monTableCell__transportAddress">
{extractIp(node.transport_address)}
@ -87,6 +91,21 @@ const getColumns = showCgroupMetricsElasticsearch => {
}
});
cols.push({
name: i18n.translate('xpack.monitoring.elasticsearch.nodes.shardsColumnTitle', {
defaultMessage: 'Shards',
}),
field: 'shardCount',
sortable: true,
render: (value, node) => {
return node.isOnline ? (
<div className="monTableCell__number" data-test-subj="shards">
{value}
</div>
) : <OfflineCell/>;
}
});
if (showCgroupMetricsElasticsearch) {
cols.push({
name: cpuUsageColumnTitle,
@ -174,7 +193,6 @@ const getColumns = showCgroupMetricsElasticsearch => {
}),
field: 'node_free_space',
sortable: getSortHandler('node_free_space'),
width: '300px',
render: (value, node) => (
<MetricCell
isOnline={node.isOnline}
@ -185,21 +203,6 @@ const getColumns = showCgroupMetricsElasticsearch => {
)
});
cols.push({
name: i18n.translate('xpack.monitoring.elasticsearch.nodes.shardsColumnTitle', {
defaultMessage: 'Shards',
}),
field: 'shardCount',
sortable: true,
render: (value, node) => {
return node.isOnline ? (
<div className="monTableCell__number" data-test-subj="shards">
{value}
</div>
) : <OfflineCell/>;
}
});
return cols;
};

19
x-pack/plugins/monitoring/public/components/summary_status/__snapshots__/summary_status.test.js.snap generated
View file

@ -2,6 +2,7 @@
exports[`Summary Status Component should allow label to be optional 1`] = `
<div
class="monSummaryStatusNoWrap"
intl="[object Object]"
>
<div
@ -24,7 +25,7 @@ exports[`Summary Status Component should allow label to be optional 1`] = `
</div>
<p
aria-labelledby="generated-id"
class="euiTitle euiTitle--small euiStat__title"
class="euiTitle euiTitle--xsmall euiStat__title"
>
Status:
<span
@ -56,7 +57,7 @@ exports[`Summary Status Component should allow label to be optional 1`] = `
</div>
<p
aria-labelledby="generated-id"
class="euiTitle euiTitle--small euiStat__title"
class="euiTitle euiTitle--xsmall euiStat__title"
>
127.0.0.1:9300
</p>
@ -80,7 +81,7 @@ exports[`Summary Status Component should allow label to be optional 1`] = `
</div>
<p
aria-labelledby="generated-id"
class="euiTitle euiTitle--small euiStat__title"
class="euiTitle euiTitle--xsmall euiStat__title"
>
24.8k
</p>
@ -92,6 +93,7 @@ exports[`Summary Status Component should allow label to be optional 1`] = `
exports[`Summary Status Component should allow status to be optional 1`] = `
<div
class="monSummaryStatusNoWrap"
intl="[object Object]"
>
<div
@ -115,7 +117,7 @@ exports[`Summary Status Component should allow status to be optional 1`] = `
</div>
<p
aria-labelledby="generated-id"
class="euiTitle euiTitle--small euiStat__title"
class="euiTitle euiTitle--xsmall euiStat__title"
>
173.9 GB
</p>
@ -139,7 +141,7 @@ exports[`Summary Status Component should allow status to be optional 1`] = `
</div>
<p
aria-labelledby="generated-id"
class="euiTitle euiTitle--small euiStat__title"
class="euiTitle euiTitle--xsmall euiStat__title"
>
24.8k
</p>
@ -151,6 +153,7 @@ exports[`Summary Status Component should allow status to be optional 1`] = `
exports[`Summary Status Component should render metrics in a summary bar 1`] = `
<div
class="monSummaryStatusNoWrap"
intl="[object Object]"
>
<div
@ -173,7 +176,7 @@ exports[`Summary Status Component should render metrics in a summary bar 1`] = `
</div>
<p
aria-labelledby="generated-id"
class="euiTitle euiTitle--small euiStat__title"
class="euiTitle euiTitle--xsmall euiStat__title"
>
Status:
<span
@ -207,7 +210,7 @@ exports[`Summary Status Component should render metrics in a summary bar 1`] = `
</div>
<p
aria-labelledby="generated-id"
class="euiTitle euiTitle--small euiStat__title"
class="euiTitle euiTitle--xsmall euiStat__title"
>
173.9 GB
</p>
@ -231,7 +234,7 @@ exports[`Summary Status Component should render metrics in a summary bar 1`] = `
</div>
<p
aria-labelledby="generated-id"
class="euiTitle euiTitle--small euiStat__title"
class="euiTitle euiTitle--xsmall euiStat__title"
>
24.8k
</p>

16
x-pack/plugins/monitoring/public/components/summary_status/_summary_status.scss
View file

@ -1,5 +1,13 @@
.monSummaryStatus {
background-color: $euiColorLightestShade;
border-bottom: $euiBorderThin;
padding: $euiSize;
.monSummaryStatusNoWrap {
margin-left: $euiSizeM;
margin-right: $euiSizeM;
.euiTitle {
overflow-x: hidden;
white-space: nowrap;
@include euiFontSizeXS;
}
.euiFlexItem {
margin: $euiSizeS;
}
}

6
x-pack/plugins/monitoring/public/components/summary_status/summary_status.js
View file

@ -20,7 +20,7 @@ const wrapChild = ({ label, value, ...props }, index) => (
>
<EuiStat
title={value}
titleSize="s"
titleSize="xs"
textAlign="left"
description={label ? `${label}` : ''}
/>
@ -67,7 +67,7 @@ const StatusIndicator = ({ status, isOnline, IconComponent }) => {
{capitalize(status)}
</Fragment>
)}
titleSize="s"
titleSize="xs"
textAlign="left"
description={i18n.translate('xpack.monitoring.summaryStatus.statusDescription', {
defaultMessage: 'Status',
@ -79,7 +79,7 @@ const StatusIndicator = ({ status, isOnline, IconComponent }) => {
export function SummaryStatus({ metrics, status, isOnline, IconComponent = DefaultIconComponent, ...props }) {
return (
<div {...props}>
<div {...props} className="monSummaryStatusNoWrap">
<EuiFlexGroup justifyContent="spaceBetween">
<StatusIndicator status={status} IconComponent={IconComponent} isOnline={isOnline} />
{metrics.map(wrapChild)}

7
x-pack/plugins/monitoring/public/components/table/_table.scss
View file

@ -26,13 +26,18 @@
@include euiFontSizeM;
}
.monTableCell__status {
overflow-x: hidden;
white-space: nowrap;
}
.monTableCell__transportAddress {
color: $euiColorDarkShade;
@include euiFontSizeS;
}
.monTableCell__number {
@include euiFontSizeXL;
@include euiFontSizeL;
}
.monTableCell__splitNumber {

10
x-pack/test/functional/services/monitoring/elasticsearch_nodes.js
View file

@ -19,11 +19,11 @@ export function MonitoringElasticsearchNodesProvider({ getService, getPageObject
const SUBJ_TABLE_SORT_NAME_COL = `${SUBJ_TABLE_CONTAINER} tableHeaderCell_name_0`;
const SUBJ_TABLE_SORT_STATUS_COL = `${SUBJ_TABLE_CONTAINER} tableHeaderCell_isOnline_1`;
const SUBJ_TABLE_SORT_CPU_COL = `${SUBJ_TABLE_CONTAINER} tableHeaderCell_node_cpu_utilization_2`;
const SUBJ_TABLE_SORT_LOAD_COL = `${SUBJ_TABLE_CONTAINER} tableHeaderCell_node_load_average_3`;
const SUBJ_TABLE_SORT_MEM_COL = `${SUBJ_TABLE_CONTAINER} tableHeaderCell_node_jvm_mem_percent_4`;
const SUBJ_TABLE_SORT_DISK_COL = `${SUBJ_TABLE_CONTAINER} tableHeaderCell_node_free_space_5`;
const SUBJ_TABLE_SORT_SHARDS_COL = `${SUBJ_TABLE_CONTAINER} tableHeaderCell_shardCount_6`;
const SUBJ_TABLE_SORT_SHARDS_COL = `${SUBJ_TABLE_CONTAINER} tableHeaderCell_shardCount_2`;
const SUBJ_TABLE_SORT_CPU_COL = `${SUBJ_TABLE_CONTAINER} tableHeaderCell_node_cpu_utilization_3`;
const SUBJ_TABLE_SORT_LOAD_COL = `${SUBJ_TABLE_CONTAINER} tableHeaderCell_node_load_average_4`;
const SUBJ_TABLE_SORT_MEM_COL = `${SUBJ_TABLE_CONTAINER} tableHeaderCell_node_jvm_mem_percent_5`;
const SUBJ_TABLE_SORT_DISK_COL = `${SUBJ_TABLE_CONTAINER} tableHeaderCell_node_free_space_6`;
const SUBJ_TABLE_BODY = 'elasticsearchNodesTableContainer';
const SUBJ_NODES_NAMES = `${SUBJ_TABLE_BODY} name`;