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

resolved conflict

Browse Source
This commit is contained in:
Peter Olu 2022-06-11 14:46:37 +01:00
commit c7ca96de34
21 changed files with 573 additions and 384 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

649
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

6
package.json
View File

@ -12,6 +12,9 @@
"dependencies": { "dependencies": {
"@element-plus/icons-vue": "^2.0.4", "@element-plus/icons-vue": "^2.0.4",
"@types/jquery": "^3.5.14", "@types/jquery": "^3.5.14",
"@types/sockjs-client": "^1.5.1",
"@types/vertx3-eventbus-client": "^3.5.1",
"@vertx/eventbus-bridge-client.js": "^1.0.0-3-SNAPSHOT",
"axios": "^0.24.0", "axios": "^0.24.0",
"d3": "^7.3.0", "d3": "^7.3.0",
"d3-flame-graph": "^4.1.3", "d3-flame-graph": "^4.1.3",
@ -21,6 +24,9 @@
"jquery": "^3.6.0", "jquery": "^3.6.0",
"lodash": "^4.17.21", "lodash": "^4.17.21",
"pinia": "^2.0.5", "pinia": "^2.0.5",
"sockjs": "^0.3.24",
"sockjs-client": "^1.6.0",
"vertx3-eventbus-client": "^3.9.4",
"vis-timeline": "^7.5.1", "vis-timeline": "^7.5.1",
"vue": "^3.0.0", "vue": "^3.0.0",
"vue-grid-layout": "^3.0.0-beta1", "vue-grid-layout": "^3.0.0-beta1",

2
public/index.html
View File

@ -13,7 +13,7 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and See the License for the specific language governing permissions and
limitations under the License. --> limitations under the License. -->
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en" style="background-color: var(--nice-black)">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">

2
src/App.vue
View File

@ -17,7 +17,7 @@ limitations under the License. -->
</template> </template>
<style> <style>
#app { #app {
color: #2c3e50; color: var(--spp-white);
height: 100%; height: 100%;
} }
</style> </style>

104
src/components/FullVue.vue
View File

@ -19,6 +19,7 @@ limitations under the License. -->
@click="scrollToGraph(item.i, index)" @click="scrollToGraph(item.i, index)"
v-for="(item, index) in items" v-for="(item, index) in items"
:key="item.i" :key="item.i"
:id="'scroll' + item.i"
:class="[currentItem === index ? 'active' : '']" :class="[currentItem === index ? 'active' : '']"
class="full-scroll-to" class="full-scroll-to"
></div> ></div>
@ -31,13 +32,30 @@ limitations under the License. -->
</div> </div>
</template> </template>
<script lang="ts"> <script lang="ts">
import * as $ from "jquery"; import { ref, watch, onMounted, onBeforeUnmount, defineComponent } from "vue";
import { ref, watch, onMounted, defineComponent } from "vue";
import { useI18n } from "vue-i18n"; import { useI18n } from "vue-i18n";
import { useRoute } from "vue-router";
import { useDashboardStore } from "@/store/modules/dashboard"; import { useDashboardStore } from "@/store/modules/dashboard";
import Configuration from "../views/dashboard/configuration"; import Configuration from "../views/dashboard/configuration";
import controls from "../views/dashboard/controls/index"; import controls from "../views/dashboard/controls/index";
import { useRoute } from "vue-router";
import connect from "../hooks/useIDE";
let isScrolling = false;
function scrollStop(callback: { (): void; (): void }, refresh = 66) {
let scrollListener: number;
window.addEventListener(
"scroll",
function (event) {
isScrolling = true;
window.clearTimeout(scrollListener);
scrollListener = window.setTimeout(callback, refresh);
},
true
);
}
scrollStop(function () {
isScrolling = false;
});
export default defineComponent({ export default defineComponent({
name: "FullView", name: "FullView",
@ -51,11 +69,10 @@ export default defineComponent({
setup() { setup() {
const dashboardStore = useDashboardStore(); const dashboardStore = useDashboardStore();
const { t } = useI18n(); const { t } = useI18n();
const p = useRoute().params;
const arrayOfItems = ref<Element[]>([]); const arrayOfItems = ref<Element[]>([]);
const currentItem = ref<number>(0); const currentItem = ref<number>(0);
const scrollWrapRef = ref<any>(null); const scrollWrapRef = ref<any>(null);
const isScrolling = ref(false); const { path, query } = useRoute();
watch( watch(
() => dashboardStore.layout, () => dashboardStore.layout,
() => { () => {
@ -65,8 +82,13 @@ export default defineComponent({
} }
); );
function scrollToGraph(e: any, index: number) { function scrollToGraph(e: any, index: number) {
document?.getElementById(`item${e}`)?.scrollIntoView(); isScrolling = true;
currentItem.value = index; let el = document.getElementById(`item${e}`);
if (el != null) {
el.scrollIntoView();
currentItem.value = index;
}
} }
function observeItems() { function observeItems() {
const observer = new IntersectionObserver((entries) => { const observer = new IntersectionObserver((entries) => {
@ -82,19 +104,18 @@ export default defineComponent({
}); });
} }
function scrollTo(index: number) { function scrollTo(index: number) {
arrayOfItems.value[index]?.scrollIntoView(); let scrollIndex = arrayOfItems.value[index];
if (isScrolling.value) { if (scrollIndex) {
setTimeout(() => { let el = document.getElementById(`scroll${scrollIndex.id.substr(4)}`);
isScrolling.value = false; if (el != null) {
}, 800); el.click();
}
} }
} }
function scrollUp() { function scrollUp() {
if (currentItem.value > 0) { if (currentItem.value > 0) {
currentItem.value--; currentItem.value--;
scrollTo(currentItem.value); scrollTo(currentItem.value);
} else if (currentItem.value === 0) {
isScrolling.value = false;
} }
} }
function scrollDown() { function scrollDown() {
@ -102,26 +123,52 @@ export default defineComponent({
currentItem.value++; currentItem.value++;
scrollTo(currentItem.value); scrollTo(currentItem.value);
} else if (currentItem.value === arrayOfItems?.value?.length - 1) { } else if (currentItem.value === arrayOfItems?.value?.length - 1) {
isScrolling.value = true;
currentItem.value = 0; currentItem.value = 0;
scrollTo(currentItem.value); scrollTo(currentItem.value);
} }
} }
function initScroller() { function wheelGraphScroll(e: WheelEvent) {
scrollWrapRef?.value?.addEventListener("wheel", (e: WheelEvent) => { e.preventDefault();
if (isScrolling.value === false) { if (!isScrolling) {
isScrolling.value = true; if (e.deltaY < 0) {
if (e.deltaY < 0) { scrollUp();
scrollUp(); } else {
} else { scrollDown();
scrollDown();
}
} }
}); }
}
function keyGraphScroll(e: KeyboardEvent) {
if (e.keyCode == 38) {
e.preventDefault();
scrollUp();
} else if (e.keyCode === 40) {
e.preventDefault();
scrollDown();
}
}
function initScroller() {
//todo: smarter logic on when to add listeners
if (query["portal"] === "true" && path.endsWith("Activity")) {
console.log("Adding portal wheel/key listeners");
scrollWrapRef?.value?.addEventListener("wheel", wheelGraphScroll, {
passive: false,
});
document.addEventListener("keydown", keyGraphScroll, {
passive: false,
});
}
} }
onMounted(() => { onMounted(() => {
observeItems(); observeItems();
initScroller(); initScroller();
if (query["portal"] === "true") {
connect();
}
});
onBeforeUnmount(() => {
scrollWrapRef?.value?.removeEventListener("wheel", wheelGraphScroll);
document.removeEventListener("keydown", keyGraphScroll);
}); });
return { return {
t, t,
@ -150,10 +197,9 @@ export default defineComponent({
display: flex; display: flex;
flex-direction: column; flex-direction: column;
right: 0; right: 0;
// top: 50%; top: 37vh;
//transform: translateY(60%);
height: auto; height: auto;
width: 20px; width: 17px;
.full-scroll-to { .full-scroll-to {
opacity: 0.5; opacity: 0.5;
@ -168,7 +214,7 @@ export default defineComponent({
.full-scroll-to.active { .full-scroll-to.active {
opacity: 1; opacity: 1;
padding: 6px; padding: 6px;
background: #9876AA; background: #1a1a1a;
} }
} }
} }

6
src/graphql/fetch.ts
View File

@ -22,14 +22,10 @@ async function query(param: {
conditions: { [key: string]: unknown }; conditions: { [key: string]: unknown };
}) { }) {
const res: AxiosResponse = await axios.post( const res: AxiosResponse = await axios.post(
"/graphql", "/graphql/dashboard",
{ query: param.queryStr, variables: { ...param.conditions } }, { query: param.queryStr, variables: { ...param.conditions } },
{ {
cancelToken: cancelToken(), cancelToken: cancelToken(),
headers: {
Authorization:
"Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiJ9.eyJkZXZlbG9wZXJfaWQiOiJzeXN0ZW0iLCJjcmVhdGVkX2F0IjoxNjIyNDIxMzY0ODY4LCJleHBpcmVzX2F0IjoxNjUzOTU3MzY0ODY4LCJpYXQiOjE2MjI0MjEzNjR9.ZVHtxQkfCF7KM_dyDOgawbwpEAsmnCWB4c8I52svPvVc-SlzkEe0SYrNufNPniYZeM3IF0Gbojl_DSk2KleAz9CLRO3zfegciXKeEEvGjsNOqfQjgU5yZtBWmTimVXq5QoZMEGuAojACaf-m4J0H7o4LQNGwrDVA-noXVE0Eu84A5HxkjrRuFlQWv3fzqSRC_-lI0zRKuFGD-JkIfJ9b_wP_OjBWT6nmqkZn_JmK7UwniTUJjocszSA2Ma3XLx2xVPzBcz00QWyjhIyiftxNQzgqLl1XDVkRtzXUIrHnFCR8BcgR_PsqTBn5nH7aCp16zgmkkbOpmJXlNpDSVz9zUY4NOrB1jTzDB190COrfCXddb7JO6fmpet9_Zd3kInJx4XsT3x7JfBSWr9FBqFoUmNkgIWjkbN1TpwMyizXASp1nOmwJ64FDIbSpfpgUAqfSWXKZYhSisfnBLEyHCjMSPzVmDh949w-W1wU9q5nGFtrx6PTOxK_WKOiWU8_oeTjL0pD8pKXqJMaLW-OIzfrl3kzQNuF80YT-nxmNtp5PrcxehprlPmqSB_dyTHccsO3l63d8y9hiIzfRUgUjTJbktFn5t41ADARMs_0WMpIGZJyxcVssstt4J1Gj8WUFOdqPsIKigJZMn3yshC5S-KY-7S0dVd0VXgvpPqmpb9Q9Uho",
},
} }
); );
if (res.data.errors) { if (res.data.errors) {

6
src/graphql/index.ts
View File

@ -48,17 +48,13 @@ class Graphql {
public params(variablesData: unknown): AxiosPromise<void> { public params(variablesData: unknown): AxiosPromise<void> {
return axios return axios
.post( .post(
"/graphql", "/graphql/dashboard",
{ {
query: query[this.queryData], query: query[this.queryData],
variables: variablesData, variables: variablesData,
}, },
{ {
cancelToken: cancelToken(), cancelToken: cancelToken(),
headers: {
Authorization:
"Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiJ9.eyJkZXZlbG9wZXJfaWQiOiJzeXN0ZW0iLCJjcmVhdGVkX2F0IjoxNjIyNDIxMzY0ODY4LCJleHBpcmVzX2F0IjoxNjUzOTU3MzY0ODY4LCJpYXQiOjE2MjI0MjEzNjR9.ZVHtxQkfCF7KM_dyDOgawbwpEAsmnCWB4c8I52svPvVc-SlzkEe0SYrNufNPniYZeM3IF0Gbojl_DSk2KleAz9CLRO3zfegciXKeEEvGjsNOqfQjgU5yZtBWmTimVXq5QoZMEGuAojACaf-m4J0H7o4LQNGwrDVA-noXVE0Eu84A5HxkjrRuFlQWv3fzqSRC_-lI0zRKuFGD-JkIfJ9b_wP_OjBWT6nmqkZn_JmK7UwniTUJjocszSA2Ma3XLx2xVPzBcz00QWyjhIyiftxNQzgqLl1XDVkRtzXUIrHnFCR8BcgR_PsqTBn5nH7aCp16zgmkkbOpmJXlNpDSVz9zUY4NOrB1jTzDB190COrfCXddb7JO6fmpet9_Zd3kInJx4XsT3x7JfBSWr9FBqFoUmNkgIWjkbN1TpwMyizXASp1nOmwJ64FDIbSpfpgUAqfSWXKZYhSisfnBLEyHCjMSPzVmDh949w-W1wU9q5nGFtrx6PTOxK_WKOiWU8_oeTjL0pD8pKXqJMaLW-OIzfrl3kzQNuF80YT-nxmNtp5PrcxehprlPmqSB_dyTHccsO3l63d8y9hiIzfRUgUjTJbktFn5t41ADARMs_0WMpIGZJyxcVssstt4J1Gj8WUFOdqPsIKigJZMn3yshC5S-KY-7S0dVd0VXgvpPqmpb9Q9Uho",
},
} }
) )
.then((res: AxiosResponse) => { .then((res: AxiosResponse) => {

27
src/hooks/useIDE.ts Normal file
View File

@ -0,0 +1,27 @@
import * as EventBus from "vertx3-eventbus-client";
import router from "@/router";
import { useAppStoreWithOut } from "@/store/modules/app";
const appStore = useAppStoreWithOut();
export default function connect(idePort = 8080) {
console.log("Connecting to IDE...");
const eb = new EventBus(`http://localhost:${idePort}/eventbus`);
eb.onopen = () => {
console.log("EventBus connected");
appStore.setAutoRefresh(true);
eb.registerHandler(
"portal.SetCurrentPage",
(error: Error, message: any) => {
console.log("Setting current page:" + JSON.stringify(message));
router.push(message.body.page);
}
);
eb.registerHandler("portal.SetSettings", (error: Error, message: any) => {
console.log("Setting config:" + JSON.stringify(message));
});
};
}

2
src/layout/components/AppMain.vue
View File

@ -50,7 +50,7 @@ if (!appStore.utc) {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.app-main { .app-main {
height: calc(100% - 40px); height: calc(100% - 39px);
background: #f7f9fa; background: #f7f9fa;
} }
</style> </style>

5
src/layout/components/SideBar.vue
View File

@ -149,10 +149,9 @@ const filterMenus = (menus: any[]) => {
<style lang="scss" scoped> <style lang="scss" scoped>
.side-bar { .side-bar {
background: #252a2f; background: #252a2f;
height: 100%; height: 100vh;
min-height: 700px;
position: relative; position: relative;
margin-bottom: 100px; overflow-y: visible;
} }
.el-menu-vertical:not(.el-menu--collapse) { .el-menu-vertical:not(.el-menu--collapse) {

94
src/styles/jetbrains-dark.scss
View File

@ -30,7 +30,8 @@
} }
.el-pagination.is-background .el-pager li:not(.disabled).active { .el-pagination.is-background .el-pager li:not(.disabled).active {
background: var(--spp-other-green); background: var(--spp-light-grey);
color: ghostwhite !important;
} }
.el-input__inner { .el-input__inner {
@ -108,7 +109,7 @@
} }
.settings input { .settings input {
background: var(--spp-dark-green) !important; background: var(--nice-black) !important;
border: 1px solid var(--spp-blue) !important; border: 1px solid var(--spp-blue) !important;
color: var(--spp-white); color: var(--spp-white);
} }
@ -120,6 +121,20 @@
.el-switch__core { .el-switch__core {
--el-switch-off-color: var(--spp-dark-green); --el-switch-off-color: var(--spp-dark-green);
--el-switch-on-color: var(--spp-red); --el-switch-on-color: var(--spp-red);
background-color: var(--spp-darkest-green) !important;
border-color: var(--border-color) !important;
}
.el-switch__core .el-switch__inner .is-icon, .el-switch__core .el-switch__inner .is-text {
color: var(--spp-light-grey);
}
.el-switch__action {
background-color: ghostwhite !important;
}
.is-checked > .el-switch__core {
background-color: var(--spp-white) !important;
} }
.alarm-tool { .alarm-tool {
@ -140,7 +155,7 @@
} }
.timeline-table-i { .timeline-table-i {
border-left: 4px solid var(--spp-other-green) !important; border-left: 4px solid var(--border-color) !important;
} }
.timeline-table-i::before { .timeline-table-i::before {
@ -184,20 +199,48 @@
background-color: var(--nice-black) !important; background-color: var(--nice-black) !important;
} }
.el-pagination__jump {
color: var(--spp-light-grey) !important;
}
.el-pager li.active { .el-pager li.active {
background-color: var(--spp-other-green); background-color: var(--border-color);
color: var(--spp-light-grey) !important;
}
.btn-quickprev, .btn-quicknext {
color: var(--spp-light-grey) !important;
} }
.el-pager li { .el-pager li {
background-color: var(--spp-green); background-color: var(--spp-green);
color: var(--spp-white) !important;
}
.btn-prev[type="button"] {
background-color: var(--border-color);
color: var(--spp-light-grey) !important;
} }
.el-pager li.active { .el-pager li.active {
color: var(--spp-white); color: var(--spp-light-grey);
font-weight: bold;
text-decoration: underline;
}
.btn-prev {
background-color: var(--spp-grey) !important;
color: black !important;
}
.el-pagination button:disabled {
background-color: var(--spp-dark-green) !important;
color: var(--spp-white) !important;
} }
.el-pager + button.btn-next[type="button"] { .el-pager + button.btn-next[type="button"] {
background-color: var(--spp-grey); background-color: var(--border-color);
color: var(--spp-light-grey) !important;
} }
.toggle-selection { .toggle-selection {
@ -259,10 +302,6 @@
color: var(--spp-light-grey) !important; color: var(--spp-light-grey) !important;
} }
.unit {
color: var(--spp-white) !important;
}
.profile-item.level0 { .profile-item.level0 {
&:hover { &:hover {
color: var(--spp-red) !important; color: var(--spp-red) !important;
@ -414,7 +453,7 @@ a {
.timeline-table-i { .timeline-table-i {
&::before { &::before {
background-color: #448dfe !important; background-color: var(--spp-white) !important;
} }
} }
@ -423,6 +462,11 @@ a {
color: var(--spp-white); color: var(--spp-white);
} }
.trace-header div {
background-color: var(--table-header-color) !important;
color: var(--spp-white);
}
.log-tips { .log-tips {
color: red; color: red;
} }
@ -481,3 +525,31 @@ a {
.scroll-handler__wrapper .scroll-to.active { .scroll-handler__wrapper .scroll-to.active {
background-color: var(--border-color) !important; background-color: var(--border-color) !important;
} }
.el-input-group__append, .el-input-group__prepend {
background-color: var(--spp-darkest-green) !important;
border-color: var(--spp-darkest-green);
}
.tabs span.active input.tab-name.view {
//background-color: var(--border-color) !important;
color: var(--spp-light-grey) !important;
font-weight: bold;
text-decoration: underline;
}
.tab-header {
background-color: var(--nice-black) !important;
}
.timeline-item {
color: var(--spp-light-grey) !important;
}
.el-loading-spinner .path {
stroke: var(--spp-white) !important;
}
.tips {
color: var(--spp-white) !important;
}

20
src/styles/lib.scss
View File

@ -48,23 +48,23 @@
} }
.green { .green {
color: #4caf50; color: #629755;
} }
.red { .red {
color: #e54c17; color: #e1483b;
} }
.blue { .blue {
color: #448dfe; color: #6897BB;
} }
.purple { .purple {
color: #6e40aa; color: #9876AA;
} }
.yellow { .yellow {
color: #fbb03b; color: #FFC66D;
} }
.grey { .grey {
@ -76,23 +76,23 @@
} }
.bg-green { .bg-green {
background-color: #4caf50; background-color: #629755;
} }
.bg-red { .bg-red {
background-color: #e54c17; background-color: #e1483b;
} }
.bg-blue { .bg-blue {
background-color: #448dfe; background-color: #6897BB;
} }
.bg-purple { .bg-purple {
background-color: #6e40aa; background-color: #9876AA;
} }
.bg-yellow { .bg-yellow {
background-color: #fbb03b; background-color: #FFC66D;
} }
.bg-grey { .bg-grey {

1
src/types/sockjs.d.ts vendored Normal file
View File

@ -0,0 +1 @@
declare module "sockjs-client";

1
src/types/vertx-eventbus.d.ts vendored Normal file
View File

@ -0,0 +1 @@
declare module "vertx3-eventbus-client";

13
src/views/dashboard/graphs/Line.vue
View File

@ -117,19 +117,20 @@ function getOption() {
let color: string[] = []; let color: string[] = [];
switch (keys.length) { switch (keys.length) {
case 2: case 2:
color = ["#629755", "#9876AA"]; color = ["#6897BB", "#9876AA"];
break; break;
case 1: case 1:
color = ["#629755"]; color = ["#6897BB"];
break; break;
default: default:
color = [ color = [
"#629755", "#6897BB",
"#9876AA", "#9876AA",
"#CC7832", "#629755",
"#8A653B",
"#e1483b",
"#FFC66D", "#FFC66D",
"#CC7832",
"#e1483b",
"#8A653B",
]; ];
break; break;
} }

2
src/views/dashboard/graphs/TopList.vue
View File

@ -35,7 +35,7 @@ limitations under the License. -->
<el-progress <el-progress
:stroke-width="6" :stroke-width="6"
:percentage="(i.value / maxValue) * 100" :percentage="(i.value / maxValue) * 100"
:color="TextColors[config.color || 'red']" :color="TextColors[config.color || 'purple']"
:show-text="false" :show-text="false"
/> />
</div> </div>

3
src/views/dashboard/panel/Tool.vue
View File

@ -711,7 +711,8 @@ watch(
<style lang="scss" scoped> <style lang="scss" scoped>
.dashboard-tool { .dashboard-tool {
text-align: right; text-align: right;
padding: 3px 5px 5px 5px; height: 35px;
padding: 0 5px 0 5px;
background: rgb(240, 242, 245); background: rgb(240, 242, 245);
border-bottom: 1px solid #dfe4e8; border-bottom: 1px solid #dfe4e8;
justify-content: space-between; justify-content: space-between;

1
src/views/dashboard/panel/component/TraceDetailsTools.vue
View File

@ -277,6 +277,7 @@ export default defineComponent({
} }
.trace-detail-wrapper { .trace-detail-wrapper {
height: 35px;
font-size: 12px; font-size: 12px;
width: 100%; width: 100%;
justify-content: space-between; justify-content: space-between;

1
src/views/dashboard/related/trace/Detail.vue
View File

@ -135,7 +135,6 @@ export default defineComponent({
height: 100%; height: 100%;
// height: calc(100% - 100px); // height: calc(100% - 100px);
overflow: auto; overflow: auto;
padding-bottom: 20px;
} }
.trace-chart.full-view { .trace-chart.full-view {
height: calc(100% - 1px) !important; height: calc(100% - 1px) !important;

8
src/views/dashboard/related/trace/utils/d3-trace-list.ts
View File

@ -173,7 +173,7 @@ export default class ListGraph {
.attr("class", "node-text") .attr("class", "node-text")
.attr("x", 35) .attr("x", 35)
.attr("y", -6) .attr("y", -6)
.attr("fill", "#333") .attr("fill", "var(--spp-light-grey)")
.text((d: any) => { .text((d: any) => {
if (d.data.label === "TRACE_ROOT") { if (d.data.label === "TRACE_ROOT") {
return ""; return "";
@ -187,7 +187,7 @@ export default class ListGraph {
.attr("class", "node-text") .attr("class", "node-text")
.attr("x", 35) .attr("x", 35)
.attr("y", 12) .attr("y", 12)
.attr("fill", "#ccc") .attr("fill", "var(--spp-white)")
.style("font-size", "11px") .style("font-size", "11px")
.text( .text(
(d: any) => (d: any) =>
@ -271,8 +271,8 @@ export default class ListGraph {
.enter() .enter()
.insert("path", "g") .insert("path", "g")
.attr("class", "trace-link") .attr("class", "trace-link")
.attr("fill", "rgba(0,0,0,0)") .attr("fill", "rgba(128,128,128,0)")
.attr("stroke", "rgba(0, 0, 0, 0.1)") .attr("stroke", "rgba(128,128,128,0.1)")
.attr("stroke-width", 2) .attr("stroke-width", 2)
.attr("transform", `translate(5, 0)`) .attr("transform", `translate(5, 0)`)
.attr("d", () => { .attr("d", () => {

4
src/views/dashboard/related/trace/utils/d3-trace-tree.ts
View File

@ -218,7 +218,7 @@ export default class TraceMap {
? (d.data.isError ? "◉ " : "") + d.data.label.slice(0, 19) + "..." ? (d.data.isError ? "◉ " : "") + d.data.label.slice(0, 19) + "..."
: (d.data.isError ? "◉ " : "") + d.data.label : (d.data.isError ? "◉ " : "") + d.data.label
) )
.style("fill", (d: any) => (!d.data.isError ? "#3d444f" : "#E54C17")); .style("fill", (d: any) => (!d.data.isError ? "var(--spp-light-grey)" : "#E54C17"));
nodeEnter nodeEnter
.append("text") .append("text")
.attr("class", "node-text") .attr("class", "node-text")
@ -318,7 +318,7 @@ export default class TraceMap {
const o = { x: source.x0, y: source.y0 }; const o = { x: source.x0, y: source.y0 };
return diagonal(o, o); return diagonal(o, o);
}) })
.attr("stroke", "rgba(0, 0, 0, 0.1)") .attr("stroke", "var(--spp-white)")
.style("stroke-width", 1.5) .style("stroke-width", 1.5)
.style("fill", "none"); .style("fill", "none");