[7.x] [Monitoring] Love for APM (#69052) (#69741)

* [Monitoring] Love for APM (#69052) * Fix broken colors for APM * Use default derivative * Fix UI issues with APM * Add new charts * Fix tests * Use EUI color palette * Remove old translations * PR feedback * Fix tests * Fix up overview page Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com> * Fix eslint Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>
elastic · Jun 25, 2020 · 096b401 · 096b401
1 parent d80c2ba
commit 096b401
Show file tree

Hide file tree

Showing 14 changed files with 2,553 additions and 1,484 deletions.
diff --git a/x-pack/plugins/monitoring/public/components/apm/instance/instance.js b/x-pack/plugins/monitoring/public/components/apm/instance/instance.js
@@ -19,18 +19,22 @@ import { Status } from './status';
 
 export function ApmServerInstance({ summary, metrics, ...props }) {
   const seriesToShow = [
+    metrics.apm_requests,
     metrics.apm_responses_valid,
+
     metrics.apm_responses_errors,
+    metrics.apm_acm_request_count,
+
+    metrics.apm_acm_response,
+    metrics.apm_acm_response_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_memory,
     metrics.apm_os_load,
   ];
 
@@ -46,8 +50,10 @@ export function ApmServerInstance({ summary, metrics, ...props }) {
     <EuiPage>
       <EuiPageBody>
         <EuiPageContent>
-          <Status stats={summary} />
-          <EuiSpacer size="s" />
+          <EuiPanel>
+            <Status stats={summary} />
+          </EuiPanel>
+          <EuiSpacer size="m" />
           <EuiFlexGroup wrap>{charts}</EuiFlexGroup>
         </EuiPageContent>
       </EuiPageBody>

diff --git a/x-pack/plugins/monitoring/public/components/apm/instances/instances.js b/x-pack/plugins/monitoring/public/components/apm/instances/instances.js
@@ -8,7 +8,7 @@ import React, { Fragment } from 'react';
 import moment from 'moment';
 import { uniq, get } from 'lodash';
 import { EuiMonitoringTable } from '../../table';
-import { EuiLink, EuiPage, EuiPageBody, EuiPageContent, EuiSpacer } from '@elastic/eui';
+import { EuiLink, EuiPage, EuiPageBody, EuiPageContent, EuiSpacer, EuiPanel } from '@elastic/eui';
 import { Status } from './status';
 import { formatMetric } from '../../../lib/format_number';
 import { getSafeForExternalLink } from '../../../lib/get_safe_for_external_link';
@@ -138,7 +138,9 @@ export function ApmServerInstances({ apms, setupMode }) {
     <EuiPage>
       <EuiPageBody>
         <EuiPageContent>
-          <Status stats={data.stats} />
+          <EuiPanel>
+            <Status stats={data.stats} />
+          </EuiPanel>
           <EuiSpacer size="m" />
           {setupModeCallout}
           <EuiMonitoringTable

diff --git a/x-pack/plugins/monitoring/public/components/apm/overview/index.js b/x-pack/plugins/monitoring/public/components/apm/overview/index.js
@@ -46,7 +46,9 @@ export function ApmOverview({ stats, metrics, ...props }) {
     <EuiPage>
       <EuiPageBody>
         <EuiPageContent>
-          <Status stats={stats} />
+          <EuiPanel>
+            <Status stats={stats} />
+          </EuiPanel>
           <EuiSpacer size="s" />
           <EuiFlexGroup wrap>{charts}</EuiFlexGroup>
         </EuiPageContent>

diff --git a/x-pack/plugins/monitoring/public/components/chart/get_color.js b/x-pack/plugins/monitoring/public/components/chart/get_color.js
@@ -13,10 +13,14 @@
  * @param {Integer} index: index of the chart series, 0-3
  * @returns {String} Hex color to use for chart series at the given index
  */
+import { euiPaletteColorBlind } from '@elastic/eui/lib/services';
+
 export function getColor(app, index) {
   let seriesColors;
   if (app === 'elasticsearch') {
     seriesColors = ['#3ebeb0', '#3b73ac', '#f08656', '#6c478f'];
+  } else if (app === 'apm') {
+    seriesColors = euiPaletteColorBlind();
   } else {
     // for kibana, and fallback (e.g., Logstash and Beats)
     seriesColors = ['#e8488b', '#3b73ac', '#3cab63', '#6c478f'];

diff --git a/x-pack/plugins/monitoring/public/services/breadcrumbs.js b/x-pack/plugins/monitoring/public/services/breadcrumbs.js
@@ -76,6 +76,7 @@ function getKibanaBreadcrumbs(mainInstance) {
         })
       )
     );
+    breadcrumbs.push(createCrumb(null, mainInstance.instance));
   } else {
     // don't link to Overview when we're possibly on Overview or its sibling tabs
     breadcrumbs.push(createCrumb(null, 'Kibana'));
@@ -160,6 +161,7 @@ function getApmBreadcrumbs(mainInstance) {
         })
       )
     );
+    breadcrumbs.push(createCrumb(null, mainInstance.instance));
   } else {
     // don't link to Overview when we're possibly on Overview or its sibling tabs
     breadcrumbs.push(createCrumb(null, apmLabel));