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 3c42f42 Farme time (#67)
3c42f42 is described below
commit 3c42f42aaa2da8ecc462c1241e11dee71db3624e
Author: tianxin <[email protected]>
AuthorDate: Wed Jun 5 18:44:53 2024 -0700
Farme time (#67)
---
admin-website/src/main/web/src/api/problems.ts | 2 -
.../src/main/web/src/components/menu/index.vue | 1 -
admin-website/src/main/web/src/utils/time.ts | 14 ++
.../cloud/problems/components/call-chain-list.vue | 42 +++---
.../src/views/cloud/problems/components/main.vue | 157 +++++----------------
5 files changed, 74 insertions(+), 142 deletions(-)
diff --git a/admin-website/src/main/web/src/api/problems.ts
b/admin-website/src/main/web/src/api/problems.ts
index 38ecdc7..83fae89 100644
--- a/admin-website/src/main/web/src/api/problems.ts
+++ b/admin-website/src/main/web/src/api/problems.ts
@@ -50,7 +50,5 @@ export function searchLog(data: SearchTraceRequest) {
},
}).then(response => {
return response.data
- }, error => {
- console.log('错误', error.message)
})
}
diff --git a/admin-website/src/main/web/src/components/menu/index.vue
b/admin-website/src/main/web/src/components/menu/index.vue
index 751e228..c5acd25 100644
--- a/admin-website/src/main/web/src/components/menu/index.vue
+++ b/admin-website/src/main/web/src/components/menu/index.vue
@@ -37,7 +37,6 @@
import { TreeMenu as tinyTreeMenu } from '@opentiny/vue';
import router from '@/router';
import { useUserStore } from '@/store';
- import { TabItem } from '@opentiny/vue';
// icon图标
const iconDownloadCloud = IconDownloadCloud();
diff --git a/admin-website/src/main/web/src/utils/time.ts
b/admin-website/src/main/web/src/utils/time.ts
index f32605d..cdaee55 100644
--- a/admin-website/src/main/web/src/utils/time.ts
+++ b/admin-website/src/main/web/src/utils/time.ts
@@ -17,3 +17,17 @@ export function sortTime(property: string | number | any) {
);
};
}
+
+// 时间处理特定格式
+export function timesHandle(times: any) {
+ const date = new Date(times)
+
+ const year = date.getFullYear();
+ const month = String(date.getMonth() + 1)
+ const day = String(date.getDate())
+ const hours = String(date.getHours())
+ const minutes = String(date.getMinutes())
+ const seconds = String(date.getSeconds())
+
+ return `${year}-${month}-${day}
${Number(hours)<10?`0${hours}`:hours}:${Number(minutes)<10?`0${minutes}`:minutes}:${Number(seconds)<10?`0${seconds}`:seconds}`
+}
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 26dfce9..52ac450 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
@@ -11,16 +11,23 @@
<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">
- <template>
+ <template #default="data">
<div>
{{ data.row.tags['http.status_code'] }}
</div>
</template>
</tiny-grid-column>
<tiny-grid-column field="timestamp" title="timestamp">
- <template>
+ <template #default="data">
<div>
- {{ timesHandle(data.row.timestamp) }}
+ {{ timesHandle(data.row.timestamp/1000) }}
+ </div>
+ </template>
+ </tiny-grid-column>
+ <tiny-grid-column field="http.route" title="http.route">
+ <template #default="data">
+ <div>
+ {{ data.row.tags['http.route'] }}
</div>
</template>
</tiny-grid-column>
@@ -42,11 +49,21 @@
</template>
<script lang="ts" setup>
-import { reactive } from 'vue';
+import { reactive, defineProps, computed } from 'vue';
import { Grid as TinyGrid, GridColumn as TinyGridColumn, GridToolbar as
TinyGridToolbar } from '@opentiny/vue'
+import { timesHandle } from '@/utils/time';
+
+const props = defineProps({
+ traceData: {
+ type: Array,
+ default() {
+ return [];
+ },
+ },
+ });
const state = reactive({
- traceData: {},
+ traceData:computed(() => props.traceData) ,
toolbarButtons: [
{
code: 'clearRowExpand',
@@ -55,7 +72,8 @@ const state = reactive({
],
})
-const toolbarButtonClickEvent = ({ code, $grid }) => {
+const toolbarButtonClickEvent = ({ code, $grid }:any) => {
+
switch (code) {
case 'clearRowExpand': {
$grid.clearRowExpand()
@@ -64,18 +82,6 @@ const toolbarButtonClickEvent = ({ code, $grid }) => {
default: break;
}
}
-const timesHandle = (times:number) => {
- const date = new Date(times/1000)
-
- const year = date.getFullYear();
- const month = String(date.getMonth() +1)
- const day = String(date.getDate())
- const hours = String(date.getHours())
- const minutes = String(date.getMinutes())
- const seconds = String(date.getSeconds())
-
- return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
-}
</script>
<style scoped>
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 a8c52ed..10eae73 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
@@ -19,158 +19,73 @@
<tiny-col :span="6">
<tiny-form-item label="大概时间:" >
<tiny-date-picker
- v-model="state.filterOptions.startTime"
+ 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="handleSubmit"
+ type="primary"
+ @click="searchCallChain"
>搜索</tiny-button
>
</div>
</div>
<div class="main-list">
- <tiny-grid resizable seq-serial :data="state.traceData"
@toolbar-button-click="toolbarButtonClickEvent">
- <template #toolbar>
- <tiny-grid-toolbar :buttons="state.toolbarButtons">
</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-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">
- <template #default="data">
- <div>
- {{ data.row.tags['http.status_code'] }}
- </div>
- </template>
- </tiny-grid-column>
- <tiny-grid-column field="timestamp" title="timestamp">
- <template #default="data">
- <div>
- {{ timesHandle(data.row.timestamp) }}
- </div>
- </template>
- </tiny-grid-column>
- </tiny-grid>
- </template>
- </tiny-grid-column>
- <tiny-grid-column field="application"
title="application"></tiny-grid-column>
- <tiny-grid-column field="instanceId"
title="instanceId"></tiny-grid-column>
- <tiny-grid-column field="localhost"
title="localhost"></tiny-grid-column>
- <tiny-grid-column field="serviceName"
title="serviceName"></tiny-grid-column>
- <tiny-grid-column title="操作" width="150">
- <template #default>
- <div>
- <span class="list-operation">查看日志</span> | <span
class="list-operation">查看Metrics</span>
- </div>
- </template>
- </tiny-grid-column>
- </tiny-grid>
+ <call-chain-list :trace-data="state.traceData"/>
</div>
</div>
</template>
<script lang="ts" setup>
- import { reactive,ref } from 'vue';
-
+ import { reactive } from 'vue';
import {
- Grid as TinyGrid, GridColumn as TinyGridColumn, GridToolbar as
TinyGridToolbar,
- Form as TinyForm,
- FormItem as TinyFormItem,
- Input as TinyInput,
- Button as TinyButton,
- Row as TinyRow,
- Col as TinyCol,
- DatePicker as TinyDatePicker,
- Notify,
- Modal,
- } from '@opentiny/vue';
-
- import { searchTrace } from '@/api/problems';
-
- import useLoading from '@/hooks/loading';
-
- import callChainList from './call-chain-list.vue';
-
- interface FilterOptions {
- sector: string;
- position: Array<object>;
- hr: string;
- traceId: string;
+ Form as TinyForm,
+ FormItem as TinyFormItem,
+ Input as TinyInput,
+ Button as TinyButton,
+ Row as TinyRow,
+ Col as TinyCol,
+ DatePicker as TinyDatePicker,
+} from '@opentiny/vue';
+import { searchTrace } from '@/api/problems';
+import callChainList from './call-chain-list.vue';
+
+ interface FilterType{
startTime: string;
- endTime: string;
+ traceId: string;
+ }
+ interface stateOptions {
+ filterOptions: FilterType,
+ traceData: any[];
};
- const searchForm = ref();
- const { loading, setLoading } = useLoading();
-
- const toolbarButtonClickEvent = ({ code, $grid }) => {
- switch (code) {
- case 'clearRowExpand': {
- $grid.clearRowExpand()
- break
- }
- default: break;
- }
- }
- const timesHandle = (times:number) => {
- const date = new Date(times/1000)
-
- const year = date.getFullYear();
- const month = String(date.getMonth() +1)
- const day = String(date.getDate())
- const hours = String(date.getHours())
- const minutes = String(date.getMinutes())
- const seconds = String(date.getSeconds())
-
- return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
- }
-
- const state = reactive({
- filterOptions: {},
- traceData: [],
- toolbarButtons: [
- {
- code: 'clearRowExpand',
- name: '手动清空展开行状态'
- }
- ],
+ const state :stateOptions = reactive({
+ filterOptions : {
+ startTime:'',
+ traceId:'',
+ },
+ traceData: []
});
- const handleSubmit = () => {
- setLoading(true);
-
+ const searchCallChain = () => {
+ const date = new
Date(state.filterOptions.startTime).toISOString().slice(0,19)
try {
searchTrace({
- timestamp: state.filterOptions.startTime,
+ timestamp: date,
traceId: state.filterOptions.traceId,
}).then(response => {
- state.traceData = response
- console.log('', state.traceData);
- }, error => {
- console.log('错误', error.message)
+ state.traceData = response as any
});
+ // eslint-disable-next-line no-empty
} catch (err) {
- Notify({
- type: 'error',
- title: 'search error',
- message: 'search error',
- position: 'top-right',
- duration: 2000,
- customClass: 'my-custom-cls',
- });
- } finally {
- setLoading(false);
- }
+ }
};
</script>
