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>