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.

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

[WIP] [Monitoring] APM UI tests #22589

Closed
Closed
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
39 commits
Select commit Hold shift + click to select a range
5a8519c
Basic APM present in monitoring UI
chrisronline Aug 2, 2018
edc040b
Merge remote-tracking branch 'elastic/master' into monitoring/apm
chrisronline Aug 7, 2018
2a800e0
Enhance APM monitoring UI with some beat graphs
chrisronline Aug 7, 2018
dc7720e
Updates for APM Monitoring UI
chrisronline Aug 9, 2018
bb99660
Add memory metrics
chrisronline Aug 9, 2018
8d50015
Merge remote-tracking branch 'elastic/master' into monitoring/apm
chrisronline Aug 10, 2018
c2c8fdb
Add events rate per minute
chrisronline Aug 14, 2018
ccc04fd
Adding requests and time since last event
chrisronline Aug 15, 2018
6d8cad2
More metrics for instance page
chrisronline Aug 15, 2018
328a020
Merge remote-tracking branch 'elastic/master' into monitoring/apm
chrisronline Aug 17, 2018
cf99943
Merge remote-tracking branch 'elastic/master' into monitoring/apm
chrisronline Aug 20, 2018
ff037d5
Avoid using an unnecessary agg
chrisronline Aug 20, 2018
e9ac231
Adding more metrics
chrisronline Aug 20, 2018
14c83c0
Merge remote-tracking branch 'elastic/master' into monitoring/apm
chrisronline Aug 21, 2018
6c4f804
Merge remote-tracking branch 'elastic/master' into monitoring/apm
chrisronline Aug 22, 2018
83d7d81
Show response success/failure in a single graph
chrisronline Aug 22, 2018
6a3c0ec
Merge remote-tracking branch 'elastic/master' into monitoring/apm
chrisronline Aug 23, 2018
0cca485
Add more to the instance view
chrisronline Aug 27, 2018
caa9530
Remove all specific APM code
chrisronline Aug 27, 2018
76f5d87
Some more boilerplate
chrisronline Aug 28, 2018
1b78e13
Add instance code
chrisronline Aug 28, 2018
7acb1b2
Remove more specific code
chrisronline Aug 28, 2018
f821be0
Add classes and metrics
chrisronline Aug 28, 2018
b25fd07
Overview page
chrisronline Aug 28, 2018
75afb9c
Remove this custom format
chrisronline Aug 28, 2018
2fcc46c
Merge branch 'monitoring/apm-boilerplate' into monitoring/apm-specifics
chrisronline Aug 28, 2018
766c15e
Add time of last event
chrisronline Aug 28, 2018
4d8b859
Use existing utility instead
chrisronline Aug 28, 2018
18586e7
Remove debug
chrisronline Aug 29, 2018
3cf2ff0
Instances page
chrisronline Aug 29, 2018
5709f78
Instance page
chrisronline Aug 29, 2018
169fdf9
Update snapshots
chrisronline Aug 29, 2018
60769aa
Merge branch 'monitoring/apm-boilerplate' into monitoring/apm-specifics
chrisronline Aug 29, 2018
2d839cc
This is now apms
chrisronline Aug 29, 2018
5c136a1
Fix tests
chrisronline Aug 29, 2018
f2e7837
Merge branch 'monitoring/apm-boilerplate' into monitoring/apm-specifics
chrisronline Aug 29, 2018
759e0af
Make the instances page more like beats and update the graphs
chrisronline Aug 30, 2018
c7720b5
Remove debug
chrisronline Aug 30, 2018
15463ac
Add api integration tests
chrisronline Aug 31, 2018
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
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
/*
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
* or more contributor license agreements. Licensed under the Elastic License;
* you may not use this file except in compliance with the Elastic License.
*/

export { ApmServerInstance } from './instance';
Original file line number Diff line number Diff line change
@@ -0,0 +1,50 @@
/*
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
* or more contributor license agreements. Licensed under the Elastic License;
* you may not use this file except in compliance with the Elastic License.
*/

import React from 'react';
import { MonitoringTimeseriesContainer } from '../../chart';
import { EuiFlexGrid, EuiFlexItem, EuiSpacer, EuiPage, EuiPageBody } from '@elastic/eui';
import { Status } from './status';

export function ApmServerInstance({ summary, metrics, ...props }) {
const metricsToShow = [
metrics.apm_cpu,
metrics.apm_os_load,

metrics.apm_memory,
metrics.apm_requests,

metrics.apm_incoming_requests_size,
metrics.apm_transformations,

metrics.apm_output_events_rate_success,
metrics.apm_output_events_rate_failure,

metrics.apm_responses_valid,
metrics.apm_responses_errors,
];

return (
<div>
<Status stats={summary} />
<EuiPage style={{ backgroundColor: 'white' }}>
<EuiPageBody>
<EuiFlexGrid columns={2} gutterSize="none">
{metricsToShow.map((metric, index) => (
<EuiFlexItem key={index} style={{ width: '50%' }}>
<MonitoringTimeseriesContainer
series={metric}
{...props}
/>
<EuiSpacer size="m"/>
</EuiFlexItem>
))}
</EuiFlexGrid>
</EuiPageBody>
</EuiPage>
</div>
);
}
64 changes: 64 additions & 0 deletions x-pack/plugins/monitoring/public/components/apm/instance/status.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,64 @@
/*
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
* or more contributor license agreements. Licensed under the Elastic License;
* you may not use this file except in compliance with the Elastic License.
*/

import React, { Fragment } from 'react';
import moment from 'moment';
import { SummaryStatus } from '../../summary_status';
import { ApmStatusIcon } from '../status_icon';
import { formatMetric } from '../../../lib/format_number';
import { formatTimestampToDuration } from '../../../../common';

export function Status({ stats }) {
const {
name,
output,
version,
uptime,
timeOfLastEvent,
} = stats;

const metrics = [
{
label: 'Name',
value: name,
dataTestSubj: 'name'
},
{
label: 'Output',
value: output,
dataTestSubj: 'output'
},
{
label: 'Version',
value: version,
dataTestSubj: 'version'
},
{
label: 'Uptime',
value: formatMetric(uptime, 'time_since'),
dataTestSubj: 'uptime'
},
{
label: 'Last Event',
value: formatTimestampToDuration(+moment(timeOfLastEvent), 'since') + ' ago',
dataTestSubj: 'timeOfLastEvent',
}
];

const IconComponent = ({ status }) => (
<Fragment>
Status: <ApmStatusIcon status={status} />
</Fragment>
);

return (
<SummaryStatus
metrics={metrics}
IconComponent={IconComponent}
data-test-subj="apmDetailStatus"
/>
);
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
/*
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
* or more contributor license agreements. Licensed under the Elastic License;
* you may not use this file except in compliance with the Elastic License.
*/

export { ApmServerInstances } from './instances';
101 changes: 101 additions & 0 deletions x-pack/plugins/monitoring/public/components/apm/instances/instances.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,101 @@
/*
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
* or more contributor license agreements. Licensed under the Elastic License;
* you may not use this file except in compliance with the Elastic License.
*/

import React from 'react';
import { MonitoringTable } from '../../table';
import {
KuiTableRowCell,
KuiTableRow
} from '@kbn/ui-framework/components';
import { EuiLink } from '@elastic/eui';
import { Status } from './status';
import { SORT_ASCENDING, SORT_DESCENDING, TABLE_ACTION_UPDATE_FILTER } from '../../../../common/constants';
import { formatMetric } from '../../../lib/format_number';


const filterFields = [ 'name', 'type', 'version', 'output' ];
const columns = [
{ title: 'Name', sortKey: 'name', sortOrder: SORT_ASCENDING },
{ title: 'Output Enabled', sortKey: 'output' },
{ title: 'Total Events Rate', sortKey: 'total_events_rate', secondarySortOrder: SORT_DESCENDING },
{ title: 'Bytes Sent Rate', sortKey: 'bytes_sent_rate' },
{ title: 'Output Errors', sortKey: 'errors' },
{ title: 'Allocated Memory', sortKey: 'memory' },
{ title: 'Version', sortKey: 'version' },
];
const instanceRowFactory = (goToInstance) => {
return function KibanaRow(props) {
const applyFiltering = filterText => () => {
props.dispatchTableAction(TABLE_ACTION_UPDATE_FILTER, filterText);
};

return (
<KuiTableRow>
<KuiTableRowCell>
<div className="monTableCell__name">
<EuiLink
onClick={() => goToInstance(props.uuid)}
data-test-subj={`apmLink-${props.name}`}
>
{props.name}
</EuiLink>
</div>
</KuiTableRowCell>
<KuiTableRowCell>
{props.output}
</KuiTableRowCell>
<KuiTableRowCell>
{formatMetric(props.total_events_rate, '', '/s')}
</KuiTableRowCell>
<KuiTableRowCell>
{formatMetric(props.bytes_sent_rate, 'byte', '/s')}
</KuiTableRowCell>
<KuiTableRowCell>
{formatMetric(props.errors, '0')}
</KuiTableRowCell>
<KuiTableRowCell>
{formatMetric(props.memory, 'byte')}
</KuiTableRowCell>
<KuiTableRowCell>
<EuiLink
onClick={applyFiltering(props.version)}
>
{props.version}
</EuiLink>
</KuiTableRowCell>
</KuiTableRow>
);
};
};

export function ApmServerInstances({ apms, goToInstance }) {
const {
pageIndex,
filterText,
sortKey,
sortOrder,
onNewState,
} = apms;

return (
<div>
<Status stats={apms.data.stats}/>
<MonitoringTable
className="apmInstancesTable"
rows={apms.data.apms}
pageIndex={pageIndex}
filterText={filterText}
sortKey={sortKey}
sortOrder={sortOrder}
onNewState={onNewState}
placeholder="Filter Instances..."
filterFields={filterFields}
columns={columns}
rowComponent={instanceRowFactory(goToInstance)}
/>
</div>
);
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,60 @@
/*
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
* or more contributor license agreements. Licensed under the Elastic License;
* you may not use this file except in compliance with the Elastic License.
*/

import React, { Fragment } from 'react';
import moment from 'moment';
import { SummaryStatus } from '../../summary_status';
import { ApmStatusIcon } from '../status_icon';
import { formatMetric } from '../../../lib/format_number';
import { formatTimestampToDuration } from '../../../../common';

export function Status({ stats }) {
const {
apms: {
total
},
bytesSent,
totalEvents,
timeOfLastEvent,
} = stats;

const metrics = [
{
label: 'Servers',
value: total,
dataTestSubj: 'total'
},
{
label: 'Bytes Sent',
value: formatMetric(bytesSent, 'bytes'),
dataTestSubj: 'bytesSent'
},
{
label: 'Total Events',
value: formatMetric(totalEvents, '0.[0]a'),
dataTestSubj: 'totalEvents'
},
{
label: 'Last Event',
value: formatTimestampToDuration(+moment(timeOfLastEvent), 'since') + ' ago',
dataTestSubj: 'timeOfLastEvent',
}
];

const IconComponent = ({ status }) => (
<Fragment>
Status: <ApmStatusIcon status={status} />
</Fragment>
);

return (
<SummaryStatus
metrics={metrics}
IconComponent={IconComponent}
data-test-subj="apmDetailStatus"
/>
);
}
63 changes: 63 additions & 0 deletions x-pack/plugins/monitoring/public/components/apm/overview/index.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,63 @@
/*
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
* or more contributor license agreements. Licensed under the Elastic License;
* you may not use this file except in compliance with the Elastic License.
*/

import React from 'react';
import { MonitoringTimeseriesContainer } from '../../chart';
import {
EuiSpacer,
EuiPage,
EuiFlexGroup,
EuiFlexItem,
EuiPageBody,
EuiPanel
} from '@elastic/eui';
import { Status } from '../instances/status';

export function ApmOverview({
stats,
metrics,
...props
}) {
const seriesToShow = [
metrics.apm_cpu,
metrics.apm_os_load,

metrics.apm_memory,
metrics.apm_requests,

metrics.apm_incoming_requests_size,
metrics.apm_transformations,

metrics.apm_output_events_rate_success,
metrics.apm_output_events_rate_failure,

metrics.apm_responses_valid,
metrics.apm_responses_errors,
];

const charts = seriesToShow.map((data, index) => (
<EuiFlexItem style={{ minWidth: '45%' }} key={index}>
<EuiPanel>
<MonitoringTimeseriesContainer
series={data}
{...props}
/>
</EuiPanel>
</EuiFlexItem>
));

return (
<EuiPage style={{ backgroundColor: 'white' }}>
<EuiPageBody>
<Status stats={stats}/>
<EuiSpacer size="s"/>
<EuiFlexGroup wrap>
{charts}
</EuiFlexGroup>
</EuiPageBody>
</EuiPage>
);
}
23 changes: 23 additions & 0 deletions x-pack/plugins/monitoring/public/components/apm/status_icon.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
/*
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
* or more contributor license agreements. Licensed under the Elastic License;
* you may not use this file except in compliance with the Elastic License.
*/

import React from 'react';
import { StatusIcon } from 'plugins/monitoring/components/status_icon';

export function ApmStatusIcon({ status, availability = true }) {
const type = (() => {
if (!availability) {
return StatusIcon.TYPES.GRAY;
}

const statusKey = status.toUpperCase();
return StatusIcon.TYPES[statusKey] || StatusIcon.TYPES.YELLOW;
})();

return (
<StatusIcon type={type} label={`Health: ${status}`} />
);
}
Loading