links/routermon/templates/routermon/_live_wan.html

<table class="w-full text-xs">
  <thead class="bg-gray-50 text-gray-500 sticky top-0">
    <tr>
      <th class="px-3 py-2 text-left">Time</th>
      <th class="px-3 py-2 text-left">Source IP</th>
      <th class="px-3 py-2 text-left">Proto</th>
      <th class="px-3 py-2 text-left">Dst Port</th>
      <th class="px-3 py-2 text-left">Src Port</th>
      <th class="px-3 py-2 text-left">Geo</th>
      <th class="px-3 py-2 text-left">Target Service</th>
    </tr>
  </thead>
  <tbody class="divide-y divide-gray-50">
    {% for ev in wan_events %}
    <tr class="hover:bg-gray-50">
      <td class="px-3 py-2 text-gray-400 whitespace-nowrap font-mono">{{ ev.timestamp|date:"H:i:s" }}</td>
      <td class="px-3 py-2 font-mono">
        <button class="text-rose-600 hover:underline"
                onclick="setWanFilter('src_ip','{{ ev.src_ip|escapejs }}')">{{ ev.src_ip }}</button>
      </td>
      <td class="px-3 py-2 font-medium {% if ev.protocol == 'TCP' %}text-blue-600{% elif ev.protocol == 'UDP' %}text-purple-600{% else %}text-gray-500{% endif %}">
        {{ ev.protocol }}
      </td>
      <td class="px-3 py-2 font-mono">
        {% if ev.dst_port %}
          <button class="text-indigo-600 hover:underline"
                  onclick="setWanFilter('dst_port','{{ ev.dst_port }}')">{{ ev.dst_port }}</button>
          {% with p=ev.dst_port %}
            {% if p == 21 %}<span class="text-gray-400 ml-1">FTP</span>
            {% elif p == 22 %}<span class="text-gray-400 ml-1">SSH</span>
            {% elif p == 23 %}<span class="text-gray-400 ml-1">Telnet</span>
            {% elif p == 25 %}<span class="text-gray-400 ml-1">SMTP</span>
            {% elif p == 53 %}<span class="text-gray-400 ml-1">DNS</span>
            {% elif p == 80 %}<span class="text-gray-400 ml-1">HTTP</span>
            {% elif p == 110 %}<span class="text-gray-400 ml-1">POP3</span>
            {% elif p == 143 %}<span class="text-gray-400 ml-1">IMAP</span>
            {% elif p == 443 %}<span class="text-gray-400 ml-1">HTTPS</span>
            {% elif p == 445 %}<span class="text-gray-400 ml-1">SMB</span>
            {% elif p == 1433 %}<span class="text-gray-400 ml-1">MSSQL</span>
            {% elif p == 3306 %}<span class="text-gray-400 ml-1">MySQL</span>
            {% elif p == 3389 %}<span class="text-gray-400 ml-1">RDP</span>
            {% elif p == 5432 %}<span class="text-gray-400 ml-1">PostgreSQL</span>
            {% elif p == 5900 %}<span class="text-gray-400 ml-1">VNC</span>
            {% elif p == 6379 %}<span class="text-gray-400 ml-1">Redis</span>
            {% elif p == 8080 %}<span class="text-gray-400 ml-1">HTTP-alt</span>
            {% elif p == 8443 %}<span class="text-gray-400 ml-1">HTTPS-alt</span>
            {% elif p == 9200 %}<span class="text-gray-400 ml-1">Elastic</span>
            {% elif p == 27017 %}<span class="text-gray-400 ml-1">MongoDB</span>
            {% endif %}
          {% endwith %}
        {% else %}
          <span class="text-gray-300">—</span>
        {% endif %}
      </td>
      <td class="px-3 py-2 font-mono text-gray-500">{{ ev.src_port|default:"—" }}</td>
      <td class="px-3 py-2 text-gray-500">
        {% if ev.country_code %}
          <span>{{ ev.country_code }} {{ ev.geo_display }}</span>
        {% else %}
          <span class="text-gray-300">—</span>
        {% endif %}
      </td>
      <td class="px-3 py-2">
        {% with p=ev.dst_port %}
          {% if p == 21 %}<span class="inline-block px-1.5 py-0.5 rounded text-[10px] font-semibold bg-orange-100 text-orange-700">FTP</span>
          {% elif p == 22 %}<span class="inline-block px-1.5 py-0.5 rounded text-[10px] font-semibold bg-red-100 text-red-700">SSH</span>
          {% elif p == 23 %}<span class="inline-block px-1.5 py-0.5 rounded text-[10px] font-semibold bg-red-100 text-red-700">Telnet</span>
          {% elif p == 25 %}<span class="inline-block px-1.5 py-0.5 rounded text-[10px] font-semibold bg-green-100 text-green-700">SMTP</span>
          {% elif p == 53 %}<span class="inline-block px-1.5 py-0.5 rounded text-[10px] font-semibold bg-yellow-100 text-yellow-700">DNS</span>
          {% elif p == 80 %}<span class="inline-block px-1.5 py-0.5 rounded text-[10px] font-semibold bg-blue-100 text-blue-700">HTTP</span>
          {% elif p == 110 %}<span class="inline-block px-1.5 py-0.5 rounded text-[10px] font-semibold bg-green-100 text-green-700">POP3</span>
          {% elif p == 143 %}<span class="inline-block px-1.5 py-0.5 rounded text-[10px] font-semibold bg-green-100 text-green-700">IMAP</span>
          {% elif p == 443 %}<span class="inline-block px-1.5 py-0.5 rounded text-[10px] font-semibold bg-blue-100 text-blue-700">HTTPS</span>
          {% elif p == 445 %}<span class="inline-block px-1.5 py-0.5 rounded text-[10px] font-semibold bg-red-100 text-red-700">SMB</span>
          {% elif p == 1433 %}<span class="inline-block px-1.5 py-0.5 rounded text-[10px] font-semibold bg-purple-100 text-purple-700">MSSQL</span>
          {% elif p == 3306 %}<span class="inline-block px-1.5 py-0.5 rounded text-[10px] font-semibold bg-purple-100 text-purple-700">MySQL</span>
          {% elif p == 3389 %}<span class="inline-block px-1.5 py-0.5 rounded text-[10px] font-semibold bg-red-100 text-red-700">RDP</span>
          {% elif p == 5432 %}<span class="inline-block px-1.5 py-0.5 rounded text-[10px] font-semibold bg-purple-100 text-purple-700">PostgreSQL</span>
          {% elif p == 5900 %}<span class="inline-block px-1.5 py-0.5 rounded text-[10px] font-semibold bg-red-100 text-red-700">VNC</span>
          {% elif p == 6379 %}<span class="inline-block px-1.5 py-0.5 rounded text-[10px] font-semibold bg-purple-100 text-purple-700">Redis</span>
          {% elif p == 8080 %}<span class="inline-block px-1.5 py-0.5 rounded text-[10px] font-semibold bg-blue-100 text-blue-700">HTTP-alt</span>
          {% elif p == 8443 %}<span class="inline-block px-1.5 py-0.5 rounded text-[10px] font-semibold bg-blue-100 text-blue-700">HTTPS-alt</span>
          {% elif p == 9200 %}<span class="inline-block px-1.5 py-0.5 rounded text-[10px] font-semibold bg-purple-100 text-purple-700">Elastic</span>
          {% elif p == 27017 %}<span class="inline-block px-1.5 py-0.5 rounded text-[10px] font-semibold bg-purple-100 text-purple-700">MongoDB</span>
          {% else %}<span class="text-gray-400">—</span>
          {% endif %}
        {% endwith %}
      </td>
    </tr>
    {% empty %}
    <tr>
      <td colspan="7" class="px-3 py-8 text-center text-gray-400">
        No WAN events yet. Set up iptables logging on your router — see the Settings page.
      </td>
    </tr>
    {% endfor %}
  </tbody>
</table>