openpanel/templates/admini/files/inodes.html

{% extends 'base.html' %}

{% block content %}


<div class="row g-3">
        
<p>{{_('An inode is a data structure that keeps the information about a file on your hosting account. The number of inodes indicates the number of files and folders you have. This includes everything on your account, emails, files, folders, and anything you store on the server.')}}</p>
        

        <div class="col-xl-7">
          <div class="card card-one">
            <div class="card-header">
              <h6 class="card-title">{{_('Inodes usage per directory')}}</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">
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

<canvas id="folderChart" width="400" height="200"></canvas>

            </div><!-- card-body -->
          </div><!-- card -->
        </div><!-- col -->
        <div class="col-sm-12 col-xl-5">
          <div class="card card-one">
            <div class="card-header">
              <h6 class="card-title">{{_('Browse Directories')}}</h6>
              <nav class="nav nav-icon nav-icon-sm ms-auto">
                              <a href="/inodes-explorer" class="nav-link"><i class="bi bi-house-fill"></i></a>

</nav>
            </div><!-- card-header -->
            <div class="card-body">

  <table id="folders_to_navigate" class="table table-hover table-striped">
    <thead>
      <tr>
        <th>{{_('Directory')}}</th>
        <th>{{_('Inodes')}}</th>
      </tr>
    </thead>
    <tbody>
      {% if request.path != '/inodes-explorer/' %}
        <tr>
          <td><a href="#" id="goUp"><i class="bi bi-arrow-90deg-up"></i> {{_('Up One Level')}}</a></td>
          <td></td>
        </tr>
      {% endif %}
      {% for line in total_inodes_output.split('\n') %}
      {% if line.strip() %}
        <tr>
            {% set parts = line.split() %}
            {% set count = parts[0] %}
            {% set directory = parts[1:]|join(' ') %}
          <td class="file-name"><a href="#" onclick="openDirectory('{{ directory }}'); return false;"><i style="color: orange;" class="ri-folder-2-fill"></i> {{ directory }}</a>
</td>
          <td>{{ count }}</td>
        </tr>
        {% endif %}
        {% endfor %}
    </tbody>
  </table>      
            </div><!-- card-body -->
          </div><!-- card -->
        </div><!-- col -->
      </div>



<script>
async function openDirectory(directory) {
  // Display a toast message indicating that disk usage is being calculated for the specified directory
  const toastMessage = `{{ _("Calculating inodes count for") }} ` + directory + `..`;
  const toast = toaster({
    body: toastMessage,
    className: `border-0 text-white bg-primary`,
  });

  // Construct the new URL by appending the directory to the current URL
  var currentUrl = window.location.href;
  var separator = currentUrl.endsWith('/') ? '' : '/';
  var newUrl = currentUrl + separator + directory;

  try {
    // Send a GET request to the server using the fetch API
    const response = await fetch(newUrl);

    // 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 || '';
    }
    
    //add to url wothout reloading!
    history.pushState({}, '', newUrl);

    // Initialize the chart after updating the content and URL
    initializeChart();

  } catch (error) {
    // Handle errors if the fetch request fails
    console.error('Error fetching data:', error);
  }
}

</script>

<script>
// Function to extract data from the table
function extractDataFromTable() {
  const data = [];
  const tableRows = document.querySelectorAll("#folders_to_navigate tbody tr");

  tableRows.forEach((row) => {
    const columns = row.querySelectorAll("td");
    if (columns.length === 2) {
      const directory = columns[0].textContent.trim();
      const inodes = parseInt(columns[1].textContent);

      // Exclude rows with "Up One Level"
      if (directory !== "{{_('Up One Level')}}") {
        data.push({ directory, inodes });
      }
    }
  });

  return data;
}

// Function to create a chart
function createChart(data) {
  const labels = data.map((entry) => entry.directory);
  const values = data.map((entry) => entry.inodes);

  const ctx = document.getElementById("folderChart").getContext("2d");

  const chart = new Chart(ctx, {
    type: "bar",
    data: {
      labels: labels,
      datasets: [
        {
          label: "{{_('Inodes Usage')}}",
          data: values,
          backgroundColor: "#506fd9",
        },
      ],
    },
  });
  // console.log(data);
}

// Function to initialize the chart on page load
function initializeChart() {
  const tableData = extractDataFromTable();
  createChart(tableData);


  document.getElementById('goUp').addEventListener('click', async function() {
    const toastMessage = `{{ _("Calculating inodes for parent directory..") }}`;
    const toast = toaster({
      body: toastMessage,
      className: `border-0 text-white bg-primary`,
    });

    var currentUrl = window.location.href;
    var parts = currentUrl.split('/');
    parts.pop();
    var newUrl = parts.join('/');

    try {
      const response = await fetch(newUrl);

      if (!response.ok) {
        throw new Error(`{{ _("Failed to fetch") }} ${newUrl}`);
      }

      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 || '';
      }

      // Update the browser history
      history.pushState({}, '', newUrl);

      // Initialize the chart after updating the content and URL
      initializeChart();


    } catch (error) {
      console.error('Error fetching data:', error);
    }
  });



}


</script>


<script type="module">
initializeChart();
</script>    



{% endblock %}