Add advanced settings for APM

* Register advanced settings in server startup that show in the Kibana advanced settings UI. (Fixes #81396.) * Format settings pages to be more consistent.
elastic · Oct 27, 2020 · 5e032f8 · 5e032f8
1 parent 8c07eb9
commit 5e032f8
Show file tree

Hide file tree

Showing 12 changed files with 184 additions and 84 deletions.
diff --git a/x-pack/plugins/apm/common/ui_settings_keys.ts b/x-pack/plugins/apm/common/ui_settings_keys.ts
@@ -0,0 +1,8 @@
+/*
+ * 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 const enableCorrelations = 'apm:enableCorrelations';
+export const enableServiceOverview = 'apm:enableServiceOverview';
diff --git a/x-pack/plugins/apm/public/components/app/ServiceDetails/ServiceDetailTabs.tsx b/x-pack/plugins/apm/public/components/app/ServiceDetails/ServiceDetailTabs.tsx
@@ -8,6 +8,7 @@ import { EuiTabs } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import React from 'react';
 import { isJavaAgentName, isRumAgentName } from '../../../../common/agent_name';
+import { enableServiceOverview } from '../../../../common/ui_settings_keys';
 import { useAgentName } from '../../../hooks/useAgentName';
 import { useApmPluginContext } from '../../../hooks/useApmPluginContext';
 import { EuiTabLink } from '../../shared/EuiTabLink';
@@ -29,7 +30,19 @@ interface Props {
 
 export function ServiceDetailTabs({ serviceName, tab }: Props) {
   const { agentName } = useAgentName();
-  const { serviceMapEnabled } = useApmPluginContext().config;
+  const { uiSettings } = useApmPluginContext().core;
+
+  const overviewTab = {
+    link: (
+      <a title="UNDER CONSTRUCTION" href="#">
+        {i18n.translate('xpack.apm.serviceDetails.overviewTabLabel', {
+          defaultMessage: 'Overview',
+        })}
+      </a>
+    ),
+    render: () => <></>,
+    name: 'overview',
+  };
 
   const transactionsTab = {
     link: (
@@ -57,7 +70,23 @@ export function ServiceDetailTabs({ serviceName, tab }: Props) {
     name: 'errors',
   };
 
-  const tabs = [transactionsTab, errorsTab];
+  const serviceMapTab = {
+    link: (
+      <ServiceMapLink serviceName={serviceName}>
+        {i18n.translate('xpack.apm.home.serviceMapTabLabel', {
+          defaultMessage: 'Service Map',
+        })}
+      </ServiceMapLink>
+    ),
+    render: () => <ServiceMap serviceName={serviceName} />,
+    name: 'service-map',
+  };
+
+  const tabs = [transactionsTab, errorsTab, serviceMapTab];
+
+  if (uiSettings.get(enableServiceOverview)) {
+    tabs.unshift(overviewTab);
+  }
 
   if (isJavaAgentName(agentName)) {
     const nodesListTab = {
@@ -89,22 +118,6 @@ export function ServiceDetailTabs({ serviceName, tab }: Props) {
     tabs.push(metricsTab);
   }
 
-  const serviceMapTab = {
-    link: (
-      <ServiceMapLink serviceName={serviceName}>
-        {i18n.translate('xpack.apm.home.serviceMapTabLabel', {
-          defaultMessage: 'Service Map',
-        })}
-      </ServiceMapLink>
-    ),
-    render: () => <ServiceMap serviceName={serviceName} />,
-    name: 'service-map',
-  };
-
-  if (serviceMapEnabled) {
-    tabs.push(serviceMapTab);
-  }
-
   const selectedTab = tabs.find((serviceTab) => serviceTab.name === tab);
 
   return (

diff --git a/x-pack/plugins/apm/public/components/app/Settings/AgentConfigurations/index.tsx b/x-pack/plugins/apm/public/components/app/Settings/AgentConfigurations/index.tsx
@@ -3,7 +3,6 @@
  * or more contributor license agreements. Licensed under the Elastic License;
  * you may not use this file except in compliance with the Elastic License.
  */
-
 import {
   EuiButton,
   EuiFlexGroup,
@@ -37,14 +36,22 @@ export function AgentConfigurations() {
 
   return (
     <>
+      <EuiTitle size="l">
+        <h1>
+          {i18n.translate('xpack.apm.agentConfig.titleText', {
+            defaultMessage: 'Agent remote configuration',
+          })}
+        </h1>
+      </EuiTitle>
+      <EuiSpacer size="l" />
       <EuiPanel>
         <EuiFlexGroup alignItems="center">
           <EuiFlexItem grow={false}>
             <EuiTitle>
               <h2>
                 {i18n.translate(
                   'xpack.apm.agentConfig.configurationsPanelTitle',
-                  { defaultMessage: 'Agent remote configuration' }
+                  { defaultMessage: 'Configurations' }
                 )}
               </h2>
             </EuiTitle>

diff --git a/x-pack/plugins/apm/public/components/app/Settings/ApmIndices/index.test.tsx b/x-pack/plugins/apm/public/components/app/Settings/ApmIndices/index.test.tsx
@@ -24,11 +24,11 @@ describe('ApmIndices', () => {
     );
 
     expect(getByText('Indices')).toMatchInlineSnapshot(`
-      <h2
-        class="euiTitle euiTitle--medium"
+      <h1
+        class="euiTitle euiTitle--large"
       >
         Indices
-      </h2>
+      </h1>
     `);
 
     expect(spy).toHaveBeenCalledTimes(2);

diff --git a/x-pack/plugins/apm/public/components/app/Settings/ApmIndices/index.tsx b/x-pack/plugins/apm/public/components/app/Settings/ApmIndices/index.tsx
@@ -163,23 +163,28 @@ export function ApmIndices() {
   };
 
   return (
-    <EuiPanel>
-      <EuiFlexGroup alignItems="center">
-        <EuiFlexItem grow={false}>
-          <EuiTitle>
-            <h2>
-              {i18n.translate('xpack.apm.settings.apmIndices.title', {
-                defaultMessage: 'Indices',
-              })}
-            </h2>
-          </EuiTitle>
-          <EuiSpacer size="m" />
-          <EuiText size="s" grow={false}>
-            <p>
-              {i18n.translate('xpack.apm.settings.apmIndices.description', {
-                defaultMessage: `The APM UI uses index patterns to query your APM indices. If you've customized the index names that APM Server writes events to, you may need to update these patterns for the APM UI to work. Settings here take precedence over those set in kibana.yml.`,
-              })}
-            </p>
+    <>
+      <EuiTitle size="l">
+        <h1>
+          {i18n.translate('xpack.apm.settings.apmIndices.title', {
+            defaultMessage: 'Indices',
+          })}
+        </h1>
+      </EuiTitle>
+      <EuiSpacer size="l" />
+      <EuiText>
+        {i18n.translate('xpack.apm.settings.apmIndices.description', {
+          defaultMessage: `The APM UI uses index patterns to query your APM indices. If you've customized the index names that APM Server writes events to, you may need to update these patterns for the APM UI to work. Settings here take precedence over those set in kibana.yml.`,
+        })}
+      </EuiText>
+      <EuiSpacer size="l" />
+      <EuiPanel>
+        <EuiFlexGroup alignItems="center">
+          <EuiFlexItem grow={false}>
+            <EuiTitle>
+              <h2></h2>
+            </EuiTitle>
+
             <EuiForm>
               {APM_INDEX_LABELS.map(({ configurationName, label }) => {
                 const matchedConfiguration = data.find(
@@ -239,11 +244,10 @@ export function ApmIndices() {
                 </EuiFlexItem>
               </EuiFlexGroup>
             </EuiForm>
-          </EuiText>
-        </EuiFlexItem>
-      </EuiFlexGroup>
-
-      <EuiSpacer size="m" />
-    </EuiPanel>
+          </EuiFlexItem>
+        </EuiFlexGroup>
+        <EuiSpacer size="m" />
+      </EuiPanel>
+    </>
   );
 }
diff --git a/...gins/apm/public/components/app/Settings/CustomizeUI/CustomLink/CreateCustomLinkButton.tsx b/...gins/apm/public/components/app/Settings/CustomizeUI/CustomLink/CreateCustomLinkButton.tsx
@@ -9,7 +9,7 @@ import { i18n } from '@kbn/i18n';
 
 export function CreateCustomLinkButton({ onClick }: { onClick: () => void }) {
   return (
-    <EuiButton color="primary" fill onClick={onClick}>
+    <EuiButton color="primary" fill iconType="plusInCircle" onClick={onClick}>
       {i18n.translate(
         'xpack.apm.settings.customizeUI.customLink.createCustomLink',
         { defaultMessage: 'Create custom link' }

diff --git a/x-pack/plugins/apm/public/components/app/Settings/CustomizeUI/CustomLink/Title.tsx b/x-pack/plugins/apm/public/components/app/Settings/CustomizeUI/CustomLink/Title.tsx
@@ -3,36 +3,23 @@
  * or more contributor license agreements. Licensed under the Elastic License;
  * you may not use this file except in compliance with the Elastic License.
  */
-import { EuiFlexGroup, EuiFlexItem, EuiIconTip, EuiTitle } from '@elastic/eui';
+
+import { EuiFlexGroup, EuiFlexItem, EuiTitle } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import React from 'react';
 
 export function Title() {
   return (
     <EuiFlexGroup alignItems="center">
       <EuiFlexItem grow={false}>
-        <EuiTitle size="s">
+        <EuiTitle>
           <EuiFlexGroup alignItems="center" gutterSize="s" responsive={false}>
             <EuiFlexItem grow={false}>
-              <h1>
+              <h2>
                 {i18n.translate('xpack.apm.settings.customizeUI.customLink', {
                   defaultMessage: 'Custom Links',
                 })}
-              </h1>
-            </EuiFlexItem>
-
-            <EuiFlexItem grow={false}>
-              <EuiIconTip
-                type="iInCircle"
-                position="top"
-                content={i18n.translate(
-                  'xpack.apm.settings.customizeUI.customLink.info',
-                  {
-                    defaultMessage:
-                      'These links will be shown in the Actions context menu for transactions.',
-                  }
-                )}
-              />
+              </h2>
             </EuiFlexItem>
           </EuiFlexGroup>
         </EuiTitle>

diff --git a/x-pack/plugins/apm/public/components/app/Settings/CustomizeUI/CustomLink/index.tsx b/x-pack/plugins/apm/public/components/app/Settings/CustomizeUI/CustomLink/index.tsx
@@ -4,19 +4,26 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { EuiPanel, EuiSpacer, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
+import {
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiPanel,
+  EuiSpacer,
+  EuiText,
+} from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
 import { isEmpty } from 'lodash';
 import React, { useEffect, useState } from 'react';
 import { INVALID_LICENSE } from '../../../../../../common/custom_link';
 import { CustomLink } from '../../../../../../common/custom_link/custom_link_types';
+import { FETCH_STATUS, useFetcher } from '../../../../../hooks/useFetcher';
 import { useLicense } from '../../../../../hooks/useLicense';
-import { useFetcher, FETCH_STATUS } from '../../../../../hooks/useFetcher';
+import { LicensePrompt } from '../../../../shared/LicensePrompt';
+import { CreateCustomLinkButton } from './CreateCustomLinkButton';
 import { CustomLinkFlyout } from './CustomLinkFlyout';
 import { CustomLinkTable } from './CustomLinkTable';
 import { EmptyPrompt } from './EmptyPrompt';
 import { Title } from './Title';
-import { CreateCustomLinkButton } from './CreateCustomLinkButton';
-import { LicensePrompt } from '../../../../shared/LicensePrompt';
 
 export function CustomLinkOverview() {
   const license = useLicense();
@@ -82,8 +89,13 @@ export function CustomLinkOverview() {
             </EuiFlexItem>
           )}
         </EuiFlexGroup>
-
-        <EuiSpacer size="m" />
+        <EuiSpacer size="l" />
+        <EuiText>
+          {i18n.translate('xpack.apm.settings.customizeUI.customLink.info', {
+            defaultMessage:
+              'These links will be shown in the Actions context menu for transactions.',
+          })}
+        </EuiText>
         {hasValidLicense ? (
           showEmptyPrompt ? (
             <EmptyPrompt onCreateCustomLinkClick={onCreateCustomLinkClick} />

diff --git a/x-pack/plugins/apm/public/components/app/Settings/anomaly_detection/jobs_list.tsx b/x-pack/plugins/apm/public/components/app/Settings/anomaly_detection/jobs_list.tsx
@@ -80,7 +80,7 @@ export function JobsList({ data, status, onAddEnvironments }: Props) {
           </EuiTitle>
         </EuiFlexItem>
         <EuiFlexItem grow={false}>
-          <EuiButton fill onClick={onAddEnvironments}>
+          <EuiButton fill iconType="plusInCircle" onClick={onAddEnvironments}>
             {i18n.translate(
               'xpack.apm.settings.anomalyDetection.jobList.addEnvironments',
               {