Merge branch 'pam' of github.com:jumpserver/lina into pam

2026-01-15 14:24:39 +00:00 · 2025-03-10 14:25:39 +08:00
parent 80973de095 ef1442fde9
commit 203e984144
31 changed files with 197 additions and 198 deletions
--- a/src/utils/common.js
+++ b/src/utils/common.js
@@ -272,7 +272,7 @@ export const copy = _.throttle(function(value) {
  inputDom.select()
  document?.execCommand('copy')
  message({
-    message: i18n.t('Copied'),
+    message: i18n.t('CopySuccess'),
    type: 'success',
    duration: 1000
  })
--- a/src/views/accounts/AccountBackup/Executions/AccountBackupExecutionList.vue
+++ b/src/views/accounts/AccountBackup/Executions/AccountBackupExecutionList.vue
@@ -61,10 +61,10 @@ export default {
            formatter: DetailFormatter,
            formatterArgs: {
              drawer: true,
-              getTitle: ({ row }) => row.snapshot.name,
+              getTitle: ({ row }) => row.automation.name,
              getRoute: ({ row }) => ({
                name: 'AccountBackupDetail',
-                params: { id: row.automation }
+                params: { id: row.automation.id }
              })
            },
            id: ({ row }) => row.automation
--- a/src/views/accounts/AccountChangeSecret/Detail/AccountChangeSecretAsset/index.vue
+++ b/src/views/accounts/AccountChangeSecret/Detail/AccountChangeSecretAsset/index.vue
@@ -45,6 +45,7 @@ export default {
          name: {
            formatter: DetailFormatter,
            formatterArgs: {
+              drawer: true,
              route: 'AssetDetail',
              can: this.$hasPerm('assets.view_asset')
            }
--- a/src/views/accounts/AccountChangeSecret/ExecutionDetail/AccountChangeSecretRecord.vue
+++ b/src/views/accounts/AccountChangeSecret/ExecutionDetail/AccountChangeSecretRecord.vue
@@ -150,10 +150,14 @@ export default {
                  label: this.$t('Failed')
                },
                {
-                  label: this.$t('Execution'),
-                  value: 'execution_id'
+                  value: 'pending',
+                  label: this.$t('Pending')
                }
              ]
+            },
+            {
+              label: this.$t('ExecutionID'),
+              value: 'execution_id'
            }
          ]
        },
--- a/src/views/accounts/AccountChangeSecret/Executions/AccountChangeSecretExecutionList.vue
+++ b/src/views/accounts/AccountChangeSecret/Executions/AccountChangeSecretExecutionList.vue
@@ -55,12 +55,12 @@ export default {
            formatterArgs: {
              drawer: true,
              getDrawerTitle({ row }) {
-                return row.snapshot.name
+                return row.automation.name
              },
-              getTitle: ({ row }) => row.snapshot.name,
+              getTitle: ({ row }) => row.automation.name,
              getRoute: ({ row }) => ({
                name: 'AccountChangeSecretDetail',
-                params: { id: row.automation }
+                params: { id: row.automation.id }
              })
            },
            id: ({ row }) => row.automation
--- a/src/views/accounts/AccountChangeSecret/Overview/FailedAccountSummary.vue
+++ b/src/views/accounts/AccountChangeSecret/Overview/FailedAccountSummary.vue
@@ -120,7 +120,7 @@ export default {
                },
                {
                  name: 'ignoreFail',
-                  title: this.$t('ignoreFail'),
+                  title: this.$t('IgnoreFail'),
                  can: this.$hasPerm('accounts.view_changesecretrecord'),
                  type: 'primary',
                  callback: ({ row }) => {
--- a/src/views/accounts/AccountDiscover/TaskExecutionList.vue
+++ b/src/views/accounts/AccountDiscover/TaskExecutionList.vue
@@ -67,10 +67,10 @@ export default {
            label: this.$t('Automation'),
            formatter: DetailFormatter,
            formatterArgs: {
-              getTitle: ({ row }) => row.snapshot.name,
+              getTitle: ({ row }) => row.automation.name,
              getRoute: ({ row }) => ({
                name: 'AccountDiscoverTaskDetail',
-                params: { id: row.automation }
+                params: { id: row.automation.id }
              }),
              drawer: true
            },
--- a/src/views/accounts/AccountPush/AccountPushExecutionList.vue
+++ b/src/views/accounts/AccountPush/AccountPushExecutionList.vue
@@ -60,13 +60,13 @@ export default {
            formatter: DetailFormatter,
            formatterArgs: {
              drawer: true,
-              getTitle: ({ row }) => row.snapshot.name,
+              getTitle: ({ row }) => row.automation.name,
              getRoute: ({ row }) => ({
                name: 'AccountPushDetail',
-                params: { id: row.automation }
+                params: { id: row.automation.id }
              }),
              getDrawerTitle({ row }) {
-                return row.snapshot.name
+                return row.automation.name
              }
            },
            id: ({ row }) => row.automation
--- a/src/views/accounts/AccountPush/ExecutionDetail/AccountPushRecord.vue
+++ b/src/views/accounts/AccountPush/ExecutionDetail/AccountPushRecord.vue
@@ -1,23 +1,14 @@
 <template>
-  <div>
-    <RecordViewSecret
-      v-if="showViewSecretDialog"
-      :url="secretUrl"
-      :visible.sync="showViewSecretDialog"
-    />
-    <GenericListTable :header-actions="headerActions" :table-config="tableConfig" />
-  </div>
+  <GenericListTable :header-actions="headerActions" :table-config="tableConfig" />
 </template>

 <script>
-import GenericListTable from '@/layout/components/GenericListTable/index.vue'
+import { GenericListTable } from '@/layout/components'
 import { DetailFormatter } from '@/components/Table/TableFormatters'
-import RecordViewSecret from '@/components/Apps/ChangeSecret/RecordViewSecret.vue'

 export default {
  name: 'AccountPushRecord',
  components: {
-    RecordViewSecret,
    GenericListTable
  },
  props: {
@@ -29,8 +20,6 @@ export default {
  },
  data() {
    return {
-      secretUrl: '',
-      showViewSecretDialog: false,
      tableConfig: {
        url: '/api/v1/accounts/push-account-records/',
        columns: [
@@ -82,6 +71,9 @@ export default {
              }
              return <i Class='fa fa-times text-danger'/>
            }
+          },
+          actions: {
+            has: false
          }
        }
      },
@@ -119,11 +111,15 @@ export default {
                {
                  value: 'failed',
                  label: this.$t('Failed')
+                },
+                {
+                  value: 'pending',
+                  label: this.$t('Pending')
                }
              ]
            },
            {
-              label: this.$t('Execution'),
+              label: this.$t('ExecutionID'),
              value: 'execution_id'
            }
          ]
@@ -133,7 +129,3 @@ export default {
  }
 }
 </script>
-
-<style scoped>
-
-</style>
--- a/src/views/accounts/AccountPush/index.vue
+++ b/src/views/accounts/AccountPush/index.vue
@@ -31,9 +31,7 @@ export default {
            title: this.$t('ExecutionRecord'),
            name: 'AccountPushRecord',
            hidden: () => !this.$hasPerm('accounts.view_pushsecretrecord'),
-            component: () => import(
-              '@/views/accounts/AccountPush/ExecutionDetail/AccountPushRecord.vue'
-              )
+            component: () => import('@/views/accounts/AccountPush/ExecutionDetail/AccountPushRecord.vue')
          }
        ]
      }
--- a/src/views/accounts/AccountTemplate/Detail/Account.vue
+++ b/src/views/accounts/AccountTemplate/Detail/Account.vue
@@ -76,21 +76,28 @@ export default {
          name: {
            formatter: DetailFormatter,
            formatterArgs: {
-              route: 'AssetAccountDetail',
-              can: vm.$hasPerm('accounts.view_account')
+              drawer: true,
+              can: vm.$hasPerm('accounts.view_account'),
+              getRoute: ({ row }) => {
+                return {
+                  name: 'AssetAccountDetail',
+                  params: { id: row.id }
+                }
+              }
            }
          },
          asset: {
            label: this.$t('Asset'),
-            formatter: function(row) {
-              const to = {
-                name: 'AssetDetail',
-                params: { id: row.asset.id }
-              }
-              if (vm.$hasPerm('assets.view_asset')) {
-                return <router-link to={to}>{row.asset.name}</router-link>
-              } else {
-                return <span>{row.asset.name}</span>
+            formatter: DetailFormatter,
+            formatterArgs: {
+              drawer: true,
+              can: vm.$hasPerm('assets.view_asset'),
+              getTitle: ({ row }) => row.asset.name,
+              getRoute: ({ row }) => {
+                return {
+                  name: 'AssetDetail',
+                  params: { id: row.asset.id }
+                }
              }
            }
          },
--- a/src/views/accounts/RiskDetect/AccountCheckEngine.vue
+++ b/src/views/accounts/RiskDetect/AccountCheckEngine.vue
@@ -19,18 +19,15 @@ export default {
          'name', 'comment'
        ],
        columnsShow: {
-          min: ['name', 'actions'],
+          min: ['name'],
          default: [
-            'name', 'comment', 'actions'
+            'name', 'comment'
          ]
        },
        columnsMeta: {
          name: {
            formatter: DetailFormatter
          }
-        },
-        actions: {
-          formatterArgs: {}
        }
      },
      headerActions: {
--- a/src/views/accounts/RiskDetect/AccountCheckExecutionList.vue
+++ b/src/views/accounts/RiskDetect/AccountCheckExecutionList.vue
@@ -61,10 +61,10 @@ export default {
            formatter: DetailFormatter,
            formatterArgs: {
              drawer: true,
-              getTitle: ({ row }) => row.snapshot.name,
+              getTitle: ({ row }) => row.automation.name,
              getRoute: ({ row }) => ({
                name: 'AccountCheckDetail',
-                params: { id: row.automation }
+                params: { id: row.automation.id }
              })
            },
            id: ({ row }) => row.automation
--- a/src/views/assets/Asset/AssetDetail/PermUser.vue
+++ b/src/views/assets/Asset/AssetDetail/PermUser.vue
@@ -50,9 +50,16 @@ export default {
        },
        columnsMeta: {
          name: {
-            formatter: vm.$hasPerm('users.view_user') ? DetailFormatter : '',
+            formatter: DetailFormatter,
            formatterArgs: {
-              route: 'UserDetail'
+              drawer: true,
+              can: vm.$hasPerm('users.view_user'),
+              getRoute: ({ row }) => {
+                return {
+                  name: 'UserDetail',
+                  params: { id: row.id }
+                }
+              }
            }
          },
          source: {
@@ -126,7 +133,7 @@ export default {
      UserGroupCardConfig: {
        title: this.$t('UserGroups'),
        url: `/api/v1/assets/assets/${vm.object.id}/perm-user-groups/`,
-        detailRoute: 'UserGroupDetail',
+        detailRoute: () => import('@/views/users/Group/UserGroupDetail'),
        buttonTitle: this.$t('ViewPerm'),
        buttonClickCallback(obj) {
          vm.GenericListTableDialogConfig.visible = true
--- a/src/views/assets/Asset/AssetDetail/components/PermUserGroupCard.vue
+++ b/src/views/assets/Asset/AssetDetail/components/PermUserGroupCard.vue
@@ -1,52 +1,62 @@
 <template>
-  <IBox
-    :fa="icon"
-    :title="title"
-    :type="type"
-    v-bind="$attrs"
-  >
-    <table class="card-table">
-      <div v-cloak v-if="iObjects.length > 0">
-        <tr v-for="obj of iObjects" :key="obj.value" class="item">
-          <td>
-            <el-tooltip
-              :content="obj.label"
-              :open-delay="500"
-              effect="dark"
-              placement="left"
-              style="margin: 4px;"
-            >
-              <el-link class="detail" @click="goDetail(obj)">
-                {{ obj.label }}
-              </el-link>
-            </el-tooltip>
-          </td>
-          <td>
-            <el-button
-              size="mini"
-              style="float: right"
-              type="primary"
-              @click="buttonClickCallback(obj)"
-            >
-              {{ buttonTitle }}
-            </el-button>
-          </td>
-        </tr>
-      </div>
-      <div v-cloak v-else style="text-align: center;">
-        {{ $t('NoData') }}
-      </div>
-    </table>
-  </IBox>
+  <div>
+    <IBox
+      :fa="icon"
+      :title="title"
+      :type="type"
+      v-bind="$attrs"
+    >
+      <table class="card-table">
+        <div v-cloak v-if="iObjects.length > 0">
+          <tr v-for="obj of iObjects" :key="obj.value" class="item">
+            <td>
+              <el-tooltip
+                :content="obj.label"
+                :open-delay="500"
+                effect="dark"
+                placement="left"
+                style="margin: 4px;"
+              >
+                <el-link class="detail" @click="goDetail(obj)">
+                  {{ obj.label }}
+                </el-link>
+              </el-tooltip>
+            </td>
+            <td>
+              <el-button
+                size="mini"
+                style="float: right"
+                type="primary"
+                @click="buttonClickCallback(obj)"
+              >
+                {{ buttonTitle }}
+              </el-button>
+            </td>
+          </tr>
+        </div>
+        <div v-cloak v-else style="text-align: center;">
+          {{ $t('NoData') }}
+        </div>
+      </table>
+    </IBox>
+    <Drawer
+      :component="detailDrawer"
+      :has-footer="false"
+      :title="title"
+      :visible.sync="drawerVisible"
+    />
+  </div>
 </template>

 <script>
 import IBox from '@/components/Common/IBox'
+import Drawer from '@/components/Drawer/index.vue'

 export default {
  name: 'PermUserGroupCard',
  components: {
-    IBox
+    IBox,
+    Drawer
  },
  props: {
    icon: {
@@ -66,7 +76,7 @@ export default {
      required: true
    },
    detailRoute: {
-      type: String,
+      type: [String, Function],
      default: ''
    },
    buttonTitle: {
@@ -81,6 +91,8 @@ export default {
  },
  data() {
    return {
+      detailDrawer: '',
+      drawerVisible: false,
      objects: []
    }
  },
@@ -101,7 +113,14 @@ export default {
      this.objects = data
    },
    goDetail(obj) {
-      this.$router.push({ name: this.detailRoute, params: { id: obj.id }})
+      this.detailDrawer = this.detailRoute
+      this.$store.dispatch('common/setDrawerActionMeta', {
+        action: 'create',
+        row: {},
+        id: obj.id
+      }).then(() => {
+        this.drawerVisible = true
+      })
    }
  }
 }
--- a/src/views/settings/Applet/AppProvider/AppProviderList.vue
+++ b/src/views/settings/Applet/AppProvider/AppProviderList.vue
@@ -78,5 +78,4 @@ export default {
 .App-Provider ::v-deep .protocol {
  margin-left: 3px;
 }
-
 </style>
--- a/src/views/settings/Applet/Applet/AppletDetail/AppletHosts.vue
+++ b/src/views/settings/Applet/Applet/AppletDetail/AppletHosts.vue
@@ -1,10 +1,14 @@
 <template>
  <el-row :gutter="20">
-    <ListTable :header-actions="headerActions" :table-config="config" />
+    <ListTable
+      :header-actions="headerActions"
+      :table-config="config"
+      :detail-drawer="detailDrawer"
+    />
  </el-row>
 </template>

-<script type="text/jsx">
+<script>
 import { DrawerListTable as ListTable } from '@/components'
 import { DetailFormatter } from '@/components/Table/TableFormatters'
 import { openTaskPage } from '@/utils/jms'
@@ -24,6 +28,7 @@ export default {
  data() {
    const vm = this
    return {
+      detailDrawer: () => import('./Detail.vue'),
      headerActions: {
        hasCreate: false,
        hasImport: false,
@@ -67,6 +72,7 @@ export default {
            label: this.$t('DisplayName'),
            formatter: DetailFormatter,
            formatterArgs: {
+              drawer: true,
              can: vm.$hasPerm('assets.view_asset'),
              getTitle: ({ row }) => row.host.name,
              getRoute: ({ row }) => ({
@@ -124,7 +130,3 @@ export default {
  }
 }
 </script>
-
-<style scoped>
-
-</style>
--- a/src/views/settings/Applet/Applet/AppletDetail/index.vue
+++ b/src/views/settings/Applet/Applet/AppletDetail/index.vue
@@ -52,12 +52,6 @@ export default {
        titlePrefix: this.$tc('AppletDetail')
      }
    }
-  },
-  mounted() {
  }
 }
 </script>
-
-<style scoped>
-
-</style>
--- a/src/views/settings/Applet/AppletHost/AppletHostCreateUpdate.vue
+++ b/src/views/settings/Applet/AppletHost/AppletHostCreateUpdate.vue
@@ -85,7 +85,3 @@ export default {
  methods: {}
 }
 </script>
-
-<style lang="less" scoped>
-
-</style>
--- a/src/views/settings/Applet/AppletHost/AppletHostDetail/Applets.vue
+++ b/src/views/settings/Applet/AppletHost/AppletHostDetail/Applets.vue
@@ -1,7 +1,7 @@
 <template>
  <TwoCol>
    <template>
-      <ListTable :header-actions="headerConfig" :table-config="config" />
+      <ListTable :header-actions="headerConfig" :table-config="config" :detail-drawer="detailDrawer" />
    </template>
    <template #right>
      <QuickActions :actions="quickActions" type="primary" />
@@ -10,7 +10,7 @@
 </template>

 <script type="text/jsx">
-import { ListTable, QuickActions } from '@/components'
+import { DrawerListTable as ListTable, QuickActions } from '@/components'
 import { openTaskPage } from '@/utils/jms'
 import { DetailFormatter } from '@/components/Table/TableFormatters'
 import TwoCol from '@/layout/components/Page/TwoColPage.vue'
@@ -31,6 +31,7 @@ export default {
  },
  data() {
    return {
+      detailDrawer: () => import('@/views/settings/Applet/Applet/AppletDetail/index'),
      headerConfig: {
        hasLeftActions: false,
        hasImport: false
@@ -46,6 +47,7 @@ export default {
            label: this.$t('DisplayName'),
            formatter: DetailFormatter,
            formatterArgs: {
+              drawer: true,
              getIcon: ({ row }) => row.applet?.icon,
              getTitle: ({ row }) => row.applet.display_name,
              getRoute: ({ row }) => ({
@@ -171,7 +173,3 @@ export default {
  }
 }
 </script>
-
-<style scoped>
-
-</style>
--- a/src/views/settings/Applet/AppletHost/AppletHostList.vue
+++ b/src/views/settings/Applet/AppletHost/AppletHostList.vue
@@ -3,7 +3,11 @@
    <el-alert type="success">
      <span v-sanitize="$t('AppletHostSelectHelpMessage')" />
    </el-alert>
-    <ListTable class="applet-host" v-bind="$data" />
+    <ListTable
+      class="applet-host"
+      :create-drawer="createDrawer"
+      v-bind="$data"
+    />
  </div>
 </template>

@@ -18,27 +22,9 @@ export default {
    ListTable
  },
  data() {
-    const vm = this
-    const onAction = (row, action) => {
-      let routeAction = action
-      if (action === 'Clone') {
-        routeAction = 'Create'
-      }
-      const routeName = 'AppletHost' + routeAction
-      const route = {
-        name: routeName,
-        params: {},
-        query: {}
-      }
-      if (action === 'Clone') {
-        route.query.clone_from = row.id
-      } else if (action === 'Update') {
-        route.params.id = row.id
-        route.query.platform = row.platform.id
-      }
-      vm.$router.push(route)
-    }
    return {
+      createDrawer: () => import('./AppletHostCreateUpdate.vue'),
+      detailDrawer: () => import('./AppletHostDetail/index.vue'),
      tableConfig: {
        url: '/api/v1/terminal/applet-hosts/',
        columnsExclude: ['info', 'auto_config', 'gathered_info', 'deploy_options'],
@@ -76,8 +62,6 @@ export default {
          },
          actions: {
            formatterArgs: {
-              onUpdate: ({ row }) => onAction(row, 'Update'),
-              onClone: ({ row }) => onAction(row, 'Clone'),
              performDelete: ({ row }) => {
                const id = row.id
                const url = `/api/v1/terminal/applet-hosts/${id}/`
@@ -117,5 +101,4 @@ export default {
 .applet-host ::v-deep .protocol {
  margin-left: 3px;
 }
-
 </style>
--- a/src/views/settings/Applet/index.vue
+++ b/src/views/settings/Applet/index.vue
@@ -56,7 +56,3 @@ export default {
  }
 }
 </script>
-
-<style scoped>
-
-</style>
--- a/src/views/settings/Auth/OIDC.vue
+++ b/src/views/settings/Auth/OIDC.vue
@@ -116,9 +116,6 @@ export default {
          'AUTH_OPENID_USE_NONCE': {
            hidden: (form) => form['AUTH_OPENID_KEYCLOAK']
          },
-          'AUTH_OPENID_ALWAYS_UPDATE_USER': {
-            hidden: (form) => form['AUTH_OPENID_KEYCLOAK']
-          },
          'AUTH_OPENID_IGNORE_SSL_VERIFICATION': {
          },
          'AUTH_OPENID_SHARE_SESSION': {
--- a/src/views/settings/Storage/CommandStorage.vue
+++ b/src/views/settings/Storage/CommandStorage.vue
@@ -1,5 +1,10 @@
 <template>
-  <ListTable ref="ListTable" :header-actions="commandActions" :table-config="commandTableConfig" />
+  <ListTable
+    ref="ListTable"
+    :header-actions="commandActions"
+    :table-config="commandTableConfig"
+    :create-drawer="createDrawer"
+  />
 </template>

 <script>
@@ -20,6 +25,7 @@ export default {
  data() {
    const vm = this
    return {
+      createDrawer: () => import('./CommandStorageCreateUpdate.vue'),
      commandActions: {
        canCreate: this.$hasPerm('terminal.add_commandstorage'),
        hasExport: false,
@@ -27,9 +33,6 @@ export default {
        hasRefresh: true,
        hasMoreActions: false,
        moreCreates: {
-          callback: (item) => {
-            this.$router.push({ name: 'CreateCommandStorage', query: { type: item.name }})
-          },
          dropdown: [
            {
              name: 'es',
@@ -73,9 +76,6 @@ export default {
              canUpdate: function({ row }) {
                return (row.name !== 'default' && row.name !== 'null' && vm.$hasPerm('terminal.change_commandstorage'))
              },
-              onUpdate: function({ row }) {
-                this.$router.push({ name: 'CommandStorageUpdate', params: { id: row.id }, query: { type: row.type.value }})
-              },
              canDelete: function({ row }) {
                return (row.name !== 'default' && row.name !== 'null' && vm.$hasPerm('terminal.delete_commandstorage'))
              },
@@ -123,9 +123,4 @@ export default {
    }
  }
 }
-
 </script>
-
-<style scoped>
-
-</style>
--- a/src/views/settings/Storage/ReplayStorage.vue
+++ b/src/views/settings/Storage/ReplayStorage.vue
@@ -1,5 +1,10 @@
 <template>
-  <ListTable ref="ListTable" :header-actions="replayActions" :table-config="replayTableConfig" />
+  <ListTable
+    ref="ListTable"
+    :header-actions="replayActions"
+    :table-config="replayTableConfig"
+    :create-drawer="createDrawer"
+  />
 </template>
 <script>
 import { DrawerListTable as ListTable } from '@/components'
@@ -15,6 +20,7 @@ export default {
    const vm = this
    const storageOptions = this.getReplayStorageOptions()
    return {
+      createDrawer: () => import('./ReplayStorageCreateUpdate.vue'),
      replayActions: {
        canCreate: this.$hasPerm('terminal.add_replaystorage'),
        hasExport: false,
@@ -22,9 +28,6 @@ export default {
        hasRefresh: true,
        hasMoreActions: false,
        moreCreates: {
-          callback: (item) => {
-            this.$router.push({ name: 'CreateReplayStorage', query: { type: item.name.toLowerCase() }})
-          },
          dropdown: storageOptions
        }
      },
@@ -60,9 +63,6 @@ export default {
          },
          actions: {
            formatterArgs: {
-              onUpdate: function({ row }) {
-                this.$router.push({ name: 'ReplayStorageUpdate', params: { id: row.id }, query: { type: row.type.value }})
-              },
              canUpdate: function({ row }) {
                return (
                  row.name !== 'default' && row.name !== 'null' && vm.$hasPerm('terminal.change_replaystorage')
--- a/src/views/settings/Storage/index.vue
+++ b/src/views/settings/Storage/index.vue
@@ -48,7 +48,3 @@ export default {
  }
 }
 </script>
-
-<style scoped>
-
-</style>
--- a/src/views/settings/Terminal/Component/TerminalDetail/index.vue
+++ b/src/views/settings/Terminal/Component/TerminalDetail/index.vue
@@ -38,8 +38,7 @@ export default {
        actions: {
          canUpdate: this.$hasPerm('terminal.change_terminal'),
          hasDelete: this.$hasPerm('terminal.delete_terminal'),
-          canDelete: this.$hasPerm('terminal.delete_terminal'),
-          detailApiUrl: `/api/v1/terminal/terminals/${this.$route.params.id}/`
+          canDelete: this.$hasPerm('terminal.delete_terminal')
        },
        titlePrefix: this.$t('TerminalDetail')
      }
@@ -49,7 +48,3 @@ export default {
  }
 }
 </script>
-
-<style scoped>
-
-</style>
--- a/src/views/settings/Terminal/Component/TerminalList.vue
+++ b/src/views/settings/Terminal/Component/TerminalList.vue
@@ -1,6 +1,12 @@
 <template>
  <div>
-    <ListTable :header-actions="headerActions" :table-config="tableConfig" />
+    <ListTable
+      ref="ListTable"
+      :header-actions="headerActions"
+      :table-config="tableConfig"
+      :create-drawer="createDrawer"
+      :detail-drawer="detailDrawer"
+    />
    <Dialog
      :destroy-on-close="true"
      :show-cancel="false"
@@ -14,11 +20,13 @@
 </template>

 <script>
-import ListTable from '@/components/Table/ListTable'
-import { GenericCreateUpdateForm } from '@/layout/components'
 import Dialog from '@/components/Dialog'
 import Select2 from '@/components/Form/FormFields/Select2'

+import { DrawerListTable as ListTable } from '@/components'
+import { GenericCreateUpdateForm } from '@/layout/components'
+import { DetailFormatter } from '@/components/Table/TableFormatters'
+
 export default {
  components: {
    ListTable,
@@ -28,6 +36,8 @@ export default {
  data() {
    const vm = this
    return {
+      createDrawer: () => import('./TerminalUpdate.vue'),
+      detailDrawer: () => import('./TerminalDetail/index.vue'),
      dialogSettings: {
        selectedRows: [],
        visible: false,
@@ -110,8 +120,17 @@ export default {
        columnsMeta: {
          name: {
            sortable: 'custom',
+            formatter: DetailFormatter,
            formatterArgs: {
-              route: 'TerminalDetail'
+              drawer: true,
+              getRoute: ({ row }) => {
+                return {
+                  name: 'TerminalDetail',
+                  params: {
+                    id: row.id
+                  }
+                }
+              }
            }
          },
          stat: {
--- a/src/views/settings/Terminal/Endpoint/EndpointList.vue
+++ b/src/views/settings/Terminal/Endpoint/EndpointList.vue
@@ -1,12 +1,17 @@
 <template>
  <div>
    <el-alert v-sanitize="helpMessage" type="success" />
-    <ListTable :header-actions="headerActions" :table-config="tableConfig" />
+    <ListTable
+      ref="ListTable"
+      :header-actions="headerActions"
+      :table-config="tableConfig"
+      :create-drawer="createDrawer"
+    />
  </div>
 </template>

 <script>
-import ListTable from '@/components/Table/ListTable'
+import { DrawerListTable as ListTable } from '@/components'

 export default {
  name: 'EndpointList',
@@ -15,6 +20,7 @@ export default {
  },
  data() {
    return {
+      createDrawer: () => import('./EndpointCreateUpdate.vue'),
      helpMessage: this.$t('EndpointListHelpMessage'),
      tableConfig: {
        url: '/api/v1/terminal/endpoints/',
@@ -51,7 +57,3 @@ export default {
  }
 }
 </script>
-
-<style>
-
-</style>
--- a/src/views/settings/Terminal/EndpointRule/EndpointRuleList.vue
+++ b/src/views/settings/Terminal/EndpointRule/EndpointRuleList.vue
@@ -1,12 +1,17 @@
 <template>
  <div>
    <el-alert v-sanitize="helpMessage" type="success" />
-    <ListTable :header-actions="headerActions" :table-config="tableConfig" />
+    <ListTable
+      ref="ListTable"
+      :header-actions="headerActions"
+      :table-config="tableConfig"
+      :create-drawer="createDrawer"
+    />
  </div>
 </template>

 <script>
-import ListTable from '@/components/Table/ListTable'
+import { DrawerListTable as ListTable } from '@/components'

 export default {
  name: 'EndpointRule',
@@ -15,6 +20,7 @@ export default {
  },
  data() {
    return {
+      createDrawer: () => import('./EndpointRuleCreateUpdate.vue'),
      helpMessage: this.$t('EndpointRuleListHelpMessage'),
      tableConfig: {
        url: '/api/v1/terminal/endpoint-rules/',
@@ -46,7 +52,3 @@ export default {
  }
 }
 </script>
-
-<style scoped>
-
-</style>
--- a/src/views/users/Group/UserGroupDetail/GroupInfo.vue
+++ b/src/views/users/Group/UserGroupDetail/GroupInfo.vue
@@ -22,7 +22,7 @@ export default {
  },
  data() {
    return {
-      url: `/api/v1/users/groups/${this.object.id}/`,
+      url: this.object.id ? `/api/v1/users/groups/${this.object.id}/` : '/api/v1/users/groups/',
      excludes: ['users']
    }
  },