Fix toggle button for loggers when there are more than 1 instances. (#…

…1880)

spring-boot-admin-server-ui/src/main/frontend/components/sba-toggle-scope-button.spec.js

@@ -18,26 +18,28 @@ import {render} from '@/test-utils';
 import SbaToggleScopeButton from './sba-toggle-scope-button';
 import userEvent from '@testing-library/user-event';
 import {screen} from '@testing-library/vue';
+import {mount} from '@vue/test-utils';
 
 describe('SbaToggleScopeButton', function () {
-  let emitted;
+  let wrapper;
 
   beforeEach(() => {
-    const vm = render(SbaToggleScopeButton, {props: {instanceCount: 10, scope: 'instance'}})
-    emitted = vm.emitted;
+    wrapper = render(SbaToggleScopeButton, {props: {instanceCount: 2, scope: 'instance'}})
   })
 
   it('should emit changed scope when clicked', async () => {
     userEvent.click(await screen.findByRole('button', {name: 'Instance'}));
 
-    expect(emitted().changeScope[0]).toEqual(['application']);
+    expect(wrapper.emitted().changeScope[0]).toEqual(['application']);
   });
 
   it('should toggle the scope when clicked twice', async () => {
     userEvent.click(await screen.findByRole('button', {name: 'Instance'}));
-    userEvent.click(await screen.findByRole('button', {name: 'Application'}));
+    expect(wrapper.emitted().changeScope[0]).toEqual(['application']);
+
+    wrapper.updateProps({scope: 'application'})
 
-    expect(emitted().changeScope[0]).toEqual(['application']);
-    expect(emitted().changeScope[1]).toEqual(['instance']);
+    userEvent.click(await screen.findByRole('button', {name: 'Application'}));
+    expect(wrapper.emitted().changeScope[1]).toEqual(['instance']);
   });
 });

spring-boot-admin-server-ui/src/main/frontend/components/sba-toggle-scope-button.vue

@@ -18,7 +18,7 @@
   <div class="field is-narrow">
     <div class="control">
       <button
-        v-if="selectedScope === 'application'"
+        v-if="scope === 'application'"
         class="button is-primary is-active"
         @click="toggleScope('instance')"
       >
@@ -35,7 +35,7 @@
       </button>
     </div>
     <p class="help has-text-centered">
-      <span v-if="selectedScope === 'application'"
+      <span v-if="scope === 'application'"
             v-text="$t('term.affects_all_instances', {count: instanceCount})"
       />
       <span v-else v-text="$t('term.affects_this_instance_only')" />
@@ -45,7 +45,15 @@
 
 <script>
 export default {
+  model: {
+    prop: 'scope',
+    event: 'changeScope'
+  },
   props: {
+    scope: {
+      type: String,
+      required: true
+    },
     instanceCount: {
       type: Number,
       required: true
@@ -57,10 +65,8 @@ export default {
     }
   },
   methods: {
-    toggleScope(scope) {
-      this.selectedScope = scope;
-
-      this.$emit('changeScope', this.selectedScope)
+    toggleScope(newScope) {
+      this.$emit('changeScope', newScope)
     }
   }
 }

spring-boot-admin-server-ui/src/main/frontend/test-utils.js

@@ -9,6 +9,8 @@ Vue.use(VueI18n);
 Vue.use(components);
 Vue.use(VueRouter);
 
+export const localVue = Vue;
+
 export const render = (testComponent, options) => {
   return tlRender(testComponent, options,
     () => {

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

@@ -17,7 +17,6 @@
 <template>
   <loggers
     :loggers-service="service"
-    :scope="scope"
     :instance-count="application.instances.length"
     @changeScope="changeScope"
   />

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

@@ -22,8 +22,8 @@
       <div class="field is-grouped">
         <div class="control">
           <sba-toggle-scope-button v-if="instanceCount > 1"
+                                   v-model="scope"
                                    :instance-count="instanceCount"
-                                   @changeScope="$emit('changeScope', $event)"
           />
         </div>
         <div class="control is-expanded">
@@ -108,10 +108,6 @@ export default {
   components: {SbaToggleScopeButton, LoggersList},
   directives: {sticksBelow},
   props: {
-    scope: {
-      type: String,
-      required: true
-    },
     instanceCount: {
       type: Number,
       required: true
@@ -121,18 +117,21 @@ export default {
       required: true
     }
   },
-  data: () => ({
-    hasLoaded: false,
-    error: null,
-    failedInstances: 0,
-    loggerConfig: {loggers: [], levels: []},
-    filter: {
-      name: '',
-      classOnly: false,
-      configuredOnly: false,
-    },
-    loggersStatus: {}
-  }),
+  data() {
+    return {
+      hasLoaded: false,
+      error: null,
+      failedInstances: 0,
+      loggerConfig: {loggers: [], levels: []},
+      filter: {
+        name: '',
+        classOnly: false,
+        configuredOnly: false,
+      },
+      loggersStatus: {},
+      scope: this.instanceCount > 1 ? 'application' : 'instance'
+    }
+  },
   computed: {
     filteredLoggers() {
       const filterFn = this.getFilterFn();