ui: enable/disable as separate actions

Signed-off-by: Abhishek Kumar <[email protected]>

Author: shwstppr

ui/public/locales/en.json

@@ -825,6 +825,7 @@
 "label.directdownload": "Direct download",
 "label.direction": "Direction",
 "label.disable.autoscale.vmgroup": "Disable AutoScaling Group",
+"label.disable.custom.action": "Disable Custom Action",
 "label.disable.extension": "Disable Extension",
 "label.disable.host": "Disable host",
 "label.disable.network.offering": "Disable Network offering",
@@ -938,6 +939,7 @@
 "label.elastic": "Elastic",
 "label.email": "Email",
 "label.enable.autoscale.vmgroup": "Enable AutoScaling Group",
+"label.enable.custom.action": "Enable Custom Action",
 "label.enable.extension": "Enable Extension",
 "label.enable.host": "Enable Host",
 "label.enable.network.offering": "Enable Network offering",
@@ -2985,6 +2987,7 @@
 "message.confirm.delete.traffic.type": "Please confirm that you would like to delete traffic type.",
 "message.confirm.destroy.router": "All services provided by this virtual router will be interrupted. Please confirm that you want to stop this router. Please confirm that you would like to destroy this router.",
 "message.confirm.disable.autoscale.vmgroup": "Please confirm that you want to disable this autoscaling group.",
+"message.confirm.disable.custom.action": "Please confirm that you want to disable this custom action.",
 "message.confirm.disable.extension": "Please confirm that you want to disable this extension.",
 "message.confirm.disable.host": "Please confirm that you want to disable the host.",
 "message.confirm.disable.network.offering": "Are you sure you want to disable this Network offering?",
@@ -2993,6 +2996,7 @@
 "message.confirm.disable.vpc.offering": "Are you sure you want to disable this VPC offering?",
 "message.confirm.disable.webhook": "Please confirm that you want to disable this webhook.",
 "message.confirm.enable.autoscale.vmgroup": "Please confirm that you want to enable this autoscaling group.",
+"message.confirm.enable.custom.action": "Please confirm that you want to enable this custom action.",
 "message.confirm.enable.extension": "Please confirm that you want to enable this extension.",
 "message.confirm.enable.host": "Please confirm that you want to enable the host.",
 "message.confirm.enable.network.offering": "Are you sure you want to enable this Network offering?",
@@ -3702,6 +3706,7 @@
 "message.success.update.bgp.peer": "Successfully updated BGP peer",
 "message.success.update.bucket": "Successfully updated bucket",
 "message.success.update.condition": "Successfully updated condition",
+"message.success.update.custom.action": "Successfully updated Custom Action",
 "message.success.update.extension": "Successfully updated Extension",
 "message.success.update.sharedfs": "Successfully updated Shared FileSystem",
 "message.success.update.ipaddress": "Successfully updated IP address",

ui/src/config/section/extension/customaction.js

@@ -57,6 +57,30 @@ export default {
       popup: true,
       component: shallowRef(defineAsyncComponent(() => import('@/views/extension/UpdateCustomAction.vue')))
     },
+    {
+      api: 'updateCustomAction',
+      icon: 'play-circle-outlined',
+      label: 'label.enable.custom.action',
+      message: 'message.confirm.enable.custom.action',
+      dataView: true,
+      groupAction: true,
+      popup: true,
+      defaultArgs: { enabled: true },
+      groupMap: (selection) => { return selection.map(x => { return { id: x } }) },
+      show: (record) => { return !record.enabled }
+    },
+    {
+      api: 'updateCustomAction',
+      icon: 'pause-circle-outlined',
+      label: 'label.disable.custom.action',
+      message: 'message.confirm.disable.custom.action',
+      dataView: true,
+      groupAction: true,
+      popup: true,
+      defaultArgs: { enabled: false },
+      groupMap: (selection) => { return selection.map(x => { return { id: x } }) },
+      show: (record) => { return record.enabled }
+    },
     {
       api: 'deleteCustomAction',
       icon: 'delete-outlined',

ui/src/views/extension/ExtensionCustomActionsTab.vue

@@ -52,6 +52,21 @@
               icon="edit-outlined"
               @click="openUpdateCustomActionModal(record)" />
           </span>
+          <span style="margin-right: 5px">
+            <a-popconfirm
+              v-if="'updateCustomAction' in $store.getters.apis"
+              placement="topRight"
+              :title="record.enabled ? $t('message.confirm.disable.custom.action') : $t('message.confirm.enable.custom.action')"
+              :ok-text="$t('label.yes')"
+              :cancel-text="$t('label.no')"
+              :loading="updateLoading"
+              @confirm="updateCustomAction(record)"
+            >
+              <tooltip-button
+                :tooltip="record.enabled ? $t('label.disable.custom.action') : $t('label.enable.custom.action')"
+                :icon="record.enabled ? 'pause-circle-outlined' : 'play-circle-outlined'" />
+            </a-popconfirm>
+          </span>
           <span style="margin-right: 5px">
             <a-popconfirm
               v-if="'deleteCustomAction' in $store.getters.apis"
@@ -158,6 +173,7 @@ export default {
       pageSize: 20,
       totalCount: 0,
       showAddCustomAction: false,
+      updateLoading: false,
       deleteLoading: false,
       showUpdateCustomAction: false,
       customActionForUpdate: {}
@@ -215,10 +231,29 @@ export default {
       this.showUpdateCustomAction = false
       this.customActionForUpdate = {}
     },
+    updateCustomAction (record) {
+      const params = {
+        id: record.id,
+        enabled: !record.enabled
+      }
+      this.updateLoading = true
+      api('updateCustomAction', params).then(json => {
+        this.fetchCustomActions()
+        this.$notification.success({
+          message: record.enabled ? this.$t('label.disable.custom.action') : this.$t('label.enable.custom.action'),
+          description: this.$t('message.success.update.custom.action')
+        })
+      }).catch(error => {
+        this.$notifyError(error)
+      }).finally(() => {
+        this.updateLoading = false
+      })
+    },
     deleteCustomAction (record) {
       const params = {
         id: record.id
       }
+      this.deleteLoading = true
       api('deleteCustomAction', params).then(json => {
         this.fetchCustomActions()
         this.$notification.success({

ui/src/views/extension/UpdateCustomAction.vue

@@ -92,12 +92,6 @@
           :placeholder="apiParams.timeout.description"
           :min="1" />
       </a-form-item>
-      <a-form-item name="enabled" ref="enabled">
-        <template #label>
-          <tooltip-label :title="$t('label.enabled')" :tooltip="apiParams.enabled.description"/>
-        </template>
-        <a-switch v-model:checked="form.enabled" />
-      </a-form-item>
       <div :span="24" class="action-button">
         <a-button @click="closeAction">{{ $t('label.cancel') }}</a-button>
         <a-button :loading="loading" ref="submit" type="primary" @click="handleSubmit">{{ $t('label.ok') }}</a-button>
@@ -161,7 +155,7 @@ export default {
       const formData = {
         parameters: this.fixParamatersOptions(this.resource.parameters)
       }
-      const keys = ['description', 'allowedroletypes', 'successmessage', 'errormessage', 'details', 'timeout', 'enabled']
+      const keys = ['description', 'allowedroletypes', 'successmessage', 'errormessage', 'details', 'timeout']
       for (const key of keys) {
         formData[key] = this.resource[key]
       }
@@ -185,8 +179,7 @@ export default {
         const values = toRaw(this.form)
         this.loading = true
         const params = {
-          id: this.resource.id,
-          enabled: values.enabled
+          id: this.resource.id
         }
         const keys = ['description', 'allowedroletypes', 'successmessage', 'errormessage', 'timeout']
         for (const key of keys) {