[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
This commit is contained in:
parent
888217dc0f
commit
fba727b2c0
|
@ -54,7 +54,7 @@ export const Index = ({
|
||||||
))}
|
))}
|
||||||
</EuiFlexGrid>
|
</EuiFlexGrid>
|
||||||
<EuiSpacer size="m"/>
|
<EuiSpacer size="m"/>
|
||||||
<ShardAllocation scope={scope} {...props} kbnUrl={kbnUrl} type="index" />
|
<ShardAllocation scope={scope} kbnUrl={kbnUrl} type="index" />
|
||||||
</EuiPageContent>
|
</EuiPageContent>
|
||||||
</EuiPageBody>
|
</EuiPageBody>
|
||||||
</EuiPage>
|
</EuiPage>
|
||||||
|
|
|
@ -61,7 +61,6 @@ monitoring-shard-allocation {
|
||||||
}
|
}
|
||||||
&.unassigned {
|
&.unassigned {
|
||||||
.title {
|
.title {
|
||||||
color: #999;
|
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -82,15 +81,6 @@ monitoring-shard-allocation {
|
||||||
border-left: 1px solid $euiColorEmptyShade;
|
border-left: 1px solid $euiColorEmptyShade;
|
||||||
position: relative;
|
position: relative;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
|
|
||||||
.shard-tooltip {
|
|
||||||
padding: 5px;
|
|
||||||
bottom: 25px;
|
|
||||||
left: 0;
|
|
||||||
position: absolute;
|
|
||||||
border: 1px solid $euiColorLightShade;
|
|
||||||
white-space: nowrap;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.legend {
|
.legend {
|
||||||
|
|
|
@ -10,7 +10,7 @@ import React from 'react';
|
||||||
import { calculateClass } from '../lib/calculate_class';
|
import { calculateClass } from '../lib/calculate_class';
|
||||||
import { vents } from '../lib/vents';
|
import { vents } from '../lib/vents';
|
||||||
import { i18n } from '@kbn/i18n';
|
import { i18n } from '@kbn/i18n';
|
||||||
import { EuiTextColor } from '@elastic/eui';
|
import { EuiToolTip, EuiBadge } from '@elastic/eui';
|
||||||
|
|
||||||
function getColor(classes) {
|
function getColor(classes) {
|
||||||
return classes.split(' ').reduce((color, cls) => {
|
return classes.split(' ').reduce((color, cls) => {
|
||||||
|
@ -20,7 +20,7 @@ function getColor(classes) {
|
||||||
|
|
||||||
switch (cls) {
|
switch (cls) {
|
||||||
case 'primary':
|
case 'primary':
|
||||||
return 'ghost';
|
return 'hollow';
|
||||||
case 'replica':
|
case 'replica':
|
||||||
return 'secondary';
|
return 'secondary';
|
||||||
case 'relocation':
|
case 'relocation':
|
||||||
|
@ -80,23 +80,24 @@ export class Shard extends React.Component {
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
const shard = this.props.shard;
|
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 classes = calculateClass(shard);
|
||||||
const color = getColor(classes);
|
const color = getColor(classes);
|
||||||
const classification = classes + ' ' + shard.shard;
|
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
|
// data attrs for automated testing verification
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
|
@ -107,9 +108,7 @@ export class Shard extends React.Component {
|
||||||
data-shard-classification={classification}
|
data-shard-classification={classification}
|
||||||
data-test-subj="shardIcon"
|
data-test-subj="shardIcon"
|
||||||
>
|
>
|
||||||
<EuiTextColor color={color}>
|
{shardUi}
|
||||||
{tooltip}{shard.shard}
|
|
||||||
</EuiTextColor>
|
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
@ -81,12 +81,13 @@ uiRoutes.when('/elasticsearch/indices/:index', {
|
||||||
}
|
}
|
||||||
|
|
||||||
const shards = data.shards;
|
const shards = data.shards;
|
||||||
data.totalCount = shards.length;
|
$scope.totalCount = shards.length;
|
||||||
data.showing = transformer(shards, data.nodes);
|
$scope.showing = transformer(shards, data.nodes);
|
||||||
|
$scope.labels = labels.node;
|
||||||
if (shards.some((shard) => shard.state === 'UNASSIGNED')) {
|
if (shards.some((shard) => shard.state === 'UNASSIGNED')) {
|
||||||
data.labels = labels.indexWithUnassigned;
|
$scope.labels = labels.indexWithUnassigned;
|
||||||
} else {
|
} else {
|
||||||
data.labels = labels.index;
|
$scope.labels = labels.index;
|
||||||
}
|
}
|
||||||
|
|
||||||
this.renderReact(
|
this.renderReact(
|
||||||
|
|
|
@ -14,7 +14,7 @@ export default function ({ getService }) {
|
||||||
const supertest = getService('supertest');
|
const supertest = getService('supertest');
|
||||||
const esArchiver = getService('esArchiver');
|
const esArchiver = getService('esArchiver');
|
||||||
|
|
||||||
describe.skip('overview', () => {
|
describe('overview', () => {
|
||||||
describe('with green platinum cluster', () => {
|
describe('with green platinum cluster', () => {
|
||||||
const archive = 'monitoring/singlecluster-green-platinum';
|
const archive = 'monitoring/singlecluster-green-platinum';
|
||||||
const timeRange = {
|
const timeRange = {
|
||||||
|
|
|
@ -9,7 +9,7 @@ import expect from 'expect.js';
|
||||||
export default function ({ getService }) {
|
export default function ({ getService }) {
|
||||||
const supertest = getService('supertest');
|
const supertest = getService('supertest');
|
||||||
|
|
||||||
describe.skip('update collection_interval setting', () => {
|
describe('update collection_interval setting', () => {
|
||||||
it('should set collection.interval to 10s', async () => {
|
it('should set collection.interval to 10s', async () => {
|
||||||
const { body } = await supertest
|
const { body } = await supertest
|
||||||
.put('/api/monitoring/v1/elasticsearch_settings/set/collection_interval')
|
.put('/api/monitoring/v1/elasticsearch_settings/set/collection_interval')
|
||||||
|
|
|
@ -28,7 +28,7 @@ export default function ({ getService, getPageObjects }) {
|
||||||
await tearDown();
|
await tearDown();
|
||||||
});
|
});
|
||||||
|
|
||||||
describe.skip('Shard Allocation Per Node', () => {
|
describe('Shard Allocation Per Node', () => {
|
||||||
before(async () => {
|
before(async () => {
|
||||||
// start on cluster overview
|
// start on cluster overview
|
||||||
await PageObjects.monitoring.clickBreadcrumb('breadcrumbClusters');
|
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 () => {
|
before(async () => {
|
||||||
// start on cluster overview
|
// start on cluster overview
|
||||||
await PageObjects.monitoring.clickBreadcrumb('breadcrumbClusters');
|
await PageObjects.monitoring.clickBreadcrumb('breadcrumbClusters');
|
||||||
|
|
|
@ -65,7 +65,7 @@ export function MonitoringElasticsearchShardsProvider({ getService }) {
|
||||||
|
|
||||||
async showSystemIndices() {
|
async showSystemIndices() {
|
||||||
const checkboxEl = await testSubjects.find(SUBJ_SHOW_SYSTEM_INDICES);
|
const checkboxEl = await testSubjects.find(SUBJ_SHOW_SYSTEM_INDICES);
|
||||||
const isChecked = await checkboxEl.getSpecAttribute('selected');
|
const isChecked = await checkboxEl.getAttribute('selected');
|
||||||
|
|
||||||
if (!isChecked) {
|
if (!isChecked) {
|
||||||
await testSubjects.click(SUBJ_SHOW_SYSTEM_INDICES);
|
await testSubjects.click(SUBJ_SHOW_SYSTEM_INDICES);
|
||||||
|
|
Loading…
Reference in a new issue