fix(hosts): Merge filter sections into single row

This commit is contained in:
rcourtman 2025-12-12 23:43:13 +00:00
parent ca8cd0e3b4
commit c48c5b8861
2 changed files with 18 additions and 17 deletions

View file

@ -359,9 +359,7 @@ export const HostsFilter: Component<HostsFilterProps> = (props) => {
Offline Offline
</button> </button>
</div> </div>
</div>
<div class="flex flex-wrap items-center gap-2">
<Show when={props.activeHostName}> <Show when={props.activeHostName}>
<div class="flex items-center gap-1 rounded-full bg-blue-50 px-2 py-1 text-xs font-medium text-blue-700 dark:bg-blue-900/40 dark:text-blue-200"> <div class="flex items-center gap-1 rounded-full bg-blue-50 px-2 py-1 text-xs font-medium text-blue-700 dark:bg-blue-900/40 dark:text-blue-200">
<span>Host: {props.activeHostName}</span> <span>Host: {props.activeHostName}</span>

View file

@ -334,16 +334,18 @@ export function createWebSocketStore(url: string) {
try { try {
const message: WSMessage = data; const message: WSMessage = data;
if ( if (
message.type === WEBSOCKET.MESSAGE_TYPES.INITIAL_STATE || message.type === WEBSOCKET.MESSAGE_TYPES.INITIAL_STATE ||
message.type === WEBSOCKET.MESSAGE_TYPES.RAW_DATA message.type === WEBSOCKET.MESSAGE_TYPES.RAW_DATA
) { ) {
// Update state properties individually to ensure reactivity // Update state properties individually, but batch the whole payload to
if (message.data) { // reduce reactive recomputations and UI thrash on large updates.
// Mark that we've received usable data (initial payload or raw update) if (message.data) {
if (!initialDataReceived()) { batch(() => {
setInitialDataReceived(true); // Mark that we've received usable data (initial payload or raw update)
} if (!initialDataReceived()) {
setInitialDataReceived(true);
}
// Only update if we have actual data, don't overwrite with empty arrays // Only update if we have actual data, don't overwrite with empty arrays
if (message.data.nodes !== undefined) { if (message.data.nodes !== undefined) {
@ -645,11 +647,12 @@ export function createWebSocketStore(url: string) {
// Updated recentlyResolved // Updated recentlyResolved
} }
setState('lastUpdate', message.data.lastUpdate || new Date().toISOString()); setState('lastUpdate', message.data.lastUpdate || new Date().toISOString());
} });
logger.debug('message', { }
type: message.type, logger.debug('message', {
hasData: !!message.data, type: message.type,
hasData: !!message.data,
nodeCount: message.data?.nodes?.length || 0, nodeCount: message.data?.nodes?.length || 0,
vmCount: message.data?.vms?.length || 0, vmCount: message.data?.vms?.length || 0,
containerCount: message.data?.containers?.length || 0, containerCount: message.data?.containers?.length || 0,