Settings panels blank on desktop; working on iOS/mobile?

[joestump]

Is there an existing issue for this?

• [X] I have searched the existing open and closed issues and I checked the docs https://github.com/jokob-sk/NetAlertX/tree/main/docs

Current Behavior

Not entirely sure what's going on here, but settings only show up for me when I use Safari on iOS. On Firefox, Safari, and Chrome on the desktop all of the setting sections show up blank save the "Read more in the docs" links. The following two screenshots are the same settings page - one taken from Chrome on MacOS and one taken from Safari on iOS.

Working settings on iOS:

Blank settings on desktop:

Expected Behavior

Settings are confgurable from desktop and mobile browsers.

Steps To Reproduce

1. Set up a fresh install using jokobsk/netalertx:latest
2. Go to Settings on the Desktop

I even did an rm -fr on the bind mount, deleted the container, and started from scratch.

app.conf

#-----------------AUTOGENERATED FILE-----------------#
#                                                    #
#         Generated:  2022-12-30_22-19-40            #
#                                                    #
#   Config file for the LAN intruder detection app:  #
#      https://github.com/jokob-sk/NetAlertX          #
#                                                    #
#-----------------AUTOGENERATED FILE-----------------#

# 🔺 Use the Settings UI - only edit when necessary 🔺


# General
#---------------------------
# Scan using interface eth0
# SCAN_SUBNETS    = ['192.168.1.0/24 --interface=eth0']
#
# Scan multiple interfaces (eth1 and eth0):
# SCAN_SUBNETS    = [ '192.168.1.0/24 --interface=eth1', '192.168.1.0/24 --interface=eth0' ]

SCAN_SUBNETS=['192.168.1.0/24 --interface=eth1']

TIMEZONE='America/Los_Angeles'
PIALERT_WEB_PROTECTION=False
PIALERT_WEB_PASSWORD='8d969eef6ecad3c29a3a629280e686cf0c3f5d5a86aff3ca12020c923adc6c92'
DAYS_TO_KEEP_EVENTS=90
# Used for generating links in emails. Make sure not to add a trailing slash!
REPORT_DASHBOARD_URL='http://netalertx'


# Email
#---------------------------
SMTP_RUN='disabled'  # use 'on_notification' to enable
SMTP_SERVER='smtp.gmail.com'
SMTP_PORT=587
SMTP_REPORT_TO='[email protected]'
SMTP_REPORT_FROM='NetAlertX <[email protected]>'
SMTP_SKIP_LOGIN=False
SMTP_USER='[email protected]'
SMTP_PASS='password'
SMTP_SKIP_TLS=False


# Webhooks
#---------------------------
WEBHOOK_RUN='disabled'  # use 'on_notification' to enable
WEBHOOK_URL='http://n8n.local:5555/webhook-test/aaaaaaaa-aaaa-aaaa-aaaaa-aaaaaaaaaaaa'
WEBHOOK_PAYLOAD='json'                 # webhook payload data format for the "body > attachements > text" attribute 
                                       # in https://github.com/jokob-sk/NetAlertX/blob/main/docs/webhook_json_sample.json 
                                       #   supported values: 'json', 'html' or 'text'
                                       #   e.g.: for discord use 'html'
WEBHOOK_REQUEST_METHOD='GET'


# Apprise
#---------------------------
APPRISE_RUN='disabled'  # use 'on_notification' to enable
APPRISE_HOST='http://localhost:8000/notify'
APPRISE_URL='mailto://smtp-relay.sendinblue.com:[email protected]&name=apprise&[email protected]&pass=password&[email protected]'


# NTFY
#---------------------------
NTFY_RUN='disabled'  # use 'on_notification' to enable
NTFY_HOST='https://ntfy.sh'
NTFY_TOPIC='replace_my_secure_topicname_91h889f28'
NTFY_USER='user'
NTFY_PASSWORD='passw0rd'


# PUSHSAFER
#---------------------------
PUSHSAFER_RUN='disabled'  # use 'on_notification' to enable
PUSHSAFER_TOKEN='ApiKey'


# MQTT
#---------------------------
MQTT_RUN='disabled'  # use 'on_notification' to enable
MQTT_BROKER='192.168.1.2'
MQTT_PORT=1883
MQTT_USER='mqtt'
MQTT_PASSWORD='passw0rd'
MQTT_QOS=0
MQTT_DELAY_SEC=2


#-------------------IMPORTANT INFO-------------------#
#   This file is ingested by a python script, so if  #
#        modified it needs to use python syntax      #
#-------------------IMPORTANT INFO-------------------#

docker-compose.yml

---
- name: NetAlertX
  hosts: int01
  vars:
    defaults:
      netalertx:
        image: jokobsk/netalertx:latest
        enabled: true
        port: 20211
        dns: netalertx
        homepage:
          group: Network
          weight: 350
    conf: "{{ defaults.netalertx | combine(netalertx, recursive=true) }}"
  tasks:
  - name: Create main {{ conf.dns }} directory
    file:
      path: "{{ paths.local }}/{{ conf.dns }}"
      state: directory

  - name: Create {{ conf.dns }} directories
    file:
      path: "{{ paths.local }}/{{ conf.dns }}/{{ item }}"
      state: directory
    loop: 
      - config
      - db

  - name: Docker Compose
    community.docker.docker_compose:
      project_name: netalertx
      definition:
        version: "3"
        services:
          netalertx:
            image: "{{ conf.image }}"
            container_name: netalertx
            network_mode: "host"
            labels:
              homepage.group: "{{ conf.homepage.group }}"
              homepage.name: NetAlertX
              homepage.icon: pi-alert
              homepage.href: https://{{ conf.dns }}.{{ dns.wtf }}
              homepage.description: Networkg device monitor on {{ inventory_hostname }}
              homepage.weight: "{{ conf.homepage.weight }}"
              homepage.widget.type: netalertx
              homepage.widget.url: https://{{ conf.dns }}.{{ dns.wtf }}
              com.centurylinklabs.watchtower.enable: "{{ conf.watchtower | default('true')}}"
              caddy: "{{ conf.dns }}.{{ dns.wtf }}"
              caddy.reverse_proxy: "{{ ansible_host }}:{{ conf.port }}"
            environment:
              PORT: "{{ conf.port }}"
              TZ: "{{ tz }}"
              REPORT_DASHBOARD_URL: "https://{{ conf.dns }}.{{ dns.wtf }}"
            volumes:
              - "{{ paths.local }}/{{ conf.dns }}/config:/app/config"
              - "{{ paths.local }}/{{ conf.dns }}/db:/app/db"
            restart: "unless-stopped"

  - name: CNAME {{ conf.dns }}.{{ dns.wtf }} to {{ ansible_host }}
    amazon.aws.route53:
      state: present
      overwrite: true
      zone: "{{ dns.wtf }}"
      record: "{{ conf.dns }}.{{ dns.wtf }}"
      type: CNAME
      value: "{{ ansible_host }}"
      ttl: 60

What branch are you running?

Production

app.log

04:20:31 ------------------------------------------------
04:20:31   /config/app.conf |  READ  | True
04:20:31   /config/app.conf |  WRITE | True
04:20:31   /db/app.db       |  READ  | True
04:20:31   /db/app.db       |  WRITE | True
04:20:31 ------------------------------------------------
04:20:31 [Setup] Attempting to fix permissions.
04:20:31 [Setup] Attempting to fix permissions.
04:20:31 [Database] Opening DB
04:20:31 [upgradeDB] Re-creating Settings table
04:20:31 [upgradeDB] Re-creating Pholus_Scan table
04:20:31 [upgradeDB] Re-creating Parameters table
04:20:32 [Version check] Running the latest version.
04:20:32 [Config] reading config file
04:20:32 [Config] Plugins: Number of dynamically loaded plugins: 29
04:20:32 [Plugin utils] ---------------------------------------------
04:20:32 [Plugin utils] display_name: Services & Ports (NMAP)
04:20:32 [Plugin utils] description: This plugin shows all services discovered by NMAP scans.
04:20:32 [Plugin utils] ---------------------------------------------
04:20:32 [Plugin utils] display_name: NTFY publisher
04:20:32 [Plugin utils] description: A plugin to publish a notification via the NTFY gateway.
04:20:33 [Plugin utils] ---------------------------------------------
04:20:33 [Plugin utils] display_name: Arp-Scan (Network scan)
04:20:33 [Plugin utils] description: This plugin is to execute an arp-scan on the local network
04:20:33 [Plugin utils] ---------------------------------------------
04:20:33 [Plugin utils] display_name: Website monitor
04:20:33 [Plugin utils] description: This plugin is to monitor status changes of services or websites.
04:20:33 [Plugin utils] ---------------------------------------------
04:20:33 [Plugin utils] display_name: Notification Processing
04:20:33 [Plugin utils] description: A plugin to for advanced notification processing.
04:20:33 [Plugin utils] ---------------------------------------------
04:20:33 [Plugin utils] display_name: Vendor update
04:20:33 [Plugin utils] description: A plugin to schedule vendor database updates for mac based vendor resolution.
04:20:33 [Plugin utils] ---------------------------------------------
04:20:33 [Plugin utils] display_name: DHCP Leases (Device import)
04:20:33 [Plugin utils] description: This plugin is to import devices from dhcp.leases files.
04:20:33 [Plugin utils] ---------------------------------------------
04:20:33 [Plugin utils] display_name: UniFi import
04:20:33 [Plugin utils] description: This plugin is used to import devices from an UNIFI controller.
04:20:33 [Plugin utils] ---------------------------------------------
04:20:33 [Plugin utils] display_name: Un-Discoverable Devices
04:20:33 [Plugin utils] description: This plugin is to import undiscoverable devices from a file.
04:20:33 [Plugin utils] ---------------------------------------------
04:20:33 [Plugin utils] display_name: CSV backup
04:20:33 [Plugin utils] description: A plugin to auto-generate devices.csv backups.
04:20:33 [Plugin utils] ---------------------------------------------
04:20:33 [Plugin utils] display_name: SNMP discovery
04:20:33 [Plugin utils] description: This plugin is used to discover devices via the arp table(s) of a RFC1213 compliant router or switch.
04:20:33 [Plugin utils] ---------------------------------------------
04:20:34 [Plugin utils] ---------------------------------------------
04:20:34 [Plugin utils] display_name: DDNS update
04:20:34 [Plugin utils] description: A plugin update the DDNS record.
04:20:34 [Plugin utils] ---------------------------------------------
04:20:34 [Plugin utils] display_name: Apprise publisher
04:20:34 [Plugin utils] description: A plugin to publish a notification via the Apprise gateway.
04:20:34 [Plugin utils] ---------------------------------------------
04:20:34 [Plugin utils] display_name: Set password
04:20:34 [Plugin utils] description: A simple plugin to set the web ui password on app start.
04:20:34 [Plugin utils] ---------------------------------------------
04:20:34 [Plugin utils] display_name: Pholus (Name discovery)
04:20:34 [Plugin utils] description: This plugin is to execute a Pholus (name discovery) on the local network
04:20:34 [Plugin utils] ---------------------------------------------
04:20:34 [Plugin utils] display_name: PiHole (Device sync)
04:20:34 [Plugin utils] description: This plugin syncs devices from the PiHole database
04:20:34 [Plugin utils] ---------------------------------------------
04:20:34 [Plugin utils] display_name: Internet-Check
04:20:34 [Plugin utils] description: A plugin to check your internet connectivity and IP.
04:20:34 [Plugin utils] ---------------------------------------------
04:20:34 [Plugin utils] display_name: New Devices
04:20:34 [Plugin utils] description: The template used for new devices.
04:20:34 [Plugin utils] ---------------------------------------------
04:20:34 [Plugin utils] display_name: Rogue DHCP
04:20:34 [Plugin utils] description: This plugin is to use NMAP to monitor for rogue DHCP servers.
04:20:34 [Plugin utils] --------------------------------------------
04:20:34 [Plugin utils] display_name: DB cleanup
04:20:34 [Plugin utils] description: A plugin to schedule database cleanup & upkeep tasks.
04:20:34 [Plugin utils] ---------------------------------------------
04:20:34 [Plugin utils] display_name: Webhook publisher
04:20:34 [Plugin utils] description: A plugin to publish a notification via Webhooks.
04:20:34 [Plugin utils] ---------------------------------------------
04:20:34 [Plugin utils] display_name: Email publisher (SMTP)
04:20:34 [Plugin utils] description: A plugin to publish a notification via Email (SMTP) gateway.
04:20:34 [Plugin utils] ---------------------------------------------
04:20:34 [Plugin utils] display_name: Pushsafer publisher
04:20:34 [Plugin utils] description: A plugin to publish a notification via the Pushsafer gateway.
04:20:35 [Plugin utils] ---------------------------------------------
04:20:35 [Plugin utils] display_name: Workflows
04:20:35 [Plugin utils] description: A plugin to adjust behavior of workflows.
04:20:35 [Plugin utils] ---------------------------------------------
04:20:35 [Plugin utils] display_name: MQTT publisher
04:20:35 [Plugin utils] description: A plugin to publish a notification via the Apprise gateway.
04:20:35 [Plugin utils] ---------------------------------------------
04:20:35 [Plugin utils] display_name: Internet speedtest
04:20:35 [Plugin utils] description: A plugin to perform a scheduled internet speedtest.
04:20:35 [Plugin utils] ---------------------------------------------
04:20:35 [Plugin utils] display_name: NSLOOKUP (Name discovery)
04:20:35 [Plugin utils] description: A plugin to discover device names.
04:20:35 [Plugin utils] ---------------------------------------------
04:20:35 [Plugin utils] display_name: Pushover publisher
04:20:35 [Plugin utils] description: A plugin to publish a notification via the pushover.net
04:20:36 [API] Updating table_settings.json file in /front/api
04:20:36 [Config] Imported new config
04:20:36 [API] Updating table_appevents.json file in /front/api
04:20:36 [API] Updating table_devices.json file in /front/api
04:20:36 [API] Updating table_events_pending_alert.json file in /front/api
04:20:36 [API] Updating table_plugins_events.json file in /front/api
04:20:36 [API] Updating table_plugins_history.json file in /front/api
04:20:36 [API] Updating table_plugins_objects.json file in /front/api
04:20:36 [API] Updating table_plugins_language_strings.json file in /front/api
04:20:36 [API] Updating table_notifications.json file in /front/api
04:20:36 [API] Updating table_custom_endpoint.json file in /front/api
04:20:36 [Plugin utils] ---------------------------------------------
04:20:36 [Plugin utils] display_name: NSLOOKUP (Name discovery)

Debug enabled

• [X] I have read and followed the steps in the wiki link above and provided the required debug logs and the log section covers the time when the issue occurs.

[joestump]

It's the most broken on Firefox:

[jokob-sk]

Hi there,

Can you please try to refresh the cache by clicking this button:

[joestump]

@jokob-sk that fixed it. 👍🏼 How do I avoid in the future?

[jokob-sk]

I will keep imroving the app - the current cache expiration and re-caching mechanism isn't too reliable so I will have a look how to improve it. Thanks for the patience. If anyone wants to help, have a look at the common.js file first initialization sequence, below this section:

// -----------------------------------------------------------------------------
// initialize
// -----------------------------------------------------------------------------

https://github.com/jokob-sk/NetAlertX/blob/d26d6c8b0bae84c9c673f14734e1219f04c52de7/front/js/common.js#L1032

[jokob-sk]

In the mean time I already implemented some changes so if you'd like feel free to test the netalertx-dev image to check, if the issues are still occurring.

[joestump]

@jokob-sk no worries at all; I think I speak for many when I say I'm stoked with all you've done with NetAlertX. 😄

Sadly, the netalertx-dev didn't work out for me. The settings page failed to load. Nothing amiss in the logs:

16:43:43 [API] Updating table_settings.json file in /front/api
16:43:43 [Config] Imported new config
16:43:43 [API] Updating table_appevents.json file in /front/api
16:43:43 [API] Updating table_devices.json file in /front/api
16:43:43 [API] Updating table_events_pending_alert.json file in /front/api
16:43:43 [API] Updating table_plugins_events.json file in /front/api
16:43:43 [API] Updating table_plugins_history.json file in /front/api
16:43:43 [API] Updating table_plugins_objects.json file in /front/api
16:43:43 [API] Updating table_plugins_language_strings.json file in /front/api
16:43:43 [API] Updating table_notifications.json file in /front/api

Firefox:

Chrome:

[joestump]

Firefox console:

[jokob-sk]

Hey, thanks for the kind words!

Trying something out (adding a version in the query string of requested js files to expire the cache) - you can test the netalertx-dev image again if interested. Ideally in a new / incognito session and then existing session.

[joestump]

It works/loads fine in a cognito window, but not in the normal windows. Clicking the refresh icon doesn't seem to clear/help either. Here's a video:

https://github.com/jokob-sk/NetAlertX/assets/37667/201ec79f-a1d1-4488-991b-777901b8e067

Here's what I did:

1. Delete the container + image via Portainer.
2. Re-run docker compose to pull/start new container.
3. Go to Chrome and start an incognito session. All is well.
4. Flip back to regular Chrome with existing session. Page never fully loads, filter UI shown, and the settings page just keeps reloading.

I'm free this weekend if you'd like to schedule a screen sharing session to debug in real-time. It's a weird one for sure! For now I can use the regular container and reload whenever settings doesn't refresh.

[jokob-sk]

• Delete the container + image via Portainer.

• Re-run docker compose to pull/start new container.

• Go to Chrome and start an incognito session. All is well.

And I think that's the best we can do at this point. I think the old session has the js files cached and strings cached/not cached and they have to expire for the new assets to load and be initialized properly.

Empty strings indicate that the strings were not cached correctly, and I hope I'm slowly making this more solid for a first-time load (again, anyone reading - please help out, I'm a bit tired looking at this part of the code 😩)

[joestump]

@jokob-sk as we often say, there are two big problems in programming: naming, cache invalidation, and off-by-one errors. 😁 There's a very simple/easy workaround for now: click the refresh button in the application's UI.

I just noticed in your change 584fdb7734d2954c506b77a9ae77287b8dc85e33 the following detail:

You will have to run the container on the host network.

This explains why my NetAlertX ARP scanner isn't finding anything. 😅 I wonder if this is related to this bug? I'm going to go back to latest and move to network_mode: host. Will report back.

[jokob-sk]

This explains why my NetAlertX ARP scanner isn't finding anything. 😅 I wonder if this is related to this bug?

I don't think so but worth a shot. Definitely having the container on the host network will however correct other things. I still think the -dev image is now in a better state regarding the caching issues. 🤞

[joestump]

Okay, I verified it's network_mode: host, but the ARP scans aren't finding my devices. I strongly suspect this is due to a poorly configured VLAN setup on my end. I'm fiddling with the subnets docs to see if I can get somewhere.

[jokob-sk]

Can't help on that front as I don't use vlans on my end. However there's a discussion going on over here: https://github.com/jokob-sk/NetAlertX/discussions/654

[jokob-sk]

released/workaround provided -> closing for now