mirror of
https://github.com/apache/skywalking-booster-ui.git
synced 2025-06-29 21:27:34 +00:00
Feature: Alert Settings
This commit is contained in:
heyanlong
parent
448531b069
commit
e17049b7bd
@ -29,6 +29,10 @@ const msg = {
|
||||
logs: "Logs",
|
||||
events: "Events",
|
||||
alerts: "Alerts",
|
||||
description: "Description",
|
||||
operate: "Action",
|
||||
createAAlert: "Create a alert",
|
||||
alertSettings: "Alert setting",
|
||||
settings: "Settings",
|
||||
dashboards: "Dashboards",
|
||||
profiles: "Profiles",
|
||||
|
||||
@ -29,6 +29,10 @@ const msg = {
|
||||
events: "事件",
|
||||
// 警告
|
||||
alerts: "警告",
|
||||
description: "描述",
|
||||
operate: "操作",
|
||||
createAAlert: "创建告警",
|
||||
alertSettings: "告警设置",
|
||||
alertName: "警告名称",
|
||||
startedTime: "开始时间",
|
||||
settings: "设置",
|
||||
|
||||
@ -31,14 +31,14 @@ export const routesAlert: Array<RouteRecordRaw> = [
|
||||
children: [
|
||||
{
|
||||
path: "/alerts",
|
||||
name: "Alerts",
|
||||
name: "alertSettings",
|
||||
meta: {
|
||||
title: "alerts",
|
||||
title: "Alert Settings",
|
||||
icon: "notification_important",
|
||||
hasGroup: false,
|
||||
exact: false,
|
||||
},
|
||||
component: () => import("@/views/Alert.vue"),
|
||||
component: () => import("@/views/alert/Settings.vue"),
|
||||
},
|
||||
],
|
||||
},
|
||||
|
||||
@ -1,102 +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="alert-table">
|
||||
<el-table :data="tableData" :span-method="objectSpanMethod" border>
|
||||
<el-table-column
|
||||
v-for="(h, index) in tableHeader"
|
||||
:label="t(h)"
|
||||
:key="h + index"
|
||||
>
|
||||
<template #default="scope">
|
||||
<router-link
|
||||
:to="`${state.path}/${scope.row.serviceName}/metrics`"
|
||||
v-if="h === tableHeader[1] && index !== 0"
|
||||
>
|
||||
<span class="alert-name cp">{{ scope.row[h] }}</span>
|
||||
</router-link>
|
||||
<span v-else>{{ scope.row[h] }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import {reactive, watch} from "vue";
|
||||
import {useI18n} from "vue-i18n";
|
||||
import {useRoute} from "vue-router";
|
||||
import {ElTable, ElTableColumn} from "element-plus";
|
||||
|
||||
const route = useRoute();
|
||||
const {t} = useI18n();
|
||||
const tableHeader = [
|
||||
"scope",
|
||||
"alertName",
|
||||
"message",
|
||||
"startedTime"
|
||||
];
|
||||
const tableData = [
|
||||
{
|
||||
scope: "Service",
|
||||
alertName: "xx",
|
||||
message: "Response time of service instance 91629a56afea40e885ab4fae0cbe6e9c@10.170.0.13 of business-zone::projectA is more than 1000ms in last 10 minutes",
|
||||
startedTime: "2021-08-17 23:26:25",
|
||||
},
|
||||
{
|
||||
scope: "Service",
|
||||
alertName: "xx",
|
||||
message: "Response time of service i",
|
||||
startedTime: "2021-08-17 23:26:25",
|
||||
},
|
||||
];
|
||||
const state = reactive({
|
||||
path: route.meta.headPath,
|
||||
});
|
||||
const objectSpanMethod = (item: { columnIndex: number; rowIndex: number }) => {
|
||||
if (item.columnIndex === 0) {
|
||||
if (item.rowIndex % 2 === 0) {
|
||||
return {
|
||||
rowspan: 2,
|
||||
colspan: 1,
|
||||
};
|
||||
} else {
|
||||
return {
|
||||
rowspan: 0,
|
||||
colspan: 0,
|
||||
};
|
||||
}
|
||||
}
|
||||
};
|
||||
watch(
|
||||
() => route.meta.headPath,
|
||||
(path: unknown) => {
|
||||
if (!path) {
|
||||
return;
|
||||
}
|
||||
state.path = path;
|
||||
}
|
||||
);
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.alert-name {
|
||||
color: #448edf;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.alert-table {
|
||||
padding: 15px;
|
||||
}
|
||||
</style>
|
||||
87
src/views/alert/Settings.vue
Normal file
87
src/views/alert/Settings.vue
Normal file
@ -0,0 +1,87 @@
|
||||
<!-- 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="alert-table">
|
||||
<el-button class="alert-create" type="primary" size="small">{{
|
||||
t("createAAlert")
|
||||
}}</el-button>
|
||||
<el-table :data="tableData" border>
|
||||
<el-table-column
|
||||
v-for="(h, index) in tableHeader"
|
||||
:label="t(h)"
|
||||
:key="h + index"
|
||||
>
|
||||
<template #default="scope">
|
||||
<span v-if="h !== 'operate'">{{ scope.row[h] }}</span>
|
||||
<el-button v-else type="danger" size="mini">{{
|
||||
t("delete")
|
||||
}}</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { reactive, watch } from "vue";
|
||||
import { useI18n } from "vue-i18n";
|
||||
import { useRoute } from "vue-router";
|
||||
import { ElButton, ElTable, ElTableColumn } from "element-plus";
|
||||
|
||||
const route = useRoute();
|
||||
const { t } = useI18n();
|
||||
const tableHeader = ["name", "entityType", "description", "status", "operate"];
|
||||
const tableData = [
|
||||
{
|
||||
name: "xxxx-name",
|
||||
entityType: "Service",
|
||||
description: "xxxxxxx",
|
||||
status: "Disable",
|
||||
},
|
||||
{
|
||||
name: "xxxx-name",
|
||||
entityType: "Service",
|
||||
description: "xxxxxxx",
|
||||
status: "Disable",
|
||||
},
|
||||
];
|
||||
const state = reactive({
|
||||
path: route.meta.headPath,
|
||||
});
|
||||
watch(
|
||||
() => route.meta.headPath,
|
||||
(path: unknown) => {
|
||||
if (!path) {
|
||||
return;
|
||||
}
|
||||
state.path = path;
|
||||
}
|
||||
);
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.alert-name {
|
||||
color: #448edf;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.alert-table {
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.alert-create {
|
||||
float: right;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
</style>
|
||||
19
src/views/alert/data.ts
Normal file
19
src/views/alert/data.ts
Normal file
@ -0,0 +1,19 @@
|
||||
/**
|
||||
* 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 TabsConfig: { [key: string]: any } = {
|
||||
Settings: {},
|
||||
};
|
||||
Loading…
Reference in New Issue
Block a user