From 73254e1f1114b2646ab7210386ae8337c9bbbdbc Mon Sep 17 00:00:00 2001
From: Phillip Burch <phillip.burch@live.com>
Date: Tue, 14 Apr 2020 14:11:40 -0500
Subject: [PATCH 1/3] Disable adding conditions when in alert manament context.

---
 .../alerting/metrics/expression.tsx           | 179 ++++++++++++------
 1 file changed, 117 insertions(+), 62 deletions(-)

diff --git a/x-pack/plugins/infra/public/components/alerting/metrics/expression.tsx b/x-pack/plugins/infra/public/components/alerting/metrics/expression.tsx
index 2e43ede2480ce5..2784b777c1d719 100644
--- a/x-pack/plugins/infra/public/components/alerting/metrics/expression.tsx
+++ b/x-pack/plugins/infra/public/components/alerting/metrics/expression.tsx
@@ -17,6 +17,9 @@ import {
 import { IFieldType } from 'src/plugins/data/public';
 import { FormattedMessage } from '@kbn/i18n/react';
 import { i18n } from '@kbn/i18n';
+import { EuiExpression } from '@elastic/eui';
+import { EuiCallOut } from '@elastic/eui';
+import { EuiLink } from '@elastic/eui';
 import {
   MetricExpressionParams,
   Comparator,
@@ -208,6 +211,37 @@ export const Expressions: React.FC<Props> = props => {
     }
   }, [alertsContext.metadata, defaultExpression, source]); // eslint-disable-line react-hooks/exhaustive-deps
 
+  // INFO: If there is metadata, you're in the metrics explorer context
+  const canAddConditions = !!alertsContext.metadata;
+
+  if (!canAddConditions && !alertParams.criteria) {
+    return (
+      <>
+        <EuiSpacer size={'m'} />
+        <EuiCallOut
+          title={
+            <>
+              <FormattedMessage
+                id="xpack.infra.metrics.alertFlyout.createAlertWarningBody"
+                defaultMessage="Create new metric threshold alerts from"
+              />{' '}
+              <EuiLink href={'../app/metrics/explorer'}>
+                <FormattedMessage
+                  id="xpack.infra.homePage.metricsExplorerTabTitle"
+                  defaultMessage="Metrics Explorer"
+                />
+              </EuiLink>
+              .
+            </>
+          }
+          color="warning"
+          iconType="help"
+        />
+        <EuiSpacer size={'m'} />
+      </>
+    );
+  }
+
   return (
     <>
       <EuiSpacer size={'m'} />
@@ -224,6 +258,7 @@ export const Expressions: React.FC<Props> = props => {
         alertParams.criteria.map((e, idx) => {
           return (
             <ExpressionRow
+              canEditAggField={canAddConditions}
               canDelete={alertParams.criteria.length > 1}
               fields={derivedIndexPattern.fields}
               remove={removeExpression}
@@ -246,61 +281,64 @@ export const Expressions: React.FC<Props> = props => {
       />
 
       <div>
-        <EuiButtonEmpty
-          color={'primary'}
-          iconSide={'left'}
-          flush={'left'}
-          iconType={'plusInCircleFilled'}
-          onClick={addExpression}
-        >
-          <FormattedMessage
-            id="xpack.infra.metrics.alertFlyout.addCondition"
-            defaultMessage="Add condition"
-          />
-        </EuiButtonEmpty>
+        {canAddConditions && (
+          <EuiButtonEmpty
+            color={'primary'}
+            iconSide={'left'}
+            flush={'left'}
+            iconType={'plusInCircleFilled'}
+            onClick={addExpression}
+          >
+            <FormattedMessage
+              id="xpack.infra.metrics.alertFlyout.addCondition"
+              defaultMessage="Add condition"
+            />
+          </EuiButtonEmpty>
+        )}
       </div>
 
       <EuiSpacer size={'m'} />
-
-      <EuiFormRow
-        label={i18n.translate('xpack.infra.metrics.alertFlyout.filterLabel', {
-          defaultMessage: 'Filter',
-        })}
-        helpText={i18n.translate('xpack.infra.metrics.alertFlyout.filterHelpText', {
-          defaultMessage: 'Filter help text',
-        })}
-        fullWidth
-        compressed
-      >
-        <MetricsExplorerKueryBar
-          derivedIndexPattern={derivedIndexPattern}
-          onSubmit={onFilterQuerySubmit}
-          value={alertParams.filterQuery}
-        />
-      </EuiFormRow>
-
-      <EuiSpacer size={'m'} />
-
       {alertsContext.metadata && (
-        <EuiFormRow
-          label={i18n.translate('xpack.infra.metrics.alertFlyout.createAlertPerText', {
-            defaultMessage: 'Create alert per',
-          })}
-          helpText={i18n.translate('xpack.infra.metrics.alertFlyout.createAlertPerHelpText', {
-            defaultMessage: 'Create alert help text',
-          })}
-          fullWidth
-          compressed
-        >
-          <MetricsExplorerGroupBy
-            onChange={onGroupByChange}
-            fields={derivedIndexPattern.fields}
-            options={{
-              ...options,
-              groupBy: alertParams.groupBy || undefined,
-            }}
-          />
-        </EuiFormRow>
+        <>
+          <EuiFormRow
+            label={i18n.translate('xpack.infra.metrics.alertFlyout.filterLabel', {
+              defaultMessage: 'Filter',
+            })}
+            helpText={i18n.translate('xpack.infra.metrics.alertFlyout.filterHelpText', {
+              defaultMessage: 'Filter help text',
+            })}
+            fullWidth
+            compressed
+          >
+            <MetricsExplorerKueryBar
+              derivedIndexPattern={derivedIndexPattern}
+              onSubmit={onFilterQuerySubmit}
+              value={alertParams.filterQuery}
+            />
+          </EuiFormRow>
+
+          <EuiSpacer size={'m'} />
+
+          <EuiFormRow
+            label={i18n.translate('xpack.infra.metrics.alertFlyout.createAlertPerText', {
+              defaultMessage: 'Create alert per',
+            })}
+            helpText={i18n.translate('xpack.infra.metrics.alertFlyout.createAlertPerHelpText', {
+              defaultMessage: 'Create alert help text',
+            })}
+            fullWidth
+            compressed
+          >
+            <MetricsExplorerGroupBy
+              onChange={onGroupByChange}
+              fields={derivedIndexPattern.fields}
+              options={{
+                ...options,
+                groupBy: alertParams.groupBy || undefined,
+              }}
+            />
+          </EuiFormRow>
+        </>
       )}
     </>
   );
@@ -308,6 +346,7 @@ export const Expressions: React.FC<Props> = props => {
 
 interface ExpressionRowProps {
   fields: IFieldType[];
+  canEditAggField: boolean;
   expressionId: number;
   expression: MetricExpression;
   errors: IErrorObject;
@@ -378,17 +417,20 @@ export const ExpressionRow: React.FC<ExpressionRowProps> = props => {
             </StyledExpression>
             {aggType !== 'count' && (
               <StyledExpression>
-                <OfExpression
-                  customAggTypesOptions={aggregationType}
-                  aggField={metric}
-                  fields={fields.map(f => ({
-                    normalizedType: f.type,
-                    name: f.name,
-                  }))}
-                  aggType={aggType}
-                  errors={errors}
-                  onChangeSelectedAggField={updateMetric}
-                />
+                {!props.canEditAggField && <DiasabledAggField text={metric || ''} />}
+                {props.canEditAggField && (
+                  <OfExpression
+                    customAggTypesOptions={aggregationType}
+                    aggField={metric}
+                    fields={fields.map(f => ({
+                      normalizedType: f.type,
+                      name: f.name,
+                    }))}
+                    aggType={aggType}
+                    errors={errors}
+                    onChangeSelectedAggField={updateMetric}
+                  />
+                )}
               </StyledExpression>
             )}
             <StyledExpression>
@@ -420,6 +462,19 @@ export const ExpressionRow: React.FC<ExpressionRowProps> = props => {
   );
 };
 
+export const DiasabledAggField = ({ text }: { text: string }) => {
+  return (
+    <EuiExpression
+      description={i18n.translate('xpack.triggersActionsUI.common.expressionItems.of.buttonLabel', {
+        defaultMessage: 'of',
+      })}
+      value={text}
+      isActive={false}
+      color={'secondary'}
+    />
+  );
+};
+
 export const aggregationType: { [key: string]: any } = {
   avg: {
     text: i18n.translate('xpack.infra.metrics.alertFlyout.aggregationText.avg', {

From d2a8912ef6a135df28a69f2bf206542883ee0fbc Mon Sep 17 00:00:00 2001
From: Phillip Burch <phillip.burch@live.com>
Date: Tue, 14 Apr 2020 14:15:54 -0500
Subject: [PATCH 2/3] Fix typo

---
 .../infra/public/components/alerting/metrics/expression.tsx   | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/x-pack/plugins/infra/public/components/alerting/metrics/expression.tsx b/x-pack/plugins/infra/public/components/alerting/metrics/expression.tsx
index 2784b777c1d719..29c5fba3342855 100644
--- a/x-pack/plugins/infra/public/components/alerting/metrics/expression.tsx
+++ b/x-pack/plugins/infra/public/components/alerting/metrics/expression.tsx
@@ -417,7 +417,7 @@ export const ExpressionRow: React.FC<ExpressionRowProps> = props => {
             </StyledExpression>
             {aggType !== 'count' && (
               <StyledExpression>
-                {!props.canEditAggField && <DiasabledAggField text={metric || ''} />}
+                {!props.canEditAggField && <DisabledAggField text={metric || ''} />}
                 {props.canEditAggField && (
                   <OfExpression
                     customAggTypesOptions={aggregationType}
@@ -462,7 +462,7 @@ export const ExpressionRow: React.FC<ExpressionRowProps> = props => {
   );
 };
 
-export const DiasabledAggField = ({ text }: { text: string }) => {
+export const DisabledAggField = ({ text }: { text: string }) => {
   return (
     <EuiExpression
       description={i18n.translate('xpack.triggersActionsUI.common.expressionItems.of.buttonLabel', {

From 8fdf8a406a7736d5f818086f1c720882c55e3f11 Mon Sep 17 00:00:00 2001
From: Phillip Burch <phillip.burch@live.com>
Date: Tue, 14 Apr 2020 16:15:38 -0500
Subject: [PATCH 3/3] Change id for i18n string

---
 .../infra/public/components/alerting/metrics/expression.tsx     | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/x-pack/plugins/infra/public/components/alerting/metrics/expression.tsx b/x-pack/plugins/infra/public/components/alerting/metrics/expression.tsx
index 22b42eba5e22a3..6cf4e5bed2e6f9 100644
--- a/x-pack/plugins/infra/public/components/alerting/metrics/expression.tsx
+++ b/x-pack/plugins/infra/public/components/alerting/metrics/expression.tsx
@@ -466,7 +466,7 @@ export const ExpressionRow: React.FC<ExpressionRowProps> = props => {
 export const DisabledAggField = ({ text }: { text: string }) => {
   return (
     <EuiExpression
-      description={i18n.translate('xpack.triggersActionsUI.common.expressionItems.of.buttonLabel', {
+      description={i18n.translate('xpack.infra.metrics.alertFlyout.of.buttonLabel', {
         defaultMessage: 'of',
       })}
       value={text}