149 lines
9.4 KiB
Python
Executable File
149 lines
9.4 KiB
Python
Executable File
#!/usr/bin/env python3
|
|
"""Regression for live Network diagnostic DOM stability beside Process.
|
|
|
|
Runs the actual renderer and the shipped dashboard CSS with mocked sample data
|
|
in Chromium touch emulation. This does NOT certify Safari/iOS 27 behavior.
|
|
"""
|
|
from pathlib import Path
|
|
import shutil
|
|
from bs4 import BeautifulSoup
|
|
from playwright.sync_api import sync_playwright
|
|
|
|
ROOT = Path(__file__).resolve().parents[2]
|
|
WEB = ROOT / 'src/admin/web'
|
|
soup = BeautifulSoup((WEB / 'index.html').read_text(), 'html.parser')
|
|
process = soup.select_one('[data-dashboard-widget="process_diagnostics"]')
|
|
network = soup.select_one('[data-dashboard-widget="network_diagnostics"]')
|
|
assert process and network
|
|
source = (WEB / 'app/runtime.js').read_text()
|
|
start = source.index('function renderNetworkInterfaceCharts(interfaces, appendSample) {')
|
|
start = source.rfind('let latestNetworkInterfaceSnapshot', 0, start)
|
|
assert start >= 0
|
|
renderer = source[start:source.index('function renderDiagnostics(', start)]
|
|
helper = source[source.index('function setChartText('):start]
|
|
html = ('<!doctype html><html data-theme="ultra_dark" data-dashboard-density="compact">'
|
|
'<head><meta name="viewport" content="width=device-width, initial-scale=1">'
|
|
'<style>' + (WEB / 'style.css').read_text() + '</style></head>'
|
|
'<body style="margin:0"><div style="height:1020px">Overview metrics</div>'
|
|
'<section id="panel-overview"><div class="stats-grid dashboard-overview-grid is-aligned" '
|
|
'id="dashboard-overview-grid">' + str(process) + str(network) +
|
|
'</div></section><div style="height:160px"></div></body></html>')
|
|
stubs = '''
|
|
const networkInterfaceSamples = new Map();
|
|
const hiddenNetworkInterfaces = new Set();
|
|
const $ = id => document.getElementById(id);
|
|
const t = s => ({networkInterfacesVisibleCount:'{visible} / {total}',
|
|
networkInterfaceRate:'Rate', networkInterfacesHistory:'Traffic',
|
|
hideMetric:'Hide', showMetric:'Show',hiddenInterfaces:'Hidden',
|
|
networkNoInterfaces:'No interfaces',networkNoVisibleInterfaces:'None visible'})[s] || s;
|
|
const fmtBytes = n => `${n} B`;
|
|
const el = (tag, text, cls) => {const node=document.createElement(tag);
|
|
if(text !== undefined) node.textContent=text;if(cls) node.className=cls;return node;};
|
|
const action = (label, fn) => {const node=el('button',label);node.addEventListener('click',fn);return node;};
|
|
const svgNode = (tag, attrs={}) => {const node=document.createElementNS('http://www.w3.org/2000/svg',tag);
|
|
Object.entries(attrs).forEach(([key,value])=>node.setAttribute(key,value));return node;};
|
|
const sparklinePoints = (values,width=300,height=60,padding=5,peakOverride=null) => {
|
|
const peak=Math.max(1,peakOverride??Math.max(0,...values));
|
|
return values.map((value,index)=>`${index*width/Math.max(1,values.length-1)},${height-padding-Math.max(0,value)/peak*(height-padding*2)}`).join(' ');
|
|
};
|
|
const saveHiddenNetworkInterfaces = () => {};
|
|
'''
|
|
|
|
with sync_playwright() as p:
|
|
browser = p.chromium.launch(headless=True, executable_path=shutil.which('chromium'), args=['--no-sandbox'])
|
|
context = browser.new_context(viewport={'width':393,'height':844},
|
|
device_scale_factor=3, is_mobile=True, has_touch=True)
|
|
page = context.new_page()
|
|
page.set_content(html, wait_until='domcontentloaded')
|
|
page.add_script_tag(content=stubs + helper + renderer)
|
|
baseline = page.evaluate('''() => {
|
|
const items = [{name:'ens18',rx_bytes_per_second:100,tx_bytes_per_second:20},
|
|
{name:'lo',rx_bytes_per_second:3,tx_bytes_per_second:3}];
|
|
renderNetworkInterfaceCharts(items,true);
|
|
const panel = document.querySelector('[data-dashboard-widget="process_diagnostics"]');
|
|
const network = document.querySelector('[data-dashboard-widget="network_diagnostics"]');
|
|
const target = document.getElementById('network-interface-charts');
|
|
window.testNodes = {first:target.firstElementChild, svg:target.querySelector('svg'),
|
|
path:target.querySelector('.network-rx-line')};
|
|
window.testInterfaces = items;
|
|
window.scrollTo(0,Math.round(network.getBoundingClientRect().top+window.scrollY+180));
|
|
return {processHeight:panel.getBoundingClientRect().height, y:scrollY,
|
|
network:network.getBoundingClientRect().top, count:target.children.length,
|
|
scrollHeight:document.documentElement.scrollHeight};
|
|
}''')
|
|
assert baseline['y'] > 0 and baseline['count'] == 2, baseline
|
|
count = page.evaluate('''() => {
|
|
const target = document.getElementById('network-interface-charts');
|
|
let mutations=0;
|
|
const obs = new MutationObserver(list=>mutations+=list.filter(item=>item.type==='childList').length);
|
|
obs.observe(target,{childList:true,subtree:true});
|
|
const beforeY=scrollY;
|
|
const beforeHeight=document.documentElement.scrollHeight;
|
|
const beforeProcess=document.querySelector('[data-dashboard-widget="process_diagnostics"]').getBoundingClientRect().height;
|
|
for(let i=0;i<45;i++){
|
|
renderNetworkInterfaceCharts([{name:'ens18',rx_bytes_per_second:i*109,tx_bytes_per_second:12},
|
|
{name:'lo',rx_bytes_per_second:i*2,tx_bytes_per_second:3}],true);
|
|
if(target.firstElementChild!==window.testNodes.first ||
|
|
target.querySelector('svg')!==window.testNodes.svg ||
|
|
target.querySelector('.network-rx-line')!==window.testNodes.path) throw Error('Network DOM replaced');
|
|
}
|
|
obs.takeRecords().forEach(r=> {if(r.type==='childList')mutations++});obs.disconnect();
|
|
return {mutations, y:scrollY, beforeY, count:target.children.length,
|
|
scrollHeight:document.documentElement.scrollHeight, beforeHeight,
|
|
processHeight:document.querySelector('[data-dashboard-widget="process_diagnostics"]').getBoundingClientRect().height, beforeProcess,
|
|
changed:target.querySelector('.network-interface-rate').textContent.includes('4796')};
|
|
}''')
|
|
assert count['mutations'] == 0, count
|
|
assert abs(count['y'] - count['beforeY']) < 2, count
|
|
assert count['count'] == 2 and count['changed'], count
|
|
assert abs(count['scrollHeight'] - count['beforeHeight']) < 2, count
|
|
assert abs(count['processHeight'] - count['beforeProcess']) < 2, count
|
|
print('PASS: 45 updates preserve SVG nodes, Process height, document height and scroll')
|
|
|
|
# Interface charts advance at every Overview live tick like the aggregate
|
|
# network chart, repeating the last observed rate until system-info updates.
|
|
# A system-info-only refresh or Hide/Show redraw never adds history points.
|
|
history = page.evaluate('''() => {
|
|
networkInterfaceSamples.clear();
|
|
const one=[{name:'ens18',rx_bytes_per_second:100,tx_bytes_per_second:200}];
|
|
renderNetworkInterfaceCharts(one,true);
|
|
const before=networkInterfaceSamples.get('ens18').rx.length;
|
|
for(let i=0;i<45;i++) renderNetworkInterfaceCharts(one,true);
|
|
const live=networkInterfaceSamples.get('ens18').rx.length;
|
|
const measured=[{name:'ens18',rx_bytes_per_second:500,tx_bytes_per_second:250}];
|
|
renderNetworkInterfaceCharts(measured,false); // only new system-info data
|
|
const afterSystem=networkInterfaceSamples.get('ens18').rx.length;
|
|
const label=document.querySelector('.network-interface-rate').textContent;
|
|
renderNetworkInterfaceCharts(measured,true); // next live tick
|
|
const afterLive=networkInterfaceSamples.get('ens18').rx.length;
|
|
const newest=networkInterfaceSamples.get('ens18').rx.at(-1);
|
|
return {before,live,afterSystem,afterLive,label,newest};
|
|
}''')
|
|
assert history['before'] == 1 and history['live'] == 46, history
|
|
assert history['afterSystem'] == 46 and history['afterLive'] == 47, history
|
|
assert history['newest'] == 500 and '500 B' in history['label'], history
|
|
assert 'renderNetworkInterfaceCharts(live.network_interfaces || [], appendSample);' in source
|
|
refresh = (WEB / 'app/refresh.js').read_text()
|
|
assert 'interval: () => options.system_info_seconds' in refresh
|
|
assert 'renderDiagnostics(latestStatus, false, true);' in refresh
|
|
print('PASS: frequent interface chart history, configured system-info cadence, no extra samples on system-only redraw')
|
|
page.evaluate('''() => renderNetworkInterfaceCharts([
|
|
{name:'ens18',rx_bytes_per_second:100,tx_bytes_per_second:200},
|
|
{name:'lo',rx_bytes_per_second:3,tx_bytes_per_second:3}],false)''')
|
|
|
|
# The Hide / Show controls retain the newest sample on click, not the array
|
|
# captured when a chart node was created.
|
|
page.locator('.network-interface-hide').first.click()
|
|
assert page.locator('.network-interface-row').count() == 1
|
|
assert page.locator('.network-interface-hidden button').count() == 1
|
|
page.locator('.network-interface-hidden button').click()
|
|
assert page.locator('.network-interface-row').count() == 2
|
|
assert page.locator('.network-interface-hidden').count() == 0
|
|
page.evaluate('''() => renderNetworkInterfaceCharts([{name:'eth0',rx_bytes_per_second:9,tx_bytes_per_second:11}],true)''')
|
|
assert page.locator('.network-interface-row').count() == 1
|
|
assert page.locator('.network-interface-row').first.get_attribute('data-interface-name') == 'eth0'
|
|
page.evaluate('''() => renderNetworkInterfaceCharts([],true)''')
|
|
assert page.locator('.network-interface-empty').count() == 1
|
|
print('PASS: Hide/Show actions, hotplug/removal and empty state still work')
|
|
browser.close()
|