Add more widgets to the Morpheus Dashboard

[#1]

We are trying to add/append few more widgets to the existing Dashboard (Operations > Dashboard) but not successful. Is that allowed to do ? if so how do we add our Application related widgets to Dashboard ?

If we pick morpheus-dashboard plugin code and update the widgets its working, but overwriting existing dashboard is not ideal thing i believe. can you please guide us how do we achieve this
@david

[#2]

Hi @Ollie_Phillips ,

I have tried the approach what you suggested like, updating morpheus-dashboards repo code

I could able to inject the our application related widgets to the existing Dashboard.

Queries:

1. Instead of updating morpheus-dashboards repo code, can we achieve it through from our repo? is that possible ?
2. If updating morpheus-dashboards repo code is the only way, then how do call our rest api services which are defined in other jar file ? And to which repo we need to push the code ?
3. While adding widgets, we are required to change/add css, how do we add our custom css ?
4. Is there any storybook/framework link for UI components reference ?

CC: @david

Thanks
Ramkee Mukuru

[Ollie-Phillips]

I’ve annotated below against your queries:

ramkee:

• Are we allowed to update the existing dashboard code ? if so what if other teams also wants to add their own widgets, How do we co-ordinate

The code once modified is your code. You can submit pull requests to the Morpheus plugin repo of course.

If you want to manage internally and it will be internal teams contributing then version control should facilitate that too.

ramkee:

• Are there any fixed category enums ? or we can create any custom names

	    rtn.setCategory("environment");
		rtn.setTitle("environment count");
		rtn.setDescription("environment count");
		rtn.setUiSize("xl widget-short");
		rtn.setTemplatePath("hbs/environment-count-widget");
		rtn.setScriptPath("environment-count-widget.js");

From what I could determine, category was a meta type HTML wrapper. - so it can be anything. The widget providers provide all the properties needed for the UI beyond that.

ramkee:

• What should be the code to give permissions here. For example, my main plugin provider code is xyz should we provide that or anything am missing here
  rtn.setPermission(getMorpheus().getPermission().getByCode("admin-health").blockingGet());

The Operations > Dashboard role permission will display the page UI. So your XYZ dashboard widget provider will be visible by default, unless you attach other permission requirements via the code you show above.

Those are not definitive answers, I’m just reviewing the code. If you want to dig into this, please open a Technical Request.

[Ollie-Phillips]

Adding comments below:

ramkee:

1. Instead of updating morpheus-dashboards repo code, can we achieve it through from our repo? is that possible ?

Fork the repo, remove all the widget providers you don’t need and add your own. That’s the way I would go. Building ground up is possible, but likely offers more opportunity for error. Subtract from what works.

ramkee:

2. If updating morpheus-dashboards repo code is the only way, then how do call our rest api services which are defined in other jar file ? And to which repo we need to push the code ?

Your widget will presumably make the call to the REST API endpoint? You will keep your changes in your repo. You mention that is a JAR file, so if that is a custom controller, you will likely need to develop a cookie based authentication since that is UI.

ramkee:

3. While adding widgets, we are required to change/add css, how do we add our custom css ?

They can be loaded as scripts but I typically add inline in the html view. Use !Important to prevent override.

ramkee:

4. Is there any storybook/framework link for UI components reference ?

None that I’m aware of.

[#5]

Great, Thank you very much @Ollie_Phillips for your time and answering all my queries. It helps!

Thanks
Ramkee Mukuru

[#6]

Thank you @Ollie_Phillips for the confirmation!

Sorry for asking few more queries for better understanding!

• Can i assume that, the second approach which i tried will not work ?

ramkee:

Approach 2 for actual functionality implementation:

• To which repo we should push the modified dashboard code ?
• Our application code (custom REST endpoints) in xyz plugin jar file, and this modified dashboard code in other jar file. If i want to fire an API call from dashboard jar to xyz plugin jar, will that be possible ?

[Ollie-Phillips]

This is the code for the dashboard used in latest versions of Morpheus

github.com

GitHub - gomorpheus/morpheus-dashboards at rc-1.1.2

rc-1.1.2

Dashboard Plugins for the MorpheusData platform. Contribute to gomorpheus/morpheus-dashboards development by creating an account on GitHub.

It looks like adding widgets to the existing dashboard while retaining all the existing widgets would is possible, either by adding to an existing section or creating a new section. Just modify this code and rebuild.

Broadly, the changes needed are these:

• Create your new provider/s, template and script for JS, following an existing widget provider example
• Register the new provider in the MorpheusHomeDashboardPlugin.groovy file, following the approach used to register other providers.
• To add as a new section, create a new key in the dashboardItemGroups dict/map of the HomeDashboardProvider.groovy provider. This represents the section. Let’s call it “custom”.
• Add the code/s of your new provider/s as as a array on that key

def dashboardItemGroups = [
    ... removed for brevity
    custom: [
         'my-new-widget-providers-code',
         'another-of-my-widget-providers-code'
    ]
}

Have you tried this approach?

Should you wish to revert your changes you can reload the unmodified plugin, which you can find on the share.morpheusdata.com website here

https://share.morpheusdata.com/plugin/morpheus-home-dashboard-plugin/history

[#8]

HI @Ollie_Phillips,

Thanks for taking your time and explaining in detail.
I have tried in 2 ways.

Approach 1 for POC:

• I have take a clone of morpheus-dashboards repo.
• Tried to add some content to Environment widget and updated the labels
• I have removed the existing default dashboard plugin and uploaded custom dashboard plugin
• It worked and result is as shown below
  
  

Approach 2 for actual functionality implementation:

• We are under impression that, we should not disturb the existing Morpheus Dashboard as it is generic.
• We have our own repo, in which we created a dashboard provider by taking the reference of HomeDashboardProvider.groovy
• Then we created DashbaordItemProvider file as well just like existing DashbaordItemProvider
• Created script js and hbs files as well.
• In DashboardProvider added the group and item

Map<String, List<String>> dashboardItemGroups = new HashMap<>();
dashboardItemGroups.put("top", List.of("dashboard-item-environment-count"));

• Then we have registered DashboardProvider and DashbaordItemProvider in side our main PluginProvider.

this.registerProvider(new EnvironmentCountItemProvider(this, morpheus));
this.registerProvider(new DashboardProvider(this, morpheus));

• Result: Unable to see the sample widget in the Dashboard.
• Just to make sure that there are no widget code conflicts, so tried removing the existing dashboard jar file and tested but no luck.
• If i use same widget code as Environment && category as environment in my code, that specific Environment widget is disappeared.

dashboard-item-environment-count

Queries:

• Are we allowed to update the existing dashboard code ? if so what if other teams also wants to add their own widgets, How do we co-ordinate ?
• Are there any fixed category enums ? or we can create any custom names

	    rtn.setCategory("environment");
		rtn.setTitle("environment count");
		rtn.setDescription("environment count");
		rtn.setUiSize("xl widget-short");
		rtn.setTemplatePath("hbs/environment-count-widget");
		rtn.setScriptPath("environment-count-widget.js");

• What should be the code to give permissions here. For example, my main plugin provider code is xyz should we provide that or anything am missing here
  rtn.setPermission(getMorpheus().getPermission().getByCode("admin-health").blockingGet());

Let me know if you need further information.

CC: @david

Thank you
Ramkee Mukuru
*Feel free to reach me on HPE slack/teams!