mirror of
https://github.com/apache/skywalking-booster-ui.git
synced 2025-10-14 11:21:29 +00:00
feat: Implement visualizing alarm (#23)
This commit is contained in:
Fine0830
35
src/views/Alarm.vue
Normal file
35
src/views/Alarm.vue
Normal file
@@ -0,0 +1,35 @@
|
||||
<!-- 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="alarm flex-v">
|
||||
<Header />
|
||||
<Content />
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { useAppStoreWithOut } from "@/store/modules/app";
|
||||
import Header from "./alarm/Header.vue";
|
||||
import Content from "./alarm/Content.vue";
|
||||
|
||||
const appStore = useAppStoreWithOut();
|
||||
appStore.setPageTitle("Alarm");
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.alarm {
|
||||
flex-grow: 1;
|
||||
height: 100%;
|
||||
font-size: 12px;
|
||||
}
|
||||
</style>
|
||||
190
src/views/alarm/Content.vue
Normal file
190
src/views/alarm/Content.vue
Normal file
@@ -0,0 +1,190 @@
|
||||
<!-- 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 alarmStore.alarms"
|
||||
:key="index"
|
||||
class="clear timeline-item"
|
||||
>
|
||||
<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" @click="showDetails(i)">
|
||||
<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',
|
||||
}"
|
||||
>
|
||||
{{ t(i.scope.toLowerCase()) }}
|
||||
</div>
|
||||
<div class="grey sm show-xs">
|
||||
{{ dateFormat(parseInt(i.startTime)) }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="!alarmStore.alarms.length" class="tips">{{ t("noData") }}</div>
|
||||
</div>
|
||||
<el-dialog
|
||||
v-model="isShowDetails"
|
||||
:title="t('alarmDetail')"
|
||||
fullscreen
|
||||
:destroy-on-close="true"
|
||||
@closed="isShowDetails = false"
|
||||
>
|
||||
<div
|
||||
class="mb-10 clear alarm-detail"
|
||||
v-for="(item, index) in AlarmDetailCol"
|
||||
:key="index"
|
||||
>
|
||||
<span class="g-sm-2 grey">{{ t(item.value) }}:</span>
|
||||
<span v-if="item.label === 'startTime'">
|
||||
{{ dateFormat(currentDetail[item.label]) }}
|
||||
</span>
|
||||
<span v-else-if="item.label === 'tags'">
|
||||
<div v-for="(d, index) in alarmTags" :key="index">{{ d }}</div>
|
||||
</span>
|
||||
<span v-else-if="item.label === 'events'" class="event-detail">
|
||||
<div>
|
||||
<ul>
|
||||
<li>
|
||||
<span
|
||||
v-for="(i, index) of EventsDetailHeaders"
|
||||
:class="i.class"
|
||||
:key="i.class + index"
|
||||
>
|
||||
{{ t(i.text) }}
|
||||
</span>
|
||||
</li>
|
||||
<li
|
||||
v-for="event in currentEvents"
|
||||
:key="event.uuid"
|
||||
@click="viewEventDetail(event)"
|
||||
>
|
||||
<span
|
||||
v-for="(d, index) of EventsDetailHeaders"
|
||||
:class="d.class"
|
||||
:key="event.uuid + index"
|
||||
>
|
||||
<span v-if="d.class === 'startTime' || d.class === 'endTime'">
|
||||
{{ dateFormat(event[d.class]) }}
|
||||
</span>
|
||||
<span v-else>
|
||||
{{ event[d.class] }}
|
||||
</span>
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</span>
|
||||
<span v-else>{{ currentDetail[item.label] }}</span>
|
||||
</div>
|
||||
</el-dialog>
|
||||
<el-dialog
|
||||
v-model="showEventDetails"
|
||||
:title="t('eventDetail')"
|
||||
fullscreen
|
||||
:destroy-on-close="true"
|
||||
@closed="showEventDetails = false"
|
||||
>
|
||||
<div class="event-detail">
|
||||
<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 dayjs from "dayjs";
|
||||
import { useI18n } from "vue-i18n";
|
||||
import { Alarm, Event } from "@/types/alarm";
|
||||
import { useAlarmStore } from "@/store/modules/alarm";
|
||||
import { EventsDetailHeaders, AlarmDetailCol, EventsDetailKeys } from "./data";
|
||||
|
||||
const { t } = useI18n();
|
||||
const alarmStore = useAlarmStore();
|
||||
const dateFormat = (date: number, pattern = "YYYY-MM-DD HH:mm:ss") =>
|
||||
dayjs(date).format(pattern);
|
||||
const isShowDetails = ref<boolean>(false);
|
||||
const showEventDetails = ref<boolean>(false);
|
||||
const currentDetail = ref<Alarm | any>({});
|
||||
const alarmTags = ref<string[]>([]);
|
||||
const currentEvents = ref<any[]>([]);
|
||||
const currentEvent = ref<Event | any>({});
|
||||
|
||||
function showDetails(item: Alarm) {
|
||||
isShowDetails.value = true;
|
||||
currentDetail.value = item;
|
||||
currentEvents.value = item.events;
|
||||
alarmTags.value = currentDetail.value.tags.map(
|
||||
(d: { key: string; value: string }) => {
|
||||
return `${d.key} = ${d.value}`;
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
function viewEventDetail(event: Event) {
|
||||
currentEvent.value = event;
|
||||
showEventDetails.value = true;
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
@import "./index.scss";
|
||||
|
||||
.tips {
|
||||
width: 100%;
|
||||
margin: 20px 0;
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
}
|
||||
</style>
|
||||
126
src/views/alarm/Header.vue
Normal file
126
src/views/alarm/Header.vue
Normal file
@@ -0,0 +1,126 @@
|
||||
<!-- 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="alarm-tool flex-v">
|
||||
<div class="flex-h">
|
||||
<div class="mr-10">
|
||||
<span class="grey">{{ t("entityType") }}: </span>
|
||||
<Selector
|
||||
v-model="entity"
|
||||
:options="AlarmOptions"
|
||||
placeholder="Select a layer"
|
||||
@change="changeEntity"
|
||||
class="alarm-tool-input"
|
||||
size="small"
|
||||
/>
|
||||
</div>
|
||||
<div class="mr-10 ml-10">
|
||||
<span class="grey">{{ t("searchKeyword") }}: </span>
|
||||
<el-input
|
||||
v-model="keyword"
|
||||
class="alarm-tool-input"
|
||||
@change="refreshAlarms({ pageNum: 1 })"
|
||||
/>
|
||||
</div>
|
||||
<div class="pagination">
|
||||
<el-pagination
|
||||
v-model:currentPage="pageNum"
|
||||
v-model:page-size="pageSize"
|
||||
layout="prev, jumper, total, next"
|
||||
:total="alarmStore.total"
|
||||
@current-change="changePage"
|
||||
:pager-count="5"
|
||||
small
|
||||
:style="`--el-pagination-bg-color: #f0f2f5; --el-pagination-button-disabled-bg-color: #f0f2f5;`"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<ConditionTags
|
||||
:type="'ALARM'"
|
||||
@update="(data) => refreshAlarms({ pageNum: 1, tagsMap: data.tagsMap })"
|
||||
/>
|
||||
</nav>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { ref } from "vue";
|
||||
import { useI18n } from "vue-i18n";
|
||||
import ConditionTags from "@/views/components/ConditionTags.vue";
|
||||
import { AlarmOptions } from "./data";
|
||||
import { useAppStoreWithOut } from "@/store/modules/app";
|
||||
import { useAlarmStore } from "@/store/modules/alarm";
|
||||
import { ElMessage } from "element-plus";
|
||||
|
||||
const appStore = useAppStoreWithOut();
|
||||
const alarmStore = useAlarmStore();
|
||||
const { t } = useI18n();
|
||||
const pageSize = 20;
|
||||
const entity = ref<string>("");
|
||||
const keyword = ref<string>("");
|
||||
const pageNum = ref<number>(1);
|
||||
|
||||
refreshAlarms({ pageNum: 1 });
|
||||
|
||||
async function refreshAlarms(param: { pageNum: number; tagsMap?: any }) {
|
||||
const params: any = {
|
||||
duration: appStore.durationTime,
|
||||
paging: {
|
||||
pageNum: param.pageNum,
|
||||
pageSize,
|
||||
needTotal: true,
|
||||
},
|
||||
tags: param.tagsMap,
|
||||
};
|
||||
params.scope = entity.value || undefined;
|
||||
params.keyword = keyword.value || undefined;
|
||||
const res = await alarmStore.getAlarms(params);
|
||||
|
||||
if (res.errors) {
|
||||
ElMessage.error(res.errors);
|
||||
}
|
||||
}
|
||||
|
||||
function changeEntity(param: any) {
|
||||
entity.value = param[0].value;
|
||||
refreshAlarms({ pageNum: 1 });
|
||||
}
|
||||
|
||||
function changePage(p: number) {
|
||||
pageNum.value = p;
|
||||
refreshAlarms({ pageNum: p });
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.alarm-tool {
|
||||
font-size: 12px;
|
||||
border-bottom: 1px solid #c1c5ca41;
|
||||
background-color: #f0f2f5;
|
||||
padding: 10px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.alarm-tool-input {
|
||||
border-style: unset;
|
||||
outline: 0;
|
||||
padding: 2px 5px;
|
||||
width: 250px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.pagination {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 5px;
|
||||
}
|
||||
</style>
|
||||
65
src/views/alarm/data.ts
Normal file
65
src/views/alarm/data.ts
Normal file
@@ -0,0 +1,65 @@
|
||||
/**
|
||||
* 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 AlarmOptions = [
|
||||
{ label: "All", value: "" },
|
||||
{ label: "Service", value: "Service" },
|
||||
{ label: "ServiceInstance", value: "ServiceInstance" },
|
||||
{ label: "Endpoint", value: "Endpoint" },
|
||||
{ label: "ServiceRelation", value: "ServiceRelation" },
|
||||
{ label: "ServiceInstanceRelation", value: "ServiceInstanceRelation" },
|
||||
{ label: "EndpointRelation", value: "EndpointRelation" },
|
||||
];
|
||||
export const EventsDetailHeaders = [
|
||||
{ text: "eventID", class: "uuid" },
|
||||
{ text: "eventName", class: "name" },
|
||||
{ text: "eventsType", class: "type" },
|
||||
{ text: "startTime", class: "startTime" },
|
||||
{ text: "endTime", class: "endTime" },
|
||||
];
|
||||
|
||||
export const AlarmDetailCol = [
|
||||
{
|
||||
label: "scope",
|
||||
value: "scope",
|
||||
},
|
||||
{
|
||||
label: "startTime",
|
||||
value: "startTime",
|
||||
},
|
||||
{
|
||||
label: "tags",
|
||||
value: "tags",
|
||||
},
|
||||
{
|
||||
label: "message",
|
||||
value: "message",
|
||||
},
|
||||
{
|
||||
label: "events",
|
||||
value: "eventDetail",
|
||||
},
|
||||
];
|
||||
|
||||
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" },
|
||||
];
|
||||
115
src/views/alarm/index.scss
Normal file
115
src/views/alarm/index.scss
Normal file
@@ -0,0 +1,115 @@
|
||||
/**
|
||||
* 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.
|
||||
*/
|
||||
|
||||
.timeline-table {
|
||||
padding: 30px 20px 20px 40px;
|
||||
flex-grow: 1;
|
||||
overflow: auto;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.time-line {
|
||||
padding: 14px 30px;
|
||||
min-height: 63px;
|
||||
max-width: 132px;
|
||||
}
|
||||
|
||||
.timeline-table-i {
|
||||
padding: 10px 15px;
|
||||
border-left: 4px solid #eee;
|
||||
position: relative;
|
||||
|
||||
&::after {
|
||||
content: "";
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
width: 7px;
|
||||
height: 7px;
|
||||
left: -23px;
|
||||
top: 25px;
|
||||
border-radius: 4px;
|
||||
background-color: #448dfe;
|
||||
}
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: calc(100% + 11px);
|
||||
top: 0;
|
||||
left: -20px;
|
||||
border-radius: 5px;
|
||||
background-color: #448dfe99;
|
||||
}
|
||||
}
|
||||
|
||||
.timeline-table-i-scope {
|
||||
display: inline-block;
|
||||
padding: 0 8px;
|
||||
border: 1px solid;
|
||||
margin-top: -1px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.timeline-item {
|
||||
cursor: pointer;
|
||||
margin-bottom: 9px;
|
||||
}
|
||||
|
||||
.alarm-detail {
|
||||
max-height: 600px;
|
||||
overflow: auto;
|
||||
|
||||
ul {
|
||||
min-height: 100px;
|
||||
overflow: auto;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
li {
|
||||
cursor: pointer;
|
||||
|
||||
> span {
|
||||
width: 160px;
|
||||
height: 20px;
|
||||
line-height: 20px;
|
||||
text-align: center;
|
||||
display: inline-block;
|
||||
border-bottom: 1px solid #ccc;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.keys {
|
||||
font-weight: bold;
|
||||
display: inline-block;
|
||||
width: 120px;
|
||||
}
|
||||
|
||||
.source > span {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.source > div {
|
||||
padding-left: 120px;
|
||||
}
|
||||
|
||||
.uuid {
|
||||
width: 280px;
|
||||
}
|
||||
@@ -43,7 +43,7 @@ limitations under the License. -->
|
||||
<Icon class="icon-help mr-5" iconName="help" size="middle" />
|
||||
</span>
|
||||
</el-tooltip>
|
||||
<b v-if="type === 'TRACE'">{{ t("noticeTag") }}</b>
|
||||
<b v-if="type !== 'LOG'">{{ t("noticeTag") }}</b>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
@@ -59,7 +59,6 @@ defineProps({
|
||||
});
|
||||
const { t } = useI18n();
|
||||
const theme = ref<string>("dark");
|
||||
const type = ref<string>("");
|
||||
const tags = ref<string>("");
|
||||
const tagsList = ref<string[]>([]);
|
||||
|
||||
@@ -123,7 +123,7 @@ import { useLogStore } from "@/store/modules/log";
|
||||
import { useDashboardStore } from "@/store/modules/dashboard";
|
||||
import { useAppStoreWithOut } from "@/store/modules/app";
|
||||
import { useSelectorStore } from "@/store/modules/selectors";
|
||||
import ConditionTags from "@/views/dashboard/related/components/ConditionTags.vue";
|
||||
import ConditionTags from "@/views/components/ConditionTags.vue";
|
||||
import { ElMessage } from "element-plus";
|
||||
import { EntityType } from "../../data";
|
||||
|
||||
|
||||
@@ -95,7 +95,7 @@ import { useTraceStore } from "@/store/modules/trace";
|
||||
import { useDashboardStore } from "@/store/modules/dashboard";
|
||||
import { useAppStoreWithOut } from "@/store/modules/app";
|
||||
import { useSelectorStore } from "@/store/modules/selectors";
|
||||
import ConditionTags from "@/views/dashboard/related/components/ConditionTags.vue";
|
||||
import ConditionTags from "@/views/components/ConditionTags.vue";
|
||||
import { ElMessage } from "element-plus";
|
||||
import { EntityType } from "../../data";
|
||||
|
||||
|
||||
Reference in New Issue
Block a user