mirror of
https://github.com/apache/skywalking-booster-ui.git
synced 2025-10-16 05:09:17 +00:00
build: migrate the build tool from vue-cli to vite4 (#208)
This commit is contained in:
Fine0830
@@ -16,272 +16,257 @@ limitations under the License. -->
|
||||
<div ref="timeline" class="events"></div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { ref, watch, onMounted } from "vue";
|
||||
import dayjs from "dayjs";
|
||||
import { useThrottleFn } from "@vueuse/core";
|
||||
import { Event } from "@/types/events";
|
||||
import { LayoutConfig } from "@/types/dashboard";
|
||||
import { useEventStore } from "@/store/modules/event";
|
||||
import { DataSet, Timeline } from "vis-timeline/standalone";
|
||||
import "vis-timeline/styles/vis-timeline-graph2d.css";
|
||||
import { useDashboardStore } from "@/store/modules/dashboard";
|
||||
import getDashboard from "@/hooks/useDashboardsSession";
|
||||
import { useAppStoreWithOut } from "@/store/modules/app";
|
||||
import dateFormatStep, { dateFormatTime } from "@/utils/dateFormat";
|
||||
import getLocalTime from "@/utils/localtime";
|
||||
import { ref, watch, onMounted } from "vue";
|
||||
import dayjs from "dayjs";
|
||||
import { useThrottleFn } from "@vueuse/core";
|
||||
import type { Event } from "@/types/events";
|
||||
import type { LayoutConfig } from "@/types/dashboard";
|
||||
import { useEventStore } from "@/store/modules/event";
|
||||
import { DataSet, Timeline } from "vis-timeline/standalone";
|
||||
import "vis-timeline/styles/vis-timeline-graph2d.css";
|
||||
import { useDashboardStore } from "@/store/modules/dashboard";
|
||||
import getDashboard from "@/hooks/useDashboardsSession";
|
||||
import { useAppStoreWithOut } from "@/store/modules/app";
|
||||
import dateFormatStep, { dateFormatTime } from "@/utils/dateFormat";
|
||||
import getLocalTime from "@/utils/localtime";
|
||||
|
||||
const eventStore = useEventStore();
|
||||
/*global defineProps, Nullable */
|
||||
const props = defineProps({
|
||||
data: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
},
|
||||
});
|
||||
const timeline = ref<Nullable<HTMLDivElement>>(null);
|
||||
const visGraph = ref<Nullable<any>>(null);
|
||||
const oldVal = ref<{ width: number; height: number }>({ width: 0, height: 0 });
|
||||
const dashboardStore = useDashboardStore();
|
||||
const appStore = useAppStoreWithOut();
|
||||
const visDate = (date: number, pattern = "YYYY-MM-DD HH:mm:ss") =>
|
||||
dayjs(date).format(pattern);
|
||||
|
||||
onMounted(() => {
|
||||
oldVal.value = (timeline.value && timeline.value.getBoundingClientRect()) || {
|
||||
width: 0,
|
||||
height: 0,
|
||||
};
|
||||
useThrottleFn(resize, 500)();
|
||||
});
|
||||
|
||||
function visTimeline() {
|
||||
if (!timeline.value) {
|
||||
return;
|
||||
}
|
||||
if (visGraph.value) {
|
||||
visGraph.value.destroy();
|
||||
}
|
||||
const h = timeline.value.getBoundingClientRect().height;
|
||||
const events = eventStore.events.map((d: Event, index: number) => {
|
||||
return {
|
||||
id: index + 1,
|
||||
content: d.name,
|
||||
start: new Date(Number(d.startTime)),
|
||||
end: new Date(Number(d.endTime)),
|
||||
data: d,
|
||||
className: d.type,
|
||||
};
|
||||
const eventStore = useEventStore();
|
||||
/*global defineProps, Nullable */
|
||||
const props = defineProps({
|
||||
data: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
},
|
||||
});
|
||||
const items: any = new DataSet(events);
|
||||
const options: any = {
|
||||
height: h,
|
||||
width: "100%",
|
||||
locale: "en",
|
||||
groupHeightMode: "fitItems",
|
||||
autoResize: false,
|
||||
tooltip: {
|
||||
overflowMethod: "cap",
|
||||
template(item: Event | any) {
|
||||
const data = item.data || {};
|
||||
let tmp = `<div>ID: ${data.uuid || ""}</div>
|
||||
const timeline = ref<Nullable<HTMLDivElement>>(null);
|
||||
const visGraph = ref<Nullable<any>>(null);
|
||||
const oldVal = ref<{ width: number; height: number }>({ width: 0, height: 0 });
|
||||
const dashboardStore = useDashboardStore();
|
||||
const appStore = useAppStoreWithOut();
|
||||
const visDate = (date: number, pattern = "YYYY-MM-DD HH:mm:ss") => dayjs(date).format(pattern);
|
||||
|
||||
onMounted(() => {
|
||||
oldVal.value = (timeline.value && timeline.value.getBoundingClientRect()) || {
|
||||
width: 0,
|
||||
height: 0,
|
||||
};
|
||||
useThrottleFn(resize, 500)();
|
||||
});
|
||||
|
||||
function visTimeline() {
|
||||
if (!timeline.value) {
|
||||
return;
|
||||
}
|
||||
if (visGraph.value) {
|
||||
visGraph.value.destroy();
|
||||
}
|
||||
const h = timeline.value.getBoundingClientRect().height;
|
||||
const events = eventStore.events.map((d: Event, index: number) => {
|
||||
return {
|
||||
id: index + 1,
|
||||
content: d.name,
|
||||
start: new Date(Number(d.startTime)),
|
||||
end: new Date(Number(d.endTime)),
|
||||
data: d,
|
||||
className: d.type,
|
||||
};
|
||||
});
|
||||
const items: any = new DataSet(events);
|
||||
const options: any = {
|
||||
height: h,
|
||||
width: "100%",
|
||||
locale: "en",
|
||||
groupHeightMode: "fitItems",
|
||||
autoResize: false,
|
||||
tooltip: {
|
||||
overflowMethod: "cap",
|
||||
template(item: Event | any) {
|
||||
const data = item.data || {};
|
||||
let tmp = `<div>ID: ${data.uuid || ""}</div>
|
||||
<div>Name: ${data.name || ""}</div>
|
||||
<div>Event Type: ${data.type || ""}</div>
|
||||
<div>Start Time: ${data.startTime ? visDate(data.startTime) : ""}</div>
|
||||
<div>End Time: ${data.endTime ? visDate(data.endTime) : ""}</div>
|
||||
<div>Message: ${data.message || ""}</div>
|
||||
<div>Service: ${data.source.service || ""}</div>`;
|
||||
if (data.source.endpoint) {
|
||||
tmp += `<div>Endpoint: ${data.source.endpoint}</div>`;
|
||||
}
|
||||
if (data.source.instance) {
|
||||
tmp += `<div>Service Instance: ${data.source.instance}</div>`;
|
||||
}
|
||||
return tmp;
|
||||
if (data.source.endpoint) {
|
||||
tmp += `<div>Endpoint: ${data.source.endpoint}</div>`;
|
||||
}
|
||||
if (data.source.instance) {
|
||||
tmp += `<div>Service Instance: ${data.source.instance}</div>`;
|
||||
}
|
||||
return tmp;
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
visGraph.value = new Timeline(timeline.value, items, options);
|
||||
visGraph.value.on("select", (properties: { items: number[] }) => {
|
||||
if (!props.data.eventAssociate) {
|
||||
return;
|
||||
}
|
||||
dashboardStore.selectWidget(props.data);
|
||||
const dashboard = getDashboard(dashboardStore.currentDashboard).widgets;
|
||||
associateMetrics(properties.items, events, dashboard);
|
||||
associateTraceLog(properties.items, events, dashboard);
|
||||
});
|
||||
}
|
||||
function associateTraceLog(
|
||||
items: number[],
|
||||
events: {
|
||||
id: number;
|
||||
content: string;
|
||||
start: Date;
|
||||
end: Date;
|
||||
data: unknown;
|
||||
className: string;
|
||||
}[],
|
||||
dashboard: LayoutConfig[]
|
||||
) {
|
||||
const widgets = dashboard.filter((d: { type: string }) =>
|
||||
["Trace", "Log"].includes(d.type)
|
||||
);
|
||||
const index = items[0];
|
||||
const i = events[index - 1 || 0];
|
||||
for (const widget of widgets) {
|
||||
if (isNaN(index)) {
|
||||
const item = {
|
||||
...widget,
|
||||
filters: {
|
||||
sourceId: props.data.id || "",
|
||||
duration: null,
|
||||
},
|
||||
};
|
||||
dashboardStore.setWidget(item);
|
||||
} else {
|
||||
let step = appStore.duration.step;
|
||||
let start = i.start;
|
||||
let end = i.end;
|
||||
if (
|
||||
appStore.duration.step === "MINUTE" &&
|
||||
i.end.getTime() - i.start.getTime() < 60000
|
||||
) {
|
||||
step = "SECOND";
|
||||
} else {
|
||||
const times = setEndTime(i.start, i.end);
|
||||
start = times.start;
|
||||
end = times.end;
|
||||
};
|
||||
visGraph.value = new Timeline(timeline.value, items, options);
|
||||
visGraph.value.on("select", (properties: { items: number[] }) => {
|
||||
if (!props.data.eventAssociate) {
|
||||
return;
|
||||
}
|
||||
const item = {
|
||||
...widget,
|
||||
filters: {
|
||||
sourceId: props.data.id || "",
|
||||
duration: {
|
||||
start: dateFormatStep(
|
||||
getLocalTime(appStore.utc, start),
|
||||
dashboardStore.selectWidget(props.data);
|
||||
const dashboard = getDashboard(dashboardStore.currentDashboard).widgets;
|
||||
associateMetrics(properties.items, events, dashboard);
|
||||
associateTraceLog(properties.items, events, dashboard);
|
||||
});
|
||||
}
|
||||
function associateTraceLog(
|
||||
items: number[],
|
||||
events: {
|
||||
id: number;
|
||||
content: string;
|
||||
start: Date;
|
||||
end: Date;
|
||||
data: unknown;
|
||||
className: string;
|
||||
}[],
|
||||
dashboard: LayoutConfig[],
|
||||
) {
|
||||
const widgets = dashboard.filter((d: { type: string }) => ["Trace", "Log"].includes(d.type));
|
||||
const index = items[0];
|
||||
const i = events[index - 1 || 0];
|
||||
for (const widget of widgets) {
|
||||
if (isNaN(index)) {
|
||||
const item = {
|
||||
...widget,
|
||||
filters: {
|
||||
sourceId: props.data.id || "",
|
||||
duration: null,
|
||||
},
|
||||
};
|
||||
dashboardStore.setWidget(item);
|
||||
} else {
|
||||
let step = appStore.duration.step;
|
||||
let start = i.start;
|
||||
let end = i.end;
|
||||
if (appStore.duration.step === "MINUTE" && i.end.getTime() - i.start.getTime() < 60000) {
|
||||
step = "SECOND";
|
||||
} else {
|
||||
const times = setEndTime(i.start, i.end);
|
||||
start = times.start;
|
||||
end = times.end;
|
||||
}
|
||||
const item = {
|
||||
...widget,
|
||||
filters: {
|
||||
sourceId: props.data.id || "",
|
||||
duration: {
|
||||
start: dateFormatStep(getLocalTime(appStore.utc, start), step, true),
|
||||
end: dateFormatStep(getLocalTime(appStore.utc, end), step, true),
|
||||
step,
|
||||
true
|
||||
),
|
||||
end: dateFormatStep(getLocalTime(appStore.utc, end), step, true),
|
||||
step,
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
dashboardStore.setWidget(item);
|
||||
};
|
||||
dashboardStore.setWidget(item);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
function associateMetrics(
|
||||
items: number[],
|
||||
events: {
|
||||
id: number;
|
||||
content: string;
|
||||
start: Date;
|
||||
end: Date;
|
||||
data: unknown;
|
||||
className: string;
|
||||
}[],
|
||||
dashboard: LayoutConfig[]
|
||||
) {
|
||||
const widgets = dashboard.filter((d: LayoutConfig) => {
|
||||
const isLinear = ["Bar", "Line", "Area"].includes(
|
||||
(d.graph && d.graph.type) || ""
|
||||
);
|
||||
if (isLinear) {
|
||||
return d;
|
||||
}
|
||||
});
|
||||
const index = items[0];
|
||||
const i = events[index - 1 || 0];
|
||||
function associateMetrics(
|
||||
items: number[],
|
||||
events: {
|
||||
id: number;
|
||||
content: string;
|
||||
start: Date;
|
||||
end: Date;
|
||||
data: unknown;
|
||||
className: string;
|
||||
}[],
|
||||
dashboard: LayoutConfig[],
|
||||
) {
|
||||
const widgets = dashboard.filter((d: LayoutConfig) => {
|
||||
const isLinear = ["Bar", "Line", "Area"].includes((d.graph && d.graph.type) || "");
|
||||
if (isLinear) {
|
||||
return d;
|
||||
}
|
||||
});
|
||||
const index = items[0];
|
||||
const i = events[index - 1 || 0];
|
||||
|
||||
for (const widget of widgets) {
|
||||
if (isNaN(index)) {
|
||||
const item = {
|
||||
...widget,
|
||||
filters: {
|
||||
sourceId: dashboardStore.selectedGrid.id || "",
|
||||
isRange: true,
|
||||
duration: {
|
||||
startTime: null,
|
||||
endTime: null,
|
||||
for (const widget of widgets) {
|
||||
if (isNaN(index)) {
|
||||
const item = {
|
||||
...widget,
|
||||
filters: {
|
||||
sourceId: dashboardStore.selectedGrid.id || "",
|
||||
isRange: true,
|
||||
duration: {
|
||||
startTime: null,
|
||||
endTime: null,
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
dashboardStore.setWidget(item);
|
||||
} else {
|
||||
const { start, end } = setEndTime(i.start, i.end);
|
||||
const startTime = dateFormatTime(start, appStore.duration.step);
|
||||
const endTime = dateFormatTime(end, appStore.duration.step);
|
||||
const item = {
|
||||
...widget,
|
||||
filters: {
|
||||
sourceId: dashboardStore.selectedGrid.id || "",
|
||||
isRange: true,
|
||||
duration: {
|
||||
startTime,
|
||||
endTime,
|
||||
};
|
||||
dashboardStore.setWidget(item);
|
||||
} else {
|
||||
const { start, end } = setEndTime(i.start, i.end);
|
||||
const startTime = dateFormatTime(start, appStore.duration.step);
|
||||
const endTime = dateFormatTime(end, appStore.duration.step);
|
||||
const item = {
|
||||
...widget,
|
||||
filters: {
|
||||
sourceId: dashboardStore.selectedGrid.id || "",
|
||||
isRange: true,
|
||||
duration: {
|
||||
startTime,
|
||||
endTime,
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
dashboardStore.setWidget(item);
|
||||
};
|
||||
dashboardStore.setWidget(item);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
function setEndTime(start: Date, end: Date) {
|
||||
let time: Date | number = end;
|
||||
let diff = 60000;
|
||||
switch (appStore.duration.step) {
|
||||
case "MINUTE":
|
||||
diff = 60000;
|
||||
break;
|
||||
case "HOUR":
|
||||
diff = 3600000;
|
||||
break;
|
||||
case "DAY":
|
||||
diff = 3600000 * 24;
|
||||
break;
|
||||
function setEndTime(start: Date, end: Date) {
|
||||
let time: Date | number = end;
|
||||
let diff = 60000;
|
||||
switch (appStore.duration.step) {
|
||||
case "MINUTE":
|
||||
diff = 60000;
|
||||
break;
|
||||
case "HOUR":
|
||||
diff = 3600000;
|
||||
break;
|
||||
case "DAY":
|
||||
diff = 3600000 * 24;
|
||||
break;
|
||||
}
|
||||
if (!end || end.getTime() - start.getTime() < diff) {
|
||||
time = start.getTime() + diff;
|
||||
}
|
||||
return { start, end: new Date(time) };
|
||||
}
|
||||
if (!end || end.getTime() - start.getTime() < diff) {
|
||||
time = start.getTime() + diff;
|
||||
}
|
||||
return { start, end: new Date(time) };
|
||||
}
|
||||
|
||||
function resize() {
|
||||
const observer = new ResizeObserver((entries) => {
|
||||
const entry = entries[0];
|
||||
const cr = entry.contentRect;
|
||||
if (
|
||||
Math.abs(cr.width - oldVal.value.width) < 3 &&
|
||||
Math.abs(cr.height - oldVal.value.height) < 3
|
||||
) {
|
||||
return;
|
||||
function resize() {
|
||||
const observer = new ResizeObserver((entries) => {
|
||||
const entry = entries[0];
|
||||
const cr = entry.contentRect;
|
||||
if (Math.abs(cr.width - oldVal.value.width) < 3 && Math.abs(cr.height - oldVal.value.height) < 3) {
|
||||
return;
|
||||
}
|
||||
visTimeline();
|
||||
oldVal.value = { width: cr.width, height: cr.height };
|
||||
});
|
||||
if (timeline.value) {
|
||||
observer.observe(timeline.value);
|
||||
}
|
||||
visTimeline();
|
||||
oldVal.value = { width: cr.width, height: cr.height };
|
||||
});
|
||||
if (timeline.value) {
|
||||
observer.observe(timeline.value);
|
||||
}
|
||||
}
|
||||
watch(
|
||||
() => eventStore.events,
|
||||
() => {
|
||||
visTimeline();
|
||||
}
|
||||
);
|
||||
watch(
|
||||
() => eventStore.events,
|
||||
() => {
|
||||
visTimeline();
|
||||
},
|
||||
);
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.events {
|
||||
width: calc(100% - 5px);
|
||||
margin: 0 5px 5px 0;
|
||||
height: 100%;
|
||||
min-height: 150px;
|
||||
}
|
||||
.events {
|
||||
width: calc(100% - 5px);
|
||||
margin: 0 5px 5px 0;
|
||||
height: 100%;
|
||||
min-height: 150px;
|
||||
}
|
||||
|
||||
.message {
|
||||
max-width: 400px;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
}
|
||||
.message {
|
||||
max-width: 400px;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -56,186 +56,179 @@ limitations under the License. -->
|
||||
:pager-count="5"
|
||||
small
|
||||
/>
|
||||
<el-button
|
||||
class="search-btn"
|
||||
size="small"
|
||||
type="primary"
|
||||
@click="queryEvents"
|
||||
>
|
||||
<el-button class="search-btn" size="small" type="primary" @click="queryEvents">
|
||||
{{ t("search") }}
|
||||
</el-button>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { ref, computed, reactive, watch } from "vue";
|
||||
import { useI18n } from "vue-i18n";
|
||||
import { useEventStore } from "@/store/modules/event";
|
||||
import { useDashboardStore } from "@/store/modules/dashboard";
|
||||
import { useAppStoreWithOut } from "@/store/modules/app";
|
||||
import { useSelectorStore } from "@/store/modules/selectors";
|
||||
import { ElMessage } from "element-plus";
|
||||
import { EntityType } from "../../data";
|
||||
import { EventTypes } from "./data";
|
||||
import { ref, computed, reactive, watch } from "vue";
|
||||
import { useI18n } from "vue-i18n";
|
||||
import { useEventStore } from "@/store/modules/event";
|
||||
import { useDashboardStore } from "@/store/modules/dashboard";
|
||||
import { useAppStoreWithOut } from "@/store/modules/app";
|
||||
import { useSelectorStore } from "@/store/modules/selectors";
|
||||
import { ElMessage } from "element-plus";
|
||||
import { EntityType } from "../../data";
|
||||
import { EventTypes } from "./data";
|
||||
|
||||
/*global defineProps */
|
||||
const props = defineProps({
|
||||
needQuery: { type: Boolean, default: true },
|
||||
});
|
||||
const { t } = useI18n();
|
||||
const appStore = useAppStoreWithOut();
|
||||
const selectorStore = useSelectorStore();
|
||||
const dashboardStore = useDashboardStore();
|
||||
const eventStore = useEventStore();
|
||||
const pageSize = 20;
|
||||
const pageNum = ref<number>(1);
|
||||
const state = reactive<any>({
|
||||
instance: { value: "", label: "All", id: "" },
|
||||
endpoint: { value: "", label: "All", id: "" },
|
||||
eventType: { value: "", label: "All" },
|
||||
});
|
||||
const total = computed(() =>
|
||||
eventStore.events.length === pageSize
|
||||
? pageSize * pageNum.value + 1
|
||||
: pageSize * pageNum.value
|
||||
);
|
||||
if (props.needQuery) {
|
||||
init();
|
||||
}
|
||||
async function init() {
|
||||
fetchSelectors();
|
||||
await queryEvents();
|
||||
state.instance = { value: "", label: "All" };
|
||||
state.endpoint = { value: "", label: "All" };
|
||||
}
|
||||
|
||||
function fetchSelectors() {
|
||||
if (dashboardStore.entity === EntityType[2].value) {
|
||||
getInstances();
|
||||
return;
|
||||
}
|
||||
if (dashboardStore.entity === EntityType[3].value) {
|
||||
getEndpoints();
|
||||
return;
|
||||
}
|
||||
if (dashboardStore.entity === EntityType[0].value) {
|
||||
getInstances();
|
||||
getEndpoints();
|
||||
}
|
||||
}
|
||||
|
||||
async function getEndpoints(id?: string) {
|
||||
const resp = await eventStore.getEndpoints(id);
|
||||
if (!resp) {
|
||||
return;
|
||||
}
|
||||
if (resp.errors) {
|
||||
ElMessage.error(resp.errors);
|
||||
return;
|
||||
}
|
||||
state.endpoint = eventStore.endpoints[0];
|
||||
}
|
||||
async function getInstances(id?: string) {
|
||||
const resp = await eventStore.getInstances(id);
|
||||
if (resp.errors) {
|
||||
ElMessage.error(resp.errors);
|
||||
return;
|
||||
}
|
||||
state.instance = eventStore.instances[0];
|
||||
}
|
||||
async function queryEvents() {
|
||||
let endpoint = state.endpoint.value,
|
||||
instance = state.instance.value;
|
||||
if (dashboardStore.entity === EntityType[2].value) {
|
||||
endpoint = selectorStore.currentPod && selectorStore.currentPod.id;
|
||||
}
|
||||
if (dashboardStore.entity === EntityType[3].value) {
|
||||
instance = selectorStore.currentPod && selectorStore.currentPod.id;
|
||||
}
|
||||
if (!selectorStore.currentService) {
|
||||
return;
|
||||
}
|
||||
eventStore.setEventCondition({
|
||||
// layer: dashboardStore.layerId,
|
||||
paging: {
|
||||
pageNum: pageNum.value,
|
||||
pageSize: pageSize,
|
||||
},
|
||||
source: {
|
||||
service: selectorStore.currentService.value || "",
|
||||
endpoint: endpoint || "",
|
||||
serviceInstance: instance || "",
|
||||
},
|
||||
type: state.eventType.value || undefined,
|
||||
/*global defineProps */
|
||||
const props = defineProps({
|
||||
needQuery: { type: Boolean, default: true },
|
||||
});
|
||||
const res = await eventStore.getEvents();
|
||||
if (res && res.errors) {
|
||||
ElMessage.error(res.errors);
|
||||
}
|
||||
}
|
||||
function changeField(type: string, opt: any[]) {
|
||||
state[type] = opt[0];
|
||||
}
|
||||
async function searchEndpoints(keyword: string) {
|
||||
const resp = await eventStore.getEndpoints(keyword);
|
||||
if (resp.errors) {
|
||||
ElMessage.error(resp.errors);
|
||||
}
|
||||
}
|
||||
|
||||
function updatePage(p: number) {
|
||||
pageNum.value = p;
|
||||
queryEvents();
|
||||
}
|
||||
|
||||
watch(
|
||||
() => [selectorStore.currentService],
|
||||
() => {
|
||||
if (dashboardStore.entity === EntityType[0].value) {
|
||||
init();
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
watch(
|
||||
() => [selectorStore.currentPod],
|
||||
() => {
|
||||
if (dashboardStore.entity === EntityType[0].value) {
|
||||
return;
|
||||
}
|
||||
const { t } = useI18n();
|
||||
const appStore = useAppStoreWithOut();
|
||||
const selectorStore = useSelectorStore();
|
||||
const dashboardStore = useDashboardStore();
|
||||
const eventStore = useEventStore();
|
||||
const pageSize = 20;
|
||||
const pageNum = ref<number>(1);
|
||||
const state = reactive<any>({
|
||||
instance: { value: "", label: "All", id: "" },
|
||||
endpoint: { value: "", label: "All", id: "" },
|
||||
eventType: { value: "", label: "All" },
|
||||
});
|
||||
const total = computed(() =>
|
||||
eventStore.events.length === pageSize ? pageSize * pageNum.value + 1 : pageSize * pageNum.value,
|
||||
);
|
||||
if (props.needQuery) {
|
||||
init();
|
||||
}
|
||||
);
|
||||
watch(
|
||||
() => appStore.durationTime,
|
||||
() => {
|
||||
if (dashboardStore.entity === EntityType[1].value) {
|
||||
init();
|
||||
async function init() {
|
||||
fetchSelectors();
|
||||
await queryEvents();
|
||||
state.instance = { value: "", label: "All" };
|
||||
state.endpoint = { value: "", label: "All" };
|
||||
}
|
||||
|
||||
function fetchSelectors() {
|
||||
if (dashboardStore.entity === EntityType[2].value) {
|
||||
getInstances();
|
||||
return;
|
||||
}
|
||||
if (dashboardStore.entity === EntityType[3].value) {
|
||||
getEndpoints();
|
||||
return;
|
||||
}
|
||||
if (dashboardStore.entity === EntityType[0].value) {
|
||||
getInstances();
|
||||
getEndpoints();
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
async function getEndpoints(id?: string) {
|
||||
const resp = await eventStore.getEndpoints(id);
|
||||
if (!resp) {
|
||||
return;
|
||||
}
|
||||
if (resp.errors) {
|
||||
ElMessage.error(resp.errors);
|
||||
return;
|
||||
}
|
||||
state.endpoint = eventStore.endpoints[0];
|
||||
}
|
||||
async function getInstances(id?: string) {
|
||||
const resp = await eventStore.getInstances(id);
|
||||
if (resp.errors) {
|
||||
ElMessage.error(resp.errors);
|
||||
return;
|
||||
}
|
||||
state.instance = eventStore.instances[0];
|
||||
}
|
||||
async function queryEvents() {
|
||||
let endpoint = state.endpoint.value,
|
||||
instance = state.instance.value;
|
||||
if (dashboardStore.entity === EntityType[2].value) {
|
||||
endpoint = selectorStore.currentPod && selectorStore.currentPod.id;
|
||||
}
|
||||
if (dashboardStore.entity === EntityType[3].value) {
|
||||
instance = selectorStore.currentPod && selectorStore.currentPod.id;
|
||||
}
|
||||
if (!selectorStore.currentService) {
|
||||
return;
|
||||
}
|
||||
eventStore.setEventCondition({
|
||||
// layer: dashboardStore.layerId,
|
||||
paging: {
|
||||
pageNum: pageNum.value,
|
||||
pageSize: pageSize,
|
||||
},
|
||||
source: {
|
||||
service: selectorStore.currentService.value || "",
|
||||
endpoint: endpoint || "",
|
||||
serviceInstance: instance || "",
|
||||
},
|
||||
type: state.eventType.value || undefined,
|
||||
});
|
||||
const res = await eventStore.getEvents();
|
||||
if (res && res.errors) {
|
||||
ElMessage.error(res.errors);
|
||||
}
|
||||
}
|
||||
function changeField(type: string, opt: any[]) {
|
||||
state[type] = opt[0];
|
||||
}
|
||||
async function searchEndpoints(keyword: string) {
|
||||
const resp = await eventStore.getEndpoints(keyword);
|
||||
if (resp.errors) {
|
||||
ElMessage.error(resp.errors);
|
||||
}
|
||||
}
|
||||
|
||||
function updatePage(p: number) {
|
||||
pageNum.value = p;
|
||||
queryEvents();
|
||||
}
|
||||
|
||||
watch(
|
||||
() => [selectorStore.currentService],
|
||||
() => {
|
||||
if (dashboardStore.entity === EntityType[0].value) {
|
||||
init();
|
||||
}
|
||||
},
|
||||
);
|
||||
|
||||
watch(
|
||||
() => [selectorStore.currentPod],
|
||||
() => {
|
||||
if (dashboardStore.entity === EntityType[0].value) {
|
||||
return;
|
||||
}
|
||||
init();
|
||||
},
|
||||
);
|
||||
watch(
|
||||
() => appStore.durationTime,
|
||||
() => {
|
||||
if (dashboardStore.entity === EntityType[1].value) {
|
||||
init();
|
||||
}
|
||||
},
|
||||
);
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.inputs {
|
||||
width: 120px;
|
||||
}
|
||||
.inputs {
|
||||
width: 120px;
|
||||
}
|
||||
|
||||
.inputs-max {
|
||||
width: 270px;
|
||||
}
|
||||
.inputs-max {
|
||||
width: 270px;
|
||||
}
|
||||
|
||||
.search-btn {
|
||||
cursor: pointer;
|
||||
width: 120px;
|
||||
}
|
||||
.search-btn {
|
||||
cursor: pointer;
|
||||
width: 120px;
|
||||
}
|
||||
|
||||
.selected {
|
||||
display: inline-block;
|
||||
padding: 0 3px;
|
||||
border-radius: 3px;
|
||||
overflow: hidden;
|
||||
color: #3d444f;
|
||||
border: 1px dashed #aaa;
|
||||
font-size: 12px;
|
||||
margin: 0 2px;
|
||||
}
|
||||
.selected {
|
||||
display: inline-block;
|
||||
padding: 0 3px;
|
||||
border-radius: 3px;
|
||||
overflow: hidden;
|
||||
color: #3d444f;
|
||||
border: 1px dashed #aaa;
|
||||
font-size: 12px;
|
||||
margin: 0 2px;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user