From 2b33ca28223dae9419167b8e524da0f17828526b Mon Sep 17 00:00:00 2001
From: Viraj Sanghvi <virajs@amazon.com>
Date: Fri, 18 Oct 2024 09:32:02 -0700
Subject: [PATCH] fix: Update getting started cards content and visual design
 (#1188)

Signed-off-by: Viraj Sanghvi <virajs@amazon.com>
---
 public/pages/Overview/utils/constants.ts | 87 ++++++++----------------
 1 file changed, 30 insertions(+), 57 deletions(-)

diff --git a/public/pages/Overview/utils/constants.ts b/public/pages/Overview/utils/constants.ts
index 8a608796..071e6e59 100644
--- a/public/pages/Overview/utils/constants.ts
+++ b/public/pages/Overview/utils/constants.ts
@@ -3,12 +3,11 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { EuiCardProps, EuiStatProps } from '@elastic/eui';
+import { EuiCardProps, EuiStatProps, EuiIcon, EuiTextColor } from '@elastic/eui';
+import React from 'react';
 import {
-  CORRELATIONS_RULE_NAV_ID,
   DETECTORS_NAV_ID,
   GET_STARTED_NAV_ID,
-  THREAT_ALERTS_NAV_ID,
   THREAT_INTEL_NAV_ID,
 } from '../../../utils/constants';
 import { getApplication } from '../../../services/utils/constants';
@@ -22,70 +21,44 @@ export const moreLink = 'https://opensearch.org/docs/latest/security-analytics/'
 
 export const getOverviewsCardsProps = (): EuiCardProps[] => [
   {
-    title: 'Configure Security Analytics',
-    description: 'Set up tools and components to get started.',
-    selectable: {
-      onClick: () => {
-        getApplication().navigateToApp(GET_STARTED_NAV_ID);
-      },
-      children: 'Getting started guide',
-      isDisabled: false,
+    icon: React.createElement(EuiIcon, { type: 'rocket', size: "l", color: "primary" }),
+    title: '',
+    description: 'Configure Security Analytics tools and components to get started.',
+    onClick: () => {
+      getApplication().navigateToApp(GET_STARTED_NAV_ID);
     },
+    footer: React.createElement(EuiTextColor, { color: 'subdued' }, 'Get started guide'),
+    className: 'usecaseOverviewGettingStartedCard',
   },
   {
-    title: 'Uncover security findings',
-    description: 'Identify security threats in your log data with detection rules.',
-    selectable: {
-      onClick: () => {
-        getApplication().navigateToApp(DETECTORS_NAV_ID);
-      },
-      children: 'Threat detectors',
-      isDisabled: false,
-    },
-  },
-  {
-    title: 'Discover insights',
-    description: 'Explore data to uncover insights.',
-    selectable: {
-      onClick: () => {
-        getApplication().navigateToApp('discover');
-      },
-      children: 'Discover',
-      isDisabled: false,
+    icon: React.createElement(EuiIcon, { type: 'compass', size: "l", color: "primary" }),
+    title: '',
+    description: 'Explore data to uncover and discover insights.',
+    onClick: () => {
+      getApplication().navigateToApp('discover');
     },
+    footer: React.createElement(EuiTextColor, { color: 'subdued' }, 'Discover'),
+    className: 'usecaseOverviewGettingStartedCard',
   },
   {
-    title: 'Get notified',
-    description: 'Receive timely notifications with detector-driven alerts.',
-    selectable: {
-      onClick: () => {
-        getApplication().navigateToApp(THREAT_ALERTS_NAV_ID);
-      },
-      children: 'Threat alerts',
-      isDisabled: false,
-    },
-  },
-  {
-    title: 'Correlate events',
-    description: 'Detect multi-system threats with correlation rule builder.',
-    selectable: {
-      onClick: () => {
-        getApplication().navigateToApp(CORRELATIONS_RULE_NAV_ID);
-      },
-      children: 'Correlation rules',
-      isDisabled: false,
+    icon: React.createElement(EuiIcon, { type: 'pulse', size: "l", color: "primary" }),
+    title: '',
+    description: 'Identify security threats in your log data with detection rules.',
+    onClick: () => {
+      getApplication().navigateToApp(DETECTORS_NAV_ID);
     },
+    footer: React.createElement(EuiTextColor, { color: 'subdued' }, 'Threat detection'),
+    className: 'usecaseOverviewGettingStartedCard',
   },
   {
-    title: 'Scan your logs',
-    description: 'Identify malicious actors from known indicators of compromise.',
-    selectable: {
-      onClick: () => {
-        getApplication().navigateToApp(THREAT_INTEL_NAV_ID);
-      },
-      children: ' Threat intelligence',
-      isDisabled: false,
+    icon: React.createElement(EuiIcon, { type: 'radar', size: "l", color: "primary" }),
+    title: '',
+    description: 'Scan your log data for malicious actors from known indicators of compromise.',
+    onClick: () => {
+      getApplication().navigateToApp(THREAT_INTEL_NAV_ID);
     },
+    footer: React.createElement(EuiTextColor, { color: 'subdued' }, 'Threat intelligence'),
+    className: 'usecaseOverviewGettingStartedCard',
   },
 ];