Skip to content

Commit d7a827d

Browse files
rcourtmanrcourtman
committed
Feat: Integrate chart display and alert handling in UI, remove logging components
1 parent 18a62d9 commit d7a827d

File tree

1 file changed

+106
-36
lines changed

1 file changed

+106
-36
lines changed

‎src/public/index.html

Lines changed: 106 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -79,6 +79,90 @@
7979
.dark .threshold-pattern-bg {
8080
background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.04) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.04) 50%, rgba(255, 255, 255, 0.04) 75%, transparent 75%, transparent);
8181
}
82+
83+
/* Mini Chart Styles */
84+
.usage-chart-container {
85+
position: relative;
86+
overflow: hidden;
87+
border-radius: 3px;
88+
background: rgba(0, 0, 0, 0.02);
89+
height: 20px;
90+
width: 100%;
91+
margin: 0;
92+
display: flex;
93+
align-items: center;
94+
justify-content: center;
95+
}
96+
.dark .usage-chart-container {
97+
background: rgba(255, 255, 255, 0.02);
98+
}
99+
100+
.sparkline-container {
101+
position: relative;
102+
overflow: hidden;
103+
border-radius: 2px;
104+
background: rgba(0, 0, 0, 0.03);
105+
height: 16px;
106+
width: 100%;
107+
margin: 0;
108+
display: flex;
109+
align-items: center;
110+
justify-content: center;
111+
}
112+
.dark .sparkline-container {
113+
background: rgba(255, 255, 255, 0.03);
114+
}
115+
116+
.mini-chart {
117+
display: block;
118+
width: 100%;
119+
height: 100%;
120+
}
121+
122+
.mini-chart path {
123+
stroke-linecap: round;
124+
stroke-linejoin: round;
125+
transition: d 0.3s ease-out, stroke-dasharray 0.3s ease-out;
126+
}
127+
128+
/* Charts mode styling */
129+
.charts-mode #main-table .usage-col,
130+
.charts-mode #main-table .net-disk-col {
131+
/* Removed text-align: center to keep metrics left-aligned */
132+
}
133+
134+
/* Reduce padding in charts mode to maximize chart space */
135+
.charts-mode #main-table .usage-col,
136+
.charts-mode #main-table .net-disk-col {
137+
padding: 2px 4px;
138+
}
139+
140+
.charts-mode .metric-text {
141+
display: none;
142+
}
143+
144+
.charts-mode .metric-chart {
145+
display: block;
146+
}
147+
148+
.metric-chart {
149+
display: none;
150+
}
151+
152+
/* Charts toggle button styling */
153+
.charts-mode #toggle-charts-button {
154+
background: rgba(59, 130, 246, 0.1);
155+
color: #3b82f6;
156+
}
157+
158+
/* Enhanced metric cell layouts */
159+
.usage-col {
160+
min-width: 120px;
161+
}
162+
163+
.net-disk-col {
164+
min-width: 70px;
165+
}
82166
</style>
83167
</head>
84168
<body class="bg-gray-100 dark:bg-gray-900 text-gray-800 dark:text-gray-200 p-2 font-sans">
@@ -148,6 +232,13 @@
148232
<button id="reset-filters-button" title="Reset Filters & Sort (Esc)" class="p-1 h-7 w-7 flex-shrink-0 rounded text-gray-500 dark:text-gray-400 hover:bg-gray-200 dark:hover:bg-gray-600 focus:outline-none">
149233
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="mx-auto"><circle cx="12" cy="12" r="10"></circle><line x1="15" y1="9" x2="9" y2="15"></line><line x1="9" y1="9" x2="15" y2="15"></line></svg>
150234
</button>
235+
<button id="toggle-charts-button" title="Toggle Charts View" class="p-1 h-7 w-7 flex-shrink-0 rounded text-gray-500 dark:text-gray-400 hover:bg-gray-200 dark:hover:bg-gray-600 focus:outline-none">
236+
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="mx-auto">
237+
<line x1="18" y1="20" x2="18" y2="10"></line>
238+
<line x1="12" y1="20" x2="12" y2="4"></line>
239+
<line x1="6" y1="20" x2="6" y2="14"></line>
240+
</svg>
241+
</button>
151242
<button id="toggle-thresholds-button" title="Toggle Threshold Filters" class="relative p-1 h-7 w-7 flex-shrink-0 rounded text-gray-500 dark:text-gray-400 hover:bg-gray-200 dark:hover:bg-gray-600 focus:outline-none">
152243
<span class="relative inline-block">
153244
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="mx-auto">
@@ -225,30 +316,30 @@
225316
<col class="name-col" style="width: var(--name-col-width, 150px);">
226317
<col class="type-col" style="width: 50px;">
227318
<col class="id-col" style="width: 50px;">
228-
<col class="uptime-col" style="width: var(--uptime-col-width, 80px);">
229-
<col class="usage-col" style="width: 150px;">
230-
<col class="usage-col" style="width: 150px;">
231-
<col class="usage-col" style="width: 150px;">
232-
<col class="net-disk-col" style="width: 80px;">
233-
<col class="net-disk-col" style="width: 80px;">
234-
<col class="net-disk-col" style="width: 80px;">
235-
<col class="net-disk-col" style="width: 80px;">
319+
<col class="uptime-col" style="width: var(--uptime-col-width, 80px);" title="Uptime">
320+
<col class="usage-col" style="width: 120px;">
321+
<col class="usage-col" style="width: 120px;">
322+
<col class="usage-col" style="width: 120px;">
323+
<col class="net-disk-col" style="width: 70px;">
324+
<col class="net-disk-col" style="width: 70px;">
325+
<col class="net-disk-col" style="width: 70px;">
326+
<col class="net-disk-col" style="width: 70px;">
236327
</colgroup>
237328
<thead class="sticky top-0 z-10 bg-gray-100 dark:bg-gray-800">
238329
<tr class="text-xs font-medium tracking-wider text-left text-gray-600 uppercase bg-gray-100 dark:bg-gray-700 dark:text-gray-300 border-b border-gray-300 dark:border-gray-600">
239330
<th class="sortable p-1 px-2" data-sort="name" style="width: var(--name-col-width, 150px);">Name</th>
240331
<th class="p-1 px-2" style="width: 50px;">Type</th>
241332
<th class="sortable p-1 px-2" data-sort="id" style="width: 50px;">ID</th>
242-
<th class="sortable p-1 px-2" data-sort="uptime" style="width: var(--uptime-col-width, 80px);">Uptime</th>
243-
<th class="sortable p-1 px-2" data-sort="cpu" style="width: 110px;">CPU</th>
244-
<th class="sortable p-1 px-2" data-sort="memory" style="width: 110px;">Memory</th>
245-
<th class="sortable p-1 px-2" data-sort="disk" style="width: 110px;">Disk</th>
333+
<th class="sortable p-1 px-2" data-sort="uptime" style="width: var(--uptime-col-width, 80px);" title="Uptime">Up</th>
334+
<th class="sortable p-1 px-2" data-sort="cpu" style="width: 120px;">CPU</th>
335+
<th class="sortable p-1 px-2" data-sort="memory" style="width: 120px;">Memory</th>
336+
<th class="sortable p-1 px-2" data-sort="disk" style="width: 120px;">Disk</th>
246337
<th class="sortable p-1 px-2" data-sort="diskread" style="width: 70px;">Read</th>
247338
<th class="sortable p-1 px-2" data-sort="diskwrite" style="width: 70px;">Write</th>
248339
<th class="sortable p-1 px-2" data-sort="netin" style="width: 70px;">Net In</th>
249340
<th class="sortable p-1 px-2" data-sort="netout" style="width: 70px;">Net Out</th>
250341
</tr>
251-
<tr id="threshold-slider-row" class="threshold-sliders text-xs border-t border-gray-200 dark:border-gray-700 hidden bg-white dark:bg-gray-800">
342+
<tr id="threshold-slider-row" class="hidden mt-3 p-3 border rounded-md bg-gray-50 dark:bg-gray-700/30 border-gray-200 dark:border-gray-600">
252343
<th class="py-1 px-2 align-middle"></th>
253344
<th class="py-1 px-1 align-middle"></th>
254345
<th class="py-1 px-2 align-middle"></th>
@@ -321,29 +412,7 @@
321412
<!-- Separator -->
322413
<hr class="border-gray-200 dark:border-gray-700 my-2">
323414

324-
<div id="log-controls-container" class="flex justify-start items-center gap-2 mt-2">
325-
<button
326-
id="start-log-button"
327-
class="px-2 py-1 text-xs rounded bg-gray-200 hover:bg-gray-300 dark:bg-gray-600 dark:hover:bg-gray-500 text-gray-700 dark:text-gray-200 flex items-center h-7"
328-
title="Start New Threshold Log"
329-
>
330-
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="mr-1"><path d="M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="12" y1="18" x2="12" y2="12"></line><line x1="9" y1="15" x2="15" y2="15"></line></svg>
331-
<span>Start Log</span>
332-
</button>
333-
<button id="clear-all-logs-button" class="hidden px-2 py-1 text-xs rounded bg-red-100 hover:bg-red-200 dark:bg-red-800/50 dark:hover:bg-red-700/50 text-red-700 dark:text-red-300 flex items-center h-7" title="Clear All Stopped Log Panels">
334-
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="mr-1"><polyline points="3 6 5 6 21 6"></polyline><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path><line x1="10" y1="11" x2="10" y2="17"></line><line x1="14" y1="11" x2="14" y2="17"></line></svg>
335-
<span>Clear Logs</span>
336-
</button>
337-
</div>
338-
</div>
339-
340-
<div id="log-session-area" class="hidden mt-4 p-3 bg-white dark:bg-gray-800 rounded shadow border border-gray-200 dark:border-gray-700">
341-
<div class="nested-tabs flex border-b border-gray-200 dark:border-gray-700 mb-2">
342-
</div>
343-
<div id="log-content-area" class="space-y-2">
344-
</div>
345415
</div>
346-
347416
</div>
348417

349418
<div id="storage" class="tab-content hidden bg-white dark:bg-gray-800 rounded-b rounded-tr shadow p-3 mb-2">
@@ -467,14 +536,15 @@
467536
<script src="/js/tooltips.js" defer></script>
468537
<script src="/js/socketHandler.js" defer></script>
469538
<script src="/js/tabs.js" defer></script>
539+
<script src="/js/charts.js" defer></script>
470540
<script src="/js/ui/thresholds.js" defer></script>
471541
<script src="/js/ui/common.js" defer></script>
472542
<script src="/js/ui/nodes.js" defer></script>
473543
<script src="/js/ui/dashboard.js" defer></script>
474544
<script src="/js/ui/storage.js" defer></script>
475545
<script src="/js/ui/pbs.js" defer></script>
476546
<script src="/js/ui/backups.js" defer></script>
477-
<script src="/js/thresholds/logging.js" defer></script>
547+
<script src="/js/alertsHandler.js"></script>
478548
<script src="/js/hotReload.js" defer></script>
479549
<script src="/js/main.js" defer></script>
480550

0 commit comments

Comments
 (0)