Add a details button to open the findings flyout from the correlation…

…s page. opensearch-project#564 Signed-off-by: Jovan Cvetkovic <[email protected]>
jovancacvetkovic · May 3, 2023 · 18b6a54 · 18b6a54
1 parent eeb6b52
commit 18b6a54
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 3 deletions.
diff --git a/public/app.scss b/public/app.scss
@@ -15,7 +15,9 @@ $euiTextColor: $euiColorDarkestShade !default;
 @import "./pages/Overview/components/Widgets/WidgetContainer.scss";
 @import "./pages/Main/components/Callout.scss";
 @import "./pages/Detectors/components/ReviewFieldMappings/ReviewFieldMappings.scss";
-@import "./pages/Correlations//Correlations.scss";
+@import "./pages/Correlations/Correlations.scss";
+@import "./pages/Correlations/components/FindingCard.scss";
+
 
 .selected-radio-panel {
   background-color: tintOrShade($euiColorPrimary, 90%, 70%);

diff --git a/public/pages/Correlations/components/FindingCard.scss b/public/pages/Correlations/components/FindingCard.scss
@@ -0,0 +1,9 @@
+.finding-card-header {
+  .euiFlexItem:nth-child(2) {
+    margin-right: 6px;
+  }
+
+  .euiFlexItem:nth-child(3) {
+    margin-left: 6px;
+  }
+}
diff --git a/public/pages/Correlations/components/FindingCard.tsx b/public/pages/Correlations/components/FindingCard.tsx
@@ -13,6 +13,7 @@ import {
   EuiSpacer,
   EuiBadge,
   EuiHorizontalRule,
+  EuiToolTip,
 } from '@elastic/eui';
 import { rulePriorityBySeverity } from '../../CreateDetector/components/DefineDetector/components/DetectionRules/DetectionRulesTable';
 import {
@@ -43,10 +44,20 @@ export const FindingCard: React.FC<FindingCardProps> = ({
 }) => {
   const correlationHeader = correlationData ? (
     <>
-      <EuiFlexGroup justifyContent="spaceBetween">
-        <EuiFlexItem grow={false}>
+      <EuiFlexGroup className={'finding-card-header'}>
+        <EuiFlexItem grow={true}>
           <EuiText style={{ fontSize: 22, fontWeight: 300 }}>{correlationData.score}</EuiText>
         </EuiFlexItem>
+        <EuiFlexItem grow={false}>
+          <EuiToolTip content={'View finding details'}>
+            <EuiButtonIcon
+              aria-label={'View finding details'}
+              data-test-subj={`view-details-icon`}
+              iconType={'expand'}
+              onClick={() => {}}
+            />
+          </EuiToolTip>
+        </EuiFlexItem>
         <EuiFlexItem grow={false}>
           <EuiButtonIcon
             iconType={'inspect'}