openpanel/templates/admini/databases/edit_mysql_config.html

<!-- edit_mysql_config.html -->
{% extends 'base.html' %}

{% block content %}

<script type="module">
  // Function to attach event listeners
  function attachEventListeners() {
    // Select the form and submit button
    const form = document.querySelector('form');
    const submitButton = document.querySelector('button[type="submit"]');

    // Attach the click event listener to the submit button
    submitButton.addEventListener('click', async (ev) => {
      ev.preventDefault();

      const action = submitButton.dataset.action;

      const formData = new FormData(form);

      const toastMessage = `{{ _("Saving and restarting MySQL to apply changes...") }}`;
      const toast = toaster({
        body: toastMessage,
        className: `border-0 text-white bg-primary`,
      });

      try {
        const response = await fetch(form.action, {
          method: 'POST',
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded',
          },
          body: new URLSearchParams(formData).toString(),
        });

        // get the response HTML content
        const resultHtml = await response.text();

        // Parse the HTML string to extract the content of the specific element
        const parser = new DOMParser();
        const doc = parser.parseFromString(resultHtml, 'text/html');
        const mainScopeContent = doc.getElementById("main-scope")?.innerHTML;

        // Replace the content of the element with the ID "main-scope"
        const mainScopeElement = document.getElementById("main-scope");
        if (mainScopeElement) {
          mainScopeElement.innerHTML = mainScopeContent || '';
        }

        // Reattach event listeners after updating content
        attachEventListeners();
      } catch (error) {
        console.error('Error:', error);
      }
    });
  }

  // Attach event listeners initially
  attachEventListeners();
</script>




<div class="row">



<p>{{_('This tool allows you to make changes to your MySQL configuration. Modifications made here will prompt a MySQL service restart.')}} </p>


<div class="col-md-6 col-xl-8">
        <div class="card card-one">
          <div class="card-header">
<h6 class="card-title">{{_('MySQL Configuration Settings')}}</h6>
              <nav class="nav nav-icon nav-icon-sm ms-auto">
                <a href="#" onclick='location.reload(true); return false;' class="nav-link"><i class="bi bi-arrow-clockwise"></i></a>
              </nav>

          </div><!-- card-header -->
          <div class="card-body">
<div class="gap-2 mt-3 mt-md-0">

<form method="post" action="{{ url_for('edit_mysql_config') }}">
<div class="container">
    <div class="row">
        {% for key in default_keys %}
<div class="col-6">


<div class="form-group">
<label for="{{ key }}" class="form-label">{{ key }}</label>
<div class="form-field">
<div class="row" id="{{ key }}">
<input type="text" class="form-control mb-2" name="{{ key }}" value="{{ current_config.get(key, '') }}">
</div>
</div>
</div></div>
        {% endfor %}
    
</div></div>
</div>


          </div><!-- card-body -->
   </div>




</div>

<div class="col-md-4 col-xl-4">
          <div class="card card-one">
            <div class="card-header">
            <h6 class="card-title">{{_('Recommended values:')}}</h6>
          </div>
            <div class="card-body">
              <div class="row mt-2 mb-2">
<label class="card-title fw-medium mb-1">max_allowed_packet = 268435456</label>
<label class="card-title fw-medium mb-1">max_connect_errors = 100</label>
<label class="card-title fw-medium mb-1">max_connections = 100</label>
<label class="card-title fw-medium mb-1">open_files_limit = 52000</label>
<label class="card-title fw-medium mb-1">performance_schema = 0</label>
<label class="card-title fw-medium mb-1">sql_mode = ERROR_FOR_DIVISION_BY_ZERO</label>
<label class="card-title fw-medium mb-1">thread_cache_size = 256</label>
<label class="card-title fw-medium mb-1">interactive_timeout = 60</label>
<label class="card-title fw-medium mb-1">wait_timeout = 60</label>
<label class="card-title fw-medium mb-1">log_output = FILE</label>
<label class="card-title fw-medium mb-1">log_error = /var/log/mysqld.log</label>
<label class="card-title fw-medium mb-1">log_error_verbosity = 3</label>
<label class="card-title fw-medium mb-1">general_log = 0</label>
<label class="card-title fw-medium mb-1">general_log_file = /var/lib/mysql/{{current_username}}.log</label>
<label class="card-title fw-medium mb-1">long_query_time = 10</label>
<label class="card-title fw-medium mb-1">slow_query_log = 0</label>
<label class="card-title fw-medium mb-1">slow_query_log_file = /var/lib/mysql/{{current_username}}-slow.log</label>
<label class="card-title fw-medium mb-1">join_buffer_size = 1M</label>
<label class="card-title fw-medium mb-1">key_buffer_size = 71M</label>
<label class="card-title fw-medium mb-1">read_buffer_size = 131072</label>
<label class="card-title fw-medium mb-1">read_rnd_buffer_size = 262144</label>
<label class="card-title fw-medium mb-1">sort_buffer_size = 262144</label>
<label class="card-title fw-medium mb-1">innodb_log_buffer_size = 16777216</label>
<label class="card-title fw-medium mb-1">innodb_log_file_size = 16M</label>
<label class="card-title fw-medium mb-1">innodb_sort_buffer_size = 1048576</label>
<label class="card-title fw-medium mb-1">innodb_buffer_pool_chunk_size = 134217728</label>
<label class="card-title fw-medium mb-1">innodb_buffer_pool_instances = 22</label>
<label class="card-title fw-medium mb-1">innodb_buffer_pool_size = 134217728</label>
<label class="card-title fw-medium mb-1">max_heap_table_size = 1286M</label>
<label class="card-title fw-medium mb-1">tmp_table_size = 1286M</label>
              </div>

            </div><!-- card-body -->
          </div><!-- card-one -->
        </div>


</div> 




</section>
          <footer class="main-footer btn-toolbar" role="toolbar">

<div class="btn-group" role="group" aria-label="Status">
<label>{{ _('MySQL status:') }}</label><b> {% if mysql_status_display == 'ON' %} {{ _('Enabled') }}{% elif mysql_status_display == 'OFF' %} {{ _('Disabled') }}{% else %} {{ _('Unknown') }}{% endif %}</b>   
</div>

<div class="ms-auto" role="group" aria-label="Actions">
<button type="submit" class="btn btn-primary">{{_('Save Changes')}}</button></form>
</div>
</footer>













{% endblock %}