Skip to content

[7.x] [Monitoring] Metricbeat migration net new user experience (#39832) #41666

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 3 commits into from
Aug 1, 2019
Merged

[7.x] [Monitoring] Metricbeat migration net new user experience (#39832) #41666

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
92e2d29
[Monitoring] Metricbeat migration net new user experience (#39832)
chrisronline Jul 22, 2019
d1d3e87
Merge remote-tracking branch 'elastic/7.x' into backport/7.x/pr-39832
chrisronline Jul 22, 2019
9a708dd
Merge branch '7.x' of github.com:elastic/kibana into backport/7.x/pr-…
chrisronline Aug 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
62 changes: 48 additions & 14 deletions x-pack/legacy/plugins/monitoring/public/components/cluster/overview/elasticsearch_panel.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -139,6 +139,7 @@ export function ElasticsearchPanel(props) {
const clusterStats = props.cluster_stats || {};
const nodes = clusterStats.nodes;
const indices = clusterStats.indices;
const setupMode = props.setupMode;

const goToElasticsearch = () => props.changeUrl('elasticsearch');
const goToNodes = () => props.changeUrl('elasticsearch/nodes');
Expand Down Expand Up @@ -175,6 +176,34 @@ export function ElasticsearchPanel(props) {

const licenseText = <LicenseText license={props.license} showLicenseExpiration={props.showLicenseExpiration} />;

let setupModeNodesData = null;
if (setupMode.enabled && setupMode.data) {
const elasticsearchData = get(setupMode.data, 'elasticsearch.byUuid');
const migratedNodesCount = Object.values(elasticsearchData).filter(node => node.isFullyMigrated).length;
const totalNodesCount = Object.values(elasticsearchData).length;

const badgeColor = migratedNodesCount === totalNodesCount
? 'secondary'
: 'danger';

setupModeNodesData = (
<EuiFlexItem grow={false}>
<EuiToolTip
position="top"
content={i18n.translate('xpack.monitoring.cluster.overview.esPanel.setupModeNodesTooltip', {
defaultMessage: `These numbers indicate how many detected monitored nodes versus how many
detected total nodes. If there are more detected nodes than monitored nodes, click the Nodes
link and you will be guided in how to setup monitoring for the missing node.`
})}
>
<EuiBadge color={badgeColor}>
{formatNumber(migratedNodesCount, 'int_commas')}/{formatNumber(totalNodesCount, 'int_commas')}
</EuiBadge>
</EuiToolTip>
</EuiFlexItem>
);
}

return (
<ClusterItemContainer
{...props}
Expand Down Expand Up @@ -235,20 +264,25 @@ export function ElasticsearchPanel(props) {

<EuiFlexItem>
<EuiPanel paddingSize="m">
<EuiTitle size="s">
<h3>
<EuiLink
data-test-subj="esNumberOfNodes"
onClick={goToNodes}
>
<FormattedMessage
id="xpack.monitoring.cluster.overview.esPanel.nodesTotalLinkLabel"
defaultMessage="Nodes: {nodesTotal}"
values={{ nodesTotal: formatNumber(get(nodes, 'count.total'), 'int_commas') }}
/>
</EuiLink>
</h3>
</EuiTitle>
<EuiFlexGroup justifyContent="spaceBetween">
<EuiFlexItem grow={false}>
<EuiTitle size="s">
<h3>
<EuiLink
data-test-subj="esNumberOfNodes"
onClick={goToNodes}
>
<FormattedMessage
id="xpack.monitoring.cluster.overview.esPanel.nodesTotalLinkLabel"
defaultMessage="Nodes: {nodesTotal}"
values={{ nodesTotal: formatNumber(get(nodes, 'count.total'), 'int_commas') }}
/>
</EuiLink>
</h3>
</EuiTitle>
</EuiFlexItem>
{setupModeNodesData}
</EuiFlexGroup>
<EuiHorizontalRule margin="m" />
<EuiDescriptionList type="column">
<EuiDescriptionListTitle>
Expand Down
4 changes: 2 additions & 2 deletions x-pack/legacy/plugins/monitoring/public/components/cluster/overview/helpers.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,14 +26,14 @@ export function HealthStatusIndicator(props) {
red: 'danger'
};

const statusColor = statusColorMap[props.status];
const statusColor = statusColorMap[props.status] || 'n/a';

return (
<EuiHealth color={statusColor} data-test-subj="statusIcon">
<FormattedMessage
id="xpack.monitoring.cluster.overview.healthStatusDescription"
defaultMessage="Health is {status}"
values={{ status: props.status }}
values={{ status: props.status || 'n/a' }}
/>
</EuiHealth>
);
Expand Down
7 changes: 6 additions & 1 deletion x-pack/legacy/plugins/monitoring/public/components/cluster/overview/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,9 +32,14 @@ export function Overview(props) {
ml={props.cluster.ml}
changeUrl={props.changeUrl}
license={props.cluster.license}
setupMode={props.setupMode}
showLicenseExpiration={props.showLicenseExpiration}
/>
<KibanaPanel {...props.cluster.kibana} changeUrl={props.changeUrl} />
<KibanaPanel
{...props.cluster.kibana}
setupMode={props.setupMode}
changeUrl={props.changeUrl}
/>
</Fragment>
)
: null
Expand Down
84 changes: 61 additions & 23 deletions x-pack/legacy/plugins/monitoring/public/components/cluster/overview/kibana_panel.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,9 +7,10 @@
import React from 'react';
import { formatNumber } from 'plugins/monitoring/lib/format_number';
import { ClusterItemContainer, HealthStatusIndicator, BytesPercentageUsage } from './helpers';

import { get } from 'lodash';
import {
EuiFlexGrid,
EuiFlexGroup,
EuiFlexItem,
EuiLink,
EuiTitle,
Expand All @@ -18,12 +19,16 @@ import {
EuiDescriptionListTitle,
EuiDescriptionListDescription,
EuiHorizontalRule,
EuiBadge,
EuiToolTip
} from '@elastic/eui';
import { FormattedMessage } from '@kbn/i18n/react';
import { i18n } from '@kbn/i18n';

export function KibanaPanel(props) {
if (!props.count) {
const setupMode = props.setupMode;
const showDetectedKibanas = setupMode.enabled && get(setupMode.data, 'kibana.detected.doesExist', false);
if (!props.count && !showDetectedKibanas) {
return null;
}

Expand All @@ -34,6 +39,34 @@ export function KibanaPanel(props) {
const goToKibana = () => props.changeUrl('kibana');
const goToInstances = () => props.changeUrl('kibana/instances');

let setupModeInstancesData = null;
if (setupMode.enabled && setupMode.data) {
const kibanaData = get(setupMode.data, 'kibana.byUuid');
const migratedNodesCount = Object.values(kibanaData).filter(node => node.isFullyMigrated).length;
const totalNodesCount = Object.values(kibanaData).length;

const badgeColor = migratedNodesCount === totalNodesCount
? 'secondary'
: 'danger';

setupModeInstancesData = (
<EuiFlexItem grow={false}>
<EuiToolTip
position="top"
content={i18n.translate('xpack.monitoring.cluster.overview.kibanaPanel.setupModeNodesTooltip', {
defaultMessage: `These numbers indicate how many detected monitored instances versus how many
detected total instances. If there are more detected instances than monitored instances, click
the instances link and you will be guided in how to setup monitoring for the missing node.`
})}
>
<EuiBadge color={badgeColor}>
{formatNumber(migratedNodesCount, 'int_commas')}/{formatNumber(totalNodesCount, 'int_commas')}
</EuiBadge>
</EuiToolTip>
</EuiFlexItem>
);
}

return (
<ClusterItemContainer
{...props}
Expand Down Expand Up @@ -91,27 +124,32 @@ export function KibanaPanel(props) {
</EuiFlexItem>
<EuiFlexItem>
<EuiPanel paddingSize="m">
<EuiTitle size="s">
<h3>
<EuiLink
onClick={goToInstances}
data-test-subj="kbnInstances"
aria-label={i18n.translate(
'xpack.monitoring.cluster.overview.kibanaPanel.instancesCountLinkAriaLabel',
{
defaultMessage: 'Kibana Instances: {instancesCount}',
values: { instancesCount: props.count }
}
)}
>
<FormattedMessage
id="xpack.monitoring.cluster.overview.kibanaPanel.instancesCountLinkLabel"
defaultMessage="Instances: {instancesCount}"
values={{ instancesCount: (<span data-test-subj="number_of_kibana_instances">{ props.count }</span>) }}
/>
</EuiLink>
</h3>
</EuiTitle>
<EuiFlexGroup justifyContent="spaceBetween">
<EuiFlexItem grow={false}>
<EuiTitle size="s">
<h3>
<EuiLink
onClick={goToInstances}
data-test-subj="kbnInstances"
aria-label={i18n.translate(
'xpack.monitoring.cluster.overview.kibanaPanel.instancesCountLinkAriaLabel',
{
defaultMessage: 'Kibana Instances: {instancesCount}',
values: { instancesCount: props.count }
}
)}
>
<FormattedMessage
id="xpack.monitoring.cluster.overview.kibanaPanel.instancesCountLinkLabel"
defaultMessage="Instances: {instancesCount}"
values={{ instancesCount: (<span data-test-subj="number_of_kibana_instances">{ props.count }</span>) }}
/>
</EuiLink>
</h3>
</EuiTitle>
</EuiFlexItem>
{setupModeInstancesData}
</EuiFlexGroup>
<EuiHorizontalRule margin="m" />
<EuiDescriptionList type="column">
<EuiDescriptionListTitle>
Expand Down
Loading