mirror of
https://github.com/apache/skywalking-booster-ui.git
synced 2025-07-03 15:05:25 +00:00
remove event page
This commit is contained in:
Qiuxia Fan
parent
bb744fc0f4
commit
0f0ac4d6e9
@ -1,43 +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.
|
||||
*/
|
||||
import { RouteRecordRaw } from "vue-router";
|
||||
import Layout from "@/layout/Index.vue";
|
||||
|
||||
export const routesEvent: Array<RouteRecordRaw> = [
|
||||
{
|
||||
path: "",
|
||||
name: "Events",
|
||||
meta: {
|
||||
title: "events",
|
||||
icon: "av_timer",
|
||||
hasGroup: false,
|
||||
exact: true,
|
||||
},
|
||||
component: Layout,
|
||||
children: [
|
||||
{
|
||||
path: "/events",
|
||||
name: "Events",
|
||||
meta: {
|
||||
exact: false,
|
||||
},
|
||||
component: () =>
|
||||
import(/* webpackChunkName: "events" */ "@/views/Event.vue"),
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
@ -20,7 +20,6 @@ import { routesMesh } from "./serviceMesh";
|
||||
import { routesDatabase } from "./database";
|
||||
import { routesInfra } from "./infrastructure";
|
||||
import { routesDashboard } from "./dashboard";
|
||||
import { routesEvent } from "./event";
|
||||
import { routesSetting } from "./setting";
|
||||
import { routesAlarm } from "./alarm";
|
||||
import { routesSelf } from "./selfObservability";
|
||||
@ -39,7 +38,6 @@ const routes: Array<RouteRecordRaw> = [
|
||||
...routesSelf,
|
||||
...routesDashboard,
|
||||
...routesAlarm,
|
||||
...routesEvent,
|
||||
...routesSetting,
|
||||
];
|
||||
|
||||
|
||||
@ -26,7 +26,6 @@ import { useSelectorStore } from "@/store/modules/selectors";
|
||||
interface eventState {
|
||||
loading: boolean;
|
||||
events: Event[];
|
||||
services: Service[];
|
||||
instances: Instance[];
|
||||
endpoints: Endpoint[];
|
||||
condition: Nullable<QueryEventCondition>;
|
||||
@ -37,7 +36,6 @@ export const eventStore = defineStore({
|
||||
state: (): eventState => ({
|
||||
loading: false,
|
||||
events: [],
|
||||
services: [{ value: "", label: "All" }],
|
||||
instances: [{ value: "", label: "All" }],
|
||||
endpoints: [{ value: "", label: "All" }],
|
||||
condition: null,
|
||||
@ -46,20 +44,6 @@ export const eventStore = defineStore({
|
||||
setEventCondition(data: QueryEventCondition) {
|
||||
this.condition = data;
|
||||
},
|
||||
async getServices(layer: string) {
|
||||
if (!layer) {
|
||||
this.services = [{ value: "", label: "All" }];
|
||||
return new Promise((resolve) => resolve([]));
|
||||
}
|
||||
const res: AxiosResponse = await graphql.query("queryServices").params({
|
||||
layer,
|
||||
});
|
||||
if (res.data.errors) {
|
||||
return res.data;
|
||||
}
|
||||
this.services = res.data.data.services;
|
||||
return res.data;
|
||||
},
|
||||
async getInstances() {
|
||||
const serviceId = useSelectorStore().currentService
|
||||
? useSelectorStore().currentService.id
|
||||
|
||||
@ -160,7 +160,7 @@ div.vis-tooltip {
|
||||
overflow: hidden;
|
||||
background-color: #fff !important;
|
||||
|
||||
div {
|
||||
.message {
|
||||
word-wrap: break-word !important;
|
||||
}
|
||||
}
|
||||
|
||||
@ -53,8 +53,8 @@ function visTimeline() {
|
||||
width: "100%",
|
||||
locale: "en",
|
||||
tooltip: {
|
||||
template(originalItemData) {
|
||||
const data = originalItemData.data || {};
|
||||
template(item) {
|
||||
const data = item.data || {};
|
||||
return `<div><span>Event ID: </span>${data.uuid || ""}</div>
|
||||
<div><span>Event Name: </span>${data.name || ""}</div>
|
||||
<div class="mb-5"><span>Event Type: </span>${data.type || ""}</div>
|
||||
@ -64,18 +64,11 @@ function visTimeline() {
|
||||
<div class="mb-5"><span>End Time: </span>${
|
||||
data.endTime ? visDate(data.endTime) : ""
|
||||
}</div>
|
||||
<div style="minHeight: 30px;word-wrap:break-word; max-width:400px">Event Message: ${
|
||||
data.message
|
||||
}</div>
|
||||
<div>Service:
|
||||
${data.source.service || ""}</div>
|
||||
<div>
|
||||
Endpoint:
|
||||
${data.source.endpoint || ""}
|
||||
<div class="message">Event Message: ${data.message || ""}</div>
|
||||
<div>Service: ${data.source.service || ""}</div>
|
||||
<div>Endpoint: ${data.source.endpoint || ""}
|
||||
</div>
|
||||
<div>
|
||||
Service Instance:
|
||||
${data.source.instance || ""}
|
||||
<div>Service Instance: ${data.source.instance || ""}
|
||||
</div></div>`;
|
||||
},
|
||||
},
|
||||
|
||||
@ -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,250 +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
|
||||
/>
|
||||
<!-- <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>
|
||||
@ -1,30 +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.
|
||||
*/
|
||||
export const EventsDetailKeys = [
|
||||
{ text: "eventID", class: "uuid" },
|
||||
{ text: "eventName", class: "name" },
|
||||
{ text: "eventsType", class: "type" },
|
||||
{ text: "startTime", class: "startTime" },
|
||||
{ text: "endTime", class: "endTime" },
|
||||
{ text: "eventsMessage", class: "message" },
|
||||
{ text: "eventSource", class: "source" },
|
||||
];
|
||||
export const EventTypes = [
|
||||
{ label: "All", value: "" },
|
||||
{ label: "Normal", value: "Normal" },
|
||||
{ label: "Error", value: "Error" },
|
||||
];
|
||||
Loading…
Reference in New Issue
Block a user