[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>
elastic · Jun 23, 2020 · b2d3833 · b2d3833
1 parent f3fbf31
commit b2d3833
Show file tree

Hide file tree

Showing 14 changed files with 2,553 additions and 1,483 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
@@ -21,18 +21,22 @@ import { FormattedMessage } from '@kbn/i18n/react';
 
 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,
   ];
 
@@ -56,8 +60,10 @@ export function ApmServerInstance({ summary, metrics, ...props }) {
           </h1>
         </EuiScreenReaderOnly>
         <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
@@ -15,6 +15,7 @@ import {
   EuiPageContent,
   EuiSpacer,
   EuiScreenReaderOnly,
+  EuiPanel,
 } from '@elastic/eui';
 import { Status } from './status';
 import { formatMetric } from '../../../lib/format_number';
@@ -154,7 +155,9 @@ export function ApmServerInstances({ apms, setupMode }) {
           </h1>
         </EuiScreenReaderOnly>
         <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
@@ -56,7 +56,9 @@ export function ApmOverview({ stats, metrics, ...props }) {
           </h1>
         </EuiScreenReaderOnly>
         <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));