update overview page, redirection bug, change text

Signed-off-by: Adam Tackett <tackadam@amazon.com>
opensearch-project · Sep 9, 2024 · 5b3741f · 5b3741f
1 parent 462b8f5
commit 5b3741f
Show file tree

Hide file tree

Showing 6 changed files with 61 additions and 24 deletions.
diff --git a/common/constants/shared.ts b/common/constants/shared.ts
@@ -33,6 +33,8 @@ export const DATACONNECTIONS_ENDPOINT = '/_plugins/_query/_datasources';
 export const JOBS_ENDPOINT_BASE = '/_plugins/_async_query';
 export const JOB_RESULT_ENDPOINT = '/result';
 
+export const IMPORT_SAMPLE_DATA_APP_ID = 'import_sample_data';
+
 export const observabilityID = 'observability-logs';
 export const observabilityTitle = 'Observability';
 export const observabilityPluginOrder = 1500;

diff --git a/public/components/getting_started/components/getting_started_collectData.tsx b/public/components/getting_started/components/getting_started_collectData.tsx
@@ -103,7 +103,7 @@ export const CollectAndShipData: React.FC<CollectAndShipDataProps> = ({
     setSelectedWorkflow('');
     setGettingStarted(null);
     setWorkflows([]);
-    onCardSelectionChange(value === 'Use a sample dataset');
+    onCardSelectionChange(value === 'Configure use-case based content');
 
     if (value === 'Configure collectors') {
       setCollectorOptions([
@@ -349,20 +349,20 @@ export const CollectAndShipData: React.FC<CollectAndShipDataProps> = ({
           <EuiFlexItem>
             <EuiCheckableCard
               id="use_sample_dataset"
-              label="Use a sample dataset"
+              label="Configure use-case based content"
               checkableType="radio"
-              checked={selectedCard === 'Use a sample dataset'}
+              checked={selectedCard === 'Configure use-case based content'}
               onChange={() => {
-                handleCollectionMethodChange('Use a sample dataset');
-                setSelectedCard('Use a sample dataset');
+                handleCollectionMethodChange('Configure use-case based content');
+                setSelectedCard('Configure use-case based content');
               }}
             >
               Explore with a log dataset
             </EuiCheckableCard>
           </EuiFlexItem>
         </EuiFlexGroup>
         <EuiSpacer size="m" />
-        {collectionMethod === 'Use a sample dataset' ? (
+        {collectionMethod === 'Configure use-case based content' ? (
           <IntegrationCards />
         ) : (
           <>

diff --git a/public/components/getting_started/components/getting_started_queryAndAnalyze.tsx b/public/components/getting_started/components/getting_started_queryAndAnalyze.tsx
@@ -18,6 +18,7 @@ import {
 } from '@elastic/eui';
 import { coreRefs } from '../../../../public/framework/core_refs';
 import { fetchDashboardIds, fetchIndexPatternIds, redirectToDashboards } from './utils';
+import { getWorkspaceIdFromUrl } from '../../../../../../src/core/public/utils/index';
 
 interface Pattern {
   id: string;
@@ -75,8 +76,15 @@ export const QueryAndAnalyze: React.FC<QueryAndAnalyzeProps> = ({
       ? `mds-${selectedDataSourceId}-objectId-${patternId}`
       : patternId;
 
+    const currentUrl = window.location.href;
+    const workspaceId = getWorkspaceIdFromUrl(currentUrl, coreRefs?.http!.basePath.getBasePath());
+
+    const workspacePatternId = workspaceId
+      ? `workspaceId-${workspaceId}-${finalPatternId}`
+      : finalPatternId;
+
     coreRefs?.application!.navigateToApp('data-explorer', {
-      path: `discover#?_a=(discover:(columns:!(_source),isDirty:!f,sort:!()),metadata:(indexPattern:'${finalPatternId}',view:discover))&_q=(filters:!(),query:(language:kuery,query:''))&_g=(filters:!(),refreshInterval:(pause:!t,value:0),time:(from:now-15m,to:now))`,
+      path: `discover#?_a=(discover:(columns:!(_source),isDirty:!f,sort:!()),metadata:(indexPattern:'${workspacePatternId}',view:discover))&_q=(filters:!(),query:(language:kuery,query:''))&_g=(filters:!(),refreshInterval:(pause:!t,value:0),time:(from:now-15m,to:now))`,
     });
   };
 
@@ -85,8 +93,16 @@ export const QueryAndAnalyze: React.FC<QueryAndAnalyzeProps> = ({
       ? `mds-${selectedDataSourceId}-objectId-${dashboardId}`
       : dashboardId;
 
+    const currentUrl = window.location.href;
+    const workspaceId = getWorkspaceIdFromUrl(currentUrl, coreRefs?.http!.basePath.getBasePath());
+
+    const workspaceDashboardId = workspaceId
+      ? `workspaceId-${workspaceId}-${finalDashboardId}`
+      : finalDashboardId;
+    const dashboardUrl = `#/view/${workspaceDashboardId}`;
+
     coreRefs?.application!.navigateToApp('dashboards', {
-      path: `#/view/${finalDashboardId}`,
+      path: dashboardUrl,
     });
   };
 

diff --git a/public/components/integrations/components/integration_overview_panel.tsx b/public/components/integrations/components/integration_overview_panel.tsx
@@ -36,7 +36,7 @@ export function IntegrationOverview(props: any) {
           data-test-subj="try-it-button"
           data-click-metric-element="integrations.create_from_try_it"
         >
-          Try It
+          Try with sample data
         </EuiSmallButton>
       </EuiFlexItem>
       <EuiFlexItem grow={false}>

diff --git a/public/components/overview/components/card_configs.tsx b/public/components/overview/components/card_configs.tsx
@@ -12,6 +12,7 @@ import {
   alertingPluginID,
   anomalyDetectionPluginID,
   discoverPluginID,
+  IMPORT_SAMPLE_DATA_APP_ID,
 } from '../../../../common/constants/shared';
 
 export interface GettingStartedConfig {
@@ -23,9 +24,22 @@ export interface GettingStartedConfig {
   url: string;
 }
 
+const SAMPLEDATA_CONFIG: GettingStartedConfig = {
+  id: 'sample_data',
+  order: 1,
+  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',
+  }),
+  url: IMPORT_SAMPLE_DATA_APP_ID,
+  footer: 'Sample Datasets',
+};
+
 const GETTING_STARTED_CONFIG: GettingStartedConfig = {
   id: 'getting_started',
-  order: 1,
+  order: 2,
   title: i18n.translate('observability.overview.card.gettingStarted.title', {
     defaultMessage: 'Add your data',
   }),
@@ -36,7 +50,7 @@ const GETTING_STARTED_CONFIG: GettingStartedConfig = {
 
 const DISCOVER_CONFIG: GettingStartedConfig = {
   id: 'discover',
-  order: 2,
+  order: 3,
   title: i18n.translate('observability.overview.card.discover.title', {
     defaultMessage: 'Discover insights',
   }),
@@ -47,7 +61,7 @@ const DISCOVER_CONFIG: GettingStartedConfig = {
 
 const METRICS_CONFIG: GettingStartedConfig = {
   id: 'metrics',
-  order: 3,
+  order: 4,
   title: i18n.translate('observability.overview.card.metrics.title', {
     defaultMessage: 'Monitor system performance',
   }),
@@ -58,7 +72,7 @@ const METRICS_CONFIG: GettingStartedConfig = {
 
 const TRACES_CONFIG: GettingStartedConfig = {
   id: 'traces',
-  order: 4,
+  order: 5,
   title: i18n.translate('observability.overview.card.traces.title', {
     defaultMessage: 'Identify performance issues',
   }),
@@ -69,7 +83,7 @@ const TRACES_CONFIG: GettingStartedConfig = {
 
 const SERVICES_CONFIG: GettingStartedConfig = {
   id: 'services',
-  order: 5,
+  order: 6,
   title: i18n.translate('observability.overview.card.services.title', {
     defaultMessage: 'Monitor service health',
   }),
@@ -80,7 +94,7 @@ const SERVICES_CONFIG: GettingStartedConfig = {
 
 const ALERTS_CONFIG: GettingStartedConfig = {
   id: 'alerts',
-  order: 6,
+  order: 7,
   title: i18n.translate('observability.overview.card.alerts.title', {
     defaultMessage: 'Get notified',
   }),
@@ -91,7 +105,7 @@ const ALERTS_CONFIG: GettingStartedConfig = {
 
 const ANOMALY_CONFIG: GettingStartedConfig = {
   id: 'anomaly',
-  order: 7,
+  order: 8,
   title: i18n.translate('observability.overview.card.anomaly.title', {
     defaultMessage: 'Detect anomalies in your data',
   }),
@@ -101,6 +115,7 @@ const ANOMALY_CONFIG: GettingStartedConfig = {
 };
 
 export const cardConfigs = [
+  SAMPLEDATA_CONFIG,
   GETTING_STARTED_CONFIG,
   DISCOVER_CONFIG,
   METRICS_CONFIG,

diff --git a/public/components/overview/home.tsx b/public/components/overview/home.tsx
@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { EuiText } from '@elastic/eui';
+import { EuiI18n } from '@elastic/eui';
 import React, { ReactNode, useEffect, useState } from 'react';
 import { HashRouter, Route, Switch } from 'react-router-dom';
 import { alertsPluginID, anomalyPluginID } from '../../../common/constants/overview';
@@ -67,13 +67,17 @@ export const Home = () => {
             order: card.order,
             description: card.description,
             title: card.title,
-            onClick: () => coreRefs.application?.navigateToApp(card.url, { path: '#/' }),
-            getFooter: () => {
-              return (
-                <EuiText size="s" textAlign="center">
-                  {card.footer}
-                </EuiText>
-              );
+            cardProps: {
+              selectable: {
+                children: (
+                  <EuiI18n
+                    token="home.sampleData.card.footer"
+                    default={card.footer || 'Documentation'}
+                  />
+                ),
+                onClick: () => coreRefs.application?.navigateToApp(card.url, { path: '#/' }),
+                isSelected: false,
+              },
             },
           }),
           getTargetArea: () => HOME_CONTENT_AREAS.GET_STARTED,