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

update timeline

Browse Source
This commit is contained in:
Fine 2022-08-08 16:29:59 +08:00
parent e68acb458d
commit 15d9612b36
2 changed files with 17 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/views/dashboard/related/network-profiling/Content.vue
View File

@ -16,13 +16,16 @@ limitations under the License. -->
<div class="flex-h content">
<Tasks />
<div class="vis-graph ml-5">
<div class="schedules">EBPFS chedules</div>
<div class="schedules">
<Schedules />
</div>
<div class="item">EBPF Stack</div>
</div>
</div>
</template>
<script lang="ts" setup>
import Tasks from "./components/Tasks.vue";
import Schedules from "./components/Schedules.vue";
</script>
<style lang="scss" scoped>
.content {
@ -45,7 +48,7 @@ import Tasks from "./components/Tasks.vue";
}
.schedules {
height: 90px;
min-height: 90px;
border-bottom: 1px solid #ccc;
padding-right: 10px;
}

20
src/views/dashboard/related/network-profiling/components/Schedules.vue
View File

@ -13,10 +13,10 @@ 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. -->
<template>
<div ref="timeline" class="time-ranges"></div>
<el-button type="primary" size="small">
{{ t("start") }}
</el-button>
<div ref="timeRange" class="time-ranges"></div>
</template>
<script lang="ts" setup>
import { ref, onMounted, watch } from "vue";
@ -29,12 +29,13 @@ import { useThrottleFn } from "@vueuse/core";
/*global Nullable */
const { t } = useI18n();
const ebpfStore = useEbpfStore();
const timeline = ref<Nullable<HTMLDivElement>>(null);
const timeRange = ref<Nullable<HTMLDivElement>>(null);
const visGraph = ref<Nullable<any>>(null);
const oldVal = ref<{ width: number; height: number }>({ width: 0, height: 0 });
onMounted(() => {
oldVal.value = (timeline.value && timeline.value.getBoundingClientRect()) || {
oldVal.value = (timeRange.value &&
timeRange.value.getBoundingClientRect()) || {
width: 0,
height: 0,
};
@ -42,13 +43,16 @@ onMounted(() => {
});
function visTimeline() {
if (!timeline.value) {
if (!timeRange.value) {
return;
}
if (visGraph.value) {
visGraph.value.destroy();
}
const h = timeline.value.getBoundingClientRect().height;
if (!ebpfStore.selectedNetworkTask.taskId) {
return;
}
const h = timeRange.value.getBoundingClientRect().height;
const task = [
{
id: 1,
@ -72,7 +76,7 @@ function visTimeline() {
groupHeightMode: "fitItems",
autoResize: false,
};
visGraph.value = new Timeline(timeline.value, items, options);
visGraph.value = new Timeline(timeRange.value, items, options);
}
function resize() {
const observer = new ResizeObserver((entries) => {
@ -87,8 +91,8 @@ function resize() {
visTimeline();
oldVal.value = { width: cr.width, height: cr.height };
});
if (timeline.value) {
observer.observe(timeline.value);
if (timeRange.value) {
observer.observe(timeRange.value);
}
}
watch(