diff --git a/package.json b/package.json index 420db0838..282e7fedb 100644 --- a/package.json +++ b/package.json @@ -37,6 +37,7 @@ "lodash.get": "^4.4.2", "node-fetch": "^2.6.1", "node-sass": "^4.14.1", + "pluralize": "^8.0.0", "prism-react-renderer": "^1.1.1", "prismjs": "^1.21.0", "prop-types": "^15.7.2", diff --git a/src/templates/ObservabilityPackDetails.js b/src/templates/ObservabilityPackDetails.js index 14367fab8..f7a55dd9b 100644 --- a/src/templates/ObservabilityPackDetails.js +++ b/src/templates/ObservabilityPackDetails.js @@ -20,6 +20,7 @@ import InstallButton from '../components/InstallButton'; import ImageSlider from '../components/ImageSlider'; import getPackUrl from '../utils/get-pack-url'; import Markdown from '../components/Markdown'; +import pluralize from 'pluralize'; const allowedElements = [ 'h1', @@ -145,31 +146,11 @@ const ObservabilityPackDetails = ({ data, location }) => { margin-bottom: 16px; `} > - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed - do eiusmod tempor incididunt ut labore et dolore magna aliqua. - Ut enim ad minim veniam, quis nostrud exercitation ullamco - laboris nisi ut aliquip ex ea commodo consequat. Duis aute - irure dolor in reprehenderit in voluptate velit esse cillum - dolore eu fugiat nulla pariatur. Excepteur sint occaecat - cupidatat non proident, sunt in culpa qui officia deserunt - mollit anim id est laborum. + Before you install the {pack.name} observability pack, make + sure you meet the requirements documented below. - - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed - do eiusmod tempor incididunt ut labore et dolore magna aliqua. - Ut enim ad minim veniam, quis nostrud exercitation ullamco - laboris nisi ut aliquip ex ea commodo consequat. Duis aute - irure dolor in reprehenderit in voluptate velit esse cillum - dolore eu fugiat nulla pariatur. Excepteur sint occaecat - cupidatat non proident, sunt in culpa qui officia deserunt - mollit anim id est laborum. - {pack.dashboards?.map((dashboard) => ( <>

{dashboard.name}

@@ -182,6 +163,16 @@ const ObservabilityPackDetails = ({ data, location }) => { )} ))} + + {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. +
{ margin-bottom: 16px; `} > - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed - do eiusmod tempor incididunt ut labore et dolore magna aliqua. - Ut enim ad minim veniam, quis nostrud exercitation ullamco - laboris nisi ut aliquip ex ea commodo consequat. Duis aute - irure dolor in reprehenderit in voluptate velit esse cillum - dolore eu fugiat nulla pariatur. Excepteur sint occaecat - cupidatat non proident, sunt in culpa qui officia deserunt - mollit anim id est laborum. + {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?.map((alert) => ( - <> -

{alert.name}

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

Description

-

{alert.description}

- - )} - - ))}
{ margin-bottom: 16px; `} > - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed - do eiusmod tempor incididunt ut labore et dolore magna aliqua. - Ut enim ad minim veniam, quis nostrud exercitation ullamco - laboris nisi ut aliquip ex ea commodo consequat. Duis aute - irure dolor in reprehenderit in voluptate velit esse cillum - dolore eu fugiat nulla pariatur. Excepteur sint occaecat - cupidatat non proident, sunt in culpa qui officia deserunt - mollit anim id est laborum. + {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. @@ -232,14 +211,15 @@ const ObservabilityPackDetails = ({ data, location }) => { margin-bottom: 16px; `} > - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed - do eiusmod tempor incididunt ut labore et dolore magna aliqua. - Ut enim ad minim veniam, quis nostrud exercitation ullamco - laboris nisi ut aliquip ex ea commodo consequat. Duis aute - irure dolor in reprehenderit in voluptate velit esse cillum - dolore eu fugiat nulla pariatur. Excepteur sint occaecat - cupidatat non proident, sunt in culpa qui officia deserunt - mollit anim id est laborum. + {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. @@ -248,14 +228,11 @@ const ObservabilityPackDetails = ({ data, location }) => { margin-bottom: 16px; `} > - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed - do eiusmod tempor incididunt ut labore et dolore magna aliqua. - Ut enim ad minim veniam, quis nostrud exercitation ullamco - laboris nisi ut aliquip ex ea commodo consequat. Duis aute - irure dolor in reprehenderit in voluptate velit esse cillum - dolore eu fugiat nulla pariatur. Excepteur sint occaecat - cupidatat non proident, sunt in culpa qui officia deserunt - mollit anim id est laborum. + 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. diff --git a/yarn.lock b/yarn.lock index 0631c706c..bcce591f5 100644 --- a/yarn.lock +++ b/yarn.lock @@ -15120,6 +15120,11 @@ pluralize@^7.0.0: resolved "https://registry.npmjs.org/pluralize/-/pluralize-7.0.0.tgz" integrity sha512-ARhBOdzS3e41FbkW/XWrTEtukqqLoK5+Z/4UeDaLuSW+39JPeFgs4gCGqsrJHVZX0fUrx//4OF0K1CUGwlIFow== +pluralize@^8.0.0: + version "8.0.0" + resolved "https://registry.yarnpkg.com/pluralize/-/pluralize-8.0.0.tgz#1a6fa16a38d12a1901e0320fa017051c539ce3b1" + integrity sha512-Nc3IT5yHzflTfbjgqWcCPpo7DaKy4FnpB0l/zCAW0Tc7jxAiuqSxHasntB3D7887LSrA93kDJ9IXovxJYxyLCA== + pngjs@^3.0.0, pngjs@^3.3.3: version "3.4.0" resolved "https://registry.npmjs.org/pngjs/-/pngjs-3.4.0.tgz"