Merge pull request #435 from wooln/feature-url-trans-detail

Feature: Add trans detail page router

admin/src/components.d.ts

@@ -22,6 +22,10 @@ declare module '@vue/runtime-core' {
     AMenu: typeof import('ant-design-vue/es')['Menu']
     AMenuItem: typeof import('ant-design-vue/es')['MenuItem']
     AModal: typeof import('ant-design-vue/es')['Modal']
+    APopconfirm: typeof import('ant-design-vue/es')['Popconfirm']
+    ARangePicker: typeof import('ant-design-vue/es')['RangePicker']
+    ASelect: typeof import('ant-design-vue/es')['Select']
+    ASelectOption: typeof import('ant-design-vue/es')['SelectOption']
     ASubMenu: typeof import('ant-design-vue/es')['SubMenu']
     ATable: typeof import('ant-design-vue/es')['Table']
     ATag: typeof import('ant-design-vue/es')['Tag']

admin/src/router/index.ts

@@ -51,7 +51,13 @@ export const allowRouter: Array<IMenubarList> = [
                         //   path: '/admin/global-transactions/unfinished',
                         //   component: Components['UnfinishedTransactions'],
                         //   meta: { title: 'Unfinished Transactions' },
-                    }
+                    }, 
+                    {
+                        name: 'TransactionDetail',
+                        path: '/admin/global-transactions/detail/:gid',
+                        component: Components['DialogTransactionDetail'],
+                        meta: { title: 'Transaction Detail' }
+                    },
                 ]
             },
             {

admin/src/views/Dashboard/GlobalTransactions/AllTransactions.vue

@@ -55,7 +55,7 @@
     </div>
     <a-divider />
     <div>
-        <a-table :columns="columns" :data-source="dataSource" :loading="loading" :pagination="false" :scroll="{ x: true }">
+        <a-table :columns="columns" :data-source="dataSource" :loading="loading" :pagination="false" :scroll="{ x: true }" size="small" >
             <template #bodyCell="{column, record}">
                 <template v-if="column.key === 'status'">
                     <span>
@@ -66,22 +66,9 @@
                     </span>
                 </template>
                 <template v-else-if="column.key === 'action'">
-                    <span>
-                        <a class="mr-2 font-medium" @click="handleTransactionDetail(record.gid)">Detail</a>
-                        <a-popconfirm
-                            title="Force stop it?"
-                            ok-text="Yes, stop it"
-                            ok-type="danger"
-                            cancel-text="No"
-                            @confirm="handleTransactionStop(record.gid)"                            
-                        >
-                            <a-button
-                                danger
-                                type="link"
-                                :disabled="record.status==='failed' || record.status==='succeed'"                                
-                            >ForceStop</a-button>
-                        </a-popconfirm>                        
-                        <!-- <a class="font-medium text-red-400"  @click="handleTransactionStop(record.gid)">ForceStop</a> -->
+                    <span style="width: 90px; display: block;">
+                        <a class="mr-2 font-medium" @click="handleTransactionDetail(record.gid)">Dialog</a>
+                        <a class="mr-2 font-medium" target="_blank" :href="'./detail/'+record.gid">Page</a>                        
                     </span>
                 </template>
             </template>
@@ -95,10 +82,10 @@
     </div>
 </template>
 <script setup lang="ts">
-import { forceStopTransaction, IListAllTransactionsReq, listAllTransactions } from '/@/api/api_dtm'
+import { IListAllTransactionsReq, listAllTransactions } from '/@/api/api_dtm'
 import { computed, ref } from 'vue-demi'
 import { usePagination } from 'vue-request'
-import DialogTransactionDetail from './_Components/DialogTransactionDetail.vue'
+import DialogTransactionDetail from './DialogTransactionDetail.vue'
 
 const gid = ref('')
 const status = ref('')
@@ -230,12 +217,6 @@ const handleTransactionDetail = (gid: string) => {
     transactionDetail.value?.open(gid)
 }
 
-const handleTransactionStop = async(gid: string) => {
-    await forceStopTransaction(gid)
-    let position = data.value?.data.next_position || '';
-    innerSearch(position);  
-}
-
 </script>
 
 <style lang="postcss" scoped>

admin/src/views/Dashboard/GlobalTransactions/_Components/DialogTransactionDetail.vue → admin/src/views/Dashboard/GlobalTransactions/DialogTransactionDetail.vue

@@ -1,11 +1,23 @@
 <template>
     <div>
-        <a-modal v-model:visible="visible" title="Transaction Detail" width="100%" wrap-class-name="full-modal">
+        <a-modal v-model:visible="visible" :closable="closeable" title="Transaction Detail" width="100%" wrap-class-name="full-modal">
             <template #footer>
-                <a-button type="primary" @click="close">Close</a-button>
+                <a-button type="primary" @click="close" v-if="closeable">Close</a-button>
             </template>            
             <h2>Transaction Info</h2> 
-            <a-button type="primary" @click="refresh" :loading="loading" >Refresh</a-button>      
+            <a-button type="primary" @click="refresh" :loading="loading" class="action-button">Refresh</a-button>      
+            <a-popconfirm
+                title="Force stop it?"
+                ok-text="Yes, stop it"
+                ok-type="danger"
+                cancel-text="No"
+                class="action-button"
+                :disabled="transaction?.status==='failed' || transaction?.status==='succeed'"     
+                @confirm="handleTransactionStop(<string>transaction?.gid)"                            
+            >
+                <a-button danger type="default" :disabled="transaction?.status==='failed' || transaction?.status==='succeed'"                                          
+                >ForceStop</a-button>
+            </a-popconfirm>                        
             <a-descriptions bordered size="small" :column="{ xxl: 4, xl: 3, lg: 3, md: 3, sm: 2, xs: 1 }">
                 <a-descriptions-item label="Status">                          
                     <a-tag :color="transaction?.status === 'succeed' ? 'green' : 'volcano'">{{ transaction?.status }}</a-tag>
@@ -37,19 +49,22 @@
 import { ref } from 'vue'
 import { getTransaction } from '/@/api/api_dtm'
 import screenfull from '/@/components/Screenfull/index.vue'
+import { useRoute } from 'vue-router';
+import { string } from 'vue-types';
+import { forceStopTransaction} from '/@/api/api_dtm'
 // import VueJsonPretty from 'vue-json-pretty';
 // import 'vue-json-pretty/lib/styles.css'
+const route = useRoute();
 
 const loading = ref(false)
 const dataSource = ref<Branches[]>([])
 const transaction = ref<Transaction>()
 const visible = ref(false)
 const textVal = ref('')
+const closeable = ref(true)
 
 
-
-let _gid = '';
-
+let _gid = <string>route.params.gid;
 const open = async(gid: string) => {
     _gid = gid;
     loading.value = true;
@@ -60,6 +75,10 @@ const open = async(gid: string) => {
     visible.value = true
     loading.value = false;
 }
+if(_gid) {
+    open(<string>route.params.gid);
+    closeable.value = false;
+}
 
 const close = async() => {    
     visible.value = false;
@@ -97,6 +116,11 @@ const columns = [
     }
 ]
 
+const handleTransactionStop = async(gid: string) => {
+    await forceStopTransaction(gid);
+    refresh();
+}
+
 type Data = {
     branches: {
         gid: string
@@ -173,4 +197,7 @@ defineExpose({
   .ant-modal {
     height: 100%;
   }
+.action-button {
+    margin-right: 10px;
+}
 </style>