Fixed: Fix the Drawer issue in the remote applications page

src/views/settings/Applet/AppProvider/AppProviderList.vue

@@ -78,5 +78,4 @@ export default {
 .App-Provider ::v-deep .protocol {
   margin-left: 3px;
 }
-
 </style>

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>

src/views/settings/Applet/Applet/AppletDetail/index.vue

@@ -52,12 +52,6 @@ export default {
         titlePrefix: this.$tc('AppletDetail')
       }
     }
-  },
-  mounted() {
   }
 }
 </script>
-
-<style scoped>
-
-</style>

src/views/settings/Applet/AppletHost/AppletHostCreateUpdate.vue

@@ -85,7 +85,3 @@ export default {
   methods: {}
 }
 </script>
-
-<style lang="less" scoped>
-
-</style>

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>

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>

src/views/settings/Applet/index.vue

@@ -56,7 +56,3 @@ export default {
   }
 }
 </script>
-
-<style scoped>
-
-</style>