coloriage via CSS

summary/23_rman_backup.sql

@@ -0,0 +1,28 @@
+prompt <h3>Les dernières sauvegardes RMAN (30 derniers jours/50 dernières lignes)</h3>
+
+ALTER SESSION SET NLS_DATE_FORMAT='DD/MM/YYYY HH24:MI:SS';
+
+SELECT
+    B.SESSION_KEY                                                                      "Session Key",
+    B.INPUT_TYPE                                                                       "Type",
+    TO_CHAR(B.START_TIME, 'DD-MM-YYYY HH24:MI')                                        "Start Time",
+    TO_CHAR(B.END_TIME, 'DD-MM-YYYY HH24:MI')                                          "End Time",
+    TO_CHAR(TRUNC(SYSDATE) + NUMTODSINTERVAL(ELAPSED_SECONDS, 'second'), 'hh24:mi:ss') "Duration",
+    B.OUTPUT_DEVICE_TYPE                                                               "Device Type",
+    B.INPUT_BYTES_DISPLAY                                                              "Input Bytes",
+    B.OUTPUT_BYTES_DISPLAY                                                             "Output Bytes",
+    CASE
+        WHEN B.STATUS = 'FAILED' THEN
+            '<span class="highlight">'
+            || B.STATUS
+            || '</span>'
+        ELSE
+            B.STATUS
+    END                                                                                "Status"
+FROM
+    V$RMAN_BACKUP_JOB_DETAILS B
+WHERE
+    B.START_TIME > ( SYSDATE - 30 )
+    AND ROWNUM <= 50
+ORDER BY
+    B.SESSION_KEY DESC;

summary/99_footer.html

@@ -1,79 +1,109 @@
 <script>
-  // Permet de sélectionner une ligne en cliquant dessus
-/*
-  document.addEventListener('DOMContentLoaded', () => {
-    document.querySelectorAll('table tr').forEach(row => {
-      row.addEventListener('click', () => {
-        document.querySelectorAll('tr').forEach(r => r.classList.remove('selected'));
-        row.classList.add('selected');
-      });
-    });
-  });
-*/ 
-
-  // Permet de sélectionner une ligne en cliquant dessus
   document.addEventListener('DOMContentLoaded', () => {
     const getCellValue = (tr, idx) => tr.children[idx].innerText || tr.children[idx].textContent;
   
     const comparer = (idx, asc) => (a, b) => {
-      const v1 = getCellValue(asc ? a : b, idx);
+      const v1 = getCellValue(asc ? a : b, idx).replace(',', '.');
-      const v2 = getCellValue(asc ? b : a, idx);
+      const v2 = getCellValue(asc ? b : a, idx).replace(',', '.');
-      return !isNaN(v1) && !isNaN(v2) ? v1 - v2 : v1.localeCompare(v2);
+      return !isNaN(v1) && !isNaN(v2) ? parseFloat(v1) - parseFloat(v2) : v1.localeCompare(v2);
     };
   
-    // Sélection de la colonne (par exemple la 3ème colonne, index 2)
+    // 🎯 Configuration des règles de colorisation
-    const colorColumnIndex = 6;
+    const rules = [
+      {
+        keywords: ["percent_used","percent", "used", "utilisation", "%"],
+        thresholds: [
+          { min: 90, color: "#fecaca", text: "#991b1b" },    // rouge
+          { min: 80, color: "#fef08a", text: "#92400e" },    // jaune
+          { min: 0,  color: "#bbf7d0", text: "#065f46" }     // vert
+        ]
+      },
+      {
+        keywords: ["status"], // 👈 règle pour la colonne STATUS
+        matchText: "FAILED",  // mot-clé à détecter
+        style: {              // style à appliquer si trouvé
+          color: "#fff",
+          backgroundColor: "#dc2626", // rouge foncé
+          fontWeight: "bold"
+        }
+      }
+      // Tu peux ajouter d’autres règles ici si besoin
+    ];
   
-    const colorizeCells = () => {
+    // 🎨 Appliquer les règles de coloration dynamiquement
-    const rows = document.querySelectorAll('table tr:nth-child(n+2)'); // Ignore l'en-tête
+    const colorizeDynamicColumns = () => {
-    rows.forEach(row => {
+      document.querySelectorAll("table").forEach(table => {
-      const cell = row.children[colorColumnIndex];
+        const ths = table.querySelectorAll("thead th");
-      const value = parseFloat(cell.innerText);
+  
-      if (!isNaN(value)) {
+        rules.forEach(rule => {
-        if (value > 90) {
+          let targetIndex = -1;
-          cell.classList.add('red');
+          ths.forEach((th, index) => {
-        } else if (value >= 80 && value <= 90) {
+            const text = th.textContent.trim().toLowerCase();
-          cell.classList.add('orange');
+            const match = rule.keywords.some(keyword => text.includes(keyword));
-        }
+            if (match && targetIndex === -1) {
-        // Appliquer la classe 'numeric' pour l'alignement à droite
+              targetIndex = index;
-        cell.classList.add('numeric');
+            }
-        }
+          });
+  
+          if (targetIndex !== -1) {
+            table.querySelectorAll("tbody tr").forEach(row => {
+              const cell = row.children[targetIndex];
+              if (!cell) return;
+              const text = cell.textContent.trim().replace('%', '').replace(',', '.');
+              const value = parseFloat(text);
+              if (isNaN(value)) return;
+  
+              for (const threshold of rule.thresholds) {
+                if (value >= threshold.min) {
+                  cell.style.backgroundColor = threshold.color;
+                  cell.style.color = threshold.text;
+                  cell.style.fontWeight = 'bold';
+                  break;
+                }
+              }
+  
+              // Alignement à droite aussi si c’est un chiffre
+              cell.classList.add('numeric');
+            });
+          }
+        });
       });
     };
   
-    // alignement à droit des colonnes numériques
+    // ➕ Appliquer alignement numérique à toutes les cellules numériques
     const alignNumericCells = () => {
-    const rows = document.querySelectorAll('table tr:nth-child(n+2)');
+      document.querySelectorAll('table tr:nth-child(n+2)').forEach(row => {
-    rows.forEach(row => {
+        Array.from(row.children).forEach(cell => {
-      Array.from(row.children).forEach(cell => {
+          const value = parseFloat(cell.textContent.replace(',', '.'));
-        const value = parseFloat(cell.innerText.replace(',', '.')); // gérer les virgules si jamais
+          if (!isNaN(value)) {
-        if (!isNaN(value)) {
+            cell.classList.add('numeric');
-          cell.classList.add('numeric');
+          }
-        }
+        });
       });
-    });
+    };
-  };
   
-  // permet de trier le tableau
+    // 🔁 Tri au clic sur les entêtes
     document.querySelectorAll('table th').forEach(th => {
       th.addEventListener('click', () => {
         const table = th.closest('table');
         const tbody = table.querySelector('tbody') || table;
-        const rows = Array.from(tbody.querySelectorAll('tr:nth-child(n+2)')); // ignore header
+        const rows = Array.from(tbody.querySelectorAll('tr:nth-child(n+2)'));
         const index = Array.from(th.parentNode.children).indexOf(th);
         const asc = !th.classList.contains('asc');
         table.querySelectorAll('th').forEach(th => th.classList.remove('asc', 'desc'));
         th.classList.toggle('asc', asc);
         th.classList.toggle('desc', !asc);
         rows.sort(comparer(index, asc)).forEach(row => tbody.appendChild(row));
+  
+        // Recoloriser après le tri (au cas où les lignes changent de position)
+        colorizeDynamicColumns();
       });
     });
   
-    // Appliquer la colorisation après chargement du tableau
+    // 🚀 Initialisation
-    colorizeCells();
+    colorizeDynamicColumns();
     alignNumericCells();
   });
   </script>
-  
 </body>
 </html>