Skip to content

[Monitoring] Address some UI regressions with shard allocation #29757

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
chrisronline merged 4 commits into from
Feb 4, 2019
Merged

[Monitoring] Address some UI regressions with shard allocation #29757

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
ec00dd4
Address some UI regressions with shard allocation
chrisronline Jan 31, 2019
1d1f8dc
Renable the shard tests, and a couple others that are disabled
chrisronline Jan 31, 2019
bd1fe54
Merge in master
chrisronline Jan 31, 2019
1056fad
PR feedback
chrisronline Feb 1, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion x-pack/plugins/monitoring/public/components/elasticsearch/index/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
9 changes: 0 additions & 9 deletions ...lugins/monitoring/public/components/elasticsearch/shard_allocation/_shard_allocation.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -83,15 +83,6 @@ 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;
}
}

.legend {
Expand Down
33 changes: 16 additions & 17 deletions ...k/plugins/monitoring/public/components/elasticsearch/shard_allocation/components/shard.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 { EuiTextColor, EuiToolTip } from '@elastic/eui';

function getColor(classes) {
return classes.split(' ').reduce((color, cls) => {
Expand Down Expand Up @@ -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 = (
<EuiTextColor color={color}>

@pickypg pickypg Jan 31, 2019

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is this color code working? In the screenshot, the color doesn't match any of the badge colors. Perhaps the shardUi should be a badge instead of a dark block of text with a color that may not show well on that background?

{shard.shard}
</EuiTextColor>
);

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
Expand All @@ -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>
);
}
Expand Down
9 changes: 5 additions & 4 deletions x-pack/plugins/monitoring/public/views/elasticsearch/index/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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(
Expand Down