manager/orion-visor
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

🔨 优化标签查询逻辑.

Browse Source
This commit is contained in:
lijiahangmax
2025-10-07 14:26:40 +08:00
parent 25082b9ea1
commit 2103698417
17 changed files with 296 additions and 223 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
orion-visor-ui/src/api/monitor/alarm-rule.ts
View File

@@ -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 } });
}
/**

7
orion-visor-ui/src/api/monitor/monitor-host.ts
View File

@@ -177,6 +177,13 @@ export function getMonitorHostPage(request: MonitorHostQueryRequest) {
return axios.post<DataGrid<MonitorHostQueryResponse>>('/monitor/monitor-host/query', request);
}
/**
* 查询监控告警标签
*/
export function getMonitorHostPolicyRuleTags(policyId: number, measurement: string = '') {
return axios.get<Array<string>>('/monitor/monitor-host/host-tags', { params: { policyId, measurement } });
}
/**
* 更新监控主机
*/

131
orion-visor-ui/src/views/monitor/alarm-rule/components/alarm-rule-form-drawer.vue
View File

@@ -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>
@@ -44,6 +45,7 @@
class="tag-values"
style="width: 260px"
:max-tag-count="2"
:options="measurementTags[measurement] || []"
placeholder="标签值"
tag-nowrap
multiple
@@ -72,7 +74,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 +192,18 @@
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 { isBoolean } from '@/utils/is';
import { Message } from '@arco-design/web-vue';
import { useDictStore, useCacheStore } from '@/store';
import { getMonitorHostPolicyRuleTags } from '@/api/monitor/monitor-host';
import MonitorMetricsSelector from '@/components/monitor/metrics/selector/index.vue';
const emits = defineEmits(['added', 'updated']);
@@ -214,6 +218,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 +230,7 @@
tags: undefined,
level: DefaultLevel,
ruleSwitch: 1,
allEffect: 0,
allEffect: 1,
triggerCondition: DefaultCondition,
threshold: undefined,
consecutiveCount: 1,
@@ -232,18 +239,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 +301,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 +310,34 @@
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;
}
// 加载标签
getMonitorHostPolicyRuleTags(formModel.value.policyId as number, measurement.value).then(({ data }) => {
measurementTags.value[measurement.value as any] = data;
});
};
// 确定
const handlerOk = async () => {
const handleOk = async () => {
setLoading(true);
try {
// 验证参数
@@ -301,21 +345,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 +383,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,18 +399,23 @@
// 关闭
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;
}