Skip to content

Commit

Permalink
[APM] Create settings page to manage Custom Links (elastic#57788)
Browse files Browse the repository at this point in the history
* 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
  • Loading branch information
cauemarcondes committed Mar 6, 2020
1 parent 349b233 commit 20b2a8c
Show file tree
Hide file tree
Showing 53 changed files with 2,009 additions and 516 deletions.

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -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;
Expand Down Expand Up @@ -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();
Expand Down Expand Up @@ -137,7 +136,7 @@ export function ServiceMap({ serviceName }: ServiceMapProps) {
}
}
},
[params, setIsLoading, callApmApi, responses.length, notifications.toasts]
[params, setIsLoading, responses.length, notifications.toasts]
);

useEffect(() => {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand All @@ -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
Expand All @@ -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();
}}
Expand All @@ -45,7 +43,6 @@ export function DeleteButton({ onDeleted, selectedConfig }: Props) {
}

async function deleteConfig(
callApmApi: APMClient,
selectedConfig: Config,
toasts: NotificationsStart['toasts']
) {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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' }
)} -`;

Expand All @@ -27,7 +27,7 @@ interface Props {
onEnvironmentChange: (env: string) => void;
}

export function ServiceForm({
export function ServiceSection({
isReadOnly,
serviceName,
onServiceNameChange,
Expand Down Expand Up @@ -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' }
);

Expand All @@ -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>
Expand All @@ -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.' }
)
}
Expand All @@ -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.'
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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' });

Expand Down Expand Up @@ -129,7 +126,6 @@ export function AddEditFlyout({
setIsSaving(true);

await saveConfig({
callApmApi: callApmApiFromHook,
serviceName,
environment,
sampleRate,
Expand Down Expand Up @@ -181,7 +177,7 @@ export function AddEditFlyout({
}
}}
>
<ServiceForm
<ServiceSection
isReadOnly={Boolean(selectedConfig)}
//
// environment
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -21,7 +21,6 @@ interface Settings {
}

export async function saveConfig({
callApmApi,
serviceName,
environment,
sampleRate,
Expand All @@ -32,7 +31,6 @@ export async function saveConfig({
toasts,
trackApmEvent
}: {
callApmApi: APMClient;
serviceName: string;
environment: string;
sampleRate: string;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand Down Expand Up @@ -68,10 +67,8 @@ const APM_INDEX_LABELS = [
];

async function saveApmIndices({
callApmApi,
apmIndices
}: {
callApmApi: APMClient;
apmIndices: Record<string, string>;
}) {
await callApmApi({
Expand All @@ -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`
}),
[]
);

Expand All @@ -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',
Expand Down

This file was deleted.

Loading

0 comments on commit 20b2a8c

Please sign in to comment.