diff --git a/src/@newrelic/gatsby-theme-newrelic/icons/feather.js b/src/@newrelic/gatsby-theme-newrelic/icons/feather.js index 8ecbc4d52..b2d5b6422 100644 --- a/src/@newrelic/gatsby-theme-newrelic/icons/feather.js +++ b/src/@newrelic/gatsby-theme-newrelic/icons/feather.js @@ -73,4 +73,10 @@ export default { twitter: ( ), + edit: ( + <> + + + + ), }; diff --git a/src/templates/ObservabilityPackDetails.js b/src/templates/ObservabilityPackDetails.js index f7a55dd9b..a1c81c86c 100644 --- a/src/templates/ObservabilityPackDetails.js +++ b/src/templates/ObservabilityPackDetails.js @@ -53,6 +53,159 @@ const SUPPORT_CONTENT = { }, }; +const renderDashboards = (pack) => { + const content = pack.dashboards.map((dashboard) => ( + <> +

{dashboard.name}

+ + {dashboard.description && ( + <> +

Description

+

{dashboard.description}

+ + )} + + )); + + return ( + <> + + {pack.name} observability pack contains{' '} + {pluralize('dashboard', pack.dashboards?.length ?? 0, true)}. These + interactive visualizations let you easily explore your data, understand + context, and resolve problems faster. + + {content} + + ); +}; + +const renderAlerts = (pack) => { + const alertContent = pack.alerts.map((alert) => ( + <> +

{alert.name}

+ {alert.description && ( + <> +

Description

+

{alert.description}

+ + )} + + )); + + return ( + <> + + {pack.name} observability pack contains{' '} + {pluralize('alert', pack.alerts?.length ?? 0, true)}. These alerts + detect changes in key performance metrics. Integrate these alerts with + your favorite tools (like Slack, PagerDuty, etc.) and New Relic will let + you know when something needs your attention. + + {alertContent} + + ); +}; + +const renderSynthetics = (pack) => { + return ( + + {pack.name} observability pack includes{' '} + {pluralize('Synthetics check', pack.synthetics?.length ?? 0, true)}. These + checks will run automatically to simulate user traffic and ensure your + site or API endpoint is not only available, but fully functional. + + ); +}; + +const renderVisualizations = (pack) => { + return ( + + {pack.name} observability pack includes{' '} + {pluralize('visualization', pack.visualizations?.length ?? 0, true)}. + These charts have been customized to represent data in a way that a + standard dashboard isn’t able to, so you can monitor what’s essential. + + ); +}; + +const emptyStateContent = (pack) => { + return ( +
+
+ +
+

+ I'm baby quinoa DIY narwhal artisan organic slow-carb cliche twee. Kogi + YOLO meggings quinoa affogato vegan bespoke hashtag. VHS skateboard palo + santo, gastropub edison bulb asymmetrical humblebrag plaid disrupt. + Activated charcoal glossier kinfolk before they sold out pok pok quinoa + bicycle rights humblebrag fanny pack church-key enamel pin. +

+
+ +
+
+ ); +}; + const ObservabilityPackDetails = ({ data, location }) => { const pack = data.observabilityPacks; const tessen = useTessen(); @@ -102,30 +255,17 @@ const ObservabilityPackDetails = ({ data, location }) => { `} > Overview - + Dashboards - + Alerts - + Synthetics Visualizations @@ -140,100 +280,23 @@ const ObservabilityPackDetails = ({ data, location }) => { {pack.description} - - - Before you install the {pack.name} observability pack, make - sure you meet the requirements documented below. - - - {pack.dashboards?.map((dashboard) => ( - <> -

{dashboard.name}

- - {dashboard.description && ( - <> -

Description

-

{dashboard.description}

- - )} - - ))} - - {pack.name} observability pack contains{' '} - {pluralize('dashboard', pack.dashboards?.length ?? 0, true)}. - These interactive visualizations let you easily explore your - data, understand context, and resolve problems faster. - + {pack.dashboards + ? renderDashboards(pack.dashboards) + : emptyStateContent(pack)} - - {pack.name} observability pack contains{' '} - {pluralize('alert', pack.alerts?.length ?? 0, true)}. These - alerts detect changes in key performance metrics. Integrate - these alerts with your favorite tools (like Slack, PagerDuty, - etc.) and New Relic will let you know when something needs - your attention. - + {pack.alerts + ? renderAlerts(pack.alerts) + : emptyStateContent(pack)} - - {pack.name} observability pack includes{' '} - {pluralize( - 'Synthetics check', - pack.synthetics?.length ?? 0, - true - )} - . These checks will run automatically to simulate user traffic - and ensure your site or API endpoint is not only available, - but fully functional. - + {pack.synthetics ? renderSynthetics() : emptyStateContent(pack)} - - {pack.name} observability pack includes{' '} - {pluralize( - 'visualization', - pack.visualizations?.length ?? 0, - true - )} - . These charts have been customized to represent data in a way - that a standard dashboard isn’t able to, so you can monitor - what’s essential. - - - - - Nerdpacks are custom applications that extend the monitoring - capabilities of the New Relic One platform. {pack.name} - observability pack includes{' '} - {pluralize('Nerdpack', pack.nerdpacks?.length ?? 0, true)} to - make sure you’re monitoring what matters. - + {pack.visualizations + ? renderVisualizations() + : emptyStateContent(pack)} @@ -340,5 +403,3 @@ export const pageQuery = graphql` } } `; - -export default ObservabilityPackDetails;