github/skywalking-booster-ui
2
0
Fork 1
mirror of https://github.com/apache/skywalking-booster-ui.git synced 2025-05-12 15:52:57 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge remote-tracking branch 'origin' into feature/img

Browse Source
This commit is contained in:
Claire 2024-04-17 11:48:52 +08:00
commit 221db67e31
12 changed files with 99 additions and 69 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/components/Graph.vue
View File

@ -235,12 +235,10 @@ limitations under the License. -->
.no-data {
font-size: $font-size-smaller;
height: 100%;
box-sizing: border-box;
display: -webkit-box;
-webkit-box-orient: horizontal;
-webkit-box-pack: center;
-webkit-box-align: center;
color: #666;
align-items: center;
justify-content: center;
display: flex;
color: var(--text-color-placeholder);
}
.chart {

17
src/hooks/useExpressionsProcessor.ts
View File

@ -112,22 +112,7 @@ export async function useExpressionsQueryProcessor(config: Indexable) {
tips.push(obj.error);
typesOfMQE.push(type);
if (!obj.error) {
if (type === ExpressionResultType.TIME_SERIES_VALUES) {
if (results.length === 1) {
const label = results[0].metric && results[0].metric.labels[0] && results[0].metric.labels[0].value;
source[c.label || label || name] = results[0].values.map((d: { value: unknown }) => d.value) || [];
} else {
for (const item of results) {
const values = item.values.map((d: { value: unknown }) => d.value) || [];
const label = item.metric.labels
.map((d: { key: string; value: string }) => `${d.key}=${d.value}`)
.join(",");
source[label] = values;
}
}
}
if (type === ExpressionResultType.SINGLE_VALUE) {
if ([ExpressionResultType.SINGLE_VALUE, ExpressionResultType.TIME_SERIES_VALUES].includes(type)) {
for (const item of results) {
const label =
item.metric &&

2
src/store/modules/trace.ts
View File

@ -23,7 +23,6 @@ import type { AxiosResponse } from "axios";
import { useAppStoreWithOut } from "@/store/modules/app";
import { useSelectorStore } from "@/store/modules/selectors";
import { QueryOrders } from "@/views/dashboard/data";
interface TraceState {
services: Service[];
instances: Instance[];
@ -168,6 +167,7 @@ export const traceStore = defineStore({
return res.data;
}
const data = res.data.data.trace.spans;
this.setTraceSpans(data || []);
return res.data;
},

2
src/views/dashboard/List.vue
View File

@ -391,6 +391,8 @@ limitations under the License. -->
delete child.label;
delete child.value;
delete child.filters;
delete child.typesOfMQE;
delete child.subTypesOfMQE;
if (isEmptyObject(child.graph)) {
delete child.graph;
}

2
src/views/dashboard/controls/Trace.vue
View File

@ -183,7 +183,7 @@ limitations under the License. -->
.trace-line {
position: relative;
width: 2px;
height: 900px;
height: 100%;
background-color: #e8e8e8;
cursor: ew-resize;

12
src/views/dashboard/graphs/Table.vue
View File

@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
limitations under the License. -->
<template>
<div class="chart-table">
<div class="chart-table" v-if="dataKeys.length">
<div class="row header flex-h">
<div
v-for="key in dataKeys[0]"
@ -41,6 +41,7 @@ limitations under the License. -->
</div>
</div>
</div>
<div class="no-data" v-else>No Data</div>
</template>
<script lang="ts" setup>
import { computed } from "vue";
@ -131,4 +132,13 @@ limitations under the License. -->
width: 50%;
}
}
.no-data {
font-size: $font-size-smaller;
height: 100%;
align-items: center;
justify-content: center;
display: flex;
color: var(--text-color-placeholder);
}
</style>

13
src/views/dashboard/related/demand-log/Content.vue
View File

@ -25,11 +25,14 @@ limitations under the License. -->
<script lang="ts" setup>
import { onMounted, ref, onUnmounted, watch, toRaw } from "vue";
import { useDemandLogStore } from "@/store/modules/demand-log";
import { useAppStoreWithOut } from "@/store/modules/app";
import { Themes } from "@/constants/data";
/*global Nullable */
const demandLogStore = useDemandLogStore();
const monacoInstance = ref();
const logContent = ref<Nullable<HTMLDivElement>>(null);
const appStore = useAppStoreWithOut();
onMounted(() => {
init();
@ -50,6 +53,7 @@ limitations under the License. -->
wordWrap: true,
minimap: { enabled: false },
readonly: true,
theme: getTheme(),
});
toRaw(monacoInstance.value).updateOptions({ readOnly: true });
editorLayout();
@ -64,6 +68,9 @@ limitations under the License. -->
width: width,
});
}
function getTheme() {
return appStore.theme === Themes.Dark ? "vs-dark" : "vs";
}
onUnmounted(() => {
if (!toRaw(monacoInstance.value)) {
return;
@ -72,6 +79,12 @@ limitations under the License. -->
monacoInstance.value = null;
demandLogStore.setLogs("");
});
watch(
() => appStore.theme,
() => {
toRaw(monacoInstance.value).updateOptions({ theme: getTheme() });
},
);
watch(
() => demandLogStore.logs,
() => {

6
src/views/dashboard/related/topology/pod/InstanceMap.vue
View File

@ -125,11 +125,13 @@ limitations under the License. -->
const html = exprssions.map((m: string, index: number) => {
const metric =
topologyStore.hierarchyInstanceNodeMetrics[data.layer || ""][m].values.find(
(val: { id: string; value: unknown }) => val.id === data.id,
(val: { id: string; value: string }) => val.id === data.id,
) || {};
const opt: MetricConfigOpt = nodeMetricConfig[index] || {};
return ` <div class="mb-5"><span class="grey">${opt.label || m}: </span>${metric.value} ${opt.unit || ""}</div>`;
return ` <div class="mb-5"><span class="grey">${opt.label || m}: </span>${metric.value || NaN} ${
opt.unit || ""
}</div>`;
});
const tipHtml = [
`<div class="mb-5"><span class="grey">name: </span>${data.name}</div><div class="mb-5"><span class="grey">layer: </span>${data.layer}</div>`,

6
src/views/dashboard/related/topology/service/HierarchyMap.vue
View File

@ -133,10 +133,12 @@ limitations under the License. -->
const html = exprssions.map((m: string, index: number) => {
const metric =
topologyStore.hierarchyNodeMetrics[data.layer || ""][m].values.find(
(val: { id: string; value: unknown }) => val.id === data.id,
(val: { id: string; value: string }) => val.id === data.id,
) || {};
const opt: MetricConfigOpt = nodeMetricConfig[index] || {};
return ` <div class="mb-5"><span class="grey">${opt.label || m}: </span>${metric.value} ${opt.unit || ""}</div>`;
return ` <div class="mb-5"><span class="grey">${opt.label || m}: </span>${metric.value || NaN} ${
opt.unit || ""
}</div>`;
});
const tipHtml = [
`<div class="mb-5"><span class="grey">name: </span>${data.name}</div><div class="mb-5"><span class="grey">layer: </span>${data.layer}</div>`,

6
src/views/dashboard/related/topology/service/ServiceMap.vue
View File

@ -314,7 +314,7 @@ limitations under the License. -->
const html = nodeMetrics.map((m, index) => {
const metric =
(topologyStore.nodeMetricValue[m] &&
topologyStore.nodeMetricValue[m].values.find((val: { id: string; value: unknown }) => val.id === data.id)) ||
topologyStore.nodeMetricValue[m].values.find((val: { id: string; value: string }) => val.id === data.id)) ||
{};
const opt: MetricConfigOpt = nodeMetricConfig[index] || {};
return ` <div class="mb-5"><span class="grey">${opt.label || m}: </span>${metric.value || NaN} ${
@ -344,7 +344,7 @@ limitations under the License. -->
);
if (metric) {
const opt: MetricConfigOpt = linkServerMetricConfig[index] || {};
return ` <div class="mb-5"><span class="grey">${opt.label || m}: </span>${metric.value} ${
return ` <div class="mb-5"><span class="grey">${opt.label || m}: </span>${metric.value || NaN} ${
opt.unit || ""
}</div>`;
}
@ -355,7 +355,7 @@ limitations under the License. -->
(val: { id: string; value: unknown }) => val.id === data.id,
);
if (metric) {
return ` <div class="mb-5"><span class="grey">${opt.label || m}: </span>${metric.value} ${
return ` <div class="mb-5"><span class="grey">${opt.label || m}: </span>${metric.value || NaN} ${
opt.unit || ""
}</div>`;
}

3
src/views/dashboard/related/trace/TraceList.vue
View File

@ -164,7 +164,8 @@ limitations under the License. -->
}
.trace-t-wrapper {
overflow: hidden;
overflow-x: hidden;
overflow-y: scroll;
border-right: 1px solid var(--sw-trace-list-border);
}

87
src/views/dashboard/related/trace/components/D3Graph/Index.vue
View File

@ -75,6 +75,7 @@ limitations under the License. -->
if (!traceGraph.value) {
return;
}
d3.selectAll(".d3-tip").remove();
if (props.type === "List") {
tree.value = new ListGraph(traceGraph.value, handleSelectSpan);
tree.value.init({ label: "TRACE_ROOT", children: segmentId.value }, props.data, fixSpansSize.value);
@ -96,10 +97,8 @@ limitations under the License. -->
node.children.push(data);
return;
}
if (node.children && node.children.length > 0) {
node.children.forEach((nodeItem: Recordable) => {
for (const nodeItem of node.children || []) {
traverseTree(nodeItem, spanId, segmentId, data);
});
}
}
function changeTree() {
@ -108,7 +107,7 @@ limitations under the License. -->
}
segmentId.value = [];
const segmentGroup: Recordable = {};
const segmentIdGroup: Recordable = [];
const segmentIdGroup: string[] = [];
const fixSpans: Span[] = [];
const segmentHeaders: Span[] = [];
for (const span of props.data) {
@ -118,7 +117,9 @@ limitations under the License. -->
if (span.parentSpanId === -1) {
segmentHeaders.push(span);
} else {
const item = props.data.find((i: Span) => i.segmentId === span.segmentId && i.spanId === span.spanId - 1);
const item = props.data.find(
(i: Span) => i.traceId === span.traceId && i.segmentId === span.segmentId && i.spanId === span.spanId - 1,
);
const fixSpanKeyContent = {
traceId: span.traceId,
segmentId: span.segmentId,
@ -145,18 +146,18 @@ limitations under the License. -->
}
}
}
segmentHeaders.forEach((span: Span) => {
for (const span of segmentHeaders) {
if (span.refs.length) {
let exit = 0;
span.refs.forEach((ref) => {
const i = props.data.findIndex(
(i: Recordable) => ref.parentSegmentId === i.segmentId && ref.parentSpanId === i.spanId,
let exit = null;
for (const ref of span.refs) {
const e = props.data.find(
(i: Recordable) =>
ref.traceId === i.traceId && ref.parentSegmentId === i.segmentId && ref.parentSpanId === i.spanId,
);
if (i > -1) {
exit = 1;
if (e) {
exit = e;
}
}
});
if (!exit) {
const ref = span.refs[0];
// create a known broken node.
@ -214,23 +215,23 @@ limitations under the License. -->
}
}
}
});
[...fixSpans, ...props.data].forEach((i) => {
}
for (const i of [...fixSpans, ...props.data]) {
i.label = i.endpointName || "no operation name";
i.children = [];
if (!segmentGroup[i.segmentId]) {
if (segmentGroup[i.segmentId]) {
segmentGroup[i.segmentId].push(i);
} else {
segmentIdGroup.push(i.segmentId);
segmentGroup[i.segmentId] = [i];
} else {
segmentGroup[i.segmentId].push(i);
}
});
}
fixSpansSize.value = fixSpans.length;
segmentIdGroup.forEach((id: string) => {
for (const id of segmentIdGroup) {
const currentSegment = segmentGroup[id].sort((a: Span, b: Span) => b.parentSpanId - a.parentSpanId);
currentSegment.forEach((s: Recordable) => {
for (const s of currentSegment) {
const index = currentSegment.findIndex((i: Span) => i.spanId === s.parentSpanId);
if (index !== -1) {
if (index > -1) {
if (
(currentSegment[index].isBroken && currentSegment[index].parentSpanId === -1) ||
!currentSegment[index].isBroken
@ -251,37 +252,53 @@ limitations under the License. -->
s.children.push(...children);
}
}
});
}
segmentGroup[id] = currentSegment[currentSegment.length - 1];
});
segmentIdGroup.forEach((id: string) => {
segmentGroup[id].refs.forEach((ref: Recordable) => {
}
for (const id of segmentIdGroup) {
for (const ref of segmentGroup[id].refs) {
if (ref.traceId === props.traceId) {
traverseTree(segmentGroup[ref.parentSegmentId], ref.parentSpanId, ref.parentSegmentId, segmentGroup[id]);
}
});
});
}
}
for (const i in segmentGroup) {
if (segmentGroup[i].refs.length === 0) {
if (segmentGroup[i].refs.length) {
let exit = null;
for (const ref of segmentGroup[i].refs) {
const e = props.data.find(
(i: Recordable) =>
ref.traceId === i.traceId && ref.parentSegmentId === i.segmentId && ref.parentSpanId === i.spanId,
);
if (e) {
exit = e;
}
}
if (exit) {
segmentId.value.push(segmentGroup[i]);
}
} else {
segmentId.value.push(segmentGroup[i]);
}
}
segmentId.value.forEach((i: Span | Recordable) => {
for (const i of segmentId.value) {
collapse(i);
});
}
}
function collapse(d: Span | Recordable) {
if (d.children) {
const item = refSpans.value.find((s: Ref) => s.parentSpanId === d.spanId && s.parentSegmentId === d.segmentId);
let dur = d.endTime - d.startTime;
d.children.forEach((i: Span) => {
for (const i of d.children) {
dur -= i.endTime - i.startTime;
});
}
d.dur = dur < 0 ? 0 : dur;
if (item) {
d.children = d.children.sort(compare("startTime"));
}
d.children.forEach((i: Span) => collapse(i));
for (const i of d.children) {
collapse(i);
}
}
}
function compare(p: string) {