ui fixes

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

Author: shwstppr

ui/public/locales/en.json

@@ -668,6 +668,7 @@
 "label.current.storage": "Current storage",
 "label.currentpassword": "Current password",
 "label.custom": "Custom",
+"label.customactionid": "Custom Action",
 "label.customactions": "Custom Actions",
 "label.custom.actions": "Custom Actions",
 "label.customconstrained": "Custom constrained",
@@ -2026,6 +2027,7 @@
 "label.rules.file.import.description": "Click or drag rule definitions CSV file to import.",
 "label.rules.file.to.import": "Rule definitions CSV file to import",
 "label.run.proxy.locally": "Run proxy locally",
+"label.run.custom.action": "Run Custom Action",
 "label.running": "Running",
 "label.running.vms": "Running Instances",
 "label.s2scustomergatewayid": "Site to site customer gateway ID",
@@ -2275,7 +2277,7 @@
 "label.subnet": "Subnet",
 "label.succeeded": "Succeeded",
 "label.success": "Success",
-"label.successmessage": "Success messgae",
+"label.successmessage": "Success message",
 "label.success.migrations": "Successful migrations",
 "label.success.set": "Successfully set",
 "label.success.updated": "Successfully updated",

ui/src/config/section/compute.js

@@ -432,7 +432,7 @@ export default {
           dataView: true,
           component: shallowRef(defineAsyncComponent(() => import('@/views/extension/RunCustomAction'))),
           popup: true,
-          show: (record) => { return ['External', 'Simulator'].includes(record.hypervisor) }
+          show: (record) => { return ['External'].includes(record.hypervisor) }
         },
         {
           api: 'unmanageVirtualMachine',

ui/src/views/extension/AddCustomAction.vue

@@ -103,12 +103,12 @@
         <details-input
           v-model:value="form.details" />
       </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>
+      <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>
@@ -185,7 +185,8 @@ export default {
         this.loading = true
         const params = {
           extensionid: values.extensionid || this.extension.id,
-          name: values.name
+          name: values.name,
+          enabled: values.enabled
         }
         if (values.description) {
           params.description = values.description

ui/src/views/extension/ExtensionCustomActionsTab.vue

@@ -39,7 +39,7 @@
           </router-link>
         </template>
         <template v-if="['enabled'].includes(column.key)">
-          {{ !!text ? $type('label.yes') : $t('label.no') }}
+          <status :text="text ? 'Enabled' : 'Disabled'" displayText />
         </template>
         <template v-if="['created'].includes(column.key)">
           {{ text && $toLocaleDate(text) }}
@@ -109,14 +109,16 @@ import ObjectListTable from '@/components/view/ObjectListTable.vue'
 import TooltipButton from '@/components/widgets/TooltipButton'
 import AddCustomAction from '@/views/extension/AddCustomAction.vue'
 import UpdateCustomAction from '@/views/extension/UpdateCustomAction.vue'
+import Status from '@/components/widgets/Status'
 
 export default {
   name: 'ExtensionCustomActionsTab',
   components: {
     ObjectListTable,
     TooltipButton,
     AddCustomAction,
-    UpdateCustomAction
+    UpdateCustomAction,
+    Status
   },
   props: {
     resource: {
@@ -133,15 +135,15 @@ export default {
           title: this.$t('label.name'),
           dataIndex: 'name'
         },
-        {
-          title: this.$t('label.resourcetype'),
-          dataIndex: 'resourcetype'
-        },
         {
           key: 'enabled',
-          title: this.$t('label.enabled'),
+          title: this.$t('label.state'),
           dataIndex: 'enabled'
         },
+        {
+          title: this.$t('label.resourcetype'),
+          dataIndex: 'resourcetype'
+        },
         {
           key: 'created',
           title: this.$t('label.created'),
@@ -197,6 +199,8 @@ export default {
         this.totalCount = json?.listcustomactionsresponse?.count || 0
         this.extensionCustomActions = json?.listcustomactionsresponse?.extensioncustomaction || []
         this.tabLoading = false
+      }).catch(error => {
+        this.$notifyError(error)
       })
     },
     showAddCustomActionModal () {

ui/src/views/extension/RunCustomAction.vue

@@ -163,7 +163,8 @@ export default {
       this.customActions = []
       const params = {
         resourcetype: this.resourceType,
-        resourceid: this.resource.id
+        resourceid: this.resource.id,
+        enabled: true
       }
       api('listCustomActions', params).then(json => {
         this.customActions = json?.listcustomactionsresponse?.extensioncustomaction || []

ui/src/views/extension/UpdateCustomAction.vue

@@ -83,6 +83,12 @@
         <details-input
           v-model:value="form.details" />
       </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>
@@ -146,7 +152,8 @@ export default {
         description: this.resource.description,
         roles: this.resource.roles,
         parameters: this.fixParamatersOptions(this.resource.parameters),
-        detail: this.resource.details
+        detail: this.resource.details,
+        enabled: this.resource.enabled
       })
       this.rules = reactive({})
     },
@@ -167,7 +174,8 @@ export default {
         const values = toRaw(this.form)
         this.loading = true
         const params = {
-          id: this.resource.id
+          id: this.resource.id,
+          enabled: values.enabled
         }
         if (values.description) {
           params.description = values.description