feat: 修改actions formatter 使用formatterAegs

2026-01-15 14:24:39 +00:00 · 2020-05-28 16:06:57 +08:00
parent dbe17fbc04
commit 13589ce9cb
41 changed files with 287 additions and 259 deletions
--- a/.env.development
+++ b/.env.development
@@ -3,6 +3,7 @@ ENV = 'development'

 # base api
 VUE_APP_BASE_API = '/rpc'
+PUBLIC_PATH = '/ui'

 # vue-cli uses the VUE_CLI_BABEL_TRANSPILE_MODULES environment variable,
 # to control whether the babel-plugin-dynamic-import-node plugin is enabled.
--- a/.env.production
+++ b/.env.production
@@ -3,6 +3,7 @@ ENV = 'production'

 # base api
 VUE_APP_BASE_API = '/'
+PUBLIC_PATH = '/ui'

 # External auth
 LOGIN_PATH = '/core/auth/login/'
--- a/public/index.html
+++ b/public/index.html
@@ -11,6 +11,14 @@
    <noscript>
      <strong>We're sorry but <%= webpackConfig.name %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
+    <script>
+      window.onload = function() {
+        const baseUrl = "/ui/"
+        if (location.pathname === '/' && baseUrl !== '/') {
+           location.pathname = baseUrl
+        }
+      }
+    </script>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
--- a/src/components/AssetSelect/index.vue
+++ b/src/components/AssetSelect/index.vue
@@ -14,8 +14,8 @@
        :header-actions="headerActions"
      />
      <span slot="footer" class="dialog-footer">
-        <el-button @click="dialogVisible = false">取 消</el-button>
-        <el-button type="primary" @click="handleConfirm">确 定</el-button>
+        <el-button @click="dialogVisible = false">{{ $t('common.Cancel') }}</el-button>
+        <el-button type="primary" @click="handleConfirm">{{ $t('common.Confirm') }}</el-button>
      </span>
    </el-dialog>
  </div>
--- a/src/components/ListTable/formatters/ActionsFormatter.vue
+++ b/src/components/ListTable/formatters/ActionsFormatter.vue
@@ -49,7 +49,7 @@ export default {
  components: { ActionsGroup },
  extends: BaseFormatter,
  props: {
-    actionsDefault: {
+    formatterArgsDefault: {
      type: Object,
      default: function() {
        return {
@@ -67,7 +67,7 @@ export default {
    }
  },
  data() {
-    const colActions = Object.assign(this.actionsDefault, this.col, this.col.actions)
+    const colActions = Object.assign(this.formatterArgsDefault, this.col, this.col.formatterArgs)
    const defaultActions = [
      {
        name: 'update',
--- a/src/components/Term/index.vue
+++ b/src/components/Term/index.vue
@@ -13,14 +13,13 @@ export default {
      xterm: ''
    }
  },
-
  mounted: function() {
    const terminalContainer = this.$refs.terminal
    this.xterm = new Terminal(
      {
        fontFamily: 'monaco, Consolas, "Lucida Console", monospace',
        lineHeight: 1.2,
-        fontSize: 15,
+        fontSize: 13,
        rightClickSelectsWord: true,
        theme: {
          background: '#1f1b1b'
--- a/src/layout/components/NavHeader/ApiKey.vue
+++ b/src/layout/components/NavHeader/ApiKey.vue
@@ -39,30 +39,31 @@ export default {
            formatter: DateFormatter
          },
          actions: {
-            onDelete: function({ row, col, cellValue, reload }) {
-              this.$axios.delete(
-                `/api/v1/authentication/access-keys/${row.id}/`
-              ).then(res => {
-                this.$refs.ListTable.reloadTable()
-                this.$message.success(this.$t('common.deleteSuccessMsg'))
-              }).catch(error => {
-                this.$message.error(this.$t('common.deleteErrorMsg' + ' ' + error))
-              })
-            }.bind(this),
-            onUpdate: function({ row, col, cellValue, reload }) {
-              this.$axios.patch(
-                `/api/v1/authentication/access-keys/${row.id}/`,
-                { is_active: !row.is_active }
-              ).then(res => {
-                this.$refs.ListTable.reloadTable()
-                this.$message.success(this.$t('common.updateSuccessMsg'))
-              }).catch(error => {
-                this.$message.error(this.$t('common.updateErrorMsg' + ' ' + error))
-              })
-            }.bind(this)
+            formatterArgs: {
+              onDelete: function({ row, col, cellValue, reload }) {
+                this.$axios.delete(
+                  `/api/v1/authentication/access-keys/${row.id}/`
+                ).then(res => {
+                  this.$refs.ListTable.reloadTable()
+                  this.$message.success(this.$t('common.deleteSuccessMsg'))
+                }).catch(error => {
+                  this.$message.error(this.$t('common.deleteErrorMsg' + ' ' + error))
+                })
+              }.bind(this),
+              onUpdate: function({ row, col, cellValue, reload }) {
+                this.$axios.patch(
+                  `/api/v1/authentication/access-keys/${row.id}/`,
+                  { is_active: !row.is_active }
+                ).then(res => {
+                  this.$refs.ListTable.reloadTable()
+                  this.$message.success(this.$t('common.updateSuccessMsg'))
+                }).catch(error => {
+                  this.$message.error(this.$t('common.updateErrorMsg' + ' ' + error))
+                })
+              }.bind(this)
+            }
          }
        }
-
      },
      headerActions: {
        hasRightActions: false,
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -7,10 +7,6 @@ Vue.use(Router)
 /* Layout */
 import Layout from '@/layout'

-const scheme = document.location.protocol
-const port = document.location.port ? ':' + document.location.port : ''
-const URL = scheme + '//' + document.location.hostname + port
-
 const requireContext = require.context('@/views/', true, /router\.js$/)
 /**
 * Note: sub-menu only appear when route children.length >= 1
@@ -152,87 +148,7 @@ export const adminRoutes = [
 * the routes that need to be dynamically loaded based on user roles
 */
 // 权限路由
-export const userRoutes = [
-  // 404 page must be placed at the end !!!
-  {
-    path: '/',
-    component: Layout,
-    redirect: '/assets',
-    children: [
-      {
-        path: 'assets',
-        name: 'assets',
-        component: () => import('@/userviews/assets/index'),
-        meta: { title: i18n.t('route.MyAssets'), icon: 'files-o' }
-      }
-    ]
-  },
-  {
-    path: '/apps',
-    component: Layout,
-    redirect: '/apps/remoteapp',
-    meta: { title: i18n.t('route.MyApps'), icon: 'th' },
-    children: [
-      {
-        path: '/apps/remoteapp',
-        name: 'remoteapp',
-        component: () => import('@/userviews/apps/RemoteApp'),
-        meta: { title: i18n.t('route.RemoteApp') }
-      },
-      {
-        path: '/apps/database',
-        name: 'assets',
-        component: () => import('@/userviews/apps/DatabaseApp'),
-        meta: { title: i18n.t('route.DatabaseApp') }
-      }
-    ]
-  },
-  {
-    path: '/users',
-    component: Layout,
-    children: [
-      {
-        path: '/users/profile',
-        name: 'profile',
-        component: () => import('@/userviews/users/index'),
-        meta: { title: i18n.t('route.UserProfile'), icon: 'user' }
-      }
-    ]
-  },
-  {
-    path: '/command-executions',
-    component: Layout,
-    children: [
-      {
-        path: '',
-        name: 'CommandExecutions',
-        component: () => import('@/views/ops/CommandExecution'),
-        meta: { title: i18n.t('route.CommandExecutions'), icon: 'terminal' }
-      }
-    ]
-  },
-  {
-    path: 'external-link1',
-    component: Layout,
-    children: [
-      {
-        path: `${URL}/luna/`,
-        meta: { title: i18n.t('route.WebTerminal'), icon: 'window-maximize' }
-      }
-    ]
-  },
-  {
-    path: 'external-link2',
-    component: Layout,
-    children: [
-      {
-        path: `${URL}/koko/elfinder/sftp/`,
-        meta: { title: i18n.t('route.WebFTP'), icon: 'file' }
-      }
-    ]
-  },
-  { path: '*', redirect: '/404', hidden: true }
-]
+export { default as userRoutes } from './userPage'

 const createRouter = () => new Router({
  // mode: 'history', // require service support
--- a/src/router/userPage.js
+++ b/src/router/userPage.js
@@ -0,0 +1,88 @@
+import Layout from '@/layout/index'
+import i18n from '@/i18n/i18n'
+
+const scheme = document.location.protocol
+const port = document.location.port ? ':' + document.location.port : ''
+const URL = scheme + '//' + document.location.hostname + port
+
+export default [
+  // 404 page must be placed at the end !!!
+  {
+    path: '/',
+    component: Layout,
+    redirect: '/assets',
+    children: [
+      {
+        path: 'assets',
+        name: 'assets',
+        component: () => import('@/userviews/assets/index'),
+        meta: { title: i18n.t('route.MyAssets'), icon: 'files-o' }
+      }
+    ]
+  },
+  {
+    path: '/apps',
+    component: Layout,
+    redirect: '/apps/remoteapp',
+    meta: { title: i18n.t('route.MyApps'), icon: 'th' },
+    children: [
+      {
+        path: '/apps/remoteapp',
+        name: 'remoteapp',
+        component: () => import('@/userviews/apps/RemoteApp'),
+        meta: { title: i18n.t('route.RemoteApp') }
+      },
+      {
+        path: '/apps/database',
+        name: 'assets',
+        component: () => import('@/userviews/apps/DatabaseApp'),
+        meta: { title: i18n.t('route.DatabaseApp') }
+      }
+    ]
+  },
+  {
+    path: '/users',
+    component: Layout,
+    children: [
+      {
+        path: '/users/profile',
+        name: 'profile',
+        component: () => import('@/userviews/users/index'),
+        meta: { title: i18n.t('route.UserProfile'), icon: 'user' }
+      }
+    ]
+  },
+  {
+    path: '/command-executions',
+    component: Layout,
+    children: [
+      {
+        path: '',
+        name: 'CommandExecutions',
+        component: () => import('@/views/ops/CommandExecution'),
+        meta: { title: i18n.t('route.CommandExecutions'), icon: 'terminal' }
+      }
+    ]
+  },
+  {
+    path: `external-luna`,
+    component: Layout,
+    children: [
+      {
+        path: `${URL}/luna/`,
+        meta: { title: i18n.t('route.WebTerminal'), icon: 'window-maximize', activeMenu: '/assets' }
+      }
+    ]
+  },
+  {
+    path: 'external-elfinder',
+    component: Layout,
+    children: [
+      {
+        path: `${URL}/koko/elfinder/sftp/`,
+        meta: { title: i18n.t('route.WebFTP'), icon: 'file', activeMenu: '/assets' }
+      }
+    ]
+  },
+  { path: '*', redirect: '/404', hidden: true }
+]
--- a/src/views/applications/DatabaseApp/DatabaseAppCreateUpdate.vue
+++ b/src/views/applications/DatabaseApp/DatabaseAppCreateUpdate.vue
@@ -11,7 +11,9 @@ export default {
  data() {
    return {
      fields: [
-        [this.$t('route.DatabaseApp'), ['name', 'type', 'host', 'port', 'database', 'comment']]
+        [this.$t('common.Basic'), ['name', 'type']],
+        [this.$t('applications.mysql'), ['host', 'port', 'database']],
+        [this.$t('common.Others'), ['comment']]
      ],
      fieldsMeta: {
        type: {
--- a/src/views/applications/RemoteApp/RemoteAppCreateUpdate.vue
+++ b/src/views/applications/RemoteApp/RemoteAppCreateUpdate.vue
@@ -11,19 +11,18 @@ export default {
    GenericCreateUpdatePage
  },
  data() {
-    const app_type = this.$route.query.type
-
-    const fields_map = REMOTE_APP_TYPE_FIELDS_MAP[app_type]
-
-    const app_type_meta = REMOTE_APP_TYPE_META_MAP[app_type]
+    const appType = this.$route.query.type
+    const fieldsMap = REMOTE_APP_TYPE_FIELDS_MAP[appType]
+    const appTypeMeta = REMOTE_APP_TYPE_META_MAP[appType]

    return {
      initial: {
-        type: app_type_meta.name
+        type: appTypeMeta.name
      },
      fields: [
-        [this.$t('route.RemoteApp'), ['name', 'asset', 'type', 'path', 'comment']],
-        [this.$t('applications.' + app_type), ['params']]
+        [this.$t('common.Basic'), ['name', 'asset', 'type', 'path']],
+        [this.$t('applications.' + appType), ['params']],
+        [this.$t('common.Others'), ['comment']]
      ],
      url: '/api/v1/applications/remote-apps/',
      fieldsMeta: {
@@ -47,15 +46,15 @@ export default {
          type: 'select',
          options: [
            {
-              label: app_type_meta.title,
-              value: app_type_meta.name
+              label: appTypeMeta.title,
+              value: appTypeMeta.name
            }
          ],
          disabled: true
        },
        params: {
          type: 'group',
-          items: fields_map
+          items: fieldsMap
        }
      }
    }
--- a/src/views/applications/RemoteApp/RemoteAppList.vue
+++ b/src/views/applications/RemoteApp/RemoteAppList.vue
@@ -19,6 +19,9 @@ export default {
          'name', 'type', 'asset', 'comment', 'actions'
        ],
        columnsMeta: {
+          name: {
+            route: 'RemoteAppDetail'
+          },
          type: {
            displayKey: 'get_type_display'
          },
@@ -26,12 +29,13 @@ export default {
            formatter: function(row, column, cellValue, index) {
              return <a class='detail el-link el-link--success is-underline' href={ `/assets/assets/${cellValue}` }>{ row.asset_info.hostname }</a>
            }
-          }
-        },
-        detailRoute: 'RemoteAppDetail',
-        actions: {
-          onUpdate: ({ row }) => {
-            vm.$router.push({ name: 'RemoteAppUpdate', params: { id: row.id }, query: { type: row.type }})
+          },
+          actions: {
+            formatterArgs: {
+              onUpdate: ({ row }) => {
+                vm.$router.push({ name: 'RemoteAppUpdate', params: { id: row.id }, query: { type: row.type }})
+              }
+            }
          }
        }
      },
--- a/src/views/assets/AdminUser/AdminUserDetail/AssetsList.vue
+++ b/src/views/assets/AdminUser/AdminUserDetail/AssetsList.vue
@@ -76,7 +76,7 @@ export default {
            label: this.$t('common.Action'),
            align: 'center',
            formatter: CustomActionsFormatter,
-            actions: {
+            formatterArgs: {
              extraActions: [
                {
                  name: this.$t('common.Delete'),
--- a/src/views/assets/AdminUser/AdminUserList.vue
+++ b/src/views/assets/AdminUser/AdminUserList.vue
@@ -42,7 +42,7 @@ export default {
            label: this.$t('common.Action'),
            formatter: ActionsFormatter,
            width: '200px',
-            actions: {
+            formatterArgs: {
              performDelete: ({ row, col }) => {
                const id = row.id
                const url = `/api/v1/assets/admin-users/${id}/`
--- a/src/views/assets/Asset/AssetDetail/AssetList.vue
+++ b/src/views/assets/Asset/AssetDetail/AssetList.vue
@@ -78,7 +78,7 @@ export default {
            align: 'center',
            label: this.$t('assets.Action'),
            formatter: CustomActionsFormatter,
-            actions: {
+            formatterArgs: {
              extraActions: [
                {
                  name: this.$t('common.Delete'),
--- a/src/views/assets/Asset/AssetList.vue
+++ b/src/views/assets/Asset/AssetList.vue
@@ -24,35 +24,27 @@ export default {
      tableConfig: {
        url: '/api/v1/assets/assets/',
        hasTree: true,
-        columns: [
-          {
-            prop: 'hostname',
-            label: this.$t('assets.Hostname'),
+        columnsMeta: {
+          hostname: {
            formatter: DetailFormatter,
-            sortable: true,
            route: 'AssetDetail'
          },
-          {
-            prop: 'ip',
-            label: this.$t('assets.ip'),
-            sortable: 'custom'
+          ip: {
+            sortable: 'custom',
+            width: '120px'
          },
-          {
-            prop: 'hardware_info',
-            label: this.$t('assets.Hardware')
+          hardware_info: {
+            showOverflowTooltip: true
          },
-          {
-            prop: 'reachable',
+          reachable: {
            label: this.$t('assets.Reachable'),
-            formatter: BooleanFormatter
+            formatter: BooleanFormatter,
+            width: '80px',
+            align: 'center'
          },
-          {
-            prop: 'id',
-            align: 'center',
+          actions: {
            formatter: ActionsFormatter,
-            label: this.$t('assets.Action'),
-            width: '200px',
-            actions: {
+            formatterArgs: {
              performDelete: ({ row, col }) => {
                const id = row.id
                const url = `/api/v1/assets/assets/${id}/`
@@ -60,6 +52,9 @@ export default {
              }
            }
          }
+        },
+        columns: [
+          'hostname', 'ip', 'hardware_info', 'reachable', 'actions'
        ]
      },
      headerActions: {
--- a/src/views/assets/CommandFilter/CommandFilterDetail/Rules.vue
+++ b/src/views/assets/CommandFilter/CommandFilterDetail/Rules.vue
@@ -48,7 +48,7 @@ export default {
            label: this.$t('assets.Action'),
            formatter: ActionsFormatter,
            width: '200px',
-            actions: {
+            formatterArgs: {
              performDelete: ({ row, col }) => {
                const id = row.id
                const url = `/api/v1/assets/cmd-filters/${this.object.id}/rules/${id}/`
--- a/src/views/assets/CommandFilter/CommandFilterList.vue
+++ b/src/views/assets/CommandFilter/CommandFilterList.vue
@@ -44,7 +44,7 @@ export default {
            label: this.$t('assets.Action'),
            formatter: ActionsFormatter,
            width: '200px',
-            actions: {
+            formatterArgs: {
              performDelete: ({ row, col }) => {
                const id = row.id
                const url = `/api/v1/assets/cmd-filters/${id}/`
--- a/src/views/assets/Domain/DomainDetail/GatewayList.vue
+++ b/src/views/assets/Domain/DomainDetail/GatewayList.vue
@@ -54,7 +54,7 @@ export default {
            label: this.$t('assets.Action'),
            formatter: ActionsFormatter,
            width: '200px',
-            actions: {
+            formatterArgs: {
              updateRoute: 'GatewayUpdate',
              performDelete: ({ row, col }) => {
                const id = row.id
--- a/src/views/assets/Domain/DomainList.vue
+++ b/src/views/assets/Domain/DomainList.vue
@@ -41,7 +41,7 @@ export default {
            label: this.$t('assets.Action'),
            formatter: ActionsFormatter,
            width: '200px',
-            actions: {
+            formatterArgs: {
              performDelete: ({ row, col }) => {
                const id = row.id
                const url = `/api/v1/assets/domains/${id}/`
--- a/src/views/assets/Label/LabelList.vue
+++ b/src/views/assets/Label/LabelList.vue
@@ -35,7 +35,7 @@ export default {
            formatter: ActionsFormatter,
            label: this.$t('assets.Action'),
            width: '200px',
-            actions: {
+            formatterArgs: {
              performDelete: ({ row, col }) => {
                const id = row.id
                const url = `/api/v1/assets/labels/${id}/`
--- a/src/views/assets/Platform/PlatformList.vue
+++ b/src/views/assets/Platform/PlatformList.vue
@@ -38,7 +38,7 @@ export default {
            label: this.$t('assets.Action'),
            formatter: ActionsFormatter,
            width: '200px',
-            actions: {
+            formatterArgs: {
              canDelete: (row, vaule) => {
                return !row.internal
              },
--- a/src/views/assets/SystemUser/SystemUserDetail/AssetList.vue
+++ b/src/views/assets/SystemUser/SystemUserDetail/AssetList.vue
@@ -136,7 +136,7 @@ export default {
            align: 'center',
            label: this.$t('assets.Action'),
            formatter: CustomActionsFormatter,
-            actions: {
+            formatterArgs: {
              extraActions: [
                {
                  name: 'delete',
--- a/src/views/assets/SystemUser/SystemUserList.vue
+++ b/src/views/assets/SystemUser/SystemUserList.vue
@@ -51,7 +51,7 @@ export default {
            width: '200px',
            label: this.$t('common.Action'),
            updateRoute: 'SystemUserUpdate',
-            actions: {
+            formatterArgs: {
              performDelete: ({ row, col }) => {
                const id = row.id
                const url = `/api/v1/assets/system-users/${id}/`
--- a/src/views/ops/CommandExecution.vue
+++ b/src/views/ops/CommandExecution.vue
@@ -3,8 +3,7 @@
    <el-collapse-transition>
      <div style="display: flex;justify-items: center; flex-wrap: nowrap;justify-content:space-between;">
        <div v-show="iShowTree" :style="iShowTree?('width:250px;'):('width:0;')" class="transition-box">
-          <component
-            :is="component"
+          <AutoDataZTree
            ref="AutoDataZTree"
            :setting="treeSetting"
            class="auto-data-ztree"
@@ -20,14 +19,14 @@
            <Term ref="xterm" />
            <div style="display: flex;margin-top:10px;justify-content: space-between">
              <div>
-                <CodeMirror :options="CodeMirrorOptions" @change="handleActionChange" />
+                <CodeMirror :options="codeMirrorOptions" @change="handleActionChange" />
              </div>
              <div style="display: flex;flex-direction: column ;justify-content: space-between">
-                <el-select v-model="selectedSystemuser" placeholder="请选择" @change="handleSystemUserChange">
+                <el-select v-model="selectedSystemUser" placeholder="请选择" @change="handleSystemUserChange">
                  <el-option
                    v-for="item in options"
                    :key="item.id"
-                    :disabled="item.protocol != 'ssh'"
+                    :disabled="item.protocol !== 'ssh'"
                    :label="`${item.name}(${item.username})`"
                    :value="item.id"
                  />
@@ -46,7 +45,6 @@
 import AutoDataZTree from '@/components/AutoDataZTree'
 import Term from '@/components/Term'
 import IBox from '@/components/IBox'
-import Select2 from '@/components/Select2'
 import CodeMirror from '@/components/CodeMirror'
 import Page from '@/layout/components/Page'
 export default {
@@ -55,14 +53,12 @@ export default {
    Term,
    AutoDataZTree,
    IBox,
-    Select2,
    Page,
    CodeMirror
  },
  data() {
    return {
-      component: 'AutoDataZTree',
-      CodeMirrorOptions: {
+      codeMirrorOptions: {
        lineNumbers: true,
        lineWrapping: true,
        mode: 'shell'
@@ -103,9 +99,10 @@ export default {
      iShowTree: true,
      actions: '',
      options: [],
-      selectedSystemuser: '',
+      selectedSystemUser: '',
      basicUrl: '/api/v1/perms/users/nodes-with-assets/tree/?cache_policy=1',
-      ws: ''
+      ws: '',
+      wsConnected: false
    }
  },
  computed: {
@@ -117,7 +114,7 @@ export default {
    }
  },
  mounted() {
-    this.$axios.get('api/v1/assets/system-users/').then(res => {
+    this.$axios.get('/api/v1/assets/system-users/').then(res => {
      this.options = res
    })
    this.xterm.write(`选择左侧资产, 选择运行的系统用户，批量执行命令`)
@@ -138,7 +135,6 @@ export default {
    },
    handleSystemUserChange(id) {
      this.treeSetting.treeUrl = `${this.basicUrl}&system_user=${id}`
-      console.log(this.treeSetting.treeUrl)
      this.$refs.AutoDataZTree.$refs.dataztree.$refs.ztree.initTree()
    },
    getSelectedAssetsNode() {
@@ -178,14 +174,14 @@ export default {
      this.ws = new WebSocket(wsURL)
      this.ws.onerror = (e) => {
        this.ws = new WebSocket(failOverWsURL)
-        this.ws.onmessage = (e) => {
-          const data = JSON.parse(e.data)
-          this.xterm.write(data.message)
-        }
+        this.setWsCallback()
        this.ws.onerror = (e) => {
-          this.xterm.write('Connect websocket server error')
+          this.xterm.write(this.wrapperError('Connect websocket server error'))
        }
      }
+      this.setWsCallback()
+    },
+    setWsCallback() {
      this.ws.onmessage = (e) => {
        const data = JSON.parse(e.data)
        this.xterm.write(data.message)
@@ -197,7 +193,7 @@ export default {
    execute() {
      // const size = 'rows=' + this.xterm.rows + '&cols=' + this.xterm.cols
      // const url = '{% url "api-ops:command-execution-list" %}?' + size
-      const run_as = this.selectedSystemuser()
+      const runAs = this.selectedSystemUser
      // const command = editor.getValue()
      const hosts = this.getSelectedAssetsNode().map(function(node) {
        return node.id
@@ -210,7 +206,7 @@ export default {
      //   this.xterm.write(this.wrapperError("{% trans 'No input command' %}"))
      //   return
      // }
-      if (!run_as) {
+      if (!runAs) {
        this.xterm.write(this.wrapperError("{% trans 'No system user was selected' %}"))
        return
      }
--- a/src/views/ops/TaskDetail/AdhocDetail/AdhocExecutionHistory.vue
+++ b/src/views/ops/TaskDetail/AdhocDetail/AdhocExecutionHistory.vue
@@ -72,7 +72,7 @@ export default {
          actions: {
            prop: 'id',
            formatter: ActionsFormatter,
-            actions: {
+            formatterArgs: {
              hasEdit: false,
              hasDelete: false,
              hasUpdate: false,
--- a/src/views/ops/TaskDetail/TaskAdhoc.vue
+++ b/src/views/ops/TaskDetail/TaskAdhoc.vue
@@ -58,7 +58,7 @@ export default {
          },
          actions: {
            prop: 'id',
-            actions: {
+            formatterArgs: {
              hasEdit: false,
              hasDelete: false,
              hasUpdate: false,
--- a/src/views/ops/TaskDetail/TaskHistory.vue
+++ b/src/views/ops/TaskDetail/TaskHistory.vue
@@ -76,7 +76,7 @@ export default {
          },
          actions: {
            prop: 'id',
-            actions: {
+            formatterArgs: {
              hasEdit: false,
              hasDelete: false,
              hasUpdate: false,
--- a/src/views/ops/TaskList.vue
+++ b/src/views/ops/TaskList.vue
@@ -61,7 +61,7 @@ export default {
          },
          actions: {
            prop: 'id',
-            actions: {
+            formatterArgs: {
              hasUpdate: false,
              extraActions: [
                {
--- a/src/views/sessions/SessionList/BaseList.vue
+++ b/src/views/sessions/SessionList/BaseList.vue
@@ -64,7 +64,7 @@ export default {
            prop: 'id',
            label: this.$t('common.Actions'),
            formatter: ActionsFormatter,
-            actions: {
+            formatterArgs: {
              hasEdit: false,
              hasDelete: false,
              hasUpdate: false,
--- a/src/views/sessions/Storage/CommandStorage.vue
+++ b/src/views/sessions/Storage/CommandStorage.vue
@@ -56,7 +56,7 @@ export default {
          },
          actions: {
            prop: 'id',
-            actions: {
+            formatterArgs: {
              canUpdate: function(row, cellValue) {
                return (row.name !== 'default' && row.name !== 'null')
              },
--- a/src/views/sessions/Storage/ReplayStorage.vue
+++ b/src/views/sessions/Storage/ReplayStorage.vue
@@ -77,7 +77,7 @@ export default {
          },
          actions: {
            prop: 'id',
-            actions: {
+            formatterArgs: {
              onUpdate: function({ row, col }) {
                this.$router.push({ name: 'ReplayStorageUpdate', params: { id: row.id }})
              },
--- a/src/views/sessions/TerminalDetail.vue
+++ b/src/views/sessions/TerminalDetail.vue
@@ -34,8 +34,10 @@ export default {
        ],
        hasDelete: false,
        actions: {
-          hasDelete: false,
-          canDelete: false
+          formatterArgs: {
+            hasDelete: false,
+            canDelete: false
+          }
        }
      }
    }
--- a/src/views/users/Group/UserGroupDetail/index.vue
+++ b/src/views/users/Group/UserGroupDetail/index.vue
@@ -35,8 +35,10 @@ export default {
          }
        ],
        actions: {
-          canDelete: true,
-          canUpdate: true
+          formatterArgs: {
+            canDelete: true,
+            canUpdate: true
+          }
        }
      }
    }
--- a/src/views/users/User/UserDetail/UserAssetPermissionRules.vue
+++ b/src/views/users/User/UserDetail/UserAssetPermissionRules.vue
@@ -58,8 +58,10 @@ export default {
            label: this.$t('assets.SystemUsers')
          },
          actions: {
-            updateRoute: 'AssetPermissionUpdate',
-            detailRoute: 'AssetPermissionDetail'
+            formatterArgs: {
+              updateRoute: 'AssetPermissionUpdate',
+              detailRoute: 'AssetPermissionDetail'
+            }
          }
        }
      },
--- a/src/views/users/User/UserDetail/UserDatabasePermissionRules.vue
+++ b/src/views/users/User/UserDetail/UserDatabasePermissionRules.vue
@@ -50,7 +50,9 @@ export default {
            }
          },
          actions: {
-            updateRoute: 'DatabasePermissionUpdate'
+            formatterArgs: {
+              updateRoute: 'DatabasePermissionUpdate'
+            }
          }
        }
      },
--- a/src/views/users/User/UserDetail/UserRemoteAppPermissionRules.vue
+++ b/src/views/users/User/UserDetail/UserRemoteAppPermissionRules.vue
@@ -49,8 +49,10 @@ export default {
            }
          },
          actions: {
-            detailRoute: 'RemoteAppPermissionDetail',
-            updateRoute: 'RemoteAppPermissionUpdate'
+            formatterArgs: {
+              detailRoute: 'RemoteAppPermissionDetail',
+              updateRoute: 'RemoteAppPermissionUpdate'
+            }
          }
        }
      },
--- a/src/views/users/User/UserList.vue
+++ b/src/views/users/User/UserList.vue
@@ -30,16 +30,18 @@ export default {
            showOverflowTooltip: true
          },
          actions: {
-            hasDelete: () => this.currentOrgIsDefault,
-            extraActions: [
-              {
-                title: this.$t('users.Remove'),
-                name: 'remove',
-                type: 'warning',
-                has: () => !this.currentOrgIsDefault,
-                callback: this.removeUserFromOrg
-              }
-            ]
+            formatterArgs: {
+              hasDelete: () => this.currentOrgIsDefault,
+              extraActions: [
+                {
+                  title: this.$t('users.Remove'),
+                  name: 'remove',
+                  type: 'warning',
+                  has: () => !this.currentOrgIsDefault,
+                  callback: this.removeUserFromOrg
+                }
+              ]
+            }
          }
        }
      },
--- a/src/views/xpack/ChangeAuthPlan/ChangeAuthPlanDetail/ChangeAuthPlanExecution/ChangeAuthPlanExecutionDetail/ChangeAuthPlanExecutionTaskList.vue
+++ b/src/views/xpack/ChangeAuthPlan/ChangeAuthPlanDetail/ChangeAuthPlanExecution/ChangeAuthPlanExecutionDetail/ChangeAuthPlanExecutionTaskList.vue
@@ -43,22 +43,24 @@ export default {
          },
          actions: {
            prop: 'id',
-            hasDelete: false,
-            hasUpdate: false,
-            extraActions: [
-              {
-                name: 'retry',
-                type: 'info',
-                title: this.$t('xpack.ChangeAuthPlan.Retry'),
-                callback: function({ cellValue, tableData }) {
-                  this.$axios.put(
-                    `/api/v1/xpack/change-auth-plan/plan-execution-subtask/${cellValue}/`,
-                  ).then(res => {
-                    window.open(`/ops/celery/task/${res.task}/log/`, '_blank', 'toolbar=yes, width=900, height=600')
-                  })
-                }.bind(this)
-              }
-            ]
+            formatterArgs: {
+              hasDelete: false,
+              hasUpdate: false,
+              extraActions: [
+                {
+                  name: 'retry',
+                  type: 'info',
+                  title: this.$t('xpack.ChangeAuthPlan.Retry'),
+                  callback: function({ cellValue, tableData }) {
+                    this.$axios.put(
+                      `/api/v1/xpack/change-auth-plan/plan-execution-subtask/${cellValue}/`,
+                    ).then(res => {
+                      window.open(`/ops/celery/task/${res.task}/log/`, '_blank', 'toolbar=yes, width=900, height=600')
+                    })
+                  }.bind(this)
+                }
+              ]
+            }
          }
        }
      },
--- a/src/views/xpack/ChangeAuthPlan/ChangeAuthPlanDetail/ChangeAuthPlanExecution/ChangeAuthPlanExecutionList.vue
+++ b/src/views/xpack/ChangeAuthPlan/ChangeAuthPlanDetail/ChangeAuthPlanExecution/ChangeAuthPlanExecutionList.vue
@@ -60,26 +60,28 @@ export default {
          },
          actions: {
            prop: 'id',
-            hasDelete: false,
-            hasUpdate: false,
-            extraActions: [
-              {
-                name: 'log',
-                type: 'primary',
-                title: this.$t('xpack.ChangeAuthPlan.Log'),
-                callback: function({ cellValue, tableData }) {
-                  window.open(`/ops/celery/task/${cellValue}/log/`, '_blank', 'toolbar=yes, width=900, height=600')
+            formatterArgs: {
+              hasDelete: false,
+              hasUpdate: false,
+              extraActions: [
+                {
+                  name: 'log',
+                  type: 'primary',
+                  title: this.$t('xpack.ChangeAuthPlan.Log'),
+                  callback: function({ cellValue, tableData }) {
+                    window.open(`/ops/celery/task/${cellValue}/log/`, '_blank', 'toolbar=yes, width=900, height=600')
+                  }
+                },
+                {
+                  name: 'detail',
+                  title: this.$t('xpack.ChangeAuthPlan.Detail'),
+                  type: 'info',
+                  callback: function({ cellValue, tableData }) {
+                    return this.$router.push({ name: 'ChangeAuthPlanExecutionDetail', params: { id: cellValue }})
+                  }
                }
-              },
-              {
-                name: 'detail',
-                title: this.$t('xpack.ChangeAuthPlan.Detail'),
-                type: 'info',
-                callback: function({ cellValue, tableData }) {
-                  return this.$router.push({ name: 'ChangeAuthPlanExecutionDetail', params: { id: cellValue }})
-                }
-              }
-            ]
+              ]
+            }
          }
        }
      },
--- a/src/views/xpack/ChangeAuthPlan/ChangeAuthPlanList.vue
+++ b/src/views/xpack/ChangeAuthPlan/ChangeAuthPlanList.vue
@@ -35,21 +35,23 @@ export default {
          }
        },
        actions: {
-          extraActions: [
-            {
-              title: vm.$t('xpack.ChangeAuthPlan.Run'),
-              name: 'run',
-              type: 'info',
-              callback: function(data) {
-                this.$axios.post(
-                  `/api/v1/xpack/change-auth-plan/plan-execution/`,
-                  { plan: data.cellValue }
-                ).then(res => {
-                  window.open(`/ops/celery/task/${res.task}/log/`, '_blank', 'toolbar=yes, width=900, height=600')
-                })
-              }.bind(this)
-            }
-          ]
+          formatterArgs: {
+            extraActions: [
+              {
+                title: vm.$t('xpack.ChangeAuthPlan.Run'),
+                name: 'run',
+                type: 'info',
+                callback: function(data) {
+                  this.$axios.post(
+                    `/api/v1/xpack/change-auth-plan/plan-execution/`,
+                    { plan: data.cellValue }
+                  ).then(res => {
+                    window.open(`/ops/celery/task/${res.task}/log/`, '_blank', 'toolbar=yes, width=900, height=600')
+                  })
+                }.bind(this)
+              }
+            ]
+          }
        }
      },
      headerActions: {