fix: Update getting started cards content and visual design (opensear…

…ch-project#2209) Signed-off-by: Viraj Sanghvi <[email protected]>
mengweieric · Oct 18, 2024 · 03597ac · 03597ac
1 parent e66196f
commit 03597ac
Show file tree

Hide file tree

Showing 2 changed files with 69 additions and 105 deletions.
diff --git a/public/components/overview/components/card_configs.tsx b/public/components/overview/components/card_configs.tsx
@@ -4,13 +4,10 @@
  */
 
 import { i18n } from '@osd/i18n';
+import { EuiI18n, EuiIcon, EuiTextColor } from '@elastic/eui';
+import React from 'react';
 import {
   observabilityGettingStartedID,
-  observabilityMetricsID,
-  observabilityTracesNewNavID,
-  observabilityServicesNewNavID,
-  alertingPluginID,
-  anomalyDetectionPluginID,
   tutorialSampleDataPluginId,
 } from '../../../../common/constants/shared';
 
@@ -19,116 +16,92 @@ export interface GettingStartedConfig {
   order: number;
   title: string;
   description: string;
-  footer: string;
+  footer: React.ReactElement;
   url: string;
   path: string;
+  icon: React.ReactElement<EuiIcon>;
 }
 
-const GETTING_STARTED_CONFIG: GettingStartedConfig = {
-  id: 'getting_started',
-  order: 1,
-  title: i18n.translate('observability.overview.card.gettingStarted.title', {
-    defaultMessage: 'Set up your Observability workspace',
-  }),
-  description: 'Get started by collecting and analyzing your metrics, logs, and traces.',
-  footer: 'Getting started guide',
-  url: observabilityGettingStartedID,
-  path: '#/',
-};
-
 const SAMPLEDATA_CONFIG: GettingStartedConfig = {
   id: 'sample_data',
-  order: 2,
+  order: 10,
+  icon: <EuiIcon type="functionAdd" size="l" color="primary" />,
+  title: '',
   description: i18n.translate('home.sampleData.card.description', {
-    defaultMessage: 'You can install sample data to experiment with OpenSearch Dashboards.',
-  }),
-  title: i18n.translate('home.sampleData.card.title', {
-    defaultMessage: 'Try OpenSearch',
+    defaultMessage: 'Install sample data to experiment with OpenSearch.',
   }),
+  footer: (
+    <EuiTextColor color="subdued">
+      <EuiI18n
+        token="workspace.observability_overview.sample_data.card.footer"
+        default="Sample datasets"
+      />
+    </EuiTextColor>
+  ),
   url: tutorialSampleDataPluginId,
-  footer: 'Sample datasets',
-  path: '#/',
-};
-
-const DISCOVER_CONFIG: GettingStartedConfig = {
-  id: 'discover',
-  order: 3,
-  title: i18n.translate('observability.overview.card.discover.title', {
-    defaultMessage: 'Discover insights',
-  }),
-  description: 'Uncover logs with raw data exploration.',
-  footer: 'Discover',
-  url: 'data-explorer',
-  path: '/discover',
-};
-
-const METRICS_CONFIG: GettingStartedConfig = {
-  id: 'metrics',
-  order: 4,
-  title: i18n.translate('observability.overview.card.metrics.title', {
-    defaultMessage: 'Monitor system performance',
-  }),
-  description: 'Transform logs into actionable visualizations by extracting metrics.',
-  footer: 'Metrics',
-  url: observabilityMetricsID,
   path: '#/',
 };
 
-const TRACES_CONFIG: GettingStartedConfig = {
-  id: 'traces',
-  order: 5,
-  title: i18n.translate('observability.overview.card.traces.title', {
-    defaultMessage: 'Identify performance issues',
-  }),
-  description: 'Analyze performance bottlenecks using event flow visualizations.',
-  footer: 'Traces',
-  url: observabilityTracesNewNavID,
-  path: '#/',
-};
-
-const SERVICES_CONFIG: GettingStartedConfig = {
-  id: 'services',
-  order: 6,
-  title: i18n.translate('observability.overview.card.services.title', {
-    defaultMessage: 'Monitor service health',
+const GETTING_STARTED_CONFIG: GettingStartedConfig = {
+  id: 'getting_started',
+  order: 20,
+  icon: <EuiIcon type="rocket" size="l" color="primary" />,
+  title: '',
+  description: i18n.translate('workspace.observability_overview.getting_started.card.description', {
+    defaultMessage: 'Get started collecting and analyzing data.',
   }),
-  description: 'Identify service performance issues with comprehensive monitoring and analysis.',
-  footer: 'Services',
-  url: observabilityServicesNewNavID,
+  footer: (
+    <EuiTextColor color="subdued">
+      <EuiI18n
+        token="workspace.observability_overview.getting_started.card.footer"
+        default="Get started guide"
+      />
+    </EuiTextColor>
+  ),
+  url: observabilityGettingStartedID,
   path: '#/',
 };
 
-const ALERTS_CONFIG: GettingStartedConfig = {
-  id: 'alerts',
-  order: 7,
-  title: i18n.translate('observability.overview.card.alerts.title', {
-    defaultMessage: 'Get notified',
+const DISCOVER_CONFIG: GettingStartedConfig = {
+  id: 'discover',
+  order: 30,
+  icon: <EuiIcon type="compass" size="l" color="primary" />,
+  title: '',
+  description: i18n.translate('workspace.observability_overview.discover.card.description', {
+    defaultMessage: 'Explore data to uncover and discover insights.',
   }),
-  description: 'Receive timely notifications by configuring alert triggers.',
-  footer: 'Alerting',
-  url: alertingPluginID,
-  path: '#/',
+  footer: (
+    <EuiTextColor color="subdued">
+      <EuiI18n token="workspace.observability_overview.discover.card.footer" default="Discover" />
+    </EuiTextColor>
+  ),
+  url: 'data-explorer',
+  path: '/discover',
 };
 
-const ANOMALY_CONFIG: GettingStartedConfig = {
-  id: 'anomaly',
-  order: 8,
-  title: i18n.translate('observability.overview.card.anomaly.title', {
-    defaultMessage: 'Detect anomalies in your data',
+const DASHBOARDS_CONFIG: GettingStartedConfig = {
+  id: 'dashboards',
+  order: 40,
+  icon: <EuiIcon type="dashboard" size="l" color="primary" />,
+  title: '',
+  description: i18n.translate('workspace.observability_overview.dashboards.card.description', {
+    defaultMessage: 'Monitor and explore your data using dynamic data visualization tools.',
   }),
-  description: 'Gain near real-time anomaly detection using the Random Cut Forest (RCF) algorithm.',
-  footer: 'Anomaly Detection',
-  url: anomalyDetectionPluginID,
-  path: '#/',
+  footer: (
+    <EuiTextColor color="subdued">
+      <EuiI18n
+        token="workspace.observability_overview.dashboards.card.footer"
+        default="Dashboards"
+      />
+    </EuiTextColor>
+  ),
+  url: 'dashboards',
+  path: '/',
 };
 
 export const cardConfigs = [
-  GETTING_STARTED_CONFIG,
   SAMPLEDATA_CONFIG,
+  GETTING_STARTED_CONFIG,
   DISCOVER_CONFIG,
-  METRICS_CONFIG,
-  TRACES_CONFIG,
-  SERVICES_CONFIG,
-  ALERTS_CONFIG,
-  ANOMALY_CONFIG,
+  DASHBOARDS_CONFIG,
 ];
diff --git a/public/components/overview/home.tsx b/public/components/overview/home.tsx
@@ -5,7 +5,6 @@
 
 import React, { ReactNode, useEffect, useState } from 'react';
 import { HashRouter, Route, Switch } from 'react-router-dom';
-import { FormattedMessage } from '@osd/i18n/react';
 import { useObservable } from 'react-use';
 import { EMPTY } from 'rxjs';
 import {
@@ -74,19 +73,11 @@ export const Home = () => {
             order: card.order,
             description: card.description,
             title: card.title,
+            onClick: () => coreRefs.application?.navigateToApp(card.url, { path: card.path }),
+            getFooter: () => card.footer,
+            getIcon: () => card.icon,
             cardProps: {
-              titleSize: 's',
-              titleElement: 'h4',
-              selectable: {
-                children: (
-                  <FormattedMessage
-                    id="home.sampleData.card.footer"
-                    defaultMessage={card.footer || 'Documentation'}
-                  />
-                ),
-                onClick: () => coreRefs.application?.navigateToApp(card.url, { path: card.path }),
-                isSelected: false,
-              },
+              className: 'usecaseOverviewGettingStartedCard',
             },
           }),
           getTargetArea: () => HOME_CONTENT_AREAS.GET_STARTED,