From b73b34acd5efe7a8b3632ddaa27070bc403fa1b4 Mon Sep 17 00:00:00 2001
From: Madison Caldwell <madison.caldwell@elastic.co>
Date: Thu, 14 Jan 2021 17:43:22 +0000
Subject: [PATCH] Layout, round 1

---
 .../rules/threshold_input/index.tsx           | 55 +++++++++++--------
 1 file changed, 33 insertions(+), 22 deletions(-)

diff --git a/x-pack/plugins/security_solution/public/detections/components/rules/threshold_input/index.tsx b/x-pack/plugins/security_solution/public/detections/components/rules/threshold_input/index.tsx
index 81e771ce4dc5..54ce400b7aa4 100644
--- a/x-pack/plugins/security_solution/public/detections/components/rules/threshold_input/index.tsx
+++ b/x-pack/plugins/security_solution/public/detections/components/rules/threshold_input/index.tsx
@@ -5,7 +5,7 @@
  */
 
 import React, { useMemo } from 'react';
-import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
+import { EuiButton, EuiFlexGroup, EuiFlexItem, EuiFormRow, EuiSpacer } from '@elastic/eui';
 import styled from 'styled-components';
 
 import { BrowserFields } from '../../../../common/containers/source';
@@ -52,27 +52,38 @@ const ThresholdInputComponent: React.FC<ThresholdInputProps> = ({
   );
 
   return (
-    <EuiFlexGroup>
-      <EuiFlexItem grow={false}>
-        <Field
-          field={thresholdField}
-          idAria="detectionEngineStepDefineRuleThresholdField"
-          data-test-subj="detectionEngineStepDefineRuleThresholdField"
-          describedByIds={fieldDescribedByIds}
-          type={thresholdField.type}
-          euiFieldProps={fieldEuiFieldProps}
-        />
-      </EuiFlexItem>
-      <OperatorWrapper grow={false}>{'>='}</OperatorWrapper>
-      <EuiFlexItem grow={false}>
-        <Field
-          field={thresholdValue}
-          idAria="detectionEngineStepDefineRuleThresholdValue"
-          data-test-subj="detectionEngineStepDefineRuleThresholdValue"
-          describedByIds={valueDescribedByIds}
-          type={thresholdValue.type}
-        />
-      </EuiFlexItem>
+    <EuiFlexGroup direction="column" style={{ marginLeft: 0 }}>
+      <EuiFlexGroup>
+        <EuiFlexItem grow={false}>
+          <Field
+            field={thresholdField}
+            idAria="detectionEngineStepDefineRuleThresholdField"
+            data-test-subj="detectionEngineStepDefineRuleThresholdField"
+            describedByIds={fieldDescribedByIds}
+            type={thresholdField.type}
+            euiFieldProps={fieldEuiFieldProps}
+          />
+        </EuiFlexItem>
+        <OperatorWrapper grow={false}>{'>='}</OperatorWrapper>
+        <EuiFlexItem grow={false}>
+          <Field
+            field={thresholdValue}
+            idAria="detectionEngineStepDefineRuleThresholdValue"
+            data-test-subj="detectionEngineStepDefineRuleThresholdValue"
+            describedByIds={valueDescribedByIds}
+            type={thresholdValue.type}
+          />
+        </EuiFlexItem>
+      </EuiFlexGroup>
+      <EuiFlexGroup>
+        <EuiFlexItem grow={false}>
+          <EuiButton>{'Add Aggregation'}</EuiButton>
+        </EuiFlexItem>
+        <EuiFlexItem grow={false}>
+          <EuiButton>{'Specify Cardinality'}</EuiButton>
+        </EuiFlexItem>
+      </EuiFlexGroup>
+      <EuiSpacer />
     </EuiFlexGroup>
   );
 };