From 7f892f276aeeb370fa3344a1e29e5a97e10a10b4 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, 7 Jun 2023 13:43:23 +0800
Subject: [PATCH 1/3] Fix trans detail dialog footer Cancel and Ok button
 event.

---
 .../_Components/DialogTransactionDetail.vue           | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/admin/src/views/Dashboard/GlobalTransactions/_Components/DialogTransactionDetail.vue b/admin/src/views/Dashboard/GlobalTransactions/_Components/DialogTransactionDetail.vue
index 82628f5..3afabd5 100644
--- a/admin/src/views/Dashboard/GlobalTransactions/_Components/DialogTransactionDetail.vue
+++ b/admin/src/views/Dashboard/GlobalTransactions/_Components/DialogTransactionDetail.vue
@@ -1,7 +1,10 @@
 <template>
     <div>
         <a-modal v-model:visible="visible" title="Transaction Detail" width="100%" wrap-class-name="full-modal">
-            <a-table :columns="columns" :data-source="dataSource" :pagination="false">
+            <template #footer>
+                <a-button type="primary" @click="close">Close</a-button>
+            </template>            
+            <a-table :columns="columns" :data-source="dataSource" :pagination="false" :scroll="{ x: true}">
                 <!-- eslint-disable-next-line vue/no-unused-vars -->
                 <template #bodyCell="{column, record}" />
             </a-table>
@@ -31,6 +34,10 @@ const open = async(gid: string) => {
     visible.value = true
 }
 
+const close = async() => {    
+    visible.value = false;
+}
+
 const columns = [
     {
         title: 'GID',
@@ -56,7 +63,7 @@ const columns = [
         title: 'UpdateTime',
         dataIndex: 'update_time',
         key: 'update_time'
-    }
+    }  
 ]
 
 type Data = {

From bbd960380a83386dbb81cde1f3640d8dccc77e10 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, 7 Jun 2023 14:23:20 +0800
Subject: [PATCH 2/3] Add transaction info descriptions panel, add url column.

---
 .../_Components/DialogTransactionDetail.vue   | 55 ++++++++++++++++---
 1 file changed, 47 insertions(+), 8 deletions(-)

diff --git a/admin/src/views/Dashboard/GlobalTransactions/_Components/DialogTransactionDetail.vue b/admin/src/views/Dashboard/GlobalTransactions/_Components/DialogTransactionDetail.vue
index 3afabd5..972d837 100644
--- a/admin/src/views/Dashboard/GlobalTransactions/_Components/DialogTransactionDetail.vue
+++ b/admin/src/views/Dashboard/GlobalTransactions/_Components/DialogTransactionDetail.vue
@@ -3,7 +3,23 @@
         <a-modal v-model:visible="visible" title="Transaction Detail" width="100%" wrap-class-name="full-modal">
             <template #footer>
                 <a-button type="primary" @click="close">Close</a-button>
-            </template>            
+            </template> 
+            <h2>Transaction Info</h2>           
+            <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>
+                </a-descriptions-item>
+                <a-descriptions-item label="Id">{{ transaction?.id }}</a-descriptions-item>
+                <a-descriptions-item label="GID">{{ transaction?.gid }}</a-descriptions-item>
+                <a-descriptions-item label="TransType">{{ transaction?.trans_type }}</a-descriptions-item> 
+                <a-descriptions-item label="Protocol">{{ transaction?.protocol }}</a-descriptions-item> 
+                <a-descriptions-item label="CreateTime">{{ transaction?.create_time }}</a-descriptions-item> 
+                <a-descriptions-item label="FinishTime">{{ transaction?.finish_time }}</a-descriptions-item> 
+                <a-descriptions-item label="UpdateTime">{{ transaction?.update_time }}</a-descriptions-item>                 
+                <a-descriptions-item label="NextCronInterval">{{ transaction?.next_cron_interval }}</a-descriptions-item> 
+                <a-descriptions-item label="NextCronTime">{{ transaction?.next_cron_time }}</a-descriptions-item> 
+            </a-descriptions>            
+            <h2>Branches</h2>
             <a-table :columns="columns" :data-source="dataSource" :pagination="false" :scroll="{ x: true}">
                 <!-- eslint-disable-next-line vue/no-unused-vars -->
                 <template #bodyCell="{column, record}" />
@@ -24,12 +40,14 @@ import screenfull from '/@/components/Screenfull/index.vue'
 // import 'vue-json-pretty/lib/styles.css'
 
 const dataSource = ref<Branches[]>([])
+const transaction = ref<Transaction>()
 const visible = ref(false)
 const textVal = ref('')
 
 const open = async(gid: string) => {
     const d = await getTransaction<Data>({ gid: gid })
     dataSource.value = d.data.branches
+    transaction.value = d.data.transaction
     textVal.value = JSON.stringify(d.data, null, 2)
     visible.value = true
 }
@@ -40,10 +58,6 @@ const close = async() => {
 
 const columns = [
     {
-        title: 'GID',
-        dataIndex: 'gid',
-        key: 'gid'
-    }, {
         title: 'BranchID',
         dataIndex: 'branch_id',
         key: 'branch_id'
@@ -63,7 +77,11 @@ const columns = [
         title: 'UpdateTime',
         dataIndex: 'update_time',
         key: 'update_time'
-    }  
+    }, {
+        title: 'Url',
+        dataIndex: 'url',
+        key: 'url'
+    }
 ]
 
 type Data = {
@@ -74,9 +92,10 @@ type Data = {
         status: string
         create_time: string
         update_time: string
+        url: string
     }[]
-    transactions: {
-        ID: number
+    transaction: {
+        id: number
         create_time: string
         update_time: string
         gid: string
@@ -91,6 +110,21 @@ type Data = {
     }
 }
 
+interface Transaction  {
+    id: number
+    create_time: string
+    update_time: string
+    gid: string
+    trans_type: string
+    status: string
+    protocol: string
+    finish_time: string
+    options: string
+    next_cron_interval: number
+    next_cron_time: string
+    concurrent: boolean
+}
+
 interface Branches {
     gid: string
     branch_id: string
@@ -98,6 +132,7 @@ interface Branches {
     status: string
     create_time: string
     update_time: string
+    url: string
 }
 
 defineExpose({
@@ -121,4 +156,8 @@ defineExpose({
 .full-modal .ant-modal-body {
     flex: 1;
   }
+
+  .ant-modal {
+    height: 100%;
+  }
 </style>

From f0525bf0c8023f8c663fb0b18a5fc207d07a8932 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, 7 Jun 2023 14:39:10 +0800
Subject: [PATCH 3/3] Add  resfresh transaction and branchs info in detail
 dialog.

---
 admin/src/components.d.ts                     |  2 ++
 .../_Components/DialogTransactionDetail.vue   | 21 +++++++++++++++----
 2 files changed, 19 insertions(+), 4 deletions(-)

diff --git a/admin/src/components.d.ts b/admin/src/components.d.ts
index 9344e27..434e8d0 100644
--- a/admin/src/components.d.ts
+++ b/admin/src/components.d.ts
@@ -9,6 +9,8 @@ declare module '@vue/runtime-core' {
     ABreadcrumb: typeof import('ant-design-vue/es')['Breadcrumb']
     ABreadcrumbItem: typeof import('ant-design-vue/es')['BreadcrumbItem']
     AButton: typeof import('ant-design-vue/es')['Button']
+    ADescriptions: typeof import('ant-design-vue/es')['Descriptions']
+    ADescriptionsItem: typeof import('ant-design-vue/es')['DescriptionsItem']
     ADivider: typeof import('ant-design-vue/es')['Divider']
     AForm: typeof import('ant-design-vue/es')['Form']
     AFormItem: typeof import('ant-design-vue/es')['FormItem']
diff --git a/admin/src/views/Dashboard/GlobalTransactions/_Components/DialogTransactionDetail.vue b/admin/src/views/Dashboard/GlobalTransactions/_Components/DialogTransactionDetail.vue
index 972d837..9ccfe40 100644
--- a/admin/src/views/Dashboard/GlobalTransactions/_Components/DialogTransactionDetail.vue
+++ b/admin/src/views/Dashboard/GlobalTransactions/_Components/DialogTransactionDetail.vue
@@ -3,10 +3,11 @@
         <a-modal v-model:visible="visible" title="Transaction Detail" width="100%" wrap-class-name="full-modal">
             <template #footer>
                 <a-button type="primary" @click="close">Close</a-button>
-            </template> 
-            <h2>Transaction Info</h2>           
+            </template>            
+            <h2>Transaction Info</h2> 
+            <a-button type="primary" @click="refresh" :loading="loading" >Refresh</a-button>      
             <a-descriptions bordered size="small" :column="{ xxl: 4, xl: 3, lg: 3, md: 3, sm: 2, xs: 1 }">
-                <a-descriptions-item label="Status">                    
+                <a-descriptions-item label="Status">                          
                     <a-tag :color="transaction?.status === 'succeed' ? 'green' : 'volcano'">{{ transaction?.status }}</a-tag>
                 </a-descriptions-item>
                 <a-descriptions-item label="Id">{{ transaction?.id }}</a-descriptions-item>
@@ -39,21 +40,33 @@ import screenfull from '/@/components/Screenfull/index.vue'
 // import VueJsonPretty from 'vue-json-pretty';
 // import 'vue-json-pretty/lib/styles.css'
 
+const loading = ref(false)
 const dataSource = ref<Branches[]>([])
 const transaction = ref<Transaction>()
 const visible = ref(false)
 const textVal = ref('')
 
+
+
+let _gid = '';
+
 const open = async(gid: string) => {
+    _gid = gid;
+    loading.value = true;
     const d = await getTransaction<Data>({ gid: gid })
     dataSource.value = d.data.branches
     transaction.value = d.data.transaction
     textVal.value = JSON.stringify(d.data, null, 2)
     visible.value = true
+    loading.value = false;
 }
 
 const close = async() => {    
-    visible.value = false;
+    open(_gid);
+}
+
+const refresh =  async() => {    
+    open(_gid);
 }
 
 const columns = [