Skip to content

Commit cc59f9c

Browse files
mickmistermickmister
committed
add "Show Network Status" button on ip config page
1 parent fd83fbd commit cc59f9c

2 files changed

Lines changed: 104 additions & 3 deletions

File tree

‎apps/ip_configurator/deno.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,8 @@
33
"hono": "jsr:@hono/hono@^4.8.10"
44
},
55
"tasks": {
6-
"start": "deno run --allow-env --allow-net --allow-read --allow-write main.ts",
7-
"compile": "deno compile --allow-env --allow-net --allow-write --allow-read --target aarch64-unknown-linux-gnu -o ip_configurator_executable main.ts"
6+
"start": "deno run --allow-env --allow-net --allow-read --allow-write --allow-run=ifconfig main.ts",
7+
"compile": "deno compile --allow-env --allow-net --allow-write --allow-read --allow-run=ifconfig --target aarch64-unknown-linux-gnu -o ip_configurator_executable main.ts"
88
},
99
"compilerOptions": {
1010
"jsx": "precompile",

‎apps/ip_configurator/main.ts‎

Lines changed: 102 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -86,10 +86,17 @@ const generateHtmlForm = (currentValues: CurrentConfig, message?: string): strin
8686
border-radius: 4px;
8787
cursor: pointer;
8888
font-size: 16px;
89+
margin-right: 10px;
8990
}
9091
button:hover {
9192
background-color: #45a049;
9293
}
94+
button.secondary {
95+
background-color: #008CBA;
96+
}
97+
button.secondary:hover {
98+
background-color: #007399;
99+
}
93100
.message {
94101
padding: 10px;
95102
margin-bottom: 20px;
@@ -105,7 +112,75 @@ const generateHtmlForm = (currentValues: CurrentConfig, message?: string): strin
105112
color: #721c24;
106113
border: 1px solid #f5c6cb;
107114
}
115+
.network-status {
116+
margin-top: 20px;
117+
padding: 15px;
118+
background-color: #f5f5f5;
119+
border-radius: 4px;
120+
border: 1px solid #ddd;
121+
}
122+
.network-status pre {
123+
margin: 10px 0 0 0;
124+
padding: 10px;
125+
background-color: #2d2d2d;
126+
color: #f8f8f2;
127+
border-radius: 4px;
128+
overflow-x: auto;
129+
max-height: 400px;
130+
overflow-y: auto;
131+
font-family: 'Courier New', monospace;
132+
font-size: 12px;
133+
line-height: 1.4;
134+
}
135+
.button-group {
136+
display: flex;
137+
gap: 10px;
138+
margin-top: 15px;
139+
}
108140
</style>
141+
<script>
142+
async function fetchNetworkStatus() {
143+
const statusDiv = document.getElementById('network-status');
144+
statusDiv.innerHTML = '<p>Loading network status...</p>';
145+
146+
try {
147+
const response = await fetch('/network-status');
148+
const data = await response.json();
149+
150+
if (data.error) {
151+
statusDiv.innerHTML = '<p style="color: #721c24;">Error: ' + data.error + '</p>';
152+
} else {
153+
statusDiv.innerHTML = '<h3>Network Status (ifconfig)</h3><pre>' + data.output + '</pre>';
154+
}
155+
} catch (error) {
156+
statusDiv.innerHTML = '<p style="color: #721c24;">Error fetching network status: ' + error.message + '</p>';
157+
}
158+
}
159+
160+
async function toggleNetworkStatus() {
161+
const statusDiv = document.getElementById('network-status');
162+
const button = document.getElementById('network-status-btn');
163+
const refreshButton = document.getElementById('refresh-status-btn');
164+
165+
// If already visible, hide it
166+
if (statusDiv.style.display === 'block') {
167+
statusDiv.style.display = 'none';
168+
button.textContent = 'Show Network Status';
169+
refreshButton.style.display = 'none';
170+
return;
171+
}
172+
173+
// Show and load
174+
statusDiv.style.display = 'block';
175+
button.textContent = 'Hide Network Status';
176+
refreshButton.style.display = 'inline-block';
177+
await fetchNetworkStatus();
178+
}
179+
180+
async function refreshNetworkStatus() {
181+
await fetchNetworkStatus();
182+
}
183+
</script>
109184
</head>
110185
<body>
111186
<h1>Network Configuration</h1>
@@ -144,8 +219,13 @@ const generateHtmlForm = (currentValues: CurrentConfig, message?: string): strin
144219
required
145220
/>
146221
</div>
147-
<button type="submit">Save Configuration</button>
222+
<div class="button-group">
223+
<button type="submit">Save Configuration</button>
224+
<button type="button" id="network-status-btn" class="secondary" onclick="toggleNetworkStatus()">Show Network Status</button>
225+
<button type="button" id="refresh-status-btn" class="secondary" onclick="refreshNetworkStatus()" style="display: none;">Refresh Network Status</button>
226+
</div>
148227
</form>
228+
<div id="network-status" class="network-status" style="display: none;"></div>
149229
</body>
150230
</html>
151231
`
@@ -262,4 +342,25 @@ app.post('/', async (c) => {
262342
}
263343
})
264344

345+
app.get('/network-status', async (c) => {
346+
try {
347+
const command = new Deno.Command('ifconfig', {
348+
stdout: 'piped',
349+
stderr: 'piped',
350+
})
351+
352+
const {code, stdout, stderr} = await command.output()
353+
354+
if (code !== 0) {
355+
const errorText = new TextDecoder().decode(stderr)
356+
return c.json({error: `ifconfig failed: ${errorText}`}, 500)
357+
}
358+
359+
const output = new TextDecoder().decode(stdout)
360+
return c.json({output})
361+
} catch (error) {
362+
return c.json({error: `Failed to execute ifconfig: ${error instanceof Error ? error.message : String(error)}`}, 500)
363+
}
364+
})
365+
265366
Deno.serve(app.fetch)

0 commit comments

Comments
 (0)