{% extends 'base.html' %}
{% load static %}

{% block Application_CSS_File %}
<link rel="stylesheet" type="text/css" href="{% static 'css/ServiceManagement.css' %}">
{% endblock %}

{% block Application_JS_File %}
<script src="{% static 'js/ServiceManagement.Click.js' %}"></script>
<script src="{% static 'js/ServiceManagement.Blur.js' %}"></script>
<script src="{% static 'js/ServiceManagement.h.js' %}"></script>
<script src="{% static 'js/ServiceManagement.jpp.js' %}"></script>
<script>
    document.addEventListener("DOMContentLoaded", function() {
        ServiceManagement.prototype._Startup_("{{ form|safe }}");
    });
</script>
{% endblock %}

<!-- 上方內容 -->
{% block Main_Top-General %}
{% endblock %}

<!-- 當前網頁路徑 -->
{% block Main_Top-Path %}
{% endblock %}

<!-- 左方列表-->
{% block Main_Left-List %}
	{% include 'LeftList_SystemSetting.html' %}
{% endblock %}

<!-- 中央內容 -->
{% block Main_Center-Content %}
	<div class="FormTitle">{{ lang.ServiceManagement.DatabaseTitle }}</div>
    <div class="Form" style="width:100%">
        <!--Database-->
        <div class="Row">
            <div class="LeftColumn" style="height:50px;">{{ lang.ServiceManagement.Database }}</div>
            <div class="RightColumn" style="width:70%">
                <label class="Radio">
                    <input type="radio" name="Database" value="InfluxDB" checked>
                    InfluxDB
                </label>
                <label class="Radio">
                    <input type="radio" name="Database" value="MariaDB">
                    MariaDB
                </label>
                <label class="Radio">
                    <input type="radio" name="Database" value="MongoDB">
                    MongoDB
                </label>
            </div>
        </div>

        <!--儲存按鈕-->
        <div class="Row">
            <div class="LeftColumn" style="height:50px;"></div>
            <div class="RightColumn" style="width:70%">
                <button class="Button" style="float: left;" onclick="SaveDatabaseButton_click(this)">{{ lang.ServiceManagement.SaveButton }}</button>
                <div class="Message" style="color:#00BB00">{{ lang.ServiceManagement.SaveSuccess }}</div>
                <div class="Message">{{ lang.ServiceManagement.SaveFailed }}</div>
            </div>
        </div>
    </div>

    <!--RAM 策略 (對應 memory_protection.py 的 config.json，涵蓋策略引擎目前
        支援的所有使用者可調條件：全域設定、MQTT 通知、每個服務的
        RAM/CPU/Swap/Disk 門檻與 never_stop)-->
    <div class="FormTitle">{{ lang.ServiceManagement.RamPolicyTitle }}</div>
    <div class="RamPolicySection">
    <div class="Form RamPolicyForm" style="width:100%">
        <!--啟用-->
        <div class="Row">
            <div class="LeftColumn" style="height:50px;">{{ lang.ServiceManagement.RamPolicyEnable }}</div>
            <div class="RightColumn" style="width:70%">
                <label class="Checkbox">
                    <input type="checkbox" class="RamPolicyEnable" checked>
                    {{ lang.ServiceManagement.Enable }}
                </label>
            </div>
        </div>

        <!--檢查間隔-->
        <div class="Row">
            <div class="LeftColumn" style="height:50px;">{{ lang.ServiceManagement.CheckInterval }}</div>
            <div class="RightColumn" style="width:70%">
                <input class="Text CheckInterval RamPolicyNumber" type="number" data-min="1" min="1" step="1" style="float: left; width: 80px;" onblur="main_CheckRamPolicyField_blur(this)" value="5">
                <span style="float:left; margin-left:8px;">{{ lang.ServiceManagement.Seconds }}</span>
                <div class="Message">{{ lang.ServiceManagement.InvalidNumber }}</div>
            </div>
        </div>

        <!--全域回復門檻-->
        <div class="Row">
            <div class="LeftColumn" style="height:50px;">{{ lang.ServiceManagement.RecoveryThreshold }}</div>
            <div class="RightColumn" style="width:70%">
                <input class="Text RecoveryThreshold RamPolicyNumber" type="number" data-min="0" data-max="100" min="0" max="100" step="0.1" style="float: left; width: 80px;" onblur="main_CheckRamPolicyField_blur(this)" value="80">
                <span style="float:left; margin-left:8px;">%</span>
                <div class="Message">{{ lang.ServiceManagement.InvalidPercentage }}</div>
            </div>
        </div>

        <!--持續超標秒數-->
        <div class="Row">
            <div class="LeftColumn" style="height:50px;">{{ lang.ServiceManagement.SustainSeconds }}</div>
            <div class="RightColumn" style="width:70%">
                <input class="Text SustainSeconds RamPolicyNumber" type="number" data-min="0" min="0" step="1" style="float: left; width: 80px;" onblur="main_CheckRamPolicyField_blur(this)" value="30">
                <span style="float:left; margin-left:8px;">{{ lang.ServiceManagement.Seconds }}</span>
                <div class="Message">{{ lang.ServiceManagement.InvalidNumber }}</div>
            </div>
        </div>

        <!--磁碟監控路徑-->
        <div class="Row">
            <div class="LeftColumn" style="height:50px;">{{ lang.ServiceManagement.DiskPath }}</div>
            <div class="RightColumn" style="width:70%">
                <input class="Text DiskPath RamPolicyText" type="text" style="float: left; width: 200px;" onblur="main_CheckRamPolicyText_blur(this)" value="/">
                <div class="Message">{{ lang.ServiceManagement.RequiredField }}</div>
            </div>
        </div>

        <!--Dry Run-->
        <div class="Row">
            <div class="LeftColumn" style="height:50px;">{{ lang.ServiceManagement.DryRun }}</div>
            <div class="RightColumn" style="width:70%">
                <label class="Checkbox">
                    <input type="checkbox" class="DryRun">
                    {{ lang.ServiceManagement.DryRunHint }}
                </label>
            </div>
        </div>

        <!--MQTT 通知設定-->
        <div class="Row">
            <div class="LeftColumn SectionDivider" style="height:30px;">{{ lang.ServiceManagement.MqttSectionTitle }}</div>
        </div>

        <div class="Row">
            <div class="LeftColumn" style="height:50px;">{{ lang.ServiceManagement.MqttEnable }}</div>
            <div class="RightColumn" style="width:70%">
                <label class="Checkbox">
                    <input type="checkbox" class="MqttEnable">
                    {{ lang.ServiceManagement.Enable }}
                </label>
            </div>
        </div>

        <div class="Row">
            <div class="LeftColumn" style="height:50px;">{{ lang.ServiceManagement.MqttHost }}</div>
            <div class="RightColumn" style="width:70%">
                <input class="Text MqttHost RamPolicyText" type="text" style="float: left; width: 200px;" onblur="main_CheckRamPolicyText_blur(this)" value="127.0.0.1">
                <div class="Message">{{ lang.ServiceManagement.RequiredField }}</div>
            </div>
        </div>

        <div class="Row">
            <div class="LeftColumn" style="height:50px;">{{ lang.ServiceManagement.MqttPort }}</div>
            <div class="RightColumn" style="width:70%">
                <input class="Text MqttPort RamPolicyNumber" type="number" data-min="1" data-max="65535" min="1" max="65535" step="1" style="float: left; width: 80px;" onblur="main_CheckRamPolicyField_blur(this)" value="1883">
                <div class="Message">{{ lang.ServiceManagement.InvalidNumber }}</div>
            </div>
        </div>

        <div class="Row">
            <div class="LeftColumn" style="height:50px;">{{ lang.ServiceManagement.MqttTopic }}</div>
            <div class="RightColumn" style="width:70%">
                <input class="Text MqttTopic RamPolicyText" type="text" style="float: left; width: 260px;" onblur="main_CheckRamPolicyText_blur(this)" value="brk/memory_protection/event">
                <div class="Message">{{ lang.ServiceManagement.RequiredField }}</div>
            </div>
        </div>

        <div class="Row">
            <div class="LeftColumn" style="height:50px;">{{ lang.ServiceManagement.MqttUsername }}</div>
            <div class="RightColumn" style="width:70%">
                <input class="Text MqttUsername" type="text" style="float: left; width: 200px;" value="">
            </div>
        </div>

        <div class="Row">
            <div class="LeftColumn" style="height:50px;">{{ lang.ServiceManagement.MqttPassword }}</div>
            <div class="RightColumn" style="width:70%">
                <input class="Text MqttPassword" type="password" autocomplete="new-password" style="float: left; width: 200px;" value="">
            </div>
        </div>

        <!--各服務門檻設定-->
        <div class="Row">
            <div class="LeftColumn SectionDivider" style="height:30px;">{{ lang.ServiceManagement.ServiceThresholdSectionTitle }}</div>
        </div>
    </div>

    <div class="RamPolicyGridWrap">
                <div class="RamPolicyGrid">
                    <div class="RamPolicyGridRow RamPolicyGridHeaderRow">
                        <div class="RamPolicyGridCell RamPolicyGridHeader">{{ lang.ServiceManagement.ServiceName }}</div>
                        <div class="RamPolicyGridCell RamPolicyGridHeader" title="{{ lang.ServiceManagement.RamStopThreshold }}">{{ lang.ServiceManagement.RamStopThresholdShort }}</div>
                        <div class="RamPolicyGridCell RamPolicyGridHeader">{{ lang.ServiceManagement.AutoRestart }}</div>
                        <div class="RamPolicyGridCell RamPolicyGridHeader" title="{{ lang.ServiceManagement.RecoveryThresholdOverride }}">{{ lang.ServiceManagement.RecoveryThresholdOverrideShort }}</div>
                        <div class="RamPolicyGridCell RamPolicyGridHeader" title="{{ lang.ServiceManagement.CpuStopThreshold }}">{{ lang.ServiceManagement.CpuStopThresholdShort }}</div>
                        <div class="RamPolicyGridCell RamPolicyGridHeader" title="{{ lang.ServiceManagement.SwapStopThreshold }}">{{ lang.ServiceManagement.SwapStopThresholdShort }}</div>
                        <div class="RamPolicyGridCell RamPolicyGridHeader" title="{{ lang.ServiceManagement.DiskStopThreshold }}">{{ lang.ServiceManagement.DiskStopThresholdShort }}</div>
                        <div class="RamPolicyGridCell RamPolicyGridHeader">{{ lang.ServiceManagement.NeverStop }}</div>
                    </div>

                    <div class="RamPolicyGridRow RamPolicyServiceRow" data-service-name="grafana-server">
                        <div class="RamPolicyGridCell">Grafana</div>
                        <div class="RamPolicyGridCell"><input class="StopThreshold RamPolicyNumber" type="number" data-min="0" data-max="100" min="0" max="100" step="0.1" onblur="main_CheckRamPolicyField_blur(this)" value="90"></div>
                        <div class="RamPolicyGridCell"><input type="checkbox" class="AutoRestart" checked></div>
                        <div class="RamPolicyGridCell"><input class="RecoveryThresholdOverride RamPolicyNumber" type="number" data-min="0" data-max="100" data-optional="true" min="0" max="100" step="0.1" onblur="main_CheckRamPolicyField_blur(this)" value=""></div>
                        <div class="RamPolicyGridCell"><input class="CpuStopThreshold RamPolicyNumber" type="number" data-min="0" data-max="100" data-optional="true" min="0" max="100" step="0.1" onblur="main_CheckRamPolicyField_blur(this)" value=""></div>
                        <div class="RamPolicyGridCell"><input class="SwapStopThreshold RamPolicyNumber" type="number" data-min="0" data-max="100" data-optional="true" min="0" max="100" step="0.1" onblur="main_CheckRamPolicyField_blur(this)" value=""></div>
                        <div class="RamPolicyGridCell"><input class="DiskStopThreshold RamPolicyNumber" type="number" data-min="0" data-max="100" data-optional="true" min="0" max="100" step="0.1" onblur="main_CheckRamPolicyField_blur(this)" value=""></div>
                        <div class="RamPolicyGridCell"><input type="checkbox" class="NeverStop"></div>
                    </div>

                    <div class="RamPolicyGridRow RamPolicyServiceRow" data-service-name="influxdb">
                        <div class="RamPolicyGridCell">InfluxDB</div>
                        <div class="RamPolicyGridCell"><input class="StopThreshold RamPolicyNumber" type="number" data-min="0" data-max="100" min="0" max="100" step="0.1" onblur="main_CheckRamPolicyField_blur(this)" value="92"></div>
                        <div class="RamPolicyGridCell"><input type="checkbox" class="AutoRestart" checked></div>
                        <div class="RamPolicyGridCell"><input class="RecoveryThresholdOverride RamPolicyNumber" type="number" data-min="0" data-max="100" data-optional="true" min="0" max="100" step="0.1" onblur="main_CheckRamPolicyField_blur(this)" value=""></div>
                        <div class="RamPolicyGridCell"><input class="CpuStopThreshold RamPolicyNumber" type="number" data-min="0" data-max="100" data-optional="true" min="0" max="100" step="0.1" onblur="main_CheckRamPolicyField_blur(this)" value=""></div>
                        <div class="RamPolicyGridCell"><input class="SwapStopThreshold RamPolicyNumber" type="number" data-min="0" data-max="100" data-optional="true" min="0" max="100" step="0.1" onblur="main_CheckRamPolicyField_blur(this)" value=""></div>
                        <div class="RamPolicyGridCell"><input class="DiskStopThreshold RamPolicyNumber" type="number" data-min="0" data-max="100" data-optional="true" min="0" max="100" step="0.1" onblur="main_CheckRamPolicyField_blur(this)" value=""></div>
                        <div class="RamPolicyGridCell"><input type="checkbox" class="NeverStop"></div>
                    </div>

                    <div class="RamPolicyGridRow RamPolicyServiceRow" data-service-name="mongod">
                        <div class="RamPolicyGridCell">MongoDB</div>
                        <div class="RamPolicyGridCell"><input class="StopThreshold RamPolicyNumber" type="number" data-min="0" data-max="100" min="0" max="100" step="0.1" onblur="main_CheckRamPolicyField_blur(this)" value="94"></div>
                        <div class="RamPolicyGridCell"><input type="checkbox" class="AutoRestart" checked></div>
                        <div class="RamPolicyGridCell"><input class="RecoveryThresholdOverride RamPolicyNumber" type="number" data-min="0" data-max="100" data-optional="true" min="0" max="100" step="0.1" onblur="main_CheckRamPolicyField_blur(this)" value=""></div>
                        <div class="RamPolicyGridCell"><input class="CpuStopThreshold RamPolicyNumber" type="number" data-min="0" data-max="100" data-optional="true" min="0" max="100" step="0.1" onblur="main_CheckRamPolicyField_blur(this)" value=""></div>
                        <div class="RamPolicyGridCell"><input class="SwapStopThreshold RamPolicyNumber" type="number" data-min="0" data-max="100" data-optional="true" min="0" max="100" step="0.1" onblur="main_CheckRamPolicyField_blur(this)" value=""></div>
                        <div class="RamPolicyGridCell"><input class="DiskStopThreshold RamPolicyNumber" type="number" data-min="0" data-max="100" data-optional="true" min="0" max="100" step="0.1" onblur="main_CheckRamPolicyField_blur(this)" value=""></div>
                        <div class="RamPolicyGridCell"><input type="checkbox" class="NeverStop"></div>
                    </div>

                    <div class="RamPolicyGridRow RamPolicyServiceRow" data-service-name="mariadb">
                        <div class="RamPolicyGridCell">MariaDB</div>
                        <div class="RamPolicyGridCell"><input class="StopThreshold RamPolicyNumber" type="number" data-min="0" data-max="100" min="0" max="100" step="0.1" onblur="main_CheckRamPolicyField_blur(this)" value="96"></div>
                        <div class="RamPolicyGridCell"><input type="checkbox" class="AutoRestart" checked></div>
                        <div class="RamPolicyGridCell"><input class="RecoveryThresholdOverride RamPolicyNumber" type="number" data-min="0" data-max="100" data-optional="true" min="0" max="100" step="0.1" onblur="main_CheckRamPolicyField_blur(this)" value=""></div>
                        <div class="RamPolicyGridCell"><input class="CpuStopThreshold RamPolicyNumber" type="number" data-min="0" data-max="100" data-optional="true" min="0" max="100" step="0.1" onblur="main_CheckRamPolicyField_blur(this)" value=""></div>
                        <div class="RamPolicyGridCell"><input class="SwapStopThreshold RamPolicyNumber" type="number" data-min="0" data-max="100" data-optional="true" min="0" max="100" step="0.1" onblur="main_CheckRamPolicyField_blur(this)" value=""></div>
                        <div class="RamPolicyGridCell"><input class="DiskStopThreshold RamPolicyNumber" type="number" data-min="0" data-max="100" data-optional="true" min="0" max="100" step="0.1" onblur="main_CheckRamPolicyField_blur(this)" value=""></div>
                        <div class="RamPolicyGridCell"><input type="checkbox" class="NeverStop"></div>
                    </div>

                    <div class="RamPolicyGridRow RamPolicyServiceRow" data-service-name="emqx">
                        <div class="RamPolicyGridCell">EMQX</div>
                        <div class="RamPolicyGridCell"><input class="StopThreshold RamPolicyNumber" type="number" data-min="0" data-max="100" min="0" max="100" step="0.1" onblur="main_CheckRamPolicyField_blur(this)" value="98"></div>
                        <div class="RamPolicyGridCell"><input type="checkbox" class="AutoRestart" checked></div>
                        <div class="RamPolicyGridCell"><input class="RecoveryThresholdOverride RamPolicyNumber" type="number" data-min="0" data-max="100" data-optional="true" min="0" max="100" step="0.1" onblur="main_CheckRamPolicyField_blur(this)" value=""></div>
                        <div class="RamPolicyGridCell"><input class="CpuStopThreshold RamPolicyNumber" type="number" data-min="0" data-max="100" data-optional="true" min="0" max="100" step="0.1" onblur="main_CheckRamPolicyField_blur(this)" value=""></div>
                        <div class="RamPolicyGridCell"><input class="SwapStopThreshold RamPolicyNumber" type="number" data-min="0" data-max="100" data-optional="true" min="0" max="100" step="0.1" onblur="main_CheckRamPolicyField_blur(this)" value=""></div>
                        <div class="RamPolicyGridCell"><input class="DiskStopThreshold RamPolicyNumber" type="number" data-min="0" data-max="100" data-optional="true" min="0" max="100" step="0.1" onblur="main_CheckRamPolicyField_blur(this)" value=""></div>
                        <div class="RamPolicyGridCell"><input type="checkbox" class="NeverStop"></div>
                    </div>
                </div>
        <div class="Message">{{ lang.ServiceManagement.TableHasInvalidField }}</div>
    </div>

    <!--儲存按鈕-->
    <div class="Form RamPolicyForm" style="width:100%">
        <div class="Row RamPolicySaveRow">
            <div class="LeftColumn" style="height:50px;"></div>
            <div class="RightColumn" style="width:70%">
                <button class="Button" style="float: left;" onclick="SaveRamPolicyButton_click(this)">{{ lang.ServiceManagement.SaveButton }}</button>
                <div class="Message" style="color:#00BB00">{{ lang.ServiceManagement.SaveSuccess }}</div>
                <div class="Message">{{ lang.ServiceManagement.SaveFailed }}</div>
            </div>
        </div>
    </div>
    </div>

    <!--
        Node-RED (nodered.service) 一律由 memory_protection.py 內建
        NEVER_STOP_SERVICES 保護，不受任何門檻設定影響，所以這個 UI
        不提供 Node-RED 的門檻設定，避免使用者誤以為調這裡可以影響
        Node-RED 的保護行為。

        log_path / status_path 這兩個是 memory_protection.py 自己讀寫
        log 檔與狀態檔的路徑，屬於部署層級設定，不開放透過這個 UI 調整，
        避免使用者填錯路徑導致 daemon 自己的 log/狀態檔寫不出來、連帶
        讓這個 Web UI 也讀不到最新狀態。
    -->
{% endblock %}

<!-- 下方資訊-->
{% block Main_Bottom-Information %}
{% endblock %}