Skip to content

Commit f88547b

Browse files
rcourtmanrcourtman
committed
refactor(ui): Remove node group icons from UI
1 parent 1b8b59e commit f88547b

File tree

4 files changed

+65
-33
lines changed

4 files changed

+65
-33
lines changed

‎src/public/js/ui/common.js

Lines changed: 20 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -278,30 +278,36 @@ PulseApp.ui.common = (() => {
278278
}
279279

280280
function resetDashboardView() {
281+
// Reset search
281282
if (searchInput) searchInput.value = '';
282-
PulseApp.state.setSortState('main', 'id', 'asc');
283283

284-
const groupGroupedRadio = document.getElementById('group-grouped');
285-
if(groupGroupedRadio) groupGroupedRadio.checked = true;
284+
// Reset filters to defaults
286285
PulseApp.state.set('groupByNode', true);
287-
288-
const filterAllRadio = document.getElementById('filter-all');
289-
if(filterAllRadio) filterAllRadio.checked = true;
286+
document.getElementById('group-grouped').checked = true;
290287
PulseApp.state.set('filterGuestType', 'all');
291-
292-
const statusAllRadio = document.getElementById('filter-status-all');
293-
if(statusAllRadio) statusAllRadio.checked = true;
288+
document.getElementById('filter-all').checked = true;
294289
PulseApp.state.set('filterStatus', 'all');
290+
document.getElementById('filter-status-all').checked = true;
291+
292+
// Reset thresholds
293+
PulseApp.ui.thresholds.resetThresholds(); // This will also trigger a save
295294

296-
PulseApp.ui.thresholds.resetThresholds();
295+
// Update table and save states
297296
PulseApp.ui.dashboard.updateDashboardTable();
298-
if (searchInput) searchInput.blur();
299-
PulseApp.ui.thresholds.updateLogControlsVisibility();
300-
PulseApp.state.saveFilterState(); // Save reset state
297+
PulseApp.state.saveFilterState(); // Thresholds are saved by its own reset
298+
// Sort state is not reset by this action intentionally
299+
}
300+
301+
function generateNodeGroupHeaderCellHTML(text, colspan, cellTag = 'td') {
302+
const cellClasses = 'py-0.5 px-2 bg-gray-200 dark:bg-gray-700 subtle-stripes-light dark:subtle-stripes-dark text-left font-medium text-sm text-gray-700 dark:text-gray-300';
303+
return `<${cellTag} colspan="${colspan}" class="${cellClasses}">${text}</${cellTag}>`;
301304
}
302305

303306
return {
304307
init,
305-
updateSortUI
308+
updateSortUI,
309+
setupTableSorting,
310+
resetDashboardView,
311+
generateNodeGroupHeaderCellHTML
306312
};
307313
})();

‎src/public/js/ui/dashboard.js

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -274,10 +274,7 @@ PulseApp.ui.dashboard = (() => {
274274
visibleNodes.add(nodeName.toLowerCase());
275275
const nodeHeaderRow = document.createElement('tr');
276276
nodeHeaderRow.className = 'node-header bg-gray-100 dark:bg-gray-700/80 font-semibold text-gray-700 dark:text-gray-300 text-xs';
277-
nodeHeaderRow.innerHTML = `<td colspan="11" class="px-2 py-1">
278-
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="inline-block mr-1 align-middle"><rect x="2" y="2" width="20" height="8" rx="2" ry="2"></rect><rect x="2" y="14" width="20" height="8" rx="2" ry="2"></rect><line x1="6" y1="6" x2="6.01" y2="6"></line><line x1="6" y1="18" x2="6.01" y2="18"></line></svg>
279-
${nodeName}
280-
</td>`;
277+
nodeHeaderRow.innerHTML = PulseApp.ui.common.generateNodeGroupHeaderCellHTML(nodeName, 11, 'td');
281278
tableBody.appendChild(nodeHeaderRow);
282279

283280
nodeGroups[nodeName].forEach(guest => {

‎src/public/js/ui/nodes.js

Lines changed: 43 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -79,20 +79,53 @@ PulseApp.ui.nodes = (() => {
7979
console.error('Critical element #nodes-table-body not found for nodes table update!');
8080
return;
8181
}
82-
// tbody.innerHTML = ''; // Handled by renderTableBody
82+
tbody.innerHTML = ''; // Clear previous content
83+
84+
if (!nodes || nodes.length === 0) {
85+
tbody.innerHTML = '<tr><td colspan="7" class="p-4 text-center text-gray-500 dark:text-gray-400">No nodes found or data unavailable</td></tr>';
86+
return;
87+
}
88+
89+
// Group nodes by clusterIdentifier
90+
const clusters = nodes.reduce((acc, node) => {
91+
const key = node.clusterIdentifier || 'Unknown Cluster'; // Fallback for safety
92+
if (!acc[key]) {
93+
acc[key] = [];
94+
}
95+
acc[key].push(node);
96+
return acc;
97+
}, {});
8398

8499
const sortStateNodes = PulseApp.state.getSortState('nodes');
85-
const dataToDisplay = PulseApp.utils.sortData(nodes, sortStateNodes.column, sortStateNodes.direction, 'nodes');
86100

87-
// if (dataToDisplay.length === 0) { // Handled by renderTableBody
88-
// tbody.innerHTML = '<tr><td colspan="7" class="p-4 text-center text-gray-500 dark:text-gray-400">No nodes found or data unavailable</td></tr>';
89-
// return;
90-
// }
101+
// Iterate over each cluster group
102+
for (const clusterIdentifier in clusters) {
103+
if (clusters.hasOwnProperty(clusterIdentifier)) {
104+
const nodesInCluster = clusters[clusterIdentifier];
105+
// All nodes in this group should have the same endpointType, so pick from the first.
106+
// Default to 'standalone' if nodesInCluster is empty or endpointType is missing for some reason.
107+
const endpointType = (nodesInCluster && nodesInCluster.length > 0 && nodesInCluster[0].endpointType)
108+
? nodesInCluster[0].endpointType
109+
: 'standalone';
110+
111+
const iconSvg = endpointType === 'cluster'
112+
? PulseApp.ui.common.NODE_GROUP_CLUSTER_ICON_SVG
113+
: PulseApp.ui.common.NODE_GROUP_STANDALONE_ICON_SVG;
91114

92-
// Use the utility function
93-
PulseApp.utils.renderTableBody(tbody, dataToDisplay, createNodeRow, "No nodes found or data unavailable", 7);
94-
95-
// REMOVED: dataToDisplay.forEach(node => { ... tbody.appendChild(row); });
115+
const clusterHeaderRow = document.createElement('tr');
116+
// Applying base background, then overlaying with stripe pattern classes
117+
clusterHeaderRow.innerHTML = PulseApp.ui.common.generateNodeGroupHeaderCellHTML(clusterIdentifier, 7, 'th');
118+
tbody.appendChild(clusterHeaderRow);
119+
120+
// Sort nodes within this cluster group
121+
const sortedNodesInCluster = PulseApp.utils.sortData(nodesInCluster, sortStateNodes.column, sortStateNodes.direction, 'nodes');
122+
123+
sortedNodesInCluster.forEach(node => {
124+
const nodeRow = createNodeRow(node);
125+
tbody.appendChild(nodeRow);
126+
});
127+
}
128+
}
96129
}
97130

98131
return {

‎src/public/js/ui/storage.js

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -123,11 +123,7 @@ PulseApp.ui.storage = (() => {
123123

124124
const nodeHeaderRow = document.createElement('tr');
125125
nodeHeaderRow.className = 'bg-gray-100 dark:bg-gray-700/80 font-semibold text-gray-700 dark:text-gray-300 text-xs node-storage-header';
126-
nodeHeaderRow.innerHTML = `
127-
<td colspan="7" class="px-2 py-1">
128-
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="inline-block mr-1 align-middle"><rect x="2" y="2" width="20" height="8" rx="2" ry="2"></rect><rect x="2" y="14" width="20" height="8" rx="2" ry="2"></rect><line x1="6" y1="6" x2="6.01" y2="6"></line><line x1="6" y1="18" x2="6.01" y2="18"></line></svg>
129-
Node: ${nodeName}
130-
</td>`;
126+
nodeHeaderRow.innerHTML = PulseApp.ui.common.generateNodeGroupHeaderCellHTML(`Node: ${nodeName}`, 7, 'td');
131127
tbody.appendChild(nodeHeaderRow);
132128

133129
if (nodeStorageData.length === 0) {

0 commit comments

Comments
 (0)