This is an automated email from the ASF dual-hosted git repository.
liubao pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/servicecomb-fence.git
The following commit(s) were added to refs/heads/master by this push:
new 9e6f57c 新增搜索日志列表 (#71)
9e6f57c is described below
commit 9e6f57c8de9b478a9edeebdc780ca7d79ab66fa7
Author: tianxin <[email protected]>
AuthorDate: Thu Jun 6 02:13:21 2024 -0700
新增搜索日志列表 (#71)
---
admin-website/src/main/web/src/types/roleType.ts | 4 +
.../cloud/problems/components/call-chain-list.vue | 43 ++++---
.../src/views/cloud/problems/components/main.vue | 142 +++++++++++++--------
.../src/views/cloud/problems/components/util.json | 13 ++
4 files changed, 129 insertions(+), 73 deletions(-)
diff --git a/admin-website/src/main/web/src/types/roleType.ts
b/admin-website/src/main/web/src/types/roleType.ts
index 7e8eb7d..3dcd15b 100644
--- a/admin-website/src/main/web/src/types/roleType.ts
+++ b/admin-website/src/main/web/src/types/roleType.ts
@@ -3,3 +3,7 @@ export enum RoleType {
admin = 'admin',
user = 'user',
}
+export enum ListType{
+ TYPE_LIST = 'List',
+ TYPE_LOGS = 'logs'
+}
diff --git
a/admin-website/src/main/web/src/views/cloud/problems/components/call-chain-list.vue
b/admin-website/src/main/web/src/views/cloud/problems/components/call-chain-list.vue
index 52ac450..5856982 100644
---
a/admin-website/src/main/web/src/views/cloud/problems/components/call-chain-list.vue
+++
b/admin-website/src/main/web/src/views/cloud/problems/components/call-chain-list.vue
@@ -1,13 +1,13 @@
<template>
- <tiny-grid resizable seq-serial :data="state.traceData"
@toolbar-button-click="toolbarButtonClickEvent">
+ <tiny-grid ref="listRef" resizable seq-serial :data="state.traceData" >
<template #toolbar>
- <tiny-grid-toolbar :buttons="state.toolbarButtons"> </tiny-grid-toolbar>
+ <tiny-grid-toolbar > <span>{{listTypes === ListType.TYPE_LOGS ?'日志':
'调用链'}}列表</span></tiny-grid-toolbar>
</template>
<tiny-grid-column type="index" width="60"></tiny-grid-column>
<tiny-grid-column width="60"></tiny-grid-column>
<tiny-grid-column type="expand" title="data" width="60">
<template #default="data">
- <tiny-grid :data="data.row.data">
+ <tiny-grid v-if="listTypes === ListType.TYPE_LIST"
:data="data.row.data">
<tiny-grid-column field="name" title="name"
show-overflow></tiny-grid-column>
<tiny-grid-column field="duration"
title="duration"></tiny-grid-column>
<tiny-grid-column field="traceId" title="http.status_code">
@@ -32,6 +32,9 @@
</template>
</tiny-grid-column>
</tiny-grid>
+ <div v-else>
+ <div v-for="(item, index) in data.row.data" :key="index"
class="logs-list">{{ item }}</div>
+ </div>
</template>
</tiny-grid-column>
<tiny-grid-column field="application"
title="application"></tiny-grid-column>
@@ -49,9 +52,10 @@
</template>
<script lang="ts" setup>
-import { reactive, defineProps, computed } from 'vue';
+import { reactive, defineProps, computed,ref } from 'vue';
import { Grid as TinyGrid, GridColumn as TinyGridColumn, GridToolbar as
TinyGridToolbar } from '@opentiny/vue'
import { timesHandle } from '@/utils/time';
+import { ListType } from '@/types/roleType';
const props = defineProps({
traceData: {
@@ -60,28 +64,22 @@ const props = defineProps({
return [];
},
},
+ listTypes: {
+ type: String,
+ default() {
+ return ListType.TYPE_LIST;
+ },
+ },
});
-
+const listRef=ref()
const state = reactive({
- traceData:computed(() => props.traceData) ,
- toolbarButtons: [
- {
- code: 'clearRowExpand',
- name: '手动清空展开行状态'
- }
- ],
+ traceData:computed(() => props.traceData),
})
-const toolbarButtonClickEvent = ({ code, $grid }:any) => {
-
- switch (code) {
- case 'clearRowExpand': {
- $grid.clearRowExpand()
- break
- }
- default: break;
- }
+const clearExpand = () => {
+ listRef.value.clearRowExpand()
}
+defineExpose({clearExpand})
</script>
<style scoped>
@@ -92,4 +90,7 @@ const toolbarButtonClickEvent = ({ code, $grid }:any) => {
.list-operation:hover {
cursor: pointer;
}
+.logs-list{
+ margin-bottom: 10px;
+}
</style>
diff --git
a/admin-website/src/main/web/src/views/cloud/problems/components/main.vue
b/admin-website/src/main/web/src/views/cloud/problems/components/main.vue
index 10eae73..6443dd4 100644
--- a/admin-website/src/main/web/src/views/cloud/problems/components/main.vue
+++ b/admin-website/src/main/web/src/views/cloud/problems/components/main.vue
@@ -6,46 +6,45 @@
</div>
<div class="main-content">
<div class="main-content-form">
- <tiny-form
- ref="searchForm"
- label-width="100px"
- class="demo-form">
+ <tiny-form
+ ref="searchForm"
+ :model="state.filterOptions"
+ :validate-type="state.validType"
+ :rules="rules"
+ label-width="100px"
+ class="demo-form">
<tiny-row>
<tiny-col :span="6">
- <tiny-form-item label="Trace-Id:" >
- <tiny-input v-model="state.filterOptions.traceId"></tiny-input>
+ <tiny-form-item label="Trace-Id:" prop="traceId">
+ <tiny-input v-model="state.filterOptions.traceId"
clearable></tiny-input>
</tiny-form-item>
</tiny-col>
<tiny-col :span="6">
- <tiny-form-item label="大概时间:" >
- <tiny-date-picker
- v-model="state.filterOptions.startTime"
- type="datetime"
- ></tiny-date-picker>
+ <tiny-form-item label="大概时间:" prop="startTime">
+ <tiny-date-picker v-model="state.filterOptions.startTime"
type="datetime"></tiny-date-picker>
</tiny-form-item>
</tiny-col>
</tiny-row>
</tiny-form>
-
+
</div>
<div class="main-content-search">
- <tiny-button
- type="primary"
- @click="searchCallChain"
- >搜索</tiny-button
- >
+ <tiny-button type="primary" @click="searchCallChain">搜索</tiny-button>
</div>
-
</div>
- <div class="main-list">
- <call-chain-list :trace-data="state.traceData"/>
- </div>
+ <div class="clear-expand">
+ <tiny-button @click="clearExpand">手动清空展开行状态</tiny-button>
+ </div>
+ <div class="main-list">
+ <call-chain-list ref="chainRef" :trace-data="state.traceData" />
+ <call-chain-list ref="logsRef" :trace-data="state.listData"
:list-types="ListType.TYPE_LOGS" />
+ </div>
</div>
</template>
<script lang="ts" setup>
- import { reactive } from 'vue';
- import {
+import { reactive, ref } from 'vue';
+import {
Form as TinyForm,
FormItem as TinyFormItem,
Input as TinyInput,
@@ -54,39 +53,77 @@
Col as TinyCol,
DatePicker as TinyDatePicker,
} from '@opentiny/vue';
-import { searchTrace } from '@/api/problems';
+import { searchTrace, searchLog } from '@/api/problems';
+import { ListType } from '@/types/roleType';
import callChainList from './call-chain-list.vue';
-
- interface FilterType{
- startTime: string;
- traceId: string;
+
+interface FilterType {
+ startTime: string;
+ traceId: string;
+}
+interface stateOptions {
+ filterOptions: FilterType,
+ traceData: any[],
+ listData: any[],
+ validType: string,
+};
+const rules = {
+ traceId: [
+ { required: true, message: '必填', trigger: 'blur' }],
+ startTime:
+ [{ required: true, message: '请选择时间' }]
+}
+
+const searchForm = ref()
+const chainRef = ref()
+const logsRef = ref()
+const state: stateOptions = reactive({
+ filterOptions: {
+ startTime: '',
+ traceId: '',
+ },
+ traceData: [],
+ listData: [],
+ validType: 'text',
+ rules: {
+ traceId: [
+ { required: true, message: '必填', trigger: 'blur' }],
+ startTime:
+ [{ required: true, message: '请选择时间' }]
}
- interface stateOptions {
- filterOptions: FilterType,
- traceData: any[];
- };
-
- const state :stateOptions = reactive({
- filterOptions : {
- startTime:'',
- traceId:'',
- },
- traceData: []
- });
-
- const searchCallChain = () => {
- const date = new
Date(state.filterOptions.startTime).toISOString().slice(0,19)
- try {
- searchTrace({
+});
+
+const searchCallChain = () => {
+ searchForm.value.validate((valid: any) => {
+
+ if (valid) {
+ const date = new
Date(state.filterOptions.startTime).toISOString().slice(0, 19)
+ // 获取调用链列表
+ searchTrace({
timestamp: date,
traceId: state.filterOptions.traceId,
}).then(response => {
- state.traceData = response as any
- });
- // eslint-disable-next-line no-empty
- } catch (err) {
- }
- };
+ state.traceData = response as any
+ });
+ // 获取日志列表
+ searchLog({
+ timestamp: date,
+ traceId: state.filterOptions.traceId,
+ }).then(response => {
+ state.listData = response as any
+ });
+ }
+ })
+
+
+
+
+};
+const clearExpand = () => {
+
+ chainRef.value.clearExpand()
+ logsRef.value.clearExpand()
+}
</script>
<style scoped lang="less"></style>
@@ -134,7 +171,8 @@ import callChainList from './call-chain-list.vue';
flex: 1;
}
}
- &-list{
+
+ &-list {
width: 95%;
height: 80px;
background-color: saddlebrown;
diff --git
a/admin-website/src/main/web/src/views/cloud/problems/components/util.json
b/admin-website/src/main/web/src/views/cloud/problems/components/util.json
new file mode 100644
index 0000000..8818646
--- /dev/null
+++ b/admin-website/src/main/web/src/views/cloud/problems/components/util.json
@@ -0,0 +1,13 @@
+[
+ {
+ "data": [
+ "2024-06-04-19:31:08
[ef1fde02af5faf44][INFO][group1-2-thread-1][com.zaxxer.hikari.HikariDataSource:110]
HikariPool-1 - Starting...",
+ "2024-06-04-19:31:08
[ef1fde02af5faf44][INFO][group1-2-thread-1][com.zaxxer.hikari.pool.HikariPool:565]
HikariPool-1 - Added connection com.mysql.cj.jdbc.ConnectionImpl@32fb9a32",
+ "2024-06-04-19:31:08
[ef1fde02af5faf44][INFO][group1-2-thread-1][com.zaxxer.hikari.HikariDataSource:123]
HikariPool-1 - Start completed."
+ ],
+ "application": "scb-fence",
+ "serviceName": "authentication-server",
+ "localhost": "10.37.113.232",
+ "instanceId": "f98caa59-ea04-4f91-877b-fe13ca032bed"
+ }
+ ]
\ No newline at end of file
