Merge pull request #1361 from newrelic/liz/pack-details

Add o11y pack details template

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 slugify = require('./src/utils/slugify.js');
 
 const kebabCase = (string) =>
   string
@@ -53,6 +52,17 @@ exports.createPages = async ({ actions, graphql, reporter }) => {
           }
         }
       }
+
+      allObservabilityPacks {
+        edges {
+          node {
+            fields {
+              slug
+            }
+            id
+          }
+        }
+      }
     }
   `);
 
@@ -62,7 +72,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 {
@@ -97,6 +112,21 @@ exports.createPages = async ({ actions, graphql, reporter }) => {
     });
   });
 
+  allObservabilityPacks.edges.forEach(({ node }) => {
+    const {
+      fields: { slug },
+      id,
+    } = node;
+
+    createPage({
+      path: path.join(slug, '/'),
+      component: path.resolve('./src/templates/ObservabilityPackDetails.js'),
+      context: {
+        id,
+      },
+    });
+  });
+
   allNewRelicSdkComponent.edges.forEach(({ node }) => {
     const {
       fields: { slug },
@@ -161,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 }) => {

src/components/FeatherIcon.js

@@ -112,6 +112,9 @@ const ICONS = {
       <polyline points="16 16 12 12 8 16" />
     </>
   ),
+  star: (
+    <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2" />
+  ),
   sun: (
     <>
       <circle cx="12" cy="12" r="5" />

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
+    className={className}
     css={css`
       grid-area: page-header;
       display: flex;
+      flex-wrap: wrap;
       align-items: baseline;
       justify-content: space-between;
       border-bottom: 1px solid var(--divider-color);
@@ -37,6 +39,7 @@ const Header = ({ title, children }) => (
 );
 
 Header.propTypes = {
+  className: PropTypes.string,
   children: PropTypes.node,
   title: PropTypes.string.isRequired,
 };

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 (
     <div
+      className={className}
       role="tablist"
       css={css`
         display: flex;
+        width: 100%;
         margin-bottom: 1em;
-        overflow: scroll;
+        overflow: auto;
       `}
     >
       {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;

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,

src/pages/observability-packs.js

@@ -258,7 +258,7 @@ const ObservabilityPacksPage = ({ data, location }) => {
                 featuredImageUrl={
                   imgSrc || 'https://via.placeholder.com/400x275.png?text=Image'
                 }
-                to={`/observability-packs/${pack.name}/${pack.id}`}
+                to={`${pack.fields.slug}`}
               />
             );
           })}
@@ -277,6 +277,9 @@ export const pageQuery = graphql`
   query {
     allObservabilityPacks {
       nodes {
+        fields {
+          slug
+        }
         id
         name
         website

src/templates/ObservabilityPackDetails.js

@@ -0,0 +1,192 @@
+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 Tabs from '../components/Tabs';
+import noImagePlaceholder from '../images/no-image-placeholder.png';
+import { Layout, PageTools, Button } from '@newrelic/gatsby-theme-newrelic';
+
+const ObservabilityPackDetails = ({ data, location }) => {
+  const pack = data.observabilityPacks;
+
+  return (
+    <>
+      <DevSiteSeo title={pack.name} location={location} />
+      <Tabs>
+        <PageLayout type={PageLayout.TYPE.RELATED_CONTENT}>
+          <PageLayout.Header
+            title={pack.name}
+            css={css`
+              border-bottom: none;
+            `}
+          >
+            <Button variant={Button.VARIANT.PRIMARY} size={Button.SIZE.MEDIUM}>
+              Install
+            </Button>
+            <Tabs.Bar
+              css={css`
+                margin-top: 1rem;
+              `}
+            >
+              <Tabs.BarItem id="overview">Overview</Tabs.BarItem>
+              <Tabs.BarItem id="dependencies">Dependencies</Tabs.BarItem>
+              <Tabs.BarItem
+                id="dashboards"
+                disabled={!(pack.dashboards?.length ?? 0)}
+                count={pack.dashboards?.length ?? 0}
+              >
+                Dashboards
+              </Tabs.BarItem>
+              <Tabs.BarItem
+                id="alerts"
+                disabled={!(pack.alerts?.length ?? 0)}
+                count={pack.alerts?.length ?? 0}
+              >
+                Alerts
+              </Tabs.BarItem>
+              <Tabs.BarItem
+                id="synthetics"
+                disabled={!(pack.synthetics?.length ?? 0)}
+                count={pack.synthetics?.length ?? 0}
+              >
+                Synthetics checks
+              </Tabs.BarItem>
+              <Tabs.BarItem
+                id="visualizations"
+                disabled={!(pack.visualizations?.length ?? 0)}
+                count={pack.visualizations?.length ?? 0}
+              >
+                Visualizations
+              </Tabs.BarItem>
+              <Tabs.BarItem
+                id="nerdpacks"
+                disabled={!(pack.nerdpacks?.length ?? 0)}
+                count={pack.nerdpacks?.length ?? 0}
+              >
+                Nerdpacks
+              </Tabs.BarItem>
+            </Tabs.Bar>
+          </PageLayout.Header>
+
+          <Layout.Content>
+            {/* carousel component if we decide to use multiple images */}
+            <Tabs.Pages>
+              <Tabs.Page id="overview">
+                <img
+                  src={noImagePlaceholder}
+                  alt="placeholder"
+                  height="250px"
+                />
+                <h3>Description</h3>
+                <p>{pack.description}</p>
+              </Tabs.Page>
+              <Tabs.Page id="dashboards">
+                {pack.dashboards?.map((dashboard) => (
+                  <>
+                    <h3>{dashboard.name}</h3>
+                    {dashboard.screenshots?.map((screenshot, index) => (
+                      <img
+                        key={index}
+                        alt="dashboard example"
+                        src={screenshot}
+                        css={css`
+                          height: 200px;
+                          margin: 1rem;
+                        `}
+                      />
+                    ))}
+                    {dashboard.description && (
+                      <>
+                        <h4>Description</h4>
+                        <p>{dashboard.description}</p>
+                      </>
+                    )}
+                  </>
+                ))}
+              </Tabs.Page>
+              <Tabs.Page id="alerts">
+                {pack.alerts?.map((alert) => (
+                  <>
+                    <h3>{alert.name}</h3>
+                    {alert.description && (
+                      <>
+                        <h4>Description</h4>
+                        <p>{alert.description}</p>
+                      </>
+                    )}
+                  </>
+                ))}
+              </Tabs.Page>
+            </Tabs.Pages>
+          </Layout.Content>
+          <Layout.PageTools
+            css={css`
+              p,
+              li {
+                font-size: 0.85rem;
+              }
+            `}
+          >
+            <PageTools.Section>
+              <PageTools.Title>How to use this pack</PageTools.Title>
+              <ol>
+                <li>
+                  Sign up for a free New Relic account (or log in to your
+                  existing account)
+                </li>
+                <li>Click the green install button above</li>
+                <li>
+                  Follow the instructions to install the necessary
+                  instrumentation to get the data used in this pack
+                </li>
+                <li>
+                  Enjoy the dashboards, alerts, and appications filled with
+                  insights on our environment and services.
+                </li>
+              </ol>
+            </PageTools.Section>
+            <PageTools.Section>
+              <PageTools.Title>Authors</PageTools.Title>
+              <p>{pack.authors.join(', ')}</p>
+            </PageTools.Section>
+          </Layout.PageTools>
+        </PageLayout>
+      </Tabs>
+    </>
+  );
+};
+
+ObservabilityPackDetails.propTypes = {
+  data: PropTypes.object,
+  location: PropTypes.object.isRequired,
+};
+
+export const pageQuery = graphql`
+  query($id: String!) {
+    observabilityPacks(id: { eq: $id }) {
+      name
+      website
+      logo
+      level
+      id
+      icon
+      description
+      alerts {
+        name
+        definition
+        url
+      }
+      dashboards {
+        description
+        name
+        screenshots
+        url
+      }
+      authors
+    }
+  }
+`;
+
+export default ObservabilityPackDetails;

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;