Since my team implemented the CRUSH map in our private Ceph Management Dashboard, we want to do the job.

Hi Dan! This is great news! Can you share a screen shot of your implementation and some details on how you implemented it?

Hi, Lenz. Attachment is photos of our private ceph dashboard about CRUSH map. For now, we just show the CRUSH rule in a data table manner, and we will implement the new CRUSH map in a tree view. What we will do to implement the new CRUSH map is use Angular Material tree component(https://material.angular.io/components/tree/overview/components/tree/overview) for implementation of the webUI display. And since the ceph cluster CRUSH rule data can acquired from dashboard controller API "api/dashboard/health", which is base to us, we need parse these CRUSH rule data at dashboard/controller portion and return the special data structure to dashboard/frontend, and then, through the render of Angular Material, the tree map will be displayed on webUI page.

Thank you! To make it easier for others, I am going to embed the screen shots here:

For now, we just show the CRUSH rule in a data table manner, and we will implement the new CRUSH map in a tree view. What we will do to implement the new CRUSH map is use Angular Material tree component(https://material.angular.io/components/tree/overview/components/tree/overview) for implementation of the webUI display. And since the ceph cluster CRUSH rule data can acquired from dashboard controller API "api/dashboard/health", which is base to us, we need parse these CRUSH rule data at dashboard/controller portion and return the special data structure to dashboard/frontend, and then, through the render of Angular Material, the tree map will be displayed on webUI page.

Sounds good. I will ask some other members of the dashboard team to review and comment on this proposal. To get started, could I ask you to start with #24822 first? This seems to be somewhat easier as a first task to get familiar with the dashboard code base and the code contribution process. What do you think?

As the dashboard uses `ngx-bootstrap` but this package doesn't provide any tree component, it might make sense to consider using something like Boostrap Treeview instead of the Angular Material Tree component. I personally like the whole material design idea but I think we've kind of agreed on using Bootstrap for the dashboard. The Bootstrap Treeview seems to fit better into what we currently have and seems also to have a greater area to click at, which increases usability on mobile devices in my humble opinion.

Sounds good. I will ask some other members of the dashboard team to review and comment on this proposal. To get started, could I ask you to start with #24822 first? This seems to be somewhat easier as a first task to get familiar with the dashboard code base and the code contribution process. What do you think?

As the dashboard uses `ngx-bootstrap` but this package doesn't provide any tree component, it might make sense to consider using something like Boostrap Treeview instead of the Angular Material Tree component. I personally like the whole material design idea but I think we've kind of agreed on using Bootstrap for the dashboard. The Bootstrap Treeview seems to fit better into what we currently have and seems also to have a greater area to click at, which increases usability on mobile devices in my humble opinion.

Since my team implemented the CRUSH map in our private Ceph Management Dashboard, we want to do the job.

Hi Dan! This is great news! Can you share a screen shot of your implementation and some details on how you implemented it?

Hi, Lenz. Attachment is photos of our private ceph dashboard about CRUSH map. For now, we just show the CRUSH rule in a data table manner, and we will implement the new CRUSH map in a tree view. What we will do to implement the new CRUSH map is use Angular Material tree component(https://material.angular.io/components/tree/overview/components/tree/overview) for implementation of the webUI display. And since the ceph cluster CRUSH rule data can acquired from dashboard controller API "api/dashboard/health", which is base to us, we need parse these CRUSH rule data at dashboard/controller portion and return the special data structure to dashboard/frontend, and then, through the render of Angular Material, the tree map will be displayed on webUI page.

Now that #24822 has been resolved (thanks a lot for your contribution!), I was wondering if you're still planning to contribute your CRUSH map tool? We would be very grateful for this contribution!

Since my team implemented the CRUSH map in our private Ceph Management Dashboard, we want to do the job.

Hi Dan! This is great news! Can you share a screen shot of your implementation and some details on how you implemented it?

Hi, Lenz. Attachment is photos of our private ceph dashboard about CRUSH map. For now, we just show the CRUSH rule in a data table manner, and we will implement the new CRUSH map in a tree view. What we will do to implement the new CRUSH map is use Angular Material tree component(https://material.angular.io/components/tree/overview/components/tree/overview) for implementation of the webUI display. And since the ceph cluster CRUSH rule data can acquired from dashboard controller API "api/dashboard/health", which is base to us, we need parse these CRUSH rule data at dashboard/controller portion and return the special data structure to dashboard/frontend, and then, through the render of Angular Material, the tree map will be displayed on webUI page.

Now that #24822 has been resolved (thanks a lot for your contribution!), I was wondering if you're still planning to contribute your CRUSH map tool? We would be very grateful for this contribution!

Yeah, I have been working on CRUSH map and I have always wanted to find a better way to implement it. I will give the first implementation as soon as possible.

Thank you, this is a great start already! I slightly updated your last comment so the images are included. Looks great already. What are your next steps?

Next, I want to change the display mode of the metadata. instead of pouring all the metadata for a page, I think it would be a better way to display the metadata associated with a selected node in the tree when clicking on this node.

Next, I want to change the display mode of the metadata. instead of pouring all the metadata for a page, I think it would be a better way to display the metadata associated with a selected node in the tree when clicking on this node.

A basic CRUSH map viewer has now been merged. Than you, Dan Guo! Do you plan to make further improvements to it, to match the functionality provided by the tool you mentioned before?

IMHO, I think the basic functionality required for CRUSH map viewer has been completed, and I can't think of a better idea to improve it for now.However, I always be happy to work on it if anyone has any good idea on it.

You initially shared screen shots of a tool that depicted both a "physical" and "logical" topology view. Any thoughts or plans on adding this functionality to the dashboard?

Oh, Sorry for what I have to say that this is a special mechanism based on our private implementation of ceph cluster. Therefore, it is not suitable for general ceph clusters.This special mechanism applies to the special situation of ceph cluster. This situation requires support from the dashboard python module or even ceph itself. However, because my knowledge is limited to Angular and WebUI territory, this is beyond my ability.

Oh, Sorry for what I have to say that this is a special mechanism based on our private implementation of ceph cluster. Therefore, it is not suitable for general ceph clusters.This special mechanism applies to the special situation of ceph cluster. This situation requires support from the dashboard python module or even ceph itself. However, because my knowledge is limited to Angular and WebUI territory, this is beyond my ability.

Great! Please comment the issue and offer your help, so we can assign it to you. We would love to have this enhancements included in time for the Nautilus release, which is reaching feature freeze at the end of this month.