Fix client

elastic · Oct 3, 2019 · cfe69f2 · cfe69f2
1 parent 664ea8c
commit cfe69f2
Show file tree

Hide file tree

Showing 5 changed files with 172 additions and 124 deletions.
diff --git a/...s/apm/public/components/app/Settings/AgentConfigurations/AddEditFlyout/ServiceSection.tsx b/...s/apm/public/components/app/Settings/AgentConfigurations/AddEditFlyout/ServiceSection.tsx
@@ -10,7 +10,6 @@ import { i18n } from '@kbn/i18n';
 import { SelectWithPlaceholder } from '../../../../shared/SelectWithPlaceholder';
 import { useFetcher } from '../../../../../hooks/useFetcher';
 import { ENVIRONMENT_NOT_DEFINED } from '../../../../../../common/environment_filter_values';
-import { Config } from '../index';
 import { callApmApi } from '../../../../../services/rest/callApmApi';
 const t = (id: string, defaultMessage: string) =>
   i18n.translate(`xpack.apm.settings.agentConf.flyOut.serviceSection.${id}`, {
@@ -20,50 +19,55 @@ const t = (id: string, defaultMessage: string) =>
 const SELECT_PLACEHOLDER_LABEL = `- ${t('selectPlaceholder', 'Select')} -`;
 
 interface Props {
-  selectedConfig: Config | null;
-  environment?: string;
-  setEnvironment: (env: string) => void;
+  isReadOnly: boolean;
   serviceName?: string;
   setServiceName: (env: string) => void;
+  environment?: string;
+  setEnvironment: (env: string) => void;
+}
+
+function getEnvironmentNameLabel(name: string | undefined) {
+  return name === ENVIRONMENT_NOT_DEFINED
+    ? t('serviceEnvironmentNotSetOptionLabel', 'Not set')
+    : name;
 }
 
 export function ServiceSection({
-  selectedConfig,
-  environment,
-  setEnvironment,
+  isReadOnly,
   serviceName,
-  setServiceName
+  setServiceName,
+  environment,
+  setEnvironment
 }: Props) {
   const { data: serviceNames = [], status: serviceNamesStatus } = useFetcher(
     () => {
-      return callApmApi({
-        pathname: '/api/apm/settings/agent-configuration/services',
-        forceCache: true
-      });
+      if (!isReadOnly) {
+        return callApmApi({
+          pathname: '/api/apm/settings/agent-configuration/services',
+          forceCache: true
+        });
+      }
     },
-    [],
+    [isReadOnly],
     { preservePreviousData: false }
   );
   const { data: environments = [], status: environmentStatus } = useFetcher(
     () => {
-      if (serviceName) {
+      if (!isReadOnly && serviceName) {
         return callApmApi({
           pathname:
             '/api/apm/settings/agent-configuration/services/{serviceName}/environments',
           params: { path: { serviceName } }
         });
       }
     },
-    [serviceName],
+    [isReadOnly, serviceName],
     { preservePreviousData: false }
   );
 
   const environmentOptions = environments.map(({ name, alreadyExists }) => ({
     disabled: alreadyExists,
-    text:
-      name === ENVIRONMENT_NOT_DEFINED
-        ? t('serviceEnvironmentNotSetOptionLabel', 'Not set')
-        : name,
+    text: getEnvironmentNameLabel(name),
     value: name
   }));
 
@@ -77,47 +81,57 @@ export function ServiceSection({
 
       <EuiFormRow
         label={t('serviceNameSelectLabel', 'Name')}
-        helpText={t(
-          'serviceNameSelectHelpText',
-          'Choose the service you want to configure.'
-        )}
+        helpText={
+          !isReadOnly &&
+          t(
+            'serviceNameSelectHelpText',
+            'Choose the service you want to configure.'
+          )
+        }
       >
-        <SelectWithPlaceholder
-          placeholder={SELECT_PLACEHOLDER_LABEL}
-          isLoading={serviceNamesStatus === 'loading'}
-          options={serviceNames.map(text => ({ text }))}
-          value={serviceName}
-          disabled={Boolean(selectedConfig) || serviceNamesStatus === 'loading'}
-          onChange={e => {
-            e.preventDefault();
-            setServiceName(e.target.value);
-            setEnvironment('');
-          }}
-        />
+        {isReadOnly ? (
+          <strong>{serviceName}</strong>
+        ) : (
+          <SelectWithPlaceholder
+            placeholder={SELECT_PLACEHOLDER_LABEL}
+            isLoading={serviceNamesStatus === 'loading'}
+            options={serviceNames.map(text => ({ text }))}
+            value={serviceName}
+            disabled={serviceNamesStatus === 'loading'}
+            onChange={e => {
+              e.preventDefault();
+              setServiceName(e.target.value);
+              setEnvironment('');
+            }}
+          />
+        )}
       </EuiFormRow>
 
       <EuiFormRow
         label={t('serviceEnvironmentSelectLabel', 'Environment')}
-        helpText={t(
-          'serviceEnvironmentSelectHelpText',
-          'Only a single environment per configuration is supported.'
-        )}
+        helpText={
+          !isReadOnly &&
+          t(
+            'serviceEnvironmentSelectHelpText',
+            'Only a single environment per configuration is supported.'
+          )
+        }
       >
-        <SelectWithPlaceholder
-          placeholder={SELECT_PLACEHOLDER_LABEL}
-          isLoading={environmentStatus === 'loading'}
-          options={environmentOptions}
-          value={environment}
-          disabled={
-            !serviceName ||
-            Boolean(selectedConfig) ||
-            environmentStatus === 'loading'
-          }
-          onChange={e => {
-            e.preventDefault();
-            setEnvironment(e.target.value);
-          }}
-        />
+        {isReadOnly ? (
+          <strong>{getEnvironmentNameLabel(environment)}</strong>
+        ) : (
+          <SelectWithPlaceholder
+            placeholder={SELECT_PLACEHOLDER_LABEL}
+            isLoading={environmentStatus === 'loading'}
+            options={environmentOptions}
+            value={environment}
+            disabled={!serviceName || environmentStatus === 'loading'}
+            onChange={e => {
+              e.preventDefault();
+              setEnvironment(e.target.value);
+            }}
+          />
+        )}
       </EuiFormRow>
     </>
   );

diff --git a/.../apm/public/components/app/Settings/AgentConfigurations/AddEditFlyout/SettingsSection.tsx b/.../apm/public/components/app/Settings/AgentConfigurations/AddEditFlyout/SettingsSection.tsx
@@ -15,33 +15,46 @@ import {
 import { i18n } from '@kbn/i18n';
 import { isEmpty } from 'lodash';
 import { SelectWithPlaceholder } from '../../../../shared/SelectWithPlaceholder';
-import { isRumAgentName } from '../../../../../../common/agent_name';
 const t = (id: string, defaultMessage: string) =>
   i18n.translate(`xpack.apm.settings.agentConf.flyOut.settingsSection.${id}`, {
     defaultMessage
   });
 
-interface ConfigOption {
-  value: string;
-  set: (value: string) => void;
-  isValid?: boolean;
-}
-
 interface Props {
-  sampleRate: ConfigOption;
-  captureBody: ConfigOption;
-  transactionMaxSpans: ConfigOption;
-  agentName: string | undefined;
+  isRumService: boolean;
+
+  // sampleRate
+  sampleRate: string;
+  setSampleRate: (value: string) => void;
+  isSampleRateValid?: boolean;
+
+  // captureBody
+  captureBody: string;
+  setCaptureBody: (value: string) => void;
+
+  // transactionMaxSpans
+  transactionMaxSpans: string;
+  setTransactionMaxSpans: (value: string) => void;
+  isTransactionMaxSpansValid?: boolean;
 }
 
 export function SettingsSection({
+  isRumService,
+
+  // sampleRate
   sampleRate,
+  setSampleRate,
+  isSampleRateValid,
+
+  // captureBody
   captureBody,
+  setCaptureBody,
+
+  // transactionMaxSpans
   transactionMaxSpans,
-  agentName
+  setTransactionMaxSpans,
+  isTransactionMaxSpansValid
 }: Props) {
-  const isRumService = isRumAgentName(agentName);
-
   return (
     <>
       <EuiTitle size="xs">
@@ -63,17 +76,17 @@ export function SettingsSection({
           'sampleRateConfigurationInputErrorText',
           'Sample rate must be between 0.000 and 1'
         )}
-        isInvalid={!isEmpty(sampleRate.value) && !sampleRate.isValid}
+        isInvalid={!isEmpty(sampleRate) && !isSampleRateValid}
       >
         <EuiFieldText
           placeholder={t(
             'sampleRateConfigurationInputPlaceholderText',
             'Set sample rate'
           )}
-          value={sampleRate.value}
+          value={sampleRate}
           onChange={e => {
             e.preventDefault();
-            sampleRate.set(e.target.value);
+            setSampleRate(e.target.value);
           }}
         />
       </EuiFormRow>
@@ -108,10 +121,10 @@ export function SettingsSection({
                 text: t('captureBodyConfigOptionAll', 'All')
               }
             ]}
-            value={captureBody.value}
+            value={captureBody}
             onChange={e => {
               e.preventDefault();
-              captureBody.set(e.target.value);
+              setCaptureBody(e.target.value);
             }}
           />
         </EuiFormRow>
@@ -132,7 +145,7 @@ export function SettingsSection({
             'Must be between 0 and 32000'
           )}
           isInvalid={
-            !isEmpty(transactionMaxSpans.value) && !transactionMaxSpans.isValid
+            !isEmpty(transactionMaxSpans) && !isTransactionMaxSpansValid
           }
         >
           <EuiFieldNumber
@@ -141,15 +154,13 @@ export function SettingsSection({
               'Set transaction max spans'
             )}
             value={
-              transactionMaxSpans.value === ''
-                ? ''
-                : Number(transactionMaxSpans.value)
+              transactionMaxSpans === '' ? '' : Number(transactionMaxSpans)
             }
             min={0}
             max={32000}
             onChange={e => {
               e.preventDefault();
-              transactionMaxSpans.set(e.target.value);
+              setTransactionMaxSpans(e.target.value);
             }}
           />
         </EuiFormRow>