[APM] Create settings page to manage Custom Links (#57788)

* creating custom action index * reverting service form to service section * creating useForm hooks and fields section * adding react-hook-form * refactoring * validating filters * fixing imports * refactoring to NP and creating save custom action * creating basic apis for custom actions * refactoring * changing custom action filters type * adding delete option * removing useForm * fixing flyout view * filters are invalid when selecting the default value * ui fixes * ui fixes * fixing typescript * fixing typescript * fixing labels and adding space btw components * refactoring filters structure * removing reach-hook-form * removing reach-hook-form * adding unit tests * adding unit tests * create custom action index * adding filter option * refactoring create index, creating filter links * creating list api * rename custom action to custom link * fixing unit tests * adding unit tests * refactoring callApmApi * removing useCallApmApi hook * Rename Flyoutfooter.tsx to FlyoutFooter.tsx * removing unused import * fixing typescript errors * fixing duplicate messages * removing filters * fixing save functionality * fixing pr comments * fixing pr comments
elastic · Mar 6, 2020 · 20b2a8c · 20b2a8c
1 parent 349b233
commit 20b2a8c
Show file tree

Hide file tree

Showing 53 changed files with 2,009 additions and 516 deletions.
diff --git a/x-pack/legacy/plugins/apm/public/components/app/Home/__snapshots__/Home.test.tsx.snap b/x-pack/legacy/plugins/apm/public/components/app/Home/__snapshots__/Home.test.tsx.snap
diff --git a/x-pack/legacy/plugins/apm/public/components/app/ServiceMap/index.tsx b/x-pack/legacy/plugins/apm/public/components/app/ServiceMap/index.tsx
@@ -21,7 +21,6 @@ import { isValidPlatinumLicense } from '../../../../../../../plugins/apm/common/
 // eslint-disable-next-line @kbn/eslint/no-restricted-paths
 import { ServiceMapAPIResponse } from '../../../../../../../plugins/apm/server/lib/service_map/get_service_map';
 import { useApmPluginContext } from '../../../hooks/useApmPluginContext';
-import { useCallApmApi } from '../../../hooks/useCallApmApi';
 import { useDeepObjectIdentity } from '../../../hooks/useDeepObjectIdentity';
 import { useLicense } from '../../../hooks/useLicense';
 import { useLoadingIndicator } from '../../../hooks/useLoadingIndicator';
@@ -33,6 +32,7 @@ import { getCytoscapeElements } from './get_cytoscape_elements';
 import { PlatinumLicensePrompt } from './PlatinumLicensePrompt';
 import { Popover } from './Popover';
 import { useRefDimensions } from './useRefDimensions';
+import { callApmApi } from '../../../services/rest/createCallApmApi';
 
 interface ServiceMapProps {
   serviceName?: string;
@@ -61,7 +61,6 @@ ${theme.euiColorLightShade}`,
 const MAX_REQUESTS = 5;
 
 export function ServiceMap({ serviceName }: ServiceMapProps) {
-  const callApmApi = useCallApmApi();
   const license = useLicense();
   const { search } = useLocation();
   const { urlParams, uiFilters } = useUrlParams();
@@ -137,7 +136,7 @@ export function ServiceMap({ serviceName }: ServiceMapProps) {
         }
       }
     },
-    [params, setIsLoading, callApmApi, responses.length, notifications.toasts]
+    [params, setIsLoading, responses.length, notifications.toasts]
   );
 
   useEffect(() => {

diff --git a/...ins/apm/public/components/app/Settings/AgentConfigurations/AddEditFlyout/DeleteButton.tsx b/...ins/apm/public/components/app/Settings/AgentConfigurations/AddEditFlyout/DeleteButton.tsx
@@ -8,10 +8,9 @@ import React, { useState } from 'react';
 import { EuiButtonEmpty } from '@elastic/eui';
 import { NotificationsStart } from 'kibana/public';
 import { i18n } from '@kbn/i18n';
-import { useCallApmApi } from '../../../../../hooks/useCallApmApi';
 import { Config } from '../index';
 import { getOptionLabel } from '../../../../../../../../../plugins/apm/common/agent_configuration_constants';
-import { APMClient } from '../../../../../services/rest/createCallApmApi';
+import { callApmApi } from '../../../../../services/rest/createCallApmApi';
 import { useApmPluginContext } from '../../../../../hooks/useApmPluginContext';
 
 interface Props {
@@ -22,7 +21,6 @@ interface Props {
 export function DeleteButton({ onDeleted, selectedConfig }: Props) {
   const [isDeleting, setIsDeleting] = useState(false);
   const { toasts } = useApmPluginContext().core.notifications;
-  const callApmApi = useCallApmApi();
 
   return (
     <EuiButtonEmpty
@@ -31,7 +29,7 @@ export function DeleteButton({ onDeleted, selectedConfig }: Props) {
       iconSide="right"
       onClick={async () => {
         setIsDeleting(true);
-        await deleteConfig(callApmApi, selectedConfig, toasts);
+        await deleteConfig(selectedConfig, toasts);
         setIsDeleting(false);
         onDeleted();
       }}
@@ -45,7 +43,6 @@ export function DeleteButton({ onDeleted, selectedConfig }: Props) {
 }
 
 async function deleteConfig(
-  callApmApi: APMClient,
   selectedConfig: Config,
   toasts: NotificationsStart['toasts']
 ) {

diff --git a/...c/components/shared/ServiceForm/index.tsx → ...urations/AddEditFlyout/ServiceSection.tsx b/...c/components/shared/ServiceForm/index.tsx → ...urations/AddEditFlyout/ServiceSection.tsx
@@ -10,12 +10,12 @@ import { i18n } from '@kbn/i18n';
 import {
   omitAllOption,
   getOptionLabel
-} from '../../../../../../../plugins/apm/common/agent_configuration_constants';
-import { useFetcher } from '../../../hooks/useFetcher';
-import { SelectWithPlaceholder } from '../SelectWithPlaceholder';
+} from '../../../../../../../../../plugins/apm/common/agent_configuration_constants';
+import { useFetcher } from '../../../../../hooks/useFetcher';
+import { SelectWithPlaceholder } from '../../../../shared/SelectWithPlaceholder';
 
 const SELECT_PLACEHOLDER_LABEL = `- ${i18n.translate(
-  'xpack.apm.settings.agentConf.flyOut.serviceForm.selectPlaceholder',
+  'xpack.apm.settings.agentConf.flyOut.serviceSection.selectPlaceholder',
   { defaultMessage: 'Select' }
 )} -`;
 
@@ -27,7 +27,7 @@ interface Props {
   onEnvironmentChange: (env: string) => void;
 }
 
-export function ServiceForm({
+export function ServiceSection({
   isReadOnly,
   serviceName,
   onServiceNameChange,
@@ -60,7 +60,7 @@ export function ServiceForm({
   );
 
   const ALREADY_CONFIGURED_TRANSLATED = i18n.translate(
-    'xpack.apm.settings.agentConf.flyOut.serviceForm.alreadyConfiguredOption',
+    'xpack.apm.settings.agentConf.flyOut.serviceSection.alreadyConfiguredOption',
     { defaultMessage: 'already configured' }
   );
 
@@ -83,7 +83,7 @@ export function ServiceForm({
       <EuiTitle size="xs">
         <h3>
           {i18n.translate(
-            'xpack.apm.settings.agentConf.flyOut.serviceForm.title',
+            'xpack.apm.settings.agentConf.flyOut.serviceSection.title',
             { defaultMessage: 'Service' }
           )}
         </h3>
@@ -93,13 +93,13 @@ export function ServiceForm({
 
       <EuiFormRow
         label={i18n.translate(
-          'xpack.apm.settings.agentConf.flyOut.serviceForm.serviceNameSelectLabel',
+          'xpack.apm.settings.agentConf.flyOut.serviceSection.serviceNameSelectLabel',
           { defaultMessage: 'Name' }
         )}
         helpText={
           !isReadOnly &&
           i18n.translate(
-            'xpack.apm.settings.agentConf.flyOut.serviceForm.serviceNameSelectHelpText',
+            'xpack.apm.settings.agentConf.flyOut.serviceSection.serviceNameSelectHelpText',
             { defaultMessage: 'Choose the service you want to configure.' }
           )
         }
@@ -124,13 +124,13 @@ export function ServiceForm({
 
       <EuiFormRow
         label={i18n.translate(
-          'xpack.apm.settings.agentConf.flyOut.serviceForm.serviceEnvironmentSelectLabel',
+          'xpack.apm.settings.agentConf.flyOut.serviceSection.serviceEnvironmentSelectLabel',
           { defaultMessage: 'Environment' }
         )}
         helpText={
           !isReadOnly &&
           i18n.translate(
-            'xpack.apm.settings.agentConf.flyOut.serviceForm.serviceEnvironmentSelectHelpText',
+            'xpack.apm.settings.agentConf.flyOut.serviceSection.serviceEnvironmentSelectHelpText',
             {
               defaultMessage:
                 'Only a single environment per configuration is supported.'

diff --git a/...cy/plugins/apm/public/components/app/Settings/AgentConfigurations/AddEditFlyout/index.tsx b/...cy/plugins/apm/public/components/app/Settings/AgentConfigurations/AddEditFlyout/index.tsx
@@ -22,11 +22,10 @@ import {
 import React, { useState } from 'react';
 import { i18n } from '@kbn/i18n';
 import { isRight } from 'fp-ts/lib/Either';
-import { useCallApmApi } from '../../../../../hooks/useCallApmApi';
 import { transactionSampleRateRt } from '../../../../../../../../../plugins/apm/common/runtime_types/transaction_sample_rate_rt';
 import { Config } from '../index';
 import { SettingsSection } from './SettingsSection';
-import { ServiceForm } from '../../../../shared/ServiceForm';
+import { ServiceSection } from './ServiceSection';
 import { DeleteButton } from './DeleteButton';
 import { transactionMaxSpansRt } from '../../../../../../../../../plugins/apm/common/runtime_types/transaction_max_spans_rt';
 import { useFetcher } from '../../../../../hooks/useFetcher';
@@ -58,8 +57,6 @@ export function AddEditFlyout({
   const { toasts } = useApmPluginContext().core.notifications;
   const [isSaving, setIsSaving] = useState(false);
 
-  const callApmApiFromHook = useCallApmApi();
-
   // get a telemetry UI event tracker
   const trackApmEvent = useUiTracker({ app: 'apm' });
 
@@ -129,7 +126,6 @@ export function AddEditFlyout({
     setIsSaving(true);
 
     await saveConfig({
-      callApmApi: callApmApiFromHook,
       serviceName,
       environment,
       sampleRate,
@@ -181,7 +177,7 @@ export function AddEditFlyout({
                 }
               }}
             >
-              <ServiceForm
+              <ServiceSection
                 isReadOnly={Boolean(selectedConfig)}
                 //
                 // environment

diff --git a/...lugins/apm/public/components/app/Settings/AgentConfigurations/AddEditFlyout/saveConfig.ts b/...lugins/apm/public/components/app/Settings/AgentConfigurations/AddEditFlyout/saveConfig.ts
@@ -6,7 +6,7 @@
 
 import { i18n } from '@kbn/i18n';
 import { NotificationsStart } from 'kibana/public';
-import { APMClient } from '../../../../../services/rest/createCallApmApi';
+import { callApmApi } from '../../../../../services/rest/createCallApmApi';
 import { isRumAgentName } from '../../../../../../../../../plugins/apm/common/agent_name';
 import {
   getOptionLabel,
@@ -21,7 +21,6 @@ interface Settings {
 }
 
 export async function saveConfig({
-  callApmApi,
   serviceName,
   environment,
   sampleRate,
@@ -32,7 +31,6 @@ export async function saveConfig({
   toasts,
   trackApmEvent
 }: {
-  callApmApi: APMClient;
   serviceName: string;
   environment: string;
   sampleRate: string;

diff --git a/x-pack/legacy/plugins/apm/public/components/app/Settings/ApmIndices/index.tsx b/x-pack/legacy/plugins/apm/public/components/app/Settings/ApmIndices/index.tsx
@@ -20,8 +20,7 @@ import {
   EuiButtonEmpty
 } from '@elastic/eui';
 import { useFetcher } from '../../../../hooks/useFetcher';
-import { useCallApmApi } from '../../../../hooks/useCallApmApi';
-import { APMClient } from '../../../../services/rest/createCallApmApi';
+import { callApmApi } from '../../../../services/rest/createCallApmApi';
 import { clearCache } from '../../../../services/rest/callApi';
 import { useApmPluginContext } from '../../../../hooks/useApmPluginContext';
 
@@ -68,10 +67,8 @@ const APM_INDEX_LABELS = [
 ];
 
 async function saveApmIndices({
-  callApmApi,
   apmIndices
 }: {
-  callApmApi: APMClient;
   apmIndices: Record<string, string>;
 }) {
   await callApmApi({
@@ -94,11 +91,11 @@ export function ApmIndices() {
   const [apmIndices, setApmIndices] = useState<Record<string, string>>({});
   const [isSaving, setIsSaving] = useState(false);
 
-  const callApmApiFromHook = useCallApmApi();
-
   const { data = INITIAL_STATE, status, refetch } = useFetcher(
-    callApmApi =>
-      callApmApi({ pathname: `/api/apm/settings/apm-index-settings` }),
+    _callApmApi =>
+      _callApmApi({
+        pathname: `/api/apm/settings/apm-index-settings`
+      }),
     []
   );
 
@@ -122,10 +119,7 @@ export function ApmIndices() {
     event.preventDefault();
     setIsSaving(true);
     try {
-      await saveApmIndices({
-        callApmApi: callApmApiFromHook,
-        apmIndices
-      });
+      await saveApmIndices({ apmIndices });
       toasts.addSuccess({
         title: i18n.translate(
           'xpack.apm.settings.apmIndices.applyChanges.succeeded.title',

diff --git a/...ts/app/Settings/CustomizeUI/CustomActionsOverview/CustomActionsFlyout/SettingsSection.tsx b/...ts/app/Settings/CustomizeUI/CustomActionsOverview/CustomActionsFlyout/SettingsSection.tsx