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

feat: trace profiling

Browse Source
This commit is contained in:
Fine 2023-11-13 16:13:44 +08:00
parent 341966c52e
commit 50ca810c7e
4 changed files with 43 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -163,7 +163,7 @@ export const profileStore = defineStore({
return res.data;
},
async getSegmentSpans(params: { segmentId: string }) {
if (!params.segmentId) {
if (!(params && params.segmentId)) {
return new Promise((resolve) => resolve({}));
}
const res: AxiosResponse = await graphql.query("queryProfileSegment").params(params);

1
src/views/dashboard/related/profile/components/SegmentList.vue
View File

@ -58,6 +58,7 @@ limitations under the License. -->
const key = computed(
() =>
(profileStore.currentSegment &&
profileStore.currentSegment.spans &&
profileStore.currentSegment.spans.length &&
profileStore.currentSegment.spans[0].segmentId) ||
"",

30
src/views/dashboard/related/profile/components/Stack/Item.vue
View File

@ -14,7 +14,10 @@ See the License for the specific language governing permissions and
limitations under the License. -->
<template>
<div>
<div :class="['profile-item', 'level' + data.parentId]" :style="{ color: data.topDur ? '#448dfe' : '#3d444f' }">
<div
:class="['profile-item', 'level' + data.parentId]"
:style="{ color: data.topDur ? '#448dfe' : appStore.theme === Themes.Dark ? '#fafbfc' : '#3d444f' }"
>
<div
:class="['thread', 'level' + data.parentId]"
:style="{
@ -47,6 +50,8 @@ limitations under the License. -->
<script lang="ts">
import { ref, defineComponent, toRefs } from "vue";
import type { PropType } from "vue";
import { useAppStoreWithOut } from "@/store/modules/app";
import { Themes } from "@/constants/data";
const props = {
data: { type: Object as PropType<any>, default: () => ({}) },
@ -56,24 +61,25 @@ limitations under the License. -->
name: "TableItem",
props,
setup(props) {
const appStore = useAppStoreWithOut();
const displayChildren = ref<boolean>(true);
function toggle() {
displayChildren.value = !displayChildren.value;
}
return { toggle, displayChildren, ...toRefs(props) };
return { Themes, appStore, toggle, displayChildren, ...toRefs(props) };
},
});
</script>
<style lang="scss" scoped>
@import "./profile.scss";
@import url("./profile.scss");
.profile-item.level0 {
background: rgba(0, 0, 0, 0.04);
color: #448dfe;
background-color: var(--sw-list-hover);
color: var(--el-color-primary);
&:hover {
background: rgba(0, 0, 0, 0.04);
color: #448dfe;
background-color: var(--sw-list-hover);
color: var(--el-color-primary);
}
&::before {
@ -81,7 +87,7 @@ limitations under the License. -->
content: "";
width: 5px;
height: 100%;
background: #448dfe;
background-color: var(--el-color-primary);
left: 0;
}
}
@ -92,11 +98,11 @@ limitations under the License. -->
}
.profile-item.selected {
background: rgba(0, 0, 0, 0.04);
background-color: var(--sw-list-selected);
}
.profile-item:not(.level0):hover {
background: rgba(0, 0, 0, 0.04);
background-color: var(--sw-list-hover);
}
.profile-item > div {
@ -123,7 +129,7 @@ limitations under the License. -->
width: 100%;
height: 6px;
border-radius: 3px;
background: rgb(63, 177, 227);
background: var(--el-color-primary);
position: relative;
margin-top: 11px;
border: none;
@ -131,7 +137,7 @@ limitations under the License. -->
.inner-progress_bar {
position: absolute;
background: rgb(110, 64, 170);
background: rgb(110 64 170);
height: 4px;
border-radius: 2px;
left: 0;

31
src/views/dashboard/related/trace/components/Table/TableItem.vue
View File

@ -143,11 +143,12 @@ limitations under the License. -->
</template>
<script lang="ts">
import { useI18n } from "vue-i18n";
import { ref, computed, defineComponent } from "vue";
import { ref, computed, defineComponent, watch } from "vue";
import type { PropType } from "vue";
import SpanDetail from "../D3Graph/SpanDetail.vue";
import { dateFormat } from "@/utils/dateFormat";
import { useAppStoreWithOut } from "@/store/modules/app";
import { Themes } from "@/constants/data";
/*global Recordable*/
const props = {
@ -201,12 +202,12 @@ limitations under the License. -->
}
const items: any = document.querySelectorAll(".trace-item");
for (const item of items) {
item.style.background = "#fff";
item.style.background = appStore.theme === Themes.Dark ? "#212224" : "#fff";
}
dom.style.background = "rgba(0, 0, 0, 0.1)";
dom.style.background = appStore.theme === Themes.Dark ? "rgba(255, 255, 255, 0.1)" : "rgba(0, 0, 0, 0.1)";
const p: any = document.getElementsByClassName("profiled")[0];
if (p) {
p.style.background = "#eee";
p.style.background = appStore.theme === Themes.Dark ? "#333" : "#eee";
}
}
function selectSpan(event: Recordable) {
@ -232,6 +233,19 @@ limitations under the License. -->
showSelectSpan(dom);
showDetail.value = true;
}
watch(
() => appStore.theme,
() => {
const items: any = document.querySelectorAll(".trace-item");
for (const item of items) {
item.style.background = appStore.theme === Themes.Dark ? "#212224" : "#fff";
}
const p: any = document.getElementsByClassName("profiled")[0];
if (p) {
p.style.background = appStore.theme === Themes.Dark ? "#333" : "#eee";
}
},
);
return {
displayChildren,
outterPercent,
@ -272,7 +286,8 @@ limitations under the License. -->
}
.profiled {
background-color: #eee;
// background-color: #eee;
background-color: var(--sw-table-header);
position: relative;
}
@ -288,7 +303,7 @@ limitations under the License. -->
background-color: $font-color;
color: $text-color;
text-align: center;
box-shadow: #eee 1px 2px 10px;
box-shadow: var(--box-shadow-color) 0 2px 3px;
display: none;
}
@ -320,11 +335,11 @@ limitations under the License. -->
}
.trace-item.selected {
background: rgb(0 0 0 / 4%);
background-color: var(--sw-list-selected);
}
.trace-item:not(.level0):hover {
background: rgb(0 0 0 / 4%);
background-color: var(--sw-list-hover);
}
.trace-item > div {