Summary

Layout seems to shift when clicking on Data sources tab on a quickstart details page.

Repro steps:

1. Go to a quickstart details page like this one or this one
2. Click on Data sources tab
3. Watch content shift to the right.

Screenshot

Acceptance criteria

• Clicking on Data sources tab maintains same layout like other tab views

Summary

When selecting a category filter for quickstarts, the page scrolls to the top of the page without any transition

Steps to reproduce

1. Navigate to I/O Site
2. Scroll down the quickstart results
3. Click a category to filter
4. Page scrolls back to the top

Acceptance Criteria

• Disable the scrolling behavior
• Ensure selecting any category or repeated category does not scroll back to the top of the page

We can allow the user to click outside the category selection modal on mobile to close the modal.

Steps to reproduce

1. view the I/O site on mobile
2. click on the Filter by Category button
3. try to close the selection modal by clicking outside the modal

Image

Summary

With the SSR changes, we now have new environment variables that we do not want stolen. Unfortunately, the Gatsby Build Service does not support waiting to run until the workflows are approved and will just immediately run for forks (when turned on, which it currently is 02/24/2022). So running on forks will need to be disable until such time that the service supports a safe forked workflow.

AC

• Ask Gatsby support to disable previews for forked pull requests
• Test that the Gatsby Build Service does not run for a forked PR

Summary

We are updating the categories displayed on the I/O catalog. To do this, we just need to update the checked-in file that controls the available categories.

Extra info

• instant-observability-categories.json
• Note: the associatedKeywords field for each category corresponds to the categoryTerms field for that category in Nerdgraph
• Note: the value field is just a 'slugified' version of the display name (lowercase, no spaces, etc)

Open questions

• What are the categories that should be define for the I/O site specifically?
• How should these differ from what is shown internally in the I/O Catalog?

AC

• The new categories are available on newrelic.com/instant-observability

This quickstart seems to have different CSS on it, which shrinks the image rather than removing the picture at a certain breakpoint

Steps to reproduce

1. Go to: https://newrelic.com/instant-observability/codestream/29bd9a4a-1c19-4219-9694-0942f6411ce7
2. resize your view
3. see the logo shrink very small

Image

Expected

The logo doesn't shrink so small and is better represented at small screen sizes.

Quickstart note

The logo file is an SVG, so I'm wonder if it's a fix to the logo itself.

Description

Once we have fully swapped the landing page and the detail page over to being powered by Gatsby SSR functions, we no longer need to have a Github workflow that runs every few hours to make API requests and build up a JSON file.

This ticket is to clean up that functionality and the files we are no longer using.

Acceptance Criteria

• newrelic/developer-website#1853 (landing page via SSR)
• #42 (search and filter via SSR)
• newrelic/developer-website#1854 (details page via SSR)
• Remove the Github workflow
• Remove the fetch quickstarts script (and related tests)
• Remove the quickstarts JSON file
• Remove any code that references the quickstart JSON file (example)
• Edit the way we give related resources the quickstart slugs (we'll need to make an api call since we don't have quickstarts in the gatsby schema anymore)
• Remove any Github secrets we no longer need

Relates to #85, #81

Description

Swapping between multiple quickstarts with SSR integrated leads to not being able to view a quickstart's details page. This issue may be resolved from issue #78 by caching the quickstart information, however this is uncertain.

Steps to reproduce

1. Navigate to the I/O SSR feature site.
2. Click on a few quickstarts to view their detail page
3. After a few clicks on different quickstarts, a 414 appears in network tab or the page breaks and does not display the details page

Acceptance Criteria

• Determine the cause of the page not rendering details page and a possible fix
• Ensure a user can visit a quickstart's details page on any quickstart
• TBD - add alerting to tell if a quickstart detail's page is not displaying (not sure if possible)

TBD

Description

While switching from manually fetching JSON to Gatsby SSR functions, we added some additional instrumentation and alerting. To help make on-call shifts easier, we should add information about this to our Emergency Runbook.

Acceptance Criteria

• #45
• Update README to explain how the Gatsby SSR + NerdGraph code works (with lots of documentation links, plz)
• Update Emergency Runbook to include information about new alerts
• Add a diagram about how the SSR pages work on the I/O site
• Update our troubleshooting dashboard to reflect the new alerts / instrumentation

Summary

With the addition of SSR, the landing page can get into a broken state that leads to some interesting UI/UX. Specifically, some odd padding is rendered in the categories page.
This issue may be resolved from #80 or relating issues that are from javascript errors, however the cause of this issue is still unknown. Reproducing the bug is not consistent.

Example of bug

Acceptance Criteria

• Identify how to reproduce this problem
  -I think this is only be happening in the feature/ssr branches.

• Determine a fix, and/or if it is related to #80 or similar tickets

Repolinter Report

🤖This issue was automatically generated by repolinter-action, developed by the Open Source and Developer Advocacy team at New Relic. This issue will be automatically updated or closed when changes are pushed. If you have any problems with this tool, please feel free to open a GitHub issue or give us a ping in #help-opensource.

This Repolinter run generated the following results:

• Fail
  • ❌ readme-starts-with-community-header
  • ❌ readme-contains-link-to-security-policy
• Warning
  • ⚠️ third-party-notices-file-exists
• Passed
  • ✅ license-file-exists
  • ✅ readme-file-exists
  • ✅ readme-contains-discuss-topic
  • ✅ code-of-conduct-should-not-exist-here

Fail #

❌ readme-starts-with-community-header #

The README of a community project should have a community project header at the start of the README. If you already have a community project header and this rule is failing, your header may be out of date, and you should update your header with the suggested one below. For more information please visit https://opensource.newrelic.com/oss-category/. Below is a list of files or patterns that failed:

• README.md: The first 5 lines do not contain the pattern(s): Open source Community header (see https://opensource.newrelic.com/oss-category).
  • 🔨 Suggested Fix: prepend [![Community header](https://github.com/newrelic/opensource-website/raw/master/src/images/categories/Community_Project.png)](https://opensource.newrelic.com/oss-category/#community-project) to file

❌ readme-contains-link-to-security-policy #

Doesn't contain a link to the security policy for this repository (README.md). New Relic recommends putting a link to the open source security policy for your project (https://github.com/newrelic/<repo-name>/security/policy or ../../security/policy) in the README. For an example of this, please see the "a note about vulnerabilities" section of the Open By Default repository. For more information please visit https://nerdlife.datanerd.us/new-relic/security-guidelines-for-publishing-source-code.

Warning #

Passed #

Acceptance Criteria

• - setup a proper readme
• - setup a proper contributing guide

Description

The fetch-quickstarts script is receiving a 404 when it tries to enable or disable branch protection on this repository.

• Workflow file

Steps to Reproduce

• Latest run of `fetch-quickstarts

Expected Behavior

• Branch protection is disabled so that new quickstarts can be committed and it is re-enabled afterwords

Summary

Add component to use in the right column to display contributor data for a particular o11y pack.

Acceptance criteria

• Need decision on if this is going also available in the product exp.
• We'd need to obtain the github data for this to pull in the contributor information
• Displays top contributors to the particular Olly Pack (directory)
• Provides a link to the repo so a user can easily contribute to the pack repo

Visual Design

We've had several requests to move the build your own tile from the first slot of the external I/O catalog and also change the link it's reference to point to our developer site guides instead of the repository. But it's important to the partner ecosystem and the goals of DevEn to increase contributions so we need to find an approach.

This data can be found on internal dashboard [DevEn] External I/O & Quickstarts Ecosystem

Data

2. in the past 12 weeks we had 489 clicks on the build your own tile
3. in the past 12 weeks we had 872 clicks on the view repo button
4. In the past 12 weeks the most commonly click view repo buttons by quickstarts are:

• laravel - 59
• node-js - 39
• php - 37
• dotnet - 32
• ibmmq - 29
• codestream - 25

Considerations

Approach 1

Because we need I/O to focus on new users, we should find other venues to crowdsource contributors. (in-product might be better, once they have already used a quickstart) so remove the build your own tile all together but keep view repo buttons

Approach 2

Replace view repo with a generic Build your own button then, as the repo level configurations aren't very useful in the context of knowing nothing about I/O and quickstarts.

others

• see AC

Acceptance Criteria

• confirm with @legnaleama what the approach should
• completely remove the build your own tile
• change the footer button from create an issue to build your own

Summary

Error events are being sent, but the errorMessage attribute / field is empty. Looking at the code, its because we are sending the entire error object, rather than error.message. So this is a fairly simple fix that needs to happen in two places: the catalog page, and the quickstart details page.

Acceptance Criteria

• Events have populated error messages

Summary

Currently quickstart images are sourced directly from github. Which is not an ideal situation since we have no control over that hosting provider. Instead, we should move to pulling down the images during build, allow sharp to process them, and then host them with the rest of the site on a CDN (Gatsby Cloud). This will also prevent images from 404ing if github goes down and should help with adblockers blocking 3rd party urls with ad in the name.
The main benefits of this approach is getting the processing and optimizations that sharp adds to sourced images.

Desired Behavior

• On build, the site looks at each quickstart related image url, pulls it down locally, and adds it to graphql.
• Those images are then optimized by gatsby-transformer-sharp
• Then they are rendered onto the page
• We see an increase in performance in lighthouse reports

Possible Solution

• Creating a local gatsby plugin for the pulling and adding to graphql part is probably the easiest way to do this.

Additional context

• gatsby-transformer-sharp

Related

Video

Issue

In the linked video a user who was attempting to sign up and install a quickstart at the same time has an issue with clicking the install button and has to going into NR1 and install the quickstart. We are concerned there may be an issue with identifying the user has an account, thus allowing them to click the install button on the I/O external site to install the quickstart without having to go into NR1.

related to this ticket #51 as we'd could measure new user install data from the i/o site.

Acceptance Criteria

• Attempt to reproduce the issue
• Determine what may be the problem
• Identify the work to resolve it we find a problem (issue 1)
• Identify the work to resolve it we find a problem (issue 2)
• Document the process for how we use cookies to allow installation of quickstart

Tessen Query

This seems to show the instance of a bad cookie on install

FROM TessenAction SELECT * WHERE fullArtifactId LIKE 'install-newrelic%' and eventName = 'INSTALL_GuidedInstall_badQuickstartsCookie'

Expected

• After signing up, the quickstart context is not lost. The user should be taken to a quickstart summary page to continue installing in the product. After some initial troubleshooting it appears that the quickstart cookie may not be set correctly or is getting lost in the sign up flow.

• Once logged in, the user is taken to a sign up screen. without needing to refresh the external I/O page after singing up / signing in. .

currently have site cache settings defined on fastly to 1hr, we'll want to control that at the site level, so it's not at the CDN Level.

Acceptance Criteria

• update the site wiki with documentation the use of Fastly, caching and other useful info

Steps to reproduce

this is only an issue on Firefox.

go to the terraform quickstart page on the external I/O site
look at the logo. 👀

screen shots

expected

• logo doesn't overlap text on page
• fix this issue in the terraform quickstart

Description

With the transition to using SSR for the I/O catalog pages, we now have the possibility to hit a 500 HTTP error on these pages.

Design Questions

• What is the preferred design for a 500 error given we can load most of our components (see below) but not the navigation or search given that will be powered by the catalog service & SSR.
• This is only for the I/O experience and doesn't really apply to the dev , docs or oss sites as those sites don't use the catalog service or SSR So we don't have to apply this solution to those sites.
• Review language with UI-Writing team for suggestions.

Design References 🎨

What components will load and fail to load in case of a 500

Mock Up 🧑‍🎨

Links

• Gatsby 500 page docs

Error message content

We are currently experiencing technical issues loading the Instant Observability catalog. Please use the guided install tile below to start the install process.

Acceptance Criteria

• a design is provided that we can use
• Ensure this approach works on mobile
• a 500 page is visible when running yarn develop at localhost:8000/500
• a 500 page is visible when the catalog service fails to load the navigation of I/O.

Part 1 - A NRQL Hope: newrelic/developer-website#1913
Part 2 - The Empire Facets Back: newrelic/developer-website#1937

This is part 3 of the most epic trilogy of our time. The return of the Dashboards/ The Good the Bad and the NRQL/ Die Hard with a Funnel

In our work to build the BIG FUNNEL ™️ We were able to correlate some information, but it's only from existing users. This is because we have a customer_user_id attribute that we can correlate across all events:

FROM TessenAction
SELECT
funnel(customer_user_id as 'user',
  WHERE eventName = 'TDEV_QuickstartInstall_instantObservability' as 'Public catalog install click',
  WHERE eventName = 'DEVEX_New Relic IO_initialLoad' as 'Visit New Relic I/O', 
  WHERE eventName = 'DEVEX_New Relic IO_listingClicked' as 'View details', 
  WHERE eventName = 'DEVEN_Quickstart Details_clickInstall' as 'Click install', 
  WHERE eventName = 'INSTALL_QuickstartInstallationPlan_viewQuickstartInstallationUI' as 'Load install',
  WHERE eventName = 'INSTALL_QuickstartInstallationPlan_viewInstallStep' as 'View install step',
  WHERE eventName = 'INSTALL_QuickstartInstallationPlan_deployQuickstartComponents' as 'Deploy components',
  WHERE eventName = 'INSTALL_QuickstartInstallationPlan_clickSeeYourData' as 'See data'
)
WHERE email NOT LIKE '%@newrelic.com' SINCE 1 week AGO LIMIT MAX

The events in the product require an anonymousId so we can get the data for all users. We have completed the work in the Quickstart Details nerdlet which is now merged:

• Review the PR that includes changes to the Quickstart Details Nerdlet owned by DevEn
  • https://source.datanerd.us/developer-enablement/catalog-pack-details/pull/76

The work for the marketplace repo has been merged to a feature branch but due to the code freeze it won't be pushed to production until early January, so we'll need to follow up with DevEx on this.
- https://source.datanerd.us/nr1-dev-experience/marketplace/pull/140

The work for the nr1-install-newrelic repo has been done and is awaiting review. We will need to work with Virtuoso to get this merged but it will likely also be affected by the codefreeze.

Acceptance Criteria

These Funnels are available in our [DevEn] External I/O & Quickstarts Ecosystem dashboard

• New users installing instrumentation from public catalog (WIP)

• New user code stream install from public catalog (WIP)

• New user guided install from public catalog (WIP)

• Follow up with DevEx to when the code freeze is over to https://source.datanerd.us/nr1-dev-experience/marketplace/pull/140

• Work with Virtuoso to get this PR merged (likely after code freeze)

  • https://source.datanerd.us/open-source/nr1-install-newrelic/pull/584

• Create the funnels

• Validate the data is showing correctly in this funnel for new users.

Relates to #85 , #80

Description

When navigating through quickstarts with SSR integrated, most quickstarts' details page lead to a broken page which stops the user from being able to navigate the tabs on the page.

Steps to reproduce

1. Navigate to the I/O SSR feature site.
2. Click on a few quickstarts to view their detail page
3. Navigate to one of the tabs
4. Information on tabs are inconsistent and mainly result in a broken page

Acceptance Criteria

• Determine the cause of the page not rendering tabs and a possible fix
• Ensure a user can visit all tabs on quickstart's details page on any quickstart
• TBD - add some sort of alerting to tell if a quickstart tab details is not displaying (not sure if possible)

We need to center the cookie modal better on mobile views

Steps to Reproduce

1. open up the I/O site on Mobile, in a private window (so you can see the cookie banner)
2. See the cookie modal off centered. 😱

Image

Expected

the cookie banner is not off centered

The following accounts changes will need to be made to support the handoff of the I/O site to CXP-UI

DevEn Team considerations

• Ensure the team has Gatsby cloud access (to the I/O site specifically, not all sites)
• Share the DevEn dashboards New Relic so they can copy what they need to their new team account.
• Ensure the team is setup in Github org
• Ensure team has admin on GH repo for the i/o site
• Ensure DevEn is no longer the admin of the repo.
• Generate new API key for their staging account N/A
• Add that API key to Gatsby Cloud and Github N/A
• Let the analytics team know CXP-UI is taking over the site.

CXP-UI Team considerations

• Ensure the team has GA access so they can see analytics data.
• Ensure the PM / Eng Manager has Segment access to the i/o source.
• Make a new team on Staging for CXP-UI if doesn't already exist.
• Confirm if this team has prod access in OKTA for pager duty and AWS
• Ensure team is setup in pager duty, they'll need to create a pager duty team

Acceptance Criteria

• Review all linked PRs and code review them
• Merge in when complete
• cut a release of the site after the PRs are merged

APDEX alerts are being triggered for the I/O site now that we move to the newrelic.com domain and we want to better understand the use of the alert and what we should focus on to try to resolve this alert.

Acceptance Criteria

• Discuss our use of APDEX and if it's useful and what it means to our team
• Consider if this alert should be modified or turned off
  • If this is a metric we want to keep, perhaps we turn off PagerDuty alerting but still keep some light alerting. So if this triggers, we know, but dont have to wake up in the middle of night to not be able to resolve it.
• Better understand our network topology for our use of Gatsby Cloud, it's on Fastly under the hood.
• Take next steps, file tickets, etc.

Once we migrate I/O to a stand alone Gatsby Site, We have an opportunity to decouple this site from our Gatsby Theme as we've begun to take a different approach to this site where keeping it dependent on the theme may no longer make sense.

Acceptance Criteria

• Audit I/O site and determine what would need to be rebuilt in the I/O site if we de-coupled the theme
• Consider the impacts and effort to decouple the theme
• Plan out the work and break down the work

We are blocked by this lack of functionality of Gatsby Cloud not supporting private environment variables so our design changes will be done in a branch cut from develop, and our SSR changes will eventually need to merge with the design changes once we are unblocked.

Acceptance Criteria

• Confirm when the env variable feature will be delivered by Gatsby
• Add NERDGRAPH_URL environment variable to Gatsby Cloud (value should be https://api.newrelic.com/graphql)
• Add NEW_RELIC_API_KEY environment variable to Gatsby Cloud (value should be an API key from the Developer Enablement account on prod)
• Document the New Relic account and API key used for the site, here
• resolve all the joyous merged conflicts
• release to production
• Notify virtuoso and devex we no longer rely on the OILS service 🛢️

Repolinter Report

🤖This issue was automatically generated by repolinter-action, developed by the Open Source and Developer Advocacy team at New Relic. This issue will be automatically updated or closed when changes are pushed. If you have any problems with this tool, please feel free to open a GitHub issue or give us a ping in #help-opensource.

This Repolinter run generated the following results:

• Fail
  • ❌ readme-starts-with-community-header
  • ❌ code-of-conduct-should-not-exist-here
• Warning
  • ⚠️ third-party-notices-file-exists
• Passed
  • ✅ license-file-exists
  • ✅ readme-file-exists
  • ✅ readme-contains-link-to-security-policy
  • ✅ readme-contains-discuss-topic

Fail #

❌ readme-starts-with-community-header #

The README of a community project should have a community project header at the start of the README. If you already have a community project header and this rule is failing, your header may be out of date, and you should update your header with the suggested one below. For more information please visit https://opensource.newrelic.com/oss-category/. Below is a list of files or patterns that failed:

• README.md: The first 5 lines do not contain the pattern(s): Open source Community header (see https://opensource.newrelic.com/oss-category).
  • 🔨 Suggested Fix: prepend [![Community header](https://github.com/newrelic/opensource-website/raw/master/src/images/categories/Community_Project.png)](https://opensource.newrelic.com/oss-category/#community-project) to file

❌ code-of-conduct-should-not-exist-here #

New Relic has moved the CODE_OF_CONDUCT file to a centralized location where it is referenced automatically by every repository in the New Relic organization. Because of this change, any other CODE_OF_CONDUCT file in a repository is now redundant and should be removed. Note that you will need to adjust any links to the local CODE_OF_CONDUCT file in your documentation to point to the central file (README and CONTRIBUTING will probably have links that need updating). For more information please visit https://docs.google.com/document/d/1y644Pwi82kasNP5VPVjDV8rsmkBKclQVHFkz8pwRUtE/view. Found files. Below is a list of files or patterns that failed:

• CODE_OF_CONDUCT.md
  • 🔨 Suggested Fix: Remove file

Warning #

Passed #

Description

When selecting a category filter on the I/O site, it takes about 1-5 seconds to initially render the results from the API request. After the user clicks around for a bit, some filtering renders faster, and it is inconsistent with load time.

References

https://www.gatsbyjs.com/docs/conceptual/rendering-options/

Acceptance Criteria

• Consider if we need caching done on Fastly and/or Gatsby's side
• Enable caching on the server
• Confirm caching is stable and clicking around filters does not trigger 414s
• report our experience to DevEx so they can continue to consider if they need to optimize the catalog service

Summary

When we initially started this epic all the work was stored in a feature branch, feature/gatsby-srr, it's still there. In the meantime, we have completely redone the design and transferred all the code over to a new repository. Now we need to get that all that SSR related code over to the instant-observability-website repository.

Desired Behavior

• All code that uses SSR to query Nerdgraph is transferred over to a feature branch in this repository.
• This includes, but is not limited to:
  • src/pages/instant-observability/[name]/[quickstartId].js
  • src/pages/instant-observability.js
  • src/utils/customNewRelicEvent.js
• Note that the I/O page and the details page will need to be converted to regular React components and returned by the SSR pages mentioned above.

Note: Searching and filtering do not need to be functional for this ticket, they are being handled in #42

AC

• SSR related code is transferred to the feature/ssr branch in instant-observability-website
• The catalog can be viewed with data coming directly from nerdgraph
• The catalog can be sorted
• The details of a quickstart can be viewed with data coming directly from nerdgraph

We should better optimize the responsiveness of the carousel on load.

JIRA CXPUI-38

Steps to reproduce

1. load the I/O home page on a mobile view
2. see it takes the carousel 1 - 2 secs to snap to the responsive size.

Screen shot

The gatsby-theme 404 don't seem to actually be rendering when a user hits a 404 page on newrelic.com/instant-observability.

note This could require coordination with marketing web team, as the domain is hosted on Fastly.

Steps to reproduce

• go to https://newrelic.com/instant-observability/4040404 and notice what page actually renders.
• go to: https://instantobservabilitywebsite.gatsbyjs.io/netlify/banana/apple and see that the page renders for a second, then renders blank.

Expected

• we should be rendering the custom 404 page we use in our theme like https://developer.newrelic.com/404
• this is a working example: https://docs.newrelic.com/banana/apple

Description

Once we have established a pattern for querying NerdGraph for quickstarts on the landing page (#1853), we should use the API to power the functionality for searching and filtering the results. This would replace our client-side functionality (which has gotten to be pretty complicated).

GraphQL

Here's an example query:

{
  actor {
    nr1Catalog {
      search(filter: {components: ALERTS}) {
        results {
          ... on Nr1CatalogQuickstart {
            id
            metadata {
              displayName
            }
          }
        }
      }
    }
  }
}

Note

A large portion of this work as already been completed in this pull request. It should be pulled over to the new site.

Acceptance Criteria

• newrelic/developer-website#1821 (proof-of-concept & Gatsby upgrade)
• newrelic/developer-website#1852 (feature branch & Gatsby Cloud)
• newrelic/developer-website#1853 (landing page via SSR)
• Update search to use use SSR + a NerdGraph API call
• Update filtering to use SSR + a NerdGraph API call
• Add tests for search
• Add tests for filter
• Ensure that searching and filtering still updates the URL as it did previously
• Remove all unused client-side search and filter code

Description

When a user navigates to the site, if they are viewing the site on mobile or a smaller screen size, the carousel bunches up the quickstarts before the CSS kicks in and fixes it.

Acceptance Criteria

• Create a transition to display the carousel (TBD)
• Ensure the carousel has the CSS properties loaded before displaying
• Ensure the changes work at different width breakpoints and mobile view

Once we finish all of our transition steps DevEn should be removed as admins I/o site repo and made maintainer.

Acceptance Criteria

• Ensure a CXP-UI is set to admin
• Set DevEn to maintainer

Description

As part of "production readiness" for swapping New Relic I/O over to being powered by NerdGraph, we should instrument the API calls being made and set up some alerting for failures.

It's not clear in which context the API calls are being made: are they happening in the browser or are Gatsby's Cloud Functions executing "server-side" somewhere? If they're happening client-side, we may be able to use New Relic's Browser agent to log these events. If they're happening server-side, then we may need to leverage New Relic custom events (since we don't have an agent installed in Gatsby).

Acceptance Criteria

• newrelic/developer-website#1821 (proof-of-concept & Gatsby upgrade)
• newrelic/developer-website#1852 (feature branch & Gatsby Cloud)
• newrelic/developer-website#1853 (landing page via SSR)
• #42 (search and filter via SSR)
• newrelic/developer-website#1854 (details page via SSR)
• Determine how we can get API call information into New Relic
• Set up instrumentation for API calls to NerdGraph for /instant-observability
• Set up instrumentation for API calls to NerdGraph for the quickstart detail page
• Set up an alert condition for any failed API calls to the service
  • alert on production instead of our feature branch
• Charts that track successes and failures of API calls to troubleshooting dashboard
  • track production instead of our feature branch
• update wiki with new events tracked, links to dashboard, alerts, etc

Similar to the developer site we should auto generate a 3rd party notice file to comply with our OSS policies

https://github.com/newrelic/developer-website/blob/develop/THIRD_PARTY_NOTICES.md

Questions

• Do we actually need this? the Docs site doesn't have one.

yes, @melissaklein24 confirmed if any repo uses a dependency, this is required.

• This file seems to be auto generated by the OSS bot. 🤷 How does this work exactly?

it's run with a workflow job

• We mention this file in our readme, but we don't actually have a file for third party notices.

let's add one

Acceptance Criteria

• Determine if this file is even required anymore in OSS
• Generate a third party notice file called THIRD_PARTY_NOTICES.md in the root directory
• Consider if the docs site repo needs one @roadlittledawn

Summary

As part of the I/O site migration to newrelic.com, we needed to create redirects so any URLs pointing to developer.newrelic.com/instant-observability/<rest of path> would make it to their new spot at newrelic.com/instant-observability/<rest of path>. Currently, this is done by creating a redirect for the catalog itself and for each quickstart details page. While this approach does get us where we need to be, it requires the developer site to maintain references to the various quickstart names and ids for the creation of the redirects. We would prefer this not to be the case since the rest of the I/O related code has been migrated to the new site.

Possible solution

Splat/star/wildcard redirects, ex: instant-observability/* would match anything with the instant-observability/ prefix. Gatsby has a great article on how to work with redirects, including "splat" patterns.

Helpful information

• @nr-kkenney made an attempt at getting "splat" redirects working, but ran into issues. The starting point with this ticket is most likely restarting this conversation with Gatsby support.
• Dev site redirect creation
  • The source for the data used to create those redirects is quickstarts.json and loaded in by these gatsby plugins

Now that the site is officially moved, we need to ensure we document all our event information for Tessen, GA, etc.

Acceptance Criteria

• the I/O site repo wiki is updated with all the applicable event information found on the developer site wiki

Summary

When adding input to the search query using SSR, loading the results takes a long time. This may be due to querying nerdgraph after each keystroke.

Steps to reproduce:

1. Navigate to the I/O SSR Feature Site
2. Search for a quickstart in the search input
3. Quickstart results populate after multiple seconds

Acceptance Criteria

• #78
• #82
• Wait to query the search input after a certain number of keystrokes (TBD)
• Wait to query the search input after a specified amount of time has elapsed before querying (TBD)

Repolinter Report

🤖This issue was automatically generated by repolinter-action, developed by the Open Source and Developer Advocacy team at New Relic. This issue will be automatically updated or closed when changes are pushed. If you have any problems with this tool, please feel free to open a GitHub issue or give us a ping in #help-opensource.

This Repolinter run generated the following results:

• Fail
  • ❌ readme-starts-with-community-header
• Warning
  • ⚠️ third-party-notices-file-exists
• Passed
  • ✅ license-file-exists
  • ✅ readme-file-exists
  • ✅ readme-contains-link-to-security-policy
  • ✅ readme-contains-discuss-topic
  • ✅ code-of-conduct-should-not-exist-here

Fail #

❌ readme-starts-with-community-header #

The README of a community project should have a community project header at the start of the README. If you already have a community project header and this rule is failing, your header may be out of date, and you should update your header with the suggested one below. For more information please visit https://opensource.newrelic.com/oss-category/. Below is a list of files or patterns that failed:

• README.md: The first 5 lines do not contain the pattern(s): Open source Community header (see https://opensource.newrelic.com/oss-category).
  • 🔨 Suggested Fix: prepend [![Community header](https://github.com/newrelic/opensource-website/raw/master/src/images/categories/Community_Project.png)](https://opensource.newrelic.com/oss-category/#community-project) to file

Warning #

Passed #

We'll meet with CXP-UI and walk them through the technical nuances of the I/O Site on 3/22/22

Technical Deep Dive with CXP-UI

• Meeting is scheduled for Mar 22, 2022 at 8am PST
• The team collectively works to better understand how I/O site works and asks questions as needed
• Discuss the use of gatsby theme
• Discuss the concept of our component library
• Discuss how tessen & segment work for I/O site
• Discuss deployments and build process
• Discuss Gatsby cloud
• Discuss example hero requests
• Show how it’s deployed

Steps to reproduce

go to any 404 url, like https://instantobservabilitywebsitefea.gatsbyjs.io/40404040 and the 404 page renders but then the 500 page renders shortly after

Expected

the 500 page does not render when a user hit's a 404.

Screen shot

Summary

In the Guided Install tile, the "Install New Relic" button leaves the parent container.

Steps to reproduce

1. Navigate to I/O Site
2. Filter the categories OR add input to the search query
3. "Install New Relic" button leaves Guided Install Tile

Reference of issue

Possible location of bug within the code:

Acceptance Criteria

• Locate cause of bug and fix the positioning to remain inside the Guided Install Tile
• Filter categories through the sidebar and verify if the install new relic button leaves the container
• Add an input in the search query and verify if the install new relic button leaves the container

Relates to #80, #81

Summary

This issue may be resolved once we get caching in place with SSR. Currently, when a user navigates to the quickstart details page, the toggle button for dark/light mode does nothing.

Steps to reproduce:

1. Navigate to SSR Feature site
2. Click on any quickstart (some may be broken. If it is, select a different quickstart)
3. Click on the toggle icon in the global header
4. Clicking the toggle should switch between dark/light mode, and it doesn't do anything.

Acceptance Criteria

• Locate the issue that disables the toggle button on a quickstart's details page
• Ensure that a user can toggle light/dark mode anywhere on the I/O Site

Summary

The search input for the I/O Site does not limit the characters to a specified amount. It allows the user to search for extremely long inputs, which leads to breaking the UI. Not limiting the search also allows for the input to overlap with the “x” button to close out search.

Acceptance Criteria

• Limit search input to 128 or less characters (Specific cap TBD)
• Test to make sure the search input gets capped to that query

ISSUE

We disabled Fetch Quickstarts to allow us to launch the Carousel feature but there is hero requst to update the external site with cloud flare content (See PR) as there is launch today with a partner.

as a note: this workflow has been off for 13 days, and the SRR work would make this workflow irrelevant but we still have bugs to resolve before we can release SSR.

Steps to reproduce

look for cloudflare on the external site, then look for cloudflare in the internal catalog, notice it's only visible internally.

Expected

We can see cloud flare on the external site.

can we either

1. re-enable the workflow, so we can update the quickstart content. then disable it again.
2. Manually update the site to include cloudflare quickstart.