scan_report.twig 3.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>OtAdmin Scan Report</title>
  5. <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.23/css/jquery.dataTables.css">
  6. <script type="text/javascript" charset="utf8" src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
  7. <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.23/js/jquery.dataTables.js"></script>
  8. <script type="text/javascript" charset="utf8" src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>
  9. <style>
  10. body {
  11. margin: 0 10%;
  12. }
  13. .summary, .details {
  14. margin: 24px 0;
  15. }
  16. .chart-div {
  17. height: 400px;
  18. }
  19. </style>
  20. </head>
  21. <body>
  22. <h1>OtAdmin Scan Report</h1>
  23. <div class="summary">
  24. <div class="chart-div">
  25. <canvas id="chart_stats" width="400" height="400"></canvas>
  26. </div>
  27. </div>
  28. <div class="details">
  29. <table id="results" class="display">
  30. <thead>
  31. <tr>
  32. <th>Organization Id</th>
  33. <th>Status</th>
  34. <th>Root uid</th>
  35. <th>Site's title</th>
  36. <th>Warnings</th>
  37. </tr>
  38. </thead>
  39. <tbody>
  40. {% for status in scan.results %}
  41. <tr>
  42. <td>{{ status.organization_id }}</td>
  43. <td>{{ status.status }}</td>
  44. <td>{{ status.root_uid }}</td>
  45. <td>{{ status.title }}</td>
  46. <td><ul>{% for warning in status.warnings %}<li>{{ warning }}</li>{% endfor %}</ul></td>
  47. </tr>
  48. {% endfor %}
  49. </tbody>
  50. </table>
  51. </div>
  52. <script>
  53. $(document).ready( function () {
  54. // Datatable
  55. $('#results').DataTable();
  56. } );
  57. // Charts
  58. var labels = [];
  59. var values = [];
  60. {% for lbl, val in scan.stats %}
  61. labels.push('{{ lbl }}');
  62. values.push({{ val }});
  63. {% endfor %}
  64. {% autoescape 'js' %}
  65. var ctx = document.getElementById('chart_stats').getContext('2d');
  66. var myChart = new Chart(ctx, {
  67. type: 'bar',
  68. data: {
  69. labels: labels,
  70. datasets: [{
  71. label: 'Stats',
  72. data: values,
  73. backgroundColor: [
  74. 'rgba(255, 99, 132, 0.2)',
  75. 'rgba(54, 162, 235, 0.2)',
  76. 'rgba(255, 206, 86, 0.2)',
  77. 'rgba(75, 192, 192, 0.2)',
  78. 'rgba(153, 102, 255, 0.2)',
  79. 'rgba(255, 159, 64, 0.2)'
  80. ],
  81. borderColor: [
  82. 'rgba(255, 99, 132, 1)',
  83. 'rgba(54, 162, 235, 1)',
  84. 'rgba(255, 206, 86, 1)',
  85. 'rgba(75, 192, 192, 1)',
  86. 'rgba(153, 102, 255, 1)',
  87. 'rgba(255, 159, 64, 1)'
  88. ],
  89. borderWidth: 1
  90. }]
  91. },
  92. options: {
  93. responsive: true,
  94. maintainAspectRatio: false
  95. }
  96. });
  97. {% endautoescape %}
  98. </script>
  99. </body>
  100. </html>