From b14d519e03e462da8359975371a4f2e21dc70fc1 Mon Sep 17 00:00:00 2001
From: igoristic <igor.zaytsev.dev@gmail.com>
Date: Tue, 4 Jun 2019 19:55:57 -0400
Subject: [PATCH] Optimized content to be more vertical for resizing
 consistancy (#37120)

* Optimized content to be more vertical for resizing consistancy

* Fixed snapshots

* Feedback changes

* Update _summary_status.scss

* Fixed column order for testing
---
 .../__snapshots__/cells.test.js.snap          | 22 +++----
 .../components/elasticsearch/nodes/cells.js   | 12 ++--
 .../components/elasticsearch/nodes/nodes.js   | 63 ++++++++++---------
 .../__snapshots__/summary_status.test.js.snap | 19 +++---
 .../summary_status/_summary_status.scss       | 16 +++--
 .../summary_status/summary_status.js          |  6 +-
 .../public/components/table/_table.scss       |  7 ++-
 .../monitoring/elasticsearch_nodes.js         | 10 +--
 8 files changed, 84 insertions(+), 71 deletions(-)

diff --git a/x-pack/plugins/monitoring/public/components/elasticsearch/nodes/__tests__/__snapshots__/cells.test.js.snap b/x-pack/plugins/monitoring/public/components/elasticsearch/nodes/__tests__/__snapshots__/cells.test.js.snap
index 678e96ee0a878..789e2a5756b48 100644
--- a/x-pack/plugins/monitoring/public/components/elasticsearch/nodes/__tests__/__snapshots__/cells.test.js.snap
+++ b/x-pack/plugins/monitoring/public/components/elasticsearch/nodes/__tests__/__snapshots__/cells.test.js.snap
@@ -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"
     >
diff --git a/x-pack/plugins/monitoring/public/components/elasticsearch/nodes/cells.js b/x-pack/plugins/monitoring/public/components/elasticsearch/nodes/cells.js
index 9b462d00d287f..0655a6790a027 100644
--- a/x-pack/plugins/monitoring/public/components/elasticsearch/nodes/cells.js
+++ b/x-pack/plugins/monitoring/public/components/elasticsearch/nodes/cells.js
@@ -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',
diff --git a/x-pack/plugins/monitoring/public/components/elasticsearch/nodes/nodes.js b/x-pack/plugins/monitoring/public/components/elasticsearch/nodes/nodes.js
index d3f5e1cea3234..6220398d94630 100644
--- a/x-pack/plugins/monitoring/public/components/elasticsearch/nodes/nodes.js
+++ b/x-pack/plugins/monitoring/public/components/elasticsearch/nodes/nodes.js
@@ -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;
 };
 
diff --git a/x-pack/plugins/monitoring/public/components/summary_status/__snapshots__/summary_status.test.js.snap b/x-pack/plugins/monitoring/public/components/summary_status/__snapshots__/summary_status.test.js.snap
index 805cf8ee6dc55..fb8e92f7e1905 100644
--- a/x-pack/plugins/monitoring/public/components/summary_status/__snapshots__/summary_status.test.js.snap
+++ b/x-pack/plugins/monitoring/public/components/summary_status/__snapshots__/summary_status.test.js.snap
@@ -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>
diff --git a/x-pack/plugins/monitoring/public/components/summary_status/_summary_status.scss b/x-pack/plugins/monitoring/public/components/summary_status/_summary_status.scss
index 752fb6d922977..4bda98876d651 100644
--- a/x-pack/plugins/monitoring/public/components/summary_status/_summary_status.scss
+++ b/x-pack/plugins/monitoring/public/components/summary_status/_summary_status.scss
@@ -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;
+  }
 }
diff --git a/x-pack/plugins/monitoring/public/components/summary_status/summary_status.js b/x-pack/plugins/monitoring/public/components/summary_status/summary_status.js
index c5e859f2a790e..1449141057b2f 100644
--- a/x-pack/plugins/monitoring/public/components/summary_status/summary_status.js
+++ b/x-pack/plugins/monitoring/public/components/summary_status/summary_status.js
@@ -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)}
diff --git a/x-pack/plugins/monitoring/public/components/table/_table.scss b/x-pack/plugins/monitoring/public/components/table/_table.scss
index a9d78d9616210..5d3b0db28c10a 100644
--- a/x-pack/plugins/monitoring/public/components/table/_table.scss
+++ b/x-pack/plugins/monitoring/public/components/table/_table.scss
@@ -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 {
diff --git a/x-pack/test/functional/services/monitoring/elasticsearch_nodes.js b/x-pack/test/functional/services/monitoring/elasticsearch_nodes.js
index 47863a83077d9..a3a92fe21ae63 100644
--- a/x-pack/test/functional/services/monitoring/elasticsearch_nodes.js
+++ b/x-pack/test/functional/services/monitoring/elasticsearch_nodes.js
@@ -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`;