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

fix: update sidebar, topology, table, title, router (#42)

Browse Source
This commit is contained in:
Fine0830
2022-03-28 14:14:59 +08:00
committed by GitHub
parent 2167b4afd5
commit d78ca0cd4b
12 changed files with 170 additions and 179 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/views/dashboard/graphs/EndpointList.vue
View File

@@ -117,8 +117,8 @@ const selectorStore = useSelectorStore();
const dashboardStore = useDashboardStore();
const chartLoading = ref<boolean>(false);
const endpoints = ref<Endpoint[]>([]);
const pageSize = 5;
const total = 10;
const pageSize = 15;
const total = 15;
const searchText = ref<string>("");
queryEndpoints(total);

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

@@ -143,7 +143,7 @@ const dashboardStore = useDashboardStore();
const chartLoading = ref<boolean>(false);
const instances = ref<Instance[]>([]); // current instances
const searchInstances = ref<Instance[]>([]); // all instances
const pageSize = 5;
const pageSize = 15;
const searchText = ref<string>("");
queryInstance();

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

@@ -128,7 +128,7 @@ const props = defineProps({
const selectorStore = useSelectorStore();
const dashboardStore = useDashboardStore();
const chartLoading = ref<boolean>(false);
const pageSize = 5;
const pageSize = 15;
const services = ref<Service[]>([]);
const searchText = ref<string>("");
const groups = ref<any>({});

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

@@ -15,41 +15,28 @@ limitations under the License. -->
<template>
<div class="chart-table">
<div ref="chartTable">
<div
class="row header flex-h"
:style="`width: ${nameWidth + initWidth}px`"
>
<div class="name" :style="`width: ${nameWidth}px`">
{{ config.tableHeaderCol1 || t("name") }}
<i class="r cp" ref="draggerName">
<Icon iconName="settings_ethernet" size="middle" />
</i>
</div>
<div class="value-col" v-if="showTableValues">
{{ config.tableHeaderCol2 || t("value") }}
</div>
<div class="row header flex-h">
<div class="name" :style="`width: ${nameWidth}`">
{{ config.tableHeaderCol1 || t("name") }}
</div>
<div
class="row flex-h"
v-for="key in dataKeys"
:key="key"
:style="`width: ${nameWidth + initWidth}px`"
>
<div :style="`width: ${nameWidth}px`">{{ key }}</div>
<div class="value-col" v-if="showTableValues">
{{
config.metricTypes[0] === "readMetricsValue"
? data[key]
: data[key][data[key].length - 1 || 0]
}}
</div>
<div class="value-col" v-if="config.showTableValues">
{{ config.tableHeaderCol2 || t("value") }}
</div>
</div>
<div class="row flex-h" v-for="key in dataKeys" :key="key">
<div class="name" :style="`width: ${nameWidth}`">{{ key }}</div>
<div class="value-col" v-if="config.showTableValues">
{{
config.metricTypes[0] === "readMetricsValue"
? data[key]
: data[key][data[key].length - 1 || 0]
}}
</div>
</div>
</div>
</template>
<script lang="ts" setup>
import { computed, ref, onMounted } from "vue";
import { computed } from "vue";
import type { PropType } from "vue";
import { useI18n } from "vue-i18n";
/*global defineProps */
@@ -69,40 +56,10 @@ const props = defineProps({
},
});
/*global Nullable*/
const { t } = useI18n();
const chartTable = ref<Nullable<HTMLElement>>(null);
const initWidth = ref<number>(0);
const nameWidth = ref<number>(0);
const draggerName = ref<Nullable<HTMLElement>>(null);
const showTableValues = ref<boolean>(props.config.showTableValues || false);
onMounted(() => {
if (!chartTable.value) {
return;
}
const width = props.config.showTableValues
? chartTable.value.offsetWidth / 2
: chartTable.value.offsetWidth;
initWidth.value = props.config.showTableValues
? chartTable.value.offsetWidth / 2
: 0;
nameWidth.value = width - 5;
if (!draggerName.value) {
return;
}
draggerName.value.onmousedown = (event: MouseEvent) => {
const diffX = event.clientX;
const copy = nameWidth;
document.onmousemove = (documentEvent) => {
const moveX = documentEvent.clientX - diffX;
nameWidth.value = Number(copy) + Number(moveX);
};
document.onmouseup = () => {
document.onmousemove = null;
document.onmouseup = null;
};
};
});
const nameWidth = computed(() =>
props.config.showTableValues ? "80%" : "100%"
);
const dataKeys = computed(() => {
if (props.config.metricTypes[0] === "readMetricsValue") {
const keys = Object.keys(props.data || {});
@@ -127,6 +84,7 @@ const dataKeys = computed(() => {
.row {
border-left: 1px solid #ccc;
height: 20px;
width: 100%;
div {
overflow: hidden;

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

@@ -98,7 +98,6 @@ limitations under the License. -->
</div>
</div>
</template>
<script lang="ts" setup>
import { reactive, ref } from "vue";
import { useRoute } from "vue-router";

8
src/views/dashboard/related/topology/components/Graph.vue
View File

@@ -153,7 +153,7 @@ async function init() {
graph.value = svg.value
.append("g")
.attr("class", "topo-svg-graph")
.attr("transform", `translate(0, -100)`);
.attr("transform", `translate(-100, -100)`);
graph.value.call(tip.value);
simulation.value = simulationInit(
d3,
@@ -221,7 +221,7 @@ function dragended(d: any) {
function handleNodeClick(d: Node & { x: number; y: number }) {
topologyStore.setNode(d);
topologyStore.setLink(null);
operationsPos.x = d.x;
operationsPos.x = d.x - 100;
operationsPos.y = d.y - 70;
if (d.layer === String(dashboardStore.layerId)) {
return;
@@ -255,7 +255,7 @@ function handleLinkClick(event: any, d: Call) {
entity: `${e}Relation`,
});
dashboardStore.setEntity(p.entity);
const path = `/dashboard/${p.layer}/${e}Relation/${d.source.id}/${d.target.id}/${p.name}`;
const path = `/dashboard/related/${p.layer}/${e}Relation/${d.source.id}/${d.target.id}/${p.name}`;
const routeUrl = router.resolve({ path });
window.open(routeUrl.href, "_blank");
dashboardStore.setEntity(origin);
@@ -532,7 +532,7 @@ watch(
() => appStore.durationTime,
() => {
if (dashboardStore.entity === EntityType[1].value) {
init();
freshNodes();
}
}
);