mirror of
https://github.com/apache/skywalking-booster-ui.git
synced 2025-10-14 11:21:29 +00:00
feat: Implement the Event widget (#112)
This commit is contained in:
Fine0830
102
src/views/dashboard/controls/Event.vue
Normal file
102
src/views/dashboard/controls/Event.vue
Normal file
@@ -0,0 +1,102 @@
|
||||
<!-- 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>
|
||||
<div class="event-wrapper flex-v">
|
||||
<el-popover
|
||||
placement="bottom"
|
||||
trigger="click"
|
||||
:width="100"
|
||||
v-if="dashboardStore.editMode"
|
||||
>
|
||||
<template #reference>
|
||||
<span class="delete cp">
|
||||
<Icon iconName="ellipsis_v" size="middle" class="operation" />
|
||||
</span>
|
||||
</template>
|
||||
<div class="tools" @click="removeWidget">
|
||||
<span>{{ t("delete") }}</span>
|
||||
</div>
|
||||
</el-popover>
|
||||
<div class="header">
|
||||
<Header :needQuery="needQuery" />
|
||||
</div>
|
||||
<div class="event">
|
||||
<Content />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { useI18n } from "vue-i18n";
|
||||
import { useDashboardStore } from "@/store/modules/dashboard";
|
||||
import Header from "../related/event/Header.vue";
|
||||
import Content from "../related/event/Content.vue";
|
||||
|
||||
/*global defineProps */
|
||||
const props = defineProps({
|
||||
data: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
},
|
||||
activeIndex: { type: String, default: "" },
|
||||
needQuery: { type: Boolean, default: true },
|
||||
});
|
||||
const { t } = useI18n();
|
||||
const dashboardStore = useDashboardStore();
|
||||
|
||||
function removeWidget() {
|
||||
dashboardStore.removeControls(props.data);
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.event-wrapper {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
font-size: 12px;
|
||||
position: relative;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.delete {
|
||||
position: absolute;
|
||||
top: 5px;
|
||||
right: 3px;
|
||||
z-index: 9999;
|
||||
}
|
||||
|
||||
.header {
|
||||
padding: 10px;
|
||||
font-size: 12px;
|
||||
border-bottom: 1px solid #dcdfe6;
|
||||
min-width: 1024px;
|
||||
}
|
||||
|
||||
.tools {
|
||||
padding: 5px 0;
|
||||
color: #999;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
text-align: center;
|
||||
|
||||
&:hover {
|
||||
color: #409eff;
|
||||
background-color: #eee;
|
||||
}
|
||||
}
|
||||
|
||||
.event {
|
||||
width: 100%;
|
||||
height: calc(100% - 80px);
|
||||
}
|
||||
</style>
|
||||
@@ -37,13 +37,6 @@ limitations under the License. -->
|
||||
v-if="dashboardStore.editMode && canEditTabName"
|
||||
/>
|
||||
</span>
|
||||
<span class="tab-icons" v-if="dashboardStore.editMode">
|
||||
<el-tooltip content="Add tab items" placement="bottom">
|
||||
<i @click="addTabItem">
|
||||
<Icon size="middle" iconName="add" class="tab-icon" />
|
||||
</i>
|
||||
</el-tooltip>
|
||||
</span>
|
||||
<span class="tab-icons">
|
||||
<el-tooltip content="Copy Link" placement="bottom">
|
||||
<i @click="copyLink">
|
||||
@@ -51,6 +44,13 @@ limitations under the License. -->
|
||||
</i>
|
||||
</el-tooltip>
|
||||
</span>
|
||||
<span class="tab-icons" v-if="dashboardStore.editMode">
|
||||
<el-tooltip content="Add tab items" placement="bottom">
|
||||
<i @click="addTabItem">
|
||||
<Icon size="middle" iconName="add_fill" class="tab-icon" />
|
||||
</i>
|
||||
</el-tooltip>
|
||||
</span>
|
||||
</div>
|
||||
<div class="operations" v-if="dashboardStore.editMode">
|
||||
<el-dropdown placement="bottom" trigger="click" :width="200">
|
||||
@@ -117,6 +117,7 @@ import Profile from "./Profile.vue";
|
||||
import Log from "./Log.vue";
|
||||
import Text from "./Text.vue";
|
||||
import Ebpf from "./Ebpf.vue";
|
||||
import Event from "./Event.vue";
|
||||
import { dragIgnoreFrom } from "../data";
|
||||
import DemandLog from "./DemandLog.vue";
|
||||
import copy from "@/utils/copy";
|
||||
@@ -130,7 +131,17 @@ const props = {
|
||||
};
|
||||
export default defineComponent({
|
||||
name: "Tab",
|
||||
components: { Topology, Widget, Trace, Profile, Log, Text, Ebpf, DemandLog },
|
||||
components: {
|
||||
Topology,
|
||||
Widget,
|
||||
Trace,
|
||||
Profile,
|
||||
Log,
|
||||
Text,
|
||||
Ebpf,
|
||||
DemandLog,
|
||||
Event,
|
||||
},
|
||||
props,
|
||||
setup(props) {
|
||||
const { t } = useI18n();
|
||||
@@ -199,6 +210,7 @@ export default defineComponent({
|
||||
editTabIndex.value = index;
|
||||
}
|
||||
function handleClick(el: any) {
|
||||
needQuery.value = true;
|
||||
if (["tab-name", "edit-tab"].includes(el.target.className)) {
|
||||
return;
|
||||
}
|
||||
|
||||
@@ -23,6 +23,7 @@ import Log from "./Log.vue";
|
||||
import Text from "./Text.vue";
|
||||
import Ebpf from "./Ebpf.vue";
|
||||
import DemandLog from "./DemandLog.vue";
|
||||
import Event from "./Event.vue";
|
||||
|
||||
export default {
|
||||
Tab,
|
||||
@@ -34,4 +35,5 @@ export default {
|
||||
Text,
|
||||
Ebpf,
|
||||
DemandLog,
|
||||
Event,
|
||||
};
|
||||
|
||||
@@ -15,7 +15,7 @@
|
||||
* limitations under the License.
|
||||
*/
|
||||
export const dragIgnoreFrom =
|
||||
"svg.d3-trace-tree, .dragger, .micro-topo-chart, .schedules";
|
||||
"svg.d3-trace-tree, .dragger, .micro-topo-chart, .schedules, .vis-item, .vis-timeline";
|
||||
|
||||
export const PodsChartTypes = ["EndpointList", "InstanceList"];
|
||||
|
||||
@@ -178,15 +178,16 @@ export const AllTools = [
|
||||
{ name: "assignment", content: "Add Log", id: "addLog" },
|
||||
];
|
||||
export const ServiceTools = [
|
||||
{ name: "playlist_add", content: "Widget", id: "addWidget" },
|
||||
{ name: "all_inbox", content: "Tab", id: "addTab" },
|
||||
{ name: "library_books", content: "Text", id: "addText" },
|
||||
{ name: "device_hub", content: "Topology", id: "addTopology" },
|
||||
{ name: "merge", content: "Trace", id: "addTrace" },
|
||||
{ name: "timeline", content: "Trace Profiling", id: "addProfile" },
|
||||
{ name: "insert_chart", content: "eBPF Profiling", id: "addEbpf" },
|
||||
{ name: "assignment", content: "Log", id: "addLog" },
|
||||
{ name: "playlist_add", content: "Add Widget", id: "addWidget" },
|
||||
{ name: "all_inbox", content: "Add Tab", id: "addTab" },
|
||||
{ name: "library_books", content: "Add Text", id: "addText" },
|
||||
{ name: "device_hub", content: "Add Topology", id: "addTopology" },
|
||||
{ name: "merge", content: "Add Trace", id: "addTrace" },
|
||||
{ name: "timeline", content: "Add Trace Profiling", id: "addProfile" },
|
||||
{ name: "insert_chart", content: "Add eBPF Profiling", id: "addEbpf" },
|
||||
{ name: "assignment", content: "Add Log", id: "addLog" },
|
||||
{ name: "demand", content: "Add On Demand Log", id: "addDemandLog" },
|
||||
{ name: "event", content: "Add Event", id: "addEvent" },
|
||||
];
|
||||
export const InstanceTools = [
|
||||
{ name: "playlist_add", content: "Add Widget", id: "addWidget" },
|
||||
@@ -195,6 +196,7 @@ export const InstanceTools = [
|
||||
{ name: "merge", content: "Add Trace", id: "addTrace" },
|
||||
{ name: "assignment", content: "Add Log", id: "addLog" },
|
||||
{ name: "demand", content: "Add On Demand Log", id: "addDemandLog" },
|
||||
{ name: "event", content: "Add Event", id: "addEvent" },
|
||||
];
|
||||
export const EndpointTools = [
|
||||
{ name: "playlist_add", content: "Add Widget", id: "addWidget" },
|
||||
@@ -203,6 +205,7 @@ export const EndpointTools = [
|
||||
{ name: "device_hub", content: "Add Topology", id: "addTopology" },
|
||||
{ name: "merge", content: "Add Trace", id: "addTrace" },
|
||||
{ name: "assignment", content: "Add Log", id: "addLog" },
|
||||
{ name: "event", content: "Add Event", id: "addEvent" },
|
||||
];
|
||||
export const ServiceRelationTools = [
|
||||
{ name: "playlist_add", content: "Add Widget", id: "addWidget" },
|
||||
|
||||
@@ -458,6 +458,9 @@ function setTabControls(id: string) {
|
||||
case "addDemandLog":
|
||||
dashboardStore.addTabControls("DemandLog");
|
||||
break;
|
||||
case "addEvent":
|
||||
dashboardStore.addTabControls("Event");
|
||||
break;
|
||||
default:
|
||||
ElMessage.info("Don't support this control");
|
||||
break;
|
||||
@@ -493,6 +496,9 @@ function setControls(id: string) {
|
||||
case "addDemandLog":
|
||||
dashboardStore.addControl("DemandLog");
|
||||
break;
|
||||
case "addEvent":
|
||||
dashboardStore.addControl("Event");
|
||||
break;
|
||||
default:
|
||||
dashboardStore.addControl("Widget");
|
||||
}
|
||||
|
||||
129
src/views/dashboard/related/event/Content.vue
Normal file
129
src/views/dashboard/related/event/Content.vue
Normal file
@@ -0,0 +1,129 @@
|
||||
<!-- 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>
|
||||
<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 { useEventStore } from "@/store/modules/event";
|
||||
import { DataSet, Timeline } from "vis-timeline/standalone";
|
||||
import "vis-timeline/styles/vis-timeline-graph2d.css";
|
||||
|
||||
const eventStore = useEventStore();
|
||||
/*global Nullable */
|
||||
const timeline = ref<Nullable<HTMLDivElement>>(null);
|
||||
const visGraph = ref<Nullable<any>>(null);
|
||||
const oldVal = ref<{ width: number; height: number }>({ width: 0, height: 0 });
|
||||
const dateFormat = (date: number, pattern = "YYYY-MM-DD HH:mm:ss") =>
|
||||
new Date(dayjs(date).format(pattern));
|
||||
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, index) => {
|
||||
return {
|
||||
id: index + 1,
|
||||
content: d.name,
|
||||
start: dateFormat(d.startTime),
|
||||
end: dateFormat(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) {
|
||||
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;
|
||||
},
|
||||
},
|
||||
};
|
||||
visGraph.value = new Timeline(timeline.value, items, options);
|
||||
}
|
||||
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);
|
||||
}
|
||||
}
|
||||
watch(
|
||||
() => eventStore.events,
|
||||
() => {
|
||||
visTimeline();
|
||||
}
|
||||
);
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.events {
|
||||
width: calc(100% - 5px);
|
||||
margin: 0 5px 5px 0;
|
||||
height: 100%;
|
||||
min-height: 150px;
|
||||
}
|
||||
|
||||
.message {
|
||||
max-width: 400px;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
}
|
||||
</style>
|
||||
235
src/views/dashboard/related/event/Header.vue
Normal file
235
src/views/dashboard/related/event/Header.vue
Normal file
@@ -0,0 +1,235 @@
|
||||
<!-- 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>
|
||||
<div class="flex-h row">
|
||||
<div class="mr-5" v-if="dashboardStore.entity !== EntityType[3].value">
|
||||
<span class="grey mr-5"> {{ t("instance") }}: </span>
|
||||
<Selector
|
||||
size="small"
|
||||
:value="state.instance.value"
|
||||
:options="eventStore.instances"
|
||||
placeholder="Select a instance"
|
||||
@change="changeField('instance', $event)"
|
||||
/>
|
||||
</div>
|
||||
<div class="mr-5" v-if="dashboardStore.entity !== EntityType[2].value">
|
||||
<span class="grey mr-5"> {{ t("endpoint") }}: </span>
|
||||
<Selector
|
||||
size="small"
|
||||
:value="state.endpoint.value"
|
||||
:options="eventStore.endpoints"
|
||||
placeholder="Select a endpoint"
|
||||
@change="changeField('endpoint', $event)"
|
||||
:isRemote="true"
|
||||
@query="searchEndpoints"
|
||||
/>
|
||||
</div>
|
||||
<div class="mr-5">
|
||||
<span class="grey">{{ t("eventsType") }}: </span>
|
||||
<Selector
|
||||
v-model="state.eventType"
|
||||
:options="EventTypes"
|
||||
placeholder="Select a type"
|
||||
@change="changeField('eventType', $event)"
|
||||
class="event-tool-input"
|
||||
size="small"
|
||||
/>
|
||||
</div>
|
||||
<el-pagination
|
||||
v-model:currentPage="pageNum"
|
||||
v-model:page-size="pageSize"
|
||||
layout="prev, pager, next"
|
||||
:total="total"
|
||||
@current-change="updatePage"
|
||||
:pager-count="5"
|
||||
small
|
||||
/>
|
||||
<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";
|
||||
|
||||
/*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.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.id;
|
||||
}
|
||||
if (dashboardStore.entity === EntityType[3].value) {
|
||||
instance = selectorStore.currentPod.id;
|
||||
}
|
||||
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-max {
|
||||
width: 270px;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
</style>
|
||||
@@ -1,121 +0,0 @@
|
||||
<!-- 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>
|
||||
<div class="timeline-table clear">
|
||||
<div
|
||||
v-for="(i, index) in eventStore.events"
|
||||
:key="index"
|
||||
class="mb-10 clear timeline-item"
|
||||
@click="showEventDetails(i)"
|
||||
>
|
||||
<div class="g-sm-3 grey sm hide-xs time-line tr">
|
||||
{{ dateFormat(parseInt(i.startTime)) }}
|
||||
</div>
|
||||
<div class="timeline-table-i g-sm-9">
|
||||
<div class="message mb-5 b">
|
||||
{{ i.message }}
|
||||
</div>
|
||||
<div
|
||||
class="timeline-table-i-scope mr-10 l sm"
|
||||
:class="{
|
||||
blue: i.scope === 'Service',
|
||||
green: i.scope === 'Endpoint',
|
||||
yellow: i.scope === 'ServiceInstance',
|
||||
}"
|
||||
>
|
||||
{{ i.scope }}
|
||||
</div>
|
||||
<div class="grey sm show-xs">
|
||||
{{ dateFormat(parseInt(i.startTime)) }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="!eventStore.events.length" class="tips">{{ t("noData") }}</div>
|
||||
</div>
|
||||
<el-dialog
|
||||
:title="t('eventDetail')"
|
||||
v-model="showDetails"
|
||||
fullscreen
|
||||
:destroy-on-close="true"
|
||||
@closed="showDetails = false"
|
||||
>
|
||||
<div>
|
||||
<div
|
||||
class="mb-10"
|
||||
v-for="(eventKey, index) in EventsDetailKeys"
|
||||
:key="index"
|
||||
>
|
||||
<span class="keys">{{ t(eventKey.text) }}</span>
|
||||
<span v-if="eventKey.class === 'parameters'">
|
||||
<span v-for="(d, index) of currentEvent[eventKey.class]" :key="index"
|
||||
>{{ d.key }}={{ d.value }};
|
||||
</span>
|
||||
</span>
|
||||
<span
|
||||
v-else-if="
|
||||
eventKey.class === 'startTime' || eventKey.class === 'endTime'
|
||||
"
|
||||
>{{ dateFormat(currentEvent[eventKey.class]) }}</span
|
||||
>
|
||||
<span v-else-if="eventKey.class === 'source'" class="source">
|
||||
<span
|
||||
>{{ t("service") }}:
|
||||
{{ currentEvent[eventKey.class].service }}</span
|
||||
>
|
||||
<div v-show="currentEvent[eventKey.class].endpoint">
|
||||
{{ t("endpoint") }}:
|
||||
{{ currentEvent[eventKey.class].endpoint }}
|
||||
</div>
|
||||
<div v-show="currentEvent[eventKey.class].serviceInstance">
|
||||
{{ t("instance") }}:
|
||||
{{ currentEvent[eventKey.class].serviceInstance }}
|
||||
</div>
|
||||
</span>
|
||||
<span v-else>{{ currentEvent[eventKey.class] }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { ref } from "vue";
|
||||
import { useI18n } from "vue-i18n";
|
||||
import dayjs from "dayjs";
|
||||
import { useEventStore } from "@/store/modules/event";
|
||||
import { EventsDetailKeys } from "./data";
|
||||
import { Event } from "@/types/events";
|
||||
|
||||
const { t } = useI18n();
|
||||
const eventStore = useEventStore();
|
||||
const dateFormat = (date: number, pattern = "YYYY-MM-DD HH:mm:ss") =>
|
||||
dayjs(date).format(pattern);
|
||||
const showDetails = ref<boolean>(false);
|
||||
const currentEvent = ref<any>({});
|
||||
|
||||
function showEventDetails(item: Event) {
|
||||
showDetails.value = true;
|
||||
currentEvent.value = item;
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
@import "../components/style.scss";
|
||||
|
||||
.tips {
|
||||
width: 100%;
|
||||
margin: 20px 0;
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
}
|
||||
</style>
|
||||
@@ -1,251 +0,0 @@
|
||||
<!-- 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>
|
||||
<nav class="event-tool flex-v">
|
||||
<div class="flex-h">
|
||||
<div class="mr-5">
|
||||
<span class="grey">{{ t("layer") }}: </span>
|
||||
<Selector
|
||||
v-model="state.currentLayer"
|
||||
:options="state.layers"
|
||||
placeholder="Select a layer"
|
||||
@change="selectLayer"
|
||||
class="event-tool-input"
|
||||
size="small"
|
||||
/>
|
||||
</div>
|
||||
<div class="mr-5">
|
||||
<span class="grey">{{ t("service") }}: </span>
|
||||
<Selector
|
||||
v-model="state.service"
|
||||
:options="eventStore.services"
|
||||
placeholder="Select a service"
|
||||
@change="selectService"
|
||||
class="event-tool-input"
|
||||
size="small"
|
||||
/>
|
||||
</div>
|
||||
<div class="mr-5">
|
||||
<span class="grey mr-5">{{ t("instance") }}: </span>
|
||||
<Selector
|
||||
v-model="state.instance"
|
||||
:options="eventStore.instances"
|
||||
placeholder="Select a instance"
|
||||
@change="selectInstance"
|
||||
class="event-tool-input"
|
||||
size="small"
|
||||
/>
|
||||
</div>
|
||||
<div class="mr-5">
|
||||
<span class="grey mr-5">{{ t("endpoint") }}: </span>
|
||||
<Selector
|
||||
v-model="state.endpoint"
|
||||
:options="eventStore.endpoints"
|
||||
placeholder="Select a endpoint"
|
||||
@change="selectEndpoint"
|
||||
class="event-tool-input"
|
||||
size="small"
|
||||
/>
|
||||
</div>
|
||||
<div class="mr-5">
|
||||
<span class="grey">{{ t("eventsType") }}: </span>
|
||||
<Selector
|
||||
v-model="state.eventType"
|
||||
:options="EventTypes"
|
||||
placeholder="Select a type"
|
||||
@change="selectType"
|
||||
class="event-tool-input"
|
||||
size="small"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-5">
|
||||
<el-pagination
|
||||
v-model:currentPage="pageNum"
|
||||
v-model:page-size="pageSize"
|
||||
layout="prev, pager, next"
|
||||
:total="total"
|
||||
@current-change="updatePage"
|
||||
:pager-count="5"
|
||||
small
|
||||
:style="`--el-pagination-bg-color: #f0f2f5; --el-pagination-button-disabled-bg-color: #f0f2f5;`"
|
||||
/>
|
||||
<!-- <div>
|
||||
<el-button class="search" type="primary" @click="queryEvents">
|
||||
<Icon iconName="search" class="mr-5" />
|
||||
<span class="vm">{{ t("search") }}</span>
|
||||
</el-button>
|
||||
</div> -->
|
||||
</div>
|
||||
</nav>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { ref, reactive, computed } from "vue";
|
||||
import { useI18n } from "vue-i18n";
|
||||
import { EventTypes } from "./data";
|
||||
import { useEventStore } from "@/store/modules/event";
|
||||
import { useSelectorStore } from "@/store/modules/selectors";
|
||||
import { ElMessage } from "element-plus";
|
||||
|
||||
const { t } = useI18n();
|
||||
const eventStore = useEventStore();
|
||||
const selectorStore = useSelectorStore();
|
||||
const pageSize = 20;
|
||||
const pageNum = ref<number>(1);
|
||||
const state = reactive<{
|
||||
currentLayer: string;
|
||||
layers: string[];
|
||||
eventType: string;
|
||||
service: string;
|
||||
instance: string;
|
||||
endpoint: string;
|
||||
}>({
|
||||
currentLayer: "",
|
||||
layers: [],
|
||||
eventType: "",
|
||||
service: "",
|
||||
instance: "",
|
||||
endpoint: "",
|
||||
});
|
||||
const total = computed(() =>
|
||||
eventStore.events.length === pageSize
|
||||
? pageSize * pageNum.value + 1
|
||||
: pageSize * pageNum.value
|
||||
);
|
||||
|
||||
getSelectors();
|
||||
|
||||
async function getSelectors() {
|
||||
await getLayers();
|
||||
getServices();
|
||||
}
|
||||
|
||||
async function getServices() {
|
||||
const resp = await eventStore.getServices(state.currentLayer);
|
||||
if (resp.errors) {
|
||||
ElMessage.error(resp.errors);
|
||||
return;
|
||||
}
|
||||
state.service = eventStore.services[0].value;
|
||||
if (!eventStore.services[0].id) {
|
||||
queryEvents();
|
||||
return;
|
||||
}
|
||||
getEndpoints(eventStore.services[0].id);
|
||||
getInstances(eventStore.services[0].id);
|
||||
queryEvents();
|
||||
}
|
||||
|
||||
async function getEndpoints(id: string) {
|
||||
const resp = await eventStore.getEndpoints(id);
|
||||
if (resp.errors) {
|
||||
ElMessage.error(resp.errors);
|
||||
return;
|
||||
}
|
||||
state.endpoint = eventStore.endpoints[0].value;
|
||||
}
|
||||
async function getInstances(id: string) {
|
||||
const resp = await eventStore.getInstances(id);
|
||||
if (resp.errors) {
|
||||
ElMessage.error(resp.errors);
|
||||
return;
|
||||
}
|
||||
state.instance = eventStore.instances[0].value;
|
||||
}
|
||||
|
||||
async function getLayers() {
|
||||
const resp = await selectorStore.fetchLayers();
|
||||
if (resp.errors) {
|
||||
ElMessage.error(resp.errors);
|
||||
return;
|
||||
}
|
||||
state.currentLayer = "";
|
||||
state.layers = [
|
||||
{ label: "All", value: "" },
|
||||
...resp.data.layers.map((d: string) => {
|
||||
return { label: d, value: d };
|
||||
}),
|
||||
];
|
||||
}
|
||||
|
||||
async function queryEvents() {
|
||||
eventStore.setEventCondition({
|
||||
paging: {
|
||||
pageNum: pageNum.value,
|
||||
pageSize: pageSize,
|
||||
},
|
||||
source: {
|
||||
service: state.service || "",
|
||||
endpoint: state.endpoint || "",
|
||||
serviceInstance: state.instance || "",
|
||||
},
|
||||
type: state.eventType || undefined,
|
||||
});
|
||||
const resp = await eventStore.getEvents();
|
||||
if (resp.errors) {
|
||||
ElMessage.error(resp.errors);
|
||||
}
|
||||
}
|
||||
|
||||
async function selectLayer(opt: any) {
|
||||
state.currentLayer = opt[0].value;
|
||||
await getServices();
|
||||
}
|
||||
|
||||
function selectService(opt: any) {
|
||||
state.service = opt[0].value;
|
||||
queryEvents();
|
||||
if (!opt[0].id) {
|
||||
return;
|
||||
}
|
||||
getEndpoints(opt[0].id);
|
||||
getInstances(opt[0].id);
|
||||
}
|
||||
|
||||
function selectInstance(opt: any) {
|
||||
state.instance = opt[0].value;
|
||||
queryEvents();
|
||||
}
|
||||
|
||||
function selectEndpoint(opt: any) {
|
||||
state.endpoint = opt[0].value;
|
||||
queryEvents();
|
||||
}
|
||||
|
||||
function selectType(opt: any) {
|
||||
state.eventType = opt[0].value;
|
||||
queryEvents();
|
||||
}
|
||||
|
||||
function updatePage(p: number) {
|
||||
pageNum.value = p;
|
||||
queryEvents();
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.event-tool {
|
||||
background-color: #f0f2f5;
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.event-tool-input {
|
||||
width: 200px;
|
||||
}
|
||||
|
||||
.search {
|
||||
margin-left: 20px;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user