mirror of
https://github.com/apache/skywalking-booster-ui.git
synced 2025-07-18 18:45:23 +00:00
split components
This commit is contained in:
Fine
parent
575ef3359a
commit
82797cf8fb
@ -27,27 +27,7 @@ limitations under the License. -->
|
|||||||
</template>
|
</template>
|
||||||
<Settings @update="updateSettings" />
|
<Settings @update="updateSettings" />
|
||||||
</el-popover>
|
</el-popover>
|
||||||
<el-popover
|
<TimeLine />
|
||||||
placement="bottom"
|
|
||||||
:width="600"
|
|
||||||
trigger="click"
|
|
||||||
@after-enter="showTimeLine"
|
|
||||||
>
|
|
||||||
<template #reference>
|
|
||||||
<div class="range switch-icon-edit">
|
|
||||||
<Icon size="middle" iconName="time_range" />
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<div ref="timeRange" class="time-ranges"></div>
|
|
||||||
<el-button
|
|
||||||
class="query"
|
|
||||||
size="small"
|
|
||||||
type="primary"
|
|
||||||
@click="updateTopology"
|
|
||||||
>
|
|
||||||
{{ t("query") }}
|
|
||||||
</el-button>
|
|
||||||
</el-popover>
|
|
||||||
</template>
|
</template>
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import type { PropType } from "vue";
|
import type { PropType } from "vue";
|
||||||
@ -70,11 +50,7 @@ import Settings from "./Settings.vue";
|
|||||||
import { EntityType } from "@/views/dashboard/data";
|
import { EntityType } from "@/views/dashboard/data";
|
||||||
import getDashboard from "@/hooks/useDashboardsSession";
|
import getDashboard from "@/hooks/useDashboardsSession";
|
||||||
import { Layout } from "./Graph/layout";
|
import { Layout } from "./Graph/layout";
|
||||||
import { DataSet, Timeline } from "vis-timeline/standalone";
|
import TimeLine from "./TimeLine.vue";
|
||||||
import "vis-timeline/styles/vis-timeline-graph2d.css";
|
|
||||||
import dateFormatStep from "@/utils/dateFormat";
|
|
||||||
import getLocalTime from "@/utils/localtime";
|
|
||||||
import { useAppStoreWithOut } from "@/store/modules/app";
|
|
||||||
|
|
||||||
/*global Nullable, defineProps */
|
/*global Nullable, defineProps */
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
@ -86,7 +62,6 @@ const props = defineProps({
|
|||||||
const { t } = useI18n();
|
const { t } = useI18n();
|
||||||
const dashboardStore = useDashboardStore();
|
const dashboardStore = useDashboardStore();
|
||||||
const selectorStore = useSelectorStore();
|
const selectorStore = useSelectorStore();
|
||||||
const appStore = useAppStoreWithOut();
|
|
||||||
const networkProfilingStore = useNetworkProfilingStore();
|
const networkProfilingStore = useNetworkProfilingStore();
|
||||||
const height = ref<number>(100);
|
const height = ref<number>(100);
|
||||||
const width = ref<number>(100);
|
const width = ref<number>(100);
|
||||||
@ -102,9 +77,6 @@ const oldVal = ref<{ width: number; height: number }>({ width: 0, height: 0 });
|
|||||||
const config = ref<any>({});
|
const config = ref<any>({});
|
||||||
const diff = ref<number[]>([220, 200]);
|
const diff = ref<number[]>([220, 200]);
|
||||||
const radius = 210;
|
const radius = 210;
|
||||||
const timeRange = ref<Nullable<HTMLDivElement>>(null);
|
|
||||||
const visGraph = ref<Nullable<any>>(null);
|
|
||||||
const task = ref<any[]>([]);
|
|
||||||
|
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
init();
|
init();
|
||||||
@ -429,85 +401,7 @@ async function freshNodes() {
|
|||||||
drawGraph();
|
drawGraph();
|
||||||
createLayout();
|
createLayout();
|
||||||
}
|
}
|
||||||
function showTimeLine() {
|
|
||||||
visTimeline();
|
|
||||||
}
|
|
||||||
function visTimeline() {
|
|
||||||
if (!timeRange.value) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
if (visGraph.value) {
|
|
||||||
visGraph.value.destroy();
|
|
||||||
}
|
|
||||||
if (!networkProfilingStore.selectedNetworkTask.taskId) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
const { taskStartTime, fixedTriggerDuration, targetType } =
|
|
||||||
networkProfilingStore.selectedNetworkTask;
|
|
||||||
const startTime =
|
|
||||||
fixedTriggerDuration > 1800
|
|
||||||
? taskStartTime + fixedTriggerDuration * 1000 - 30 * 60 * 1000
|
|
||||||
: taskStartTime;
|
|
||||||
task.value = [
|
|
||||||
{
|
|
||||||
id: 1,
|
|
||||||
content: "",
|
|
||||||
start: getLocalTime(appStore.utc, new Date(startTime)),
|
|
||||||
end: getLocalTime(
|
|
||||||
appStore.utc,
|
|
||||||
new Date(taskStartTime + fixedTriggerDuration * 1000)
|
|
||||||
),
|
|
||||||
data: networkProfilingStore.selectedNetworkTask,
|
|
||||||
className: targetType,
|
|
||||||
},
|
|
||||||
];
|
|
||||||
const items: any = new DataSet(task.value);
|
|
||||||
items.on("update", (event: string, properties: any) => {
|
|
||||||
task.value = properties.data;
|
|
||||||
});
|
|
||||||
const itemsAlwaysDraggable =
|
|
||||||
fixedTriggerDuration > 1800
|
|
||||||
? {
|
|
||||||
item: true,
|
|
||||||
range: true,
|
|
||||||
}
|
|
||||||
: undefined;
|
|
||||||
const editable =
|
|
||||||
fixedTriggerDuration > 1800
|
|
||||||
? {
|
|
||||||
updateTime: true,
|
|
||||||
}
|
|
||||||
: false;
|
|
||||||
const options = {
|
|
||||||
height: 150,
|
|
||||||
width: "100%",
|
|
||||||
locale: "en",
|
|
||||||
editable,
|
|
||||||
zoomMin: 1000 * 60,
|
|
||||||
zoomMax: 1000 * 60 * 60 * 24,
|
|
||||||
};
|
|
||||||
const opt = itemsAlwaysDraggable
|
|
||||||
? { ...options, itemsAlwaysDraggable }
|
|
||||||
: options;
|
|
||||||
visGraph.value = new Timeline(timeRange.value, items, opt);
|
|
||||||
}
|
|
||||||
async function updateTopology() {
|
|
||||||
const serviceInstanceId =
|
|
||||||
(selectorStore.currentPod && selectorStore.currentPod.id) || "";
|
|
||||||
|
|
||||||
const resp = await networkProfilingStore.getProcessTopology({
|
|
||||||
serviceInstanceId,
|
|
||||||
duration: {
|
|
||||||
start: dateFormatStep(task.value[0].start, appStore.duration.step, true),
|
|
||||||
end: dateFormatStep(task.value[0].end, appStore.duration.step, true),
|
|
||||||
step: appStore.duration.step,
|
|
||||||
},
|
|
||||||
});
|
|
||||||
if (resp.errors) {
|
|
||||||
ElMessage.error(resp.errors);
|
|
||||||
}
|
|
||||||
return resp;
|
|
||||||
}
|
|
||||||
watch(
|
watch(
|
||||||
() => networkProfilingStore.nodes,
|
() => networkProfilingStore.nodes,
|
||||||
() => {
|
() => {
|
||||||
|
|||||||
@ -0,0 +1,150 @@
|
|||||||
|
<!-- Licensed to the Apache Software Foundation (ASF) under one or more
|
||||||
|
contributor license agreements. See the NOTICE file distributed with
|
||||||
|
this work for additional information regarding copyright ownership.
|
||||||
|
The ASF licenses this file to You under the Apache License, Version 2.0
|
||||||
|
(the "License"); you may not use this file except in compliance with
|
||||||
|
the License. You may obtain a copy of the License at
|
||||||
|
|
||||||
|
http://www.apache.org/licenses/LICENSE-2.0
|
||||||
|
|
||||||
|
Unless required by applicable law or agreed to in writing, software
|
||||||
|
distributed under the License is distributed on an "AS IS" BASIS,
|
||||||
|
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>
|
||||||
|
<el-popover
|
||||||
|
placement="bottom"
|
||||||
|
:width="600"
|
||||||
|
trigger="click"
|
||||||
|
@after-enter="showTimeLine"
|
||||||
|
>
|
||||||
|
<template #reference>
|
||||||
|
<div class="switch-icon-edit">
|
||||||
|
<Icon size="middle" iconName="time_range" />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<div ref="timeRange" class="time-ranges"></div>
|
||||||
|
<el-button
|
||||||
|
class="query"
|
||||||
|
size="small"
|
||||||
|
type="primary"
|
||||||
|
@click="updateTopology"
|
||||||
|
>
|
||||||
|
{{ t("query") }}
|
||||||
|
</el-button>
|
||||||
|
</el-popover>
|
||||||
|
</template>
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import { ref } from "vue";
|
||||||
|
import { useI18n } from "vue-i18n";
|
||||||
|
import { ElMessage } from "element-plus";
|
||||||
|
import { useNetworkProfilingStore } from "@/store/modules/network-profiling";
|
||||||
|
import { useSelectorStore } from "@/store/modules/selectors";
|
||||||
|
import { DataSet, Timeline } from "vis-timeline/standalone";
|
||||||
|
import "vis-timeline/styles/vis-timeline-graph2d.css";
|
||||||
|
import dateFormatStep from "@/utils/dateFormat";
|
||||||
|
import getLocalTime from "@/utils/localtime";
|
||||||
|
import { useAppStoreWithOut } from "@/store/modules/app";
|
||||||
|
/*global Nullable */
|
||||||
|
const { t } = useI18n();
|
||||||
|
const selectorStore = useSelectorStore();
|
||||||
|
const appStore = useAppStoreWithOut();
|
||||||
|
const networkProfilingStore = useNetworkProfilingStore();
|
||||||
|
const timeRange = ref<Nullable<HTMLDivElement>>(null);
|
||||||
|
const visGraph = ref<Nullable<any>>(null);
|
||||||
|
const task = ref<any[]>([]);
|
||||||
|
function showTimeLine() {
|
||||||
|
visTimeline();
|
||||||
|
}
|
||||||
|
function visTimeline() {
|
||||||
|
if (!timeRange.value) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if (visGraph.value) {
|
||||||
|
visGraph.value.destroy();
|
||||||
|
}
|
||||||
|
if (!networkProfilingStore.selectedNetworkTask.taskId) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
const { taskStartTime, fixedTriggerDuration, targetType } =
|
||||||
|
networkProfilingStore.selectedNetworkTask;
|
||||||
|
const startTime =
|
||||||
|
fixedTriggerDuration > 1800
|
||||||
|
? taskStartTime + fixedTriggerDuration * 1000 - 30 * 60 * 1000
|
||||||
|
: taskStartTime;
|
||||||
|
task.value = [
|
||||||
|
{
|
||||||
|
id: 1,
|
||||||
|
content: "",
|
||||||
|
start: getLocalTime(appStore.utc, new Date(startTime)),
|
||||||
|
end: getLocalTime(
|
||||||
|
appStore.utc,
|
||||||
|
new Date(taskStartTime + fixedTriggerDuration * 1000)
|
||||||
|
),
|
||||||
|
data: networkProfilingStore.selectedNetworkTask,
|
||||||
|
className: targetType,
|
||||||
|
},
|
||||||
|
];
|
||||||
|
const items: any = new DataSet(task.value);
|
||||||
|
items.on("update", (event: string, properties: any) => {
|
||||||
|
task.value = properties.data;
|
||||||
|
});
|
||||||
|
const itemsAlwaysDraggable =
|
||||||
|
fixedTriggerDuration > 500
|
||||||
|
? {
|
||||||
|
item: true,
|
||||||
|
range: true,
|
||||||
|
}
|
||||||
|
: undefined;
|
||||||
|
const editable =
|
||||||
|
fixedTriggerDuration > 500
|
||||||
|
? {
|
||||||
|
updateTime: true,
|
||||||
|
}
|
||||||
|
: false;
|
||||||
|
const options = {
|
||||||
|
height: 150,
|
||||||
|
width: "100%",
|
||||||
|
locale: "en",
|
||||||
|
editable,
|
||||||
|
zoomMin: 1000 * 60,
|
||||||
|
zoomMax: 1000 * 60 * 60 * 24,
|
||||||
|
};
|
||||||
|
const opt = itemsAlwaysDraggable
|
||||||
|
? { ...options, itemsAlwaysDraggable }
|
||||||
|
: options;
|
||||||
|
visGraph.value = new Timeline(timeRange.value, items, opt);
|
||||||
|
}
|
||||||
|
async function updateTopology() {
|
||||||
|
const serviceInstanceId =
|
||||||
|
(selectorStore.currentPod && selectorStore.currentPod.id) || "";
|
||||||
|
|
||||||
|
const resp = await networkProfilingStore.getProcessTopology({
|
||||||
|
serviceInstanceId,
|
||||||
|
duration: {
|
||||||
|
start: dateFormatStep(task.value[0].start, appStore.duration.step, true),
|
||||||
|
end: dateFormatStep(task.value[0].end, appStore.duration.step, true),
|
||||||
|
step: appStore.duration.step,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
if (resp.errors) {
|
||||||
|
ElMessage.error(resp.errors);
|
||||||
|
}
|
||||||
|
return resp;
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.switch-icon-edit {
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.5ms linear;
|
||||||
|
border: 1px solid #ccc;
|
||||||
|
color: #666;
|
||||||
|
display: inline-block;
|
||||||
|
padding: 5px;
|
||||||
|
border-radius: 3px;
|
||||||
|
position: absolute;
|
||||||
|
top: 10px;
|
||||||
|
right: 50px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Loading…
Reference in New Issue
Block a user