mirror of
https://gitlab.com/wgp/dougal/software.git
synced 2025-12-06 09:47:08 +00:00
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:
@@ -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>
|
||||
|
||||
@@ -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) {
|
||||
|
||||
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user