Skip to content

Instantly share code, notes, and snippets.

@uubulb

uubulb/nzrule.html

Last active August 26, 2024 15:40
Show Gist options
  • Save uubulb/58c324c09f4ab6fbeeb87cb64deb9262 to your computer and use it in GitHub Desktop.
Save uubulb/58c324c09f4ab6fbeeb87cb64deb9262 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
nzrule.html
<script>
let selectedType = '';
let rules = [];
const ruleData = {
monitorDuration: 3,
minValue: 0,
maxValue: 0,
serverMap: {},
cycleStart: '',
cycleStartTime: '',
cycleInterval: 0,
cycleUnit: '',
isCover: 0,
};
const visibleOptions = ['transfer_in_cycle', 'transfer_out_cycle', 'transfer_all_cycle'];
function insertElements(type) {
let elements = [];
let duration, minValue, maxValue, serverId, cycleStart, cycleStartTime, cycleInterval;
const typeSelect = type.querySelector('select');
const createBindElements = () => {
duration = createDuration();
updateDuration(duration);
minValue = createMinValue();
updateMinValue(minValue);
elements.push(minValue);
maxValue = createMaxValue();
updateMaxValue(maxValue);
elements.push(maxValue);
serverId = createServerId();
updateServerId(serverId);
elements.push(serverId);
cycleStart = createCycleStart();
updateCycleStart(cycleStart);
cycleStartTime = createCycleStartTime();
updateCycleStartTime(cycleStartTime);
cycleInterval = createCycleInterval();
updateCycleInterval(cycleInterval);
cycleUnit = createCycleUnit();
updateCycleUnit(cycleUnit);
};
const initializeElements = () => {
selectedType = typeSelect.value;
createBindElements();
if (visibleOptions.includes(selectedType)) {
elements.push(cycleStart);
elements.push(cycleStartTime);
elements.push(cycleInterval);
elements.push(cycleUnit);
} else {
elements.push(duration);
}
elements.forEach(element => {
type.insertAdjacentElement('afterend', element);
});
};
initializeElements();
typeSelect.addEventListener('change', () => {
flushCommons();
selectedType = typeSelect.value;
elements.forEach(element => {
if (element.parentNode) {
element.parentNode.removeChild(element);
}
});
elements.length = 0;
createBindElements();
if (visibleOptions.includes(selectedType)) {
elements.push(cycleStart);
elements.push(cycleStartTime);
elements.push(cycleInterval);
elements.push(cycleUnit);
} else {
elements.push(duration);
}
elements.forEach(element => {
type.insertAdjacentElement('afterend', element);
});
});
}
function generateRule() {
let rule = {};
rule.type = selectedType;
if (selectedType.value !== 'offline') {
rule.min = ruleData['minValue'];
rule.max = ruleData['maxValue'];
};
if (!visibleOptions.includes(selectedType)) {
rule.duration = ruleData['monitorDuration'];
} else {
rule.cycle_start = `${ruleData['cycleStart']}T${ruleData['cycleStartTime']}+08:00`;
rule.cycle_interval = ruleData['cycleInterval'];
rule.cycle_unit = ruleData['cycleUnit'];
}
rule.cover = ruleData['isCover'];
if (ruleData['serverMap'] && Object.keys(ruleData['serverMap']).length !== 0) {
rule.ignore = ruleData['serverMap'];
}
return rule;
}
document.addEventListener('DOMContentLoaded', () => {
if (window.location.pathname === '/notification') {
const rulesDiv = document.querySelector('#ruleForm .secret.field');
const textarea = rulesDiv.querySelector('textarea');
const buttonsDiv = document.createElement('div');
buttonsDiv.className = 'ui buttons';
const addButton = document.createElement('button');
addButton.className = 'ui icon button';
addButton.type = 'button';
const plus = document.createElement('i');
plus.className = 'plus icon';
addButton.appendChild(plus);
const flushButton = document.createElement('button');
flushButton.className = 'ui icon button';
flushButton.type = 'button';
const trash = document.createElement('i');
trash.className = 'trash icon';
flushButton.appendChild(trash);
const addAnotherButton = document.createElement('button');
addAnotherButton.className = 'ui icon button';
addAnotherButton.type = 'button';
const arrow = document.createElement('i');
arrow.className = 'arrow right icon';
addAnotherButton.appendChild(arrow);
buttonsDiv.appendChild(addButton);
buttonsDiv.appendChild(flushButton);
buttonsDiv.appendChild(addAnotherButton);
textarea.insertAdjacentElement('afterend', buttonsDiv);
bindButtons(textarea, addButton, flushButton, addAnotherButton);
const type = createTypeSelect();
rulesDiv.insertAdjacentElement('afterend', type);
insertElements(type);
const checkboxDiv = document.createElement('div');
checkboxDiv.className = 'field';
const secondaryDiv = document.createElement('div');
secondaryDiv.className = 'ui checkbox'
const isCoverInput = document.createElement('input');
isCoverInput.name = 'isCover';
isCoverInput.type = 'checkbox';
isCoverInput.tabIndex = 0;
secondaryDiv.appendChild(isCoverInput);
const checkboxLabel = document.createElement('label');
checkboxLabel.textContent = '白名单模式';
secondaryDiv.appendChild(checkboxLabel);
checkboxDiv.appendChild(secondaryDiv);
rulesDiv.insertAdjacentElement('afterend', checkboxDiv);
isCoverInput.addEventListener('change', () => {
if (isCoverInput.checked) {
ruleData['isCover'] = 1;
} else {
ruleData['isCover'] = 0;
}
});
}
});
function createTypeSelect() {
const type = createGenericDiv('类型');
const typeSelect = document.createElement('select');
typeSelect.name = 'type';
typeSelect.class = 'ui fluid dropdown';
const typeOptions = [
{ value: 'cpu', text: 'CPU使用率' },
{ value: 'gpu', text: 'GPU使用率' },
{ value: 'memory', text: '内存使用率' },
{ value: 'swap', text: '交换使用率' },
{ value: 'disk', text: '磁盘使用率' },
{ value: 'net_in_speed', text: '入站网速' },
{ value: 'net_out_speed', text: '出站网速' },
{ value: 'net_all_speed', text: '双向网速' },
{ value: 'transfer_in', text: '入站流量' },
{ value: 'transfer_out', text: '出站流量' },
{ value: 'transfer_all', text: '双向流量' },
{ value: 'offline', text: '离线监控' },
{ value: 'load1', text: '1分钟内负载' },
{ value: 'load5', text: '5分钟内负载' },
{ value: 'load15', text: '15分钟内负载' },
{ value: 'process_count', text: '进程数' },
{ value: 'tcp_conn_count', text: 'TCP连接数' },
{ value: 'udp_conn_count', text: 'UDP连接数' },
{ value: 'transfer_in_cycle', text: '周期内的入站流量' },
{ value: 'transfer_out_cycle', text: '周期内的出站流量' },
{ value: 'transfer_all_cycle', text: '周期内双向流量的和' },
{ value: 'temperature_max', text: '最高温度' },
];
typeOptions.forEach(optionData => {
const option = document.createElement('option');
option.value = optionData.value;
option.textContent = optionData.text;
typeSelect.appendChild(option);
});
type.appendChild(typeSelect);
return type;
}
function createDuration() {
const duration = createGenericDiv('持续监控时间（秒）');
const durationInput = createGenericInput('text', 'duration', '', true);
duration.appendChild(durationInput);
return duration;
}
function createMinValue() {
const minValue = createGenericDiv('下限值');
const minValueInput = createGenericInput('text', 'min', '0', true)
minValue.appendChild(minValueInput);
return minValue;
}
function createMaxValue() {
const maxValue = createGenericDiv('上限值');
const maxValueInput = createGenericInput('text', 'max', '0', true)
maxValue.appendChild(maxValueInput);
return maxValue;
}
function createServerId() {
const serverId = createGenericDiv('指定的服务器列表（逗号分隔）');
const serverIdInput = createGenericInput('text', 'server_id', '', false);
serverId.appendChild(serverIdInput);
return serverId;
}
function createCycleStart() {
const cycleStart = createGenericDiv('统计周期开始日期');
const cycleStartInput = createGenericInput('date', 'cycle_start', '', true);
cycleStart.appendChild(cycleStartInput);
return cycleStart;
}
function createCycleStartTime() {
const cycleStartTime = createGenericDiv('统计周期开始时间（东八区）');
const cycleStartTimeInput = createGenericInput('text', 'cycle_start_time', '00:00:00', true);
cycleStartTime.appendChild(cycleStartTimeInput);
return cycleStartTime;
}
function createCycleInterval() {
const cycleInterval = createGenericDiv('统计周期单位的数量');
const cycleIntervalInput = createGenericInput('text', 'cycle_interval', '', true);
cycleInterval.appendChild(cycleIntervalInput);
return cycleInterval;
}
function createCycleUnit() {
const cycleUnit = createGenericDiv('统计周期单位')
const cycleUnitSelect = document.createElement('select');
cycleUnitSelect.name = 'type';
cycleUnitSelect.class = 'ui fluid dropdown';
const unitOptions = [
{ value: 'hour', text: '小时' },
{ value: 'day', text: '天' },
{ value: 'week', text: '周' },
{ value: 'month', text: '月' },
{ value: 'year', text: '年' },
];
unitOptions.forEach(optionData => {
const option = document.createElement('option');
option.value = optionData.value;
option.textContent = optionData.text;
cycleUnitSelect.appendChild(option);
});
cycleUnit.appendChild(cycleUnitSelect);
return cycleUnit;
}
function createGenericDiv(text) {
const div = document.createElement('div');
div.className = 'field';
const label = document.createElement('label');
label.textContent = text
div.appendChild(label);
return div;
}
function createGenericInput(type, name, placeholder, required) {
const input = document.createElement('input');
input.type = type;
input.name = name;
input.placeholder = placeholder;
input.required = required;
return input;
}
function updateDuration(element) {
createInputListener('monitorDuration', element, true);
}
function updateMinValue(element) {
createInputListener('minValue', element, true);
}
function updateMaxValue(element) {
createInputListener('maxValue', element, true);
}
function updateServerId(element) {
const inputElement = element.querySelector('input');
inputElement.addEventListener('input', () => {
let map = {};
arr = splitServerID(inputElement.value);
arr.forEach(key => {
map[key] = true;
});
ruleData['serverMap'] = map;
})
}
function updateCycleStart(element) {
createInputListener('cycleStart', element, false);
}
function updateCycleStartTime(element) {
createInputListener('cycleStartTime', element, false);
}
function updateCycleInterval(element) {
createInputListener('cycleInterval', element, true);
}
function updateCycleUnit(element) {
const cycleUnitSelect = element.querySelector('select');
cycleUnitSelect.addEventListener('change', () => {
ruleData['cycleUnit'] = element.value;
});
}
function createInputListener(key, element, isNumber) {
const subElement = element.querySelector('input');
subElement.addEventListener('input', () => {
if (!isNumber) {
ruleData[key] = subElement.value;
} else {
ruleData[key] = subElement.value ? parseInt(subElement.value, 10) : 0;
}
});
}
function bindButtons(textarea, add, flush, addAnother) {
add.addEventListener('click', () => {
rules = []
const rule = generateRule();
rules.push(rule);
ruleStr = JSON.stringify(rules);
textarea.value = ruleStr;
});
flush.addEventListener('click', () => {
rules = [];
ruleStr = JSON.stringify(rules);
textarea.value = ruleStr;
});
addAnother.addEventListener('click', () => {
const rule = generateRule();
rules.push(rule);
ruleStr = JSON.stringify(rules);
textarea.value = ruleStr;
});
}
function splitServerID(id) {
let list = [];
if (id !== '') {
list = id.split(",")
}
return list;
}
function flushCommons() {
ruleData['minValue'] = 0;
ruleData['maxValue'] = 0;
ruleData['serverMap'] = {};
ruleData['monitorDuration'] = 0;
}
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment