render allTransactions from dtm svr api

dashboard/.env.development

@@ -0,0 +1,2 @@
+VITE_APP_API_BASE_URL="/api"
+VITE_PROXY=[["/api", "http://localhost:36789"]]

dashboard/package.json

@@ -9,7 +9,8 @@
   },
   "dependencies": {
     "ant-design-vue": "^3.1.1",
-    "vue": "^3.2.25"
+    "vue": "^3.2.25",
+    "vue-request": "^1.2.4"
   },
   "devDependencies": {
     "@types/node": "^17.0.23",

dashboard/src/assets/css/index.css

@@ -1,3 +1,3 @@
-@tailwind base;
+/* @tailwind base; */
 @tailwind components;
 @tailwind utilities;

dashboard/src/components.d.ts

@@ -7,7 +7,6 @@ declare module '@vue/runtime-core' {
   export interface GlobalComponents {
     ABreadcrumb: typeof import('ant-design-vue/es')['Breadcrumb']
     ABreadcrumbItem: typeof import('ant-design-vue/es')['BreadcrumbItem']
-    AInputSearch: typeof import('ant-design-vue/es')['InputSearch']
     ALayout: typeof import('ant-design-vue/es')['Layout']
     ALayoutContent: typeof import('ant-design-vue/es')['LayoutContent']
     ALayoutHeader: typeof import('ant-design-vue/es')['LayoutHeader']

dashboard/src/layout/aside.vue

@@ -1,5 +1,5 @@
 <template>
-    <a-layout style="height: 730px">
+    <a-layout>
         <a-layout-sider width="200" style="background: #fff">
             <Sidebar />
         </a-layout-sider>
@@ -61,3 +61,9 @@ const page = computed(() => {
     return page
 })
 </script>
+
+<style lang="postcss" scoped>
+.ant-layout.ant-layout-has-sider {
+    min-height: calc(100vh - 64px);
+}
+</style>

dashboard/src/type/index.d.ts

@@ -8,4 +8,9 @@ declare global {
     VITE_PORT: number
     VITE_PROXY: string
   }
+  interface ITable<T = any> {
+      data: Array<T>
+      next_position: number,
+      size: number
+  }
 }

dashboard/src/utils/request.ts

@@ -0,0 +1,8 @@
+import axios from 'axios'
+
+const request = axios.create({
+    baseURL: import.meta.env.VITE_APP_API_BASE_URL as string | undefined,
+    timeout: 60000
+})
+
+export default request

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

@@ -1,24 +1,27 @@
 <template>
-    <div class="w-72">
+    <div>
-        <a-input-search v-model:value="value" placeholder="please input gid to search..." enter-button />
+        <a-table :columns="columns" :data-source="dataSource" :pagination="false" :loading="loading" @change="handleTableChange">
-    </div>
+            <template #bodyCell="{column, record}">
-    <a-table :columns="columns" :data-source="data" class="mt-4">
+                <template v-if="column.key === 'status'">
-        <template #bodyCell="{column, record}">
+                    <span>
-            <template v-if="column.key === 'status'">
+                        <a-tag :key="record.status" :color="record.status === 'succeed' ? 'green' : 'volcano'">{{ record.status.toUpperCase() }}</a-tag>
-                <span>
+                    </span>
-                    <a-tag :key="record.status" :color="record.status === 'succeed' ? 'green' : 'volcano'">{{ record.status.toUpperCase() }}</a-tag>
+                </template>
-                </span>
+                <template v-else-if="column.key === 'action'">
-            </template>
+                    <span>
-            <template v-else-if="column.key === 'action'">
+                        <a class="mr-2 font-medium">Detail</a>
-                <span>
+                        <a class="text-red-400 font-medium">Stop</a>
-                    <a class="mr-2 font-medium">Detail</a>
+                    </span>
-                    <a class="text-red-400 font-medium">Stop</a>
+                </template>
-                </span>
             </template>
-        </template>
+        </a-table>
-    </a-table>
+    </div>
 </template>
 <script setup lang="ts">
+import { IListAllTransactions, listAllTransactions } from '/@/api/dtm'
+import { ref, onMounted, reactive, computed } from 'vue-demi'
+import { usePagination } from 'vue-request'
+import { TableProps } from 'ant-design-vue/es/vc-table/Table'
 const columns = [
     {
         title: 'GID',
@@ -45,78 +48,57 @@ const columns = [
         key: 'action'
     }
 ]
-const data = [
+
-    {
+type Data = {
-        key: '1',
+    transactions: {
-        create_time: "2022-04-17T08:56:05+08:00",
+        gid: string
-        update_time: "2022-04-17T08:56:05+08:00",
+        trans_type: string
-        gid: "ZmZPmoqvAhnisrntkELtPb",
+        status: string
-        trans_type: "msg",
+        protocol: string
-        status: "succeed",
+        create_time: string
-        protocol: "grpc",
+    }[]
-    },
+    next_position: string
-    {
+}
-        key: '2',
+
-        create_time: "2022-04-17T08:24:30+08:00",
+const queryData = (params: IListAllTransactions) => {
-        update_time: "2022-04-17T08:24:30+08:00",
+    return listAllTransactions<Data>(params)
-        gid: "UHTBFL5ukZnrMPwiRQXiNJ",
+}
-        trans_type: "msg",
+
-        status: "succeed",
+const { data, run, current, loading, pageSize } = usePagination(queryData, {
-        protocol: "grpc",
+    defaultParams: [
-    },
+        {
-    {
+            limit: 10,
-        key: '3',
+        }
-        create_time: "2022-04-17T07:28:30+08:00",
+    ],
-        update_time: "2022-04-17T07:28:30+08:00",
+    pagination: {
-        gid: "2qh5JCfvCaKo3PSxAxrxDn",
+        pageSizeKey: 'limit'
-        trans_type: "msg",
-        status: "succeed",
-        protocol: "grpc",
-    },
-    {
-        key: '4',
-        create_time: "2022-04-17T07:28:26+08:00",
-        update_time: "2022-04-17T07:28:26+08:00",
-        gid: "bLvTNErhXJw9YCpQSqZuSH",
-        trans_type: "msg",
-        status: "succeed",
-        protocol: "grpc",
-    },
-    {
-        key: '5',
-        create_time: "2022-04-17T07:21:33+08:00",
-        update_time: "2022-04-17T07:21:33+08:00",
-        gid: "F487jVfVdByDCZMWnBteBE",
-        trans_type: "msg",
-        status: "succeed",
-        protocol: "grpc",
-    },
-    {
-        key: '6',
-        create_time: "2022-04-17T07:18:28+08:00",
-        update_time: "2022-04-17T07:21:29+08:00",
-        gid: "M5yPrCJDYULQg6jS5rqw8C",
-        trans_type: "msg",
-        status: "succeed",
-        protocol: "grpc",
-    },
-    {
-        key: '7',
-        create_time: "2022-04-16T11:30:35+08:00",
-        update_time: "2022-04-16T11:30:35+08:00",
-        gid: "a2JEjm8qMCbiersnaQzTHG",
-        trans_type: "msg",
-        status: "succeed",
-        protocol: "grpc",
-    },
-    {
-        key: '8',
-        create_time: "2022-03-19T21:49:13+08:00",
-        update_time: "2022-03-19T21:49:13+08:00",
-        gid: "4HVsaRkKpWfGsiL6TWso84",
-        trans_type: "tcc",
-        status: "succeed",
-        protocol: "grpc",
     }
-]
+})
+
+const dataSource = computed(() => data.value?.data.transactions || [])
+const pagination = computed(() => ({
+    current: 1,
+    pageSize: pageSize.value,
+    showSizeChanger: true,
+
+}))
+
+const handleTableChange = (pag: {current:number, pageSize: number}) => {
+    if (pag.pageSize !== pageSize.value) {
+        run({
+            limit: pag.pageSize
+        })
+    } else {
+        run({
+            position: data.value?.data.next_position,
+            limit: pag.pageSize
+        })
+    }
+}
 </script>
+
+<style lang="postcss" scoped>
+::v-deep .ant-pagination-item {
+    display: none;
+}
+</style>

dashboard/yarn.lock

@@ -3270,6 +3270,11 @@ vue-eslint-parser@^8.0.1:
     lodash "^4.17.21"
     semver "^7.3.5"
 
+vue-request@^1.2.4:
+  version "1.2.4"
+  resolved "https://registry.npmmirror.com/vue-request/-/vue-request-1.2.4.tgz#02ab150cc2903605464e6efcb501c480d9dd536f"
+  integrity sha512-i+i+6Fog6F8EtYUeueumzKS9Sg06CvjsMXH8TK0YSBxY4sDxIJ+snTEke5rLqiV9d19DTuJOxPQFjTBUpsMtXA==
+
 vue-router@^4.0.13:
   version "4.0.13"
   resolved "https://registry.npmmirror.com/vue-router/-/vue-router-4.0.13.tgz"