diff --git a/src/images/ab-test/add-this-app.png b/src/images/ab-test/add-this-app.png index 877d53771..d6ede13d2 100644 Binary files a/src/images/ab-test/add-this-app.png and b/src/images/ab-test/add-this-app.png differ diff --git a/src/images/ab-test/app-about.png b/src/images/ab-test/app-about.png index 72512db03..571d0e6f3 100644 Binary files a/src/images/ab-test/app-about.png and b/src/images/ab-test/app-about.png differ diff --git a/src/images/ab-test/app-details-from-launcher.png b/src/images/ab-test/app-details-from-launcher.png index c6740b814..445921a8c 100644 Binary files a/src/images/ab-test/app-details-from-launcher.png and b/src/images/ab-test/app-details-from-launcher.png differ diff --git a/src/images/ab-test/app-in-catalog.png b/src/images/ab-test/app-in-catalog.png index e05baca1c..b207a3db4 100644 Binary files a/src/images/ab-test/app-in-catalog.png and b/src/images/ab-test/app-in-catalog.png differ diff --git a/src/images/ab-test/app-meta-in-catalog.png b/src/images/ab-test/app-meta-in-catalog.png index acde44edb..8732c821e 100644 Binary files a/src/images/ab-test/app-meta-in-catalog.png and b/src/images/ab-test/app-meta-in-catalog.png differ diff --git a/src/images/ab-test/dev-version.png b/src/images/ab-test/dev-version.png index 605301c12..a18f9563c 100644 Binary files a/src/images/ab-test/dev-version.png and b/src/images/ab-test/dev-version.png differ diff --git a/src/images/ab-test/manage-access.png b/src/images/ab-test/manage-access.png index 1efc50690..420c4fac8 100644 Binary files a/src/images/ab-test/manage-access.png and b/src/images/ab-test/manage-access.png differ diff --git a/src/images/ab-test/select-launcher.png b/src/images/ab-test/select-launcher.png index fbd869d07..5a6f63fb7 100644 Binary files a/src/images/ab-test/select-launcher.png and b/src/images/ab-test/select-launcher.png differ diff --git a/src/images/ab-test/your-apps.png b/src/images/ab-test/your-apps.png index 438f8ae0b..93406c4da 100644 Binary files a/src/images/ab-test/your-apps.png and b/src/images/ab-test/your-apps.png differ diff --git a/src/images/build-an-app/add-victory-charts.png b/src/images/build-an-app/add-victory-charts.png index 92b63f60f..29f2001fd 100644 Binary files a/src/images/build-an-app/add-victory-charts.png and b/src/images/build-an-app/add-victory-charts.png differ diff --git a/src/images/build-an-app/apps_catalog.png b/src/images/build-an-app/apps_catalog.png index c57e7f352..23c158dc4 100644 Binary files a/src/images/build-an-app/apps_catalog.png and b/src/images/build-an-app/apps_catalog.png differ diff --git a/src/images/build-an-app/click-info-icon.png b/src/images/build-an-app/click-info-icon.png index 9a37507de..759d2d8a1 100644 Binary files a/src/images/build-an-app/click-info-icon.png and b/src/images/build-an-app/click-info-icon.png differ diff --git a/src/images/build-an-app/entity-nerdlet.png b/src/images/build-an-app/entity-nerdlet.png index 143cfc274..23bf3b567 100644 Binary files a/src/images/build-an-app/entity-nerdlet.png and b/src/images/build-an-app/entity-nerdlet.png differ diff --git a/src/images/build-an-app/io-filter.png b/src/images/build-an-app/io-filter.png new file mode 100644 index 000000000..5042d4a02 Binary files /dev/null and b/src/images/build-an-app/io-filter.png differ diff --git a/src/images/build-an-app/nav-to-apps.png b/src/images/build-an-app/nav-to-apps.png index b1e374e18..b1a14eaaa 100644 Binary files a/src/images/build-an-app/nav-to-apps.png and b/src/images/build-an-app/nav-to-apps.png differ diff --git a/src/images/build-an-app/nav-to-custom-viz.png b/src/images/build-an-app/nav-to-custom-viz.png index 5141fd7df..7451aa820 100644 Binary files a/src/images/build-an-app/nav-to-custom-viz.png and b/src/images/build-an-app/nav-to-custom-viz.png differ diff --git a/src/images/build-an-app/victory-charts-nerdpack.png b/src/images/build-an-app/victory-charts-nerdpack.png index 7aea797c5..afe82b559 100644 Binary files a/src/images/build-an-app/victory-charts-nerdpack.png and b/src/images/build-an-app/victory-charts-nerdpack.png differ diff --git a/src/images/build-an-app/victory-charts-repo.png b/src/images/build-an-app/victory-charts-repo.png index e134e4549..26c2a29c9 100644 Binary files a/src/images/build-an-app/victory-charts-repo.png and b/src/images/build-an-app/victory-charts-repo.png differ diff --git a/src/images/create-hello-world/catalog-description-empty.png b/src/images/create-hello-world/catalog-description-empty.png index 4444e686b..9f7c2674c 100644 Binary files a/src/images/create-hello-world/catalog-description-empty.png and b/src/images/create-hello-world/catalog-description-empty.png differ diff --git a/src/images/serve-publish-subscribe/account-maturity-manage-access.png b/src/images/serve-publish-subscribe/account-maturity-manage-access.png index bd1a4b682..922f07a45 100644 Binary files a/src/images/serve-publish-subscribe/account-maturity-manage-access.png and b/src/images/serve-publish-subscribe/account-maturity-manage-access.png differ diff --git a/src/images/serve-publish-subscribe/account-maturity-under-your-apps.png b/src/images/serve-publish-subscribe/account-maturity-under-your-apps.png index 5abb9dad0..efed268e1 100644 Binary files a/src/images/serve-publish-subscribe/account-maturity-under-your-apps.png and b/src/images/serve-publish-subscribe/account-maturity-under-your-apps.png differ diff --git a/src/images/serve-publish-subscribe/add-this-account-maturity-app.png b/src/images/serve-publish-subscribe/add-this-account-maturity-app.png index a7689f52a..6448f676a 100644 Binary files a/src/images/serve-publish-subscribe/add-this-account-maturity-app.png and b/src/images/serve-publish-subscribe/add-this-account-maturity-app.png differ diff --git a/src/images/serve-publish-subscribe/custom-viz.png b/src/images/serve-publish-subscribe/custom-viz.png index 1629d2860..6842f11c4 100644 Binary files a/src/images/serve-publish-subscribe/custom-viz.png and b/src/images/serve-publish-subscribe/custom-viz.png differ diff --git a/src/images/serve-publish-subscribe/demo-app-details-icon.png b/src/images/serve-publish-subscribe/demo-app-details-icon.png index 618e960bf..23afe63e2 100644 Binary files a/src/images/serve-publish-subscribe/demo-app-details-icon.png and b/src/images/serve-publish-subscribe/demo-app-details-icon.png differ diff --git a/src/images/serve-publish-subscribe/demo-app-details.png b/src/images/serve-publish-subscribe/demo-app-details.png index a2a418149..64fb4eadf 100644 Binary files a/src/images/serve-publish-subscribe/demo-app-details.png and b/src/images/serve-publish-subscribe/demo-app-details.png differ diff --git a/src/images/serve-publish-subscribe/demo-app-launcher-icon.png b/src/images/serve-publish-subscribe/demo-app-launcher-icon.png index cf25b6662..c08464e6c 100644 Binary files a/src/images/serve-publish-subscribe/demo-app-launcher-icon.png and b/src/images/serve-publish-subscribe/demo-app-launcher-icon.png differ diff --git a/src/images/serve-publish-subscribe/demo-app-no-details.png b/src/images/serve-publish-subscribe/demo-app-no-details.png index f650fcc67..8c6a9af55 100644 Binary files a/src/images/serve-publish-subscribe/demo-app-no-details.png and b/src/images/serve-publish-subscribe/demo-app-no-details.png differ diff --git a/src/images/serve-publish-subscribe/demo-app-tagline.png b/src/images/serve-publish-subscribe/demo-app-tagline.png index 86d25005b..2a57046ff 100644 Binary files a/src/images/serve-publish-subscribe/demo-app-tagline.png and b/src/images/serve-publish-subscribe/demo-app-tagline.png differ diff --git a/src/images/serve-publish-subscribe/home.png b/src/images/serve-publish-subscribe/home.png index 53a572311..fc966c864 100644 Binary files a/src/images/serve-publish-subscribe/home.png and b/src/images/serve-publish-subscribe/home.png differ diff --git a/src/images/serve-publish-subscribe/local-app.png b/src/images/serve-publish-subscribe/local-app.png index e61caac2f..48e389682 100644 Binary files a/src/images/serve-publish-subscribe/local-app.png and b/src/images/serve-publish-subscribe/local-app.png differ diff --git a/src/images/serve-publish-subscribe/nav-to-apps.png b/src/images/serve-publish-subscribe/nav-to-apps.png index 0ad73a0d1..b1a14eaaa 100644 Binary files a/src/images/serve-publish-subscribe/nav-to-apps.png and b/src/images/serve-publish-subscribe/nav-to-apps.png differ diff --git a/src/images/serve-publish-subscribe/nav-to-io.png b/src/images/serve-publish-subscribe/nav-to-io.png new file mode 100644 index 000000000..2565751bf Binary files /dev/null and b/src/images/serve-publish-subscribe/nav-to-io.png differ diff --git a/src/images/serve-publish-subscribe/published-app.png b/src/images/serve-publish-subscribe/published-app.png index 44b8b54bc..a8581b860 100644 Binary files a/src/images/serve-publish-subscribe/published-app.png and b/src/images/serve-publish-subscribe/published-app.png differ diff --git a/src/images/serve-publish-subscribe/select-account-maturity-app.png b/src/images/serve-publish-subscribe/select-account-maturity-app.png index 142799c58..bf37660e2 100644 Binary files a/src/images/serve-publish-subscribe/select-account-maturity-app.png and b/src/images/serve-publish-subscribe/select-account-maturity-app.png differ diff --git a/src/markdown-pages/build-apps/add-visualizations-to-dashboard.mdx b/src/markdown-pages/build-apps/add-visualizations-to-dashboard.mdx index b1e30b52c..baa4ee882 100644 --- a/src/markdown-pages/build-apps/add-visualizations-to-dashboard.mdx +++ b/src/markdown-pages/build-apps/add-visualizations-to-dashboard.mdx @@ -33,7 +33,7 @@ Each lesson in the course builds upon the last, so make sure you've completed th -In the previous lesson, you added a configuration option to your visualization that allows you to choose how you want to represent your data. This was different from the previous version of your code because, while you can still choose your chart type, you can now only do it before you create an instance of your visualization. But what does it mean to create an instance of your visualization? How do you use a visualization once you've configured it? +In the previous lesson, you added a configuration option to your visualization that allows you to choose how you want to represent your data. This was different from the previous version of your code because, while you can still choose your chart type, you can now only do it before you create an instance of your visualization. But what does it mean to create an instance of your visualization? How do you use a visualization once you've configured it? In this lesson, you'll learn how to create an instance of your visualization and add that instance to dashboard. @@ -66,7 +66,7 @@ Read our [Nerdpacks privileges](/build-apps/permission-manage-apps/) documentati -Next, find your published visualization in the New Relic One app catalog. +Next, find your published visualization in the New Relic One Apps overlay. @@ -169,7 +169,6 @@ To learn more about custom visualizations, check out the following resources: Or, to learn more about other cool things you can build with the New Relic One SDK, check out our [apps course](/ab-test)! - diff --git a/src/markdown-pages/build-apps/build-hello-world-app.mdx b/src/markdown-pages/build-apps/build-hello-world-app.mdx index c4f554deb..c7e4fa672 100644 --- a/src/markdown-pages/build-apps/build-hello-world-app.mdx +++ b/src/markdown-pages/build-apps/build-hello-world-app.mdx @@ -24,10 +24,6 @@ tags: Here's how you can quickly build a "Hello, World!" application in New Relic One. In these steps, you create a local version of the New Relic One site where you can prototype your application. Then, when you're ready to share the application with others, you can publish it to New Relic One. -See the video, which demonstrates the steps in this guide in five minutes. - - ## Before you begin @@ -108,7 +104,7 @@ As an optional step, you can add a custom launcher icon using any image file nam -You will need an icon.png in 2 places for it to be representing properly in the New Relic One Catalog, To set a launcher icon place an icon.png file in the the launcher directory. To set the icon for the app details page place an icon in the root directory of the project. +You will need an icon.png in 2 places for it to be representing properly in Instant Observability, To set a launcher icon place an icon.png file in the the launcher directory. To set the icon for the app details page place an icon in the root directory of the project. @@ -152,7 +148,7 @@ Open a browser and go to [https://one.newrelic.com/?nerdpacks=local](https://one -When the browser opens, click **Apps**, and then in the **Other apps** section, click the new launcher for your application. Here's an example where we inserted a leaf icon: +When the browser opens, click **Apps**, and then in the **Your apps** section, click the new launcher for your application. Here's an example where we inserted a leaf icon: ![The customized nerdlet launcher](../../images/create-hello-world/hello-world-launcher.png) @@ -166,7 +162,7 @@ After you click the new launcher, your "Hello, World!" appears: ## Publish your application to New Relic -Your colleagues can't see your local application, so when you are ready to share it, publish it to the New Relic One catalog. The catalog is where you can find any pre-existing custom applications, as well as any applications you create in your own organization. +Your colleagues can't see your local application, so when you are ready to share it, publish it to Instant Observability. Instant Observability is where you can find any pre-existing custom applications, as well as any applications you create in your own organization. @@ -188,13 +184,15 @@ Close your local New Relic One development tab, and open [New Relic One](https:/ -Click the **Apps** launcher. +Click the **Instant Observability** launcher. + +![Navigate to Instant Observability](../../images/serve-publish-subscribe/nav-to-io.png) -Under **New Relic One catalog**, click the launcher for your new application. +Click the launcher for your new application. @@ -202,11 +200,11 @@ Under **New Relic One catalog**, click the launcher for your new application. When your new application opens, notice that it doesn't display any helpful descriptive information. The next section shows you how to add descriptive metadata. -![An empty application description in the catalog](../../images/create-hello-world/catalog-description-empty.png) +![An empty application description in Instant Observability](../../images/create-hello-world/catalog-description-empty.png) ## Add details to describe your project -Now that your new application is in the New Relic One catalog, you can add details that help users understand what your application does and how to use it. +Now that your new application is in Instant Observability, you can add details that help users understand what your application does and how to use it. @@ -236,7 +234,7 @@ In the root `catalog` directory of your project, add screenshots or various type -After you add the screenshots and descriptions you want, execute the following to save your metadata to the catalog: +After you add the screenshots and descriptions you want, execute the following to save your metadata to the Instant Observability catalog: ```bash nr1 catalog:submit @@ -246,7 +244,7 @@ nr1 catalog:submit -Return to the catalog and refresh the page to see your new screenshots and metadata describing your project. +Return to Instant Observability and refresh the page to see your new screenshots and metadata describing your project. @@ -254,7 +252,7 @@ Return to the catalog and refresh the page to see your new screenshots and metad ## Subscribe accounts to your application -To make sure other users see your application in the catalog, you need to subscribe accounts to the application. Any user with the NerdPack manager or admin role can subscribe to an application from accounts that they have permission to manage. +To make sure other users see your application in Instant Observability, you need to subscribe accounts to the application. Any user with the NerdPack manager or admin role can subscribe to an application from accounts that they have permission to manage. @@ -291,6 +289,6 @@ If you're interested in advanced configurations for your Nerdpack, read [Enable Now that you've completed the steps in this example, you learned the basic steps to: - Create a local application. -- Publish the application to the New Relic One catalog so you can share it with your colleagues. +- Publish the application to Instant Observability so you can share it with your colleagues. - Add details to the project in the catalog so users understand how to use it. - Subscribe accounts to your application so other users can use it. diff --git a/src/markdown-pages/build-apps/create-an-ab-test-application/publish.mdx b/src/markdown-pages/build-apps/create-an-ab-test-application/publish.mdx index dcdff1eef..bfd247368 100644 --- a/src/markdown-pages/build-apps/create-an-ab-test-application/publish.mdx +++ b/src/markdown-pages/build-apps/create-an-ab-test-application/publish.mdx @@ -17,7 +17,7 @@ Each lesson in the course builds upon the last, so make sure you've completed th -In the last lesson, you created catalog information for the A/B test app you've been building throughout this course. Now, it's time to publish your app to the New Relic One catalog and submit those catalog details. +In the last lesson, you created catalog information for the A/B test app you've been building throughout this course. Now, it's time to publish your app to the Instant Observability catalog and submit those catalog details. ## Versions and tags @@ -155,9 +155,9 @@ The results of this command detail the information stored in New Relic's registr -## View your application in the catalog +## View your application in Instant Observability -Now that your application is published and tagged, you can view it in the New Relic One app catalog. +Now that your application is published and tagged, you can view it in the Instant Observability catalog. @@ -169,15 +169,15 @@ Go to [New Relic](https://one.newrelic.com). Notice that you're not using the `? -From the homepage, navigate to **Apps**: +From the homepage, navigate to **Instant Observability**: -![Navigate to Apps](../../../images/build-an-app/nav-to-apps.png) +![Navigate to Instant Observability](../../../images/serve-publish-subscribe/nav-to-io.png) -From here, you can see your application under **New Relic One catalog**: +From here, you can see your application among the Instant Observability resources: -![Your app in the catalog](../../../images/ab-test/app-in-catalog.png) +![Your app in Instant Observability](../../../images/ab-test/app-in-catalog.png) -Notice that this is different than when you locally served your app. Local apps and published apps you're subscribed to show under **Your apps** instead. +Notice that this is different than when you locally served your app. Local apps and published apps you're subscribed to show under **Your apps** in the Apps overlay instead. @@ -262,9 +262,9 @@ All the information from _catalog_ shows here. -View your app in the catalog: +View your app in Instant Observability: -![Your app in the catalog with metadata](../../../images/ab-test/app-meta-in-catalog.png) +![Your app in Instant Observability with metadata](../../../images/ab-test/app-meta-in-catalog.png) Notice the tagline on the app's catalog entry. @@ -280,7 +280,7 @@ Here, you see app details, a documentation tab, release notes, and screenshots. ## Update your version tag -Your app looks great in the catalog, complete with metadata, images, and documentation. Before, you tagged the app as `DEV` because all of the information wasn't ready for public consumption. Now, it is. It's time to update your version tag. +Your app looks great in the Instant Observability catalog, complete with metadata, images, and documentation. Before, you tagged the app as `DEV` because all of the information wasn't ready for public consumption. Now, it is. It's time to update your version tag. @@ -319,7 +319,7 @@ The app is now tagged with `STABLE`, indicating it's ready for public use. -Even though the app is ready for public use, it's still only visible to users of your account. Other accounts can't see apps created by other private accounts unless those apps are added to the public New Relic One catalog. +Even though the app is ready for public use, it's still only visible to users of your account. Other accounts can't see apps created by other private accounts unless those apps are added to the public Instant Observability catalog. @@ -327,7 +327,7 @@ Even though the app is ready for public use, it's still only visible to users of -Now that your app is published and its metadata is submitted, you can subscribe your account to the app from the catalog. In the next lesson, you'll learn the ways to subscribe and unsubscribe to your new application. +Now that your app is published and its metadata is submitted, you can subscribe your account to the app from Instant Observability. In the next lesson, you'll learn the ways to subscribe and unsubscribe to your new application. @@ -338,4 +338,3 @@ This lesson is part of a course that teaches you how to build a New Relic One ap - diff --git a/src/markdown-pages/build-apps/create-an-ab-test-application/subscribe.mdx b/src/markdown-pages/build-apps/create-an-ab-test-application/subscribe.mdx index f398ab2fb..17a1f60db 100644 --- a/src/markdown-pages/build-apps/create-an-ab-test-application/subscribe.mdx +++ b/src/markdown-pages/build-apps/create-an-ab-test-application/subscribe.mdx @@ -17,15 +17,15 @@ Each lesson in the course builds upon the last, so make sure you've completed th -In the last lesson, you published your A/B test app to the New Relic One catalog. You then submitted your app's description, metadata, documentation, and screenshots. Now, it's time to subscribe your account to the published app. +In the last lesson, you published your A/B test app to the Instant Observability catalog. You then submitted your app's description, metadata, documentation, and screenshots. Now, it's time to subscribe your account to the published app. ## Subscribe to your application -Now that your application is published to the catalog, you can view it by visiting the **Apps** page of [New Relic](https://one.newrelic.com): +Now that your application is published, you can view it by visiting the **Instant Observability** page of [New Relic](https://one.newrelic.com): -![Navigate to Apps](../../../images/build-an-app/nav-to-apps.png) +![Navigate to Instant Observability](../../../images/serve-publish-subscribe/nav-to-io.png) -From the catalog UI, you can subscribe to applications. +From Instant Observability, you can subscribe to applications. @@ -49,7 +49,7 @@ This opens the app's **About** page and shows the details you submitted to the c -At the top right of this page, click **Add this app**: +At the top left of this page, click **Add this app**: ![Add this app](../../../images/ab-test/add-this-app.png) @@ -105,7 +105,7 @@ Click the "i" icon on your app launcher: ![App details from the launcher](../../../images/ab-test/app-details-from-launcher.png) -Here, you see the same app details you saw when your app was in the catalog. +Here, you see the same app details you saw when your app was in the Instant Observability catalog. @@ -125,13 +125,13 @@ From **Account access**, deselect the account you want to unsubscribe from the a ![Unsubscribe](../../../images/ab-test/unsubscribe.png) -If you navigate back to **Apps**, you will see your app in the catalog. +If you navigate back to **Apps**, you will see your app is no longer under **Your apps**, but can be found again in the Instant Observability catalog. -Throughout this course, you've built a New Relic One application from the ground up. You've used the `nr1` CLI to create a Nerdpack, launcher, and Nerdlet. You've used many components from the SDK. You've learned how to publish, tag, subscribe, and unsubscribe to and from apps in the catalog. You've also learned how to submit metadata to the catalog. +Throughout this course, you've built a New Relic One application from the ground up. You've used the `nr1` CLI to create a Nerdpack, launcher, and Nerdlet. You've used many components from the SDK. You've learned how to publish, tag, subscribe, and unsubscribe to and from apps in the Instant Observability catalog. You've also learned how to submit metadata to the catalog. ## Next steps @@ -145,4 +145,4 @@ This lesson is the final part of a course that teaches you how to build a New Re - \ No newline at end of file + diff --git a/src/markdown-pages/build-apps/customize-open-source-visualization.mdx b/src/markdown-pages/build-apps/customize-open-source-visualization.mdx index 9c7b5cf9e..620c397b8 100644 --- a/src/markdown-pages/build-apps/customize-open-source-visualization.mdx +++ b/src/markdown-pages/build-apps/customize-open-source-visualization.mdx @@ -7,7 +7,7 @@ description: 'Customize open-source Nerdpacks' -Most Nerdpacks in the New Relic One catalog are open-source. This means you can clone or fork their repositories, customize them to suit your specific needs, and re-publish them to use with your account. In this guide, you customize a Nerdpack with visualizations and publish it to your account. However, to customize any Nerdpack, you follow the same steps. +Most Nerdpacks in the Instant Observability catalog are open-source. This means you can clone or fork their repositories, customize them to suit your specific needs, and re-publish them to use with your account. In this guide, you customize a Nerdpack with visualizations and publish it to your account. However, to customize any Nerdpack, you follow the same steps. @@ -149,8 +149,9 @@ export default class CircularProgressBar extends React.Component { nrqlInputIsValid = (data) => { const { data: seriesEntries } = data[0]; - const { uniqueAggregates, uniqueFacets } = - getUniqueAggregatesAndFacets(data); + const { uniqueAggregates, uniqueFacets } = getUniqueAggregatesAndFacets( + data + ); const isNonTimeseries = seriesEntries.length === 1; return ( @@ -306,9 +307,9 @@ Subscribe to the **Victory Charts Visualizations** Nerdpack and open the **Circu -From your homepage at New Relic, navigate to **Apps**: +From your homepage at New Relic, navigate to **Instant Observability**: -![Navigate to apps](../../images/build-an-app/nav-to-apps.png) +![Navigate to Instant Observability](../../images/serve-publish-subscribe/nav-to-io.png) @@ -377,9 +378,9 @@ Find the source code repository from the Nerdpack's catalog entry and clone it t -From your homepage at New Relic, navigate to **Apps**: +From your homepage at New Relic, navigate to **Instant Observability**: -![Navigate to apps](../../images/build-an-app/nav-to-apps.png) +![Navigate to Instant Observability](../../images/serve-publish-subscribe/nav-to-io.png) @@ -409,7 +410,7 @@ Clone the repository: nr1 nerdpack:clone -r https://github.com/newrelic/nr1-victory-visualizations.git ``` -Now you have a local version of the **Victory Charts Visualizations** Nerdpack! Notice that you used `nr1 nerdpack:clone` instead of `git clone` to copy the repo. `nr1 nerdpack:clone` offers built-in functionality to help keep your local copy distinct from the original Nerdpack in the New Relic One public catalog. Specifically, it generates a new Nerdpack UUID so you don't have to do this yourself: +Now you have a local version of the **Victory Charts Visualizations** Nerdpack! Notice that you used `nr1 nerdpack:clone` instead of `git clone` to copy the repo. `nr1 nerdpack:clone` offers built-in functionality to help keep your local copy distinct from the original Nerdpack in the Instant Observability public catalog. Specifically, it generates a new Nerdpack UUID so you don't have to do this yourself: ```sh [output] Re-generating UUID... @@ -439,6 +440,7 @@ git log -1 -p [output] "description": "Visualizations built on top of Victory charts" [output] } ``` + @@ -636,8 +638,9 @@ export default class CircularProgressBar extends React.Component { nrqlInputIsValid = (data) => { const { data: seriesEntries } = data[0]; - const { uniqueAggregates, uniqueFacets } = - getUniqueAggregatesAndFacets(data); + const { uniqueAggregates, uniqueFacets } = getUniqueAggregatesAndFacets( + data + ); const isNonTimeseries = seriesEntries.length === 1; return ( @@ -666,7 +669,7 @@ export default class CircularProgressBar extends React.Component { render() { const { nrqlQueries, colors } = this.props; - const colorScale = Array.from(colors, x => x.segmentColor) + const colorScale = Array.from(colors, (x) => x.segmentColor); const nrqlQueryPropsAvailable = nrqlQueries && @@ -904,8 +907,9 @@ export default class CircularProgressBar extends React.Component { nrqlInputIsValid = (data) => { const { data: seriesEntries } = data[0]; - const { uniqueAggregates, uniqueFacets } = - getUniqueAggregatesAndFacets(data); + const { uniqueAggregates, uniqueFacets } = getUniqueAggregatesAndFacets( + data + ); const isNonTimeseries = seriesEntries.length === 1; return ( @@ -934,7 +938,7 @@ export default class CircularProgressBar extends React.Component { render() { const { nrqlQueries, colors } = this.props; - const colorScale = Array.from(colors, x => x.segmentColor) + const colorScale = Array.from(colors, (x) => x.segmentColor); const nrqlQueryPropsAvailable = nrqlQueries && @@ -1055,7 +1059,7 @@ This will revert the bar corners to the default 90-degrees instead of being roun ![Progress bar with straight corners](../../images/build-an-app/progress-bar-chart-no-corner-radius.png) -Perfect! You cloned and updated the open-source **Circular progress bar** visualization from the New Relic One catalog. The only thing left to do is publish your version to the catalog so your accounts can subscribe to it. +Perfect! You cloned and updated the open-source **Circular progress bar** visualization from the Instant Observability catalog. The only thing left to do is publish your version to the catalog so your accounts can subscribe to it. @@ -1073,7 +1077,7 @@ Publish your version of the **Victory charts** Nerdpack to the catalog. Then sub -Because you used `nr1 clone` to clone the Nerdpack's repository, your local copy already has its own UUID. This is a prerequisite for publishing your version to the New Relic One catalog. If you used `git clone` to copy, you need to update the Nerdpack's UUID manually: +Because you used `nr1 clone` to clone the Nerdpack's repository, your local copy already has its own UUID. This is a prerequisite for publishing your version to the Instant Observability catalog. If you used `git clone` to copy, you need to update the Nerdpack's UUID manually: ```sh nr1 nerdpack:uuid -gf @@ -1148,7 +1152,7 @@ Go to your dashboard and see your new, customized circular progress bar: In this guide, you: -- Subscribed to a Nerdpack from the New Relic One catalog +- Subscribed to a Nerdpack from the Instant Observability catalog - Cloned an open-source Nerdpack - Edited an existing visualization to meet your needs - Published and subscribed to your own custom Nerdpack diff --git a/src/markdown-pages/build-apps/customize-visualizations-with-configuration.mdx b/src/markdown-pages/build-apps/customize-visualizations-with-configuration.mdx index 835e75a6f..bd6349530 100644 --- a/src/markdown-pages/build-apps/customize-visualizations-with-configuration.mdx +++ b/src/markdown-pages/build-apps/customize-visualizations-with-configuration.mdx @@ -66,20 +66,20 @@ import { Treemap, } from 'recharts'; import { - AutoSizer, - Card, - CardBody, - HeadingText, - NrqlQuery, - SegmentedControl, - SegmentedControlItem, - Spinner, + AutoSizer, + Card, + CardBody, + HeadingText, + NrqlQuery, + SegmentedControl, + SegmentedControlItem, + Spinner, } from 'nr1'; const CHART_TYPES = { - 'Radar': 'radar', - 'Treemap': 'treemap' -} + Radar: 'radar', + Treemap: 'treemap', +}; export default class RadarOrTreemapVisualization extends React.Component { // Custom props you wish to be configurable in the UI must also be defined in @@ -133,12 +133,12 @@ export default class RadarOrTreemapVisualization extends React.Component { }; updateSelectedChart = (evt, value) => { - this.setState({ selectedChart: value }) + this.setState({ selectedChart: value }); }; render() { - const {nrqlQueries, stroke, fill} = this.props; - const {selectedChart} = this.state; + const { nrqlQueries, stroke, fill } = this.props; + const { selectedChart } = this.state; const nrqlQueryPropsAvailable = nrqlQueries && @@ -152,13 +152,13 @@ export default class RadarOrTreemapVisualization extends React.Component { return ( - {({width, height}) => ( + {({ width, height }) => ( - {({data, loading, error}) => { + {({ data, loading, error }) => { if (loading) { return ; } @@ -171,45 +171,43 @@ export default class RadarOrTreemapVisualization extends React.Component { return ( - - - - - {selectedChart === CHART_TYPES.Radar ? ( - - - - - - - ) : ( - - )} + + + + + {selectedChart === CHART_TYPES.Radar ? ( + + + + + + + ) : ( + + )} ); }} @@ -453,20 +451,20 @@ import { Treemap, } from 'recharts'; import { - AutoSizer, - Card, - CardBody, - HeadingText, - NrqlQuery, - SegmentedControl, - SegmentedControlItem, - Spinner, + AutoSizer, + Card, + CardBody, + HeadingText, + NrqlQuery, + SegmentedControl, + SegmentedControlItem, + Spinner, } from 'nr1'; const CHART_TYPES = { - 'Radar': 'radar', - 'Treemap': 'treemap' -} + Radar: 'radar', + Treemap: 'treemap', +}; export default class RadarOrTreemapVisualization extends React.Component { // Custom props you wish to be configurable in the UI must also be defined in @@ -516,7 +514,7 @@ export default class RadarOrTreemapVisualization extends React.Component { }; render() { - const {nrqlQueries, stroke, fill, selectedChart} = this.props; + const { nrqlQueries, stroke, fill, selectedChart } = this.props; const nrqlQueryPropsAvailable = nrqlQueries && @@ -530,13 +528,13 @@ export default class RadarOrTreemapVisualization extends React.Component { return ( - {({width, height}) => ( + {({ width, height }) => ( - {({data, loading, error}) => { + {({ data, loading, error }) => { if (loading) { return ; } @@ -549,43 +547,43 @@ export default class RadarOrTreemapVisualization extends React.Component { return ( - - - - - {selectedChart === CHART_TYPES.Radar ? ( - - - - - - - ) : ( - - )} + + + + + {selectedChart === CHART_TYPES.Radar ? ( + + + + + + + ) : ( + + )} ); }} @@ -651,20 +649,20 @@ import { Treemap, } from 'recharts'; import { - AutoSizer, - Card, - CardBody, - HeadingText, - NrqlQuery, - SegmentedControl, - SegmentedControlItem, - Spinner, + AutoSizer, + Card, + CardBody, + HeadingText, + NrqlQuery, + SegmentedControl, + SegmentedControlItem, + Spinner, } from 'nr1'; const CHART_TYPES = { - 'Radar': 'radar', - 'Treemap': 'treemap' -} + Radar: 'radar', + Treemap: 'treemap', +}; export default class RadarOrTreemapVisualization extends React.Component { // Custom props you wish to be configurable in the UI must also be defined in @@ -714,7 +712,7 @@ export default class RadarOrTreemapVisualization extends React.Component { }; render() { - const {nrqlQueries, stroke, fill, selectedChart} = this.props; + const { nrqlQueries, stroke, fill, selectedChart } = this.props; const nrqlQueryPropsAvailable = nrqlQueries && @@ -728,13 +726,13 @@ export default class RadarOrTreemapVisualization extends React.Component { return ( - {({width, height}) => ( + {({ width, height }) => ( - {({data, loading, error}) => { + {({ data, loading, error }) => { if (loading) { return ; } @@ -747,43 +745,43 @@ export default class RadarOrTreemapVisualization extends React.Component { return ( - - - - - {!selectedChart || selectedChart === CHART_TYPES.Radar ? ( - - - - - - - ) : ( - - )} + + + + + {!selectedChart || selectedChart === CHART_TYPES.Radar ? ( + + + + + + + ) : ( + + )} ); }} @@ -849,18 +847,18 @@ import { Treemap, } from 'recharts'; import { - AutoSizer, - Card, - CardBody, - HeadingText, - NrqlQuery, - Spinner, + AutoSizer, + Card, + CardBody, + HeadingText, + NrqlQuery, + Spinner, } from 'nr1'; const CHART_TYPES = { - 'Radar': 'radar', - 'Treemap': 'treemap' -} + Radar: 'radar', + Treemap: 'treemap', +}; export default class RadarOrTreemapVisualization extends React.Component { // Custom props you wish to be configurable in the UI must also be defined in @@ -910,7 +908,7 @@ export default class RadarOrTreemapVisualization extends React.Component { }; render() { - const {nrqlQueries, stroke, fill, selectedChart} = this.props; + const { nrqlQueries, stroke, fill, selectedChart } = this.props; const nrqlQueryPropsAvailable = nrqlQueries && @@ -924,13 +922,13 @@ export default class RadarOrTreemapVisualization extends React.Component { return ( - {({width, height}) => ( + {({ width, height }) => ( - {({data, loading, error}) => { + {({ data, loading, error }) => { if (loading) { return ; } @@ -943,33 +941,33 @@ export default class RadarOrTreemapVisualization extends React.Component { return ( - {!selectedChart || selectedChart === CHART_TYPES.Radar ? ( - - - - - - - ) : ( - - )} + {!selectedChart || selectedChart === CHART_TYPES.Radar ? ( + + + + + + + ) : ( + + )} ); }} @@ -1021,7 +1019,7 @@ const ErrorState = () => ( [Serve your Nerdpack locally](/build-apps/publish-deploy/serve/), and view it in the **Custom Visualizations** app in New Relic. Select a chart type from the dropdown in the configuration sidebar, and see your visualization update to show the matching chart type: -![Configured visualization](../../images/custom-viz/radar-or-treemap-configured.png) +![Configured visualization](../../images/custom-viz/radar-or-treemap-chart-configured.png) diff --git a/src/markdown-pages/build-apps/serve-publish-subscribe/catalog.mdx b/src/markdown-pages/build-apps/serve-publish-subscribe/catalog.mdx index 770e23801..babfee0e9 100644 --- a/src/markdown-pages/build-apps/serve-publish-subscribe/catalog.mdx +++ b/src/markdown-pages/build-apps/serve-publish-subscribe/catalog.mdx @@ -3,7 +3,7 @@ path: '/build-apps/publish-deploy/catalog' title: "Update your Nerdpack's catalog information" duration: '10 minutes' template: 'GuideTemplate' -description: 'Learn to describe your Nerdpack in the catalog' +description: 'Learn to describe your Nerdpack in the Instant Observability catalog' tileShorthand: title: "Update your Nerdpack's catalog information" description: 'Update catalog info' @@ -14,7 +14,7 @@ tags: -Add screenshots, descriptions, and other metadata to your Nerdpack, and upload it all to the New Relic One catalog. +Add screenshots, descriptions, and other metadata to your Nerdpack, and upload it all to Instant Observability. @@ -39,13 +39,14 @@ You need to [publish](/build-apps/publish-deploy/publish) Nerdpacks that you cre ## Update your Nerdpack's catalog metadata -After you've published your Nerdpack to the New Relic One catalog, update the Nerdpack's metadata to let users know all about your Nerdlets or visualizations. +After you've published your Nerdpack to the Instant Observability catalog, update the Nerdpack's metadata to let users know all about your Nerdlets or visualizations. ```md fileName=catalog/documentation.md + ``` ```json fileName=catalog/config.json @@ -82,19 +83,19 @@ Go to [New Relic](https://one.newrelic.com): -Navigate to **Apps**: +Navigate to **Instant Observability**: -![Navigate to the Apps page](../../../images/serve-publish-subscribe/nav-to-apps.png) +![Navigate to the Instant Observability page](../../../images/serve-publish-subscribe/nav-to-io.png) -Find your published Nerdpack under **New Relic One catalog**: +Find your published Nerdpack using the Apps filter or search bar: ![Published Nerdpack](../../../images/serve-publish-subscribe/published-app.png) -Notice that there is no information on the **Apps** or details page other than the Nerdpack's name and the brief description found in _nr1.json_: +Notice that there is no information on the **Instant Observability** or details page other than the Nerdpack's name and the brief description found in _nr1.json_: ![Published Nerdpack](../../../images/serve-publish-subscribe/demo-app-no-details.png) @@ -128,7 +129,7 @@ ls catalog | _config.json_ | A JSON file that contains the following fields:

  • `tagline`: A brief headline for the application. This cannot exceed 30 characters.
  • `repository`: The URL for the Nerdpack's remote repository. This cannot exceed 1000 characters.
  • `details`: The purpose of the Nerdpack and how to use it. This cannot exceed 1000 characters. Use newlines for formatting, and don't include any markdown or HTML.
  • `support`: An object that contains:
    • `issues`: A URL for the repository's issues list. For example, the **Issues** tab if using GitHub.
    • `email`: A valid email address for the team supporting the application
    • `community`: A URL for a support thread, forum, or website for troubleshooting and usage support
  • `whatsNew`: A bulleted list of changes in the current release version. This cannot exceed 500 characters. Use newlines for formatting, and don't include markdown or HTML.
Check out our [Pageview Map application's _config.json_](https://github.com/newrelic/nr1-pageview-map/blob/main/catalog/config.json) to see a real-life implementation. | | _documentation.md_ | A markdown file that tells users how to use the Nerdpack's Nerdlets or visualizations. This shows in the detail view's **Documentation** tab. | | _additionalInfo.md_ | An optional markdown file for any additional information about using your application | -| _screenshots_ | A directory that contains screenshots showcasing your Nerdpack, such as select images of Nerdlets or visualizations. This can contain no more than 6 images. All screenshots must meet the following criteria:

  • 3:2 aspect ratio
  • PNG format
  • landscape orientation
  • 1600 to 2400 pixels wide
| +| _screenshots_ | A directory that contains screenshots showcasing your Nerdpack, such as select images of Nerdlets or visualizations. This can contain no more than 6 images. All screenshots must meet the following criteria:

  • 3:2 aspect ratio
  • PNG format
  • landscape orientation
  • 1600 to 2400 pixels wide
| This command also generates a `catalog` directory for each launcher, Nerdlet, and visualization in your Nerdpack. Inside you'll find a directory that allows you to add screenshots for each Nerdpack item. @@ -175,7 +176,7 @@ Include screenshots in your root _screenshots_ directory or any Nerdpack item _s -Submit the information to the New Relic One catalog: +Submit the information to the Instant Observability catalog: ```sh nr1 catalog:submit @@ -192,7 +193,7 @@ nr1 catalog:submit -Go to the catalog to see your changes: +Go to Instant Observability to see your changes: ![DemoApp with a tagline](../../../images/serve-publish-subscribe/demo-app-tagline.png) diff --git a/src/markdown-pages/build-apps/serve-publish-subscribe/index.mdx b/src/markdown-pages/build-apps/serve-publish-subscribe/index.mdx index 6294e4a29..c1aeea65b 100644 --- a/src/markdown-pages/build-apps/serve-publish-subscribe/index.mdx +++ b/src/markdown-pages/build-apps/serve-publish-subscribe/index.mdx @@ -21,6 +21,6 @@ tags: Whether your Nerdpack includes launchers, Nerdlets, visualizations, or all of the above, you'll eventually need to know how to serve, publish, describe, tag, and subscribe to it on the New Relic platform. -![apps in the catalog](../../../images/build-an-app/apps_catalog.png) +![apps in Instant Observability](../../../images/build-an-app/apps_catalog.png) - \ No newline at end of file + diff --git a/src/markdown-pages/build-apps/serve-publish-subscribe/publish.mdx b/src/markdown-pages/build-apps/serve-publish-subscribe/publish.mdx index 6d5b3c1c8..60687d16c 100644 --- a/src/markdown-pages/build-apps/serve-publish-subscribe/publish.mdx +++ b/src/markdown-pages/build-apps/serve-publish-subscribe/publish.mdx @@ -2,7 +2,7 @@ path: '/build-apps/publish-deploy/publish' title: 'Publish your Nerdpack' template: 'GuideTemplate' -description: 'Learn to publish your Nerdpack to the New Relic One catalog' +description: 'Learn to publish your Nerdpack to Instant Observability' tileShorthand: title: 'Publish your Nerdpack' description: 'Publish your Nerdpack' @@ -27,37 +27,33 @@ nr1 update ## Check your permissions -When you publish your Nerdpack, it's registered with the New Relic One catalog. From there, some users can subscribe to your Nerdpack. Subscribing users need to have: +When you publish your Nerdpack, it's registered with the Instant Observability catalog. From there, some users can subscribe to your Nerdpack. Subscribing users need to have: - Access to the account that published the Nerdpack - The [necessary permissions for managing Nerdpacks](/build-apps/permission-manage-apps) ## Update your package version -You can only publish a package version to the catalog one time. For example, you can't publish two instances of version _1.0.0_. So, each time you want to deploy a new version of your code, you need to increment its version in the Nerdpack's _package.json_ file: +You can only publish a package version to the Instant Observabiltiy catalog one time. For example, you can't publish two instances of version _1.0.0_. So, each time you want to deploy a new version of your code, you need to increment its version in the Nerdpack's _package.json_ file: ```json fileName=package.json lineHighlight=4 { - "private": true, - "name": "demo-app", - "version": "1.0.0", - "scripts": { - "start": "nr1 nerdpack:serve", - "test": "exit 0" - }, - "nr1": { - "uuid": "ab123c45-678d-9012-efg3-45hi6jkl7890" - }, - "dependencies": { - "prop-types": "^15.6.2", - "react": "^16.6.3", - "react-dom": "^16.6.3" - }, - "browserslist": [ - "last 2 versions", - "not ie < 11", - "not dead" - ] + "private": true, + "name": "demo-app", + "version": "1.0.0", + "scripts": { + "start": "nr1 nerdpack:serve", + "test": "exit 0" + }, + "nr1": { + "uuid": "ab123c45-678d-9012-efg3-45hi6jkl7890" + }, + "dependencies": { + "prop-types": "^15.6.2", + "react": "^16.6.3", + "react-dom": "^16.6.3" + }, + "browserslist": ["last 2 versions", "not ie < 11", "not dead"] } ``` @@ -73,10 +69,10 @@ If you built your Nerdpack from scratch with `nr1 create --type nerdpack`, then ```json fileName=nr1.json lineHighlight=3 { - "schemaType": "NERDPACK", - "id": "ab123c45-678d-9012-efg3-45hi6jkl7890", - "displayName": "DemoApp", - "description": "Nerdpack demo-app" + "schemaType": "NERDPACK", + "id": "ab123c45-678d-9012-efg3-45hi6jkl7890", + "displayName": "DemoApp", + "description": "Nerdpack demo-app" } ``` @@ -157,17 +153,17 @@ Because you're going to view a published Nerdpack, rather than a locally served -Navigate to **Apps**: +Navigate to **Instant Observability**: -![Navigate to the Apps page](../../../images/serve-publish-subscribe/nav-to-apps.png) +![Navigate to Instant Observability](../../../images/serve-publish-subscribe/nav-to-io.png) -Whether you published a New Relic One application or a custom visualization, you'll find your project under **Apps**. +Whether you published a New Relic One application or a custom visualization, you'll find your project under **Instant Observability**. -Find your published Nerdpack under **New Relic One catalog**: +Find your published Nerdpack using the Apps filter or search bar: ![Published Nerdpack](../../../images/serve-publish-subscribe/published-app.png) @@ -175,7 +171,7 @@ Notice the `Custom` indicator on its UI tile. Use this to distinguish between pu -Only Nerdpacks with tagged versions are shown under **New Relic One catalog**. So, if you published without a tag or removed a tag from your published Nerdpack, you won't see it in the catalog. +Only Nerdpacks with tagged versions are shown in Instant Observability. So, if you published without a tag or removed a tag from your published Nerdpack, you won't see it in the catalog. @@ -185,7 +181,7 @@ Only Nerdpacks with tagged versions are shown under **New Relic One catalog**. S ## Resolve issues with accessing your published Nerdpack -Sometimes, when you publish your Nerdpack, you may come across issues. Whether you can't publish your Nerdpack due to some issue with your code or you can't find your Nerdpack in the catalog, consider some common solutions for resolving these issues. +Sometimes, when you publish your Nerdpack, you may come across issues. Whether you can't publish your Nerdpack due to some issue with your code or you can't find your Nerdpack in Instant Observability, consider some common solutions for resolving these issues. ### Debug your command diff --git a/src/markdown-pages/build-apps/serve-publish-subscribe/serve.mdx b/src/markdown-pages/build-apps/serve-publish-subscribe/serve.mdx index 162c91d0f..185942219 100644 --- a/src/markdown-pages/build-apps/serve-publish-subscribe/serve.mdx +++ b/src/markdown-pages/build-apps/serve-publish-subscribe/serve.mdx @@ -140,7 +140,7 @@ Generally, you don't need to know how your application code is loaded in New Rel When you run `nr1 nerdpack:serve`, your code is served by your local machine using an nr-local.net subdomain. This domain points to 127.0.0.1, and uses a variety of ports to connect, including 9973. -To load a Nerdpack into the platform, whether it's locally served or published to the app catalog, New Relic uses an `