[DEV] How to add a widget to the dashboard menu?

sbocquet · 14. Januar 2022

Hi,

I'm trying to add a panel to the dashboard, but I cannot add a new item to the "Add" button.
By searching the code, I have found the file Dashboard.js, which get the registered dashboard...

Code

/**
* @class OMV.module.admin.system.general.AdminPasswd
* @derived OMV.workspace.dashboard.Dashboard
*/
Ext.define("OMV.module.admin.dashboard.Dashboard", {
extend: "OMV.workspace.dashboard.Dashboard",


getPartAliases: function() {
// Get the registered dashboard widgets aliases.
var aliases = Ext.ClassManager.getAliasesByExpression(
"part.module.admin.dashboard.part.*");
return aliases;
}
});


OMV.WorkspaceManager.registerPanel({
id: "dashboard",
path: "/diagnostic",
text: _("Dashboard"),
position: 1,
iconCls: "mdi mdi-view-dashboard",
className: "OMV.module.admin.dashboard.Dashboard"
});

Alles anzeigen

So the question is... Where do I register the dashboard widget ?

Thx

Soma · 14. Januar 2022

Click the dented wheel (Top-Right) and select whatever you want.

Press Save and Bob's your uncle.

sbocquet · 14. Januar 2022

Sorry I wasn't clear enough.

First, I'm with OMV v5, not v6.

Next, I'm searching to add a widget that doesn't exist, aka I'm creating it

The thing I'm talking about is there, in the red zone

Thanks

raulfg3 · 14. Januar 2022

only for curiosity, what show your widget?, is usefull for other users?

Soma · 14. Januar 2022

Ahh, now I understood,

Open a "feature request" on github to what you want, votdev will see it faster:

Issues · openmediavault/openmediavault (github.com)

votdev · 14. Januar 2022

OMV5 is practically already EOL, i do not maintain it anymore (except patches for migration or security issues). Please use OMV6 instead. For developing plugins please have a look at https://openmediavault.readthe…/development/plugins.html and use the source code as reference.

Please note, you can not add custom dashboard widgets, you NEED to use the existing templates because EVERYTHING in the new UI can only be customized via declarative code (JSON/YAML).

sbocquet · 14. Januar 2022

Zitat von raulfg3

only for curiosity, what show your widget?, is usefull for other users?

I'm going to add a temperature widget (I got them with IPMI and a collectd specific configuration), better than the one line that I've added in the System Info one. (see screenshot)
The fact is that the files I have modified to add this line will be overide each time a new version of OMV goes live.

Buy adding a widget panel, this will not append

sbocquet · 14. Januar 2022

Zitat von votdev

OMV5 is practically already EOL, i do not maintain it anymore (except patches for migration or security issues). Please use OMV6 instead. For developing plugins please have a look at https://openmediavault.readthe…/development/plugins.html and use the source code as reference.

Yeah... I know... and I would really like to, but I've done so much specific conf (collectd, IPMI, WebUI, etc...) on my NAS that it would be very long to restart from OMV6 at the moment, so I'm trying to add what I can to my need.

I reading the code since several months for my needs, but it's still a hard step even if I was a dev guy 15 years ago
I'm asking help only when I'm really stuck after several hours.

votdev · 14. Januar 2022

Have a look here.

sbocquet · 14. Januar 2022

Zitat von votdev

Have a look here.

Thanks votdev, that's where I was addind my src files

Code

/**
* This file is part of OpenMediaVault.
*
* @license   http://www.gnu.org/licenses/gpl.html GPL Version 3
* @author    Volker Theile <volker.theile@openmediavault.org>
* @copyright Copyright (c) 2009-2022 Volker Theile
*
* OpenMediaVault is free software: you can redistribute it and/or modify
* it under the terms of the GNU General Public License as published by
* the Free Software Foundation, either version 3 of the License, or
* any later version.
*
* OpenMediaVault is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
* GNU General Public License for more details.
*
* You should have received a copy of the GNU General Public License
* along with OpenMediaVault. If not, see <http://www.gnu.org/licenses/>.
*/
// require("js/omv/workspace/dashboard/Part.js")


/**
* @class OMV.module.admin.dashboard.part.TemperatureStatus
* @derived OMV.workspace.dashboard.Part
*/
Ext.define("OMV.module.admin.dashboard.part.TemperatureStatus", {
extend: "OMV.workspace.dashboard.Part",
alias: "part.module.admin.dashboard.part.temperaturestatus",


config: {
title: _("Temperatures"),
iconCls: "mdi mdi-information-outline",
viewXType: "module.admin.dashboard.view.temperaturestatus"
showAtFirstStartup: true
}
});

Alles anzeigen

Code

/**
* This file is part of OpenMediaVault.
*
* @license   http://www.gnu.org/licenses/gpl.html GPL Version 3
* @author    Volker Theile <volker.theile@openmediavault.org>
* @copyright Copyright (c) 2009-2022 Volker Theile
*
* OpenMediaVault is free software: you can redistribute it and/or modify
* it under the terms of the GNU General Public License as published by
* the Free Software Foundation, either version 3 of the License, or
* any later version.
*
* OpenMediaVault is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
* GNU General Public License for more details.
*
* You should have received a copy of the GNU General Public License
* along with OpenMediaVault. If not, see <http://www.gnu.org/licenses/>.
*/
// require("js/omv/workspace/dashboard/View.js")
// require("js/omv/data/Store.js")
// require("js/omv/data/Model.js")
// require("js/omv/workspace/grid/Panel.js")
// require("js/omv/util/Format.js")
// require("js/omv/service/SystemInfo.js")


/**
* @class OMV.module.admin.dashboard.view.TemperatureStatus
* @derived OMV.workspace.dashboard.View
*/
Ext.define("OMV.module.admin.dashboard.view.TemperatureStatus", {
extend: "OMV.workspace.dashboard.View",
alias: "widget.module.admin.dashboard.view.temperaturestatus",
requires: [
"OMV.workspace.grid.Panel",
"OMV.data.Store",
"OMV.data.Model",
"OMV.util.Format",
"OMV.service.SystemInfo"
],
....

Alles anzeigen

But nothing more in the "add" button. It seems that my widget is not "registered".

votdev Maybe I need to restart something ?

EDIT:
- I have already restarted the openmediavault-engined and the nginx services.
- My files are in the caches directory

Code

cat /var/cache/openmediavault/cache.omv\\controlpanel\\administration_admin_js.json
[
"js\/omv\/workspace\/dashboard\/Dashboard.js",
"js\/omv\/workspace\/node\/Node.js",
"js\/omv\/WorkspaceManager.js",
"js\/omv\/module\/admin\/dashboard\/Dashboard.js",
...
"js\/omv\/workspace\/dashboard\/View.js",
"js\/omv\/module\/admin\/dashboard\/view\/FileSystemStatus.js",
"js\/omv\/module\/admin\/dashboard\/view\/ServiceStatus.js",
"js\/omv\/service\/SystemInfo.js",
"js\/omv\/module\/admin\/dashboard\/view\/SysInfo.js",
"js\/omv\/module\/admin\/dashboard\/view\/TemperatureStatus.js",
"js\/omv\/module\/admin\/dashboard\/view\/NetworkInterfaces.js",
"js\/omv\/workspace\/dashboard\/Part.js",
"js\/omv\/module\/admin\/dashboard\/part\/FileSystemStatus.js",
"js\/omv\/module\/admin\/dashboard\/part\/ServiceStatus.js",
"js\/omv\/module\/admin\/dashboard\/part\/SysInfo.js",
"js\/omv\/module\/admin\/dashboard\/part\/TemperatureStatus.js",
"js\/omv\/module\/admin\/dashboard\/part\/NetworkInterfaces.js",
...
"js\/omv\/workspace\/Workspace.js"

Alles anzeigen

votdev · 14. Januar 2022

Zitat von sbocquet

But nothing more in the "add" button. It seems that my widget is not "registered".

I searched the source code where the default dashboard widgets are registered, but didn't find anything. I'm really sorry, i can't remember anymore how this is working, too much time passed since this feature was implemented. I think it is a magic function of ExtJS, but i don't know it anymore.

In general i would say that somewhere a // require("js/omv/module/admin/dashboard/(part|view)/xxx.js") must occur which triggers the PHP code to create a <script type='application/javascript' src='foo'></script> entry in the generated HTML file; but did not found any code that looks like that.

sbocquet · 14. Januar 2022

Zitat von votdev

I searched the source code where the default dashboard widgets are registered, but didn't find anything. I'm really sorry, i can't remember anymore how this is working, too much time passed since this feature was implemented. I think it is a magic function of ExtJS, but i don't know it anymore.

In general i would say that somewhere a // require("js/omv/module/admin/dashboard/(par|view)/xxx.js")
must occur which triggers the PHP code to create a <script type='application/javascript' src='foo'></script> entry in the generated HTML file; but did not found any code that looks like that.

Thanks for trying votdev ...

It seems that my files are "here" (listed in the cache, so I assume OMV took them into account), but somehow not "visible"...

EDIT :
votdev JS Files are in the generated page... so I'm completely lost now ! lol

sbocquet · 14. Januar 2022

votdev

Like always... you need to clear your web browser cache (or something like this!)

Anyway... work in progress but it works !

Just need some advices from some PHP gourou...
I'm not sure that this is the best way to do it or if there is something more efficient in PHP then those system calls to read the last line of a file. So any advice is welcome for this slice of code.

Code

/**
* Get various temperature information.
* @param params The method parameters.
* @param context The context of the caller.
* @return An object containing the temperature information.
*/
public function getInformation($params, $context) {
// Information that are only visible to an administrator.
if (TRUE === $this->hasContextRole($context, OMV_ROLE_ADMINISTRATOR)) {
exec("tail -1 /tmp/collectd/csv/localhost/ipmi/temperature-CPU* | awk -F, '{print $2}'", $cpu_temp, $retval);
exec("tail -1 /tmp/collectd/csv/localhost/ipmi/temperature-DDR4* | awk -F, '{print $2}'", $ram_temp, $retval);
exec("tail -1 /tmp/collectd/csv/localhost/ipmi/temperature-MB* | awk -F, '{print $2}'", $mb_temp, $retval);
exec("tail -1 /tmp/collectd/csv/localhost/smart-nvme0n1/nvme_temperature-* | awk -F, '{print $2}'", $nvme_temp, $retval);
exec("tail -1 /tmp/collectd/csv/localhost/smart-sda/smart_temperature-* | awk -F, '{print $2}'", $sda_temp, $retval);
exec("tail -1 /tmp/collectd/csv/localhost/smart-sdb/smart_temperature-* | awk -F, '{print $2}'", $sdb_temp, $retval);
exec("tail -1 /tmp/collectd/csv/localhost/smart-sdc/smart_temperature-* | awk -F, '{print $2}'", $sdc_temp, $retval);
exec("tail -1 /tmp/collectd/csv/localhost/smart-sdd/smart_temperature-* | awk -F, '{print $2}'", $sdd_temp, $retval);
exec("tail -1 /tmp/collectd/csv/localhost/smart-sde/smart_temperature-* | awk -F, '{print $2}'", $sde_temp, $retval);


$result = [
"cpu" => sprintf("%01.1f °C", $cpu_temp[0]),
"memory" => sprintf("%01.1f °C", $ram_temp[0]),
"motherboard" => sprintf("%01.1f °C", $mb_temp[0]),
"nvme" => sprintf("%01.1f °C", $nvme_temp[0]),
"sda" => sprintf("%01.1f °C", $sda_temp[0]),
"sdb" => sprintf("%01.1f °C", $sdb_temp[0]),
"sdc" => sprintf("%01.1f °C", $sdc_temp[0]),
"sdd" => sprintf("%01.1f °C", $sdd_temp[0]),
"sde" => sprintf("%01.1f °C", $sde_temp[0])
];
}
return $result;
}

Alles anzeigen

Thanks for your help.

raulfg3 · 14. Januar 2022

Zitat von sbocquet

I'm going to add a temperature widget (I got them with IPMI and a collectd specific configuration), better than the one line that I've added in the System Info one. (see screenshot)
The fact is that the files I have modified to add this line will be overide each time a new version of OMV goes live.

Buy adding a widget panel, this will not append

Good addon, please consider to port to OMV6 and share it , when you consider to upgrade your NAS .

DerAnder · 16. Januar 2022

Something on the dashboard that shows cpu/storage temps would definitely be some neat feature

[DEV] How to add a widget to the dashboard menu?

Jetzt mitmachen!

Tags