diff --git a/x-pack/plugins/monitoring/public/components/elasticsearch/index/index.js b/x-pack/plugins/monitoring/public/components/elasticsearch/index/index.js
index 395fd3084e5ec..a0127c4090217 100644
--- a/x-pack/plugins/monitoring/public/components/elasticsearch/index/index.js
+++ b/x-pack/plugins/monitoring/public/components/elasticsearch/index/index.js
@@ -51,7 +51,7 @@ export const Index = ({
))}
-
+
diff --git a/x-pack/plugins/monitoring/public/components/elasticsearch/shard_allocation/_shard_allocation.scss b/x-pack/plugins/monitoring/public/components/elasticsearch/shard_allocation/_shard_allocation.scss
index 100075f50dba9..f2c83ee0d5e3a 100644
--- a/x-pack/plugins/monitoring/public/components/elasticsearch/shard_allocation/_shard_allocation.scss
+++ b/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 {
diff --git a/x-pack/plugins/monitoring/public/components/elasticsearch/shard_allocation/components/shard.js b/x-pack/plugins/monitoring/public/components/elasticsearch/shard_allocation/components/shard.js
index a0fcf36bb03c5..b5033e625ba60 100644
--- a/x-pack/plugins/monitoring/public/components/elasticsearch/shard_allocation/components/shard.js
+++ b/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 = (
-
- {this.props.shard.tooltip_message}
-
- );
- }
-
const classes = calculateClass(shard);
const color = getColor(classes);
const classification = classes + ' ' + shard.shard;
+ let shardUi = (
+
+ {shard.shard}
+
+ );
+
+ if (this.state.tooltipVisible) {
+ shardUi = (
+
+ {shardUi}
+
+ );
+ }
+
// data attrs for automated testing verification
return (
-
- {tooltip}{shard.shard}
-
+ {shardUi}
);
}
diff --git a/x-pack/plugins/monitoring/public/views/elasticsearch/index/index.js b/x-pack/plugins/monitoring/public/views/elasticsearch/index/index.js
index ff93c25ce89e1..b85c2bc3ae2eb 100644
--- a/x-pack/plugins/monitoring/public/views/elasticsearch/index/index.js
+++ b/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(
diff --git a/x-pack/test/functional/apps/monitoring/elasticsearch/shards.js b/x-pack/test/functional/apps/monitoring/elasticsearch/shards.js
index 36f558cb6a06a..ea5fd1ad22730 100644
--- a/x-pack/test/functional/apps/monitoring/elasticsearch/shards.js
+++ b/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');
diff --git a/x-pack/test/functional/services/monitoring/elasticsearch_shards.js b/x-pack/test/functional/services/monitoring/elasticsearch_shards.js
index f29dd27009a3c..b6fd567a86b41 100644
--- a/x-pack/test/functional/services/monitoring/elasticsearch_shards.js
+++ b/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);