From ce419d875c1e432428ebd36203bc7db334998810 Mon Sep 17 00:00:00 2001
From: Adam Tackett <105462877+TackAdam@users.noreply.github.com>
Date: Wed, 11 Sep 2024 12:33:43 -0700
Subject: [PATCH 1/2] [Bug] UI changes for overview page, fix re-direction for
 workspaces (#2152)

* update overview page, redirection bug, change text

Signed-off-by: Adam Tackett <tackadam@amazon.com>

* change card order, make button small, rename variable

Signed-off-by: Adam Tackett <tackadam@amazon.com>

* fix bugs, adjust ui

Signed-off-by: Adam Tackett <tackadam@amazon.com>

* address comments

Signed-off-by: Adam Tackett <tackadam@amazon.com>

* change text

Signed-off-by: Adam Tackett <tackadam@amazon.com>

---------

Signed-off-by: Adam Tackett <tackadam@amazon.com>
Co-authored-by: Adam Tackett <tackadam@amazon.com>
---
 common/constants/shared.ts                    |  4 +-
 .../components/getting_started.tsx            |  3 +-
 .../getting_started_collectData.tsx           | 70 +++++++++----------
 .../getting_started_queryAndAnalyze.tsx       | 51 ++++++++------
 .../components/integration_overview_panel.tsx |  2 +-
 .../add_dashboard_callout.test.tsx.snap       | 63 +++++++++--------
 .../dashboard_controls.test.tsx.snap          | 63 +++++++++--------
 .../select_dashboard_flyout.test.tsx.snap     | 50 ++++++-------
 .../components/add_dashboard_callout.tsx      |  4 +-
 .../overview/components/card_configs.tsx      | 45 +++++++++---
 .../components/select_dashboard_flyout.tsx    |  1 +
 public/components/overview/home.tsx           | 20 +++---
 public/plugin_helpers/plugin_overview.tsx     |  1 +
 13 files changed, 215 insertions(+), 162 deletions(-)

diff --git a/common/constants/shared.ts b/common/constants/shared.ts
index f88f833d6..b5ef687b1 100644
--- 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 tutorialSampleDataPluginId = 'import_sample_data';
+
 export const observabilityID = 'observability-logs';
 export const observabilityTitle = 'Observability';
 export const observabilityPluginOrder = 1500;
@@ -42,7 +44,7 @@ export const observabilityOverviewTitle = 'Observability overview';
 export const observabilityOverviewPluginOrder = 5088;
 
 export const observabilityGettingStartedID = 'observability-gettingStarted';
-export const observabilityGettingStartedTitle = 'Getting Started';
+export const observabilityGettingStartedTitle = 'Get started';
 export const observabilityGettingStartedPluginOrder = 5089;
 
 export const observabilityApplicationsID = 'observability-applications';
diff --git a/public/components/getting_started/components/getting_started.tsx b/public/components/getting_started/components/getting_started.tsx
index 894013607..5ebf856fc 100644
--- a/public/components/getting_started/components/getting_started.tsx
+++ b/public/components/getting_started/components/getting_started.tsx
@@ -8,6 +8,7 @@ import React, { useEffect, useState } from 'react';
 import { HomeProps } from 'public/components/getting_started/home';
 import { CollectAndShipData } from './getting_started_collectData';
 import { QueryAndAnalyze } from './getting_started_queryAndAnalyze';
+import { observabilityGettingStartedTitle } from '../../../../common/constants/shared';
 
 interface ExtendedHomeProps extends HomeProps {
   selectedDataSourceId: string;
@@ -24,7 +25,7 @@ export const NewGettingStarted = (props: ExtendedHomeProps) => {
   useEffect(() => {
     chrome.setBreadcrumbs([
       {
-        text: 'Getting Started',
+        text: observabilityGettingStartedTitle,
         href: '#/',
       },
     ]);
diff --git a/public/components/getting_started/components/getting_started_collectData.tsx b/public/components/getting_started/components/getting_started_collectData.tsx
index 30f7e45bd..0d1de005a 100644
--- a/public/components/getting_started/components/getting_started_collectData.tsx
+++ b/public/components/getting_started/components/getting_started_collectData.tsx
@@ -33,6 +33,10 @@ import javaJson from '../getting_started_artifacts/java_client/java_client-1.0.0
 import { IntegrationCards } from './getting_started_integrationCards';
 import { UploadAssets } from './utils';
 
+const cardOne = 'Collector';
+const cardTwo = 'File Upload';
+const cardThree = 'Configure use-case based content';
+
 interface CollectAndShipDataProps {
   isOpen: boolean;
   onToggle: (isOpen: boolean) => void;
@@ -103,9 +107,9 @@ export const CollectAndShipData: React.FC<CollectAndShipDataProps> = ({
     setSelectedWorkflow('');
     setGettingStarted(null);
     setWorkflows([]);
-    onCardSelectionChange(value === 'Use a sample dataset');
+    onCardSelectionChange(value === cardThree);
 
-    if (value === 'Configure collectors') {
+    if (value === cardOne) {
       setCollectorOptions([
         { label: 'Open Telemetry (structured)', value: 'otel' },
         { label: 'Nginx (structured)', value: 'nginx' },
@@ -113,7 +117,7 @@ export const CollectAndShipData: React.FC<CollectAndShipDataProps> = ({
         { label: 'Python (unstructured)', value: 'python' },
         { label: 'Golang (unstructured)', value: 'golang' },
       ]);
-    } else if (value === 'Upload a file CSV or JSON') {
+    } else if (value === cardTwo) {
       setCollectorOptions([{ label: 'Fluent Bit', value: 'csv' }]);
     }
   };
@@ -148,7 +152,7 @@ export const CollectAndShipData: React.FC<CollectAndShipDataProps> = ({
     return (
       <>
         <EuiText>
-          <strong>Select a collector</strong>
+          <h3>Select a collector</h3>
         </EuiText>
         <EuiSpacer size="s" />
         <EuiSelectable
@@ -301,68 +305,64 @@ export const CollectAndShipData: React.FC<CollectAndShipDataProps> = ({
   }));
 
   return (
-    <EuiAccordion
-      id="collect-and-ship-data"
-      buttonContent="Collect and ship data"
-      paddingSize="m"
-      forceState={isOpen ? 'open' : 'closed'}
-      onToggle={onToggle}
-    >
-      <EuiPanel>
-        <EuiText>
-          <h3>Collect your data</h3>
-        </EuiText>
-        <EuiSpacer size="m" />
+    <EuiPanel paddingSize="m">
+      <EuiAccordion
+        id="collect-and-ingest-data"
+        buttonContent="Collect and ingest data"
+        paddingSize="m"
+        forceState={isOpen ? 'open' : 'closed'}
+        onToggle={onToggle}
+      >
         <EuiText>
-          <strong>Select a collection method</strong>
+          <h2>Collection method</h2>
         </EuiText>
         <EuiSpacer size="s" />
         <EuiFlexGroup>
           <EuiFlexItem>
             <EuiCheckableCard
               id="configure_collectors"
-              label="Configure collectors"
+              label={cardOne}
               checkableType="radio"
-              checked={selectedCard === 'Configure collectors'}
+              checked={selectedCard === cardOne}
               onChange={() => {
-                handleCollectionMethodChange('Configure collectors');
-                setSelectedCard('Configure collectors');
+                handleCollectionMethodChange(cardOne);
+                setSelectedCard(cardOne);
               }}
             >
-              Configure agents and ingestion pipeline
+              <EuiText size="s">Configure agents and ingestion pipeline</EuiText>
             </EuiCheckableCard>
           </EuiFlexItem>
           <EuiFlexItem>
             <EuiCheckableCard
               id="upload_file"
-              label="Upload a file CSV"
+              label={cardTwo}
               checkableType="radio"
-              checked={selectedCard === 'Upload a file CSV or JSON'}
+              checked={selectedCard === cardTwo}
               onChange={() => {
-                handleCollectionMethodChange('Upload a file CSV or JSON');
-                setSelectedCard('Upload a file CSV or JSON');
+                handleCollectionMethodChange(cardTwo);
+                setSelectedCard(cardTwo);
               }}
             >
-              Upload your data
+              <EuiText size="s">Upload your data</EuiText>
             </EuiCheckableCard>
           </EuiFlexItem>
           <EuiFlexItem>
             <EuiCheckableCard
               id="use_sample_dataset"
-              label="Use a sample dataset"
+              label={cardThree}
               checkableType="radio"
-              checked={selectedCard === 'Use a sample dataset'}
+              checked={selectedCard === cardThree}
               onChange={() => {
-                handleCollectionMethodChange('Use a sample dataset');
-                setSelectedCard('Use a sample dataset');
+                handleCollectionMethodChange(cardThree);
+                setSelectedCard(cardThree);
               }}
             >
-              Explore with a log dataset
+              <EuiText size="s">Explore with a log dataset</EuiText>
             </EuiCheckableCard>
           </EuiFlexItem>
         </EuiFlexGroup>
         <EuiSpacer size="m" />
-        {collectionMethod === 'Use a sample dataset' ? (
+        {collectionMethod === cardThree ? (
           <IntegrationCards />
         ) : (
           <>
@@ -382,7 +382,7 @@ export const CollectAndShipData: React.FC<CollectAndShipDataProps> = ({
             )}
           </>
         )}
-      </EuiPanel>
-    </EuiAccordion>
+      </EuiAccordion>
+    </EuiPanel>
   );
 };
diff --git a/public/components/getting_started/components/getting_started_queryAndAnalyze.tsx b/public/components/getting_started/components/getting_started_queryAndAnalyze.tsx
index d92a733ff..f6c5a0e93 100644
--- a/public/components/getting_started/components/getting_started_queryAndAnalyze.tsx
+++ b/public/components/getting_started/components/getting_started_queryAndAnalyze.tsx
@@ -14,10 +14,10 @@ import {
   EuiPanel,
   EuiSpacer,
   EuiText,
-  EuiTitle,
 } from '@elastic/eui';
 import { coreRefs } from '../../../../public/framework/core_refs';
 import { fetchDashboardIds, fetchIndexPatternIds, redirectToDashboards } from './utils';
+import { getWorkspaceIdFromUrl } from '../../../../../../src/core/public/utils';
 
 interface Pattern {
   id: string;
@@ -75,8 +75,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,26 +92,31 @@ 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,
     });
   };
 
   return (
-    <EuiAccordion
-      id="query-and-analyze"
-      buttonContent={`Query and analyze data: ${selectedTechnology}`}
-      paddingSize="m"
-      forceState={isOpen ? 'open' : 'closed'}
-      onToggle={onToggle}
-    >
-      <EuiPanel>
-        <EuiTitle size="m">
-          <h3>Query data</h3>
-        </EuiTitle>
+    <EuiPanel paddingSize="m">
+      <EuiAccordion
+        id="query-and-analyze"
+        buttonContent={`Query and analyze data: ${selectedTechnology}`}
+        paddingSize="m"
+        forceState={isOpen ? 'open' : 'closed'}
+        onToggle={onToggle}
+      >
         <EuiText>
           <p>
-            <strong>Explore your data</strong>
+            <h2>Explore your data</h2>
           </p>
         </EuiText>
         <EuiSpacer size="m" />
@@ -119,12 +131,9 @@ export const QueryAndAnalyze: React.FC<QueryAndAnalyzeProps> = ({
             ))}
         </EuiFlexGroup>
         <EuiHorizontalRule />
-        <EuiTitle size="m">
-          <h3>Analyze data</h3>
-        </EuiTitle>
         <EuiText>
           <p>
-            <strong>Visualize your data</strong>
+            <h2>Visualize your data</h2>
           </p>
         </EuiText>
         <EuiSpacer size="m" />
@@ -154,7 +163,7 @@ export const QueryAndAnalyze: React.FC<QueryAndAnalyzeProps> = ({
             />
           </EuiFlexItem>
         </EuiFlexGroup>
-      </EuiPanel>
-    </EuiAccordion>
+      </EuiAccordion>
+    </EuiPanel>
   );
 };
diff --git a/public/components/integrations/components/integration_overview_panel.tsx b/public/components/integrations/components/integration_overview_panel.tsx
index 8200affc5..7ce35f32a 100644
--- 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/__tests__/__snapshots__/add_dashboard_callout.test.tsx.snap b/public/components/overview/components/__tests__/__snapshots__/add_dashboard_callout.test.tsx.snap
index ea5427f2f..c4d7d3af8 100644
--- a/public/components/overview/components/__tests__/__snapshots__/add_dashboard_callout.test.tsx.snap
+++ b/public/components/overview/components/__tests__/__snapshots__/add_dashboard_callout.test.tsx.snap
@@ -95,47 +95,52 @@ exports[`Add dashboard callout renders add dashboard callout 1`] = `
                   className="euiSpacer euiSpacer--l"
                 />
               </EuiSpacer>
-              <EuiButton>
-                <EuiButtonDisplay
-                  baseClassName="euiButton"
-                  disabled={false}
-                  element="button"
-                  isDisabled={false}
-                  type="button"
+              <EuiSmallButton>
+                <EuiButton
+                  size="s"
                 >
-                  <button
-                    className="euiButton euiButton--primary"
+                  <EuiButtonDisplay
+                    baseClassName="euiButton"
                     disabled={false}
-                    style={
-                      Object {
-                        "minWidth": undefined,
-                      }
-                    }
+                    element="button"
+                    isDisabled={false}
+                    size="s"
                     type="button"
                   >
-                    <EuiButtonContent
-                      className="euiButton__content"
-                      iconGap="m"
-                      iconSide="left"
-                      textProps={
+                    <button
+                      className="euiButton euiButton--primary euiButton--small"
+                      disabled={false}
+                      style={
                         Object {
-                          "className": "euiButton__text",
+                          "minWidth": undefined,
                         }
                       }
+                      type="button"
                     >
-                      <span
-                        className="euiButtonContent euiButton__content"
+                      <EuiButtonContent
+                        className="euiButton__content"
+                        iconGap="m"
+                        iconSide="left"
+                        textProps={
+                          Object {
+                            "className": "euiButton__text",
+                          }
+                        }
                       >
                         <span
-                          className="euiButton__text"
+                          className="euiButtonContent euiButton__content"
                         >
-                          Select
+                          <span
+                            className="euiButton__text"
+                          >
+                            Select
+                          </span>
                         </span>
-                      </span>
-                    </EuiButtonContent>
-                  </button>
-                </EuiButtonDisplay>
-              </EuiButton>
+                      </EuiButtonContent>
+                    </button>
+                  </EuiButtonDisplay>
+                </EuiButton>
+              </EuiSmallButton>
             </div>
           </EuiTextColor>
         </div>
diff --git a/public/components/overview/components/__tests__/__snapshots__/dashboard_controls.test.tsx.snap b/public/components/overview/components/__tests__/__snapshots__/dashboard_controls.test.tsx.snap
index 5ed68a52c..1100ae951 100644
--- a/public/components/overview/components/__tests__/__snapshots__/dashboard_controls.test.tsx.snap
+++ b/public/components/overview/components/__tests__/__snapshots__/dashboard_controls.test.tsx.snap
@@ -96,47 +96,52 @@ exports[`Dashboard controls should render 1`] = `
                     className="euiSpacer euiSpacer--l"
                   />
                 </EuiSpacer>
-                <EuiButton>
-                  <EuiButtonDisplay
-                    baseClassName="euiButton"
-                    disabled={false}
-                    element="button"
-                    isDisabled={false}
-                    type="button"
+                <EuiSmallButton>
+                  <EuiButton
+                    size="s"
                   >
-                    <button
-                      className="euiButton euiButton--primary"
+                    <EuiButtonDisplay
+                      baseClassName="euiButton"
                       disabled={false}
-                      style={
-                        Object {
-                          "minWidth": undefined,
-                        }
-                      }
+                      element="button"
+                      isDisabled={false}
+                      size="s"
                       type="button"
                     >
-                      <EuiButtonContent
-                        className="euiButton__content"
-                        iconGap="m"
-                        iconSide="left"
-                        textProps={
+                      <button
+                        className="euiButton euiButton--primary euiButton--small"
+                        disabled={false}
+                        style={
                           Object {
-                            "className": "euiButton__text",
+                            "minWidth": undefined,
                           }
                         }
+                        type="button"
                       >
-                        <span
-                          className="euiButtonContent euiButton__content"
+                        <EuiButtonContent
+                          className="euiButton__content"
+                          iconGap="m"
+                          iconSide="left"
+                          textProps={
+                            Object {
+                              "className": "euiButton__text",
+                            }
+                          }
                         >
                           <span
-                            className="euiButton__text"
+                            className="euiButtonContent euiButton__content"
                           >
-                            Select
+                            <span
+                              className="euiButton__text"
+                            >
+                              Select
+                            </span>
                           </span>
-                        </span>
-                      </EuiButtonContent>
-                    </button>
-                  </EuiButtonDisplay>
-                </EuiButton>
+                        </EuiButtonContent>
+                      </button>
+                    </EuiButtonDisplay>
+                  </EuiButton>
+                </EuiSmallButton>
               </div>
             </EuiTextColor>
           </div>
diff --git a/public/components/overview/components/__tests__/__snapshots__/select_dashboard_flyout.test.tsx.snap b/public/components/overview/components/__tests__/__snapshots__/select_dashboard_flyout.test.tsx.snap
index 8200d6f67..15f23205f 100644
--- a/public/components/overview/components/__tests__/__snapshots__/select_dashboard_flyout.test.tsx.snap
+++ b/public/components/overview/components/__tests__/__snapshots__/select_dashboard_flyout.test.tsx.snap
@@ -84,7 +84,7 @@ exports[`Select dashboard flyout should render 1`] = `
                         class="euiSelectable euiSelectable-fullHeight"
                       >
                         <div
-                          class="euiFormControlLayout euiFormControlLayout--fullWidth"
+                          class="euiFormControlLayout euiFormControlLayout--fullWidth euiFormControlLayout--compressed"
                         >
                           <div
                             class="euiFormControlLayout__childrenWrapper"
@@ -94,7 +94,7 @@ exports[`Select dashboard flyout should render 1`] = `
                               aria-haspopup="listbox"
                               aria-label="Filter options"
                               autocomplete="off"
-                              class="euiFieldSearch euiFieldSearch--fullWidth euiSelectableSearch"
+                              class="euiFieldSearch euiFieldSearch--fullWidth euiFieldSearch--compressed euiSelectableSearch"
                               placeholder="Search for a dashboard..."
                               type="search"
                               value=""
@@ -107,7 +107,7 @@ exports[`Select dashboard flyout should render 1`] = `
                               >
                                 <svg
                                   aria-hidden="true"
-                                  class="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
+                                  class="euiIcon euiIcon--small euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
                                   focusable="false"
                                   height="16"
                                   role="img"
@@ -347,7 +347,7 @@ exports[`Select dashboard flyout should render 1`] = `
                                 class="euiSelectable euiSelectable-fullHeight"
                               >
                                 <div
-                                  class="euiFormControlLayout euiFormControlLayout--fullWidth"
+                                  class="euiFormControlLayout euiFormControlLayout--fullWidth euiFormControlLayout--compressed"
                                 >
                                   <div
                                     class="euiFormControlLayout__childrenWrapper"
@@ -357,7 +357,7 @@ exports[`Select dashboard flyout should render 1`] = `
                                       aria-haspopup="listbox"
                                       aria-label="Filter options"
                                       autocomplete="off"
-                                      class="euiFieldSearch euiFieldSearch--fullWidth euiSelectableSearch"
+                                      class="euiFieldSearch euiFieldSearch--fullWidth euiFieldSearch--compressed euiSelectableSearch"
                                       placeholder="Search for a dashboard..."
                                       type="search"
                                       value=""
@@ -370,7 +370,7 @@ exports[`Select dashboard flyout should render 1`] = `
                                       >
                                         <svg
                                           aria-hidden="true"
-                                          class="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
+                                          class="euiIcon euiIcon--small euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
                                           focusable="false"
                                           height="16"
                                           role="img"
@@ -542,7 +542,7 @@ exports[`Select dashboard flyout should render 1`] = `
                                   class="euiSelectable euiSelectable-fullHeight"
                                 >
                                   <div
-                                    class="euiFormControlLayout euiFormControlLayout--fullWidth"
+                                    class="euiFormControlLayout euiFormControlLayout--fullWidth euiFormControlLayout--compressed"
                                   >
                                     <div
                                       class="euiFormControlLayout__childrenWrapper"
@@ -552,7 +552,7 @@ exports[`Select dashboard flyout should render 1`] = `
                                         aria-haspopup="listbox"
                                         aria-label="Filter options"
                                         autocomplete="off"
-                                        class="euiFieldSearch euiFieldSearch--fullWidth euiSelectableSearch"
+                                        class="euiFieldSearch euiFieldSearch--fullWidth euiFieldSearch--compressed euiSelectableSearch"
                                         placeholder="Search for a dashboard..."
                                         type="search"
                                         value=""
@@ -565,7 +565,7 @@ exports[`Select dashboard flyout should render 1`] = `
                                         >
                                           <svg
                                             aria-hidden="true"
-                                            class="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
+                                            class="euiIcon euiIcon--small euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
                                             focusable="false"
                                             height="16"
                                             role="img"
@@ -737,7 +737,7 @@ exports[`Select dashboard flyout should render 1`] = `
                                     class="euiSelectable euiSelectable-fullHeight"
                                   >
                                     <div
-                                      class="euiFormControlLayout euiFormControlLayout--fullWidth"
+                                      class="euiFormControlLayout euiFormControlLayout--fullWidth euiFormControlLayout--compressed"
                                     >
                                       <div
                                         class="euiFormControlLayout__childrenWrapper"
@@ -747,7 +747,7 @@ exports[`Select dashboard flyout should render 1`] = `
                                           aria-haspopup="listbox"
                                           aria-label="Filter options"
                                           autocomplete="off"
-                                          class="euiFieldSearch euiFieldSearch--fullWidth euiSelectableSearch"
+                                          class="euiFieldSearch euiFieldSearch--fullWidth euiFieldSearch--compressed euiSelectableSearch"
                                           placeholder="Search for a dashboard..."
                                           type="search"
                                           value=""
@@ -760,7 +760,7 @@ exports[`Select dashboard flyout should render 1`] = `
                                           >
                                             <svg
                                               aria-hidden="true"
-                                              class="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
+                                              class="euiIcon euiIcon--small euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
                                               focusable="false"
                                               height="16"
                                               role="img"
@@ -920,7 +920,7 @@ exports[`Select dashboard flyout should render 1`] = `
                                       class="euiSelectable euiSelectable-fullHeight"
                                     >
                                       <div
-                                        class="euiFormControlLayout euiFormControlLayout--fullWidth"
+                                        class="euiFormControlLayout euiFormControlLayout--fullWidth euiFormControlLayout--compressed"
                                       >
                                         <div
                                           class="euiFormControlLayout__childrenWrapper"
@@ -930,7 +930,7 @@ exports[`Select dashboard flyout should render 1`] = `
                                             aria-haspopup="listbox"
                                             aria-label="Filter options"
                                             autocomplete="off"
-                                            class="euiFieldSearch euiFieldSearch--fullWidth euiSelectableSearch"
+                                            class="euiFieldSearch euiFieldSearch--fullWidth euiFieldSearch--compressed euiSelectableSearch"
                                             placeholder="Search for a dashboard..."
                                             type="search"
                                             value=""
@@ -943,7 +943,7 @@ exports[`Select dashboard flyout should render 1`] = `
                                             >
                                               <svg
                                                 aria-hidden="true"
-                                                class="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
+                                                class="euiIcon euiIcon--small euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
                                                 focusable="false"
                                                 height="16"
                                                 role="img"
@@ -1177,6 +1177,7 @@ exports[`Select dashboard flyout should render 1`] = `
                                   options={Array []}
                                   searchProps={
                                     Object {
+                                      "compressed": true,
                                       "placeholder": "Search for a dashboard...",
                                     }
                                   }
@@ -1196,6 +1197,7 @@ exports[`Select dashboard flyout should render 1`] = `
                                       <EuiSelectableSearch
                                         aria-activedescendant=""
                                         aria-label="Filter options"
+                                        compressed={true}
                                         defaultValue=""
                                         isPreFiltered={false}
                                         key="listSearch"
@@ -1209,7 +1211,7 @@ exports[`Select dashboard flyout should render 1`] = `
                                           aria-label="Filter options"
                                           autoComplete="off"
                                           className="euiSelectableSearch"
-                                          compressed={false}
+                                          compressed={true}
                                           defaultValue=""
                                           fullWidth={true}
                                           incremental={true}
@@ -1219,13 +1221,13 @@ exports[`Select dashboard flyout should render 1`] = `
                                           placeholder="Search for a dashboard..."
                                         >
                                           <EuiFormControlLayout
-                                            compressed={false}
+                                            compressed={true}
                                             fullWidth={true}
                                             icon="search"
                                             isLoading={false}
                                           >
                                             <div
-                                              className="euiFormControlLayout euiFormControlLayout--fullWidth"
+                                              className="euiFormControlLayout euiFormControlLayout--fullWidth euiFormControlLayout--compressed"
                                             >
                                               <div
                                                 className="euiFormControlLayout__childrenWrapper"
@@ -1236,7 +1238,7 @@ exports[`Select dashboard flyout should render 1`] = `
                                                     aria-haspopup="listbox"
                                                     aria-label="Filter options"
                                                     autoComplete="off"
-                                                    className="euiFieldSearch euiFieldSearch--fullWidth euiSelectableSearch"
+                                                    className="euiFieldSearch euiFieldSearch--fullWidth euiFieldSearch--compressed euiSelectableSearch"
                                                     defaultValue=""
                                                     onKeyUp={[Function]}
                                                     placeholder="Search for a dashboard..."
@@ -1244,7 +1246,7 @@ exports[`Select dashboard flyout should render 1`] = `
                                                   />
                                                 </EuiValidatableControl>
                                                 <EuiFormControlLayoutIcons
-                                                  compressed={false}
+                                                  compressed={true}
                                                   icon="search"
                                                   isLoading={false}
                                                 >
@@ -1252,7 +1254,7 @@ exports[`Select dashboard flyout should render 1`] = `
                                                     className="euiFormControlLayoutIcons"
                                                   >
                                                     <EuiFormControlLayoutCustomIcon
-                                                      size="m"
+                                                      size="s"
                                                       type="search"
                                                     >
                                                       <span
@@ -1261,19 +1263,19 @@ exports[`Select dashboard flyout should render 1`] = `
                                                         <EuiIcon
                                                           aria-hidden="true"
                                                           className="euiFormControlLayoutCustomIcon__icon"
-                                                          size="m"
+                                                          size="s"
                                                           type="search"
                                                         >
                                                           <EuiIconBeaker
                                                             aria-hidden={true}
-                                                            className="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
+                                                            className="euiIcon euiIcon--small euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
                                                             focusable="false"
                                                             role="img"
                                                             style={null}
                                                           >
                                                             <svg
                                                               aria-hidden={true}
-                                                              className="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
+                                                              className="euiIcon euiIcon--small euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
                                                               focusable="false"
                                                               height={16}
                                                               role="img"
diff --git a/public/components/overview/components/add_dashboard_callout.tsx b/public/components/overview/components/add_dashboard_callout.tsx
index cd0629427..2efb264ba 100644
--- a/public/components/overview/components/add_dashboard_callout.tsx
+++ b/public/components/overview/components/add_dashboard_callout.tsx
@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { EuiButton, EuiCallOut, EuiLink, EuiSpacer, EuiText } from '@elastic/eui';
+import { EuiSmallButton, EuiCallOut, EuiLink, EuiSpacer, EuiText } from '@elastic/eui';
 import React from 'react';
 import { useObservable } from 'react-use';
 import { coreRefs } from '../../../framework/core_refs';
@@ -30,7 +30,7 @@ export function AddDashboardCallout() {
           </p>
         </EuiText>
         <EuiSpacer />
-        <EuiButton onClick={showFlyout}>Select</EuiButton>
+        <EuiSmallButton onClick={showFlyout}>Select</EuiSmallButton>
       </EuiCallOut>
     </>
   );
diff --git a/public/components/overview/components/card_configs.tsx b/public/components/overview/components/card_configs.tsx
index 89fb4572c..b4969bf2b 100644
--- a/public/components/overview/components/card_configs.tsx
+++ b/public/components/overview/components/card_configs.tsx
@@ -11,7 +11,7 @@ import {
   observabilityServicesNewNavURL,
   alertingPluginID,
   anomalyDetectionPluginID,
-  discoverPluginID,
+  tutorialSampleDataPluginId,
 } from '../../../../common/constants/shared';
 
 export interface GettingStartedConfig {
@@ -21,87 +21,110 @@ export interface GettingStartedConfig {
   description: string;
   footer: string;
   url: string;
+  path: string;
 }
 
 const GETTING_STARTED_CONFIG: GettingStartedConfig = {
   id: 'getting_started',
   order: 1,
   title: i18n.translate('observability.overview.card.gettingStarted.title', {
-    defaultMessage: 'Add your data',
+    defaultMessage: 'Set up your Observability workspace',
   }),
-  description: 'Get started collecting and analyzing data.',
+  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,
+  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: tutorialSampleDataPluginId,
+  footer: 'Sample Datasets',
+  path: '#/',
 };
 
 const DISCOVER_CONFIG: GettingStartedConfig = {
   id: 'discover',
-  order: 2,
+  order: 3,
   title: i18n.translate('observability.overview.card.discover.title', {
     defaultMessage: 'Discover insights',
   }),
-  description: 'Uncover insights with raw data exploration.',
+  description: 'Uncover logs with raw data exploration.',
   footer: 'Discover',
-  url: discoverPluginID,
+  url: 'data-explorer',
+  path: '/discover',
 };
 
 const METRICS_CONFIG: GettingStartedConfig = {
   id: 'metrics',
-  order: 3,
+  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: 4,
+  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: observabilityTracesNewNavURL,
+  path: '#/',
 };
 
 const SERVICES_CONFIG: GettingStartedConfig = {
   id: 'services',
-  order: 5,
+  order: 6,
   title: i18n.translate('observability.overview.card.services.title', {
     defaultMessage: 'Monitor service health',
   }),
   description: 'Identify service performance issues with comprehensive monitoring and analysis.',
   footer: 'Services',
   url: observabilityServicesNewNavURL,
+  path: '#/',
 };
 
 const ALERTS_CONFIG: GettingStartedConfig = {
   id: 'alerts',
-  order: 6,
+  order: 7,
   title: i18n.translate('observability.overview.card.alerts.title', {
     defaultMessage: 'Get notified',
   }),
   description: 'Receive timely notifications by configuring alert triggers.',
   footer: 'Alerting',
   url: alertingPluginID,
+  path: '#/',
 };
 
 const ANOMALY_CONFIG: GettingStartedConfig = {
   id: 'anomaly',
-  order: 7,
+  order: 8,
   title: i18n.translate('observability.overview.card.anomaly.title', {
     defaultMessage: 'Detect anomalies in your data',
   }),
   description: 'Gain near real-time anomaly detection using the Random Cut Forest (RCF) algorithm.',
   footer: 'Anomaly Detection',
   url: anomalyDetectionPluginID,
+  path: '#/',
 };
 
 export const cardConfigs = [
   GETTING_STARTED_CONFIG,
+  SAMPLEDATA_CONFIG,
   DISCOVER_CONFIG,
   METRICS_CONFIG,
   TRACES_CONFIG,
diff --git a/public/components/overview/components/select_dashboard_flyout.tsx b/public/components/overview/components/select_dashboard_flyout.tsx
index 8bc970ded..83065a11a 100644
--- a/public/components/overview/components/select_dashboard_flyout.tsx
+++ b/public/components/overview/components/select_dashboard_flyout.tsx
@@ -90,6 +90,7 @@ export function SelectDashboardFlyout({ closeFlyout, dashboardsSavedObjects, rel
           searchable
           searchProps={{
             placeholder: 'Search for a dashboard...',
+            compressed: true,
           }}
           singleSelection="always"
           options={options}
diff --git a/public/components/overview/home.tsx b/public/components/overview/home.tsx
index df7ba6055..3dcd976f4 100644
--- a/public/components/overview/home.tsx
+++ b/public/components/overview/home.tsx
@@ -3,9 +3,9 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { EuiText } from '@elastic/eui';
 import React, { ReactNode, useEffect, useState } from 'react';
 import { HashRouter, Route, Switch } from 'react-router-dom';
+import { FormattedMessage } from '@osd/i18n/react';
 import { alertsPluginID, anomalyPluginID } from '../../../common/constants/overview';
 import { DashboardSavedObjectsType } from '../../../common/types/overview';
 import { setNavBreadCrumbs } from '../../../common/utils/set_nav_bread_crumbs';
@@ -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: (
+                  <FormattedMessage
+                    id="home.sampleData.card.footer"
+                    defaultMessage={card.footer || 'Documentation'}
+                  />
+                ),
+                onClick: () => coreRefs.application?.navigateToApp(card.url, { path: card.path }),
+                isSelected: false,
+              },
             },
           }),
           getTargetArea: () => HOME_CONTENT_AREAS.GET_STARTED,
diff --git a/public/plugin_helpers/plugin_overview.tsx b/public/plugin_helpers/plugin_overview.tsx
index 4e6af7eae..a1afafdc4 100644
--- a/public/plugin_helpers/plugin_overview.tsx
+++ b/public/plugin_helpers/plugin_overview.tsx
@@ -28,6 +28,7 @@ export const setupOverviewPage = (contentManagement: ContentManagementPluginSetu
       {
         id: SECTIONS.GET_STARTED,
         order: 1000,
+        title: 'Get started',
         kind: 'card',
         wrap: false,
         columns: 5,

From ad6600c5d37884118417ad118cc900e31028b5a5 Mon Sep 17 00:00:00 2001
From: Shenoy Pratik <sgguruda@amazon.com>
Date: Wed, 11 Sep 2024 15:33:44 -0700
Subject: [PATCH 2/2] Trace analytics ui bug fixes in custom sources (#2162)

* trace analytics ui bug fixes

Signed-off-by: Shenoy Pratik <sgguruda@amazon.com>

* revert sort change

Signed-off-by: Shenoy Pratik <sgguruda@amazon.com>

---------

Signed-off-by: Shenoy Pratik <sgguruda@amazon.com>
---
 .../__snapshots__/search_bar.test.tsx.snap    |  2 +-
 .../components/common/helper_functions.tsx    |  7 ++++---
 .../components/common/plots/service_map.tsx   | 21 ++++++++++++++++++-
 .../components/common/search_bar.tsx          | 11 +++++-----
 .../components/traces/services_list.tsx       | 21 ++++++++++---------
 .../components/traces/traces_content.tsx      |  7 ++++---
 6 files changed, 45 insertions(+), 24 deletions(-)

diff --git a/public/components/trace_analytics/components/common/__tests__/__snapshots__/search_bar.test.tsx.snap b/public/components/trace_analytics/components/common/__tests__/__snapshots__/search_bar.test.tsx.snap
index a95f3e81e..97ae72f57 100644
--- a/public/components/trace_analytics/components/common/__tests__/__snapshots__/search_bar.test.tsx.snap
+++ b/public/components/trace_analytics/components/common/__tests__/__snapshots__/search_bar.test.tsx.snap
@@ -418,7 +418,7 @@ exports[`Search bar components renders search bar 1`] = `
             isClearable={false}
             isLoading={false}
             onChange={[Function]}
-            onSearch={[MockFunction]}
+            onSearch={[Function]}
             placeholder="Trace ID, trace group name, service name"
             prepend={
               <GlobalFilterButton
diff --git a/public/components/trace_analytics/components/common/helper_functions.tsx b/public/components/trace_analytics/components/common/helper_functions.tsx
index 8f98043b4..e90fab06d 100644
--- a/public/components/trace_analytics/components/common/helper_functions.tsx
+++ b/public/components/trace_analytics/components/common/helper_functions.tsx
@@ -204,15 +204,16 @@ export function getServiceMapGraph(
     }
 
     const averageLatency = `Average duration: ${
-      map[service].latency! >= 0 ? map[service].latency + 'ms' : 'N/A'
+      map[service].latency! >= 0 ? map[service].latency + 'ms' : '-'
     }`;
 
     const errorRate = `Error rate: ${
-      map[service].error_rate! >= 0 ? map[service].error_rate + '%' : 'N/A'
+      map[service].error_rate! >= 0 ? map[service].error_rate + '%' : '-'
     }`;
 
     const throughput =
-      (map[service].throughput! >= 0 ? `Request rate: ${map[service].throughput}` : 'N/A') +
+      'Request rate: ' +
+      (map[service].throughput! >= 0 ? `${map[service].throughput}` : '-') +
       (map[service].throughputPerMinute ? ` (${map[service].throughputPerMinute} per minute)` : '');
 
     const hover = `${service}\n\n ${averageLatency} \n ${errorRate} \n ${throughput}`;
diff --git a/public/components/trace_analytics/components/common/plots/service_map.tsx b/public/components/trace_analytics/components/common/plots/service_map.tsx
index af2962b2f..8edac9952 100644
--- a/public/components/trace_analytics/components/common/plots/service_map.tsx
+++ b/public/components/trace_analytics/components/common/plots/service_map.tsx
@@ -190,6 +190,11 @@ export function ServiceMap({
           throughput: selectedNode.throughput,
         };
 
+        // On traces page with custom sources
+        // When user clicks on empty graph, load metrics
+        if (selectableValue.length === 0) {
+          onChangeSelectable('latency');
+        }
         // Update the state to display node details
         setSelectedNodeDetails(details);
       }
@@ -209,6 +214,21 @@ export function ServiceMap({
     }
   };
 
+  useEffect(() => {
+    if (selectedNodeDetails) {
+      const selectedNode = items?.graph.nodes.find(
+        (node) => node.label === selectedNodeDetails.label
+      );
+      const details = {
+        label: selectedNode.label,
+        average_latency: selectedNode.average_latency,
+        error_rate: selectedNode.error_rate,
+        throughput: selectedNode.throughput,
+      };
+      setSelectedNodeDetails(details);
+    }
+  }, [items]);
+
   useEffect(() => {
     if (Object.keys(serviceMap).length === 0) return;
     const values = Object.keys(serviceMap)
@@ -228,7 +248,6 @@ export function ServiceMap({
         filterByCurrService
       )
     );
-    setSelectedNodeDetails(null);
   }, [serviceMap, idSelected]);
 
   return (
diff --git a/public/components/trace_analytics/components/common/search_bar.tsx b/public/components/trace_analytics/components/common/search_bar.tsx
index 7dd8dcf6b..7c24014a6 100644
--- a/public/components/trace_analytics/components/common/search_bar.tsx
+++ b/public/components/trace_analytics/components/common/search_bar.tsx
@@ -4,18 +4,17 @@
  */
 
 import {
+  EuiButtonIcon,
+  EuiCompressedFieldSearch,
   EuiFlexGroup,
   EuiFlexItem,
   EuiSuperDatePicker,
-  EuiButtonIcon,
-  EuiCompressedFieldSearch,
 } from '@elastic/eui';
+import { i18n } from '@osd/i18n';
 import debounce from 'lodash/debounce';
 import React, { forwardRef, useImperativeHandle, useState } from 'react';
-import { i18n } from '@osd/i18n';
 import { uiSettingsService } from '../../../../../common/utils';
-import { FiltersProps } from './filters/filters';
-import { GlobalFilterButton } from './filters/filters';
+import { FiltersProps, GlobalFilterButton } from './filters/filters';
 
 export const renderDatePicker = (
   startTime: string,
@@ -87,7 +86,7 @@ export const SearchBar = forwardRef((props: SearchBarOwnProps, ref) => {
                 setQuery(e.target.value);
                 setGlobalQuery(e.target.value);
               }}
-              onSearch={props.refresh}
+              onSearch={(searchQuery) => props.refresh(undefined, searchQuery)}
             />
           </EuiFlexItem>
         )}
diff --git a/public/components/trace_analytics/components/traces/services_list.tsx b/public/components/trace_analytics/components/traces/services_list.tsx
index 69404c795..afb7737cf 100644
--- a/public/components/trace_analytics/components/traces/services_list.tsx
+++ b/public/components/trace_analytics/components/traces/services_list.tsx
@@ -32,17 +32,18 @@ export const ServicesList = ({
   const [options, setOptions] = useState<Array<{ label: string }>>([]);
 
   const nameColumnAction = (serviceName: string) => {
-    if (addFilter) {
-      addFilter({
-        field: 'serviceName',
-        operator: 'is',
-        value: serviceName,
-        inverted: false,
-        disabled: false,
-      });
-      setFilteredService(serviceName);
+    if (!addFilter) return;
+    addFilter({
+      field: 'serviceName',
+      operator: 'is',
+      value: serviceName,
+      inverted: false,
+      disabled: false,
+    });
+    setFilteredService(serviceName);
+    setTimeout(function () {
       window.scrollTo({ left: 0, top: 0, behavior: 'smooth' });
-    }
+    }, 500);
   };
 
   const titleBar = useMemo(
diff --git a/public/components/trace_analytics/components/traces/traces_content.tsx b/public/components/trace_analytics/components/traces/traces_content.tsx
index c6ae79ce7..4ed479870 100644
--- a/public/components/trace_analytics/components/traces/traces_content.tsx
+++ b/public/components/trace_analytics/components/traces/traces_content.tsx
@@ -41,7 +41,7 @@ export function TracesContent(props: TracesProps) {
     chrome,
     query,
     filters,
-    appConfigs,
+    appConfigs = [],
     startTime,
     endTime,
     childBreadcrumbs,
@@ -131,12 +131,13 @@ export function TracesContent(props: TracesProps) {
     setFilters(newFilters);
   };
 
-  const refresh = async (sort?: PropertySort) => {
+  const refresh = async (sort?: PropertySort, overrideQuery?: string) => {
+    const filterQuery = overrideQuery ?? query;
     setLoading(true);
     const DSL = filtersToDsl(
       mode,
       filters,
-      query,
+      filterQuery,
       processTimeStamp(startTime, mode),
       processTimeStamp(endTime, mode),
       page,