studio/flamenco
studio/flamenco
12
30
Fork 38
Code Issues 63 Pull Requests 5 Releases Wiki Activity

Fix #99410: SocketIO Reconnect Web Interface #104235

Merged
Sybren A. Stüvel merged 8 commits from Evelinealy/flamenco:socketio-web-interface into main 2023-07-21 17:16:51 +02:00
Conversation 3 Commits 8 Files Changed 1 +25 -2
1 changed files with 25 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit eaf6fd3148 - Show all commits

27
web/app/src/App.vue
View File

@ -14,7 +14,7 @@
</li> </li>
</ul> </ul>
</nav> </nav>
<api-spinner /> <api-spinner />
<span class="app-version"> <span class="app-version">
<a :href="backendURL('/flamenco3-addon.zip')">add-on</a> <a :href="backendURL('/flamenco3-addon.zip')">add-on</a>
| <a :href="backendURL('/api/v3/swagger-ui/')">API</a> | <a :href="backendURL('/api/v3/swagger-ui/')">API</a>
@ -28,8 +28,11 @@
import * as API from '@/manager-api'; import * as API from '@/manager-api';
import { getAPIClient } from "@/api-client"; import { getAPIClient } from "@/api-client";
import { backendURL } from '@/urls'; import { backendURL } from '@/urls';
import { useSocketStatus } from '@/stores/socket-status';
import ApiSpinner from '@/components/ApiSpinner.vue' import ApiSpinner from '@/components/ApiSpinner.vue';
import UpdateListener from '@/components/UpdateListener.vue';
import ConnectionStatus from '@/components/ConnectionStatus.vue';
const DEFAULT_FLAMENCO_NAME = "Flamenco"; const DEFAULT_FLAMENCO_NAME = "Flamenco";
const DEFAULT_FLAMENCO_VERSION = "unknown"; const DEFAULT_FLAMENCO_VERSION = "unknown";
@ -38,6 +41,8 @@ export default {
name: 'App', name: 'App',
components: { components: {
ApiSpinner, ApiSpinner,
UpdateListener,
ConnectionStatus
}, },
data: () => ({ data: () => ({
flamencoName: DEFAULT_FLAMENCO_NAME, flamencoName: DEFAULT_FLAMENCO_NAME,
@ -47,6 +52,14 @@ export default {
mounted() { mounted() {
window.app = this; window.app = this;
this.fetchManagerInfo(); this.fetchManagerInfo();
const sockStatus = useSocketStatus();
this.$watch(() => sockStatus.isConnected, (isConnected) => {
if (isConnected) {
dr.sybren marked this conversation as resolved
Sybren A. Stüvel commented 2023-07-20 11:32:50 +02:00
Review
Copy Link

This should also check sockStatus.wasEverDisconnected, otherwise it'll also respond to the initial connection.

This should also check `sockStatus.wasEverDisconnected`, otherwise it'll also respond to the initial connection.
this.socketIOReconnect();
}
});
}, },
methods: { methods: {
// TODO: also call this when SocketIO reconnects. // TODO: also call this when SocketIO reconnects.
@ -57,6 +70,16 @@ export default {
this.flamencoVersion = version.version; this.flamencoVersion = version.version;
}) })
}, },
socketIOReconnect() {
this.fetchManagerInfo()
dr.sybren marked this conversation as resolved Outdated
Sybren A. Stüvel commented 2023-07-20 11:33:36 +02:00
Outdated
Review
Copy Link

This function shouldn't be called here, as it does too much. It not only fetches the current version, but also writes to this.flamencoVersion. This means that it overwrites the value that you want to compare against.

Comparing with DEFAULT_FLAMENCO_VERSION is always going to result in a difference, as the Manager will never return the string 'unknown'.

This function shouldn't be called here, as it does too much. It not only fetches the current version, but also writes to `this.flamencoVersion`. This means that it overwrites the value that you want to compare against. Comparing with `DEFAULT_FLAMENCO_VERSION` is *always* going to result in a difference, as the Manager will never return the string 'unknown'.
if (this.flamencoVersion !== DEFAULT_FLAMENCO_VERSION || this.flamencoName !== DEFAULT_FLAMENCO_NAME ) {
console.log(`Upgraded Flamenco Version: ${this.flamencoVersion}`);
Sybren A. Stüvel commented 2023-07-20 11:35:18 +02:00
Outdated
Review
Copy Link

For debugging, it's better to log both versions here: the one that was stored on the webapp startup, and the one that was found now. That way you can see "upgraded from X to Y" in the JS console.

For debugging, it's better to log both versions here: the one that was stored on the webapp startup, and the one that was found now. That way you can see "upgraded from X to Y" in the JS console.
// Reload the page
location.reload();
}
}
}, },
} }
</script> </script>