Merge remote-tracking branch 'origin/dev' into dev
# Conflicts: # sql/init-4-data.sql
This commit is contained in:
@@ -4,7 +4,7 @@ import axios from 'axios';
|
||||
import qs from 'query-string';
|
||||
|
||||
/**
|
||||
* 告警记录处理请求
|
||||
* 告警事件处理请求
|
||||
*/
|
||||
export interface AlarmEventHandleRequest {
|
||||
idList?: Array<number>;
|
||||
@@ -14,14 +14,14 @@ export interface AlarmEventHandleRequest {
|
||||
}
|
||||
|
||||
/**
|
||||
* 告警记录误报请求
|
||||
* 告警事件误报请求
|
||||
*/
|
||||
export interface AlarmEventFalseAlarmRequest {
|
||||
idList?: Array<number>;
|
||||
}
|
||||
|
||||
/**
|
||||
* 告警记录查询请求
|
||||
* 告警事件查询请求
|
||||
*/
|
||||
export interface AlarmEventQueryRequest extends Pagination, OrderDirection {
|
||||
id?: number;
|
||||
@@ -39,13 +39,13 @@ export interface AlarmEventQueryRequest extends Pagination, OrderDirection {
|
||||
}
|
||||
|
||||
/**
|
||||
* 告警记录清理请求
|
||||
* 告警事件清理请求
|
||||
*/
|
||||
export interface AlarmEventClearRequest extends AlarmEventQueryRequest, ClearRequest {
|
||||
}
|
||||
|
||||
/**
|
||||
* 告警记录查询响应
|
||||
* 告警事件查询响应
|
||||
*/
|
||||
export interface AlarmEventQueryResponse extends TableData {
|
||||
id: number;
|
||||
@@ -75,7 +75,7 @@ export interface AlarmEventQueryResponse extends TableData {
|
||||
}
|
||||
|
||||
/**
|
||||
* 处理告警记录
|
||||
* 处理告警事件
|
||||
*/
|
||||
export function handleAlarmEvent(request: AlarmEventHandleRequest) {
|
||||
return axios.post<number>('/monitor/alarm-event/handle', request);
|
||||
@@ -89,28 +89,28 @@ export function setAlarmEventFalse(request: AlarmEventFalseAlarmRequest) {
|
||||
}
|
||||
|
||||
/**
|
||||
* 分页查询告警记录
|
||||
* 分页查询告警事件
|
||||
*/
|
||||
export function getAlarmEventPage(request: AlarmEventQueryRequest) {
|
||||
return axios.post<DataGrid<AlarmEventQueryResponse>>('/monitor/alarm-event/query', request);
|
||||
}
|
||||
|
||||
/**
|
||||
* 查询告警记录数量
|
||||
* 查询告警事件数量
|
||||
*/
|
||||
export function getAlarmEventCount(request: AlarmEventQueryRequest) {
|
||||
return axios.post<number>('/monitor/alarm-event/count', request);
|
||||
}
|
||||
|
||||
/**
|
||||
* 删除告警记录
|
||||
* 删除告警事件
|
||||
*/
|
||||
export function deleteAlarmEvent(id: number) {
|
||||
return axios.delete<number>('/monitor/alarm-event/delete', { params: { id } });
|
||||
}
|
||||
|
||||
/**
|
||||
* 批量删除告警记录
|
||||
* 批量删除告警事件
|
||||
*/
|
||||
export function batchDeleteAlarmEvent(idList: Array<number>) {
|
||||
return axios.delete<number>('/monitor/alarm-event/batch-delete', {
|
||||
@@ -122,7 +122,7 @@ export function batchDeleteAlarmEvent(idList: Array<number>) {
|
||||
}
|
||||
|
||||
/**
|
||||
* 清理告警记录
|
||||
* 清理告警事件
|
||||
*/
|
||||
export function clearMonitorAlarmEvent(request: AlarmEventClearRequest) {
|
||||
return axios.post<number>('/monitor/alarm-event/clear', request);
|
||||
|
||||
@@ -72,8 +72,8 @@ export function updateAlarmRuleSwitch(request: AlarmRuleUpdateRequest) {
|
||||
/**
|
||||
* 查询全部监控告警规则
|
||||
*/
|
||||
export function getAlarmRuleList(policyId: number, metricsMeasurement: string = '') {
|
||||
return axios.get<Array<AlarmRuleQueryResponse>>('/monitor/alarm-policy-rule/list', { params: { policyId, metricsMeasurement } });
|
||||
export function getAlarmRuleList(policyId: number, measurement: string = '') {
|
||||
return axios.get<Array<AlarmRuleQueryResponse>>('/monitor/alarm-policy-rule/list', { params: { policyId, measurement } });
|
||||
}
|
||||
|
||||
/**
|
||||
|
||||
@@ -28,7 +28,7 @@ export interface MonitorHostSwitchUpdateRequest {
|
||||
* 监控主机查询请求
|
||||
*/
|
||||
export interface MonitorHostQueryRequest extends Pagination {
|
||||
agentKeyList?: Array<string>;
|
||||
agentKeys?: Array<string>;
|
||||
searchValue?: string;
|
||||
alarmSwitch?: number;
|
||||
policyId?: number;
|
||||
@@ -43,6 +43,15 @@ export interface MonitorHostQueryRequest extends Pagination {
|
||||
tags?: Array<number>;
|
||||
}
|
||||
|
||||
/**
|
||||
* 监控主机标签查询请求
|
||||
*/
|
||||
export interface MonitorHostQueryTagRequest {
|
||||
measurement?: string;
|
||||
policyId?: number;
|
||||
agentKeys?: Array<string>;
|
||||
}
|
||||
|
||||
/**
|
||||
* 监控主机图表查询请求
|
||||
*/
|
||||
@@ -147,12 +156,12 @@ export interface MonitorHostMetricsData {
|
||||
/**
|
||||
* 查询监控主机指标
|
||||
*/
|
||||
export function getMonitorHostMetrics(agentKeyList: Array<string>) {
|
||||
export function getMonitorHostMetrics(agentKeys: Array<string>) {
|
||||
return axios.post<Array<MonitorHostMetricsData>>('/monitor/monitor-host/metrics', {
|
||||
agentKeyList
|
||||
agentKeys
|
||||
}, {
|
||||
promptBizErrorMessage: false,
|
||||
promptRequestErrorMessage: false,
|
||||
promptRequestErrorMessage: false
|
||||
});
|
||||
}
|
||||
|
||||
@@ -179,6 +188,13 @@ export function getMonitorHostPage(request: MonitorHostQueryRequest) {
|
||||
return axios.post<DataGrid<MonitorHostQueryResponse>>('/monitor/monitor-host/query', request);
|
||||
}
|
||||
|
||||
/**
|
||||
* 查询监控主机标签
|
||||
*/
|
||||
export function getMonitorHostTags(request: MonitorHostQueryTagRequest) {
|
||||
return axios.post<Array<string>>('/monitor/monitor-host/host-tags', request);
|
||||
}
|
||||
|
||||
/**
|
||||
* 更新监控主机
|
||||
*/
|
||||
|
||||
@@ -95,7 +95,7 @@
|
||||
|
||||
// 标准卡片
|
||||
.general-card {
|
||||
border-radius: 4px;
|
||||
border-radius: 8px;
|
||||
border: none;
|
||||
|
||||
& > .arco-card-header {
|
||||
|
||||
@@ -14,58 +14,6 @@ body {
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
// -- echarts
|
||||
.echarts-tooltip-diy {
|
||||
background: linear-gradient(304.17deg,
|
||||
rgba(253, 254, 255, 0.6) -6.04%,
|
||||
rgba(244, 247, 252, 0.6) 85.2%) !important;
|
||||
border: none !important;
|
||||
backdrop-filter: blur(10px) !important;
|
||||
/* Note: backdrop-filter has minimal browser support */
|
||||
|
||||
border-radius: 6px !important;
|
||||
|
||||
.content-panel {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 0 9px;
|
||||
background: rgba(255, 255, 255, 0.8);
|
||||
width: 164px;
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
box-shadow: 6px 0 20px rgba(34, 87, 188, 0.1);
|
||||
border-radius: 4px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.tooltip-title {
|
||||
margin: 0 0 10px 0;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.tooltip-title,
|
||||
.tooltip-value {
|
||||
font-size: 13px;
|
||||
line-height: 15px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
text-align: right;
|
||||
color: #1D2129;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.tooltip-item-icon {
|
||||
display: inline-block;
|
||||
margin-right: 8px;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
// flex
|
||||
.flex-center {
|
||||
display: flex;
|
||||
|
||||
@@ -162,8 +162,8 @@
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border-radius: 4px;
|
||||
border: 1px solid var(--color-neutral-3);
|
||||
border-radius: 8px;
|
||||
//border: 1px solid var(--color-neutral-3);
|
||||
transition-property: all;
|
||||
|
||||
& > .arco-card-header {
|
||||
@@ -230,7 +230,7 @@
|
||||
// -- card
|
||||
.simple-card {
|
||||
background: var(--color-bg-2);
|
||||
border-radius: 4px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
// -- doption
|
||||
|
||||
@@ -27,7 +27,19 @@
|
||||
</div>
|
||||
<!-- 状态 -->
|
||||
<div class="exec-host-item-status">
|
||||
<a-tag :color="getDictValue(execHostStatusKey, item.status, 'execColor')">
|
||||
<!-- 执行结果 -->
|
||||
<a-tag v-if="item.exitCode || item.exitCode === 0"
|
||||
class="exit-code-tag"
|
||||
title="exitCode"
|
||||
:color="item.exitCode === 0 ? 'rgb(var(--arcoblue-4))' : 'rgb(var(--orangered-4))'">
|
||||
<template #icon>
|
||||
<icon-check v-if="item.exitCode === 0" />
|
||||
<icon-exclamation v-else />
|
||||
</template>
|
||||
<span class="exit-code-value">{{ item.exitCode }}</span>
|
||||
</a-tag>
|
||||
<!-- 执行状态 -->
|
||||
<a-tag v-else :color="getDictValue(execHostStatusKey, item.status, 'execColor')">
|
||||
{{ getDictValue(execHostStatusKey, item.status) }}
|
||||
</a-tag>
|
||||
</div>
|
||||
@@ -141,8 +153,16 @@
|
||||
&-status {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
gap: 8px;
|
||||
|
||||
:deep(.exit-code-tag .arco-tag-icon) {
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.exit-code-value {
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
@@ -15,7 +15,7 @@
|
||||
<!-- exitCode -->
|
||||
<a-tag v-if="host.exitCode || host.exitCode === 0"
|
||||
:color="host.exitCode === 0 ? 'arcoblue' : 'orangered'"
|
||||
title="exit code">
|
||||
title="exitCode">
|
||||
<template #icon>
|
||||
<icon-check v-if="host.exitCode === 0" />
|
||||
<icon-exclamation v-else />
|
||||
|
||||
@@ -179,7 +179,7 @@
|
||||
&-wrapper {
|
||||
background: var(--color-bg-2);
|
||||
padding: 0 12px;
|
||||
border-radius: 4px;
|
||||
border-radius: 8px;
|
||||
|
||||
.card-list-info {
|
||||
height: var(--header-info-height);
|
||||
|
||||
@@ -17,6 +17,7 @@ export interface TimeSeriesColor {
|
||||
export interface TimeSeriesOption {
|
||||
name: string;
|
||||
type: TimeSeriesType;
|
||||
smooth: boolean;
|
||||
area: boolean;
|
||||
lineColor: string;
|
||||
itemBorderColor: string;
|
||||
@@ -126,7 +127,7 @@ export const createTimeSeries = (option: Partial<TimeSeriesOption>): LineSeriesO
|
||||
name: option.name,
|
||||
data: option.data || [],
|
||||
type: option.type || 'line',
|
||||
smooth: true,
|
||||
smooth: option.smooth ?? true,
|
||||
symbol: 'circle',
|
||||
symbolSize: 10,
|
||||
itemStyle: {
|
||||
|
||||
@@ -12,6 +12,10 @@ export function isString(obj: any): obj is string {
|
||||
return opt.call(obj) === '[object String]';
|
||||
}
|
||||
|
||||
export function isBoolean(obj: any): obj is boolean {
|
||||
return opt.call(obj) === '[object Boolean]';
|
||||
}
|
||||
|
||||
export function isNumber(obj: any): obj is number {
|
||||
return opt.call(obj) === '[object Number]' && obj === obj; // eslint-disable-line
|
||||
}
|
||||
|
||||
@@ -98,7 +98,7 @@
|
||||
|
||||
:deep(.card) {
|
||||
padding: 16px 20px;
|
||||
border-radius: 4px;
|
||||
border-radius: 8px;
|
||||
background-color: var(--color-bg-2);
|
||||
|
||||
&-title {
|
||||
|
||||
@@ -301,7 +301,7 @@
|
||||
.panel-item {
|
||||
height: 100%;
|
||||
padding: 16px;
|
||||
border-radius: 4px;
|
||||
border-radius: 8px;
|
||||
margin-right: 16px;
|
||||
position: relative;
|
||||
background: var(--color-bg-2);
|
||||
|
||||
@@ -295,7 +295,7 @@
|
||||
|
||||
.exec-form-container, .exec-command-container, .exec-history-container {
|
||||
background: var(--color-bg-2);
|
||||
border-radius: 4px;
|
||||
border-radius: 8px;
|
||||
height: 100%;
|
||||
padding: 16px;
|
||||
position: relative;
|
||||
|
||||
@@ -6,7 +6,7 @@
|
||||
<div class="table-left-bar-handle">
|
||||
<!-- 标题 -->
|
||||
<div class="table-title">
|
||||
告警记录列表
|
||||
告警事件列表
|
||||
</div>
|
||||
</div>
|
||||
<!-- 右侧操作 -->
|
||||
@@ -229,8 +229,8 @@
|
||||
|
||||
// 获取指标名称
|
||||
const getMetricsField = (metricsId: number, field: string) => {
|
||||
return (monitorMetrics as Array<MetricsQueryResponse>).find(m => m.id === metricsId)?.[field];
|
||||
};
|
||||
return (monitorMetrics as Array<MetricsQueryResponse> || []).find(m => m.id === metricsId)?.[field];
|
||||
};
|
||||
|
||||
// 提取标签
|
||||
const extraTags = (record: AlarmEventQueryResponse) => {
|
||||
|
||||
@@ -48,7 +48,7 @@
|
||||
allow-clear />
|
||||
</a-form-item>
|
||||
<!-- 数据集 -->
|
||||
<a-form-item field="metricsId" label="数据集">
|
||||
<a-form-item field="metricsMeasurement" label="数据集">
|
||||
<a-select v-model="formModel.metricsMeasurement"
|
||||
:options="toOptions(MetricsMeasurementKey)"
|
||||
placeholder="数据集"
|
||||
|
||||
@@ -14,7 +14,7 @@ export const FalseAlarm = {
|
||||
// 告警条件 字典项
|
||||
export const TriggerConditionKey = 'alarmTriggerCondition';
|
||||
|
||||
// 告警记录处理状态 字典项
|
||||
// 告警事件处理状态 字典项
|
||||
export const HandleStatusKey = 'alarmEventHandleStatus';
|
||||
|
||||
// 是否为误报 字典项
|
||||
|
||||
@@ -30,8 +30,8 @@
|
||||
placeholder="请输入策略描述"
|
||||
allow-clear />
|
||||
</a-form-item>
|
||||
<!-- 通知模板 -->
|
||||
<a-form-item field="notifyIdList" label="通知模板">
|
||||
<!-- 通知渠道 -->
|
||||
<a-form-item field="notifyIdList" label="通知渠道">
|
||||
<notify-template-selector v-model="formModel.notifyIdList"
|
||||
biz-type="ALARM"
|
||||
multiple
|
||||
|
||||
@@ -6,7 +6,7 @@
|
||||
:unmount-on-close="true"
|
||||
:ok-button-props="{ disabled: loading }"
|
||||
:cancel-button-props="{ disabled: loading }"
|
||||
:on-before-ok="handlerOk"
|
||||
:on-before-ok="handleOk"
|
||||
@cancel="handleClose">
|
||||
<a-spin class="full drawer-form-large" :loading="loading">
|
||||
<a-form :model="formModel"
|
||||
@@ -17,11 +17,12 @@
|
||||
<!-- 监控指标 -->
|
||||
<a-form-item field="metricsId" label="监控指标">
|
||||
<monitor-metrics-selector v-model="formModel.metricsId"
|
||||
class="metrics-selector"
|
||||
:class="[ hasTags ? 'metrics-selector-has-tag' : 'metrics-selector-no-tag']"
|
||||
placeholder="请选择监控指标"
|
||||
allow-clear />
|
||||
<!-- 添加标签 -->
|
||||
<a-button title="添加标签"
|
||||
<a-button v-if="hasTags"
|
||||
title="添加标签"
|
||||
:disabled="formModel.allEffect === 1"
|
||||
@click="addTag">
|
||||
<template #icon>
|
||||
@@ -34,20 +35,26 @@
|
||||
<a-form-item v-if="formModel.allEffect === 0"
|
||||
:field="'tag-' + (index + 1)"
|
||||
:label="'指标标签-' + (index + 1)">
|
||||
<a-space :size="12">
|
||||
<a-space :size="12" class="tag-wrapper">
|
||||
<!-- 标签名称 -->
|
||||
<a-input v-model="tag.key"
|
||||
style="width: 128px;"
|
||||
placeholder="指标标签名称" />
|
||||
style="width: 108px;"
|
||||
placeholder="标签名称" />
|
||||
<!-- 标签值 -->
|
||||
<a-select v-model="tag.value"
|
||||
class="tag-values"
|
||||
style="width: 260px"
|
||||
:max-tag-count="2"
|
||||
placeholder="标签值"
|
||||
tag-nowrap
|
||||
:options="measurementTags[measurement] || []"
|
||||
placeholder="输入或选择标签值"
|
||||
multiple
|
||||
allow-create />
|
||||
allow-create>
|
||||
<template #empty>
|
||||
<a-empty>
|
||||
请输入标签值
|
||||
</a-empty>
|
||||
</template>
|
||||
</a-select>
|
||||
<!-- 移除 -->
|
||||
<a-button title="移除"
|
||||
style="width: 32px"
|
||||
@@ -72,7 +79,7 @@
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<!-- 全部生效 -->
|
||||
<a-col :span="12">
|
||||
<a-col v-if="hasTags" :span="12">
|
||||
<a-form-item field="allEffect"
|
||||
label="全部生效"
|
||||
tooltip="开启后则忽略标签, 并生效与已配置标签的规则 (通常用于默认策略)"
|
||||
@@ -190,16 +197,17 @@
|
||||
import type { MetricsQueryResponse } from '@/api/monitor/metrics';
|
||||
import type { RuleTag } from '../types/const';
|
||||
import type { FormHandle } from '@/types/form';
|
||||
import { ref, computed } from 'vue';
|
||||
import { ref, computed, watch } from 'vue';
|
||||
import useLoading from '@/hooks/loading';
|
||||
import useVisible from '@/hooks/visible';
|
||||
import formRules from '../types/form.rules';
|
||||
import { MetricsUnitKey } from '../types/const';
|
||||
import { MetricsUnitKey, MeasurementKey } from '../types/const';
|
||||
import { assignOmitRecord } from '@/utils';
|
||||
import { TriggerConditionKey, LevelKey, DefaultCondition, DefaultLevel, } from '../types/const';
|
||||
import { createAlarmRule, updateAlarmRule } from '@/api/monitor/alarm-rule';
|
||||
import { Message } from '@arco-design/web-vue';
|
||||
import { useDictStore, useCacheStore } from '@/store';
|
||||
import { getMonitorHostTags } from '@/api/monitor/monitor-host';
|
||||
import MonitorMetricsSelector from '@/components/monitor/metrics/selector/index.vue';
|
||||
|
||||
const emits = defineEmits(['added', 'updated']);
|
||||
@@ -214,6 +222,9 @@
|
||||
const formRef = ref<any>();
|
||||
const formModel = ref<AlarmRuleUpdateRequest>({});
|
||||
const tags = ref<Array<RuleTag>>([]);
|
||||
const hasTags = ref(false);
|
||||
const measurement = ref('');
|
||||
const measurementTags = ref<Record<string, string[]>>({});
|
||||
|
||||
const defaultForm = (): AlarmRuleUpdateRequest => {
|
||||
return {
|
||||
@@ -223,7 +234,7 @@
|
||||
tags: undefined,
|
||||
level: DefaultLevel,
|
||||
ruleSwitch: 1,
|
||||
allEffect: 0,
|
||||
allEffect: 1,
|
||||
triggerCondition: DefaultCondition,
|
||||
threshold: undefined,
|
||||
consecutiveCount: 1,
|
||||
@@ -232,18 +243,28 @@
|
||||
};
|
||||
};
|
||||
|
||||
// 指标单位
|
||||
const metricsUnit = computed(() => {
|
||||
const metricsId = formModel.value.metricsId;
|
||||
// 检查是否有 tags
|
||||
watch(() => formModel.value.metricsId, (metricsId) => {
|
||||
if (!metricsId) {
|
||||
return '';
|
||||
hasTags.value = false;
|
||||
return;
|
||||
}
|
||||
// 读取指标单位
|
||||
const unit = (monitorMetrics as Array<MetricsQueryResponse>).find(m => m.id === metricsId)?.unit;
|
||||
if (!unit) {
|
||||
return '';
|
||||
// 获取数据集
|
||||
const measurementValue = (monitorMetrics as Array<MetricsQueryResponse> || []).find(m => m.id === metricsId)?.measurement;
|
||||
if (!measurementValue) {
|
||||
hasTags.value = false;
|
||||
return;
|
||||
}
|
||||
measurement.value = measurementValue;
|
||||
// 获取标签
|
||||
const value = getDictValue(MeasurementKey, measurementValue, 'hasTags');
|
||||
if (value === true) {
|
||||
hasTags.value = true;
|
||||
// 加载全部标签
|
||||
loadTags();
|
||||
} else {
|
||||
hasTags.value = false;
|
||||
}
|
||||
return getDictValue(MetricsUnitKey, unit, 'alarmUnit');
|
||||
});
|
||||
|
||||
// 打开新增
|
||||
@@ -284,7 +305,8 @@
|
||||
|
||||
// 添加标签
|
||||
const addTag = () => {
|
||||
tags.value.push({ key: '', value: [] });
|
||||
const hasNameTag = tags.value.some(s => s.key === 'name');
|
||||
tags.value.push({ key: hasNameTag ? '' : 'name', value: [] });
|
||||
};
|
||||
|
||||
// 移除标签
|
||||
@@ -292,8 +314,37 @@
|
||||
tags.value.splice(index, 1);
|
||||
};
|
||||
|
||||
// 指标单位
|
||||
const metricsUnit = computed(() => {
|
||||
const metricsId = formModel.value.metricsId;
|
||||
if (!metricsId) {
|
||||
return '';
|
||||
}
|
||||
// 读取指标单位
|
||||
const unit = (monitorMetrics as Array<MetricsQueryResponse> || []).find(m => m.id === metricsId)?.unit;
|
||||
if (!unit) {
|
||||
return '';
|
||||
}
|
||||
return getDictValue(MetricsUnitKey, unit, 'alarmUnit');
|
||||
});
|
||||
|
||||
// 加载全部标签
|
||||
const loadTags = () => {
|
||||
const tags = measurementTags.value[measurement.value];
|
||||
if (tags) {
|
||||
return;
|
||||
}
|
||||
// 加载标签
|
||||
getMonitorHostTags({
|
||||
measurement: measurement.value,
|
||||
policyId: formModel.value.policyId,
|
||||
}).then(({ data }) => {
|
||||
measurementTags.value[measurement.value as any] = data;
|
||||
});
|
||||
};
|
||||
|
||||
// 确定
|
||||
const handlerOk = async () => {
|
||||
const handleOk = async () => {
|
||||
setLoading(true);
|
||||
try {
|
||||
// 验证参数
|
||||
@@ -301,21 +352,37 @@
|
||||
if (error) {
|
||||
return false;
|
||||
}
|
||||
for (let tag of tags.value) {
|
||||
if (!tag.key) {
|
||||
Message.error('请输入标签名称');
|
||||
return false;
|
||||
}
|
||||
if (!tag.value) {
|
||||
Message.error('请输入标签值');
|
||||
return false;
|
||||
if (!hasTags.value) {
|
||||
// 无 tag
|
||||
formModel.value.allEffect = 1;
|
||||
} else {
|
||||
// 有 tag
|
||||
if (formModel.value.allEffect === 1) {
|
||||
// 全部生效
|
||||
tags.value = [];
|
||||
} else {
|
||||
// 检查 tag
|
||||
if (!tags.value.length) {
|
||||
Message.error('请选择全部生效或添加对应的标签');
|
||||
return false;
|
||||
}
|
||||
for (let tag of tags.value) {
|
||||
if (!tag.key) {
|
||||
Message.error('请输入标签名称');
|
||||
return false;
|
||||
}
|
||||
if (!tag.value) {
|
||||
Message.error('请输入标签值');
|
||||
return false;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
if (formHandle.value == 'add') {
|
||||
// 新增
|
||||
await createAlarmRule({
|
||||
...formModel.value,
|
||||
tags: formModel.value.allEffect === 1 ? '[]' : JSON.stringify(tags.value)
|
||||
tags: JSON.stringify(tags.value)
|
||||
});
|
||||
Message.success('创建成功');
|
||||
emits('added');
|
||||
@@ -323,13 +390,13 @@
|
||||
// 修改
|
||||
await updateAlarmRule({
|
||||
...formModel.value,
|
||||
tags: formModel.value.allEffect === 1 ? '[]' : JSON.stringify(tags.value)
|
||||
tags: JSON.stringify(tags.value)
|
||||
});
|
||||
Message.success('修改成功');
|
||||
emits('updated');
|
||||
}
|
||||
// 清空
|
||||
handlerClear();
|
||||
handleClose();
|
||||
return true;
|
||||
} catch (e) {
|
||||
return false;
|
||||
} finally {
|
||||
@@ -339,22 +406,32 @@
|
||||
|
||||
// 关闭
|
||||
const handleClose = () => {
|
||||
handlerClear();
|
||||
handleClear();
|
||||
setVisible(false);
|
||||
};
|
||||
|
||||
// 清空
|
||||
const handlerClear = () => {
|
||||
const handleClear = () => {
|
||||
setLoading(false);
|
||||
};
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
:deep(.metrics-selector) {
|
||||
:deep(.metrics-selector-no-tag) {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
:deep(.metrics-selector-has-tag) {
|
||||
width: calc(100% - 42px);
|
||||
margin-right: 12px;
|
||||
}
|
||||
|
||||
.tag-wrapper {
|
||||
width: 100%;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.alarm-level-select, .condition-select {
|
||||
|
||||
:deep(.arco-select-view-suffix) {
|
||||
@@ -365,4 +442,5 @@
|
||||
:deep(.tag-values .arco-select-view-inner) {
|
||||
flex-wrap: nowrap !important;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
@@ -203,7 +203,7 @@
|
||||
|
||||
// 获取指标名称
|
||||
const getMetricsField = (metricsId: number, field: string) => {
|
||||
return (monitorMetrics as Array<MetricsQueryResponse>).find(m => m.id === metricsId)?.[field];
|
||||
return (monitorMetrics as Array<MetricsQueryResponse> || []).find(m => m.id === metricsId)?.[field];
|
||||
};
|
||||
|
||||
// 切换规则开关
|
||||
|
||||
@@ -41,7 +41,7 @@
|
||||
allow-clear />
|
||||
</a-form-item>
|
||||
<!-- 数据集 -->
|
||||
<a-form-item field="metricsId" label="数据集">
|
||||
<a-form-item field="metricsMeasurement" label="数据集">
|
||||
<a-select v-model="formModel.metricsMeasurement"
|
||||
:options="toOptions(MetricsMeasurementKey)"
|
||||
placeholder="数据集"
|
||||
|
||||
@@ -9,7 +9,7 @@
|
||||
:hide-content="true">
|
||||
<a-tab-pane :key="TabKeys.OVERVIEW" title="主机概览" />
|
||||
<a-tab-pane :key="TabKeys.CHART" title="监控图表" />
|
||||
<a-tab-pane :key="TabKeys.ALARM" title="告警记录" />
|
||||
<a-tab-pane :key="TabKeys.ALARM" title="告警事件" />
|
||||
</a-tabs>
|
||||
<a-divider direction="vertical"
|
||||
style="height: 22px; margin: 0 16px 0 8px;"
|
||||
@@ -42,7 +42,7 @@
|
||||
</div>
|
||||
<!-- 右侧 -->
|
||||
<div class="header-right">
|
||||
<!-- 告警记录标签 -->
|
||||
<!-- 告警事件标签 -->
|
||||
<div v-if="activeKey === TabKeys.OVERVIEW" class="handle-wrapper">
|
||||
<a-tag v-if="overrideTimestamp">更新时间: {{ dateFormat(new Date(overrideTimestamp)) }}</a-tag>
|
||||
</div>
|
||||
|
||||
@@ -189,6 +189,7 @@
|
||||
return createTimeSeries({
|
||||
name: s.name,
|
||||
type: props.option.type,
|
||||
smooth: props.option.smooth,
|
||||
area: props.option.background,
|
||||
lineColor: colors?.[0],
|
||||
itemBorderColor: colors?.[1],
|
||||
|
||||
@@ -19,6 +19,7 @@ export interface MetricsChartOption {
|
||||
span?: number;
|
||||
legend?: boolean;
|
||||
background?: boolean;
|
||||
smooth?: boolean;
|
||||
colors: Array<[string, string]>;
|
||||
aggregate: string;
|
||||
unit: MetricUnitType;
|
||||
|
||||
@@ -177,6 +177,9 @@
|
||||
if (type === ValueType.BOOLEAN) {
|
||||
extraValue.value[nameKey] = false;
|
||||
continue;
|
||||
} else if (type === ValueType.STRING) {
|
||||
extraValue.value[nameKey] = '';
|
||||
continue;
|
||||
}
|
||||
formRef.value.setFields({
|
||||
[nameKey]: {
|
||||
|
||||
@@ -90,7 +90,7 @@
|
||||
padding: 16px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border-radius: 4px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
:deep(.arco-tabs-nav-tab-list) {
|
||||
|
||||
@@ -117,7 +117,7 @@
|
||||
padding: 16px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border-radius: 4px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
:deep(.arco-tabs-nav-tab-list) {
|
||||
|
||||
Reference in New Issue
Block a user