add documentation for Radius Dashboard (#1047)

* add documentation for Radius Dashboard Signed-off-by: Will Tsai <[email protected]> * minor correction Signed-off-by: Will Tsai <[email protected]> * Apply suggestions from code review Co-authored-by: Will Smith <[email protected]> Signed-off-by: Will <[email protected]> * address feedback Signed-off-by: Will Tsai <[email protected]> * spelling corrections Signed-off-by: Will Tsai <[email protected]> --------- Signed-off-by: Will Tsai <[email protected]> Signed-off-by: Will <[email protected]> Co-authored-by: Will Smith <[email protected]>
radius-project · Feb 29, 2024 · d9edd46 · d9edd46
1 parent a301e62
commit d9edd46
Show file tree

Hide file tree

Showing 7 changed files with 85 additions and 6 deletions.
diff --git a/.github/config/en-custom.txt b/.github/config/en-custom.txt
@@ -1233,3 +1233,4 @@ AuthConfig
 GitAuthConfig
 GitAuthConfigPat
 SecretConfig
+appgraph
diff --git a/docs/content/getting-started/demo-dashboard-appgraph-db.png b/docs/content/getting-started/demo-dashboard-appgraph-db.png
diff --git a/docs/content/getting-started/demo-dashboard-appgraph.png b/docs/content/getting-started/demo-dashboard-appgraph.png
diff --git a/docs/content/getting-started/index.md b/docs/content/getting-started/index.md
@@ -87,14 +87,21 @@ This command:
 
 - Runs the application in your Kubernetes cluster
 - Creates a port-forward from localhost to port 3000 inside the container so you can navigate to the app's frontend UI
+- Creates a port-forward from localhost to port 7007 inside the container so you can navigate to your Radius Dashboard
 - Streams container logs to your terminal
 
+<br>
 In your browser you should see the demo app:
 
 {{< image src="demo-screenshot.png" alt="Screenshot of the demo container" width=600px >}}
-<br /><br />
+<br>
+
+Access your Radius Dashboard by opening [http://localhost:7007](http://localhost:7007/resources/default/Applications.Core/applications/demo/application) in a browser. In your browser, you should see the Radius Dashboard, which includes visualizations of the application graph, environments, and recipes:
 
-Congrats! You're running your first Radius app. When you're ready to move on to the next step, use <kbd>CTRL</kbd>+ <kbd>C</kbd> to exit the command.
+{{< image src="demo-dashboard-appgraph.png" alt="screenshot of an example Radius Dashboard home page" width=800 >}}
+<br><br>
+
+> Congrats! You're running your first Radius app. <br> When you're ready to move on to the next step, use <kbd>CTRL</kbd>+ <kbd>C</kbd> to exit the command.
 
 ## 5. Add Database
 
@@ -136,17 +143,22 @@ You should see the Radius Connections section with new environment variables add
 
 Navigate to the Todo List tab and test out the application. Using the Todo page will update the saved state in Redis:
 
-{{< image src="./images/demo-with-todolist.png" alt="Screenshot of the todolist" width=700px >}}
+{{< image src="demo-with-todolist.png" alt="Screenshot of the todolist" width=700px >}}
 <br /><br />
 
-Press <kbd>CTRL</kbd>+ <kbd>C</kbd> when you are finished with the website.
+Access your Radius Dashboard again by opening [http://localhost:7007](http://localhost:7007/resources/default/Applications.Core/applications/demo/application) in a browser. You should see a visualization of the application graph for your `demo` app, including the connection to the `db` Redis Cache:
+
+{{< image src="demo-dashboard-appgraph-db.png" alt="screenshot of an example Radius Dashboard home page" width=800 >}}
+<br><br>
+
+> Press <kbd>CTRL</kbd>+ <kbd>C</kbd> when you are finished with the websites.
 
-## 7. View the application connections
+## 7. View the application graph
 
 Radius Connections are more than just environment variables and configuration. You can also access the "application graph" and understand the connections within your application with the following command:
 
 ```bash
-rad app connections
+rad app graph
 ```
 
 You should see the following output, detailing the connections between the `demo` container and the `db` Redis Cache, along with information about the underlying Kubernetes resources running the app:

diff --git a/docs/content/guides/tooling/dashboard/_index.md b/docs/content/guides/tooling/dashboard/_index.md
@@ -0,0 +1,7 @@
+---
+type: docs
+title: "Radius dashboard"
+linkTitle: "Dashboard"
+description: "Documentation on the Radius dashboard"
+weight: 100
+---
diff --git a/docs/content/guides/tooling/dashboard/overview/dashboard-home.png b/docs/content/guides/tooling/dashboard/overview/dashboard-home.png
diff --git a/docs/content/guides/tooling/dashboard/overview/index.md b/docs/content/guides/tooling/dashboard/overview/index.md
@@ -0,0 +1,59 @@
+---
+type: docs
+title: "Overview: Radius Dashboard"
+linkTitle: "Overview"
+description: "Learn about using the Radius Dashboard to visualize your application graph, environments, and recipes"
+weight: 100
+categories: "Overview"
+tags: ["dashboard"]
+---
+
+## What is the Radius Dashboard?
+
+The Radius Dashboard is the frontend experience for Radius and provides a graphical interface for visualizing your [Application Graph]({{< ref "guides/author-apps/application/overview#query-and-understand-your-application-with-the-radius-application-graph" >}}), [Environments]({{< ref "guides/deploy-apps/environments/overview" >}}), and [Recipes]({{< ref "guides/recipes/overview" >}}). It provides both textual and visual representations of your Radius Applications and resources, as well as a directory of Recipes that are available in each Environment.
+
+{{< image src="dashboard-home.png" alt="screenshot of an example Radius Dashboard home page" width=800 >}}
+
+## Built with extensibility in mind
+
+The Radius Dashboard is built on [Backstage](https://backstage.io/), an open-source platform for building developer portals that provides a rich set of components to accelerate UI development. It is a skinned deployment of Backstage that includes a set of plugins that provide the Radius experience. The components that make up the dashboard are built with extensibility in mind so that they can be used in other contexts beyond Backstage in the future.
+
+## Key features
+
+The Radius Dashboard currently provides the following features:
+
+- **Application graph visualization**: A visualization of the [application graph]({{< ref "guides/author-apps/application/overview#query-and-understand-your-application-with-the-radius-application-graph" >}}) that shows how resources within an application are connected to each other and the underlying infrastructure.
+- **Resource overview and details**: Detailed information about resources within Radius, including [applications]({{< ref "guides/author-apps/application/overview" >}}), [environments]({{< ref "guides/deploy-apps/environments/overview" >}}), and infrastructure.
+- **Recipes directory**: A listing of all the Radius [Recipes]({{< ref "guides/recipes/overview" >}}) available to the user for a given environment.
+
+## Installation
+
+The Radius Dashboard is installed by default as a part of your Radius initialization and deployment.
+
+{{< alert title="Opting-out" color="warning" >}}
+To opt-out of installing the dashboard, you can use the `--set dashboard.enabled=false` flag when running `rad init` or `rad install kubernetes`. See more instructions in the Radius [initialization]({{< ref "installation#step-3-initialize-radius" >}}) and [installation]({{< ref "guides/operations/kubernetes/kubernetes-install" >}}) guides.
+{{< /alert >}}
+
+To remove the dashboard from your existing installation of Radius on your cluster, you can run:
+
+```bash
+rad install kubernetes --reinstall --set dashboard.enabled=false
+```
+
+## Accessing the Dashboard
+
+When you run your application with the `rad run` command, Radius creates a port-forward from `localhost` to port `7007` inside the container that you may use to access your Radius Dashboard by visiting [http://localhost:7007](http://localhost:7007) in a browser.
+
+Alternatively, you can manually create a port-forward from `localhost` to the port number of your choice to provide access to your Radius Dashboard:
+
+```bash
+kubectl port-forward --namespace=radius-system svc/dashboard 7007:80
+```
+
+## Reference documentation
+
+Visit the [API reference documentation]({{< ref "concepts/technical/api" >}}) to learn more about the underlying [Radius Application Graph]({{< ref "guides/author-apps/application/overview#query-and-understand-your-application-with-the-radius-application-graph" >}}) data on which the dashboard visualizations are built.
+
+To get started with trying the Radius Dashboard, see the [getting started guide]({{< ref "getting-started" >}}):
+
+{{< button text="Getting started" page="getting-started" >}}