#2167: Added a new confirmation modal for jmx operations without arguments (#2168) (#2180)

Co-authored-by: Ulrich Schulte <[email protected]>

Author: EyedPeas

spring-boot-admin-server-ui/src/main/frontend/components/sba-modal.vue

@@ -9,7 +9,7 @@
         </p>
         <button class="delete" aria-label="close" @click="close" />
       </header>
-      <section class="modal-card-body">
+      <section class="modal-card-body" v-if="$slots.body">
         <slot name="body" />
       </section>
       <footer class="modal-card-foot" v-if="$slots.footer">

spring-boot-admin-server-ui/src/main/frontend/views/instances/jolokia/i18n.de.json

@@ -6,6 +6,7 @@
       "domains": "Domains",
       "execute": "Execute",
       "executing": "Führe aus...",
+      "execute_modal_header": "<code>{name}</code> ausführen?",
       "execution_failed": "Ausführung fehlgeschlagen.",
       "execution_successful": "Ausführung erfolgreich.",
       "fetch_failed": "Das Laden der JMX-Beans ist fehlgeschlagen.",

spring-boot-admin-server-ui/src/main/frontend/views/instances/jolokia/i18n.en.json

@@ -6,6 +6,7 @@
       "domains": "Domains",
       "execute": "Execute",
       "executing": "Executing...",
+      "execute_modal_header": "Execute <code>{name}</code>?",
       "execution_failed": "Execution failed.",
       "execution_successful": "Execution successful.",
       "fetch_failed": "Fetching JMX Beans failed.",

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

@@ -0,0 +1,60 @@
+/*
+ * Copyright 2014-2021 the original author or authors.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { render } from '@/test-utils';
+import userEvent from '@testing-library/user-event';
+import { screen, waitFor } from '@testing-library/vue';
+import MBeanOperation from '@/views/instances/jolokia/m-bean-operation';
+
+describe('m-bean-operation.vue', () => {
+  it('should open confirmation modal if operation contains no arguments', async () => {
+    const wrapper = render(MBeanOperation, {
+      props: {
+        name: 'doIt()',
+        descriptor: { args: [], ret: 'java.sth.doIt()' },
+      },
+    });
+
+    await userEvent.click(screen.getByText('doIt()'));
+
+    await waitFor(() => {
+      screen.findByRole('dialog');
+    });
+
+    await screen.findAllByTestId('mBeanOperationModal');
+
+    const buttonOK = screen.queryByRole('button', { name: 'OK' });
+    await userEvent.click(buttonOK);
+
+    expect(wrapper.emitted().click).toBeDefined();
+  });
+
+  it('should not open confirmation modal if operation contains arguments', async () => {
+    render(MBeanOperation, {
+      props: {
+        name: 'doIt()',
+        descriptor: { args: [{ property1: '' }], ret: 'java.sth.doIt()' },
+      },
+    });
+
+    await userEvent.click(screen.getByText('doIt()'));
+    await waitFor(() => {
+      screen.findByRole('dialog');
+    });
+
+    expect(screen.queryByTestId('mBeanOperationModal')).toBeNull();
+  });
+});

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

@@ -17,38 +17,76 @@
 <template>
   <div class="field">
     <div class="control">
-      <button class="button is-light is-fullwidth columns has-text-left" @click="$emit('click', $event)">
-        <small class="is-light is-muted column is-flex-grow-0 is-flex-shrink-0 p-1" v-text="shortenedRet" :title="descriptor.ret" />
-        <span class="column is-flex-grow-1 is-flex-shrink-0 p-1 is-truncated" v-text="shortenedName" :title="name" />
+      <button class="button is-light is-fullwidth columns has-text-left" @click="execute($event)">
+        <small class="is-light is-muted column is-flex-grow-0 is-flex-shrink-0 p-1" v-text="shortenedRet"
+               :title="descriptor.ret"/>
+        <span class="column is-flex-grow-1 is-flex-shrink-0 p-1 is-truncated" v-text="shortenedName" :title="name"/>
       </button>
-      <p class="help" v-text="descriptor.desc" />
+      <p class="help" v-text="descriptor.desc"/>
     </div>
+    <sba-modal v-model="isModalOpen" data-testid="mBeanOperationModal">
+      <template v-slot:header>
+        <span v-html="$t('instances.jolokia.execute_modal_header', {name: shortenedName})"/>
+      </template>
+      <template v-slot:footer>
+        <button class="button is-light" @click="closeModal">
+          Cancel
+        </button>
+        <button class="button is-success" @click="executeOperation($event)">
+          OK
+        </button>
+      </template>
+    </sba-modal>
   </div>
+
 </template>
 
 <script>
-  import {truncateJavaType} from '@/views/instances/jolokia/utils';
+import {truncateJavaType} from '@/views/instances/jolokia/utils';
+import SbaModal from '@/components/sba-modal';
 
-  export default {
-    props: {
-      name: {
-        type: String,
-        required: true
-      },
-      descriptor: {
-        type: Object,
-        required: true
-      }
+export default {
+  components: {SbaModal},
+  props: {
+    name: {
+      type: String,
+      required: true
+    },
+    descriptor: {
+      type: Object,
+      required: true
+    }
+  },
+  data() {
+    return {
+      isModalOpen: false,
+    }
+  },
+  computed: {
+    shortenedName() {
+      return truncateJavaType(this.name);
     },
-    computed: {
-      shortenedName() {
-        return truncateJavaType(this.name);
-      },
-      shortenedRet() {
-        return truncateJavaType(this.descriptor.ret);
+    shortenedRet() {
+      return truncateJavaType(this.descriptor.ret);
+    }
+  },
+  methods: {
+    closeModal() {
+      this.isModalOpen = false;
+    },
+    executeOperation(event) {
+      this.$emit('click', event);
+      this.isModalOpen = false;
+    },
+    execute(event) {
+      if (this.descriptor.args.length === 0) {
+        this.isModalOpen = true;
+      } else {
+        this.executeOperation(event);
       }
     }
   }
+}
 </script>
 
 <style>