From 1b2e311537a96ac1b5efb786513bad222251077b Mon Sep 17 00:00:00 2001 From: Viraj Sanghvi Date: Thu, 17 Oct 2024 06:19:11 +0000 Subject: [PATCH] fix: Update getting started cards content and visual design Signed-off-by: Viraj Sanghvi --- .../overview/components/card_configs.tsx | 157 ++++++++---------- public/components/overview/home.tsx | 17 +- 2 files changed, 69 insertions(+), 105 deletions(-) diff --git a/public/components/overview/components/card_configs.tsx b/public/components/overview/components/card_configs.tsx index 2ebcbbb73..41468ea4d 100644 --- 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; } -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: , + 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: ( + + + + ), 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: , + 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: ( + + + + ), + 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: , + 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: ( + + + + ), + 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: , + 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: ( + + + + ), + 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 index 141495581..689eca05b 100644 --- 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: ( - - ), - onClick: () => coreRefs.application?.navigateToApp(card.url, { path: card.path }), - isSelected: false, - }, + className: 'usecaseOverviewGettingStartedCard', }, }), getTargetArea: () => HOME_CONTENT_AREAS.GET_STARTED,