From 95a09ce6f2fa3655992142622122d33ab7cae73d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=BE=90=E4=BA=91=E9=87=91YunjinXu?= <xuyunjin@foxmail.com>
Date: Wed, 14 Jun 2023 09:00:50 +0800
Subject: [PATCH 1/2] Add trans detail page router

---
 admin/src/components.d.ts                        |  4 ++++
 admin/src/router/index.ts                        |  8 +++++++-
 .../GlobalTransactions/AllTransactions.vue       |  9 +++++----
 .../DialogTransactionDetail.vue                  | 16 +++++++++++-----
 4 files changed, 27 insertions(+), 10 deletions(-)
 rename admin/src/views/Dashboard/GlobalTransactions/{_Components => }/DialogTransactionDetail.vue (91%)

diff --git a/admin/src/components.d.ts b/admin/src/components.d.ts
index 434e8d0..df4993b 100644
--- a/admin/src/components.d.ts
+++ b/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']
diff --git a/admin/src/router/index.ts b/admin/src/router/index.ts
index ebd8e7c..1fd48bf 100644
--- a/admin/src/router/index.ts
+++ b/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' }
+                    },
                 ]
             },
             {
diff --git a/admin/src/views/Dashboard/GlobalTransactions/AllTransactions.vue b/admin/src/views/Dashboard/GlobalTransactions/AllTransactions.vue
index 6cfa2ce..c5e0c87 100644
--- a/admin/src/views/Dashboard/GlobalTransactions/AllTransactions.vue
+++ b/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,8 +66,9 @@
                     </span>
                 </template>
                 <template v-else-if="column.key === 'action'">
-                    <span>
-                        <a class="mr-2 font-medium" @click="handleTransactionDetail(record.gid)">Detail</a>
+                    <span style="width: 190px; 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>
                         <a-popconfirm
                             title="Force stop it?"
                             ok-text="Yes, stop it"
@@ -98,7 +99,7 @@
 import { forceStopTransaction, 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('')
diff --git a/admin/src/views/Dashboard/GlobalTransactions/_Components/DialogTransactionDetail.vue b/admin/src/views/Dashboard/GlobalTransactions/DialogTransactionDetail.vue
similarity index 91%
rename from admin/src/views/Dashboard/GlobalTransactions/_Components/DialogTransactionDetail.vue
rename to admin/src/views/Dashboard/GlobalTransactions/DialogTransactionDetail.vue
index b1b0a28..1d19fd5 100644
--- a/admin/src/views/Dashboard/GlobalTransactions/_Components/DialogTransactionDetail.vue
+++ b/admin/src/views/Dashboard/GlobalTransactions/DialogTransactionDetail.vue
@@ -1,8 +1,8 @@
 <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>      
@@ -37,19 +37,21 @@
 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 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 +62,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;

From ed88baa84b1953ba5368b1c929b96da8b560ff77 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=BE=90=E4=BA=91=E9=87=91YunjinXu?= <xuyunjin@foxmail.com>
Date: Wed, 14 Jun 2023 09:34:28 +0800
Subject: [PATCH 2/2] Move the force stop function from the All Trans page to
 the Detail page.

---
 .../GlobalTransactions/AllTransactions.vue    | 26 +++----------------
 .../DialogTransactionDetail.vue               | 23 +++++++++++++++-
 2 files changed, 25 insertions(+), 24 deletions(-)

diff --git a/admin/src/views/Dashboard/GlobalTransactions/AllTransactions.vue b/admin/src/views/Dashboard/GlobalTransactions/AllTransactions.vue
index c5e0c87..9cbc212 100644
--- a/admin/src/views/Dashboard/GlobalTransactions/AllTransactions.vue
+++ b/admin/src/views/Dashboard/GlobalTransactions/AllTransactions.vue
@@ -66,23 +66,9 @@
                     </span>
                 </template>
                 <template v-else-if="column.key === 'action'">
-                    <span style="width: 190px; display: block;">
+                    <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>
-                        <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> -->
+                        <a class="mr-2 font-medium" target="_blank" :href="'./detail/'+record.gid">Page</a>                        
                     </span>
                 </template>
             </template>
@@ -96,7 +82,7 @@
     </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 './DialogTransactionDetail.vue'
@@ -231,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>
diff --git a/admin/src/views/Dashboard/GlobalTransactions/DialogTransactionDetail.vue b/admin/src/views/Dashboard/GlobalTransactions/DialogTransactionDetail.vue
index 1d19fd5..4816ced 100644
--- a/admin/src/views/Dashboard/GlobalTransactions/DialogTransactionDetail.vue
+++ b/admin/src/views/Dashboard/GlobalTransactions/DialogTransactionDetail.vue
@@ -5,7 +5,19 @@
                 <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>
@@ -39,6 +51,7 @@ 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();
@@ -103,6 +116,11 @@ const columns = [
     }
 ]
 
+const handleTransactionStop = async(gid: string) => {
+    await forceStopTransaction(gid);
+    refresh();
+}
+
 type Data = {
     branches: {
         gid: string
@@ -179,4 +197,7 @@ defineExpose({
   .ant-modal {
     height: 100%;
   }
+.action-button {
+    margin-right: 10px;
+}
 </style>