cleanup watchers

spring-boot-admin-server-ui/src/main/frontend/views/instances/details/cache-chart.vue

@@ -111,9 +111,7 @@
       this.drawChart(this.data);
     },
     watch: {
-      data(newVal) {
-        this.drawChart(newVal);
-      }
+      data: 'drawChart'
     }
   }
 </script>

spring-boot-admin-server-ui/src/main/frontend/views/instances/details/datasource-chart.vue

@@ -108,9 +108,7 @@
       this.drawChart(this.data);
     },
     watch: {
-      data(newVal) {
-        this.drawChart(newVal);
-      }
+      data: 'drawChart'
     }
   }
 </script>

spring-boot-admin-server-ui/src/main/frontend/views/instances/details/details-cache.vue

@@ -91,12 +91,6 @@
         return '-';
       }
     },
-    watch: {
-      dataSource() {
-        this.current = null;
-        this.chartData = [];
-      }
-    },
     methods: {
       async fetchMetrics() {
         const responseHit = this.instance.fetchMetric('cache.gets', {name: this.cacheName, result: 'hit'});

spring-boot-admin-server-ui/src/main/frontend/views/instances/details/details-datasource.vue

@@ -78,12 +78,6 @@
       current: null,
       chartData: [],
     }),
-    watch: {
-      dataSource() {
-        this.current = null;
-        this.chartData = [];
-      }
-    },
     methods: {
       async fetchMetrics() {
         const responseActive = this.instance.fetchMetric('data.source.active.connections', {name: this.dataSource});

spring-boot-admin-server-ui/src/main/frontend/views/instances/details/details-gc.vue

@@ -69,11 +69,6 @@
       error: null,
       current: null,
     }),
-    watch: {
-      dataSource() {
-        this.current = null;
-      }
-    },
     methods: {
       async fetchMetrics() {
         const response = await this.instance.fetchMetric('jvm.gc.pause');

spring-boot-admin-server-ui/src/main/frontend/views/instances/details/details-threads.vue

@@ -73,12 +73,6 @@
       current: null,
       chartData: [],
     }),
-    watch: {
-      dataSource() {
-        this.current = null;
-        this.chartData = [];
-      }
-    },
     methods: {
       async fetchMetrics() {
         const responseLive = this.instance.fetchMetric('jvm.threads.live');

spring-boot-admin-server-ui/src/main/frontend/views/instances/details/mem-chart.vue

@@ -134,9 +134,7 @@
       this.drawChart(this.data);
     },
     watch: {
-      data(newVal) {
-        this.drawChart(newVal);
-      }
+      data: 'drawChart'
     }
   }
 </script>

spring-boot-admin-server-ui/src/main/frontend/views/instances/details/process-uptime.js

@@ -38,9 +38,7 @@ export default {
     }
   },
   watch: {
-    value() {
-      this.subscribe();
-    }
+    value: 'subscribe'
   },
   methods: {
     createSubscription() {

spring-boot-admin-server-ui/src/main/frontend/views/instances/details/threads-chart.vue

@@ -109,9 +109,7 @@
       this.drawChart(this.data);
     },
     watch: {
-      data(newVal) {
-        this.drawChart(newVal);
-      }
+      data: 'drawChart'
     }
   }
 </script>

spring-boot-admin-server-ui/src/main/frontend/views/instances/env/env-manager.vue

@@ -214,12 +214,10 @@
         });
       }
     },
-    created() {
-      this.updateManagedProperties(this.managerPropertySource);
-    },
     watch: {
-      managerPropertySource(newVal) {
-        this.updateManagedProperties(newVal);
+      managerPropertySource: {
+        handler: 'updateManagedProperties',
+        immediate: true
       },
       managedProperties: {
         deep: true,

spring-boot-admin-server-ui/src/main/frontend/views/instances/httptrace/traces-chart.vue

@@ -266,9 +266,7 @@
       this.drawChart(this.chartData);
     },
     watch: {
-      chartData(newVal) {
-        this.drawChart(newVal);
-      },
+      chartData: 'drawChart',
       hovered(newVal) {
         if (newVal) {
           this.hover.attr('opacity', 1)

spring-boot-admin-server-ui/src/main/frontend/views/instances/jolokia/index.vue

@@ -158,12 +158,12 @@
       }
     },
     created() {
-      this.updateSelection();
       this.fetchMBeans();
     },
     watch: {
-      '$route.query'() {
-        this.updateSelection();
+      '$route.query': {
+        handler: 'updateSelection',
+        immediate: true
       },
       selected() {
         if (!_.isEqual(this.selected, !this.$route.query)) {

spring-boot-admin-server-ui/src/main/frontend/views/instances/jolokia/m-bean-operation-invocation.vue

@@ -182,7 +182,5 @@
     beforeDestroy() {
       document.removeEventListener('keyup', this.keyHandler)
     },
-
-    watch: {}
   }
 </script>

spring-boot-admin-server-ui/src/main/frontend/views/instances/jolokia/m-bean-operations.vue

@@ -59,13 +59,6 @@
       execute(args) {
         return this.instance.invokeMBeanOperation(this.domain, this.mBean.descriptor.raw, this.invocation.name, args);
       }
-    },
-    created() {
-    },
-    watch: {}
+    }
   }
 </script>
-
-<style lang="scss">
-    @import "~@/assets/css/utilities";
-</style>

spring-boot-admin-server-ui/src/main/frontend/views/instances/sessions/index.vue

@@ -122,12 +122,10 @@
           }, {type: null, value: ''});
       }
     },
-    mounted() {
-      this.updateFilter();
-    },
     watch: {
-      '$route.query'() {
-        this.updateFilter();
+      '$route.query': {
+        handler: 'updateFilter',
+        immediate: true
       },
       filter: {
         deep: true,

spring-boot-admin-server-ui/src/main/frontend/views/instances/threaddump/threads-list.vue

@@ -122,15 +122,11 @@
     components: {
       threadTag
     },
-    mounted() {
-      this.drawTimelines(this.threadTimelines);
-    },
     watch: {
       threadTimelines: {
         deep: true,
-        handler(newVal) {
-          this.drawTimelines(newVal);
-        }
+        handler: 'drawTimelines',
+        immediate: true
       }
     },
     methods: {
@@ -193,49 +189,49 @@
   }
 </script>
 <style lang="scss">
-    @import "~@/assets/css/utilities";
+  @import "~@/assets/css/utilities";
 
-    .threads {
-        table-layout: fixed;
+  .threads {
+    table-layout: fixed;
 
-        &__thread-name {
-            width: 250px;
-            overflow: hidden;
-            text-overflow: ellipsis;
-            white-space: nowrap;
-        }
+    &__thread-name {
+      width: 250px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
 
-        &__timeline {
-            width: auto;
-            overflow: hidden;
-            text-overflow: ellipsis;
-            padding-left: 0 !important;
-            padding-right: 0 !important;
+    &__timeline {
+      width: auto;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      padding-left: 0 !important;
+      padding-right: 0 !important;
 
-            & svg {
-                display: block; //prevent margin bottom on svg
-            }
-        }
+      & svg {
+        display: block; //prevent margin bottom on svg
+      }
+    }
 
-        &__scale {
-            & .domain {
-                display: none;
-            }
-        }
+    &__scale {
+      & .domain {
+        display: none;
+      }
     }
+  }
 
-    .thread {
-        &--runnable {
-            fill: $success;
-        }
+  .thread {
+    &--runnable {
+      fill: $success;
+    }
 
-        &--timed_waiting,
-        &--waiting {
-            fill: $warning;
-        }
+    &--timed_waiting,
+    &--waiting {
+      fill: $warning;
+    }
 
-        &--blocked {
-            fill: $danger;
-        }
+    &--blocked {
+      fill: $danger;
     }
+  }
 </style>

spring-boot-admin-server-ui/src/main/frontend/views/wallboard/hex-mesh.vue

@@ -155,15 +155,13 @@
         return this.sideLength * (2 + (this.rows - 1) * 1.5);
       }
     },
-    mounted() {
-      this.updateLayout();
-    },
     watch: {
       sideLength(newVal) {
         this.$el.style['font-size'] = `${newVal / 9.5}px`;
       },
-      itemCount() {
-        this.updateLayout();
+      itemCount: {
+        handler: 'updateLayout',
+        immediate: true
       }
     }
   };