diff --git a/.github/config/en-custom.txt b/.github/config/en-custom.txt index f3f5786bd..d3cf05d47 100644 --- 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 new file mode 100644 index 000000000..cf83def1d Binary files /dev/null and b/docs/content/getting-started/demo-dashboard-appgraph-db.png differ diff --git a/docs/content/getting-started/demo-dashboard-appgraph.png b/docs/content/getting-started/demo-dashboard-appgraph.png new file mode 100644 index 000000000..265c20e8f Binary files /dev/null and b/docs/content/getting-started/demo-dashboard-appgraph.png differ diff --git a/docs/content/getting-started/index.md b/docs/content/getting-started/index.md index 8551692ea..818b1c6d0 100644 --- 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 +
In your browser you should see the demo app: {{< image src="demo-screenshot.png" alt="Screenshot of the demo container" width=600px >}} -

+
+ +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 CTRL+ C to exit the command. +{{< image src="demo-dashboard-appgraph.png" alt="screenshot of an example Radius Dashboard home page" width=800 >}} +

+ +> Congrats! You're running your first Radius app.
When you're ready to move on to the next step, use CTRL+ C 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 >}}

-Press CTRL+ C 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 >}} +

+ +> Press CTRL+ C 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 new file mode 100644 index 000000000..a9e78650d --- /dev/null +++ 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 new file mode 100644 index 000000000..a1ba1004b Binary files /dev/null and b/docs/content/guides/tooling/dashboard/overview/dashboard-home.png differ diff --git a/docs/content/guides/tooling/dashboard/overview/index.md b/docs/content/guides/tooling/dashboard/overview/index.md new file mode 100644 index 000000000..81af91282 --- /dev/null +++ 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" >}}