Merge pull request #1484 from newrelic/liz/build-your-own

Add build your own pack tile
newrelic · Jul 16, 2021 · f35ca9a · f35ca9a
2 parents 6b12cf5 + f6e9bc0
commit f35ca9a
Show file tree

Hide file tree

Showing 5 changed files with 86 additions and 55 deletions.
diff --git a/src/components/PackImg.js b/src/components/PackImg.js
@@ -1,16 +1,23 @@
-import React from 'react';
+import React, { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import { css } from '@emotion/react';
-import DEFAULT_IMAGE from '../images/new-relic-logo.png';
+import DEFAULT_IMAGE from '../images/default-logo-background.svg';
 
 const PackImg = ({ className, logoUrl, packName }) => {
+  const [packAcronym, setPackAcronym] = useState('');
+
   const getPackNameAcronym = () => {
     let packNameAcronym = '';
     packName.split(' ').forEach((word) => {
       packNameAcronym = packNameAcronym.concat('', word.charAt(0));
     });
-    return packNameAcronym.toUpperCase();
+    setPackAcronym(packNameAcronym.toUpperCase());
   };
+  useEffect(() => {
+    if (!logoUrl) {
+      getPackNameAcronym();
+    }
+  });
 
   if (logoUrl) {
     return (
@@ -34,57 +41,17 @@ const PackImg = ({ className, logoUrl, packName }) => {
       css={css`
         color: var(--color-brand-400);
         font-family: var(--code-font);
-        font-size: 7rem;
+        font-size: ${packAcronym.length < 4 ? '6rem' : '4rem'};
+        background-image: url(${DEFAULT_IMAGE});
+        background-repeat: no-repeat;
+        background-position: center;
+        background-origin: content-box;
+        display: flex;
+        justify-content: center;
+        align-items: center;
       `}
     >
-      <div
-        css={css`
-          border: solid var(--color-brand-400) 2px;
-          height: 1px;
-          width: 60px;
-          position: relative;
-          top: 20%;
-          left: 0;
-        `}
-      />
-      <div
-        css={css`
-          border: solid var(--color-green-200) 2px;
-          height: 1px;
-          width: 30px;
-          position: relative;
-          top: 75%;
-          left: 90%;
-        `}
-      />
-      <div
-        css={css`
-          border: solid var(--color-red-300) 2px;
-          height: 1px;
-          width: 20px;
-          position: relative;
-          top: 50px;
-          left: 0px;
-        `}
-      />
-      <div
-        css={css`
-          border: solid var(--color-brand-300) 2px;
-          height: 1px;
-          width: 50px;
-          position: relative;
-          top: 80%;
-          left: 83%;
-        `}
-      />
-      <p
-        css={css`
-          text-align: center;
-          line-height: 150%;
-        `}
-      >
-        {getPackNameAcronym()}
-      </p>
+      <p>{packAcronym}</p>
     </div>
   );
 };

diff --git a/src/components/PackTile.js b/src/components/PackTile.js
@@ -20,8 +20,18 @@ const VIEWS = {
   LIST: 'List view',
 };
 
-const PackTile = ({ id, view, name, fields, logoUrl, description, level }) => {
+const PackTile = ({
+  id,
+  view,
+  name,
+  fields,
+  logoUrl,
+  description,
+  level,
+  className,
+}) => {
   const tessen = useTessen();
+
   const handlePackClick = useInstrumentedHandler(
     () => {
       tessen.track('observabilityPack', 'observabilityPackClick', {
@@ -36,11 +46,26 @@ const PackTile = ({ id, view, name, fields, logoUrl, description, level }) => {
       packName: name,
     }
   );
+
+  const handleBuildTileClick = useInstrumentedHandler(
+    () => {
+      tessen.track('observabilityPack', 'buildYourOwnObservabilityPackClick', {
+        publicCatalogView: view,
+        packName: name,
+      });
+    },
+    {
+      actionName: 'buildYourOwnObservabilityPackClick',
+      publicCatalogView: view,
+      packName: name,
+    }
+  );
+
   return (
     <Surface
       key={id}
       base={Surface.BASE.PRIMARY}
-      className="pack-tile-instrument"
+      className={className}
       interactive
       css={css`
         overflow: hidden;
@@ -51,7 +76,7 @@ const PackTile = ({ id, view, name, fields, logoUrl, description, level }) => {
           margin-bottom: 1em;
         `}
       `}
-      onClick={handlePackClick}
+      onClick={fields ? handlePackClick : handleBuildTileClick}
     >
       <PackImg
         logoUrl={logoUrl}
@@ -114,6 +139,7 @@ PackTile.propTypes = {
   logoUrl: PropTypes.string,
   description: PropTypes.string,
   level: PropTypes.string,
+  className: PropTypes.string,
 };
 
 export default PackTile;
diff --git a/src/images/build-your-own.svg b/src/images/build-your-own.svg
diff --git a/src/images/default-logo-background.svg b/src/images/default-logo-background.svg
diff --git a/src/pages/observability-packs.js b/src/pages/observability-packs.js
@@ -13,9 +13,11 @@ import {
   useTessen,
   useInstrumentedData,
   useKeyPress,
+  ExternalLink,
 } from '@newrelic/gatsby-theme-newrelic';
 import { useQueryParam, StringParam } from 'use-query-params';
 import { useDebounce } from 'react-use';
+import BUILD_YOUR_OWN from '../images/build-your-own.svg';
 
 const sortOptionValues = ['Alphabetical', 'Reverse', 'Popularity'];
 const packContentsFilterGroups = [
@@ -375,6 +377,25 @@ const ObservabilityPacksPage = ({ data, location }) => {
           `}
         `}
       >
+        <ExternalLink
+          href="https://github.com/newrelic/newrelic-observability-packs"
+          css={css`
+            text-decoration: none;
+          `}
+        >
+          <PackTile
+            css={
+              view === VIEWS.GRID &&
+              css`
+                height: 100%;
+              `
+            }
+            view={view}
+            logoUrl={BUILD_YOUR_OWN}
+            name="Build your own Observability Pack"
+            description="Can't find the right pack for your needs? Check out our README and build your own!"
+          />
+        </ExternalLink>
         {filteredPacks.map((pack) => (
           <PackTile key={pack.id} view={view} {...pack} />
         ))}