Own plugin not showing in web view

[Xenomatiker]

Check the bug
Before filling this bug report, please search if a similar issue already exists.
In this case, just add a comment on this existing issue.
Not found anything related

Describe the bug
I (~ChatGPT) coded a plugin for me. The plugin does show correctly in non web view. On web view, the content is missing.

To Reproduce
Steps to reproduce the behavior (System-Specific):

1. Install docker and plugins

2. Create Repos:

mkdir -p ~/docker/glances/ups

3. Create Source file: (placeholder to simulate UPS system log):

nano /var/log/ups_battery_glances.log

Voltage: 3.84V | Battery: 52% | AC Power: Plugged in | Charging: Inactive

4. Create Dockerfile:

nano ~/docker/Dockerfile

FROM nicolargo/glances:latest-full

COPY ./glances/ups /app/glances/plugins/ups

ENV GLANCES_OPT="-w --enable ups"

5. Create docker-compose.yml file:

nano ~/docker/docker-compose.yml

services:
  info-dashboard:
    container_name: info-dashboard
    build: ./
    ports:
      - "80:61208"
    volumes:
      - /var/log/ups_battery_glances.log:/var/log/ups_battery_glances.log:ro
    restart: unless-stopped
    networks:
      - my-bridge

networks:
  my-bridge:
    driver: bridge

6. Create plugin (__init__.py):

nano ~/docker/glances/ups/__init__.py

import os
from glances.logger import logger
from glances.plugins.plugin.model import GlancesPluginModel

class PluginModel(GlancesPluginModel):
    """Glances UPS Plugin - Monitors UPS status from a log file."""

    def __init__(self, args=None, config=None):
        super().__init__(args=args, config=config)
        self.display_curse = True
        self.log_file = '/var/log/ups_battery_glances.log'
        self.stats = {}
        self.reset()

    def reset(self):
        self.stats = {
            'Voltage': 'N/A',
            'Battery': 'N/A',
            'Charging': 'N/A',
            'AC Power': 'N/A',
        }

    @GlancesPluginModel._check_decorator
    @GlancesPluginModel._log_result_decorator
    def update(self):
        self.reset()
        logger.debug("UPS Plugin: Starting update()")

        if os.path.isfile(self.log_file):
            logger.debug(f"UPS Plugin: Found log file {self.log_file}")
            try:
                with open(self.log_file, 'r') as f:
                    line = f.readline().strip()
                    logger.debug(f"UPS Plugin: Read line: {line}")
                    parts = line.split('|')
                    for part in parts:
                        key, value = part.split(':', 1)
                        self.stats[key.strip()] = value.strip()
                        logger.debug(f"UPS Plugin: Parsed {key.strip()} = {value.strip()}")
            except Exception as e:
                logger.error(f"UPS Plugin: Error reading {self.log_file}: {e}")
        else:
            logger.warning(f"UPS Plugin: Log file {self.log_file} does not exist!")

        return self.stats

    def update_views(self):
        self.views = {}
        for key in self.stats:
            self.views[key] = {
                'decoration': 'DEFAULT',
                'hidden': False
            }
        return self.views

    def get_export(self):
        return self.stats

    def msg_curse(self, args=None, max_width=None):
        if not self.stats or self.is_disabled():
            return []

        ret = [self.curse_add_line('UPS POWER', "TITLE")]

        for key, value in self.stats.items():
            ret.append(self.curse_new_line())
            ret.append(self.curse_add_line(f'{key:<10}: {value}'))

        return ret

7. Start docker:

cd ~/docker && sudo docker compose up -d --build --force-recreate

8. Enter environment:

sudo docker exec -it info-dashboard /bin/sh

9. In the environment, modify the file glances/outputs/glances_curses.py to add the plugin to sidebar:

# This list can also be overwritten by the configuration file ([outputs] left_menu option)
_left_sidebar = [
    'network',
    'ports',
    'wifi',
    'connections',
    'diskio',
    'fs',
    'irq',
    'folders',
    'raid',
    'smart',
    'sensors',
    'ups',  # <- Add here
    'now',
]

10. Start glances:

glances

11. Open the website and observe plugin is missing at:

http://[Host-IP-Address]

Expected behavior
See stats on the web gui

Screenshots
If applicable, add screenshots to help explain your problem.

Local:

Web:

Environement (please complete the following information)

• Operating System (lsb_release -a or OS name/version): To be completed with result of: lsb_release -a

Host:
No LSB modules are available.
Distributor ID: Ubuntu
Description:    Ubuntu 24.04.2 LTS
Release:        24.04
Codename:       noble

Docker:
Docker version 28.0.1, build 068a01e

• Glances & psutil versions: To be completed with result of: glances -V

Glances version:        4.3.0.7
Glances API version:    4
PsUtil version:         6.1.1
Log file:               /tmp/glances-root.log

• How do you install Glances (Pypi package, script, package manager, source): To be completed --> Steps to reproduce
• Glances test: To be completed with result of: glances --issue

===============================================================================
Glances 4.3.0.7 (/app/glances/__init__.py)
Python 3.12.8 (/venv/bin/python3)
PsUtil 6.1.1 (/venv/lib/python3.12/site-packages/psutil/__init__.py)
===============================================================================
alert         [OK]    0.00002s
[]
amps          [OK]    0.00023s key=name
[{'count': 0,
  'countmax': None,
  'countmin': 1.0,
  'key': 'name',
  'name': 'Dropbox',
  'refresh': 3.0,
  'regex': True,
  'result': None,
  'timer': 2.213894844055176}, ...]
cloud         [NA]
connections   [NA]
containers    [OK]    0.03394s key=name
[{'command': '/bin/sh -c /venv/bin/python3 -m glances $GLANCES_OPT',
  'cpu_percent': 0.47057071960297764,
  'created': '2025-03-05T20:05:35.824021793Z',
  'engine': 'docker',
  'id': '3d86c2074cc42464169718e2fac8876451e86c42373dbc35a17b5a7ebffed5f4',
  'image': ('vault_con_data-info-dashboard:latest',),
  'io_rx': None,
  'io_wx': None,
  'key': 'name',
  'memory_percent': None,
  'memory_usage': 174239744,
  'name': 'info-dashboard',
  'network_rx': None,
  'network_tx': None,
  'status': 'running',
  'uptime': '3 hours'}, ...]
core          [OK]    0.00057s
{'log': 4, 'phys': 4}
cpu           [OK]    0.00067s
{'cpucore': 4,
 'ctx_switches': 0,
 'ctx_switches_gauge': 19816035,
 'guest': 0.0,
 'idle': 97.5,
 'interrupts': 0,
 'interrupts_gauge': 13600301,
 'iowait': 0.6,
 'irq': 0.0,
 'nice': 0.0,
 'soft_interrupts': 0,
 'soft_interrupts_gauge': 3719180,
 'steal': 0.0,
 'syscalls': 0,
 'syscalls_gauge': 0,
 'system': 0.6,
 'time_since_update': 2.143141269683838,
 'total': 1.9,
 'user': 1.3}
diskio        [OK]    0.00099s key=disk_name
[{'disk_name': 'nvme0n1',
  'key': 'disk_name',
  'read_bytes': 0,
  'read_bytes_gauge': 545771008,
  'read_count': 0,
  'read_count_gauge': 12253,
  'time_since_update': 2.1446452140808105,
  'write_bytes': 0,
  'write_bytes_gauge': 6124375040,
  'write_count': 0,
  'write_count_gauge': 116252}, ...]
folders       [OK]    0.00004s
[]
fs            [OK]    0.00073s key=mnt_point
[{'device_name': '/dev/md0',
  'free': 231463493632,
  'fs_type': 'ext4',
  'key': 'mnt_point',
  'mnt_point': '/etc/resolv.conf',
  'percent': 2.3,
  'size': 249713496064,
  'used': 5490720768}, ...]
gpu           [OK]    0.00003s
[]
help          [OK]    0.00001s
None
ip            [OK]    0.00777s
{'gateway': '***'}
irq           [NA]
load          [OK]    0.00005s
{'cpucore': 4, 'min1': 0.36767578125, 'min15': 0.181640625, 'min5': 0.20458984375}
mem           [OK]    0.00024s
{'active': 1125179392,
 'available': 3364433920,
 'buffers': 65986560,
 'cached': 871854080,
 'free': 3364433920,
 'inactive': 206094336,
 'percent': 19.5,
 'shared': 4087808,
 'total': 4178014208,
 'used': 813580288}
memswap       [OK]    0.00031s
{'free': 0, 'percent': 0.0, 'sin': 0, 'sout': 0, 'time_since_update': 2.0503289699554443, 'total': 0, 'used': 0}
network       [OK]    0.00091s key=interface_name
[{'alias': None,
  'bytes_all': 0,
  'bytes_all_gauge': 280636,
  'bytes_all_rate_per_sec': 0.0,
  'bytes_recv': 0,
  'bytes_recv_gauge': 140318,
  'bytes_recv_rate_per_sec': 0.0,
  'bytes_sent': 0,
  'bytes_sent_gauge': 140318,
  'bytes_sent_rate_per_sec': 0.0,
  'interface_name': 'lo',
  'key': 'interface_name',
  'speed': 0,
  'time_since_update': 2.049131155014038}, ...]
now           [OK]    0.00005s
{'custom': '2025-03-08 19:31:50 UTC', 'iso': '2025-03-08T19:31:50+00:00'}
percpu        [OK]    0.00042s key=cpu_number
[{'cpu_number': 0,
  'dpc': None,
  'guest': 0.0,
  'guest_nice': 0.0,
  'idle': 98.6,
  'interrupt': None,
  'iowait': 0.0,
  'irq': 0.0,
  'key': 'cpu_number',
  'nice': 0.0,
  'softirq': 0.0,
  'steal': 0.0,
  'system': 0.5,
  'total': 1.4,
  'user': 0.9}, ...]
ports         [OK]    0.00001s
[]
processcount  [OK]    0.00212s
{'pid_max': 0, 'running': 1, 'sleeping': 3, 'thread': 22, 'total': 4}
processlist   [OK]    0.00002s
[]
programlist   [OK]    0.00007s
[]
psutilversion [OK]    0.00003s
'6.1.1'
quicklook     [OK]    0.00051s
{'cpu': 1.9,
 'cpu_hz': 2400000000.0,
 'cpu_hz_current': 2000000000.0,
 'cpu_log_core': 4,
 'cpu_name': 'Raspberry Pi 5 Model B Rev 1.0',
 'cpu_phys_core': 4,
 'load': 4.5,
 'mem': 19.5,
 'percpu': [{...}, {...}, {...}, {...}],
 'swap': 0.0}
raid          [NA]
sensors       [OK]    0.00001s key=label
[{'critical': 84,
  'key': 'label',
  'label': 'Composite',
  'type': <SensorType.CPU_TEMP: 'temperature_core'>,
  'unit': 'C',
  'value': 57,
  'warning': 82}, ...]
smart         [NA]
system        [OK]    0.00001s
{'hostname': '3d86c2074cc4',
 'hr_name': 'Alpine Linux 3.21.0 64bit / Linux 6.8.0-1019-raspi',
 'linux_distro': 'Alpine Linux 3.21.0',
 'os_name': 'Linux',
 'os_version': '6.8.0-1019-raspi',
 'platform': '64bit'}
ups           [OK]    0.00031s
{'AC Power': 'Plugged in', 'Battery': '52%', 'Charging': 'Inactive', 'Voltage': '3.84V'}
uptime        [OK]    0.00021s
{'seconds': 11261}
version       [OK]    0.00002s
'4.3.0.7'
vms           [NA]
wifi          [OK]    0.00014s
[]
===============================================================================
Total time to update all stats: 0.05427s
===============================================================================
`

[nicolargo]

@Xenomatiker in order to make it work in the WebUI, you have to:

• Add the plugin in https://github.com/nicolargo/glances/blob/develop/glances/outputs/static/js/uiconfig.json
• create a new VueJS file in https://github.com/nicolargo/glances/tree/develop/glances/outputs/static/js/components
• optionally add CSS style in https://github.com/nicolargo/glances/blob/e7c2c219c50d91258650c7d7c8b6fdea50b85746/glances/outputs/static/css/style.scss
• Rebuild the WebUI: https://github.com/nicolargo/glances/blob/e7c2c219c50d91258650c7d7c8b6fdea50b85746/glances/outputs/static/README.md and use the make webui target

[Xenomatiker]

@Xenomatiker in order to make it work in the WebUI, you have to:

* Add the plugin in https://github.com/nicolargo/glances/blob/develop/glances/outputs/static/js/uiconfig.json

* create a new VueJS file in https://github.com/nicolargo/glances/tree/develop/glances/outputs/static/js/components

* optionally add CSS style in https://github.com/nicolargo/glances/blob/e7c2c219c50d91258650c7d7c8b6fdea50b85746/glances/outputs/static/css/style.scss

* Rebuild the WebUI: https://github.com/nicolargo/glances/blob/e7c2c219c50d91258650c7d7c8b6fdea50b85746/glances/outputs/static/README.md and use the make webui target

Hello @nicolargo

First of all, thank you for your reply and I apologize for only getting back to you now. I have been busy studying for an exam recently.

However, I have tried to follow the steps you mentioned, but they have not yet led to the desired result.

I'm probably still missing something, or I haven't been able to do something quite the way it should have been done. I would be happy if you could perhaps look over it again to see if I have implemented it correctly.

What I have done:

1. Added the plugin in glances/outputs/static/js/uiconfig.json

{
  "leftMenu": [
    "network",
    "ports",
    "wifi",
    "connections",
    "diskio",
    "fs",
    "irq",
    "folders",
    "raid",
    "smart",
    "sensors",
    "ups"  // <-- UPS here
  ]
}

2. Created a new VueJS file glances/outputs/static/js/components/plugin-ups.vue

<template>
  <div class="plugin plugin-ups">
    <div class="plugin-title">UPS Power Status</div>
    <div class="plugin-body">
      <ul>
        <li><strong>Voltage:</strong> {{ ups.Voltage }}</li>
        <li><strong>Battery:</strong> {{ ups.Battery }}</li>
        <li><strong>AC Status:</strong> {{ ups.AC }}</li>
        <li><strong>Charging:</strong> {{ ups.Charging }}</li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: "GlancesPluginUPS",
  props: ['pluginData'],
  computed: {
    ups() {
      return this.pluginData || {
        Voltage: 'N/A',
        Battery: 'N/A',
        AC: 'N/A',
        Charging: 'N/A'
      };
    }
  }
};
</script>

<style scoped>
.plugin-ups {
  padding: 10px;
  border-radius: 5px;
  background-color: #2c3e50;
  color: #ecf0f1;
  margin-bottom: 10px;
}

.plugin-title {
  font-weight: bold;
  font-size: 16px;
  margin-bottom: 8px;
}

.plugin-body ul {
  list-style: none;
  padding: 0;
}

.plugin-body li {
  padding: 2px 0;
}
</style>

3. Rebuilt the WebUI:

Installed NodeJS:
apk add nodejs npm

Changed directory:
cd glances/outputs/static/

Installed the dependencies
npm ci

Build the assets:
npm run build

And received some debug info:

/app/glances/outputs/static # npm ci

added 501 packages, and audited 502 packages in 1m

103 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities
/app/glances/outputs/static # npm run build

> build
> webpack --progress --mode=production

asset glances.js 600 KiB [emitted] [minimized] [big] (name: glances)
asset browser.js 500 KiB [compared for emit] [minimized] [big] (name: browser)
asset favicon.ico 4.19 KiB [compared for emit] [from: images/favicon.ico] [copied]
orphan modules 815 KiB [orphan] 240 modules
runtime modules 2.57 KiB 14 modules
cacheable modules 2.35 MiB
  modules by path ./node_modules/ 946 KiB 69 modules
  modules by path ./js/*.js 1.32 MiB
    ./js/app.js + 234 modules 807 KiB [built] [code generated]
    ./js/browser.js + 70 modules 542 KiB [built] [code generated]
  modules by path ./css/*.scss 110 KiB
    ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./css/custom.scss 104 KiB [built] [code generated]
    ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./css/style.scss 6.03 KiB [built] [code generated]
  ./terminal-highlight (ignored) 15 bytes [built] [code generated]
  source-map-js (ignored) 15 bytes [built] [code generated]
  path (ignored) 15 bytes [built] [code generated]
  url (ignored) 15 bytes [built] [code generated]
  fs (ignored) 15 bytes [built] [code generated]

WARNING in asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
This can impact web performance.
Assets:
  glances.js (600 KiB)
  browser.js (500 KiB)

WARNING in entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB). This can impact web performance.
Entrypoints:
  glances (600 KiB)
      glances.js
  browser (500 KiB)
      browser.js


WARNING in webpack performance recommendations:
You can limit the size of your bundles by using import() or require.ensure to lazy load some parts of your application.
For more info visit https://webpack.js.org/guides/code-splitting/

webpack 5.94.0 compiled with 3 warnings in 165561 ms

[nicolargo]

When it is finished, you can propose a pull request, it may interest others users :)

[Xenomatiker]

When it is finished, you can propose a pull request, it may interest others users :)

I don't know if it would be helpful to people, because it is really specific.

it refers to this Raspberry Pi 5 accessory https://wiki.geekworm.com/X1201 . And the base ‘software’ of this Pi hat doesn't really monitor and log the necessary information by itself. I also had to make a lot of adjustments to the scripting to make it the way it is now.

So I don't think there would be any interest in it.