Merge pull request #128 from mrceyhun/f-eos-path-size-improve

Add url param and refactor eos path size page
dmwm · Jan 26, 2022 · 4436600 · 4436600
2 parents e0d96d2 + 6802d8a
commit 4436600
Show file tree

Hide file tree

Showing 3 changed files with 214 additions and 170 deletions.
diff --git a/scripts/eos_path_size.sh b/scripts/eos_path_size.sh
@@ -1,4 +1,4 @@
-#!/bin/sh
+#!/bin/bash
 ##H Script to create CMS Eos path sizes with conditons
 ##H CMSVOC and CMSMONITORING groups are responsible for this script.
 
@@ -21,11 +21,22 @@ if ! [ "$(python -c 'import sys; print(sys.version_info.major)')" = 3 ]; then
     exit 1
 fi
 
+script_dir="$(
+    cd -- "$(dirname "$0")" >/dev/null 2>&1 || exit
+    pwd -P
+)"
+
+py_input_args=(
+    --output_file "/eos/user/c/cmsmonit/www/eos-path-size/size.html"
+    --input_eos_file "/eos/cms/store/accounting/eos_quota_ls.txt"
+    --static_html_dir "${script_dir}/../src/html/eos_path_size"
+)
+
 # Catch	output to not print successful jobs stdout to email, print when failed
-if ! output=$(xrdcp -s root://eoscms.cern.ch//eos/cms/proc/accounting - |
-    python "$HOME"/CMSMonitoring/src/python/CMSMonitoring/eos_path_size.py \
-        --output_file=/eos/user/c/cmsmonit/www/eos-path-size/size.html \
-        --input_eos_file=/eos/cms/store/accounting/eos_quota_ls.txt 2>&1); then
+if ! output=$(
+    xrdcp -s root://eoscms.cern.ch//eos/cms/proc/accounting - |
+        python "$HOME"/CMSMonitoring/src/python/CMSMonitoring/eos_path_size.py "${py_input_args[@]}" 2>&1
+); then
     echo "$output"
     exit $?
 fi
diff --git a/src/html/eos_path_size/main.html b/src/html/eos_path_size/main.html
@@ -0,0 +1,136 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.min.css">
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
+    <link rel="stylesheet" href="https://cdn.datatables.net/1.11.4/css/dataTables.bootstrap.min.css">
+    <link rel="stylesheet" href="https://cdn.datatables.net/buttons/2.2.2/css/buttons.bootstrap.min.css">
+    <style>
+        body {
+	        font-family: 'Trebuchet MS', sans-serif;
+        }
+        /* Search bar */
+        .dataTables_filter input {
+          border: 7px solid Tomato;
+          width: 400px;
+          font-size: 16px;
+          font-weight: bold;
+        }
+        table td {
+            word-break: break-all;
+        }
+        /* From 2nd column, align to right */
+        table td:nth-child(n+2) {
+            text-align: right;
+        }
+        /* First row bold */
+        table td:nth-child(1) {
+            font-weight: bold;
+        }
+        /* Different background color for even and odd columns  */
+        #dataframe tr:nth-child(even) {
+          /* background-color: #dddfff; */
+        }
+        /* No carriage return for values, no break lines */
+        #dataframe tr td {
+          width: 1%;
+          white-space: nowrap;
+        }
+        /* button */
+        div.dt-buttons {
+          float: right;
+        }
+    </style>
+</head>
+<body>
+    <div class="cms">
+        <img src="https://cds.cern.ch/record/1306150/files/cmsLogo_image.jpg"
+            alt="CMS" style="width: 5%; float:left">
+        <h3 style="width: 100%;">
+            EOSCMS quotas and usage monitoring
+        </h3>
+        <small>Last Update: __UPDATE_TIME__ UTC</small>
+    </div>
+    <div class="w3-container" style="margin-left: 3%;">
+      <button style="font-size: 18px; background-color: white; color: black; border: 5px solid #f9ccac;" onclick="explainFunction()">
+        &darr; How to interpret this table &darr;
+      </button>
+    </div>
+    <div id="explanations" style="display: none; margin-top: 2%;">
+        <pre>
+    Source code: <a href="https://github.com/dmwm/CMSSpark/blob/master/src/python/CMSSpark/rucio_datasets_last_access_ts.py">CMSSpark/rucio_datasets_last_access_ts.py</a>
+    This page shows the size of CMS EOS paths in TB. Bytes to TB denominator is 10^12.
+    All values come from: eos -r 103074 1399 quota ls -m and paths come from: xrdcp -s root://eoscms.cern.ch//eos/cms/proc/accounting -
+    [NOTE-1]:__EXCLUDED_PATHS__ paths are filtered out and not used in calculations.
+    [NOTE-2]: The sizes of "/eos/cms/proc/recycle/" are divided by 2 for obvious reasons.
+    Script source code: eos_path_size.py
+	    </pre>
+	</div>
+    <div class="container" style="display:block; width:100%">
+
+    ____MAIN_BLOCK____
+
+    </div>
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
+    <script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.js"></script>
+    <script type="text/javascript" src="https://cdn.datatables.net/1.11.4/js/jquery.dataTables.min.js"></script>
+    <script type="text/javascript" src="https://cdn.datatables.net/1.11.4/js/dataTables.bootstrap.min.js"></script>
+    <script type="text/javascript" src="https://cdn.datatables.net/buttons/2.2.2/js/dataTables.buttons.min.js"></script>
+    <script type="text/javascript" src="https://cdn.datatables.net/buttons/2.2.2/js/buttons.bootstrap.min.js"></script>
+    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
+    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js"></script>
+    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js"></script>
+    <script type="text/javascript" src="https://cdn.datatables.net/buttons/2.2.2/js/buttons.html5.min.js"></script>
+    <script type="text/javascript" src="https://cdn.datatables.net/buttons/2.2.2/js/buttons.print.min.js"></script>
+    <script type="text/javascript" src="https://cdn.datatables.net/buttons/2.2.2/js/buttons.colVis.min.js"></script>
+    <script>
+        function explainFunction() {
+          var x = document.getElementById("explanations");
+          if (x.style.display === "none") {
+            x.style.display = "block";
+          } else {
+            x.style.display = "none";
+          }
+        }
+    </script>
+    <script>
+        var url = new URL(window.location.href);
+        var searchString = url.searchParams.get("search");
+        if (searchString == null){
+          searchString = ''
+        }
+        $(document).ready(function () {
+            var dt = $('#dataframe').DataTable( {
+                "orderCellsTop": true,
+                "dom": "fBrtpli",
+                "order": [[ 1, "desc" ]],
+                "pageLength" : 300,
+                "scrollX": false,
+                "oSearch": { "sSearch": searchString },
+                language: {
+                    search: "_INPUT_",
+                    searchPlaceholder: "--- Search EOS Path ---",
+                },
+                lengthChange: false,
+                  buttons: [
+                  'copy',
+                  'excel',
+                  'pdf',
+                  'colvis',
+                  {
+                        text: 'Copy search link to clipboard',
+                        action: function ( e, dt, node, config ) {
+                          url.searchParams.set('search', dt.search());
+                          //window.location.replace(url.href);
+                          navigator.clipboard.writeText(url.href);
+                        }
+                    }
+                ]
+            });
+            dt.buttons().container().appendTo( '#example_wrapper .col-sm-4:eq(0)' );
+        });
+    </script>
+</body>
+<!-- final -->
+</html>