templates/default/vpspopin.html.twig line 1

Open in your IDE?
  1. <div class="modal-dialog">
  2.     <div class="modal-content">
  3.         <div class="modal-header"><h5 class="modal-title">VPS{{ vpsid }}</h5>
  4.             <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
  5.                         aria-hidden="true">×</span></button>
  6.         </div>
  7.         <div class="modal-body">
  8.             <h3>Containers ({{ dockervpsValues.containers|length }})</h3>
  9.             {% for projet, containers in dockervpsValues.containers %}
  10.                 {% set projectsize = 0 %}
  11.                 {% for directory, size in sizeinfo %}
  12.                     {% if directory in projet %}
  13.                         {% set projectsize = size*1024 %}
  14.                     {% elseif directory == "symfokasa" and projet == "kasanature" %}
  15.                         {% set projectsize = size*1024 %}
  16.                     {% elseif directory == "devsymfo" and projet == "sf5vps2" %}
  17.                         {% set projectsize = size*1024 %}
  18.                     {% endif %}
  19.                 {% endfor %}
  21.                 {% set oldprojectsize = 0 %}
  22.                 {% for directory, size in sizeinfoold %}
  23.                     {% if directory in projet %}
  24.                         {% set oldprojectsize = size*1024 %}
  25.                     {% elseif directory == "symfokasa" and projet == "kasanature" %}
  26.                         {% set oldprojectsize = size*1024 %}
  27.                     {% elseif directory == "devsymfo" and projet == "sf5vps2" %}
  28.                         {% set oldprojectsize = size*1024 %}
  29.                     {% endif %}
  30.                 {% endfor %}
  32.                 {% set oldoldprojectsize = 0 %}
  33.                 {% for directory, size in sizeinfooldold %}
  34.                     {% if directory in projet %}
  35.                         {% set oldoldprojectsize = size*1024 %}
  36.                     {% elseif directory == "symfokasa" and projet == "kasanature" %}
  37.                         {% set oldoldprojectsize = size*1024 %}
  38.                     {% elseif directory == "devsymfo" and projet == "sf5vps2" %}
  39.                         {% set oldoldprojectsize = size*1024 %}
  40.                     {% endif %}
  41.                 {% endfor %}
  43.                 {% set tendancesize = false %}
  44.                 {% if projectsize and oldprojectsize %}
  45.                     {% set diffsize = 0 %}
  46.                     {% if projectsize > oldprojectsize %}
  47.                         {% set diffsize = projectsize - oldprojectsize %}
  48.                         {% set tendancesize = '<i class="ti-arrow-up" title="tendance h-12 | +'~diffsize|realsize(2)~'"></i>' %}
  49.                     {% elseif projectsize < oldprojectsize %}
  50.                         {% set diffsize = oldprojectsize - projectsize %}
  51.                         {% set tendancesize = '<i class="ti-arrow-down" title="tendance h-12 | -'~diffsize|realsize(2)~'"></i>' %}
  52.                     {% elseif projectsize == oldprojectsize %}
  53.                         {% set tendancesize = '<i class="ti-line-double" title="tendance h-12"></i>' %}
  54.                     {% endif %}
  55.                 {% endif %}
  57.                 {% set tendancesizeold = false %}
  58.                 {% if oldoldprojectsize and oldprojectsize %}
  59.                     {% set diffsize = 0 %}
  60.                     {% if oldprojectsize > oldoldprojectsize %}
  61.                         {% set diffsize = oldprojectsize - oldoldprojectsize %}
  62.                         {% set tendancesizeold = '<i class="ti-arrow-up" title="tendance h-24 | +'~diffsize|realsize(2)~'"></i>' %}
  63.                     {% elseif oldprojectsize < oldoldprojectsize %}
  64.                         {% set diffsize = oldoldprojectsize - oldprojectsize %}
  65.                         {% set tendancesizeold = '<i class="ti-arrow-down" title="tendance h-24 | -'~diffsize|realsize(2)~'"></i>' %}
  66.                     {% elseif oldprojectsize == oldoldprojectsize %}
  67.                         {% set tendancesizeold = '<i class="ti-line-double" title="tendance h-24"></i>' %}
  68.                     {% endif %}
  69.                 {% endif %}
  71.                 <div class="vpsa">
  72.                     <strong>
  73.                         {% if 'vps' in projet %}
  74.                             <a href="https://{{ projet|replace({'vps': '.vps'}) }}.kelkii.com" title="https://{{ projet|replace({'vps': '.vps'}) }}.kelkii.com" target="_blank">{{ projet|replace({'vps1': ''})|replace({'vps2': ''}) }}</a>
  75.                         {% elseif 'phpmyadmin' in projet %}
  76.                             <a href="https://phpm.vps1.kelkii.com" title="https://phpm.vps1.kelkii.com" target="_blank">{{ projet|replace({'vps1': ''})|replace({'vps2': ''}) }}</a>
  77.                         {% elseif 'kasanature' in projet %}
  78.                             <a href="https://kasanature.kelkii.com/fr/" title="https://kasanature.kelkii.com/fr/" target="_blank">{{ projet|replace({'vps1': ''})|replace({'vps2': ''}) }}</a>
  79.                         {% else %}
  80.                             {{ projet|replace({'vps1': ''})|replace({'vps2': ''}) }}
  81.                         {% endif %}
  83.                         {% if projectsize %} - {{ projectsize|realsize(2) }}{% endif %}{% if tendancesize %} {{ tendancesize|raw }}{% endif %}{% if tendancesizeold %} {{ tendancesizeold|raw }}{% endif %}
  84.                     </strong> <em class="detaildocker">({% for container in containers %}{{ container|trim }}{% if not loop.last %}, {% endif %}{% endfor %})</em>
  85.                 </div>
  86.             {% endfor %}
  87.             <br>
  88.             <h3>Outils</h3>
  89.             <a href="https://traefik.vps{{ vpsid }}.kelkii.com/" target="_blank">Traefik</a> - <a href="https://portainer.vps{{ vpsid }}.kelkii.com/" target="_blank">Portainer</a>
  90.             <br>
  91.             <br>
  92.             <h3>Disque</h3>
  93.             <canvas id="myChart" width="400" height="200"></canvas>
  94.             <script>
  95.                 var ctx = document.getElementById('myChart').getContext('2d');
  97.                 var sizehisto = {{ sizehisto|json_encode|raw }};
  99.                 var dates = sizehisto.map(function(item) {
  100.                     return item.logDate;
  101.                 });
  102.                 var percents = sizehisto.map(function(item) {
  103.                     return item.percent;
  104.                 });
  106.                 var chart = new Chart(ctx, {
  107.                     type: 'line',
  108.                     data: {
  109.                         labels: dates,
  110.                         datasets: [{
  111.                             label: 'Size (%)',
  112.                             data: percents,
  113.                             backgroundColor: 'rgba(0,194,132,0.25)',
  114.                             borderColor: '#00c284',
  115.                             borderWidth: 2
  116.                         }]
  117.                     },
  118.                     options: {
  119.                         scales: {
  120.                             yAxes: [{
  121.                                 ticks: {
  122.                                     min: 0,
  123.                                     max: 100
  124.                                 }
  125.                             }]
  126.                         }
  127.                     }
  128.                 });
  129.             </script>
  130.             <br>
  131.             <span id="show30Button" class="cpointer tgreen btn btn-outline-success btn-sm mb-2"><i class="fa fa-line-chart" aria-hidden="true"></i> Changer niveau de zoom</span>
  132.             <h3>Mémoire</h3>
  133.             <canvas id="memChart" width="400" height="200"></canvas>
  134.             <br>
  136.             <h3>Utilisation de la mémoire docker</h3>
  137.             <canvas id="memoryChart" width="800" height="400"></canvas>
  138.             <br>
  140.             <h3>IPs Bannis</h3>
  141.             <p>Login sur le serveur : {{ vpsinfolastping.login_date }} / {{ vpsinfolastping.login_ip }}</p>
  142.             <canvas id="ipChart" width="400" height="200"></canvas>
  143.             <br>
  145.             <script>
  146.                 var vpsinfo = {{ vpsinfo|json_encode|raw }};
  147.                 var vpsdockerinfo = {{ vpsdockerinfo|json_encode|raw }};
  148.                 var memCtx = document.getElementById('memChart').getContext('2d');
  149.                 var ipCtx = document.getElementById('ipChart').getContext('2d');
  150.                 var dockerCtx = document.getElementById('memoryChart').getContext('2d');
  151.                 var memChart, ipChart, dockerChart;
  152.                 var zoomState = 0; // 0: all data, 1: last 40, 2: last 20
  154.                 function createCharts(data, dockerData, pointRadius = 0, maxy = true) {
  155.                     // VPS Info Charts
  156.                     var memDates = data.map(item => item.date);
  157.                     var memUsage = data.map(item => item.mem_usage);
  158.                     var bannedIps = data.map(item => item.banned_ips);
  160.                     var memOptions = {
  161.                         scales: {
  162.                             yAxes: [{
  163.                                 ticks: {
  164.                                     callback: value => value + '%'
  165.                                 }
  166.                             }]
  167.                         }
  168.                     };
  170.                     if (maxy) {
  171.                         memOptions.scales.yAxes[0].ticks.min = 0;
  172.                         memOptions.scales.yAxes[0].ticks.max = 100;
  173.                     }
  175.                     memChart = new Chart(memCtx, {
  176.                         type: 'line',
  177.                         data: {
  178.                             labels: memDates,
  179.                             datasets: [{
  180.                                 label: 'Memory Usage (%)',
  181.                                 data: memUsage,
  182.                                 backgroundColor: 'rgba(54, 162, 235, 0.25)',
  183.                                 borderColor: 'rgb(54, 162, 235)',
  184.                                 borderWidth: 2,
  185.                                 pointRadius: pointRadius
  186.                             }]
  187.                         },
  188.                         options: memOptions
  189.                     });
  191.                     ipChart = new Chart(ipCtx, {
  192.                         type: 'line',
  193.                         data: {
  194.                             labels: memDates,
  195.                             datasets: [{
  196.                                 label: 'Banned IPs',
  197.                                 data: bannedIps,
  198.                                 backgroundColor: 'rgba(255, 99, 132, 0.25)',
  199.                                 borderColor: 'rgb(255, 99, 132)',
  200.                                 borderWidth: 2,
  201.                                 pointRadius: pointRadius
  202.                             }]
  203.                         },
  204.                         options: {
  205.                             scales: {
  206.                                 yAxes: [{
  207.                                     ticks: {
  208.                                         min: 0,
  209.                                         stepSize: 1
  210.                                     }
  211.                                 }]
  212.                             }
  213.                         }
  214.                     });
  216.                     // Docker Info Chart
  217.                     var datasets = {};
  218.                     var dates = [];
  219.                     var allContainers = {};
  221.                     function getContainerName(containerName) {
  222.                         return containerName.replace(/_php_1$/, '').replace(/vps[12]_/, '');
  223.                     }
  225.                     // First pass: collect all unique containers and dates
  226.                     dockerData.forEach(function(entry) {
  227.                         dates.push(entry.date);
  228.                         var jsondata = JSON.parse(entry.jsondata);
  229.                         Object.keys(jsondata.jsondata).forEach(function(containerName) {
  230.                             if (containerName.includes('_php')) {
  231.                                 var cleanName = getContainerName(containerName);
  232.                                 allContainers[cleanName] = true;
  233.                             }
  234.                         });
  235.                     });
  237.                     // Initialize datasets for all containers
  238.                     Object.keys(allContainers).forEach(function(cleanName) {
  239.                         datasets[cleanName] = [];
  240.                     });
  242.                     // Second pass: fill data, using null for missing values
  243.                     dockerData.forEach(function(entry) {
  244.                         var jsondata = JSON.parse(entry.jsondata);
  245.                         var currentData = {};
  247.                         Object.keys(jsondata.jsondata).forEach(function(containerName) {
  248.                             if (containerName.includes('_php')) {
  249.                                 var cleanName = getContainerName(containerName);
  250.                                 currentData[cleanName] = jsondata.jsondata[containerName].memory;
  251.                             }
  252.                         });
  254.                         // Add data for all containers (null if not present)
  255.                         Object.keys(allContainers).forEach(function(cleanName) {
  256.                             datasets[cleanName].push(currentData[cleanName] !== undefined ? currentData[cleanName] : null);
  257.                         });
  258.                     });
  260.                     var chartDatasets = Object.keys(datasets).map(function(cleanName, index) {
  261.                         var color = 'hsl(' + (index * 360 / Object.keys(datasets).length) + ', 70%, 50%)';
  262.                         return {
  263.                             label: cleanName,
  264.                             data: datasets[cleanName],
  265.                             borderColor: color,
  266.                             backgroundColor: color + '33',
  267.                             fill: false,
  268.                             lineTension: 0.4,
  269.                             pointRadius: pointRadius,
  270.                             spanGaps: true
  271.                         };
  272.                     });
  274.                     dockerChart = new Chart(dockerCtx, {
  275.                         type: 'line',
  276.                         data: {
  277.                             labels: dates,
  278.                             datasets: chartDatasets
  279.                         },
  280.                         options: {
  281.                             responsive: true,
  282.                             scales: {
  283.                                 yAxes: [{
  284.                                     ticks: {
  285.                                         beginAtZero: true,
  286.                                         callback: value => value + '%'
  287.                                     },
  288.                                     scaleLabel: {
  289.                                         display: true,
  290.                                         labelString: 'Utilisation de la mémoire (%)'
  291.                                     }
  292.                                 }],
  293.                                 xAxes: [{
  294.                                     scaleLabel: {
  295.                                         display: true,
  296.                                         labelString: 'Date et heure'
  297.                                     }
  298.                                 }]
  299.                             },
  300.                             legend: {
  301.                                 display: true,
  302.                                 position: 'top',
  303.                                 labels: {
  304.                                     boxWidth: 12,
  305.                                     padding: 10
  306.                                 }
  307.                             },
  308.                             title: {
  309.                                 display: true,
  310.                                 text: 'Évolution de l\'utilisation de la mémoire par conteneur PHP'
  311.                             }
  312.                         }
  313.                     });
  314.                 }
  316.                 // Initial chart creation with all data
  317.                 createCharts(vpsinfo, vpsdockerinfo, 0, true);
  319.                 // Function to toggle between different zoom levels
  320.                 function toggleDataDisplay() {
  321.                     memChart.destroy();
  322.                     ipChart.destroy();
  323.                     dockerChart.destroy();
  325.                     zoomState = (zoomState + 1) % 3; // Cycle through 0, 1, 2
  327.                     let displayData, displayDockerData, pointRadius, setMaxY;
  329.                     switch(zoomState) {
  330.                         case 1: // Last 40 points
  331.                             displayData = vpsinfo.slice(-40);
  332.                             displayDockerData = vpsdockerinfo.slice(-40);
  333.                             pointRadius = 3;
  334.                             setMaxY = false;
  335.                             break;
  336.                         case 2: // Last 20 points
  337.                             displayData = vpsinfo.slice(-20);
  338.                             displayDockerData = vpsdockerinfo.slice(-20);
  339.                             pointRadius = 4;
  340.                             setMaxY = false;
  341.                             break;
  342.                         default: // All data
  343.                             displayData = vpsinfo;
  344.                             displayDockerData = vpsdockerinfo;
  345.                             pointRadius = 0;
  346.                             setMaxY = true;
  347.                     }
  349.                     createCharts(displayData, displayDockerData, pointRadius, setMaxY);
  350.                 }
  352.                 // Event listener for the button
  353.                 document.getElementById('show30Button').addEventListener('click', toggleDataDisplay);
  354.             </script>
  356.             <h3>Backups</h3>
  357.             {% for backup in backups %}
  358.                 {{ backup.name }} : <em>{{ backup.time|date('d/m/Y H:i') }} ({{ backup.size|realsize(2) }})</em><br>
  359.             {% endfor %}
  360.             <br>
  361.             <em>{{ dockervpsValues.containerstime|date('d/m/Y H:i') }}</em>
  362.         </div>
  363.         <div class="modal-footer">
  364.             <button type="button" class="btn btn-default" data-dismiss="modal">Fermer</button>
  365.         </div>
  366.     </div>
  367. </div>