Fix #99410: SocketIO Reconnect Web Interface #104235

Eveline Anderson · 2023-07-13T20:14:51+02:00

Eveline Anderson commented

2023-07-13 20:14:51 +02:00

Fix #99410: Web interface: fetch version on SocketIO reconnect (and maybe reload)

A feature implement where after losing the SocketIO connection and subsequently reconnecting, the webapp should re-fetch the Flamenco Manager version and display it in the top-right corner. If it's different from before, then it will log a notification about the upgrade and refresh the entire page to ensure the new version is loaded properly.

Fix #99410: Web interface: fetch version on SocketIO reconnect (and maybe reload) A feature implement where after losing the SocketIO connection and subsequently reconnecting, the webapp should re-fetch the Flamenco Manager version and display it in the top-right corner. If it's different from before, then it will log a notification about the upgrade and refresh the entire page to ensure the new version is loaded properly.

Eveline Anderson added 1 commit 2023-07-13 20:14:54 +02:00

cd1011066f Retrieve current Flamenco version

Eveline Anderson changed title from ~~WIP: SocketIO Reconnect Web Interface~~ to WIP: Fix #99410: SocketIO Reconnect Web Interface

2023-07-13 20:16:12 +02:00

Eveline Anderson commented

2023-07-13 20:18:01 +02:00

The WIP is just to show that I haven't finished yet, but I wanted to put up a small change so you could guide me in the right direction. I do believe I'm in the right file. I am actively working on this and hope to finish by tomorrow or Monday (depending on my schedule). We can talk more on the call, though.

Sybren A. Stüvel reviewed 2023-07-17 11:01:45 +02:00

Sybren A. Stüvel left a comment

I think the code is ok, but it shouldn't be in JobsView.vue. This behaviour should be implemented for the entire web interface, and not just for the "Jobs" tab. Putting this in App.vue would be better. There is already code there that can fetch the Flamenco version. I think a good approach would be:

Write a function that's hooked up such that it's automatically called whenever the SocketIO connection comes back.
Make that fetch the version from the Manager, and compare it to this.flamencoVersion and this.flamencoName to see if a reload is necessary.

I think the code is ok, but it shouldn't be in `JobsView.vue`. This behaviour should be implemented for the entire web interface, and not just for the "Jobs" tab. Putting this in `App.vue` would be better. There is already code there that can fetch the Flamenco version. I think a good approach would be: - Write a function that's hooked up such that it's automatically called whenever the SocketIO connection comes back. - Make that fetch the version from the Manager, and compare it to `this.flamencoVersion` and `this.flamencoName` to see if a reload is necessary.

Eveline Anderson added 1 commit 2023-07-18 19:40:59 +02:00

93b8cd6540 Revert changes in JobsView to original file

Eveline Anderson added 1 commit 2023-07-18 19:43:56 +02:00

6ffc5d4599 Merge remote-tracking branch 'upstream/main' into socketio-web-interface

Eveline Anderson added 1 commit 2023-07-18 19:52:42 +02:00

365cb5164b Add SocketIO reconnection function and version check

Eveline Anderson changed title from ~~WIP: Fix #99410: SocketIO Reconnect Web Interface~~ to Fix #99410: SocketIO Reconnect Web Interface

2023-07-18 19:53:26 +02:00

Eveline Anderson added 1 commit 2023-07-18 20:39:55 +02:00

77325b4a90 Revert "Add SocketIO reconnection function and version check"

This reverts commit 365cb5164b.

Eveline Anderson added 38 commits 2023-07-18 20:53:43 +02:00

5110a9e621 Cleanup: reformat all Go files

Run `go fmt` on all files, to fix their formatting.

No functional changes.

65c6783089 OAPI: rename worker 'cluster' to 'tag'

This implements the OpenAPI changes necessary for the rename.

See #104204

Reviewed-on: #104223

9ef7a3f2dd OAPI: regenerate code

81fa3efcf9 Rename worker 'clusters' to 'tags'

As it was decided that the name "tags" would be better for the clarity
of the feature, all files and code named "cluster" or "worker cluster"
have been removed and replaced with "tag" and "worker tag". This is only
a name change, no other features were touched.

This addresses part of #104204.

Reviewed-on: #104223

As a note to anyone who already ran a pre-release version of Flamenco
and configured some worker clusters, with the help of an SQLite client
you can migrate the clusters to tags. First build Flamenco Manager and
start it, to create the new database schema. Then run these SQL queries
via an sqlite commandline client:

```sql
insert into worker_tags
    (id, created_at, updated_at, uuid, name, description)
  select id, created_at, updated_at, uuid, name, description
  from worker_clusters;

insert into worker_tag_membership (worker_tag_id, worker_id)
  select worker_cluster_id, worker_id from worker_cluster_membership;
```

3daf8cae15 Deployment: make backup of SQLite database before every deploy

Every time Flamenco Manager is shut down in order to upgrade, a database
copy is made.

8b9888f4d9 Manager: avoid recreation of Worker table at startup

Mark the default value of `Worker.LazyStatusRequest` as `false`. The
previous default was configured as `0`, which was different enough to
always trigger a database migration of that column. However, since these
values do map to each other, the migration didn't do anything concrete,
and would be triggered again at the next startup.

8ff0211fc6 Manager: disable SQLite foreign key constraints when migrating the database

There is an issue with the GORM auto-migration, in that it doesn't
always disable foreign key constraints when it should. Due to
limitations of SQLite, not all 'alter table' commands you'd want to use
are available. As a workaround, these steps are performed:

1. create a new table with the desired schema,
2. copy the data over,
3. drop the old table,
4. rename the new table to the old name.

Step #3 will wreak havoc with the database when foreign key constraint
checks are active, so no we temporarily deactivate them while performing
database migration.

b37ce5d013 Add CLI utility to recreate tasks of jobs

Due to an issue (which has been fixed in the previous commit), all tasks
in the database were deleted when starting Flamenco. This tool attempts
to recompile the job and recreate its tasks.

The statuses of the tasks are set based on the job status. Basically:

- job active → tasks queued
- job completed → tasks completed
- job cancelled / failed → tasks cancelled
- otherwise → tasks queued

To ensure that the tool is only used to create tasks from scratch, it
refuses to work on a job that still has tasks in the database.

78d4972905 Git-ignore .vscode/launch.json

fb681a6499 Worker: Point users to docs if worker cannot find Blender

When the Worker cannot find Blender when it starts, provide a more
helpful message + a link to the relevant documentation.

Reviewed-on: #104230

fa95e846be Web: add some technical details to the socketIO documentation

Add technical details to explain which part of the SocketIO-based broadcast
system is implemented where in the source code.

2087e1eaba Web: more SocketIO documentation

Add that the OpenAPI specs also define the structures used for SocketIO
communication.

c9cb983e9f .gitattributes: explicitly denote specific file extensions as 'text'

Configure auto-clrf for all text files. This should make it simpler to
develop Flamenco on Windows, as it makes Git depend less on its global
settings.

e502504f34 OAPI: add option to make a job setting auto-evaluatable by the user

Add a new job setting option `autoevalLockable`. Setting this to `true` in
the job compiler's `JOB_TYPE` settings has the following effect:

- By default, the setting will not be editable in Blender's job submission
  interface. Instead, a toggle button with a 'car' icon will be shown.
- When the 'car' button is toggled off, the setting becomes editable again.

In its default, uneditable state, the setting will be auto-evaluated before
submission.

This makes it possible to 'lock in' auto-evaluation. The main use case is
for the frame range of the render job. By default this will be locked to
the scene frame range, but it can still be overridden if a different
range is wanted.

This commit just contains the necessary OpenAPI change.

a89ac4404a OAPI: regenerate code

5c44bde0af Add option to make a job setting auto-evaluatable by the user

Add a new job setting option `autoevalLockable`. Setting this to `true` in
the job compiler's `JOB_TYPE` settings has the following effect:

- By default, the setting will not be editable in Blender's job submission
  interface. Instead, a toggle button with a 'car' icon will be shown.
- When the 'car' button is toggled off, the setting becomes editable again.

In its default, uneditable state, the setting will be auto-evaluated before
submission.

This makes it possible to 'lock in' auto-evaluation. The main use case is
for the frame range of the render job. By default this will be locked to
the scene frame range, but it can still be overridden if a different
range is wanted.

b36fdeb96d Add-on: remove accidental debug print

9a4213f97c Add-on: silence mypy error

Mypy doesn't know the `bl-rna` property exists.

No functional changes.

1ecc432eae OAPI: refactor how 'eval-on-submit' settings are configured

Refactor the job settings. The `autoevalLockable` boolean is now
replaced with an `evalOnSubmit` nested object:

```
  evalOnSubmit: {
    showButton: true,
    placeholder: "Scene frame range",
  },
```

This makes it possible to add a placeholder text, and later maybe some
other parameters. The `showButton: true` part always has to be there, as
the entire feature is disabled with `showButton: false`, in which case
it's better to just remove the entire `evalOnSubmit` sub-object
altogether. Still, I think it's preferred to have that `showButton:
true` in there, as it makes it more explicit what this section of the
settings is for.

This commit just contains the OpenAPI definition.

3cc024d4c3 OAPI: regenerate code

96b952ba34 Eval-on-submit job settings: improve GUI in the add-on

Improve the usability of the 'eval-on-submit' toggle button:

- Add a placeholder text that can be shown instead of the input field. This
  can be used to describe what the evaluated Python code will do. In the
  case of the 'Simple Blender Render' job, this is set to 'Scene frame
  range'.
- Change the way in which the job type has to declare this, both for
  clarity and to add the extra placeholder string

241d3a74f0 OAPI: yet another refactor of 'eval-on-submit' behavior for job settings

The data is still the same, but the names of the properties have changed
a bit so that they're more generic, declarative, instead of specific to
one bit of functionality.

The goal is to have the `evalInfo.description` field usable for the
'evaluate now' button in the add-on as well. That way it should be
clearer what that does.

This commit just updates the OpenAPI definition.

3dcba2b688 OAPI: regenerate code

1b01fa5d97 Use new property names for 'use automatic values' button

Adjustment of the job settings property names, making them more widely
usable than just the 'use automatic values' button (also known as
'eval-on-submit').

a7eb4d26ca Add-on: use the 'eval' description in the 'eval now' button as well

In the tooltip of the 'evaluate now' button (the one with the Python
icon), include the description provided by the job type in its
`evalInfo.description` field. This makes it explicit what the button
will do when pressed.

0cada0266a Update CHANGELOG

e6113569d0 Worker: make `-version` CLI option show the 'extended' version

`flamenco-worker -version` now shows the 'extended' version. This is just
the application version when running a release build. Otherwise it will
be like `3.3-alpha0 (v3.2-nn-ghhhhhh)`, where `nn` is the number of commits
since the last-tagged version (`v3.2` in this example), and `ghhhhhh` is
the Git hash. This can optionally be suffixed by `-dirty` if there were
any uncommitted changes when Flamenco was built.

4be619732f Manager: better logging of schedule changes

Log more details of schedule changes, from within the sleep scheduler
(instead of the API implementation).

8e5e467aab Manager: perform database integrity check every hour

Perform a database integrity check every hour. This check was already
performed at startup, in the main goroutine.

2bd9d5404a Manager: improve logging of database consistency checks

The log messages now all start with `database: `.

No functional changes.

872c5dddd2 Manager: make periodic database integrity check configurable

Instead of always performing the periodic integrity check, make it possible
to disable it or run it at different intervals.

Currently for the Blender Studio it's crunch time, so the check should
really only run when there is someone looking at the system (i.e. at
restarts for upgrade purposes).

72bb201a6c CHANGELOG: add database integrity checks

Document that the checks are there, and that the periodic checking can
be configured.

6feb11568f Add SocketIO reconnection function and version check

5796b629fb Revert "Add SocketIO reconnection function and version check"

This reverts commit 365cb5164b.

235fc3ce5a Add SocketIO reconnection function and version check

7ee095b16c Revert "Add SocketIO reconnection function and version check"

This reverts commit 365cb5164b.

0df8839cdc Add SocketIO reconnection function and version check

4a5c9bacae Merge branch 'socketio-web-interface' of projects.blender.org:Evelinealy/flamenco into socketio-web-interface

Eveline Anderson added 1 commit 2023-07-18 21:03:05 +02:00

88cce2258e Implement function for version check

Eveline Anderson commented

2023-07-18 21:20:42 +02:00

I don't even want to begin to address all these commits... I messed up with the git pull. So, for now, until if I figure out the best way to squash this without deleting anybody's progress, I'll just write what I did in here (it's very small).

This is the hardest part and I'm still not 100% sure with SocketIO, but in the mounting, I was just trying to get some sort of connection to make an event listener. It was originally named "$socket" for a placeholder, but then I changed it to socketURL.

mounted() {
    const socketURL = 'http://localhost:8000' // TODO: Replace with Flamenco's server;
    this.socket = io(socketURL);
    this.socket.on('reconnect', this.socketIOReconnect);
}

This part was easier and does the actual job of verifying the job.

     socketIOReconnect() {
      this.fetchManagerInfo()

      if (this.flamencoVersion !== DEFAULT_FLAMENCO_VERSION || 
          this.flamencoName !== DEFAULT_FLAMENCO_NAME ) {
        console.log(`Upgraded Flamenco Version: ${this.flamencoVersion}`);

        // Reload the page,
        location.reload();
      }
    }

The biggest question I have is with is checking that socket. I know the first code block I provided is wrong, but I'm still trying to figure out how to get it to automatically check the socket's connection. I was looking at the https://socket.io/docs/v2/ to get some sort of picture of how I could get it.

Let me know what you think!

I don't even want to begin to address all these commits... I messed up with the git pull. So, for now, until if I figure out the best way to squash this without deleting anybody's progress, I'll just write what I did in here (it's very small). This is the hardest part and I'm still not 100% sure with SocketIO, but in the mounting, I was just trying to get some sort of connection to make an event listener. It was originally named "$socket" for a placeholder, but then I changed it to socketURL. ``` mounted() { const socketURL = 'http://localhost:8000' // TODO: Replace with Flamenco's server; this.socket = io(socketURL); this.socket.on('reconnect', this.socketIOReconnect); } ``` This part was easier and does the actual job of verifying the job. ``` socketIOReconnect() { this.fetchManagerInfo() if (this.flamencoVersion !== DEFAULT_FLAMENCO_VERSION || this.flamencoName !== DEFAULT_FLAMENCO_NAME ) { console.log(`Upgraded Flamenco Version: ${this.flamencoVersion}`); // Reload the page, location.reload(); } } ``` The biggest question I have is with is checking that socket. I know the first code block I provided is wrong, but I'm still trying to figure out how to get it to automatically check the socket's connection. I was looking at the https://socket.io/docs/v2/ to get some sort of picture of how I could get it. Let me know what you think!

Eveline Anderson added 1 commit 2023-07-18 23:26:31 +02:00

33c17dd41a Revert 0df8839cdc

Eveline Anderson force-pushed socketio-web-interface from 33c17dd41a to 88cce2258e

2023-07-18 23:40:36 +02:00

Compare

Sybren A. Stüvel reviewed 2023-07-19 17:09:32 +02:00

Sybren A. Stüvel left a comment

There are a few issues with the code as it is now.

The code creates a new SocketIO connection, where it should be responding to the reconnection of the already-existing SocketIO connection.

There's two ways to go about this:

There is a component that provides SocketIO connection info (stores/socket-status.js) which is used by components/ConnectionStatus.vue (i.e. const sockStatus = useSocketStatus();). Once you have the sockStatus object, its isConnected needs to be monitored / watched via Vue's reactivity system.
Let the 'views' that contain an UpdateListener component emit a sioReconnected event to bubble that event up to the Vue App, and write an event handler that deals with this.

There are a few issues with the code as it is now. The code creates a new SocketIO connection, where it should be responding to the reconnection of the already-existing SocketIO connection. There's two ways to go about this: 1. There is a component that provides SocketIO connection info (`stores/socket-status.js`) which is used by `components/ConnectionStatus.vue` (i.e. `const sockStatus = useSocketStatus();`). Once you have the `sockStatus` object, its `isConnected` needs to be monitored / watched via Vue's reactivity system. 2. Let the 'views' that contain an `UpdateListener` component emit a `sioReconnected` event to bubble that event up to the Vue App, and write an event handler that deals with this.

Eveline Anderson force-pushed socketio-web-interface from 88cce2258e to cd1011066f

2023-07-19 19:20:25 +02:00

Compare

Eveline Anderson added 1 commit 2023-07-19 19:22:33 +02:00

65ad945ffb Merge remote-tracking branch 'upstream/main' into socketio-web-interface

Eveline Anderson added 1 commit 2023-07-19 19:24:26 +02:00

7fec955873 Revert changes of JobsView to original

Eveline Anderson added 1 commit 2023-07-19 22:18:48 +02:00

eaf6fd3148 Add SocketIO reconnection and version check

Eveline Anderson commented

2023-07-19 22:30:11 +02:00

I think I worked out the commit issue. It wouldn't do much for the merge, so I did a reset, and then updated it to Flamenco's most recent branch. It seemed to do the trick for now, but I wanted to focus on the actual code. I also redid the writing of the socket connection, since it was making a new one. I did what you said and used the useSocketStatus() from the socket-status.js file. The way it was implemented (this.watch) was based off of something I read on google, so I'm not 100% confident in its ability, but my goal is to make it reactive and execute the socketIOReconnect() when the connection has been reestablished. So, I'm hoping that is what is accomplished.

I didn't do any changes to the socketIOReconnect(), so it's the same functionality as before. Do you think I should rename it to a better name? I'm not very happy with the current name "socketIOReconnect"... I think the name I chose could be a bit more clearer...

Thank you for being patient as well, I was really messed up from git, so I will try to do better to be more careful when using it as well.

I think I worked out the commit issue. It wouldn't do much for the merge, so I did a reset, and then updated it to Flamenco's most recent branch. It seemed to do the trick for now, but I wanted to focus on the actual code. I also redid the writing of the socket connection, since it was making a new one. I did what you said and used the `useSocketStatus()` from the `socket-status.js` file. The way it was implemented (`this.watch`) was based off of something I read on google, so I'm not 100% confident in its ability, but my goal is to make it reactive and execute the `socketIOReconnect()` when the connection has been reestablished. So, I'm hoping that is what is accomplished. I didn't do any changes to the `socketIOReconnect()`, so it's the same functionality as before. Do you think I should rename it to a better name? I'm not very happy with the current name "socketIOReconnect"... I think the name I chose could be a bit more clearer... Thank you for being patient as well, I was really messed up from git, so I will try to do better to be more careful when using it as well.

Sybren A. Stüvel requested changes 2023-07-20 11:36:20 +02:00

Sybren A. Stüvel left a comment

I'm not 100% confident in its ability

👍 for being sceptical about the code you find online :)

It's easy enough to test that things work -- just stop & restart Flamenco Manager, and the web interface should indicate a disconnect & a subsequent reconnect.

Before worrying about naming, focus on getting the functionality working. Once it works, and you have a better understanding of how things click together, you'll also have a better idea for the names.

> I'm not 100% confident in its ability :+1: for being sceptical about the code you find online :) It's easy enough to test that things work -- just stop & restart Flamenco Manager, and the web interface should indicate a disconnect & a subsequent reconnect. Before worrying about naming, focus on getting the functionality working. Once it works, and you have a better understanding of how things click together, you'll also have a better idea for the names.

web/app/src/App.vue

						
				@ -50,0 +55,4 @@

				    const sockStatus = useSocketStatus();

				    this.$watch(() => sockStatus.isConnected, (isConnected) => {

				      if (isConnected) {

Sybren A. Stüvel commented

2023-07-20 11:32:50 +02:00

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.

dr.sybren marked this conversation as resolved

web/app/src/App.vue Outdated

						
				@ -59,1 +72,4 @@

				    },

				    socketIOReconnect() {

				      this.fetchManagerInfo()

Sybren A. Stüvel commented

2023-07-20 11:33:36 +02:00

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'.

dr.sybren marked this conversation as resolved

web/app/src/App.vue Outdated

						
				@ -60,0 +74,4 @@

				    socketIOReconnect() {

				      this.fetchManagerInfo()

				      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

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.