Let the user know when using a remote frontend.

Note: this relies on the gateway Nginx server configurations
including an X-Dougal-Server header, as follows:

add_header X-Dougal-Server "remote-frontend" always;
This commit is contained in:
D. Berge
2025-08-07 12:30:28 +02:00
parent 6629e25644
commit 99b1a841c5
3 changed files with 34 additions and 4 deletions

View File

@@ -9,8 +9,14 @@
<v-spacer></v-spacer>
<v-icon v-if="serverConnected" class="mr-6" small title="Connected to server">mdi-lan-connect</v-icon>
<v-icon v-else class="mr-6" small color="red" title="Server connection lost (we'll reconnect automatically when the server comes back)">mdi-lan-disconnect</v-icon>
<template v-if="isFrontendRemote">
<v-icon v-if="serverConnected" class="mr-6" title="Connected to server via gateway">mdi-cloud-outline</v-icon>
<v-icon v-else class="mr-6" color="red" :title="`Server connection lost: the gateway cannot reach the remote server.\nWe will reconnect automatically when the connection with the remote server is restored.`">mdi-cloud-off</v-icon>
</template>
<template v-else>
<v-icon v-if="serverConnected" class="mr-6" small title="Connected to server">mdi-lan-connect</v-icon>
<v-icon v-else class="mr-6" small color="red" :title="`Server connection lost.\nWe will reconnect automatically when the server comes back.`">mdi-lan-disconnect</v-icon>
</template>
<dougal-notifications-control class="mr-6"></dougal-notifications-control>
@@ -57,7 +63,10 @@ export default {
return date.getUTCFullYear();
},
...mapState({serverConnected: state => state.notify.serverConnected})
...mapState({
serverConnected: state => state.notify.serverConnected,
isFrontendRemote: state => state.api.serverInfo?.["remote-frontend"] ?? false
})
}
};
</script>

View File

@@ -79,6 +79,26 @@ async function api ({state, getters, commit, dispatch}, [resource, init = {}, cb
await cb(null, res.clone());
}
if (res.headers.has("x-dougal-server")) {
const header = res.headers.get("x-dougal-server")
const entries = header
.split(";")
.map(part => part.trim())
.filter(part => part.length > 0)
.map(part => {
const idx = part.indexOf('=');
if (idx === -1) {
return [part, true];
}
const key = part.slice(0, idx).trim();
const value = part.slice(idx + 1).trim();
return [key, value];
});
state.serverInfo = entries.length ? Object.fromEntries(entries) : {};
console.log("ENTRIES", entries);
console.log("SERVER INFO", state.serverInfo);
}
if (res.ok) {
if (!isCached) {

View File

@@ -1,7 +1,8 @@
const state = () => ({
apiUrl: "/api",
requestsCount: 0,
maxConcurrent: 15
maxConcurrent: 15,
serverInfo: {} // Contents of the last received X-Dougal-Server HTTP header
});
export default state;