add documentation for Radius Dashboard

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) 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-home.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) in a browser and navigate to the `APP GRAPH` link for your demo application. 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-app-graph.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:

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
+---

docs/content/guides/tooling/dashboard/overview/index.md

@@ -0,0 +1,37 @@
+---
+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"]
+---
+
+Radius Dashboard is the frontend experience for Radius and 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. The Radius Dashboard 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 of the Radius Dashboard currently include:
+
+- _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.
+
+{{< alert title="Dashboard installation" color="warning" >}}
+The Radius Dashboard is installed by default as a part of your Radius initialization and deployment. To opt-out of installing the dashboard, you can use the `--set dashboard.enabled=false` flag when running `rad install kubernetes`. See more instructions in the [CLI reference documentation]({{< ref "/reference/cli" >}}).
+{{< /alert >}}
+
+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.
+
+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
+```
+
+{{< image src="dashboard-home.png" alt="screenshot of an example Radius Dashboard home page" width=800 >}}
+
+## 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.
+
+{{< button text="API reference" page="concepts/technical/api" >}}