Web: show Flamenco name & version in header

web/app/src/App.vue

@@ -1,5 +1,5 @@
 <template>
-  <header>Flamenco</header>
+  <header>{{ flamencoName }}<span class='flamenco-version'>version: {{ flamencoVersion }}</span></header>
   <div class="col-1">
     <jobs-table ref="jobsTable" :apiClient="apiClient" @activeJobChange="onActiveJobChanged" />
   </div>
@@ -11,18 +11,21 @@
   </div>
   <footer>Footer
     <update-listener ref="updateListener" :websocketURL="websocketURL" @jobUpdate="onJobUpdate" @message="onChatMessage"
-      @reconnected="onReconnected" />
+      @sioReconnected="onSIOReconnected" @sioDisconnected="onSIODisconnected" />
   </footer>
 </template>
 
 <script>
 import * as urls from './urls'
-import { ApiClient } from './manager-api';
+import * as API from './manager-api';
 import JobsTable from './components/JobsTable.vue'
 import JobDetails from './components/JobDetails.vue'
 import TaskDetails from './components/TaskDetails.vue'
 import UpdateListener from './components/UpdateListener.vue'
 
+const DEFAULT_FLAMENCO_NAME = "Flamenco";
+const DEFAULT_FLAMENCO_VERSION = "unknown";
+
 export default {
   name: 'App',
   components: {
@@ -30,14 +33,18 @@ export default {
   },
   data: () => {
     return {
-      apiClient: new ApiClient(urls.api()),
+      apiClient: new API.ApiClient(urls.api()),
       websocketURL: urls.ws(),
       messages: [],
 
       activeJobSummary: {},
+      flamencoName: DEFAULT_FLAMENCO_NAME,
+      flamencoVersion: DEFAULT_FLAMENCO_VERSION,
     };
   },
-  mounted() { },
+  mounted() {
+    this.fetchManagerInfo();
+  },
   methods: {
     // UI component event handlers:
     onActiveJobChanged(jobSummary) {
@@ -45,7 +52,7 @@ export default {
       this.activeJobSummary = jobSummary;
     },
 
-    // SocketIO event handlers:
+    // SocketIO data event handlers:
     sendMessage(message) {
       this.$refs.jobsListener.sendBroadcastMessage("typer", message);
     },
@@ -63,9 +70,24 @@ export default {
       console.log("chat message received:", message);
       this.messages.push(`${message.text}`);
     },
-    onReconnected() {
-      this.$refs.jobsTable.onReconnected();
+
+    // SocketIO connection event handlers:
+    onSIOReconnected() {
+      this.$refs.jobsTable.onSIOReconnected();
+      this.fetchManagerInfo();
     },
+    onSIODisconnected(reason) {
+      this.flamencoName = DEFAULT_FLAMENCO_NAME;
+      this.flamencoVersion = DEFAULT_FLAMENCO_VERSION;
+    },
+    fetchManagerInfo() {
+      const metaAPI = new API.MetaApi(this.apiClient);
+      metaAPI.getVersion().then((version) => {
+        console.log("version:", version);
+        this.flamencoName = version.name;
+        this.flamencoVersion = version.version;
+      })
+    }
   },
 }
 </script>
@@ -101,6 +123,11 @@ header {
   color: #EEE;
 }
 
+header span.flamenco-version {
+  float: right;
+  font-size: small;
+}
+
 h2.column-title {
   margin-top: 0;
   font-size: 12pt;

web/app/src/components/UpdateListener.vue

@@ -7,7 +7,12 @@ import io from "socket.io-client";
 import * as API from "../manager-api"
 
 export default {
-  emits: ["jobUpdate", "taskUpdate", "message", "reconnected"],
+  emits: [
+    // Data from Flamenco Manager:
+    "jobUpdate", "taskUpdate", "message",
+    // SocketIO events:
+    "sioReconnected", "sioDisconnected"
+  ],
   props: ["websocketURL"],
   data() {
     return {
@@ -42,9 +47,13 @@ export default {
         console.log("socketIO connection timeout:", timeout);
       });
 
+      this.socket.on("disconnect", (reason) => {
+        console.log("socketIO disconnected:", reason);
+        this.$emit("sioDisconnected", reason);
+      });
       this.socket.on("reconnect", (attemptNumber) => {
         console.log("socketIO reconnected after", attemptNumber, "attempts");
-        this.$emit("reconnected");
+        this.$emit("sioReconnected", attemptNumber);
       });
 
       this.socket.on("/jobs", (jobUpdate) => {