mirror of
https://github.com/apache/skywalking-booster-ui.git
synced 2025-07-17 14:55:25 +00:00
feat: add alarm details
This commit is contained in:
parent
366cbc82ba
commit
d202c1bbf0
2
src/types/alarm.d.ts
vendored
2
src/types/alarm.d.ts
vendored
@ -26,7 +26,7 @@ export interface Alarm {
|
|||||||
startTime: string;
|
startTime: string;
|
||||||
scope: string;
|
scope: string;
|
||||||
tags: Array<{ key: string; value: string }>;
|
tags: Array<{ key: string; value: string }>;
|
||||||
events: any[];
|
events: Event[];
|
||||||
}
|
}
|
||||||
|
|
||||||
export interface Event {
|
export interface Event {
|
||||||
|
@ -17,7 +17,7 @@ limitations under the License. -->
|
|||||||
<div
|
<div
|
||||||
v-for="(i, index) in alarmStore.alarms"
|
v-for="(i, index) in alarmStore.alarms"
|
||||||
:key="index"
|
:key="index"
|
||||||
class="mb-10 clear timeline-item"
|
class="clear timeline-item"
|
||||||
@click="showDetails(i)"
|
@click="showDetails(i)"
|
||||||
>
|
>
|
||||||
<div class="g-sm-3 grey sm hide-xs time-line tr">
|
<div class="g-sm-3 grey sm hide-xs time-line tr">
|
||||||
@ -43,30 +43,97 @@ limitations under the License. -->
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</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>
|
||||||
</template>
|
</template>
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import { ref } from "vue";
|
import { ref } from "vue";
|
||||||
import dayjs from "dayjs";
|
import dayjs from "dayjs";
|
||||||
import { useI18n } from "vue-i18n";
|
import { useI18n } from "vue-i18n";
|
||||||
import { Alarm } from "@/types/alarm";
|
import { Alarm, Event } from "@/types/alarm";
|
||||||
import { useAlarmStore } from "@/store/modules/alarm";
|
import { useAlarmStore } from "@/store/modules/alarm";
|
||||||
|
import { EventsDetailHeaders, AlarmDetailCol } from "./data";
|
||||||
|
|
||||||
const { t } = useI18n();
|
const { t } = useI18n();
|
||||||
const alarmStore = useAlarmStore();
|
const alarmStore = useAlarmStore();
|
||||||
const dateFormat = (date: number, pattern = "YYYY-MM-DD HH:mm:ss") =>
|
const dateFormat = (date: number, pattern = "YYYY-MM-DD HH:mm:ss") =>
|
||||||
dayjs(date).format(pattern);
|
dayjs(date).format(pattern);
|
||||||
|
const isShowDetails = ref<boolean>(false);
|
||||||
|
const showEventDetails = ref<boolean>(false);
|
||||||
const currentDetail = ref<Alarm | any>({});
|
const currentDetail = ref<Alarm | any>({});
|
||||||
const alarmTags = ref<string[]>([]);
|
const alarmTags = ref<string[]>([]);
|
||||||
|
const currentEvents = ref<any[]>([]);
|
||||||
|
const currentEvent = ref<Event | any>({});
|
||||||
|
|
||||||
function showDetails(item: Alarm) {
|
function showDetails(item: Alarm) {
|
||||||
|
isShowDetails.value = true;
|
||||||
currentDetail.value = item;
|
currentDetail.value = item;
|
||||||
|
currentEvents.value = item.events;
|
||||||
alarmTags.value = currentDetail.value.tags.map(
|
alarmTags.value = currentDetail.value.tags.map(
|
||||||
(d: { key: string; value: string }) => {
|
(d: { key: string; value: string }) => {
|
||||||
return `${d.key} = ${d.value}`;
|
return `${d.key} = ${d.value}`;
|
||||||
}
|
}
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function viewEventDetail(event: Event) {
|
||||||
|
currentEvent.value = event;
|
||||||
|
showEventDetails.value = true;
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
<style lang="scss">
|
<style lang="scss" scoped>
|
||||||
@import "./index.scss";
|
@import "./index.scss";
|
||||||
</style>
|
</style>
|
||||||
|
@ -7,3 +7,33 @@ export const AlarmOptions = [
|
|||||||
{ label: "ServiceInstanceRelation", value: "ServiceInstanceRelation" },
|
{ label: "ServiceInstanceRelation", value: "ServiceInstanceRelation" },
|
||||||
{ label: "EndpointRelation", value: "EndpointRelation" },
|
{ 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",
|
||||||
|
},
|
||||||
|
];
|
||||||
|
@ -20,6 +20,60 @@
|
|||||||
flex-grow: 1;
|
flex-grow: 1;
|
||||||
overflow: auto;
|
overflow: auto;
|
||||||
height: 100%;
|
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 {
|
ul {
|
||||||
min-height: 100px;
|
min-height: 100px;
|
||||||
@ -59,51 +113,3 @@
|
|||||||
padding-left: 120px;
|
padding-left: 120px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.time-line {
|
|
||||||
padding: 14px 30px;
|
|
||||||
min-height: 63px;
|
|
||||||
max-width: 132px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.timeline-table-i {
|
|
||||||
padding: 10px 15px;
|
|
||||||
border-left: 4px solid #2e2f331a;
|
|
||||||
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;
|
|
||||||
}
|
|
||||||
|
Loading…
Reference in New Issue
Block a user