From ab0739b96a17b28c3d8a208a38887df7dba2f57c Mon Sep 17 00:00:00 2001 From: lbaker Date: Wed, 2 Jun 2021 14:48:43 -0700 Subject: [PATCH 01/12] chore: Create pages for olly packs --- gatsby-node.js | 19 +++++++++++++++++-- 1 file changed, 17 insertions(+), 2 deletions(-) diff --git a/gatsby-node.js b/gatsby-node.js index eff903b53..3e967287d 100644 --- a/gatsby-node.js +++ b/gatsby-node.js @@ -1,8 +1,7 @@ const path = require(`path`); const { execSync } = require('child_process'); const { createFilePath } = require('gatsby-source-filesystem'); - -const MAX_RESULTS = 5; +const { observabilityPacks } = require('./src/data/observability-packs.json'); const kebabCase = (string) => string @@ -97,6 +96,22 @@ exports.createPages = async ({ actions, graphql, reporter }) => { }); }); + observabilityPacks.forEach((pack) => { + const { name } = pack; + const urlNormalizedName = kebabCase(name); + + const slug = `/observability-packs/${urlNormalizedName}`; + + createPage({ + path: path.join(slug, '/'), + component: path.resolve('./src/templates/ObservabilityPackDetails.js'), + context: { + slug, + pack, + }, + }); + }); + allNewRelicSdkComponent.edges.forEach(({ node }) => { const { fields: { slug }, From 728a11b750f4572d11a39e82cfed5bcd864f5493 Mon Sep 17 00:00:00 2001 From: lbaker Date: Wed, 2 Jun 2021 14:48:58 -0700 Subject: [PATCH 02/12] chore: Add star to feather icons --- src/components/FeatherIcon.js | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/components/FeatherIcon.js b/src/components/FeatherIcon.js index 1aa32612e..83ac46148 100644 --- a/src/components/FeatherIcon.js +++ b/src/components/FeatherIcon.js @@ -112,6 +112,9 @@ const ICONS = { ), + star: ( + + ), sun: ( <> From 24688d98ede02d00b47872c43ddac462227a2eb3 Mon Sep 17 00:00:00 2001 From: lbaker Date: Wed, 2 Jun 2021 14:51:15 -0700 Subject: [PATCH 03/12] chore: Add image placeholder --- src/images/no-image-placeholder.png | Bin 0 -> 13119 bytes 1 file changed, 0 insertions(+), 0 deletions(-) create mode 100644 src/images/no-image-placeholder.png diff --git a/src/images/no-image-placeholder.png b/src/images/no-image-placeholder.png new file mode 100644 index 0000000000000000000000000000000000000000..a9c9d68687467268b002654ff65e7f2093f2b79a GIT binary patch literal 13119 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 Date: Wed, 2 Jun 2021 14:51:40 -0700 Subject: [PATCH 04/12] WIP: Add olly pack details template --- src/templates/ObservabilityPackDetails.js | 189 ++++++++++++++++++++++ 1 file changed, 189 insertions(+) create mode 100644 src/templates/ObservabilityPackDetails.js diff --git a/src/templates/ObservabilityPackDetails.js b/src/templates/ObservabilityPackDetails.js new file mode 100644 index 000000000..cdc346036 --- /dev/null +++ b/src/templates/ObservabilityPackDetails.js @@ -0,0 +1,189 @@ +import React from 'react'; +import { graphql } from 'gatsby'; +import { css } from '@emotion/react'; +import PropTypes from 'prop-types'; + +import PageLayout from '../components/PageLayout'; +import FeatherIcon from '../components/FeatherIcon'; +import DevSiteSeo from '../components/DevSiteSeo'; +import noImagePlaceholder from '../images/no-image-placeholder.png'; +import { + Layout, + PageTools, + ExternalLink, + Button, +} from '@newrelic/gatsby-theme-newrelic'; + +const exampleContributors = [ + { avatar_url: 'https://avatars.githubusercontent.com/u/583231?v=4' }, + { avatar_url: 'https://avatars.githubusercontent.com/u/583231?v=4' }, + { avatar_url: 'https://avatars.githubusercontent.com/u/583231?v=4' }, + { avatar_url: 'https://avatars.githubusercontent.com/u/583231?v=4' }, +]; + +const ObservabilityPackDetails = ({ data }) => { + console.log(data); + const { pack, slug } = data.sitePage.context; + + return ( + <> + {/* */} + + + {' '} + + + + {/* carousel component if we decide to use multiple images */} + placeholder +

Description

+

{pack.description}

+ + + + Ratings and installs + {/* probably want a component for the ratings */} + + + + + +

37 ratings from 247 installs

+ + + How to use this pack +
    +
  1. + Sign up for a free New Relic account (or log in to your existing + account) +
    2. +
  2. Click the green install button above
    3. +
  3. + Follow the instructions to install the necessary instrumentation + to get the data used in this pack +
    4. +
  4. + Enjoy the dashboards, alerts, and appications filled with + insights on our environment and services. +
    5. +
+ + + Contributors +
+ {exampleContributors.map(({ avatar_url }) => ( + github avatar + ))} +
+

+ Want to contribute to this observability pack?{' '} + Go to the repo +

+ + + + + ); +}; + +ObservabilityPackDetails.propTypes = { + data: PropTypes.object, +}; + +export const pageQuery = graphql` + query($slug: String!) { + sitePage(context: { slug: { eq: $slug } }) { + context { + slug + pack { + name + website + logo + level + id + icon + description + alerts { + name + definition + url + } + dashboards { + description + name + screenshots + url + } + authors + } + } + } + } +`; + +export default ObservabilityPackDetails; From 2d14d2a536fd7aec74cc551d9f08b088723fbaee Mon Sep 17 00:00:00 2001 From: lbaker Date: Wed, 2 Jun 2021 16:26:06 -0700 Subject: [PATCH 05/12] chore: Remove slug from olly pack details context --- gatsby-node.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/gatsby-node.js b/gatsby-node.js index 3e967287d..450bded13 100644 --- a/gatsby-node.js +++ b/gatsby-node.js @@ -1,7 +1,7 @@ const path = require(`path`); const { execSync } = require('child_process'); const { createFilePath } = require('gatsby-source-filesystem'); -const { observabilityPacks } = require('./src/data/observability-packs.json'); +const observabilityPacks = require('./src/data/observability-packs.json'); const kebabCase = (string) => string @@ -106,7 +106,6 @@ exports.createPages = async ({ actions, graphql, reporter }) => { path: path.join(slug, '/'), component: path.resolve('./src/templates/ObservabilityPackDetails.js'), context: { - slug, pack, }, }); From 5ff0defe84295887944049d930d76e69f83b513c Mon Sep 17 00:00:00 2001 From: lbaker Date: Wed, 2 Jun 2021 16:26:48 -0700 Subject: [PATCH 06/12] chore: Adjust styles, pass classNames --- src/components/PageLayout/Header.js | 5 ++++- src/components/Tabs/Bar.js | 7 +++++-- src/components/Tabs/BarItem.js | 3 +-- 3 files changed, 10 insertions(+), 5 deletions(-) diff --git a/src/components/PageLayout/Header.js b/src/components/PageLayout/Header.js index 2300f6bb1..6e271d642 100644 --- a/src/components/PageLayout/Header.js +++ b/src/components/PageLayout/Header.js @@ -2,11 +2,13 @@ import React from 'react'; import PropTypes from 'prop-types'; import { css } from '@emotion/react'; -const Header = ({ title, children }) => ( +const Header = ({ title, children, className }) => (
( ); Header.propTypes = { + className: PropTypes.string, children: PropTypes.node, title: PropTypes.string.isRequired, }; diff --git a/src/components/Tabs/Bar.js b/src/components/Tabs/Bar.js index 1f2a9f001..76c1688d1 100644 --- a/src/components/Tabs/Bar.js +++ b/src/components/Tabs/Bar.js @@ -43,7 +43,7 @@ MobileTabControl.propTypes = { children: PropTypes.node.isRequired, }; -const Bar = ({ children }) => { +const Bar = ({ children, className }) => { const detectMobile = useMobileDetect(); const isMobile = detectMobile.isMobile(); @@ -53,11 +53,13 @@ const Bar = ({ children }) => { return (
{React.Children.map(children, (child, index) => @@ -69,6 +71,7 @@ const Bar = ({ children }) => { Bar.propTypes = { children: PropTypes.node.isRequired, + className: PropTypes.string, }; export default Bar; diff --git a/src/components/Tabs/BarItem.js b/src/components/Tabs/BarItem.js index 246d60bd3..8f25dfb0e 100644 --- a/src/components/Tabs/BarItem.js +++ b/src/components/Tabs/BarItem.js @@ -29,7 +29,6 @@ const BarItem = ({ index, children, id, count, disabled }) => { user-select: none; white-space: nowrap; - .dark-mode & { border-bottom-color: var(--color-dark-300); } @@ -123,7 +122,7 @@ const BarItem = ({ index, children, id, count, disabled }) => { }; BarItem.propTypes = { - index: PropTypes.number.isRequired, + index: PropTypes.number, children: PropTypes.node.isRequired, id: PropTypes.string.isRequired, count: PropTypes.number, From b00e56b18489255d3de0ae49e00d44c83c978b5f Mon Sep 17 00:00:00 2001 From: lbaker Date: Wed, 2 Jun 2021 16:27:44 -0700 Subject: [PATCH 07/12] chore: Add tabs --- src/templates/ObservabilityPackDetails.js | 285 +++++++++++++--------- 1 file changed, 167 insertions(+), 118 deletions(-) diff --git a/src/templates/ObservabilityPackDetails.js b/src/templates/ObservabilityPackDetails.js index cdc346036..d62ede01e 100644 --- a/src/templates/ObservabilityPackDetails.js +++ b/src/templates/ObservabilityPackDetails.js @@ -5,7 +5,7 @@ import PropTypes from 'prop-types'; import PageLayout from '../components/PageLayout'; import FeatherIcon from '../components/FeatherIcon'; -import DevSiteSeo from '../components/DevSiteSeo'; +import Tabs from '../components/Tabs'; import noImagePlaceholder from '../images/no-image-placeholder.png'; import { Layout, @@ -22,131 +22,180 @@ const exampleContributors = [ ]; const ObservabilityPackDetails = ({ data }) => { - console.log(data); - const { pack, slug } = data.sitePage.context; + const { pack } = data.sitePage.context; return ( <> - {/* */} - - - {' '} - - - - {/* carousel component if we decide to use multiple images */} - placeholder -

Description

-

{pack.description}

- - - - Ratings and installs - {/* probably want a component for the ratings */} - + + + + - - - - -

37 ratings from 247 installs

- - - How to use this pack -
    -
  1. - Sign up for a free New Relic account (or log in to your existing - account) -
    2. -
  2. Click the green install button above
    3. -
  3. - Follow the instructions to install the necessary instrumentation - to get the data used in this pack -
    4. -
  4. - Enjoy the dashboards, alerts, and appications filled with - insights on our environment and services. -
    5. -
- - - Contributors -
- {exampleContributors.map(({ avatar_url }) => ( + Overview + Dependencies + + Dashboards + + + Alerts + + + Synthetics checks + + + Visualizations + + + Applications + + + + + + {/* carousel component if we decide to use multiple images */} + + github avatar - ))} -
-

- Want to contribute to this observability pack?{' '} - Go to the repo -

- - - +

Description

+

{pack.description}

+ + + {pack.dashboards.map((dashboard) => ( + <> +

{dashboard.name}

+ {dashboard.screenshots.map((screenshot, index) => ( + dashboard example + ))} + + ))} + + + + + + Ratings and installs + {/* probably want a component for the ratings if we keep them */} + + + + + +

37 ratings from 247 installs

+ + + How to use this pack +
    +
  1. + Sign up for a free New Relic account (or log in to your + existing account) +
    2. +
  2. Click the green install button above
    3. +
  3. + Follow the instructions to install the necessary + instrumentation to get the data used in this pack +
    4. +
  4. + Enjoy the dashboards, alerts, and appications filled with + insights on our environment and services. +
    5. +
+ + + Contributors +
+ {exampleContributors.map(({ avatar_url }) => ( + github avatar + ))} +
+

+ Want to contribute to this observability pack?{' '} + Go to the repo +

+ + + + ); }; From abcdf808c05eed2a12db0bddf882ccb14434174c Mon Sep 17 00:00:00 2001 From: lbaker Date: Wed, 2 Jun 2021 16:40:13 -0700 Subject: [PATCH 08/12] fix: Add back slug --- gatsby-node.js | 1 + 1 file changed, 1 insertion(+) diff --git a/gatsby-node.js b/gatsby-node.js index 450bded13..a5004277a 100644 --- a/gatsby-node.js +++ b/gatsby-node.js @@ -107,6 +107,7 @@ exports.createPages = async ({ actions, graphql, reporter }) => { component: path.resolve('./src/templates/ObservabilityPackDetails.js'), context: { pack, + slug, }, }); }); From 858a0b1eea08a078f9b75bba8f09eee8fc20dc60 Mon Sep 17 00:00:00 2001 From: lbaker Date: Wed, 2 Jun 2021 17:00:00 -0700 Subject: [PATCH 09/12] chore: Add some optional chaining to dashboard render --- src/templates/ObservabilityPackDetails.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/templates/ObservabilityPackDetails.js b/src/templates/ObservabilityPackDetails.js index d62ede01e..ab2226ee2 100644 --- a/src/templates/ObservabilityPackDetails.js +++ b/src/templates/ObservabilityPackDetails.js @@ -75,10 +75,10 @@ const ObservabilityPackDetails = ({ data }) => {

{pack.description}

- {pack.dashboards.map((dashboard) => ( + {pack.dashboards?.map((dashboard) => ( <> -

{dashboard.name}

- {dashboard.screenshots.map((screenshot, index) => ( +

{dashboard?.name}

+ {dashboard?.screenshots?.map((screenshot, index) => ( dashboard example Date: Thu, 3 Jun 2021 15:53:32 -0700 Subject: [PATCH 10/12] chore: Minor updates to pull in landing page --- gatsby-node.js | 29 ++++++++++---- src/pages/observability-packs.js | 3 +- src/templates/ObservabilityPackDetails.js | 47 ++++++++++------------- src/utils/slugify.js | 9 +++++ 4 files changed, 53 insertions(+), 35 deletions(-) create mode 100644 src/utils/slugify.js diff --git a/gatsby-node.js b/gatsby-node.js index a5004277a..863be5197 100644 --- a/gatsby-node.js +++ b/gatsby-node.js @@ -1,7 +1,7 @@ const path = require(`path`); const { execSync } = require('child_process'); const { createFilePath } = require('gatsby-source-filesystem'); -const observabilityPacks = require('./src/data/observability-packs.json'); +const slugify = require('./src/utils/slugify.js'); const kebabCase = (string) => string @@ -52,6 +52,15 @@ exports.createPages = async ({ actions, graphql, reporter }) => { } } } + + allObservabilityPacks { + edges { + node { + name + id + } + } + } } `); @@ -61,7 +70,12 @@ exports.createPages = async ({ actions, graphql, reporter }) => { return; } - const { allMdx, allNewRelicSdkComponent, allNewRelicSdkApi } = result.data; + const { + allMdx, + allNewRelicSdkComponent, + allNewRelicSdkApi, + allObservabilityPacks, + } = result.data; allMdx.edges.forEach(({ node }) => { const { @@ -96,18 +110,17 @@ exports.createPages = async ({ actions, graphql, reporter }) => { }); }); - observabilityPacks.forEach((pack) => { - const { name } = pack; - const urlNormalizedName = kebabCase(name); + allObservabilityPacks.edges.forEach(({ node }) => { + const { name, id } = node; - const slug = `/observability-packs/${urlNormalizedName}`; + const slug = `/observability-packs/${slugify(name)}/${id}`; + console.log(slug); createPage({ path: path.join(slug, '/'), component: path.resolve('./src/templates/ObservabilityPackDetails.js'), context: { - pack, - slug, + id, }, }); }); diff --git a/src/pages/observability-packs.js b/src/pages/observability-packs.js index fdb127b4e..e40934054 100644 --- a/src/pages/observability-packs.js +++ b/src/pages/observability-packs.js @@ -5,6 +5,7 @@ import DevSiteSeo from '../components/DevSiteSeo'; import { css } from '@emotion/react'; import PackTile from '../components/PackTile'; import PackList from '../components/PackList'; +import slugify from '../utils/slugify'; import { SearchInput, Button, Dropdown } from '@newrelic/gatsby-theme-newrelic'; const ObservabilityPacksPage = ({ data, location }) => { @@ -131,7 +132,7 @@ const ObservabilityPacksPage = ({ data, location }) => { featuredImageUrl={ imgSrc || 'https://via.placeholder.com/400x275.png?text=Image' } - to={`/observability-packs/${pack.name}/${pack.id}`} + to={`/observability-packs/${slugify(pack.name)}/${pack.id}`} /> ); })} diff --git a/src/templates/ObservabilityPackDetails.js b/src/templates/ObservabilityPackDetails.js index ab2226ee2..90b0d57b4 100644 --- a/src/templates/ObservabilityPackDetails.js +++ b/src/templates/ObservabilityPackDetails.js @@ -22,7 +22,7 @@ const exampleContributors = [ ]; const ObservabilityPackDetails = ({ data }) => { - const { pack } = data.sitePage.context; + const pack = data.observabilityPacks; return ( <> @@ -205,32 +205,27 @@ ObservabilityPackDetails.propTypes = { }; export const pageQuery = graphql` - query($slug: String!) { - sitePage(context: { slug: { eq: $slug } }) { - context { - slug - pack { - name - website - logo - level - id - icon - description - alerts { - name - definition - url - } - dashboards { - description - name - screenshots - url - } - authors - } + query($id: String!) { + observabilityPacks(id: { eq: $id }) { + name + website + logo + level + id + icon + description + alerts { + name + definition + url } + dashboards { + description + name + screenshots + url + } + authors } } `; diff --git a/src/utils/slugify.js b/src/utils/slugify.js new file mode 100644 index 000000000..64631d0aa --- /dev/null +++ b/src/utils/slugify.js @@ -0,0 +1,9 @@ +const slugify = (str) => + str + .trim() + .toLowerCase() + .replace(/\s+/g, '-') + .replace(/-+/, '-') + .replace(/[^a-z0-9-]/g, ''); + +module.exports = slugify; From 603e07d621b3f4f3ee13ba06ba1ad1ae4c4d1b0b Mon Sep 17 00:00:00 2001 From: lbaker Date: Fri, 4 Jun 2021 14:07:17 -0700 Subject: [PATCH 11/12] chore: Add slug to the ollypack node fields --- gatsby-node.js | 20 +++++++++++++++----- src/pages/observability-packs.js | 6 ++++-- 2 files changed, 19 insertions(+), 7 deletions(-) diff --git a/gatsby-node.js b/gatsby-node.js index 863be5197..8104a83ab 100644 --- a/gatsby-node.js +++ b/gatsby-node.js @@ -56,7 +56,9 @@ exports.createPages = async ({ actions, graphql, reporter }) => { allObservabilityPacks { edges { node { - name + fields { + slug + } id } } @@ -111,10 +113,10 @@ exports.createPages = async ({ actions, graphql, reporter }) => { }); allObservabilityPacks.edges.forEach(({ node }) => { - const { name, id } = node; - - const slug = `/observability-packs/${slugify(name)}/${id}`; - console.log(slug); + const { + fields: { slug }, + id, + } = node; createPage({ path: path.join(slug, '/'), @@ -189,6 +191,14 @@ exports.onCreateNode = ({ node, getNode, actions }) => { value: `/apis/${kebabCase(node.name)}`, }); } + + if (node.internal.type === 'ObservabilityPacks') { + createNodeField({ + node, + name: 'slug', + value: `/observability-packs/${slugify(node.name)}/${node.id}`, + }); + } }; exports.onCreateWebpackConfig = ({ actions, plugins }) => { diff --git a/src/pages/observability-packs.js b/src/pages/observability-packs.js index e40934054..b631ca95e 100644 --- a/src/pages/observability-packs.js +++ b/src/pages/observability-packs.js @@ -5,7 +5,6 @@ import DevSiteSeo from '../components/DevSiteSeo'; import { css } from '@emotion/react'; import PackTile from '../components/PackTile'; import PackList from '../components/PackList'; -import slugify from '../utils/slugify'; import { SearchInput, Button, Dropdown } from '@newrelic/gatsby-theme-newrelic'; const ObservabilityPacksPage = ({ data, location }) => { @@ -132,7 +131,7 @@ const ObservabilityPacksPage = ({ data, location }) => { featuredImageUrl={ imgSrc || 'https://via.placeholder.com/400x275.png?text=Image' } - to={`/observability-packs/${slugify(pack.name)}/${pack.id}`} + to={`${pack.fields.slug}`} /> ); })} @@ -151,6 +150,9 @@ export const pageQuery = graphql` query { allObservabilityPacks { nodes { + fields { + slug + } id name website From d0788309dba36d57367d16468b0862e2e87ea08a Mon Sep 17 00:00:00 2001 From: Alec Swanson Date: Fri, 4 Jun 2021 15:38:44 -0700 Subject: [PATCH 12/12] feat: Update o11y pack details page * Tabs are now responsive to pack's content * "Applications" tab renamed to "Nerdpacks" * Added SEO component * Added "Authors" section to right bar * Removed placeholder content for GH contributors and ratings --- src/templates/ObservabilityPackDetails.js | 149 ++++++++-------------- 1 file changed, 54 insertions(+), 95 deletions(-) diff --git a/src/templates/ObservabilityPackDetails.js b/src/templates/ObservabilityPackDetails.js index 90b0d57b4..3092feb21 100644 --- a/src/templates/ObservabilityPackDetails.js +++ b/src/templates/ObservabilityPackDetails.js @@ -1,31 +1,19 @@ import React from 'react'; import { graphql } from 'gatsby'; import { css } from '@emotion/react'; +import DevSiteSeo from '../components/DevSiteSeo'; import PropTypes from 'prop-types'; - import PageLayout from '../components/PageLayout'; -import FeatherIcon from '../components/FeatherIcon'; import Tabs from '../components/Tabs'; import noImagePlaceholder from '../images/no-image-placeholder.png'; -import { - Layout, - PageTools, - ExternalLink, - Button, -} from '@newrelic/gatsby-theme-newrelic'; - -const exampleContributors = [ - { avatar_url: 'https://avatars.githubusercontent.com/u/583231?v=4' }, - { avatar_url: 'https://avatars.githubusercontent.com/u/583231?v=4' }, - { avatar_url: 'https://avatars.githubusercontent.com/u/583231?v=4' }, - { avatar_url: 'https://avatars.githubusercontent.com/u/583231?v=4' }, -]; +import { Layout, PageTools, Button } from '@newrelic/gatsby-theme-newrelic'; -const ObservabilityPackDetails = ({ data }) => { +const ObservabilityPackDetails = ({ data, location }) => { const pack = data.observabilityPacks; return ( <> + { > Overview Dependencies - + Dashboards - + Alerts - + Synthetics checks - + Visualizations - - Applications + + Nerdpacks @@ -77,8 +85,8 @@ const ObservabilityPackDetails = ({ data }) => { {pack.dashboards?.map((dashboard) => ( <> -

{dashboard?.name}

- {dashboard?.screenshots?.map((screenshot, index) => ( +

{dashboard.name}

+ {dashboard.screenshots?.map((screenshot, index) => ( dashboard example { `} /> ))} + {dashboard.description && ( + <> +

Description

+

{dashboard.description}

+ + )} + + ))} + + + {pack.alerts?.map((alert) => ( + <> +

{alert.name}

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

Description

+

{alert.description}

+ + )} ))} @@ -102,51 +129,6 @@ const ObservabilityPackDetails = ({ data }) => { } `} > - - Ratings and installs - {/* probably want a component for the ratings if we keep them */} - - - - - -

37 ratings from 247 installs

- How to use this pack
    @@ -166,32 +148,8 @@ const ObservabilityPackDetails = ({ data }) => {
- Contributors -
- {exampleContributors.map(({ avatar_url }) => ( - github avatar - ))} -
-

- Want to contribute to this observability pack?{' '} - Go to the repo -

+ Authors +

{pack.authors.join(', ')}

 @@ -202,6 +160,7 @@ const ObservabilityPackDetails = ({ data }) => { ObservabilityPackDetails.propTypes = { data: PropTypes.object, + location: PropTypes.object.isRequired, }; export const pageQuery = graphql`