Move the force stop function from the All Trans page to the Detail page.

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 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> -->
                     </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>

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>