Add a cloud selector dropdown and CloudLink react component that updates based on its value (#284)

ddelnano · web-flow · commit 8800064b291b · 2024-07-09T13:39:43.000-07:00
* Add CloudLink react component to allow for easy link switching between clouds

Signed-off-by: Dom Del Nano &lt;ddelnano@gmail.com&gt;

Signed-off-by: Dom Del Nano &lt;ddelnano@gmail.com&gt;
diff --git a/content/en/01-about-pixie/05-faq.md b/content/en/01-about-pixie/05-faq.md
@@ -136,7 +136,7 @@ See the [User Management & Sharing](/reference/admin/user-mgmt) reference docs.
 
 ### How do I set up RBAC?
 
-Pixie does not yet offer full RBAC support. However, you can enable “Approvals” under the [Org Settings](https://work.withpixie.ai/admin/org) tab on the admin page. This requires each user who registers in the org to be manually approved on the [Users](https://work.withpixie.ai/admin/users) tab before they can log in.
+Pixie does not yet offer full RBAC support. However, you can enable “Approvals” under the <CloudLink url="/admin/org">Org Settings</CloudLink> tab on the admin page. This requires each user who registers in the org to be manually approved on the <CloudLink url="/admin/users">Users</CloudLink> tab before they can log in.
 
 ### How do I send alerts?
 
diff --git a/content/en/02-installing-pixie/03-install-guides/01-community-cloud-for-pixie.md b/content/en/02-installing-pixie/03-install-guides/01-community-cloud-for-pixie.md
@@ -1,6 +1,6 @@
 ---
-title: "Community Cloud for Pixie"
-metaTitle: "Install | Install Guides | Community Cloud for Pixie"
+title: "New Relic - Community Cloud"
+metaTitle: "Install | Install Guides | New Relic - Community Cloud"
 metaDescription: "Getting started guide to setup Pixie"
 order: 1
 ---
diff --git a/content/en/02-installing-pixie/04-install-schemes/02-yaml.md b/content/en/02-installing-pixie/04-install-schemes/02-yaml.md
@@ -80,7 +80,7 @@ For more deploy options that you can specify to configure Pixie, refer to our [d
 
 ## 6. Verify
 
-To verify that Pixie is running in your environment you can check the [admin page](https://work.withpixie.ai/admin) or run:
+To verify that Pixie is running in your environment you can check the <CloudLink url="/admin">admin page</CloudLink> or run:
 
 ```bash
 # Check pods are up
diff --git a/content/en/02-installing-pixie/04-install-schemes/03-helm.md b/content/en/02-installing-pixie/04-install-schemes/03-helm.md
@@ -90,7 +90,7 @@ helm install pixie pixie-vizier/vizier-chart --set deployKey=<deploy-key-goes-he
 
 ## 4. Verify
 
-To verify that Pixie is running in your environment you can check the [admin page](https://work.withpixie.ai/admin) or run:
+To verify that Pixie is running in your environment you can check the <CloudLink url="/admin">admin page</CloudLink> or run:
 
 ```bash
 # Check pods are up
diff --git a/content/en/03-using-pixie/01-using-live-ui.md b/content/en/03-using-pixie/01-using-live-ui.md
@@ -17,7 +17,7 @@ Pixie needs to be installed on your Kubernetes cluster. If it is not already ins
 
 ## Running your First PxL Script
 
-1. Open Pixie's [Live UI](https://work.withpixie.ai).
+1. Open Pixie's <CloudLink url="/">Live UI</CloudLink>.
 
 2. Select your cluster using the `cluster` drop-down menu.
 
diff --git a/content/en/04-tutorials/01-pixie-101/01-network-monitoring.md b/content/en/04-tutorials/01-pixie-101/01-network-monitoring.md
@@ -29,7 +29,7 @@ A global view of the network traffic flowing within a cluster can be used to:
 
 Let’s use the `px/net_flow_graph` script to see a graph of all of the network traffic passing through the cluster:
 
-1. Open the [Live UI](http://work.withpixie.ai/) and select `px/net_flow_graph` from the `script` drop-down menu at the top.
+1. Open the <CloudLink url="/">Live View</CloudLink> and select `px/net_flow_graph` from the `script` drop-down menu at the top.
 
 > When the script opens, you’ll get an error indicating a value is missing for the `namespace` required argument. The UI denotes required script arguments with an asterisk after the argument name.
 
@@ -161,5 +161,5 @@ for a different view of the graph.
 
 This tutorial demonstrated three of Pixie's [community scripts](https://github.com/pixie-io/pixie/tree/main/src/pxl_scripts). For more insight into your network, check out the following scripts:
 
-- [`px/dns_data`](https://work.withpixie.ai/script/dns_data) shows the most recent DNS requests in your cluster, including the full request and response bodies.
-- [`bpftrace/tcp_retransmits`](https://work.withpixie.ai/script/bpftrace/tcp_retransmits) graphs the TCP retransmission counts across your cluster. Don't forget to click the RUN button.
+- <CloudLink url="script/dns_data">px/dns_data</CloudLink> shows the most recent DNS requests in your cluster, including the full request and response bodies.
+- <CloudLink url="script/bpftrace/tcp_retransmits">bpftrace/tcp_retransmits</CloudLink> graphs the TCP retransmission counts across your cluster. Don't forget to click the RUN button.
diff --git a/content/en/04-tutorials/01-pixie-101/02-infra-health.md b/content/en/04-tutorials/01-pixie-101/02-infra-health.md
@@ -24,7 +24,7 @@ This tutorial will demonstrate how to use Pixie to:
 
 Let’s use the `px/nodes` script to get high-level resource usage information for all of the nodes in our cluster:
 
-1. Open the [Live UI](http://work.withpixie.ai/) and select `px/nodes` from the `script` drop-down menu at the top.
+1. Open the <CloudLink url="/">Live UI</CloudLink> and select `px/nodes` from the `script` drop-down menu at the top.
 
 > This script lists all of the nodes in the cluster along with their CPU usage, memory consumption, and network traffic stats. It also displays a list of pods that were on each node during the time window.
 
@@ -112,18 +112,18 @@ This tutorial demonstrated a few of Pixie's [community scripts](https://github.c
 
 #### Resource usage by Kubernetes object
 
-- [`px/namespaces`](https://work.withpixie.ai/script/namespaces) lists the namespaces on the cluster with their pod and service counts. It also lists the high-level resource consumption by namespace.
-- [`px/namespace`](https://work.withpixie.ai/script/namespace) lists the pods and services in a given namespace, as well as a service map.
-- [`px/pods`](https://work.withpixie.ai/script/pods) shows an overview of the pods in the specified namespace along with their high-level application metrics (latency, error, throughput) and resource usage (cpu, writes, reads).
+- <CloudLink url="/script/namespaces">px/namespaces</CloudLink> lists the namespaces on the cluster with their pod and service counts. It also lists the high-level resource consumption by namespace.
+- <CloudLink url="/script/namespace">px/namespace</CloudLink> lists the pods and services in a given namespace, as well as a service map.
+- <CloudLink url="/script/pods">px/pods</CloudLink> shows an overview of the pods in the specified namespace along with their high-level application metrics (latency, error, throughput) and resource usage (cpu, writes, reads).
 
 #### Memory usage
 
-- [`px/pid_memory_usage`](https://work.withpixie.ai/script/pid_memory_usage) shows the virtual and average memory useage for all processes in the cluster.
-- [`px/service_memory_usage`](https://work.withpixie.ai/script/service_memory_usage) shows the virtual and average memory useage for all services in the cluster.
-- [`px/pod_lifetime_resource`](https://work.withpixie.ai/script/pod_lifetime_resource) shows the total resource usage of a pod over its lifetime.
+- <CloudLink url="script/pid_memory_usage">px/pid_memory_usage</CloudLink> shows the virtual and average memory useage for all processes in the cluster.
+- <CloudLink url="script/service_memory_usage">px/service_memory_usage</CloudLink> shows the virtual and average memory useage for all services in the cluster.
+- <CloudLink url="script/pod_lifetime_resource">px/pod_lifetime_resource</CloudLink> shows the total resource usage of a pod over its lifetime.
 
 #### Miscellaneous / other
 
-- [`px/perf_flamegraph`](https://work.withpixie.ai/script/perf_flamegraph) shows stack trace samples that indicate where your applications are spending their time. Optional filters refine the results by namespace, node or pod.
-- [`px/upids`](https://work.withpixie.ai/script/upids) shows a list of UPIDs running in the specified namespace.
-- [`px/jvm_stats`](https://work.withpixie.ai/script/jvm_stats) shows JVM stats for Java processes running on the cluster.
+- <CloudLink url="script/perf_flamegraph">px/perf_flamegraph</CloudLink> shows stack trace samples that indicate where your applications are spending their time. Optional filters refine the results by namespace, node or pod.
+- <CloudLink url="script/upids">px/upids</CloudLink> shows a list of UPIDs running in the specified namespace.
+- <CloudLink url="script/jvm_stats">px/jvm_stats</CloudLink> shows JVM stats for Java processes running on the cluster.
diff --git a/content/en/04-tutorials/01-pixie-101/03-service-performance.md b/content/en/04-tutorials/01-pixie-101/03-service-performance.md
@@ -38,7 +38,7 @@ When debugging issues with microservices, it helps to start at a high-level view
 
 For a global view of the services in your cluster, we'll use the `px/cluster` script:
 
-1. Open the [Live UI](http://work.withpixie.ai/) and select `px/cluster` from the `script` drop-down menu at the top.
+1. Open the <CloudLink url="/">Live UI</CloudLink> and select `px/cluster` from the `script` drop-down menu at the top.
 
 > This script shows a graph of the HTTP traffic between the services in your cluster, along with latency, error, and throughput rate per service.
 
@@ -169,7 +169,7 @@ Let's look at latency by logical service endpoint:
 
 This tutorial demonstrated a few of Pixie's [community scripts](https://github.com/pixie-io/pixie/tree/main/src/pxl_scripts). For more insight into the health of your services, check out the following scripts:
 
-- [`px/pod`](http://work.withpixie.ai/script/pod) shows a CPU flamegraph for the pod to see how your Go/C++/Rust applications are spending their time. To learn more about how use Pixie for application profiling, check out the [Profiling with Flamegraphs](/tutorials/pixie-101/profiler) tutorial.
-- [`px/services`](http://work.withpixie.ai/script/services) shows LET over time for all services in the given namespace, along with a  service graph.
-- [`px/service_stats`](http://work.withpixie.ai/script/service_stats) shows LET over time for the given service, along with a service graph and summary of incoming and outgoing traffic.
-- [`px/service_edge_stats`](http://work.withpixie.ai/script/service_edge_stats) shows statistics about the traffic between two services.
+- <CloudLink url="/script/pod">px/pod</CloudLink> shows a CPU flamegraph for the pod to see how your Go/C++/Rust applications are spending their time. To learn more about how use Pixie for application profiling, check out the [Profiling with Flamegraphs](/tutorials/pixie-101/profiler) tutorial.
+- <CloudLink url="/script/services">px/services</CloudLink> shows LET over time for all services in the given namespace, along with a  service graph.
+- <CloudLink url="/script/service_stats">px/service_stats</CloudLink> shows LET over time for the given service, along with a service graph and summary of incoming and outgoing traffic.
+- <CloudLink url="/script/service_edge_stats">px/service_edge_stats</CloudLink> shows statistics about the traffic between two services.
diff --git a/content/en/04-tutorials/01-pixie-101/04-database-query-profiling.md b/content/en/04-tutorials/01-pixie-101/04-database-query-profiling.md
@@ -33,7 +33,7 @@ This tutorial will demonstrate how to use Pixie to monitor MySQL:
 
 To see MySQL latency, error, and throughput rate for all pods in your cluster, we’ll use the `px/mysql_stats` script:
 
-1. Open the [Live UI](http://work.withpixie.ai/) and select `px/mysql_stats` from the `script` drop-down menu.
+1. Open the <CloudLink url="/">Live UI</CloudLink> and select `px/mysql_stats` from the `script` drop-down menu.
 
 > This script shows latency, error and throughput over time for all MySQL requests in the cluster.
 
@@ -197,17 +197,17 @@ This tutorial demonstrated a few of Pixie's [community scripts](https://github.c
 
 #### PostgreSQL
 
-- [`px/pgsql_data`](https://work.withpixie.ai/script/pgsql_data) shows the most recent Postgres requests in the cluster.
-- [`px/pgsql_stats`](https://work.withpixie.ai/script/pgsql_stats) shows latency, error, and throughput rate for a pod's PostgreSQL requests.
-- [`px/pgsql_flow_graph`](https://work.withpixie.ai/script/pgsql_flow_graph) shows a graph of the PostgreSQL messages in the cluster with latency stats.
+- <CloudLink url="/script/pgsql_data">px/pgsql_data</CloudLink> shows the most recent Postgres requests in the cluster.
+- <CloudLink url="/script/pgsql_stats">px/pgsql_stats</CloudLink> shows latency, error, and throughput rate for a pod's PostgreSQL requests.
+- <CloudLink url="/script/pgsql_flow_graph">px/pgsql_flow_graph</CloudLink> shows a graph of the PostgreSQL messages in the cluster with latency stats.
 
 #### Redis
 
-- [`px/redis_data`](https://work.withpixie.ai/script/redis_data) shows the most recent Redis requests in the cluster.
-- [`px/redis_stats`](https://work.withpixie.ai/script/redis_stats) shows latency, error, and throughput rate for a pod's Redis requests.
-- [`px/redis_flow_graph`](https://work.withpixie.ai/script/redis_flow_graph) shows a graph of the Redis messages in the cluster with latency stats.
+- <CloudLink url="/script/redis_data">px/redis_data</CloudLink> shows the most recent Redis requests in the cluster.
+- <CloudLink url="/script/redis_stats">px/redis_stats</CloudLink> shows latency, error, and throughput rate for a pod's Redis requests.
+- <CloudLink url="/script/redis_flow_graph">px/redis_flow_graph</CloudLink> shows a graph of the Redis messages in the cluster with latency stats.
 
 #### Cassandra
 
-- [`px/cql_data`](https://work.withpixie.ai/script/cql_data) shows the most recent Cassandra requests in the cluster.
-- [`px/cql_stats`](https://work.withpixie.ai/script/cql_stats) shows latency, error, and throughput rate for a pod's Cassandra requests.
+- <CloudLink url="/script/cql_data">px/cql_data</CloudLink> shows the most recent Cassandra requests in the cluster.
+- <CloudLink url="/script/cql_stats">px/cql_stats</CloudLink> shows latency, error, and throughput rate for a pod's Cassandra requests.
diff --git a/content/en/04-tutorials/01-pixie-101/05-request-tracing.md b/content/en/04-tutorials/01-pixie-101/05-request-tracing.md
@@ -139,9 +139,9 @@ If services are backed by multiple pods, it is worth inspecting the individual p
 
 This tutorial demonstrated a few of Pixie's [community scripts](https://github.com/pixie-io/pixie/tree/main/src/pxl_scripts). To see full body requests for a specific protocol, check out the following scripts:
 
-- [`px/http_data`](https://work.withpixie.ai/script/http_data) shows the most recent HTTP/2 requests in the cluster.
-- [`px/dns_data`](https://work.withpixie.ai/script/dns_data) shows the most recent DNS requests in the cluster.
-- [`px/mysql_data`](https://work.withpixie.ai/script/mysql_data) shows the most recent MySQL requests in the cluster.
-- [`px/pgsql_data`](https://work.withpixie.ai/script/pgsql_data) shows the most recent Postgres requests in the cluster.
-- [`px/redis_data`](https://work.withpixie.ai/script/redis_data) shows the most recent Redis requests in the cluster.
-- [`px/cql_data`](https://work.withpixie.ai/script/cql_data) shows the most recent Cassandra requests in the cluster.
+- <CloudLink url="/script/http_data">px/http_data</CloudLink> shows the most recent HTTP/2 requests in the cluster.
+- <CloudLink url="/script/dns_data">px/dns_data</CloudLink> shows the most recent DNS requests in the cluster.
+- <CloudLink url="/script/mysql_data">px/mysql_data</CloudLink> shows the most recent MySQL requests in the cluster.
+- <CloudLink url="/script/pgsql_data">px/pgsql_data</CloudLink> shows the most recent Postgres requests in the cluster.
+- <CloudLink url="/script/redis_data">px/redis_data</CloudLink> shows the most recent Redis requests in the cluster.
+- <CloudLink url="/script/cql_data">px/cql_data</CloudLink> shows the most recent Cassandra requests in the cluster.
diff --git a/content/en/04-tutorials/01-pixie-101/06-profiler.md b/content/en/04-tutorials/01-pixie-101/06-profiler.md
@@ -49,7 +49,7 @@ You should see something similar to the following:
 
 We are going to use Pixie to check the health of a specific pod.
 
-1. Open Pixie's [Live UI](https://work.withpixie.ai/)
+1. Open Pixie's <CloudLink url="/">Live UI</CloudLink>
 
 2. Select your cluster and the `px/namespaces` script from the drop-down menus in the top bar.
 
diff --git a/content/en/04-tutorials/02-pxl-scripts/02-script-dev-environment.md b/content/en/04-tutorials/02-pxl-scripts/02-script-dev-environment.md
@@ -43,7 +43,7 @@ make dev
 
 <svg title='' src='script-dev-env/dev-env-2.png'/>
 
-5. (Soft) reload the [Live UI](https://work.withpixie.ai) webpage. A hard reload will clear the variable you just set.
+5. (Soft) reload the <CloudLink url="/">Live View</CloudLink> webpage. A hard reload will clear the variable you just set.
 
 ## Prepare your Script
 
@@ -60,7 +60,7 @@ cp -r px/http_data_filtered px/my_pxl_script
 	- Edit `manifest.json` to change the script description.
 	- Edit optional `vis.json` to change the charts and table visualizations.
 
-3. (Soft) reload the [Live UI](https://work.withpixie.ai) webpage to see your script appear as an option in the drop-down cluster menu. The script will appear under the foldername from step 1 (e.g. `my_pxl_script`).
+3. (Soft) reload the <CloudLink url="/">Live View</CloudLink> webpage to see your script appear as an option in the drop-down cluster menu. The script will appear under the foldername from step 1 (e.g. `my_pxl_script`).
 
 4. Use your favorite editor to edit the `script_name.pxl` and `vis.json` files. Make sure to soft reload the Live UI webpage to reflect any saved edits to the script.
 
@@ -80,7 +80,7 @@ localStorage.clear('px-custom-bundle-path')
 
 <svg title='' src='script-dev-env/dev-env-3.png'/>
 
-3. Reload the [Live UI](https://work.withpixie.ai) webpage.
+3. Reload the <CloudLink url="/">Live View</CloudLink> webpage.
 
 ## Contribute Your Script (Optional)
 
diff --git a/content/en/04-tutorials/02-pxl-scripts/03-script-of-the-week/01-script-of-the-week-1.md b/content/en/04-tutorials/02-pxl-scripts/03-script-of-the-week/01-script-of-the-week-1.md
@@ -29,7 +29,7 @@ Pixie (>= v0.4.0) needs to be installed on your Kubernetes cluster. If it is not
 
 Steps to run the script:
 
-- Open up Pixie's [Live UI](https://work.withpixie.ai) and select your cluster.
+- Open up Pixie's <CloudLink url="/">Live UI</CloudLink> and select your cluster.
 - Select the `px/net_flow_graph` script using the drop down menu or with the Pixie Command button (`cmd/ctrl+k` keyboard shortcut).
 
 <svg title='' src='sotw-1/enter-script.png'/>
diff --git a/content/en/04-tutorials/02-pxl-scripts/03-script-of-the-week/02-script-of-the-week-2.md b/content/en/04-tutorials/02-pxl-scripts/03-script-of-the-week/02-script-of-the-week-2.md
@@ -23,7 +23,7 @@ Let's use Pixie to examine the DNS requests in your cluster and see the impact o
 
 - [Install](/installing-pixie/) Pixie on your cluster.
 
-- In the [Live UI](https://work.withpixie.ai/), select the `sotw/dns_external_fqdn_list` script. If you don't see any results, try increasing the timespan using the `start` value in the top right. Re-run the script with `cmd/ctrl+enter` or using the "RUN" button in the top right.
+- In the <CloudLink url="/">Live View</CloudLink>, select the `sotw/dns_external_fqdn_list` script. If you don't see any results, try increasing the timespan using the `start` value in the top right. Re-run the script with `cmd/ctrl+enter` or using the "RUN" button in the top right.
 
 - This script outputs a list of all of the **external** fully qualified domain names from successful DNS requests made in your cluster. Click on the "NUM_REQUESTS" column title to sort by number of requests per fully qualified domain name (FQDN).
 
diff --git a/content/en/04-tutorials/03-integrations/01-slackbot-alert.md b/content/en/04-tutorials/03-integrations/01-slackbot-alert.md
@@ -135,7 +135,7 @@ Congrats, your Pixie Alerts App will now post automated alerts to the `#pixie-al
 
 The slackbot can be modified to alert based on any information available from Pixie's observability platform. Some notes:
 
-- We recommend testing your PxL code in the [Live UI](https://work.withpixie.ai/). Once it works, you can replace the `PXL_SCRIPT` string in the slackbot app code.
+- We recommend testing your PxL code in the <CloudLink url="/">Live View</CloudLink>. Once it works, you can replace the `PXL_SCRIPT` string in the slackbot app code.
 
 - The example `PXL_SCRIPT` filters for services in the `px-sock-shop` namespace only. Make sure to modify or remove this line to fit your cluster's needs.
 
diff --git a/content/en/04-tutorials/04-custom-data/01-distributed-bpftrace-deployment.md b/content/en/04-tutorials/04-custom-data/01-distributed-bpftrace-deployment.md
@@ -56,7 +56,7 @@ In this demo, we'll deploy Dale Hamel's bpftrace [TCP retransmit tool](https://g
 
 We've incorporated this trace into a PxL script called [`bpftrace/tcp_retransmits`](https://github.com/pixie-io/pixie/tree/main/src/pxl_scripts/bpftrace/tcp_retransmits). To run this script:
 
-- Open up Pixie's [Live View](https://work.withpixie.ai) and select your cluster.
+- Open up Pixie's <CloudLink url="/">Live View</CloudLink> and select your cluster.
 - Select the `bpftrace/tcp_retransmits` script using the drop down `script` menu or with Pixie Command. Pixie Command can be opened with the `ctrl/cmd+k` keyboard shortcut.
 - Run the script using the Run button in the top right, or with the `ctrl/cmd+enter` keyboard shortcut.
 
diff --git a/gatsby-browser.js b/gatsby-browser.js
@@ -25,6 +25,7 @@ import React from 'react';
 import MainThemeProvider from './src/components/mainThemeProvider.tsx';
 import './src/global.css';
 import SidebarProvider from './src/components/sidebar/sidebarProvider.tsx';
+import CloudLinkProvider from './src/components/cloudLinkProvider.tsx';
 import SearchProvider from './src/components/search-context.tsx';
 import { processClientEntry, runZoom } from './src/components/image-zoom-modal.plugin.ts';
 import TabSwitcherProvider from './src/components/tabSwitcherProvider.tsx';
@@ -59,11 +60,13 @@ export const onRouteUpdate = () => {
 export const wrapRootElement = ({ element }) => (
   <TabSwitcherProvider>
     <MainThemeProvider>
-      <SidebarProvider>
-        <SearchProvider>
-          {element}
-        </SearchProvider>
-      </SidebarProvider>
+      <CloudLinkProvider>
+        <SidebarProvider>
+          <SearchProvider>
+            {element}
+          </SearchProvider>
+        </SidebarProvider>
+      </CloudLinkProvider>
     </MainThemeProvider>
   </TabSwitcherProvider>
 );
diff --git a/gatsby-node.js b/gatsby-node.js
diff --git a/gatsby-ssr.js b/gatsby-ssr.js
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
diff --git a/src/components/cloudLinkProvider.tsx b/src/components/cloudLinkProvider.tsx
diff --git a/src/components/layout.tsx b/src/components/layout.tsx
diff --git a/src/components/mdxComponents/baseComponents.tsx b/src/components/mdxComponents/baseComponents.tsx
diff --git a/src/components/mdxComponents/cloud-link.tsx b/src/components/mdxComponents/cloud-link.tsx
diff --git a/src/templates/docs.tsx b/src/templates/docs.tsx
