Skip to content

Commit 85d0134

Browse files
author
Tom Softreck
committed
update
1 parent 9559c27 commit 85d0134

3 files changed

Lines changed: 252 additions & 71 deletions

File tree

‎webtask/static/index.html‎

Lines changed: 15 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -96,14 +96,21 @@
9696
</div>
9797

9898
<div class="main-content">
99-
<div class="process-header">
100-
<div class="sortable" data-sort="pid">INFO <span class="sort-icon">⇅</span></div>
101-
<div class="sortable" data-sort="cpu">CPU% <span class="sort-icon">⇅</span></div>
102-
<div class="sortable" data-sort="mem">MEM% <span class="sort-icon">⇅</span></div>
103-
<div class="sortable" data-sort="port">PORT <span class="sort-icon">⇅</span></div>
104-
<div class="sortable" data-sort="command">COMMAND <span class="sort-icon">⇅</span></div>
105-
<div>PREVIEW</div>
106-
<div>ACTIONS</div>
99+
<div class="process-controls">
100+
<div class="view-options">
101+
<button class="view-option active" data-view="grid">Grid View</button>
102+
<button class="view-option" data-view="list">List View</button>
103+
</div>
104+
<div class="sort-options">
105+
<label>Sort by:</label>
106+
<select id="sort-select">
107+
<option value="pid">Process ID</option>
108+
<option value="cpu" selected>CPU Usage</option>
109+
<option value="mem">Memory Usage</option>
110+
<option value="command">Command</option>
111+
</select>
112+
<button id="sort-direction" title="Toggle Sort Direction">⇅</button>
113+
</div>
107114
</div>
108115
<div id="process-list"></div>
109116
</div>

‎webtask/static/js/modules/ui-manager.js‎

Lines changed: 42 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -174,64 +174,53 @@ class UIManager {
174174
// Generate command with icon
175175
const commandWithIcon = this.generateCommandWithIcon(process);
176176

177-
// Create hierarchy indicator
178-
let hierarchyIndicator = '';
179-
if (process.level > 0) {
180-
const indent = process.level * 20;
181-
hierarchyIndicator = `<div class="hierarchy-indicator" style="width: ${indent}px"></div>`;
182-
}
183-
184177
row.innerHTML = `
185-
${hierarchyIndicator}
186-
<div class="sortable process-info" data-sort="pid">
187-
<div class="info-item"><span class="info-label">PID:</span> ${process.pid}</div>
188-
<div class="info-item"><span class="info-label">USER:</span> ${process.user}</div>
189-
<div class="info-item"><span class="info-label">TIME:</span> ${process.time}</div>
178+
<div class="process-card-header">
179+
<div class="process-command-display">${commandWithIcon}</div>
180+
<div class="process-actions">
181+
<div class="action-buttons">
182+
<button class="kill-button" data-pid="${process.pid}" title="Kill Process">
183+
<span class="kill-icon">×</span>
184+
</button>
185+
<button class="more-button" data-pid="${process.pid}" title="More Actions">
186+
<span class="more-icon">⋮</span>
187+
</button>
188+
</div>
189+
</div>
190190
</div>
191-
<div class="sortable" data-sort="cpu">${process.cpu.toFixed(1)}</div>
192-
<div class="sortable" data-sort="mem">${process.memory.toFixed(1)}</div>
193-
<div class="sortable" data-sort="port">${process.port || '-'}</div>
194-
<div class="sortable process-command" data-sort="command">
195-
${commandWithIcon}
191+
192+
<div class="process-card-body">
193+
<div class="process-preview">
194+
${thumbnail}
195+
</div>
196196
</div>
197-
<div class="process-preview">
198-
${thumbnail}
197+
198+
<div class="process-card-footer">
199+
<div class="info-badge pid-badge" title="Process ID">${process.pid}</div>
200+
<div class="info-badge user-badge" title="User">${process.user}</div>
201+
<div class="info-badge time-badge" title="Process Time">${process.time}</div>
202+
${process.port ? `<div class="info-badge port-badge" title="Port">:${process.port}</div>` : ''}
199203
</div>
200-
<div class="process-actions">
201-
<div class="action-buttons">
202-
<button class="kill-button" data-pid="${process.pid}" title="Kill Process">
203-
<span class="kill-icon">×</span>
204-
</button>
205-
<button class="pause-button" data-pid="${process.pid}" title="Pause Process">
206-
<span class="pause-icon">⏸</span>
207-
</button>
208-
<button class="restart-button" data-pid="${process.pid}" title="Restart Process">
209-
<span class="restart-icon">⟳</span>
210-
</button>
211-
<button class="more-button" data-pid="${process.pid}" title="More Actions">
212-
<span class="more-icon">⋮</span>
213-
</button>
204+
205+
<div class="kill-dropdown" id="dropdown-${process.pid}">
206+
<div class="kill-dropdown-header">Process Actions - PID ${process.pid}</div>
207+
<div class="kill-option" data-pid="${process.pid}" data-signal="TERM">
208+
<span class="signal-icon">✓</span> SIGTERM (Terminate)
214209
</div>
215-
<div class="kill-dropdown" id="dropdown-${process.pid}">
216-
<div class="kill-dropdown-header">Process Actions - PID ${process.pid}</div>
217-
<div class="kill-option" data-pid="${process.pid}" data-signal="TERM">
218-
<span class="signal-icon">✓</span> SIGTERM (Terminate)
219-
</div>
220-
<div class="kill-option" data-pid="${process.pid}" data-signal="KILL">
221-
<span class="signal-icon">⚡</span> SIGKILL (Force Kill)
222-
</div>
223-
<div class="kill-option" data-pid="${process.pid}" data-signal="INT">
224-
<span class="signal-icon">⏹</span> SIGINT (Interrupt)
225-
</div>
226-
<div class="kill-option" data-pid="${process.pid}" data-signal="HUP">
227-
<span class="signal-icon">🔄</span> SIGHUP (Restart)
228-
</div>
229-
<div class="kill-option" data-pid="${process.pid}" data-signal="STOP">
230-
<span class="signal-icon">⏸</span> SIGSTOP (Pause)
231-
</div>
232-
<div class="kill-option" data-pid="${process.pid}" data-signal="CONT">
233-
<span class="signal-icon">▶️</span> SIGCONT (Resume)
234-
</div>
210+
<div class="kill-option" data-pid="${process.pid}" data-signal="KILL">
211+
<span class="signal-icon">⚡</span> SIGKILL (Force Kill)
212+
</div>
213+
<div class="kill-option" data-pid="${process.pid}" data-signal="INT">
214+
<span class="signal-icon">⏹</span> SIGINT (Interrupt)
215+
</div>
216+
<div class="kill-option" data-pid="${process.pid}" data-signal="HUP">
217+
<span class="signal-icon">🔄</span> SIGHUP (Restart)
218+
</div>
219+
<div class="kill-option" data-pid="${process.pid}" data-signal="STOP">
220+
<span class="signal-icon">⏸</span> SIGSTOP (Pause)
221+
</div>
222+
<div class="kill-option" data-pid="${process.pid}" data-signal="CONT">
223+
<span class="signal-icon">▶️</span> SIGCONT (Resume)
235224
</div>
236225
</div>
237226
`;

‎webtask/static/styles.css‎

Lines changed: 195 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -135,6 +135,70 @@ body {
135135
clear: both;
136136
}
137137

138+
.process-controls {
139+
display: flex;
140+
justify-content: space-between;
141+
align-items: center;
142+
padding: 15px;
143+
background: #2a2a2a;
144+
border-radius: 8px 8px 0 0;
145+
margin-bottom: 5px;
146+
flex-wrap: wrap;
147+
gap: 15px;
148+
}
149+
150+
.view-options {
151+
display: flex;
152+
gap: 10px;
153+
}
154+
155+
.view-option {
156+
background: #333;
157+
border: 1px solid #444;
158+
color: #aaa;
159+
padding: 8px 15px;
160+
border-radius: 4px;
161+
cursor: pointer;
162+
transition: all 0.2s;
163+
}
164+
165+
.view-option.active {
166+
background: #00aaff;
167+
color: #fff;
168+
border-color: #0088cc;
169+
}
170+
171+
.sort-options {
172+
display: flex;
173+
align-items: center;
174+
gap: 10px;
175+
}
176+
177+
.sort-options label {
178+
color: #aaa;
179+
}
180+
181+
#sort-select {
182+
background: #333;
183+
color: #00ffff;
184+
border: 1px solid #444;
185+
padding: 8px 12px;
186+
border-radius: 4px;
187+
}
188+
189+
#sort-direction {
190+
background: #333;
191+
color: #00ffff;
192+
border: 1px solid #444;
193+
width: 30px;
194+
height: 30px;
195+
border-radius: 4px;
196+
cursor: pointer;
197+
display: flex;
198+
align-items: center;
199+
justify-content: center;
200+
}
201+
138202
#process-list {
139203
display: grid;
140204
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
@@ -165,8 +229,114 @@ body {
165229
border-color: #555;
166230
}
167231

168-
.process-row:hover {
169-
background: #2a2a2a;
232+
/* Process Card Components */
233+
.process-card-header {
234+
display: flex;
235+
justify-content: space-between;
236+
align-items: center;
237+
padding-bottom: 10px;
238+
border-bottom: 1px solid #444;
239+
}
240+
241+
.process-command-display {
242+
flex-grow: 1;
243+
font-weight: bold;
244+
white-space: nowrap;
245+
overflow: hidden;
246+
text-overflow: ellipsis;
247+
color: #00ffff;
248+
}
249+
250+
.process-card-body {
251+
display: flex;
252+
flex-direction: column;
253+
gap: 12px;
254+
padding: 12px 0;
255+
}
256+
257+
.process-metrics {
258+
display: flex;
259+
flex-direction: column;
260+
gap: 8px;
261+
}
262+
263+
.metric-item {
264+
display: flex;
265+
flex-wrap: wrap;
266+
align-items: center;
267+
gap: 8px;
268+
}
269+
270+
.metric-label {
271+
font-weight: bold;
272+
color: #aaa;
273+
width: 40px;
274+
}
275+
276+
.metric-value {
277+
font-weight: bold;
278+
width: 50px;
279+
text-align: right;
280+
}
281+
282+
.metric-bar {
283+
flex-grow: 1;
284+
height: 8px;
285+
background: #333;
286+
border-radius: 4px;
287+
overflow: hidden;
288+
}
289+
290+
.metric-fill {
291+
height: 100%;
292+
transition: width 0.3s ease;
293+
}
294+
295+
.cpu-fill {
296+
background: linear-gradient(90deg, #00ff00, #ffff00, #ff0000);
297+
}
298+
299+
.mem-fill {
300+
background: linear-gradient(90deg, #00aaff, #0044ff);
301+
}
302+
303+
.process-card-footer {
304+
display: flex;
305+
flex-wrap: wrap;
306+
gap: 6px;
307+
padding-top: 10px;
308+
border-top: 1px solid #444;
309+
}
310+
311+
.info-badge {
312+
background: #333;
313+
color: #fff;
314+
padding: 4px 8px;
315+
border-radius: 12px;
316+
font-size: 12px;
317+
display: inline-flex;
318+
align-items: center;
319+
justify-content: center;
320+
}
321+
322+
.pid-badge {
323+
background: #444;
324+
color: #00ffff;
325+
}
326+
327+
.user-badge {
328+
background: #553355;
329+
color: #ff88ff;
330+
}
331+
332+
.time-badge {
333+
background: #335533;
334+
color: #88ff88;
335+
}
336+
337+
.port-badge {
338+
background: #553333;
339+
color: #ff8888;
170340
}
171341

172342
.process-row.high-cpu {
@@ -210,18 +380,35 @@ body {
210380
align-items: center;
211381
justify-content: center;
212382
overflow: hidden;
213-
max-height: 100px;
383+
height: 150px;
214384
cursor: pointer;
385+
border-radius: 6px;
386+
background: #222;
387+
border: 1px solid #444;
215388
}
216389

217390
.process-preview .preview-thumbnail {
218391
width: 100%;
219392
height: 100%;
220-
max-height: 100px;
221393
margin: 0;
222394
border-radius: 4px;
223395
}
224396

397+
/* Make the previews more compact for the card layout */
398+
.html-preview,
399+
.code-preview,
400+
.text-preview,
401+
.service-preview,
402+
.web-service-preview,
403+
.port-preview,
404+
.generic-preview {
405+
height: 100%;
406+
width: 100%;
407+
display: flex;
408+
flex-direction: column;
409+
overflow: hidden;
410+
}
411+
225412
.preview-thumbnail {
226413
width: 180px;
227414
height: 120px;
@@ -280,14 +467,12 @@ body {
280467
.process-actions {
281468
position: relative;
282469
display: flex;
283-
flex-direction: column;
284-
justify-content: center;
285-
align-items: center;
470+
justify-content: flex-end;
286471
}
287472

288473
.action-buttons {
289474
display: flex;
290-
gap: 8px;
475+
gap: 4px;
291476
}
292477

293478
.kill-button, .pause-button, .restart-button {
@@ -396,11 +581,11 @@ body {
396581
display: none;
397582
position: absolute;
398583
right: 0;
399-
top: 100%;
584+
top: 30px;
400585
background: #2a2a2a;
401586
border: 1px solid #666;
402587
border-radius: 6px;
403-
min-width: 200px;
588+
min-width: 240px;
404589
z-index: 1000;
405590
box-shadow: 0 4px 15px rgba(0,0,0,0.7);
406591
overflow: hidden;

0 commit comments

Comments
 (0)