Need help with OMV framework

sbocquet · 26. April 2018

Hi all !

I'm trying to tweak the omv graphs and dev a plugin for that after.
I want to show multiple CPU graphs on the same page, side by side.

At the moment, I'm stuck with a stupid thing and I cannot find the way it works in IOMV Framework.

I just created a /var/www/openmediavault/js/omv/workspace/panel/RrdGraph2.js (almost the same as RrdGraph.js but with the HTML code to have 2 CPU core) with that code.

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-2018 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/panel/Panel.js")
// require("js/omv/Rpc.js")
// require("js/omv/window/MessageBox.js")


/**
 * @ingroup webgui
 * @class OMV.workspace.panel.RrdGraph2
 * @derived OMV.workspace.panel.Panel
 * Panel that is displaying RRD graphs.
 * @param rrdGraphName1 (required) The name of the RRD graph file. Such a
 *   file looks like xxxxx-(hour|day|week|month|year).png.
 * @param rrdGraphName2 (required) The name of the RRD graph file. Such a
 *   file looks like xxxxx-(hour|day|week|month|year).png.
 */
Ext.define("OMV.workspace.panel.RrdGraph2", {
 extend: "OMV.workspace.panel.Panel",
 requires: [
  "OMV.Rpc",
  "OMV.window.MessageBox"
 ],
 uses: [
  "Ext.XTemplate"
 ],


 hideTopToolbar: false,
 autoLoadData: false,


 initComponent: function() {
  var me = this;
  var tpl = me.getTemplate();
  Ext.apply(me, {
   html: tpl.apply({
    name1: me.rrdGraphName1,
    name2: me.rrdGraphName2,
    time: Ext.Date.now()
   })
  });
  me.callParent(arguments);
 },


 getTemplate: function() {
  return Ext.create("Ext.XTemplate",
    '<div class="x-panel-rrdgraph">',
    '  <img src="rrd.php?name={name1}-hour.png&time={time}" alt="RRD graph - by hour"/>&nbsp;<img src="rrd.php?name={name2}-hour.png&time={time}" alt="RRD graph - by hour"/><br/>',
    '  <img src="rrd.php?name={name1}-day.png&time={time}" alt="RRD graph - by day"/>&nbsp;<img src="rrd.php?name={name2}-day.png&time={time}" alt="RRD graph - by day"/><br/>',
    '  <img src="rrd.php?name={name1}-week.png&time={time}" alt="RRD graph - by week"/>&nbsp;<img src="rrd.php?name={name2}-week.png&time={time}" alt="RRD graph - by week"/><br/>',
    '  <img src="rrd.php?name={name1}-month.png&time={time}" alt="RRD graph - by month"/>&nbsp;<img src="rrd.php?name={name2}-month.png&time={time}" alt="RRD graph - by month"/><br/>',
    '  <img src="rrd.php?name={name1}-year.png&time={time}" alt="RRD graph - by year"/>&nbsp;<img src="rrd.php?name={name2}-year.png&time={time}" alt="RRD graph - by year"/>',
    '</div>');
 },


 doLoad: function() {
  var me = this;
  OMV.RpcObserver.request({
   msg: _("Generating graphs ..."),
   rpcDelay: 1000,
   rpcData: {
    service: "Rrd",
    method: "generate"
   },
   scope: me,
   finish: function() {
    var tpl = this.getTemplate();
    this.update(tpl.apply({
     name1: this.rrdGraphName1,
     name2: this.rrdGraphName2,
     time: Ext.Date.now()
    }));
   }
  });
 }
});

Alles anzeigen

I'd like to have 2 string var passed to it, with "cpu-0" and "cpu-1" for both core of my CPU.

So I tried to call it with a modified /var/www/openmediavault/js/omv/module/admin/diagnostic/system/Cpu.js

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-2018 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/panel/RrdGraph2.js")


/**
 * @class OMV.module.admin.diagnostic.system.plugin.Cpu
 * @derived OMV.workspace.panel.RrdGraph2
 */
Ext.define("OMV.module.admin.diagnostic.system.plugin.Cpu", {
 extend: "OMV.workspace.panel.RrdGraph2",
 alias: "omv.plugin.diagnostic.system.cpu",


 title: _("CPU usage"),
 rrdGraphName1: "cpu-0",
 rrdGraphName2: "cpu-1"
});

Alles anzeigen

That doesn't work. I must missed something but I cannot find what...
Any help is welcome.

Thanks

votdev · 26. April 2018

Sharing the URL to your GIT branch would help to easily test it.

sbocquet · 26. April 2018

Thanks Volker for your help,

Unfortunatly at the moment, it's just on my test server as I haven't begin to correctly dev the plugin.
I'm just trying to make it work at the moment, and wanted to know if I was doing it the right way or not, since I haven't gone deeper in the Template thing.

Do you see any 'big' mistake ?

Cheers,

sbocquet · 26. April 2018

Is there any kind of "Template" registering as my RrdGraph2.js file seems to never been called by CPU.js?

sbocquet · 27. April 2018

So nobody knows how I can have this RrdGraph2 Template with 2 string variable, and why it seems to never be called ?

votdev · 28. April 2018

Are there any Javascript errors? Can you debug the existing and your new code using the browsers dev tools?

votdev · 28. April 2018

Check the file permissions of your JS file. Set OMV_DEBUG_EXTJS to YES.

sbocquet · 29. April 2018

Thanks Volker.

I will give it a try this evening and quickly come back to you.

sbocquet · 29. April 2018

Hi,

I have modified /var/www/openmediavault/js/omv/module/admin/diagnostic/system/plugin/Cpu.js like this to point to my new Rrdgraph2.js

Code

/**
 * @class OMV.module.admin.diagnostic.system.plugin.Cpu
 * @derived OMV.workspace.panel.RrdGraph
 */
Ext.define("OMV.module.admin.diagnostic.system.plugin.Cpu", {
	extend: "OMV.workspace.panel.RrdGraph2",
	alias: "omv.plugin.diagnostic.system.cpu",


	title: _("CPU usage & Temp."),
	rrdGraphName1: "cpu-0",
	rrdGraphName1: "cpu-1"
});

Alles anzeigen

Rights are correctly set for both files.

I can't see any error in the debug tool of my browser, but the CPU panel vanishes from the WebUI...

The only thing I have in "openmediavault-webgui_error.log" is :

Code

2018/04/29 20:21:11 [error] 1754#1754: *5450 open() "/var/www/openmediavault/scss/_core.scss" failed (2: No such file or directory), client: 192.168.0.11, server: openmediavault-we
bgui, request: "GET /scss/_core.scss HTTP/1.1", host: "home-server.famille-bocquet.fr", referrer: "diagnostics://3/"
2018/04/29 20:21:11 [error] 1754#1754: *5453 open() "/var/www/openmediavault/scss/_path.scss" failed (2: No such file or directory), client: 192.168.0.11, server: openmediavault-we
bgui, request: "GET /scss/_path.scss HTTP/1.1", host: "home-server.famille-bocquet.fr", referrer: "diagnostics://3/"
2018/04/29 20:21:11 [error] 1754#1754: *5447 open() "/var/www/openmediavault/scss/_icons.scss" failed (2: No such file or directory), client: 192.168.0.11, server: openmediavault-w
ebgui, request: "GET /scss/_icons.scss HTTP/1.1", host: "home-server.famille-bocquet.fr", referrer: "diagnostics://3/"
2018/04/29 20:21:11 [error] 1754#1754: *5455 open() "/var/www/openmediavault/scss/_extras.scss" failed (2: No such file or directory), client: 192.168.0.11, server: openmediavault-
webgui, request: "GET /scss/_extras.scss HTTP/1.1", host: "home-server.famille-bocquet.fr", referrer: "diagnostics://3/"
2018/04/29 20:21:11 [error] 1754#1754: *5457 open() "/var/www/openmediavault/scss/_animated.scss" failed (2: No such file or directory), client: 192.168.0.11, server: openmediavaul
t-webgui, request: "GET /scss/_animated.scss HTTP/1.1", host: "home-server.famille-bocquet.fr", referrer: "diagnostics://3/"

Is there any other log file I should check with OMV_DEBUG_EXTJS set to YES ?

Both files src are in the first post.
Thanks,

sbocquet · 29. April 2018

Founded that... but the file is in the right place.

votdev · 30. April 2018

OMV does not use the Ext loader, thus you need to make sure that

// require("js/omv/workspace/panel/RrdGraph2.js")

is below the comment header in /var/www/openmediavault/js/omv/module/admin/diagnostic/system/plugin/Cpu.js.

sbocquet · 30. April 2018

F... this work at least !

I was thinking that this code was some unused comments .
Sorry, I'm a noob with JS and ExtJS...

Thanks a lot Volker.

sbocquet · 28. Mai 2018

Volker (or any other),

Each time I update to the latest version of OMV 4, I have to put back my .js modified files (no problem for me), but I also go back to where I was in post 9: no CPU tab.
Sometime, and I don't know how (!), I can fix it and get it work.

Is there some kind of JS "cache" to be clean/reset after each update?

Thx for the help,

votdev · 28. Mai 2018

Use omv-firstaid and select 'Clear web control panel cache'.

sbocquet · 28. Mai 2018

Thanks a lot. That was it.

Have a nice day.

Jetzt mitmachen!