Merge pull request #430 from wooln/feature-trans-detail-dialog-optimize

Feature trans detail dialog optimize

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']

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

@@ -1,7 +1,27 @@
 <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>            
+            <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-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}" />
             </a-table>
@@ -20,23 +40,37 @@ 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() => {    
+    open(_gid);
+}
+
+const refresh =  async() => {    
+    open(_gid);
 }
 
 const columns = [
     {
-        title: 'GID',
-        dataIndex: 'gid',
-        key: 'gid'
-    }, {
         title: 'BranchID',
         dataIndex: 'branch_id',
         key: 'branch_id'
@@ -56,6 +90,10 @@ const columns = [
         title: 'UpdateTime',
         dataIndex: 'update_time',
         key: 'update_time'
+    }, {
+        title: 'Url',
+        dataIndex: 'url',
+        key: 'url'
     }
 ]
 
@@ -67,9 +105,10 @@ type Data = {
         status: string
         create_time: string
         update_time: string
+        url: string
     }[]
-    transactions: {
+    transaction: {
-        ID: number
+        id: number
         create_time: string
         update_time: string
         gid: string
@@ -84,6 +123,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
@@ -91,6 +145,7 @@ interface Branches {
     status: string
     create_time: string
     update_time: string
+    url: string
 }
 
 defineExpose({
@@ -114,4 +169,8 @@ defineExpose({
 .full-modal .ant-modal-body {
     flex: 1;
   }
+
+  .ant-modal {
+    height: 100%;
+  }
 </style>