fixes

elastic · Jan 12, 2020 · 2ae20af · 2ae20af
1 parent 111a4a9
commit 2ae20af
Show file tree

Hide file tree

Showing 12 changed files with 441 additions and 356 deletions.
diff --git a/...egacy/plugins/siem/public/pages/detection_engine/rules/components/add_item_form/index.tsx b/...egacy/plugins/siem/public/pages/detection_engine/rules/components/add_item_form/index.tsx
@@ -37,6 +37,25 @@ const MyEuiFormRow = styled(EuiFormRow)`
   }
 `;
 
+export const MyAddItemButton = styled(EuiButtonEmpty)`
+  margin-top: 4px;
+
+  &.euiButtonEmpty--xSmall {
+    font-size: 12px;
+  }
+
+  .euiIcon {
+    width: 12px;
+    height: 12px;
+  }
+`;
+
+MyAddItemButton.defaultProps = {
+  flush: 'left',
+  iconType: 'plusInCircle',
+  size: 'xs',
+};
+
 export const AddItem = ({
   addText,
   dataTestSubj,
@@ -160,9 +179,9 @@ export const AddItem = ({
           );
         })}
 
-        <EuiButtonEmpty size="xs" onClick={addItem} isDisabled={isDisabled} iconType="plusInCircle">
+        <MyAddItemButton onClick={addItem} isDisabled={isDisabled}>
           {addText}
-        </EuiButtonEmpty>
+        </MyAddItemButton>
       </>
     </MyEuiFormRow>
   );

diff --git a/...es/detection_engine/rules/components/description_step/assets/list_tree_icon.svg b/...es/detection_engine/rules/components/description_step/assets/list_tree_icon.svg
diff --git a/.../plugins/siem/public/pages/detection_engine/rules/components/description_step/helpers.tsx b/.../plugins/siem/public/pages/detection_engine/rules/components/description_step/helpers.tsx
@@ -10,8 +10,8 @@ import {
   EuiFlexGroup,
   EuiFlexItem,
   EuiLink,
-  EuiText,
-  EuiListGroup,
+  EuiButtonEmpty,
+  EuiSpacer,
 } from '@elastic/eui';
 
 import { isEmpty } from 'lodash/fp';
@@ -26,6 +26,7 @@ import { FilterLabel } from './filter_label';
 import * as i18n from './translations';
 import { BuildQueryBarDescription, BuildThreatsDescription, ListItems } from './types';
 import { SeverityBadge } from '../severity_badge';
+import ListTreeIcon from './assets/list_tree_icon.svg';
 
 const isNotEmptyArray = (values: string[]) =>
   !isEmpty(values) && values.filter(val => !isEmpty(val)).length > 0;
@@ -99,10 +100,17 @@ const ThreatsEuiFlexGroup = styled(EuiFlexGroup)`
   }
 `;
 
-const MyEuiListGroup = styled(EuiListGroup)`
-  padding: 0px;
-  .euiListGroupItem__button {
-    padding: 0px;
+const TechniqueLinkItem = styled(EuiButtonEmpty)`
+  .euiIcon {
+    width: 8px;
+    height: 8px;
+  }
+`;
+
+const ReferenceLinkItem = styled(EuiButtonEmpty)`
+  .euiIcon {
+    width: 12px;
+    height: 12px;
   }
 `;
 
@@ -120,28 +128,31 @@ export const buildThreatsDescription = ({
               const tactic = tacticsOptions.find(t => t.name === threat.tactic.name);
               return (
                 <EuiFlexItem key={`${threat.tactic.name}-${index}`}>
-                  <EuiText grow={false} size="s">
-                    <h5>
-                      <EuiLink href={threat.tactic.reference} target="_blank">
-                        {tactic != null ? tactic.text : ''}
-                      </EuiLink>
-                    </h5>
-                    <MyEuiListGroup
-                      flush={false}
-                      bordered={false}
-                      listItems={threat.techniques.map(technique => {
-                        const myTechnique = techniquesOptions.find(t => t.name === technique.name);
-                        return {
-                          label: myTechnique != null ? myTechnique.label : '',
-                          href: technique.reference,
-                          target: '_blank',
-                        };
-                      })}
-                    />
-                  </EuiText>
+                  <EuiLink href={threat.tactic.reference} target="_blank">
+                    {tactic != null ? tactic.text : ''}
+                  </EuiLink>
+                  <EuiFlexGroup gutterSize="none" alignItems="flexStart" direction="column">
+                    {threat.techniques.map(technique => {
+                      const myTechnique = techniquesOptions.find(t => t.name === technique.name);
+                      return (
+                        <EuiFlexItem>
+                          <TechniqueLinkItem
+                            href={technique.reference}
+                            target="_blank"
+                            iconType={ListTreeIcon}
+                            size="xs"
+                            flush="left"
+                          >
+                            {myTechnique != null ? myTechnique.label : ''}
+                          </TechniqueLinkItem>
+                        </EuiFlexItem>
+                      );
+                    })}
+                  </EuiFlexGroup>
                 </EuiFlexItem>
               );
             })}
+            <EuiSpacer />
           </ThreatsEuiFlexGroup>
         ),
       },
@@ -211,17 +222,21 @@ export const buildUrlsDescription = (label: string, values: string[]): ListItems
       {
         title: label,
         description: (
-          <EuiListGroup
-            flush={true}
-            bordered={false}
-            listItems={values.map((val: string) => ({
-              label: val,
-              href: val,
-              iconType: 'link',
-              size: 'xs',
-              target: '_blank',
-            }))}
-          />
+          <EuiFlexGroup gutterSize="none" alignItems="flexStart" direction="column">
+            {values.map((val: string) => (
+              <EuiFlexItem>
+                <ReferenceLinkItem
+                  href={val}
+                  target="_blank"
+                  iconType="link"
+                  size="xs"
+                  flush="left"
+                >
+                  {val}
+                </ReferenceLinkItem>
+              </EuiFlexItem>
+            ))}
+          </EuiFlexGroup>
         ),
       },
     ];

diff --git a/x-pack/legacy/plugins/siem/public/pages/detection_engine/rules/components/mitre/index.tsx b/x-pack/legacy/plugins/siem/public/pages/detection_engine/rules/components/mitre/index.tsx
@@ -5,7 +5,6 @@
  */
 
 import {
-  EuiButtonEmpty,
   EuiButtonIcon,
   EuiFormRow,
   EuiSuperSelect,
@@ -24,6 +23,7 @@ import * as Rulei18n from '../../translations';
 import { FieldHook, getFieldValidityAndErrorMessage } from '../shared_imports';
 import { threatsDefault } from '../step_about_rule/default_value';
 import { IMitreEnterpriseAttack } from '../../types';
+import { MyAddItemButton } from '../add_item_form';
 import { isMitreAttackInvalid } from './helpers';
 import * as i18n from './translations';
 
@@ -134,13 +134,19 @@ export const AddMitreThreat = ({ dataTestSubj, field, idAria, isDisabled }: AddI
 
   const getSelectTechniques = (item: IMitreEnterpriseAttack, index: number, disabled: boolean) => {
     const invalid = isMitreAttackInvalid(item.tactic.name, item.techniques);
+    const options = techniquesOptions.filter(t => t.tactics.includes(kebabCase(item.tactic.name)));
+    const selectedOptions = item.techniques.map(technic => ({
+      ...technic,
+      label: `${technic.name} (${technic.id})`, // API doesn't allow for label field
+    }));
+
     return (
       <EuiFlexGroup gutterSize="s" alignItems="center">
         <EuiFlexItem grow>
           <EuiComboBox
             placeholder={item.tactic.name === 'none' ? '' : i18n.TECHNIQUES_PLACEHOLDER}
-            options={techniquesOptions.filter(t => t.tactics.includes(kebabCase(item.tactic.name)))}
-            selectedOptions={item.techniques}
+            options={options}
+            selectedOptions={selectedOptions}
             onChange={updateTechniques.bind(null, index)}
             isDisabled={disabled || item.tactic.name === 'none'}
             fullWidth={true}
@@ -202,9 +208,9 @@ export const AddMitreThreat = ({ dataTestSubj, field, idAria, isDisabled }: AddI
           {values.length - 1 !== index && <EuiSpacer size="s" />}
         </div>
       ))}
-      <EuiButtonEmpty size="xs" onClick={addItem} isDisabled={isDisabled} iconType="plusInCircle">
+      <MyAddItemButton onClick={addItem} isDisabled={isDisabled}>
         {i18n.ADD_MITRE_ATTACK}
-      </EuiButtonEmpty>
+      </MyAddItemButton>
     </MitreContainer>
   );
 };
diff --git a/.../plugins/siem/public/pages/detection_engine/rules/components/schedule_item_form/index.tsx b/.../plugins/siem/public/pages/detection_engine/rules/components/schedule_item_form/index.tsx
@@ -4,7 +4,14 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { EuiFlexGroup, EuiFlexItem, EuiFieldNumber, EuiFormRow, EuiSelect } from '@elastic/eui';
+import {
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiFieldNumber,
+  EuiFormRow,
+  EuiSelect,
+  EuiFormControlLayout,
+} from '@elastic/eui';
 import { isEmpty } from 'lodash/fp';
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import styled from 'styled-components';
@@ -27,9 +34,20 @@ const timeTypeOptions = [
 ];
 
 const StyledEuiFormRow = styled(EuiFormRow)`
+  max-width: none;
+
   .euiFormControlLayout {
     max-width: 200px !important;
   }
+
+  .euiFormControlLayout__childrenWrapper > *:first-child {
+    box-shadow: none;
+    height: 38px;
+  }
+
+  .euiFormControlLayout:not(:first-child) {
+    border-left: 1px solid ${({ theme }) => theme.eui.euiColorLightShade};
+  }
 `;
 
 const MyEuiSelect = styled(EuiSelect)`
@@ -107,7 +125,7 @@ export const ScheduleItem = ({ dataTestSubj, field, idAria, isDisabled }: Schedu
       data-test-subj={dataTestSubj}
       describedByIds={idAria ? [idAria] : undefined}
     >
-      <EuiFieldNumber
+      <EuiFormControlLayout
         append={
           <MyEuiSelect
             fullWidth={false}
@@ -117,12 +135,9 @@ export const ScheduleItem = ({ dataTestSubj, field, idAria, isDisabled }: Schedu
             {...rest}
           />
         }
-        fullWidth
-        min={0}
-        onChange={onChangeTimeVal}
-        value={timeVal}
-        {...rest}
-      />
+      >
+        <EuiFieldNumber fullWidth min={0} onChange={onChangeTimeVal} value={timeVal} {...rest} />
+      </EuiFormControlLayout>
     </StyledEuiFormRow>
   );
 };