github/skywalking-booster-ui
2
0
Fork 1
mirror of https://github.com/apache/skywalking-booster-ui.git synced 2025-05-14 09:00:50 +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": {
"@element-plus/icons-vue": "^2.0.4",
"@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",
"d3": "^7.3.0",
"d3-flame-graph": "^4.1.3",
@ -21,6 +24,9 @@
"jquery": "^3.6.0",
"lodash": "^4.17.21",
"pinia": "^2.0.5",
"sockjs": "^0.3.24",
"sockjs-client": "^1.6.0",
"vertx3-eventbus-client": "^3.9.4",
"vis-timeline": "^7.5.1",
"vue": "^3.0.0",
"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
limitations under the License. -->
<!DOCTYPE html>
<html lang="en">
<html lang="en" style="background-color: var(--nice-black)">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">

2
src/App.vue
View File

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

104
src/components/FullVue.vue
View File

@ -19,6 +19,7 @@ limitations under the License. -->
@click="scrollToGraph(item.i, index)"
v-for="(item, index) in items"
:key="item.i"
:id="'scroll' + item.i"
:class="[currentItem === index ? 'active' : '']"
class="full-scroll-to"
></div>
@ -31,13 +32,30 @@ limitations under the License. -->
</div>
</template>
<script lang="ts">
import * as $ from "jquery";
import { ref, watch, onMounted, defineComponent } from "vue";
import { ref, watch, onMounted, onBeforeUnmount, defineComponent } from "vue";
import { useI18n } from "vue-i18n";
import { useRoute } from "vue-router";
import { useDashboardStore } from "@/store/modules/dashboard";
import Configuration from "../views/dashboard/configuration";
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({
name: "FullView",
@ -51,11 +69,10 @@ export default defineComponent({
setup() {
const dashboardStore = useDashboardStore();
const { t } = useI18n();
const p = useRoute().params;
const arrayOfItems = ref<Element[]>([]);
const currentItem = ref<number>(0);
const scrollWrapRef = ref<any>(null);
const isScrolling = ref(false);
const { path, query } = useRoute();
watch(
() => dashboardStore.layout,
() => {
@ -65,8 +82,13 @@ export default defineComponent({
}
);
function scrollToGraph(e: any, index: number) {
document?.getElementById(`item${e}`)?.scrollIntoView();
currentItem.value = index;
isScrolling = true;
let el = document.getElementById(`item${e}`);
if (el != null) {
el.scrollIntoView();
currentItem.value = index;
}
}
function observeItems() {
const observer = new IntersectionObserver((entries) => {
@ -82,19 +104,18 @@ export default defineComponent({
});
}
function scrollTo(index: number) {
arrayOfItems.value[index]?.scrollIntoView();
if (isScrolling.value) {
setTimeout(() => {
isScrolling.value = false;
}, 800);
let scrollIndex = arrayOfItems.value[index];
if (scrollIndex) {
let el = document.getElementById(`scroll${scrollIndex.id.substr(4)}`);
if (el != null) {
el.click();
}
}
}
function scrollUp() {
if (currentItem.value > 0) {
currentItem.value--;
scrollTo(currentItem.value);
} else if (currentItem.value === 0) {
isScrolling.value = false;
}
}
function scrollDown() {
@ -102,26 +123,52 @@ export default defineComponent({
currentItem.value++;
scrollTo(currentItem.value);
} else if (currentItem.value === arrayOfItems?.value?.length - 1) {
isScrolling.value = true;
currentItem.value = 0;
scrollTo(currentItem.value);
}
}
function initScroller() {
scrollWrapRef?.value?.addEventListener("wheel", (e: WheelEvent) => {
if (isScrolling.value === false) {
isScrolling.value = true;
if (e.deltaY < 0) {
scrollUp();
} else {
scrollDown();
}
function wheelGraphScroll(e: WheelEvent) {
e.preventDefault();
if (!isScrolling) {
if (e.deltaY < 0) {
scrollUp();
} else {
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(() => {
observeItems();
initScroller();
if (query["portal"] === "true") {
connect();
}
});
onBeforeUnmount(() => {
scrollWrapRef?.value?.removeEventListener("wheel", wheelGraphScroll);
document.removeEventListener("keydown", keyGraphScroll);
});
return {
t,
@ -150,10 +197,9 @@ export default defineComponent({
display: flex;
flex-direction: column;
right: 0;
// top: 50%;
//transform: translateY(60%);
top: 37vh;
height: auto;
width: 20px;
width: 17px;
.full-scroll-to {
opacity: 0.5;
@ -168,7 +214,7 @@ export default defineComponent({
.full-scroll-to.active {
opacity: 1;
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 };
}) {
const res: AxiosResponse = await axios.post(
"/graphql",
"/graphql/dashboard",
{ query: param.queryStr, variables: { ...param.conditions } },
{
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) {

6
src/graphql/index.ts
View File

@ -48,17 +48,13 @@ class Graphql {
public params(variablesData: unknown): AxiosPromise<void> {
return axios
.post(
"/graphql",
"/graphql/dashboard",
{
query: query[this.queryData],
variables: variablesData,
},
{
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) => {

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>
<style lang="scss" scoped>
.app-main {
height: calc(100% - 40px);
height: calc(100% - 39px);
background: #f7f9fa;
}
</style>

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

@ -149,10 +149,9 @@ const filterMenus = (menus: any[]) => {
<style lang="scss" scoped>
.side-bar {
background: #252a2f;
height: 100%;
min-height: 700px;
height: 100vh;
position: relative;
margin-bottom: 100px;
overflow-y: visible;
}
.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 {
background: var(--spp-other-green);
background: var(--spp-light-grey);
color: ghostwhite !important;
}
.el-input__inner {
@ -108,7 +109,7 @@
}
.settings input {
background: var(--spp-dark-green) !important;
background: var(--nice-black) !important;
border: 1px solid var(--spp-blue) !important;
color: var(--spp-white);
}
@ -120,6 +121,20 @@
.el-switch__core {
--el-switch-off-color: var(--spp-dark-green);
--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 {
@ -140,7 +155,7 @@
}
.timeline-table-i {
border-left: 4px solid var(--spp-other-green) !important;
border-left: 4px solid var(--border-color) !important;
}
.timeline-table-i::before {
@ -184,20 +199,48 @@
background-color: var(--nice-black) !important;
}
.el-pagination__jump {
color: var(--spp-light-grey) !important;
}
.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 {
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 {
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"] {
background-color: var(--spp-grey);
background-color: var(--border-color);
color: var(--spp-light-grey) !important;
}
.toggle-selection {
@ -259,10 +302,6 @@
color: var(--spp-light-grey) !important;
}
.unit {
color: var(--spp-white) !important;
}
.profile-item.level0 {
&:hover {
color: var(--spp-red) !important;
@ -414,7 +453,7 @@ a {
.timeline-table-i {
&::before {
background-color: #448dfe !important;
background-color: var(--spp-white) !important;
}
}
@ -423,6 +462,11 @@ a {
color: var(--spp-white);
}
.trace-header div {
background-color: var(--table-header-color) !important;
color: var(--spp-white);
}
.log-tips {
color: red;
}
@ -481,3 +525,31 @@ a {
.scroll-handler__wrapper .scroll-to.active {
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 {
color: #4caf50;
color: #629755;
}
.red {
color: #e54c17;
color: #e1483b;
}
.blue {
color: #448dfe;
color: #6897BB;
}
.purple {
color: #6e40aa;
color: #9876AA;
}
.yellow {
color: #fbb03b;
color: #FFC66D;
}
.grey {
@ -76,23 +76,23 @@
}
.bg-green {
background-color: #4caf50;
background-color: #629755;
}
.bg-red {
background-color: #e54c17;
background-color: #e1483b;
}
.bg-blue {
background-color: #448dfe;
background-color: #6897BB;
}
.bg-purple {
background-color: #6e40aa;
background-color: #9876AA;
}
.bg-yellow {
background-color: #fbb03b;
background-color: #FFC66D;
}
.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[] = [];
switch (keys.length) {
case 2:
color = ["#629755", "#9876AA"];
color = ["#6897BB", "#9876AA"];
break;
case 1:
color = ["#629755"];
color = ["#6897BB"];
break;
default:
color = [
"#629755",
"#6897BB",
"#9876AA",
"#CC7832",
"#8A653B",
"#e1483b",
"#629755",
"#FFC66D",
"#CC7832",
"#e1483b",
"#8A653B",
];
break;
}

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

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

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

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

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

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

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

@ -135,7 +135,6 @@ export default defineComponent({
height: 100%;
// height: calc(100% - 100px);
overflow: auto;
padding-bottom: 20px;
}
.trace-chart.full-view {
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("x", 35)
.attr("y", -6)
.attr("fill", "#333")
.attr("fill", "var(--spp-light-grey)")
.text((d: any) => {
if (d.data.label === "TRACE_ROOT") {
return "";
@ -187,7 +187,7 @@ export default class ListGraph {
.attr("class", "node-text")
.attr("x", 35)
.attr("y", 12)
.attr("fill", "#ccc")
.attr("fill", "var(--spp-white)")
.style("font-size", "11px")
.text(
(d: any) =>
@ -271,8 +271,8 @@ export default class ListGraph {
.enter()
.insert("path", "g")
.attr("class", "trace-link")
.attr("fill", "rgba(0,0,0,0)")
.attr("stroke", "rgba(0, 0, 0, 0.1)")
.attr("fill", "rgba(128,128,128,0)")
.attr("stroke", "rgba(128,128,128,0.1)")
.attr("stroke-width", 2)
.attr("transform", `translate(5, 0)`)
.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
)
.style("fill", (d: any) => (!d.data.isError ? "#3d444f" : "#E54C17"));
.style("fill", (d: any) => (!d.data.isError ? "var(--spp-light-grey)" : "#E54C17"));
nodeEnter
.append("text")
.attr("class", "node-text")
@ -318,7 +318,7 @@ export default class TraceMap {
const o = { x: source.x0, y: source.y0 };
return diagonal(o, o);
})
.attr("stroke", "rgba(0, 0, 0, 0.1)")
.attr("stroke", "var(--spp-white)")
.style("stroke-width", 1.5)
.style("fill", "none");