From fba727b2c05912cc97a613a3cef6a49e33ecac94 Mon Sep 17 00:00:00 2001 From: Chris Roberson Date: Mon, 4 Feb 2019 15:15:09 -0500 Subject: [PATCH] [Monitoring] Address some UI regressions with shard allocation (#29757) * Address some UI regressions with shard allocation * Renable the shard tests, and a couple others that are disabled * PR feedback --- .../components/elasticsearch/index/index.js | 2 +- .../shard_allocation/_shard_allocation.scss | 10 ------ .../shard_allocation/components/shard.js | 35 +++++++++---------- .../public/views/elasticsearch/index/index.js | 9 ++--- .../apis/monitoring/elasticsearch/overview.js | 2 +- .../set_collection_interval.js | 2 +- .../apps/monitoring/elasticsearch/shards.js | 4 +-- .../monitoring/elasticsearch_shards.js | 2 +- 8 files changed, 28 insertions(+), 38 deletions(-) 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 01141494a313..2edd4ec9797e 100644 --- a/x-pack/plugins/monitoring/public/components/elasticsearch/index/index.js +++ b/x-pack/plugins/monitoring/public/components/elasticsearch/index/index.js @@ -54,7 +54,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 6361ceca2dfd..690b1b81a0d0 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 @@ -61,7 +61,6 @@ monitoring-shard-allocation { } &.unassigned { .title { - color: #999; display: none; } } @@ -82,15 +81,6 @@ monitoring-shard-allocation { border-left: 1px solid $euiColorEmptyShade; position: relative; display: inline-block; - - .shard-tooltip { - padding: 5px; - bottom: 25px; - left: 0; - position: absolute; - border: 1px solid $euiColorLightShade; - white-space: nowrap; - } } .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 a0fcf36bb03c..b5033e625ba6 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 da0cbec0ea08..4fc3c90971ea 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/api_integration/apis/monitoring/elasticsearch/overview.js b/x-pack/test/api_integration/apis/monitoring/elasticsearch/overview.js index 951e6ef937b2..170fe101433b 100644 --- a/x-pack/test/api_integration/apis/monitoring/elasticsearch/overview.js +++ b/x-pack/test/api_integration/apis/monitoring/elasticsearch/overview.js @@ -14,7 +14,7 @@ export default function ({ getService }) { const supertest = getService('supertest'); const esArchiver = getService('esArchiver'); - describe.skip('overview', () => { + describe('overview', () => { describe('with green platinum cluster', () => { const archive = 'monitoring/singlecluster-green-platinum'; const timeRange = { diff --git a/x-pack/test/api_integration/apis/monitoring/elasticsearch_settings/set_collection_interval.js b/x-pack/test/api_integration/apis/monitoring/elasticsearch_settings/set_collection_interval.js index 08914d7e52e5..ac469fb3e886 100644 --- a/x-pack/test/api_integration/apis/monitoring/elasticsearch_settings/set_collection_interval.js +++ b/x-pack/test/api_integration/apis/monitoring/elasticsearch_settings/set_collection_interval.js @@ -9,7 +9,7 @@ import expect from 'expect.js'; export default function ({ getService }) { const supertest = getService('supertest'); - describe.skip('update collection_interval setting', () => { + describe('update collection_interval setting', () => { it('should set collection.interval to 10s', async () => { const { body } = await supertest .put('/api/monitoring/v1/elasticsearch_settings/set/collection_interval') diff --git a/x-pack/test/functional/apps/monitoring/elasticsearch/shards.js b/x-pack/test/functional/apps/monitoring/elasticsearch/shards.js index 2a5819d10ea9..ea5fd1ad2273 100644 --- a/x-pack/test/functional/apps/monitoring/elasticsearch/shards.js +++ b/x-pack/test/functional/apps/monitoring/elasticsearch/shards.js @@ -28,7 +28,7 @@ export default function ({ getService, getPageObjects }) { await tearDown(); }); - describe.skip('Shard Allocation Per Node', () => { + describe('Shard Allocation Per Node', () => { before(async () => { // start on cluster overview await PageObjects.monitoring.clickBreadcrumb('breadcrumbClusters'); @@ -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 f29dd27009a3..b6fd567a86b4 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);