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"> <div class="flex-h content">
<Tasks /> <Tasks />
<div class="vis-graph ml-5"> <div class="vis-graph ml-5">
<div class="schedules">EBPFS chedules</div> <div class="schedules">
<Schedules />
</div>
<div class="item">EBPF Stack</div> <div class="item">EBPF Stack</div>
</div> </div>
</div> </div>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import Tasks from "./components/Tasks.vue"; import Tasks from "./components/Tasks.vue";
import Schedules from "./components/Schedules.vue";
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.content { .content {
@ -45,7 +48,7 @@ import Tasks from "./components/Tasks.vue";
} }
.schedules { .schedules {
height: 90px; min-height: 90px;
border-bottom: 1px solid #ccc; border-bottom: 1px solid #ccc;
padding-right: 10px; 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 See the License for the specific language governing permissions and
limitations under the License. --> limitations under the License. -->
<template> <template>
<div ref="timeline" class="time-ranges"></div>
<el-button type="primary" size="small"> <el-button type="primary" size="small">
{{ t("start") }} {{ t("start") }}
</el-button> </el-button>
<div ref="timeRange" class="time-ranges"></div>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { ref, onMounted, watch } from "vue"; import { ref, onMounted, watch } from "vue";
@ -29,12 +29,13 @@ import { useThrottleFn } from "@vueuse/core";
/*global Nullable */ /*global Nullable */
const { t } = useI18n(); const { t } = useI18n();
const ebpfStore = useEbpfStore(); const ebpfStore = useEbpfStore();
const timeline = ref<Nullable<HTMLDivElement>>(null); const timeRange = ref<Nullable<HTMLDivElement>>(null);
const visGraph = ref<Nullable<any>>(null); const visGraph = ref<Nullable<any>>(null);
const oldVal = ref<{ width: number; height: number }>({ width: 0, height: 0 }); const oldVal = ref<{ width: number; height: number }>({ width: 0, height: 0 });
onMounted(() => { onMounted(() => {
oldVal.value = (timeline.value && timeline.value.getBoundingClientRect()) || { oldVal.value = (timeRange.value &&
timeRange.value.getBoundingClientRect()) || {
width: 0, width: 0,
height: 0, height: 0,
}; };
@ -42,13 +43,16 @@ onMounted(() => {
}); });
function visTimeline() { function visTimeline() {
if (!timeline.value) { if (!timeRange.value) {
return; return;
} }
if (visGraph.value) { if (visGraph.value) {
visGraph.value.destroy(); visGraph.value.destroy();
} }
const h = timeline.value.getBoundingClientRect().height; if (!ebpfStore.selectedNetworkTask.taskId) {
return;
}
const h = timeRange.value.getBoundingClientRect().height;
const task = [ const task = [
{ {
id: 1, id: 1,
@ -72,7 +76,7 @@ function visTimeline() {
groupHeightMode: "fitItems", groupHeightMode: "fitItems",
autoResize: false, autoResize: false,
}; };
visGraph.value = new Timeline(timeline.value, items, options); visGraph.value = new Timeline(timeRange.value, items, options);
} }
function resize() { function resize() {
const observer = new ResizeObserver((entries) => { const observer = new ResizeObserver((entries) => {
@ -87,8 +91,8 @@ function resize() {
visTimeline(); visTimeline();
oldVal.value = { width: cr.width, height: cr.height }; oldVal.value = { width: cr.width, height: cr.height };
}); });
if (timeline.value) { if (timeRange.value) {
observer.observe(timeline.value); observer.observe(timeRange.value);
} }
} }
watch( watch(