Fix stale identifier flags: refresh composable on Settings toggle

The identifier-flags composable fetched settings once and cached them in a
module singleton, so toggling an identifier in Settings (gauge/maintenance/FQDN
per asset type) did not take effect on already-open asset views until a full
page reload. Disabled identifiers kept showing.

- identifierSettings.js: extract applySetting/fetchFlags; export
  reloadIdentifierFlags() and setIdentifierFlag(name, assettype, enabled) to
  mutate the shared reactive state.
- SystemSettings.vue: push each successful matrix toggle into the shared state
  via setIdentifierFlag so dependent views react immediately.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
cproudlock
2026-06-26 19:43:22 -04:00
parent 5fa5160420
commit ccead771e6
2 changed files with 43 additions and 19 deletions

View File

@@ -14,26 +14,46 @@ const state = reactive({
let inflight = null
function loadFlags() {
if (!state.loaded && !inflight) {
inflight = settingsApi.list()
.then(({ data }) => {
;(data.data || []).forEach(s => {
const match = /^identifier_(.+?)(?:_(equipment|computer|printer|network_device))?_enabled$/.exec(s.key)
const KEY_RE = /^identifier_(.+?)(?:_(equipment|computer|printer|network_device))?_enabled$/
function applySetting(key, value) {
const match = KEY_RE.exec(key)
if (!match) return
const name = match[1]
const assettype = match[2]
if (assettype) {
if (!state.scope[name]) state.scope[name] = {}
state.scope[name][assettype] = s.value !== false
state.scope[name][assettype] = value !== false
} else {
state.legacy[name] = s.value !== false
state.legacy[name] = value !== false
}
})
}
function fetchFlags() {
inflight = settingsApi.list()
.then(({ data }) => {
;(data.data || []).forEach(s => applySetting(s.key, s.value))
state.loaded = true
})
.catch(() => { state.loaded = true })
}
.finally(() => { inflight = null })
return inflight
}
function loadFlags() {
if (!state.loaded && !inflight) fetchFlags()
}
// Re-read flags from the server. Call after an identifier setting changes so
// other open views pick it up without a full page reload.
export function reloadIdentifierFlags() {
return fetchFlags()
}
// Optimistically update one flag in the shared state (e.g. right after a
// Settings toggle) so dependent views react immediately.
export function setIdentifierFlag(name, assettype, enabled) {
applySetting(`identifier_${name}_${assettype}_enabled`, enabled)
}
// True when identifier `name` should show on `assettype`. Per-type flag wins,

View File

@@ -423,6 +423,7 @@
<script setup>
import { ref, reactive, onMounted, computed } from 'vue'
import { settingsApi } from '../../api'
import { setIdentifierFlag } from '../../composables/identifierSettings'
const settings = reactive({
// Zabbix
@@ -577,6 +578,9 @@ async function toggleIdentifier(name, assettype) {
}
}
identifierMatrix[key] = newValue
// Push into the shared composable so open asset views react without a
// full page reload (the composable otherwise fetches only once).
setIdentifierFlag(name, assettype, newValue)
success.value = 'Setting saved'
setTimeout(() => { success.value = '' }, 2000)
} catch (e) {