Messages

When widgets fail to load the console log in the browser is your friend.

Yes indeed - my new BEST friend.

Thanks for the pointers - got the plugin written and working.

Cheers

Here is a working widget for the APC UPS plugin.

Shows when the apc service is offline:


And when the service is working and talking to the UPS


You can try it out by creating a new file called Apcupsd.js on your Opnsense box at

Code Select Expand

/usr/local/opnsense/www/js/widgets

Paste this code into that new file

Code Select Expand

/*
* Copyright (C) 2024 David Berry.
* All rights reserved.
*
* Redistribution and use in source and binary forms, with or without
* modification, are permitted provided that the following conditions are met:
*
* 1. Redistributions of source code must retain the above copyright notice,
*    this list of conditions and the following disclaimer.
*
* 2. Redistributions in binary form must reproduce the above copyright
*    notice, this list of conditions and the following disclaimer in the
*    documentation and/or other materials provided with the distribution.
*
* THIS SOFTWARE IS PROVIDED ``AS IS'' AND ANY EXPRESS OR IMPLIED WARRANTIES,
* INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY
* AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE
* AUTHOR BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY,
* OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
* SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
* INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
* CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
* ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE
* POSSIBILITY OF SUCH DAMAGE.
*/

import BaseTableWidget from "./BaseTableWidget.js";

export default class Apcupsd extends BaseTableWidget {
    constructor() {
        super();
        this.dataError = false;
        this.data = null;
        this.statusColor = this.translations['t_statusColorWarning'];
        this.statusText = this.translations['t_statusTextWaiting'];
        this.statusName = this.translations['t_statusNameOffline'];
    }

    getGridOptions() {
        return {
            // trigger overflow-y:scroll after 650px height
            sizeToContent: 650,
        }
    }
   
    getMarkup() {
        let $container = $('<div></div>');
        let $apcupsdTable = this.createTable('apcupsd-table', {
            headerPosition: 'left',
        });
        $container.append($apcupsdTable);
       
        return $container;
    }

    async onWidgetTick() {

        this.dataError = false;
        this.statusColor = this.translations['t_statusColorSuccess'];
        this.statusText = this.translations['t_statusNameOnline'];
        this.statusName = this.translations['t_statusNameOnline'];

        this.data = await this.ajaxCall('/api/apcupsd/service/getUpsStatus');
        if (!this.data) {
            $(`.${this.id}-chart-container`).html(`
                <a href="/system_advanced_misc.php">${this.translations.t_unconfigured}</a>
            `).css('margin', '2em auto')
            this.dataError = true;
            this.statusColor = this.translations['t_statusColorDanger'];
            this.statusText = this.translations['t_statusTextError'];
            this.statusName = this.translations['t_statusNameOffline'];
        }

        if (this.data.status === null) {
            this.dataError = true;   
            this.statusColor = this.translations['t_statusColorDanger'];
            this.statusText = this.translations['t_statusTextOffline'];
            this.statusName = this.translations['t_statusNameOffline'];
        }
        else
        {
            this.statusName = this.data['status']['MODEL']['value'];
        }

        let rows = [];
       
        let upsStatusLight = `<div>
        <i class="fa fa-circle text-muted ${this.statusColor} ups-status-icon" style="font-size: 11px; cursor: pointer;"
            data-toggle="tooltip" title=${this.statusText}>
        </i>
            &nbsp;
        ${this.statusName}
        &nbsp;
        </div>`
       
        rows.push([upsStatusLight, '']);

        if (this.dataError) {
            rows.push([this.translations['t_unable_to_connect'], this.data['error']]);
         }
        else {
            rows.push([this.translations['t_mode'], this.data['status']['UPSMODE']['value']]);
            rows.push([this.translations['t_status'], this.data['status']['STATUS']['value']]);
            rows.push([this.translations['t_battery_runtime'], this.data['status']['TIMELEFT']['value']]);
            rows.push([this.translations['t_load'], this.data['status']['LOADPCT']['value']]);
            rows.push([this.translations['t_int_temp'], this.data['status']['ITEMP']['value']]);
        }
        super.updateTable('apcupsd-table', rows);
    }
}

You will also need to include the below XML block into a new file

Code Select Expand

/usr/local/opnsense/www/js/widgets/Metadata/Apcupsd.xml

Add this code to that file

Code Select Expand

   
<metadata>
   <Apcupsd>
        <filename>Apcupsd.js</filename>
        <endpoints>
            <endpoint>/api/Apcupsd/getUpsStatus</endpoint>
        </endpoints>
        <translations>
            <title>APC UPS Status</title>
            <t_unconfigured>APC UPS is not available or not configured.</t_unconfigured>
            <t_statusColorSuccess>text-success</t_statusColorSuccess>
            <t_statusColorWarning>text-warning</t_statusColorWarning>
            <t_statusColorDanger>text-danger</t_statusColorDanger>
            <t_statusTextWaiting>Waiting</t_statusTextWaiting>
            <t_statusTextOffline>Offline</t_statusTextOffline>
            <t_statusTextError>Data fetch error</t_statusTextError>
            <t_statusNameOffline>Offline</t_statusNameOffline>
            <t_statusNameOnline>Online</t_statusNameOnline>
            <t_mode>Mode</t_mode>
            <t_status>Status</t_status>
            <t_battery_runtime>Battery Runtime</t_battery_runtime>
            <t_load>Load</t_load>
            <t_int_temp>Internal Temperature</t_int_temp>
            <t_unable_to_connect>Unable to connect</t_unable_to_connect>
        </translations>
    </Apcupsd>
</metadata>


Then reload the dashboard and add the widget

Hi

Is there a tutorial / hello world  / sample  on how to develop a widget for 24.7?

Thanks

Edit 1:

Where can I find debug / error messages that I might be generating while trying to get this new widget working?

Nothing is showing up in System > Log files ( Debug ) > Backend / General.

Could anyone say something on the new widgets support (>24.7)?
I updated my instance a few days ago and the widget is gone. Turns out you need a new kind of widget now.
Does this plugin even get support still? The latest commit was 2 years ago.
Could we maybe all contribute a little?
I'm a web dev, I could make the UI work, though I have no idea of how to develop opnsense plugins.

I also just updated the other day.  I'll need to find out how to create a widget using the new UI, and then see if I can get it working.  No ETA :)

EDIT:

This is all thanks to Monviech - https://forum.opnsense.org/index.php?action=profile;u=26898

Ok - Initial version - no error checking or anything yet.  But - what fields do people want to see:



You can have any field that is normally output from apcaccess:

DATE   
HOSTNAME   
VERSION   
UPSNAME   
CABLE   
DRIVER   
UPSMODE   
STARTTIME   
MASTERUPD   
MASTER   
MODEL   
STATUS   
LINEV   
LOADPCT   
BCHARGE   
TIMELEFT   
MBATTCHG   
MINTIMEL   
MAXTIME   
OUTPUTV   
SENSE   
LOTRANS   
HITRANS   
RETPCT   
ITEMP   
BATTV   
LINEFREQ   
LASTXFER   
NUMXFERS   
TONBATT   
CUMONBATT   
XOFFBATT   
SELFTEST   
STATFLAG   
SERIALNO   
BATTDATE   
NOMOUTV   
NOMBATTV   
FIRMWARE   

Fixed the issue with the config not being saved.  Seems to be working properly now.

Also fixed the issue with the Status not showing.

I don't know why it's not showing in your Services widget - you could try > service configd restart - but I'm just guessing. or perhaps a  reboot might help  ?

Did you grab the new script file to get the Status ?

You can grab them from here:

https://github.com/Gibbon99/apcupsd/tree/master/usr/local/opnsense/scripts/OPNsense/Apcupsd

and put them here:

Code Select Expand

/usr/local/opnsense/scripts/OPNsense/Apcupsd

Should be two files:

Code Select Expand

-rwxr-xr-x  1 root  wheel  366 Jun 20 16:16 getNisStatus.py*
-rwxr-xr-x  1 root  wheel  206 Jun 20 16:24 getServiceStatus.py*
root@firewall:/usr/local/opnsense/scripts/OPNsense/Apcupsd #

What happens when you run this from the command line?

Code Select Expand

configctl apcupsd getNisStatus


This is what I have to make it show up in the Services Widget

Code Select Expand

root@firewall:/usr/local/etc/inc/plugins.inc.d # ll apcupsd.inc
-rw-r--r--  1 root  wheel  2358 Jun 20 18:25 apcupsd.inc


It's not saving the config on my box anymore either. Just fails silently.

I'll chase it up.

Ok

Had a go at fixing some of the issues - still no idea on how to make this "official" or do a PR.

Fixed up so it should work with the latest version now - mine broke and wouldn't report the status anymore.

Added the file apcupsd.inc - it goes in "/usr/local/etc/inc/plugins.inc.d/" - this makes the apcupsd service appear in the Services widget on the dashboard.

I haven't got any problems with saving the config, and updating the apcupsd.conf file - so I can't find a fix there.

Hi

I thought I would have a go at writing a plugin.  I couldn't get NUT to reliably run and stay connected to my APC UPS, so I wrote a plugin to configure the apcupsd package.

I've uploaded the code to github here: https://github.com/Gibbon99/apcupsd

It's pretty basic, but seems to get the job done.

If anyone would like to create an installable package from it, feel free - I couldn't get the plugins to compile on a VM.

Thanks.

[IF]

Hi

Have recently completed setting up OPNSense and it's all good - I only one thing left which is not working.

I don't seem to be able to get traffic back from the Bridged Modem.

My OPNSense machine has 4 interfaces:

igb0: WAN ( DHCP )
igb1: LAN ( 10.1.1.1 )
igb2: WIFI ( 172.16.1.1 )
igb3: Modem ( 10.2.1.1 ) - plugged into LAN port of Bridged Modem.

From LAN I can get to machines located within the WIFI network no problems ( HTTP to 172.16.1.2 )

From LAN I can get to machines located with the Modem network; IF they are assigned a DHCP address from the Modem interface ( HTTP to 10.2.1.3 works ).

However, my bridged modem has a static address of 10.2.1.2 - no options to set a gateway or DHCP.

If I SSH into the firewall, I can telnet 10.2.1.2 80, and get a response,

Code Select Expand


$ telnet 10.2.1.2 80
Trying 10.2.1.2...
Connected to 10.2.1.2.
Escape character is '^]'.

HTTP/1.1 400 Bad Request
Content-Type: text/html; charset=utf-8
Content-Length: 110
Connection: close

<html><head><title>400 Bad Request</title></head><body><center><h1>400 Bad Request</h1></center></body></html>Connection closed by foreign host.


in the firewall rules I can see a connection:

Code Select Expand


MODEM_ACCESS Jan 23 14:45:57 10.2.1.1:33765 10.2.1.2:80 tcp let out anything from firewall host itself


If I attempt the same thing from a LAN address I get

Code Select Expand


> telnet 10.2.1.2 80
Trying 10.2.1.2...

telnet: Unable to connect to remote host: Connection timed out


and the firewall logs show

Code Select Expand


MODEM_ACCESS   <-   Jan 23 15:09:57 10.1.1.30:47270 10.2.1.2:80 tcp let out anything from firewall host itself


When I ping 10.2.1.2 I get

Code Select Expand


>ping 10.2.1.2
PING 10.2.1.2 (10.2.1.2) 56(84) bytes of data.


and the firewall logs show

Code Select Expand


MODEM_ACCESS   <- Jan 23 14:54:19 10.1.1.30 10.2.1.2 icmp let out anything from firewall host itself
lan -> Jan 23 14:54:19 10.1.1.30 10.2.1.2 icmp Allow ping ICMP traffic around the internal network


How do I get traffic back from the static address ( 10.2.1.2 ) to the LAN net ?

Thanks.

[Solved]

This required a static route to be entered on the LAN interface of the modem directing the source IP back to it's gateway address.