Configurable name in dashboard

Now the title & version is also dynamically updated with Vue.

flamenco-manager-example.yaml

@@ -125,3 +125,6 @@ test_tasks:
 
         # The location where the Worker will save the rendered frame.
         render_output: '{render}/_flamenco/tests/renders'
+
+# Name of this Manager shown on the dashboard.
+manager_name: "Flamenco Manager"

flamenco/dashboard.go

@@ -186,6 +186,8 @@ func (dash *Dashboard) sendStatusReport(w http.ResponseWriter, r *http.Request)
 		UpstreamQueueSize: upstreamQueueSize,
 		Version:           dash.flamencoVersion,
 		Workers:           workers,
+		ManagerMode:       dash.config.Mode,
+		ManagerName:       dash.config.ManagerName,
 	}
 	statusreport.Server.Name = dash.serverName
 	statusreport.Server.URL = dash.serverURL

flamenco/documents.go

@@ -223,6 +223,8 @@ type StatusReport struct {
 	UpstreamQueueSize int      `json:"upstream_queue_size"`
 	Version           string   `json:"version"`
 	Workers           []Worker `json:"workers"`
+	ManagerName       string   `json:"manager_name"`
+	ManagerMode       string   `json:"manager_mode"` // either "develop" or "production", see settings.go Conf.Mode.
 	Server            struct {
 		Name string `json:"name"`
 		URL  string `json:"url"`

flamenco/settings.go

@@ -46,6 +46,7 @@ type TestTasks struct {
 // Conf represents the Manager's configuration file.
 type Conf struct {
 	Mode          string   `yaml:"mode"` // either "develop" or "production"
+	ManagerName   string   `yaml:"manager_name"`
 	DatabaseURL   string   `yaml:"database_url"`
 	DatabasePath  string   `yaml:"database_path"`
 	TaskLogsPath  string   `yaml:"task_logs_path"`
@@ -115,6 +116,7 @@ func LoadConf(filename string) (Conf, error) {
 	// Construct the struct with some more or less sensible defaults.
 	c := Conf{
 		Mode:                        "production",
+		ManagerName:                 "Flamenco Manager",
 		Listen:                      ":8083",
 		DatabasePath:                "./db",
 		TaskLogsPath:                "./task-logs",

static/dashboard.js

@@ -68,6 +68,11 @@ WORKER_ACTIONS = Object.freeze({
     },
 });
 
+Vue.component('page-header', {
+    props: ['serverinfo'],
+    template: '#template_header',
+});
+
 Vue.component('status', {
     props: ['serverinfo', 'errormsg', 'idle_workers'],
     template: '#template_status',
@@ -361,6 +366,8 @@ var vueApp = new Vue({
                 name: "unknown",
                 url: "#",
             },
+            manager_name: "Flamenco Manager",
+            manager_mode: "",
         },
         idle_workers: [],
         current_workers: [],
@@ -368,7 +375,7 @@ var vueApp = new Vue({
     },
     computed: {
         all_workers_selected: function() {
-            return this.current_workers.length && this.current_workers.length == this.selected_worker_ids.length;
+            return Boolean(this.current_workers.length && this.current_workers.length == this.selected_worker_ids.length);
         },
     },
     methods: {
@@ -385,6 +392,7 @@ var vueApp = new Vue({
                         if (!this.serverinfo.hasOwnProperty(key)) continue;
                         this.serverinfo[key] = info[key];
                     }
+                    document.title = this.serverinfo.manager_name + " " + this.serverinfo.version;
 
                     // Split workers into "current" and "idle for too long"
                     let too_long = 14 * 24 * 3600000; // in milliseconds

static/vue-components.html

@@ -1,5 +1,14 @@
 <!-- Templates for the Vue.js components -->
 
+<!-- template for the 'header' Vue.js component -->
+<script type='text/x-template' id='template_header'>
+    <header class='pageheader'><h1><img src='/static/flamenco.png' alt='Flamenco logo'> {{ serverinfo.manager_name }}
+        <span id='runmode' v-if="serverinfo.manager_mode != 'production'">({{ serverinfo.manager_mode }} mode)</span>
+        <span id='managerversion'>{{ serverinfo.version }}</span>
+    </h1></header>
+</script>
+
+
 <!-- template for the 'status' Vue.js component -->
 <script type='text/x-template' id='template_status'>
     <div id='status'>

templates/dashboard.html

@@ -22,11 +22,8 @@
 </head>
 <body>
 <div class="container theme-showcase" role="main" id='vue_app'>
+    <page-header :serverinfo="serverinfo"></page-header>
 
-    <header class='pageheader'><h1><img src='/static/flamenco.png' alt='Flamenco logo'> Flamenco Manager
-        <span id='runmode'>{{if ne .Config.Mode "production"}}({{.Config.Mode}} mode){{end}}</span>
-        <span id='managerversion'>{{ .Version}}</span>
-    </h1></header>
     <section class="row">
         <div class='col-md-5'>
             <div class="card">