radius-project / dashboard Goto Github PK
View Code? Open in Web Editor NEWFrontend experience for Project Radius
Frontend experience for Project Radius
As a Radius user, I want the Radius Dashboard to be packaged into future releases of Radius so that I can install and run the Dashboard with my Radius installs without having to build the dashboard from source.
Related:
test issue to validate ADO sync workflow
AB#12038
Currently, when the user navigates to a resource page in which nothing exists (e.g. navigating to recipes, applications, etc. in an environment that doesn't contain any of the respective resources) the dashboard crashes.
rad env create test
) that does not contain any applications or resources.The page crashes with an error:
The page handles the error and displays a message indicating that there are no recipes available to view in the current environment.
No response
Chrome Version 121.0.6167.85 (Official Build) (arm64)
As a user, I want to use a command line flag to opt out of deploying the Radius dashboard when I run the rad init
, rad install
commands.
rad init
, rad install
commands in order to prevent radius from building and deploying the radius application dashboard.rad run
and rad deploy
commands do not result in a console message pointing them to the dashboard.Related issue for installing and deploying the dashboard: #37
As a user of the application graph visualizations within Radius dashboard, I would like tool tips to appear for the resource or component that my cursor is currently pointed at.
Tool tip appears when cursor is pointed to a resource depicted in the application graph visualization
Tool tip contains details pertaining to the resource: name, type, group, application, environment
No response
Currently, the icons displayed in the Dashboard (e.g. in the menu sidebar) are stock Material UI icons. This feature request is to replace those stock icons with the official Radius SVG icons that are available here
The stock icons for the menu sidebar items are replaced with Radius SVG icons:
For reference, take a look at how the custom Radius logo graphic in the dashboard has been integrated - the same mechanisms may be used for the custom icons. See https://github.com/radius-project/dashboard/blob/main/packages/app/src/components/Root/Root.tsx#L3-L7
As a dashboard user, I would like the ability to sort and filter the tables that display the details of each resource.
UI is updated to allow for sorting and filtering by column in all the table views, e.g.:
No response
As a user, I want to use the rad CLI to deploy my Radius dashboard.
As a user, I want to use the rad CLI to remove my Radius dashboard that had been previously deployed.
rad dashboard deploy
(or equivalent) command that builds and deploys the user's Radius dashboard and supplies them with the network address for them to navigate to their dashboard.rad dashboard delete
(or equivalent) command that removes their previously deployed Radius dashboard and deletes all the corresponding resources used by the dashboard (containers, libraries, etc.) without deleting any of the other Radius control plane resources.No response
As a user, after running rad init
or rad install
, Radius installs my dashboard alongside the control plane. I receive a network address for my Radius dashboard after Radius has been installed and initialized.
As a user, after running rad run
or rad deploy
to deploy and run the application, I receive a network address for my Radius dashboard after the application resources have completed deployment, which I may navigate into and view my dashboard.
rad init
or rad install
builds and deploys the dashboard alongside the Radius control plane and application(s).rad run
or rad deploy
produces a console message that points the user to the Dashboard endpoint after the application resources have completed deployment.Related issue for opting out of dashboard: #40
The page crashes with the following error:
Error
TypeError
Message
Cannot read properties of null (reading 'scrollWidth')
Stack Trace
TypeError: Cannot read properties of null (reading 'scrollWidth')
at pe.value (http://localhost:8001/static/module-backstage.90137cf3.js:37:197926)
at Ya (http://localhost:8001/static/module-react-dom.e70bfe01.js:14:1661)
at qa (http://localhost:8001/static/module-react-dom.e70bfe01.js:16:5000)
at O.unstable_runWithPriority (http://localhost:8001/static/vendor.67e48f7d.js:147:3895)
at Ze (http://localhost:8001/static/module-react-dom.e70bfe01.js:12:38411)
at nn (http://localhost:8001/static/module-react-dom.e70bfe01.js:16:1786)
at Si (http://localhost:8001/static/module-react-dom.e70bfe01.js:14:10983)
at http://localhost:8001/static/module-react-dom.e70bfe01.js:12:38633
at O.unstable_runWithPriority (http://localhost:8001/static/vendor.67e48f7d.js:147:3895)
at Ze (http://localhost:8001/static/module-react-dom.e70bfe01.js:12:38411)
The "orphaned" resources continue to be displayed, but contain a warning about their "parent" environment having been deleted.
No response
No response
AB#12040
As a Radius Dashboard user, I want to export the application graph diagram displayed in the current view into a PDF or image so that I may share it with other people or in other locations outside of the Radius Dashboard.
Buttons are added next to the app graph diagrams for exporting the currently viewed diagram
No response
Install Radius v0.32
deploy an application
rad run or rad deploy and open dashboard
visit the APP GRAPH tab on the application in the dashboard and an infinite load will happen
Checking the logs shows a Failed to load resource: the server responded with a status of 403 (Forbidden) for a POST request to the http://localhost:7007/api/kubernetes/proxy/apis/api.ucp.dev/v1alpha3//planes/radius/local/resourcegroups/default/providers/Applications.Core/applications/dashboarddemo/getGraph?api-version=2023-10-01-preview
endpoint
App graph shows
Edit the dashboard clusterrole to use all verbs instead of just get
and list
k edit clusterrole -n radius-system dashboard
apiVersion: rbac.authorization.k8s.io/v1
kind: ClusterRole
metadata:
annotations:
meta.helm.sh/release-name: radius
meta.helm.sh/release-namespace: radius-system
creationTimestamp: "2024-04-09T05:07:49Z"
labels:
app.kubernetes.io/managed-by: Helm
app.kubernetes.io/name: dashboard
app.kubernetes.io/part-of: radius
name: dashboard
resourceVersion: "1701"
uid: <uid>
rules:
- apiGroups:
- api.ucp.dev
resources:
- '*'
verbs:
- '*'
No response
AB#11739
As a Radius Dashboard user, I want buttons next to my app graph diagrams that allow me to zoom in and out of the graph. This would make the UI clearer on how to toggle the zoom on the diagram, rather than having to implicitly know to use the mouse scroll wheel currently.
Buttons are added next to the app graph diagrams for zooming in and out
No response
As a dashboard user, I want the ability to minimize the boilerplate information boxes on the home page of my dashboard. The UI should maintain a state of my minimization preference such that the boxes remain minimized when I refresh or re-visit this page in the future.
Functionality has been added for users to click and minimize/collapse these info boxes on the dashboard home page, with the UI keeping the state of the user's preference so that the respective boxes are displayed/hidden when they visit the page again.
No response
As a Radius dashboard user, I would like the application graph to display different colors and icons for each resource type to make things more visually pleasing and easier to view.
Each box (node) in the application graph is color-coded per the type
of resource (e.g. blue for application, yellow for database, etc.)
Each box (node) in the application graph displays an icon corresponding to the type
of resource
Refer to #43 for details on sourcing and using the official Radius icon images for the various resource types, etc.
test
No response
test
No response
No response
As a Radius dashboard user, I want to see which of my available Recipes have been deployed currently and which specific application(s) is using each recipe.
Clicking into each recipe shows its details in a sidebar (including which apps are using the recipe)
Indicator (highlight, column, etc.) showing which recipe is in use
The details page (or in the details sidebar) for Recipes includes details and links to all the applications sidebars that have currently used the Recipe.
The Recipes table view includes an additional column displaying all the applications (as sidebar hyperlinks) (e.g. http://localhost:3000/resources/default/Applications.Core/environments/default/recipes) that are currently using the recipe.
The Recipes table view includes row highlighting to indicate which of the recipes are currently being used by an application or resource.
No response
As a user of Radius dashboard, I would like the resource details to expand into a sidebar when I click on it so that I don't get navigated away to a different section of the dashboard.
db
resource link or box above, its details page (i.e. http://localhost:3000/resources/default/Applications.Datastores/redisCaches/db) opens in a sidebar rather than navigating the user to the page directly.No response
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.