github/skywalking-booster-ui
3
0
Fork 1
mirror of https://github.com/apache/skywalking-booster-ui.git synced 2025-10-16 13:19:29 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: add Trace in dashboards (#18)

Browse Source 
* feat: add trace tool

* feat: add trace

* feat: add trace filters

* feat: add trace list

* feat: add trace detail

* fix: update trace detail

* feat: add trace list

* fix: update trace list

* feat: add trace tree

* fix: update trace tree

* feat: add trace table

* feat: add trace statistics

* fix: update trace statistics

* fix: update resize

* feat: add trace log

* feat: add related logs

* feat: add loading

* fix: update name

* feat: watch selectors

* fix: view span on table

* fix ci

* fix: update file name

* fix: update file name

* fix: update file name

* fix: update filters

* build: add package
This commit is contained in:
Fine0830
2022-02-26 22:47:53 +08:00
committed by GitHub
parent 7fe0a57e49
commit 977ffbaf74
74 changed files with 5507 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files

164
src/views/dashboard/related/trace/components/D3Graph/SpanDetail.vue Normal file
View File

@@ -0,0 +1,164 @@
<!-- Licensed to the Apache Software Foundation (ASF) under one or more
contributor license agreements. See the NOTICE file distributed with
this work for additional information regarding copyright ownership.
The ASF licenses this file to You under the Apache License, Version 2.0
(the "License"); you may not use this file except in compliance with
the License. You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License. -->
<template>
<div>
<h5 class="mb-15">{{ t("tags") }}.</h5>
<div class="mb-10 clear">
<span class="g-sm-4 grey">{{ t("service") }}:</span>
<span class="g-sm-8 wba">{{ currentSpan.serviceCode }}</span>
</div>
<div class="mb-10 clear">
<span class="g-sm-4 grey">{{ t("instance") }}:</span>
<span class="g-sm-8 wba">{{ currentSpan.serviceInstanceName }}</span>
</div>
<div class="mb-10 clear">
<span class="g-sm-4 grey">{{ t("endpoint") }}:</span>
<span class="g-sm-8 wba">{{ currentSpan.label }}</span>
</div>
<div class="mb-10 clear">
<span class="g-sm-4 grey">{{ t("spanType") }}:</span>
<span class="g-sm-8 wba">{{ currentSpan.type }}</span>
</div>
<div class="mb-10 clear">
<span class="g-sm-4 grey">{{ t("component") }}:</span>
<span class="g-sm-8 wba">{{ currentSpan.component }}</span>
</div>
<div class="mb-10 clear">
<span class="g-sm-4 grey">Peer:</span>
<span class="g-sm-8 wba">{{ currentSpan.peer || "No Peer" }}</span>
</div>
<div class="mb-10 clear">
<span class="g-sm-4 grey">{{ t("error") }}:</span>
<span class="g-sm-8 wba">{{ currentSpan.isError }}</span>
</div>
<div class="mb-10 clear" v-for="i in currentSpan.tags" :key="i.key">
<span class="g-sm-4 grey">{{ i.key }}:</span>
<span class="g-sm-8 wba">
{{ i.value }}
<svg
v-if="i.key === 'db.statement'"
class="icon vm grey link-hover cp ml-5"
@click="copy(i.value)"
>
<use xlink:href="#review-list"></use>
</svg>
</span>
</div>
<h5 class="mb-10" v-if="currentSpan.logs" v-show="currentSpan.logs.length">
{{ t("logs") }}.
</h5>
<div v-for="(i, index) in currentSpan.logs" :key="index">
<div class="mb-10 sm">
<span class="mr-10">{{ t("time") }}:</span
><span class="grey">{{ dateFormat(i.time) }}</span>
</div>
<div class="mb-15 clear" v-for="(_i, _index) in i.data" :key="_index">
<div class="mb-10">
{{ _i.key }}:<span
v-if="_i.key === 'stack'"
class="r rk-sidebox-magnify"
@click="showCurrentSpanDetail(_i.value)"
>
<svg class="icon">
<use xlink:href="#magnify"></use>
</svg>
</span>
</div>
<pre class="pl-15 mt-0 mb-0 sm oa">{{ _i.value }}</pre>
</div>
</div>
<div @click="getTaceLogs()">
<el-button class="popup-btn" type="primary">
{{ t("relatedTraceLogs") }}
</el-button>
</div>
</div>
<el-dialog
v-model="showRelatedLogs"
:destroy-on-close="true"
fullscreen
@closed="showRelatedLogs = false"
>
<el-pagination
v-model:currentPage="pageNum"
v-model:page-size="pageSize"
:small="true"
:total="traceStore.traceSpanLogsTotal"
@current-change="turnPage"
/>
<LogTable
:tableData="traceStore.traceSpanLogs || []"
:type="`service`"
:noLink="true"
>
<div class="log-tips" v-if="!traceStore.traceSpanLogs.length">
{{ t("noData") }}
</div>
</LogTable>
</el-dialog>
</template>
<script lang="ts" setup>
import { ref } from "vue";
import { useI18n } from "vue-i18n";
import type { PropType } from "vue";
import dayjs from "dayjs";
import { useTraceStore } from "@/store/modules/trace";
import copy from "@/utils/copy";
import { ElMessage } from "element-plus";
import LogTable from "@/views/components/LogTable/Index.vue";
/* global defineProps */
const props = defineProps({
currentSpan: { type: Object as PropType<any>, default: () => ({}) },
});
const { t } = useI18n();
const traceStore = useTraceStore();
const pageNum = ref<number>(1);
const showRelatedLogs = ref<boolean>(false);
const pageSize = 10;
const dateFormat = (date: number, pattern = "YYYY-MM-DD HH:mm:ss") =>
dayjs(date).format(pattern);
async function getTaceLogs() {
showRelatedLogs.value = true;
const res = await traceStore.getSpanLogs({
condition: {
relatedTrace: {
traceId: props.currentSpan.traceId,
segmentId: props.currentSpan.segmentId,
spanId: props.currentSpan.spanId,
},
paging: { pageNum: pageNum.value, pageSize, needTotal: true },
},
});
if (res.errors) {
ElMessage.error(res.errors);
}
}
function turnPage(p: number) {
pageNum.value = p;
getTaceLogs();
}
function showCurrentSpanDetail(text: string) {
copy(text);
}
</script>
<style lang="scss" scoped>
.popup-btn {
color: #fff;
margin-top: 40px;
width: 100%;
text-align: center;
}
</style>