[Home] configurable image src for video link

Allows for configuring of the image src. Will default use the screenshot if nothing is supplied. Includes fix for getting started to use the dark/light mode mark icon. Includes fix for default values for the prompts. Signed-off-by: Kawika Avilla <kavilla414@gmail.com>
opensearch-project · Nov 28, 2023 · 94b334b · 94b334b
1 parent 80e5ed6
commit 94b334b
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 31 deletions.
diff --git a/src/plugins/home/config.ts b/src/plugins/home/config.ts
@@ -76,25 +76,19 @@ export const configSchema = schema.object({
             text: 'How many errors are there in my logs?',
             app: 'observability-logs',
             path:
-              '#/explorer?datasourceType=DEFAULT_INDEX_PATTERNS&indexPattern=sso-logs&datasourceName=Default%20cluster',
+              '#/explorer?datasourceType=DEFAULT_INDEX_PATTERNS&indexPattern=sso_logs-%2A.%2A&datasourceName=Default%20cluster&olly_q=How%20many%20errors%20are%20there%20in%20my%20logs%3F',
           },
           {
             text: 'Show me the number of flights each day?',
             app: 'observability-logs',
             path:
-              '#/explorer?datasourceType=DEFAULT_INDEX_PATTERNS&indexPattern=opensearch_dashboards_sample_data_flights&datasourceName=Default%20cluster',
+              '#/explorer?datasourceType=DEFAULT_INDEX_PATTERNS&indexPattern=opensearch_dashboards_sample_data_flights&datasourceName=Default%20cluster&olly_q=Show%20me%20the%20number%20of%20flights%20each%20day%3F',
           },
           {
             text: 'What are top visited urls on my website?',
             app: 'observability-logs',
             path:
-              '#/explorer?datasourceType=DEFAULT_INDEX_PATTERNS&indexPattern=opensearch_dashboards_sample_data_logs&datasourceName=Default%20cluster',
-          },
-          {
-            text: 'Show me the number of orders grouped by gender',
-            app: 'observability-logs',
-            path:
-              '#/explorer?datasourceType=DEFAULT_INDEX_PATTERNS&indexPattern=opensearch_dashboards_sample_data_ecommerce&datasourceName=Default%20cluster',
+              '#/explorer?datasourceType=DEFAULT_INDEX_PATTERNS&indexPattern=opensearch_dashboards_sample_data_logs&datasourceName=Default%20cluster&olly_q=What%20are%20top%20visited%20urls%20on%20my%20website%3F',
           },
         ],
       }

diff --git a/src/plugins/home/public/application/components/homepage/hero_section/get_started.tsx b/src/plugins/home/public/application/components/homepage/hero_section/get_started.tsx
@@ -20,12 +20,12 @@ import {
 import { HeroSection } from './hero_section';
 import illustration from '../../../../assets/illustration.svg';
 import { getServices } from '../../../opensearch_dashboards_services';
-import screenshot from '../../../../assets/screenshot.png';
 
 export const GetStartedSection: React.FC<{ olly?: boolean }> = ({ olly = true }) => {
   const services = getServices();
   const getUrl = services.application.getUrlForApp;
   const navigate = services.application.navigateToApp;
+  const addBasePath = services.http.basePath.prepend;
   const logos = services.chrome.logos;
   const heroConfig = services.homeConfig.hero;
   const isHeroEnabled = heroConfig.enabled;
@@ -67,6 +67,33 @@ export const GetStartedSection: React.FC<{ olly?: boolean }> = ({ olly = true })
     </EuiButton>
   );
 
+  const illustrationPanel = heroConfig.img ? (
+    <div className="home-hero-illustrationContainer">
+      <EuiButtonIcon
+        target="_blank"
+        rel="noopener noreferrer"
+        href={heroConfig.img.link}
+        aria-labelledby="home-hero-illustrationPlay"
+        className="home-hero-illustrationButton"
+        display="fill"
+        iconType="play"
+        iconSize="l"
+        size="m"
+      />
+      <EuiImage src={getIllustrationImage()} alt="getting started preview" />
+    </div>
+  ) : (
+    <EuiImage src={getIllustrationImage()} alt="getting started preview" />
+  );
+
+  function getIllustrationImage() {
+    if (heroConfig.img?.src) {
+      return heroConfig.img!.src;
+    }
+
+    return addBasePath('/plugins/home/assets/screenshot.png');
+  }
+
   const content = olly ? (
     renderCategories()
   ) : (
@@ -137,26 +164,7 @@ export const GetStartedSection: React.FC<{ olly?: boolean }> = ({ olly = true })
       links={links}
       actionButton={actionButton}
       content={content}
-      illustration={
-        heroConfig.img ? (
-          <div className="home-hero-illustrationContainer">
-            <EuiButtonIcon
-              target="_blank"
-              rel="noopener noreferrer"
-              href={heroConfig.img.link}
-              aria-labelledby="home-hero-illustrationPlay"
-              className="home-hero-illustrationButton"
-              display="fill"
-              iconType="play"
-              iconSize="l"
-              size="m"
-            />
-            <EuiImage src={screenshot} alt="Animated gif 16:9 ratio" />
-          </div>
-        ) : (
-          <EuiImage src={screenshot} alt="Animated gif 16:9 ratio" />
-        )
-      }
+      illustration={illustrationPanel}
     />
   );
 };
diff --git a/src/plugins/home/public/application/components/homepage/section/basics.tsx b/src/plugins/home/public/application/components/homepage/section/basics.tsx
@@ -15,8 +15,12 @@ import {
   IconType,
 } from '@elastic/eui';
 import { Section } from './section';
+import { getServices } from '../../../opensearch_dashboards_services';
 
 export const BasicsSection: React.FC<{ initiallyOpen?: boolean }> = ({ initiallyOpen }) => {
+  const services = getServices();
+  const logos = services.chrome.logos;
+
   const gettingStartedLinks: EuiListGroupItemProps[] = [
     {
       label: i18n.translate('home.basics.gettingStarted.quickstart', {
@@ -101,7 +105,7 @@ export const BasicsSection: React.FC<{ initiallyOpen?: boolean }> = ({ initially
     <EuiFlexGroup wrap direction="row" alignItems="stretch">
       <EuiFlexItem>
         {renderCard(
-          'logoOpenSearch',
+          logos.Mark.url,
           i18n.translate('home.basics.gettingStarted.title', {
             defaultMessage: 'Getting started',
           }),