refactor: ♻️ 批量查询ip归属地 (#164)

Co-authored-by: tk <fiyne1a@dingtalk.com>

src/frontend/admin/src/components/naInfo/index.vue

@@ -1,11 +1,32 @@
 <template>
     <el-drawer v-model="visible" :size="size" :title="title" @closed="$emit('closed')" destroy-on-close>
-        <el-main>
-            <el-descriptions :column="1" border class="font-monospace" size="small">
+        <el-main v-loading="!data" style="height: 100%">
+            <el-descriptions v-if="data" :column="1" border class="font-monospace" size="small">
                 <el-descriptions-item v-for="(item, i) in data" :key="i" :label="i" label-class-name="w15">
                     {{ item }}
                 </el-descriptions-item>
             </el-descriptions>
+            <el-empty v-if="esData && !esData.hits" v-loading="true"></el-empty>
+            <el-descriptions
+                v-for="(desc, i) in esData.hits.hits.map((x) => x._source)"
+                v-if="esData?.hits?.hits?.length > 0"
+                :column="1"
+                :key="i"
+                class="trace-log mt-8"
+                size="small">
+                <el-descriptions-item
+                    v-for="(item, j) in Object.entries(desc)
+                        .filter((x) => ['@timestamp', 'log_level', 'log_thread', 'log_source', 'log_message'].includes(x[0]))
+                        .sort()"
+                    :key="j"
+                    :label="item[0]"
+                    label-class-name="w15">
+                    <span v-if="item[0] === '@timestamp'">
+                        {{ $TOOL.dateFormat(item[1]) }}
+                    </span>
+                    <span v-else v-html="$TOOL.highLightKeywords($TOOL.unicodeDecode(item[1].toString()))" />
+                </el-descriptions-item>
+            </el-descriptions>
         </el-main>
     </el-drawer>
 </template>
@@ -18,16 +39,27 @@ export default {
     },
     data() {
         return {
-            title: '',
+            title: null,
             visible: false,
-            data: {},
+            esData: null,
+            data: null,
         }
     },
     methods: {
-        open(data, title) {
-            this.title = title
-            this.data = data
+        async open(title, query, queryEs) {
+            this.data = null
+            this.title = null
+            this.esData = null
             this.visible = true
+            const res = await query()
+            this.title = title(res.data)
+            this.data = this.$TOOL.sortProperties(res.data)
+            if (queryEs) {
+                this.esData = {}
+                this.$API.adm_tools.queryEsLog.post(queryEs).then((res) => {
+                    this.esData = res.data
+                })
+            }
             return this
         },
     },

src/frontend/admin/src/global.js

@@ -57,7 +57,6 @@ import naColUser from '@/components/naColUser/index.vue'
 import naDept from '@/components/naDept/index.vue'
 import naDicCatalog from '@/components/naDicCatalog/index.vue'
 import naFormEmail from '@/components/naFormEmail/index.vue'
-import naIp from '@/components/naIp/index.vue'
 import naSearch from '@/components/naSearch'
 import naUserSelect from '@/components/naUserSelect/index.vue'
 
@@ -97,7 +96,6 @@ export default {
         app.component('naDept', naDept)
         app.component('naDicCatalog', naDicCatalog)
         app.component('naFormEmail', naFormEmail)
-        app.component('naIp', naIp)
         app.component('naSearch', naSearch)
         app.component('naUserSelect', naUserSelect)
 

src/frontend/admin/src/views/sys/cache/index.vue

@@ -121,12 +121,12 @@ export default {
             this.getData()
         },
         async rowClick(row) {
-            this.loading = true
-            const res = await this.$API.sys_cache.getEntry.post({ key: row.key })
             this.dialog.info = true
             await this.$nextTick()
-            this.$refs.info.open(this.$TOOL.sortProperties(res.data), this.$t('缓存详情'))
-            this.loading = false
+            this.$refs.info.open(
+                () => this.$t('缓存详情'),
+                () => this.$API.sys_cache.getEntry.post({ key: row.key }),
+            )
         },
         async getData() {
             this.loading = true

src/frontend/admin/src/views/sys/log/login/index.vue

@@ -48,6 +48,7 @@
                 :params="query"
                 :query-api="$API.sys_loginlog.pagedQuery"
                 :vue="this"
+                @data-change="dataChange"
                 ref="table"
                 remote-filter
                 remote-sort
@@ -63,7 +64,8 @@
                 <el-table-column :label="$t('登录名')" prop="loginUserName" sortable="custom" width="150" />
                 <el-table-column :label="$t('客户端IP')" prop="createdClientIp" show-overflow-tooltip sortable="custom" width="200">
                     <template #default="{ row }">
-                        <na-ip :ip="row.createdClientIp"></na-ip>
+                        <p>{{ row.createdClientIp }}</p>
+                        <p>{{ this.ips.filter((x) => x.ip === row.createdClientIp)[0]?.region ?? '...' }}</p>
                     </template>
                 </el-table-column>
                 <el-table-column :label="$t('操作系统')" align="center" prop="os" width="150" />
@@ -86,6 +88,7 @@
 
 <script>
 import naInfo from '@/components/naInfo/index.vue'
+import http from '@/utils/request'
 
 export default {
     components: {
@@ -98,6 +101,7 @@ export default {
             dialog: {
                 info: false,
             },
+            ips: [],
             loading: false,
             query: {
                 dynamicFilter: {
@@ -111,6 +115,14 @@ export default {
     },
     inject: ['reload'],
     methods: {
+        async dataChange(data) {
+            this.apis = []
+            const ips = data.data.rows?.map((x) => x.createdClientIp)
+            const res = await Promise.all([
+                ips && ips.length > 0 ? http.get(`http://ip.line92.xyz/?ip=${ips.join('&ip=')}`) : new Promise((x) => x({ data: [] })),
+            ])
+            this.ips = res[0]
+        },
         filterChange(data) {
             Object.entries(data).forEach(([key, value]) => {
                 this.$refs.search.form.dy[key] = value === 'true' ? true : value === 'false' ? false : value
@@ -151,10 +163,13 @@ export default {
         async rowClick(row) {
             this.dialog.info = true
             await this.$nextTick()
-            const res = await this.$API.sys_loginlog.get.post({
-                id: row.id,
-            })
-            this.$refs.info.open(this.$TOOL.sortProperties(res.data), this.$t('日志详情：{id}', { id: row.id }))
+            await this.$refs.info.open(
+                () => this.$t('日志详情：{id}', { id: row.id }),
+                () =>
+                    this.$API.sys_loginlog.get.post({
+                        id: row.id,
+                    }),
+            )
         },
     },
     mounted() {

src/frontend/admin/src/views/sys/log/operation/index.vue

@@ -134,7 +134,8 @@
                 </el-table-column>
                 <el-table-column :label="$t('客户端IP')" prop="createdClientIp" show-overflow-tooltip sortable="custom" width="200">
                     <template #default="{ row }">
-                        <na-ip :ip="row.createdClientIp"></na-ip>
+                        <p>{{ row.createdClientIp }}</p>
+                        <p>{{ this.ips.filter((x) => x.ip === row.createdClientIp)[0]?.region ?? '...' }}</p>
                     </template>
                 </el-table-column>
                 <na-col-operation
@@ -161,7 +162,7 @@
 
 <script>
 import { defineAsyncComponent } from 'vue'
-
+import http from '@/utils/request'
 const saveDialog = defineAsyncComponent(() => import('@/views/sys/user/save.vue'))
 import naInfo from '@/components/naInfo/index.vue'
 
@@ -183,6 +184,7 @@ export default {
             },
             owners: [],
             apis: [],
+            ips: [],
             loading: false,
             query: {
                 dynamicFilter: {
@@ -213,6 +215,7 @@ export default {
             this.apis = []
             const ownerIds = data.data.rows?.filter((x) => x.ownerId).map((x) => x.ownerId)
             const apiCrcs = data.data.rows?.map((x) => x.apiPathCrc32)
+            const ips = data.data.rows?.map((x) => x.createdClientIp)
             const res = await Promise.all([
                 ownerIds && ownerIds.length > 0
                     ? this.$API.sys_user.query.post({
@@ -233,9 +236,12 @@ export default {
                           },
                       })
                     : new Promise((x) => x({ data: [] })),
+
+                ips && ips.length > 0 ? http.get(`http://ip.line92.xyz/?ip=${ips.join('&ip=')}`) : new Promise((x) => x({ data: [] })),
             ])
             this.owners = res[0].data
             this.apis = res[1].data
+            this.ips = res[2]
         },
         filterChange(data) {
             Object.entries(data).forEach(([key, value]) => {
@@ -297,11 +303,14 @@ export default {
         async rowClick(row) {
             this.dialog.info = true
             await this.$nextTick()
-            const res = await this.$API.sys_requestlog.get.post({
-                id: row.id,
-                createdTime: row.createdTime,
-            })
-            this.$refs.info.open(this.$TOOL.sortProperties(res.data), this.$t('日志详情：{id}', { id: row.id }))
+            await this.$refs.info.open(
+                () => this.$t('日志详情：{id}', { id: row.id }),
+                () =>
+                    this.$API.sys_requestlog.get.post({
+                        id: row.id,
+                        createdTime: row.createdTime,
+                    }),
+            )
         },
     },
     mounted() {