[6.x] [Monitoring] APM Monitoring UI (#22975)

x-pack/plugins/monitoring/public/components/apm/instance/index.js

@@ -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';

x-pack/plugins/monitoring/public/components/apm/instance/instance.js

@@ -0,0 +1,59 @@
+/*
+ * 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 {
+  EuiFlexItem,
+  EuiPanel,
+  EuiSpacer,
+  EuiPage,
+  EuiPageBody,
+  EuiFlexGroup
+} from '@elastic/eui';
+import { Status } from './status';
+
+export function ApmServerInstance({ summary, metrics, ...props }) {
+  const seriesToShow = [
+    metrics.apm_responses_valid,
+    metrics.apm_responses_errors,
+
+    metrics.apm_output_events_rate_success,
+    metrics.apm_output_events_rate_failure,
+
+    metrics.apm_requests,
+    metrics.apm_transformations,
+
+
+    metrics.apm_cpu,
+    metrics.apm_memory,
+
+    metrics.apm_os_load,
+  ];
+
+  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={summary}/>
+        <EuiSpacer size="s"/>
+        <EuiFlexGroup wrap>
+          {charts}
+        </EuiFlexGroup>
+      </EuiPageBody>
+    </EuiPage>
+  );
+}

x-pack/plugins/monitoring/public/components/apm/instance/status.js

@@ -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"
+    />
+  );
+}

x-pack/plugins/monitoring/public/components/apm/instances/index.js

@@ -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';

x-pack/plugins/monitoring/public/components/apm/instances/instances.js

@@ -0,0 +1,107 @@
+/*
+ * 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 moment from 'moment';
+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';
+import { formatTimestampToDuration } from '../../../../common';
+
+
+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: 'Last Event', sortKey: 'time_of_last_event' },
+  { title: 'Allocated Memory', sortKey: 'memory' },
+  { title: 'Version', sortKey: 'version' },
+];
+const instanceRowFactory = () => {
+  return function KibanaRow(props) {
+    const applyFiltering = filterText => () => {
+      props.dispatchTableAction(TABLE_ACTION_UPDATE_FILTER, filterText);
+    };
+
+    return (
+      <KuiTableRow>
+        <KuiTableRowCell>
+          <div className="monTableCell__name">
+            <EuiLink
+              href={`#/apm/instances/${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>
+          {formatTimestampToDuration(+moment(props.time_of_last_event), 'since') + ' ago'}
+        </KuiTableRowCell>
+        <KuiTableRowCell>
+          {formatMetric(props.memory, 'byte')}
+        </KuiTableRowCell>
+        <KuiTableRowCell>
+          <EuiLink
+            onClick={applyFiltering(props.version)}
+          >
+            {props.version}
+          </EuiLink>
+        </KuiTableRowCell>
+      </KuiTableRow>
+    );
+  };
+};
+
+export function ApmServerInstances({ apms }) {
+  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()}
+      />
+    </div>
+  );
+}

x-pack/plugins/monitoring/public/components/apm/instances/status.js

@@ -0,0 +1,54 @@
+/*
+ * 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
+    },
+    totalEvents,
+    timeOfLastEvent,
+  } = stats;
+
+  const metrics = [
+    {
+      label: 'Servers',
+      value: total,
+      dataTestSubj: 'total'
+    },
+    {
+      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"
+    />
+  );
+}

x-pack/plugins/monitoring/public/components/apm/overview/index.js

@@ -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_responses_valid,
+    metrics.apm_responses_errors,
+
+    metrics.apm_output_events_rate_success,
+    metrics.apm_output_events_rate_failure,
+
+    metrics.apm_requests,
+    metrics.apm_transformations,
+
+
+    metrics.apm_cpu,
+    metrics.apm_memory,
+
+    metrics.apm_os_load,
+  ];
+
+  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>
+  );
+}

x-pack/plugins/monitoring/public/components/apm/status_icon.js

@@ -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}`} />
+  );
+}