feat(ui): add deployments option accordion

influxdata · Dec 18, 2023 · a1f6d7f · a1f6d7f
1 parent 32976ea
commit a1f6d7f
Show file tree

Hide file tree

Showing 2 changed files with 82 additions and 0 deletions.
diff --git a/src/homepageExperience/components/OptionAccordion/DeployAccordion.tsx b/src/homepageExperience/components/OptionAccordion/DeployAccordion.tsx
@@ -0,0 +1,80 @@
+// Libraries
+import React, {FC} from 'react'
+
+// Components
+import {IconFont, InfluxColors} from '@influxdata/clockface'
+import {OptionAccordion} from 'src/homepageExperience/components/OptionAccordion/OptionAccordion'
+import {OptionAccordionElement} from 'src/homepageExperience/components/OptionAccordion/OptionAccordionElement'
+import {OptionLink} from './OptionLink'
+
+// Utils
+import {event} from 'src/cloud/utils/reporting'
+
+export const DeployAccordion: FC = () => {
+  const optionId = 'deployInstance'
+
+  const handleServerlessClick = () => {
+    event(`homeOptions.${optionId}.serverless.clicked`)
+  }
+
+  const handleDedicatedClick = () => {
+    event(`homeOptions.${optionId}.dedicated.clicked`)
+  }
+
+  const handleClusteredClick = () => {
+    event(`homeOptions.${optionId}.clustered.clicked`)
+  }
+
+  return (
+    <OptionAccordion
+      headerIcon={IconFont.Cube}
+      headerIconColor={InfluxColors.Star}
+      headerTitle="Deploy"
+      headerDescription="Run InfluxDB where you need it."
+      optionId="deployInstance"
+      bodyContent={
+        <>
+          <OptionAccordionElement
+            elementTitle="Cloud Serverless"
+            elementDescription="A fully managed, elastic, multi-tenant service best for smaller workloads."
+            cta={() => {
+              return (
+                <OptionLink
+                  title="Learn More"
+                  href="https://docs.influxdata.com/influxdb/cloud-serverless/"
+                  onClick={handleServerlessClick}
+                />
+              )
+            }}
+          />
+          <OptionAccordionElement
+            elementTitle="Cloud Dedicated"
+            elementDescription="A fully managed, single-tenant service for high volume production workloads."
+            cta={() => {
+              return (
+                <OptionLink
+                  title="Learn More"
+                  href="https://docs.influxdata.com/influxdb/cloud-dedicated/"
+                  onClick={handleDedicatedClick}
+                />
+              )
+            }}
+          />
+          <OptionAccordionElement
+            elementTitle="Clustered"
+            elementDescription="A self-managed database for on-premises or private cloud deployments."
+            cta={() => {
+              return (
+                <OptionLink
+                  title="Learn More"
+                  href="https://docs.influxdata.com/influxdb/clustered/"
+                  onClick={handleClusteredClick}
+                />
+              )
+            }}
+          />
+        </>
+      }
+    />
+  )
+}
diff --git a/src/homepageExperience/containers/HomepageContents.tsx b/src/homepageExperience/containers/HomepageContents.tsx
@@ -26,6 +26,7 @@ import {ManageDatabasesAccordion} from 'src/homepageExperience/components/Option
 import {AddDataAccordion} from 'src/homepageExperience/components/OptionAccordion/AddDataAccordion'
 import {QueryDataAccordion} from 'src/homepageExperience/components/OptionAccordion/QueryDataAccordion'
 import {VisualizeAccordion} from 'src/homepageExperience/components/OptionAccordion/VisualizeAccordion'
+import {DeployAccordion} from 'src/homepageExperience/components/OptionAccordion/DeployAccordion'
 
 // Styles
 import 'src/homepageExperience/containers/HomepageContents.scss'
@@ -66,6 +67,7 @@ export const HomepageContents: FC = () => {
                   <AddDataAccordion />
                   <QueryDataAccordion />
                   <VisualizeAccordion />
+                  <DeployAccordion />
                 </FlexBox.Child>
               </FlexBox>
             </Grid.Column>