Backport #29757 (#29993)

x-pack/plugins/monitoring/public/components/elasticsearch/index/index.js

@@ -51,7 +51,7 @@ export const Index = ({
             ))}
           </EuiFlexGrid>
           <EuiSpacer size="m"/>
-          <ShardAllocation scope={scope} {...props} kbnUrl={kbnUrl} type="index" />
+          <ShardAllocation scope={scope} kbnUrl={kbnUrl} type="index" />
         </EuiPageContent>
       </EuiPageBody>
     </EuiPage>

x-pack/plugins/monitoring/public/components/elasticsearch/shard_allocation/_shard_allocation.scss

@@ -63,7 +63,6 @@ monitoring-shard-allocation {
     }
     &.unassigned {
       .title {
-        color: #999;
         display: none;
       }
     }
@@ -83,15 +82,7 @@ monitoring-shard-allocation {
     font: 10px sans-serif;
     border-left: 1px solid $euiColorEmptyShade;
     position: relative;
-
-    .shard-tooltip {
-      padding: 5px;
-      bottom: 25px;
-      left: 0;
-      position: absolute;
-      border: 1px solid $euiColorLightShade;
-      white-space: nowrap;
-    }
+    display: inline-block;
   }
 
   .legend {

x-pack/plugins/monitoring/public/components/elasticsearch/shard_allocation/components/shard.js

@@ -10,7 +10,7 @@ import React from 'react';
 import { calculateClass } from '../lib/calculate_class';
 import { vents } from '../lib/vents';
 import { i18n } from '@kbn/i18n';
-import { EuiTextColor } from '@elastic/eui';
+import { EuiToolTip, EuiBadge } from '@elastic/eui';
 
 function getColor(classes) {
   return classes.split(' ').reduce((color, cls) => {
@@ -20,7 +20,7 @@ function getColor(classes) {
 
     switch (cls) {
       case 'primary':
-        return 'ghost';
+        return 'hollow';
       case 'replica':
         return 'secondary';
       case 'relocation':
@@ -80,23 +80,24 @@ export class Shard extends React.Component {
 
   render() {
     const shard = this.props.shard;
-    let tooltip;
-    if (this.state.tooltipVisible) {
-      tooltip = (
-        <div
-          className="shard-tooltip"
-          data-test-subj="shardTooltip"
-          data-tooltip-content={this.props.shard.tooltip_message}
-        >
-          {this.props.shard.tooltip_message}
-        </div>
-      );
-    }
-
     const classes = calculateClass(shard);
     const color = getColor(classes);
     const classification = classes + ' ' + shard.shard;
 
+    let shardUi = (
+      <EuiBadge color={color}>
+        {shard.shard}
+      </EuiBadge>
+    );
+
+    if (this.state.tooltipVisible) {
+      shardUi = (
+        <EuiToolTip content={this.props.shard.tooltip_message} position="bottom" data-test-subj="shardTooltip">
+          <p>{shardUi}</p>
+        </EuiToolTip>
+      );
+    }
+
     // data attrs for automated testing verification
     return (
       <div
@@ -107,9 +108,7 @@ export class Shard extends React.Component {
         data-shard-classification={classification}
         data-test-subj="shardIcon"
       >
-        <EuiTextColor color={color}>
-          {tooltip}{shard.shard}
-        </EuiTextColor>
+        {shardUi}
       </div>
     );
   }

x-pack/plugins/monitoring/public/views/elasticsearch/index/index.js

@@ -81,12 +81,13 @@ uiRoutes.when('/elasticsearch/indices/:index', {
         }
 
         const shards = data.shards;
-        data.totalCount = shards.length;
-        data.showing = transformer(shards, data.nodes);
+        $scope.totalCount = shards.length;
+        $scope.showing = transformer(shards, data.nodes);
+        $scope.labels = labels.node;
         if (shards.some((shard) => shard.state === 'UNASSIGNED')) {
-          data.labels = labels.indexWithUnassigned;
+          $scope.labels = labels.indexWithUnassigned;
         } else {
-          data.labels = labels.index;
+          $scope.labels = labels.index;
         }
 
         this.renderReact(

x-pack/test/functional/apps/monitoring/elasticsearch/shards.js

@@ -95,7 +95,7 @@ export default function ({ getService, getPageObjects }) {
       });
     });
 
-    describe.skip('Shard Allocation Per Index', () => {
+    describe('Shard Allocation Per Index', () => {
       before(async () => {
         // start on cluster overview
         await PageObjects.monitoring.clickBreadcrumb('breadcrumbClusters');

x-pack/test/functional/services/monitoring/elasticsearch_shards.js

@@ -65,7 +65,7 @@ export function MonitoringElasticsearchShardsProvider({ getService }) {
 
     async showSystemIndices() {
       const checkboxEl = await testSubjects.find(SUBJ_SHOW_SYSTEM_INDICES);
-      const isChecked = await checkboxEl.getSpecAttribute('selected');
+      const isChecked = await checkboxEl.getAttribute('selected');
 
       if (!isChecked) {
         await testSubjects.click(SUBJ_SHOW_SYSTEM_INDICES);