You are viewing a plain text version of this content. The canonical link for it is here.
Posted to notifications@skywalking.apache.org by wu...@apache.org on 2022/10/14 03:28:15 UTC
[skywalking-booster-ui] branch main updated: revert logs on trace widget (#170)
This is an automated email from the ASF dual-hosted git repository.
wusheng pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/skywalking-booster-ui.git
The following commit(s) were added to refs/heads/main by this push:
new 9f57e35 revert logs on trace widget (#170)
9f57e35 is described below
commit 9f57e351199b5e08bfad4e6587b77ed25e61b1e5
Author: Fine0830 <fa...@gmail.com>
AuthorDate: Fri Oct 14 11:28:10 2022 +0800
revert logs on trace widget (#170)
---
src/locales/lang/en.ts | 1 +
src/locales/lang/es.ts | 1 +
src/locales/lang/zh.ts | 1 +
src/router/data/gateway.ts | 2 +-
src/types/components.d.ts | 1 +
.../related/trace/components/D3Graph/Index.vue | 8 ---
.../trace/components/D3Graph/SpanDetail.vue | 71 +++++++++++++++++-----
.../dashboard/related/trace/utils/d3-trace-list.ts | 1 +
8 files changed, 62 insertions(+), 24 deletions(-)
diff --git a/src/locales/lang/en.ts b/src/locales/lang/en.ts
index 52cae28..9271247 100644
--- a/src/locales/lang/en.ts
+++ b/src/locales/lang/en.ts
@@ -154,6 +154,7 @@ const msg = {
query: "Query",
postgreSQL: "PostgreSQL",
endpointTips: "The table shows up to 20 pieces of endpoints.",
+ apisix: "APISIX",
seconds: "Seconds",
hourTip: "Select Hour",
minuteTip: "Select Minute",
diff --git a/src/locales/lang/es.ts b/src/locales/lang/es.ts
index 3d8e773..f061bfb 100644
--- a/src/locales/lang/es.ts
+++ b/src/locales/lang/es.ts
@@ -154,6 +154,7 @@ const msg = {
query: "Consulta",
postgreSQL: "PostgreSQL",
endpointTips: "Aquí, la tabla muestra hasta 20 punto final.",
+ apisix: "APISIX",
seconds: "Segundos",
hourTip: "Seleccione Hora",
minuteTip: "Seleccione Minuto",
diff --git a/src/locales/lang/zh.ts b/src/locales/lang/zh.ts
index e72dfb7..af9bfc7 100644
--- a/src/locales/lang/zh.ts
+++ b/src/locales/lang/zh.ts
@@ -151,6 +151,7 @@ const msg = {
query: "查询",
postgreSQL: "PostgreSQL",
endpointTips: "这里最多展示20条endpoints。",
+ apisix: "APISIX",
seconds: "秒",
hourTip: "选择小时",
minuteTip: "选择分钟",
diff --git a/src/router/data/gateway.ts b/src/router/data/gateway.ts
index c5e0b39..f381438 100644
--- a/src/router/data/gateway.ts
+++ b/src/router/data/gateway.ts
@@ -30,7 +30,7 @@ export default [
path: "/apisix",
name: "APISIX",
meta: {
- title: "APISIX",
+ title: "apisix",
layer: "APISIX",
},
},
diff --git a/src/types/components.d.ts b/src/types/components.d.ts
index 98d9902..695f24e 100644
--- a/src/types/components.d.ts
+++ b/src/types/components.d.ts
@@ -9,6 +9,7 @@ declare module '@vue/runtime-core' {
ElCollapse: typeof import('element-plus/es')['ElCollapse']
ElCollapseItem: typeof import('element-plus/es')['ElCollapseItem']
ElDialog: typeof import('element-plus/es')['ElDialog']
+ ElDrawer: typeof import('element-plus/es')['ElDrawer']
ElDropdown: typeof import('element-plus/es')['ElDropdown']
ElDropdownItem: typeof import('element-plus/es')['ElDropdownItem']
ElDropdownMenu: typeof import('element-plus/es')['ElDropdownMenu']
diff --git a/src/views/dashboard/related/trace/components/D3Graph/Index.vue b/src/views/dashboard/related/trace/components/D3Graph/Index.vue
index 35f3db6..a95d42d 100644
--- a/src/views/dashboard/related/trace/components/D3Graph/Index.vue
+++ b/src/views/dashboard/related/trace/components/D3Graph/Index.vue
@@ -362,14 +362,6 @@ watch(
border-radius: 4px;
}
-.trace-list .trace-node rect {
- cursor: pointer;
-
- &:hover {
- fill: rgba(0, 0, 0, 0.05);
- }
-}
-
.dialog-c-text {
white-space: pre;
overflow: auto;
diff --git a/src/views/dashboard/related/trace/components/D3Graph/SpanDetail.vue b/src/views/dashboard/related/trace/components/D3Graph/SpanDetail.vue
index eb534c1..061325f 100644
--- a/src/views/dashboard/related/trace/components/D3Graph/SpanDetail.vue
+++ b/src/views/dashboard/related/trace/components/D3Graph/SpanDetail.vue
@@ -81,34 +81,75 @@ limitations under the License. -->
{{ t("relatedTraceLogs") }}
</el-button>
</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"
+ layout="prev, pager, next"
+ :pager-count="5"
+ :total="total"
+ @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 { inject } from "vue";
+import { ref, computed } from "vue";
import { useI18n } from "vue-i18n";
import type { PropType } from "vue";
import copy from "@/utils/copy";
-import getDashboard from "@/hooks/useDashboardsSession";
-import { LayoutConfig } from "@/types/dashboard";
+import { ElMessage } from "element-plus";
import { dateFormat } from "@/utils/dateFormat";
+import { useTraceStore } from "@/store/modules/trace";
+import LogTable from "@/views/dashboard/related/log/LogTable/Index.vue";
-/*global defineProps, Recordable */
-const options: Recordable<LayoutConfig> = inject("options") || {};
+/*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 total = computed(() =>
+ traceStore.traceList.length === pageSize
+ ? pageSize * pageNum.value + 1
+ : pageSize * pageNum.value
+);
async function getTaceLogs() {
- const { associationWidget } = getDashboard();
- associationWidget(
- (options.id as any) || "",
- {
- sourceId: options?.id || "",
- traceId: props.currentSpan.traceId,
- segmentId: props.currentSpan.segmentId,
- spanId: props.currentSpan.spanId,
+ 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 },
},
- "Log"
- );
+ });
+ if (res.errors) {
+ ElMessage.error(res.errors);
+ }
+}
+function turnPage(p: number) {
+ pageNum.value = p;
+ getTaceLogs();
}
function showCurrentSpanDetail(text: string) {
copy(text);
diff --git a/src/views/dashboard/related/trace/utils/d3-trace-list.ts b/src/views/dashboard/related/trace/utils/d3-trace-list.ts
index ddd7043..15190c7 100644
--- a/src/views/dashboard/related/trace/utils/d3-trace-list.ts
+++ b/src/views/dashboard/related/trace/utils/d3-trace-list.ts
@@ -141,6 +141,7 @@ export default class ListGraph {
.append("g")
.attr("transform", `translate(${source.y0},${source.x0})`)
.attr("class", "trace-node")
+ .attr("style", "cursor: pointer")
.style("opacity", 0)
.on("mouseover", function (event: any, d: Trace) {
t.tip.show(d, this);