- refactored ALL_OPTION and NOT_DEFINED_OPTION to be shared from comm…

…on/environment_filter_values - utilize getEnvironmentLabel in the alerting trigger components and added support for the 'All' label
elastic · Aug 26, 2020 · 94c3b48 · 94c3b48
1 parent dd31e8b
commit 94c3b48
Show file tree

Hide file tree

Showing 6 changed files with 46 additions and 41 deletions.
diff --git a/x-pack/plugins/apm/common/environment_filter_values.ts b/x-pack/plugins/apm/common/environment_filter_values.ts
@@ -9,11 +9,29 @@ import { i18n } from '@kbn/i18n';
 export const ENVIRONMENT_ALL = 'ENVIRONMENT_ALL';
 export const ENVIRONMENT_NOT_DEFINED = 'ENVIRONMENT_NOT_DEFINED';
 
+const ENVIRONMENT_ALL_LABEL = i18n.translate('xpack.apm.environment.allLabel', {
+  defaultMessage: 'All',
+});
+const ENVIRONMENT_NOT_DEFINED_LABEL = i18n.translate(
+  'xpack.apm.filter.environment.notDefinedLabel',
+  { defaultMessage: 'Not defined' }
+);
+
+export const ALL_OPTION = {
+  value: ENVIRONMENT_ALL,
+  text: ENVIRONMENT_ALL_LABEL,
+};
+export const NOT_DEFINED_OPTION = {
+  value: ENVIRONMENT_NOT_DEFINED,
+  text: ENVIRONMENT_NOT_DEFINED_LABEL,
+};
+
 export function getEnvironmentLabel(environment: string) {
+  if (environment === ENVIRONMENT_ALL) {
+    return ENVIRONMENT_ALL_LABEL;
+  }
   if (environment === ENVIRONMENT_NOT_DEFINED) {
-    return i18n.translate('xpack.apm.filter.environment.notDefinedLabel', {
-      defaultMessage: 'Not defined',
-    });
+    return ENVIRONMENT_NOT_DEFINED_LABEL;
   }
   return environment;
 }
diff --git a/x-pack/plugins/apm/public/components/shared/EnvironmentFilter/index.tsx b/x-pack/plugins/apm/public/components/shared/EnvironmentFilter/index.tsx
@@ -12,10 +12,12 @@ import { useUrlParams } from '../../../hooks/useUrlParams';
 import { history } from '../../../utils/history';
 import { fromQuery, toQuery } from '../Links/url_helpers';
 import {
+  ALL_OPTION,
+  NOT_DEFINED_OPTION,
   ENVIRONMENT_ALL,
   ENVIRONMENT_NOT_DEFINED,
 } from '../../../../common/environment_filter_values';
-import { useEnvironments, ALL_OPTION } from '../../../hooks/useEnvironments';
+import { useEnvironments } from '../../../hooks/useEnvironments';
 
 function updateEnvironmentUrl(
   location: ReturnType<typeof useLocation>,
@@ -32,13 +34,6 @@ function updateEnvironmentUrl(
   });
 }
 
-const NOT_DEFINED_OPTION = {
-  value: ENVIRONMENT_NOT_DEFINED,
-  text: i18n.translate('xpack.apm.filter.environment.notDefinedLabel', {
-    defaultMessage: 'Not defined',
-  }),
-};
-
 const SEPARATOR_OPTION = {
   text: `- ${i18n.translate(
     'xpack.apm.filter.environment.selectEnvironmentLabel',

diff --git a/x-pack/plugins/apm/public/components/shared/ErrorRateAlertTrigger/index.tsx b/x-pack/plugins/apm/public/components/shared/ErrorRateAlertTrigger/index.tsx
@@ -12,8 +12,12 @@ import { ForLastExpression } from '../../../../../triggers_actions_ui/public';
 import { ALERT_TYPES_CONFIG } from '../../../../common/alert_types';
 import { ServiceAlertTrigger } from '../ServiceAlertTrigger';
 import { PopoverExpression } from '../ServiceAlertTrigger/PopoverExpression';
-import { useEnvironments, ALL_OPTION } from '../../../hooks/useEnvironments';
+import { useEnvironments } from '../../../hooks/useEnvironments';
 import { useUrlParams } from '../../../hooks/useUrlParams';
+import {
+  ENVIRONMENT_ALL,
+  getEnvironmentLabel,
+} from '../../../../common/environment_filter_values';
 
 export interface ErrorRateAlertTriggerParams {
   windowSize: number;
@@ -39,7 +43,7 @@ export function ErrorRateAlertTrigger(props: Props) {
     threshold: 25,
     windowSize: 1,
     windowUnit: 'm',
-    environment: ALL_OPTION.value,
+    environment: ENVIRONMENT_ALL,
   };
 
   const params = {
@@ -51,11 +55,7 @@ export function ErrorRateAlertTrigger(props: Props) {
 
   const fields = [
     <PopoverExpression
-      value={
-        params.environment === ALL_OPTION.value
-          ? ALL_OPTION.text
-          : params.environment
-      }
+      value={getEnvironmentLabel(params.environment)}
       title={i18n.translate('xpack.apm.errorRateAlertTrigger.environment', {
         defaultMessage: 'Environment',
       })}

diff --git a/x-pack/plugins/apm/public/components/shared/TransactionDurationAlertTrigger/index.tsx b/x-pack/plugins/apm/public/components/shared/TransactionDurationAlertTrigger/index.tsx
@@ -12,11 +12,15 @@ import {
   ALERT_TYPES_CONFIG,
   TRANSACTION_ALERT_AGGREGATION_TYPES,
 } from '../../../../common/alert_types';
-import { ALL_OPTION, useEnvironments } from '../../../hooks/useEnvironments';
+import { useEnvironments } from '../../../hooks/useEnvironments';
 import { useServiceTransactionTypes } from '../../../hooks/useServiceTransactionTypes';
 import { useUrlParams } from '../../../hooks/useUrlParams';
 import { ServiceAlertTrigger } from '../ServiceAlertTrigger';
 import { PopoverExpression } from '../ServiceAlertTrigger/PopoverExpression';
+import {
+  ENVIRONMENT_ALL,
+  getEnvironmentLabel,
+} from '../../../../common/environment_filter_values';
 
 interface Params {
   windowSize: number;
@@ -54,7 +58,7 @@ export function TransactionDurationAlertTrigger(props: Props) {
     windowSize: 5,
     windowUnit: 'm',
     transactionType: transactionTypes[0],
-    environment: ALL_OPTION.value,
+    environment: ENVIRONMENT_ALL,
   };
 
   const params = {
@@ -64,11 +68,7 @@ export function TransactionDurationAlertTrigger(props: Props) {
 
   const fields = [
     <PopoverExpression
-      value={
-        params.environment === ALL_OPTION.value
-          ? ALL_OPTION.text
-          : params.environment
-      }
+      value={getEnvironmentLabel(params.environment)}
       title={i18n.translate(
         'xpack.apm.transactionDurationAlertTrigger.environment',
         {

diff --git a/x-pack/plugins/apm/public/components/shared/TransactionDurationAnomalyAlertTrigger/index.tsx b/x-pack/plugins/apm/public/components/shared/TransactionDurationAnomalyAlertTrigger/index.tsx
@@ -7,7 +7,7 @@ import { EuiText, EuiSelect, EuiExpression } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import React from 'react';
 import { ALERT_TYPES_CONFIG } from '../../../../common/alert_types';
-import { ALL_OPTION, useEnvironments } from '../../../hooks/useEnvironments';
+import { useEnvironments } from '../../../hooks/useEnvironments';
 import { useServiceTransactionTypes } from '../../../hooks/useServiceTransactionTypes';
 import { useUrlParams } from '../../../hooks/useUrlParams';
 import { ServiceAlertTrigger } from '../ServiceAlertTrigger';
@@ -16,6 +16,10 @@ import {
   AnomalySeverity,
   SelectAnomalySeverity,
 } from './SelectAnomalySeverity';
+import {
+  ENVIRONMENT_ALL,
+  getEnvironmentLabel,
+} from '../../../../common/environment_filter_values';
 
 interface Params {
   windowSize: number;
@@ -48,7 +52,7 @@ export function TransactionDurationAnomalyAlertTrigger(props: Props) {
     windowUnit: 'm',
     transactionType: transactionTypes[0],
     serviceName,
-    environment: urlParams.environment || ALL_OPTION.value,
+    environment: urlParams.environment || ENVIRONMENT_ALL,
     anomalyScore: 75,
   };
 
@@ -72,11 +76,7 @@ export function TransactionDurationAnomalyAlertTrigger(props: Props) {
       }
     />,
     <PopoverExpression
-      value={
-        params.environment === ALL_OPTION.value
-          ? ALL_OPTION.text
-          : params.environment
-      }
+      value={getEnvironmentLabel(params.environment)}
       title={i18n.translate(
         'xpack.apm.transactionDurationAnomalyAlertTrigger.environment',
         {

diff --git a/x-pack/plugins/apm/public/hooks/useEnvironments.tsx b/x-pack/plugins/apm/public/hooks/useEnvironments.tsx
@@ -5,21 +5,13 @@
  */
 
 import { useMemo } from 'react';
-import { i18n } from '@kbn/i18n';
 import { useFetcher } from './useFetcher';
 import {
+  ALL_OPTION,
   ENVIRONMENT_NOT_DEFINED,
-  ENVIRONMENT_ALL,
 } from '../../common/environment_filter_values';
 import { callApmApi } from '../services/rest/createCallApmApi';
 
-export const ALL_OPTION = {
-  value: ENVIRONMENT_ALL,
-  text: i18n.translate('xpack.apm.environment.allLabel', {
-    defaultMessage: 'All',
-  }),
-};
-
 function getEnvironmentOptions(environments: string[]) {
   const environmentOptions = environments
     .filter((env) => env !== ENVIRONMENT_NOT_DEFINED)