Skip to content
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

Jump to bottom

[Monitoring] Metricbeat migration net new user experience #39832

Merged
merged 23 commits into from
Jul 22, 2019
Merged

[Monitoring] Metricbeat migration net new user experience #39832

Show file tree
Hide file tree
Changes from 18 commits
Commits
Show all changes
23 commits
Select commit Hold shift + click to select a range
4de8f56
ES net new user experience
chrisronline Jun 14, 2019
1b34d68
Merge remote-tracking branch 'elastic/master' into monitoring/mb_setu…
chrisronline Jun 17, 2019
0f276fe
Adding sorting support
chrisronline Jun 17, 2019
85c00c1
Merge in master
chrisronline Jun 27, 2019
32ed8a7
WIP
chrisronline Jun 27, 2019
7fbb375
Progress on the ES nodes listing page
chrisronline Jun 27, 2019
b034a59
Fix the loading page
chrisronline Jun 28, 2019
cc415ec
Kibana net new user experience
chrisronline Jul 1, 2019
b442366
Remove unnecessary files
chrisronline Jul 1, 2019
931bcee
Remove this one too
chrisronline Jul 1, 2019
d18b41d
Add this file back in
chrisronline Jul 1, 2019
7307db0
Add a way to add the cluster uuid to global state once monitoring is …
chrisronline Jul 2, 2019
03a8ac5
Ensure this PR can be merged to master by hiding the functionality be…
chrisronline Jul 3, 2019
d8de9c3
Merge branch 'master' of github.com:elastic/kibana into monitoring/mb…
chrisronline Jul 3, 2019
da210bf
Add messaging for net new user experience on Kibana instances page
chrisronline Jul 3, 2019
6a9a348
Ensure we poll for more data as soon as they are done in the flyout
chrisronline Jul 3, 2019
e5a4c4b
Merge remote-tracking branch 'elastic/master' into monitoring/mb_setu…
chrisronline Jul 9, 2019
cfaaed1
PR feedback
chrisronline Jul 10, 2019
3c48f84
Merge remote-tracking branch 'elastic/master' into monitoring/mb_setu…
chrisronline Jul 18, 2019
fe58db8
Fix api tests
chrisronline Jul 18, 2019
c63327c
Add `skipLiveData` flag to avoid fetching data from the running stack…
chrisronline Jul 18, 2019
e508199
Add comment
chrisronline Jul 19, 2019
89dd59c
Merge branch 'master' of github.com:elastic/kibana into monitoring/mb…
chrisronline Jul 22, 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