UX updates for correlations (#619)

* minor UX updates Signed-off-by: Amardeepsingh Siglani <[email protected]> * ux improvements for correlations Signed-off-by: Amardeepsingh Siglani <[email protected]> * made more refactors for ux polish Signed-off-by: Amardeepsingh Siglani <[email protected]> * updated snapshots Signed-off-by: Amardeepsingh Siglani <[email protected]> * addressed comments in PR Signed-off-by: Amardeepsingh Siglani <[email protected]> --------- Signed-off-by: Amardeepsingh Siglani <[email protected]> (cherry picked from commit 205ee18)
opensearch-project · Jun 22, 2023 · b03751b · b03751b
1 parent 451861e
commit b03751b
Show file tree

Hide file tree

Showing 18 changed files with 499 additions and 151 deletions.
diff --git a/public/pages/Correlations/components/CorrelationGraph.tsx b/public/pages/Correlations/components/CorrelationGraph.tsx
@@ -37,7 +37,7 @@ export const CorrelationGraph: React.FC<CorrelationGraphProps> = ({
       graph={{ nodes, edges }}
       options={options}
       events={events}
-      style={{ border: '1px solid', backgroundColor: '#ffffff' }}
+      style={{ backgroundColor: '#ffffff' }}
       getNetwork={getNetwork}
     />
   );

diff --git a/public/pages/Correlations/components/ExperimentalBanner.tsx b/public/pages/Correlations/components/ExperimentalBanner.tsx
@@ -14,15 +14,16 @@ export const CorrelationsExperimentalBanner = () => {
           The feature is experimental and should not be used in a production environment. While we
           are working on the finishing touches, share your ideas and feedback on&nbsp;
           <EuiLink target="_blank" href="https://forum.opensearch.org/">
-            forum.opensearch.org.
+            forum.opensearch.org
           </EuiLink>
-          For more information see &nbsp;
+          . For more information see &nbsp;
           <EuiLink
             href="https://opensearch.org/docs/latest/security-analytics/index/"
             target="_blank"
           >
-            Security Analytics Documentation.
+            Security Analytics Documentation
           </EuiLink>
+          .
         </p>
       </EuiCallOut>
       <EuiSpacer />

diff --git a/public/pages/Correlations/components/FilterGroup.tsx b/public/pages/Correlations/components/FilterGroup.tsx
@@ -23,6 +23,7 @@ export interface LogTypeFilterGroupProps {
 
 export const FilterGroup: React.FC<LogTypeFilterGroupProps> = ({ groupName, items, setItems }) => {
   const [isPopoverOpen, setIsPopoverOpen] = useState(false);
+  const [showActiveFilters, setShowActiveFilters] = useState(false);
 
   const onButtonClick = () => {
     setIsPopoverOpen(!isPopoverOpen);
@@ -55,16 +56,18 @@ export const FilterGroup: React.FC<LogTypeFilterGroupProps> = ({ groupName, item
     }
 
     setItems(newItems);
+    setShowActiveFilters(true);
   }
 
   const button = (
     <EuiFilterButton
       iconType="arrowDown"
       onClick={onButtonClick}
       isSelected={isPopoverOpen}
-      numFilters={items.length}
-      hasActiveFilters={!!items.find((item) => item.checked === 'on')}
-      numActiveFilters={items.filter((item) => item.checked === 'on').length}
+      hasActiveFilters={showActiveFilters && !!items.find((item) => item.checked === 'on')}
+      numActiveFilters={
+        showActiveFilters ? items.filter((item) => item.checked === 'on').length : undefined
+      }
     >
       {groupName}
     </EuiFilterButton>

diff --git a/public/pages/Correlations/components/FindingCard.tsx b/public/pages/Correlations/components/FindingCard.tsx
@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import React, { useCallback } from 'react';
+import React from 'react';
 import {
   EuiPanel,
   EuiFlexGroup,
@@ -14,8 +14,8 @@ import {
   EuiBadge,
   EuiHorizontalRule,
   EuiToolTip,
+  EuiDescriptionList,
 } from '@elastic/eui';
-import { rulePriorityBySeverity } from '../../CreateDetector/components/DefineDetector/components/DetectionRules/DetectionRulesTable';
 import {
   getAbbrFromLogType,
   getSeverityLabel,
@@ -32,7 +32,7 @@ export interface FindingCardProps {
   detectionRule: { name: string; severity: string };
   correlationData?: {
     // ruleName: string;
-    score: number;
+    score: string;
     onInspect: (findingId: string, logType: string) => void;
   };
   finding: CorrelationFinding;
@@ -76,24 +76,22 @@ export const FindingCard: React.FC<FindingCardProps> = ({
     </>
   ) : null;
 
-  const createTextRow = useCallback((label: string, value: string) => {
-    return (
-      <EuiFlexGroup justifyContent="spaceBetween" alignItems="center" gutterSize="s">
-        <EuiFlexItem grow={false}>
-          <EuiText size="s">{label}</EuiText>
-        </EuiFlexItem>
-        <EuiFlexItem grow={false}>
-          <EuiText>{value}</EuiText>
-        </EuiFlexItem>
-      </EuiFlexGroup>
-    );
-  }, []);
+  const list = [
+    {
+      title: 'Generated',
+      description: timestamp,
+    },
+    {
+      title: 'Detection rule',
+      description: detectionRule.name,
+    },
+  ];
 
   return (
     <EuiPanel>
       {correlationHeader}
       <EuiFlexGroup justifyContent="flexStart" alignItems="center">
-        <EuiFlexItem grow={2} style={{ maxWidth: 120 }}>
+        <EuiFlexItem grow={1} style={{ maxWidth: 120 }}>
           <div style={{ position: 'relative' }}>
             <div
               style={{
@@ -105,6 +103,8 @@ export const FindingCard: React.FC<FindingCardProps> = ({
                 fontSize: 10,
                 lineHeight: '35px',
                 textAlign: 'center',
+                borderColor: '#98A2B3',
+                color: '#98A2B3',
               }}
             >
               {getAbbrFromLogType(logType)}
@@ -115,10 +115,10 @@ export const FindingCard: React.FC<FindingCardProps> = ({
                   position: 'absolute',
                   transform: 'translateY(-100%)',
                   left: '33px',
+                  color: getSeverityColor(detectionRule.severity).text,
                 }}
-                color={getSeverityColor(detectionRule.severity)}
+                color={getSeverityColor(detectionRule.severity).background}
               >
-                {rulePriorityBySeverity[detectionRule.severity]}{' '}
                 {getSeverityLabel(detectionRule.severity)}
               </EuiBadge>
             ) : null}
@@ -142,8 +142,7 @@ export const FindingCard: React.FC<FindingCardProps> = ({
       </EuiFlexGroup>
       {correlationHeader ? <EuiHorizontalRule margin="s" /> : null}
       <EuiSpacer size="m" />
-      {createTextRow('Generated', timestamp)}
-      {createTextRow('Detection rule', detectionRule.name)}
+      <EuiDescriptionList type="column" textStyle="reverse" listItems={list} />
     </EuiPanel>
   );
 };
diff --git a/public/pages/Correlations/containers/CorrelationsContainer.tsx b/public/pages/Correlations/containers/CorrelationsContainer.tsx
@@ -32,6 +32,7 @@ import {
   EuiEmptyPrompt,
   EuiButton,
   EuiBadge,
+  EuiFilterGroup,
 } from '@elastic/eui';
 import { CorrelationsExperimentalBanner } from '../components/ExperimentalBanner';
 import { FilterItem, FilterGroup } from '../components/FilterGroup';
@@ -251,6 +252,8 @@ export class Correlations extends React.Component<CorrelationsProps, Correlation
   }
 
   private addNode(nodes: any[], finding: CorrelationFinding) {
+    const borderColor = getSeverityColor(finding.detectionRule.severity).background;
+
     nodes.push({
       id: finding.id,
       label: `<b>${getAbbrFromLogType(
@@ -259,7 +262,15 @@ export class Correlations extends React.Component<CorrelationsProps, Correlation
       title: this.createNodeTooltip(finding),
       color: {
         background: 'white',
-        border: getSeverityColor(finding.detectionRule.severity),
+        border: borderColor,
+        highlight: {
+          background: '#e7f5ff',
+          border: borderColor,
+        },
+        hover: {
+          background: '#e7f5ff',
+          border: borderColor,
+        },
       },
       widthConstraint: {
         minimum: 50,
@@ -279,15 +290,18 @@ export class Correlations extends React.Component<CorrelationsProps, Correlation
       to: f2.id,
       id: `${f1.id}:${f2.id}`,
       chosen: false,
+      color: '#98A2B3', //ouiColorMediumShade,
+      label: f1.correlationScore || f2.correlationScore || '',
     });
   }
 
   private createNodeTooltip = ({ detectionRule, timestamp, logType }: CorrelationFinding) => {
+    const { text, background } = getSeverityColor(detectionRule.severity);
     const tooltipContent = (
       <div style={{ backgroundColor: '#535353', color: '#ffffff', padding: '8px' }}>
         <EuiFlexGroup alignItems="center">
           <EuiFlexItem grow={false}>
-            <EuiBadge color={getSeverityColor(detectionRule.severity)}>
+            <EuiBadge style={{ color: text }} color={background}>
               {getSeverityLabel(detectionRule.severity)}
             </EuiBadge>
           </EuiFlexItem>
@@ -457,7 +471,7 @@ export class Correlations extends React.Component<CorrelationsProps, Correlation
                       timestamp={finding.timestamp}
                       detectionRule={finding.detectionRule}
                       correlationData={{
-                        score: finding.correlationScore || 0,
+                        score: finding.correlationScore || 'N/A',
                         onInspect: this.onFindingInspect,
                       }}
                       finding={finding}
@@ -483,20 +497,20 @@ export class Correlations extends React.Component<CorrelationsProps, Correlation
             <EuiPanel>
               <EuiFlexGroup wrap={true} justifyContent="spaceBetween">
                 <EuiFlexItem>
-                  <EuiFlexGroup wrap={true} gutterSize="xs">
-                    <EuiFlexItem grow={false}>
-                      <FilterGroup
-                        groupName="Severity"
-                        items={this.state.severityFilterOptions}
-                        setItems={this.onSeverityFilterChange}
-                      />
-                    </EuiFlexItem>
+                  <EuiFlexGroup gutterSize="xs" wrap={false}>
                     <EuiFlexItem grow={false}>
-                      <FilterGroup
-                        groupName="Log types"
-                        items={this.state.logTypeFilterOptions}
-                        setItems={this.onLogTypeFilterChange}
-                      />
+                      <EuiFilterGroup>
+                        <FilterGroup
+                          groupName="Severity"
+                          items={this.state.severityFilterOptions}
+                          setItems={this.onSeverityFilterChange}
+                        />
+                        <FilterGroup
+                          groupName="Log types"
+                          items={this.state.logTypeFilterOptions}
+                          setItems={this.onLogTypeFilterChange}
+                        />
+                      </EuiFilterGroup>
                     </EuiFlexItem>
                     <EuiFlexItem grow={false}>
                       <EuiButtonEmpty onClick={this.resetFilters}>Reset filters</EuiButtonEmpty>
@@ -529,7 +543,7 @@ export class Correlations extends React.Component<CorrelationsProps, Correlation
                 {ruleSeverity.map((sev, idx) => (
                   <EuiFlexItem grow={false} key={idx}>
                     <EuiText>
-                      <EuiIcon type="dot" color={sev.color} /> {sev.value}
+                      <EuiIcon type="dot" color={sev.color.background} /> {sev.value}
                     </EuiText>
                   </EuiFlexItem>
                 ))}

diff --git a/public/pages/Correlations/utils/constants.tsx b/public/pages/Correlations/utils/constants.tsx
@@ -62,7 +62,7 @@ export const defaultSeverityFilterItemOptions: FilterItem[] = Object.values(rule
     return {
       name: (
         <p>
-          <EuiIcon type={'dot'} color={sev.color} /> {`${sev.priority} ${sev.name}`}
+          <EuiIcon type={'dot'} color={sev.color.background} /> {`${sev.name}`}
         </p>
       ),
       id: sev.value,
@@ -92,5 +92,10 @@ export const getSeverityLabel = (sev: string) => {
 };
 
 export const getSeverityColor = (sev: string) => {
-  return ruleSeverity.find((severity) => severity.value === sev)?.color || 'black';
+  return (
+    ruleSeverity.find((severity) => severity.value === sev.toLowerCase())?.color || {
+      background: 'white',
+      text: 'black',
+    }
+  );
 };
diff --git a/public/pages/Correlations/utils/helpers.tsx b/public/pages/Correlations/utils/helpers.tsx
@@ -14,6 +14,7 @@ import {
 import { Search } from '@opensearch-project/oui/src/eui_components/basic_table';
 import { ruleTypes } from '../../Rules/utils/constants';
 import { FieldClause } from '@opensearch-project/oui/src/eui_components/search_bar/query/ast';
+import { formatRuleType } from '../../../utils/helpers';
 
 export const getCorrelationRulesTableColumns = (
   onRuleNameClick: (rule: CorrelationRule) => void,
@@ -32,7 +33,9 @@ export const getCorrelationRulesTableColumns = (
     {
       name: 'Log types',
       render: (ruleItem: CorrelationRule) => {
-        const badges = [...new Set(ruleItem.queries?.map((query) => query.logType))];
+        const badges = [
+          ...new Set(ruleItem.queries?.map((query) => formatRuleType(query.logType))),
+        ];
         return (
           <>
             {badges.map((badge) => (
@@ -78,7 +81,7 @@ export const getCorrelationRulesTableSearchConfig = (
 ): Search => {
   return {
     box: {
-      placeholder: 'Search by rule name, log type?',
+      placeholder: 'Search by rule name, log type',
     },
     onChange: (args: ArgsWithQuery | ArgsWithError) => {
       if (!args.error) {