From c63cbec26d9ab3aa3004c9969ec67315fecd28b1 Mon Sep 17 00:00:00 2001
From: Toni Uhlig <matzeton@googlemail.com>
Date: Wed, 26 Oct 2022 13:45:15 +0200
Subject: Improved nDPIsrvd-collectd statistics.

 * Improved RRD-Graph generation script and static WWW html files.

Signed-off-by: Toni Uhlig <matzeton@googlemail.com>
---
 examples/c-collectd/www/dpi/index.html | 216 +++++++++++++++++++++++++++------
 1 file changed, 180 insertions(+), 36 deletions(-)

(limited to 'examples/c-collectd/www/dpi/index.html')
diff --git a/examples/c-collectd/www/dpi/index.html b/examples/c-collectd/www/dpi/index.html
index 260dd519c..bcec4ea3b 100644
--- a/examples/c-collectd/www/dpi/index.html
+++ b/examples/c-collectd/www/dpi/index.html
@@ -1,10 +1,15 @@
 <!DOCTYPE html>
 <html lang="en"><head>
-<meta http-equiv="content-type" content="text/html; charset=UTF-8">
+    <meta http-equiv="cache-control" content="max-age=0" />
+    <meta http-equiv="cache-control" content="no-cache" />
+    <meta http-equiv="expires" content="0" />
+    <meta http-equiv="expires" content="Tue, 01 Jan 1980 1:00:00 GMT" />
+    <meta http-equiv="pragma" content="no-cache" />
+    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-    <meta name="description" content="">
-    <meta name="author" content="">
+    <meta name="description" content="nDPId RRD Graph">
+    <meta name="author" content="Toni Uhlig">
     <link rel="icon" href="https://getbootstrap.com/docs/4.0/assets/img/favicons/favicon.ico">
 
     <title>nDPId Dashboard</title>
@@ -92,6 +97,30 @@
                   Categories
                 </a>
               </li>
+              <li class="nav-item">
+                <a class="nav-link" href="jsons.html">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-file-text">
+                    <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
+                    <polyline points="14 2 14 8 20 8"></polyline>
+                    <line x1="16" y1="13" x2="8" y2="13"></line>
+                    <line x1="16" y1="17" x2="8" y2="17"></line>
+                    <polyline points="10 9 9 9 8 9"></polyline>
+                  </svg>
+                  JSONs
+                </a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link" href="events.html">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-file-text">
+                    <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
+                    <polyline points="14 2 14 8 20 8"></polyline>
+                    <line x1="16" y1="13" x2="8" y2="13"></line>
+                    <line x1="16" y1="17" x2="8" y2="17"></line>
+                    <polyline points="10 9 9 9 8 9"></polyline>
+                  </svg>
+                  Events
+                </a>
+              </li>
             </ul>
           </div>
         </nav>
@@ -101,6 +130,9 @@
           <div class="d-flex justify-content-center flex-wrap flex-md-nowrap align-items-center pb-2 mb-3 border-bottom">
             <img src="flows_past_hour.png" class="img-fluid" alt="Responsive image">
           </div>
+          <div class="d-flex justify-content-center flex-wrap flex-md-nowrap align-items-center pb-2 mb-3 border-bottom">
+            <img src="flows_past_12hours.png" class="img-fluid" alt="Responsive image">
+          </div>
           <div class="d-flex justify-content-center flex-wrap flex-md-nowrap align-items-center pb-2 mb-3 border-bottom">
             <img src="flows_past_day.png" class="img-fluid" alt="Responsive image">
           </div>
@@ -117,6 +149,9 @@
           <div class="d-flex justify-content-center flex-wrap flex-md-nowrap align-items-center pb-2 mb-3 border-bottom">
             <img src="detections_past_hour.png" class="img-fluid" alt="Responsive image">
           </div>
+          <div class="d-flex justify-content-center flex-wrap flex-md-nowrap align-items-center pb-2 mb-3 border-bottom">
+            <img src="detections_past_12hours.png" class="img-fluid" alt="Responsive image">
+          </div>
           <div class="d-flex justify-content-center flex-wrap flex-md-nowrap align-items-center pb-2 mb-3 border-bottom">
             <img src="detections_past_day.png" class="img-fluid" alt="Responsive image">
           </div>
@@ -133,6 +168,9 @@
           <div class="d-flex justify-content-center flex-wrap flex-md-nowrap align-items-center pb-2 mb-3 border-bottom">
             <img src="traffic_past_hour.png" class="img-fluid" alt="Responsive image">
           </div>
+          <div class="d-flex justify-content-center flex-wrap flex-md-nowrap align-items-center pb-2 mb-3 border-bottom">
+            <img src="traffic_past_12hours.png" class="img-fluid" alt="Responsive image">
+          </div>
           <div class="d-flex justify-content-center flex-wrap flex-md-nowrap align-items-center pb-2 mb-3 border-bottom">
             <img src="traffic_past_day.png" class="img-fluid" alt="Responsive image">
           </div>
@@ -146,9 +184,12 @@
             <img src="traffic_past_year.png" class="img-fluid" alt="Responsive image">
           </div>
 
-	  <div class="d-flex justify-content-center flex-wrap flex-md-nowrap align-items-center pb-2 mb-3 border-bottom">
+          <div class="d-flex justify-content-center flex-wrap flex-md-nowrap align-items-center pb-2 mb-3 border-bottom">
             <img src="layer3_past_hour.png" class="img-fluid" alt="Responsive image">
           </div>
+          <div class="d-flex justify-content-center flex-wrap flex-md-nowrap align-items-center pb-2 mb-3 border-bottom">
+            <img src="layer3_past_12hours.png" class="img-fluid" alt="Responsive image">
+          </div>
           <div class="d-flex justify-content-center flex-wrap flex-md-nowrap align-items-center pb-2 mb-3 border-bottom">
             <img src="layer3_past_day.png" class="img-fluid" alt="Responsive image">
           </div>
@@ -162,9 +203,12 @@
             <img src="layer3_past_year.png" class="img-fluid" alt="Responsive image">
           </div>
 
-	  <div class="d-flex justify-content-center flex-wrap flex-md-nowrap align-items-center pb-2 mb-3 border-bottom">
+          <div class="d-flex justify-content-center flex-wrap flex-md-nowrap align-items-center pb-2 mb-3 border-bottom">
             <img src="layer4_past_hour.png" class="img-fluid" alt="Responsive image">
           </div>
+          <div class="d-flex justify-content-center flex-wrap flex-md-nowrap align-items-center pb-2 mb-3 border-bottom">
+            <img src="layer4_past_12hours.png" class="img-fluid" alt="Responsive image">
+          </div>
           <div class="d-flex justify-content-center flex-wrap flex-md-nowrap align-items-center pb-2 mb-3 border-bottom">
             <img src="layer4_past_day.png" class="img-fluid" alt="Responsive image">
           </div>
@@ -178,38 +222,138 @@
             <img src="layer4_past_year.png" class="img-fluid" alt="Responsive image">
           </div>
 
-	  <div class="d-flex justify-content-center flex-wrap flex-md-nowrap align-items-center pb-2 mb-3 border-bottom">
-	    <img src="breed_past_hour.png" class="img-fluid" alt="Responsive image">
-	  </div>
-	  <div class="d-flex justify-content-center flex-wrap flex-md-nowrap align-items-center pb-2 mb-3 border-bottom">
-	    <img src="breed_past_day.png" class="img-fluid" alt="Responsive image">
-	  </div>
-	  <div class="d-flex justify-content-center flex-wrap flex-md-nowrap align-items-center pb-2 mb-3 border-bottom">
-	    <img src="breed_past_week.png" class="img-fluid" alt="Responsive image">
-	  </div>
-	  <div class="d-flex justify-content-center flex-wrap flex-md-nowrap align-items-center pb-2 mb-3 border-bottom">
-	    <img src="breed_past_month.png" class="img-fluid" alt="Responsive image">
-	  </div>
-	  <div class="d-flex justify-content-center flex-wrap flex-md-nowrap align-items-center pb-2 mb-3 border-bottom">
-	    <img src="breed_past_year.png" class="img-fluid" alt="Responsive image">
-	  </div>
-
-	  <div class="d-flex justify-content-center flex-wrap flex-md-nowrap align-items-center pb-2 mb-3 border-bottom">
-	    <img src="categories_past_hour.png" class="img-fluid" alt="Responsive image">
-	  </div>
-	  <div class="d-flex justify-content-center flex-wrap flex-md-nowrap align-items-center pb-2 mb-3 border-bottom">
-	    <img src="categories_past_day.png" class="img-fluid" alt="Responsive image">
-	  </div>
-	  <div class="d-flex justify-content-center flex-wrap flex-md-nowrap align-items-center pb-2 mb-3 border-bottom">
-	    <img src="categories_past_week.png" class="img-fluid" alt="Responsive image">
-	  </div>
-	  <div class="d-flex justify-content-center flex-wrap flex-md-nowrap align-items-center pb-2 mb-3 border-bottom">
-	    <img src="categories_past_month.png" class="img-fluid" alt="Responsive image">
-	  </div>
-	  <div class="d-flex justify-content-center flex-wrap flex-md-nowrap align-items-center pb-2 mb-3 border-bottom">
-	    <img src="categories_past_year.png" class="img-fluid" alt="Responsive image">
-	  </div>
+          <div class="d-flex justify-content-center flex-wrap flex-md-nowrap align-items-center pb-2 mb-3 border-bottom">
+            <img src="breed_past_hour.png" class="img-fluid" alt="Responsive image">
+          </div>
+          <div class="d-flex justify-content-center flex-wrap flex-md-nowrap align-items-center pb-2 mb-3 border-bottom">
+            <img src="breed_past_12hours.png" class="img-fluid" alt="Responsive image">
+          </div>
+          <div class="d-flex justify-content-center flex-wrap flex-md-nowrap align-items-center pb-2 mb-3 border-bottom">
+            <img src="breed_past_day.png" class="img-fluid" alt="Responsive image">
+          </div>
+          <div class="d-flex justify-content-center flex-wrap flex-md-nowrap align-items-center pb-2 mb-3 border-bottom">
+            <img src="breed_past_week.png" class="img-fluid" alt="Responsive image">
+          </div>
+          <div class="d-flex justify-content-center flex-wrap flex-md-nowrap align-items-center pb-2 mb-3 border-bottom">
+            <img src="breed_past_month.png" class="img-fluid" alt="Responsive image">
+          </div>
+          <div class="d-flex justify-content-center flex-wrap flex-md-nowrap align-items-center pb-2 mb-3 border-bottom">
+            <img src="breed_past_year.png" class="img-fluid" alt="Responsive image">
+          </div>
+
+          <div class="d-flex justify-content-center flex-wrap flex-md-nowrap align-items-center pb-2 mb-3 border-bottom">
+            <img src="categories_past_hour.png" class="img-fluid" alt="Responsive image">
+          </div>
+          <div class="d-flex justify-content-center flex-wrap flex-md-nowrap align-items-center pb-2 mb-3 border-bottom">
+            <img src="categories_past_12hours.png" class="img-fluid" alt="Responsive image">
+          </div>
+          <div class="d-flex justify-content-center flex-wrap flex-md-nowrap align-items-center pb-2 mb-3 border-bottom">
+            <img src="categories_past_day.png" class="img-fluid" alt="Responsive image">
+          </div>
+          <div class="d-flex justify-content-center flex-wrap flex-md-nowrap align-items-center pb-2 mb-3 border-bottom">
+            <img src="categories_past_week.png" class="img-fluid" alt="Responsive image">
+          </div>
+          <div class="d-flex justify-content-center flex-wrap flex-md-nowrap align-items-center pb-2 mb-3 border-bottom">
+            <img src="categories_past_month.png" class="img-fluid" alt="Responsive image">
+          </div>
+          <div class="d-flex justify-content-center flex-wrap flex-md-nowrap align-items-center pb-2 mb-3 border-bottom">
+            <img src="categories_past_year.png" class="img-fluid" alt="Responsive image">
+          </div>
 
+          <div class="d-flex justify-content-center flex-wrap flex-md-nowrap align-items-center pb-2 mb-3 border-bottom">
+            <img src="events_past_hour.png" class="img-fluid" alt="Responsive image">
+          </div>
+          <div class="d-flex justify-content-center flex-wrap flex-md-nowrap align-items-center pb-2 mb-3 border-bottom">
+            <img src="events_past_12hours.png" class="img-fluid" alt="Responsive image">
+          </div>
+          <div class="d-flex justify-content-center flex-wrap flex-md-nowrap align-items-center pb-2 mb-3 border-bottom">
+            <img src="events_past_day.png" class="img-fluid" alt="Responsive image">
+          </div>
+          <div class="d-flex justify-content-center flex-wrap flex-md-nowrap align-items-center pb-2 mb-3 border-bottom">
+            <img src="events_past_week.png" class="img-fluid" alt="Responsive image">
+          </div>
+          <div class="d-flex justify-content-center flex-wrap flex-md-nowrap align-items-center pb-2 mb-3 border-bottom">
+            <img src="events_past_month.png" class="img-fluid" alt="Responsive image">
+          </div>
+          <div class="d-flex justify-content-center flex-wrap flex-md-nowrap align-items-center pb-2 mb-3 border-bottom">
+            <img src="events_past_year.png" class="img-fluid" alt="Responsive image">
+          </div>
+
+          <div class="d-flex justify-content-center flex-wrap flex-md-nowrap align-items-center pb-2 mb-3 border-bottom">
+            <img src="error_events_past_hour.png" class="img-fluid" alt="Responsive image">
+          </div>
+          <div class="d-flex justify-content-center flex-wrap flex-md-nowrap align-items-center pb-2 mb-3 border-bottom">
+            <img src="error_events_past_12hours.png" class="img-fluid" alt="Responsive image">
+          </div>
+          <div class="d-flex justify-content-center flex-wrap flex-md-nowrap align-items-center pb-2 mb-3 border-bottom">
+            <img src="error_events_past_day.png" class="img-fluid" alt="Responsive image">
+          </div>
+          <div class="d-flex justify-content-center flex-wrap flex-md-nowrap align-items-center pb-2 mb-3 border-bottom">
+            <img src="error_events_past_week.png" class="img-fluid" alt="Responsive image">
+          </div>
+          <div class="d-flex justify-content-center flex-wrap flex-md-nowrap align-items-center pb-2 mb-3 border-bottom">
+            <img src="error_events_past_month.png" class="img-fluid" alt="Responsive image">
+          </div>
+          <div class="d-flex justify-content-center flex-wrap flex-md-nowrap align-items-center pb-2 mb-3 border-bottom">
+            <img src="error_events_past_year.png" class="img-fluid" alt="Responsive image">
+          </div>
+
+          <div class="d-flex justify-content-center flex-wrap flex-md-nowrap align-items-center pb-2 mb-3 border-bottom">
+            <img src="json_lines_past_hour.png" class="img-fluid" alt="Responsive image">
+          </div>
+          <div class="d-flex justify-content-center flex-wrap flex-md-nowrap align-items-center pb-2 mb-3 border-bottom">
+            <img src="json_lines_past_12hours.png" class="img-fluid" alt="Responsive image">
+          </div>
+          <div class="d-flex justify-content-center flex-wrap flex-md-nowrap align-items-center pb-2 mb-3 border-bottom">
+            <img src="json_lines_past_day.png" class="img-fluid" alt="Responsive image">
+          </div>
+          <div class="d-flex justify-content-center flex-wrap flex-md-nowrap align-items-center pb-2 mb-3 border-bottom">
+            <img src="json_lines_past_week.png" class="img-fluid" alt="Responsive image">
+          </div>
+          <div class="d-flex justify-content-center flex-wrap flex-md-nowrap align-items-center pb-2 mb-3 border-bottom">
+            <img src="json_lines_past_month.png" class="img-fluid" alt="Responsive image">
+          </div>
+          <div class="d-flex justify-content-center flex-wrap flex-md-nowrap align-items-center pb-2 mb-3 border-bottom">
+            <img src="json_lines_past_year.png" class="img-fluid" alt="Responsive image">
+          </div>
+
+          <div class="d-flex justify-content-center flex-wrap flex-md-nowrap align-items-center pb-2 mb-3 border-bottom">
+            <img src="json_bytes_past_hour.png" class="img-fluid" alt="Responsive image">
+          </div>
+          <div class="d-flex justify-content-center flex-wrap flex-md-nowrap align-items-center pb-2 mb-3 border-bottom">
+            <img src="json_bytes_past_12hours.png" class="img-fluid" alt="Responsive image">
+          </div>
+          <div class="d-flex justify-content-center flex-wrap flex-md-nowrap align-items-center pb-2 mb-3 border-bottom">
+            <img src="json_bytes_past_day.png" class="img-fluid" alt="Responsive image">
+          </div>
+          <div class="d-flex justify-content-center flex-wrap flex-md-nowrap align-items-center pb-2 mb-3 border-bottom">
+            <img src="json_bytes_past_week.png" class="img-fluid" alt="Responsive image">
+          </div>
+          <div class="d-flex justify-content-center flex-wrap flex-md-nowrap align-items-center pb-2 mb-3 border-bottom">
+            <img src="json_bytes_past_month.png" class="img-fluid" alt="Responsive image">
+          </div>
+          <div class="d-flex justify-content-center flex-wrap flex-md-nowrap align-items-center pb-2 mb-3 border-bottom">
+            <img src="json_bytes_past_year.png" class="img-fluid" alt="Responsive image">
+          </div>
+
+          <div class="d-flex justify-content-center flex-wrap flex-md-nowrap align-items-center pb-2 mb-3 border-bottom">
+            <img src="risky_events_past_hour.png" class="img-fluid" alt="Responsive image">
+          </div>
+          <div class="d-flex justify-content-center flex-wrap flex-md-nowrap align-items-center pb-2 mb-3 border-bottom">
+            <img src="risky_events_past_12hours.png" class="img-fluid" alt="Responsive image">
+          </div>
+          <div class="d-flex justify-content-center flex-wrap flex-md-nowrap align-items-center pb-2 mb-3 border-bottom">
+            <img src="risky_events_past_day.png" class="img-fluid" alt="Responsive image">
+          </div>
+          <div class="d-flex justify-content-center flex-wrap flex-md-nowrap align-items-center pb-2 mb-3 border-bottom">
+            <img src="risky_events_past_week.png" class="img-fluid" alt="Responsive image">
+          </div>
+          <div class="d-flex justify-content-center flex-wrap flex-md-nowrap align-items-center pb-2 mb-3 border-bottom">
+            <img src="risky_events_past_month.png" class="img-fluid" alt="Responsive image">
+          </div>
+          <div class="d-flex justify-content-center flex-wrap flex-md-nowrap align-items-center pb-2 mb-3 border-bottom">
+            <img src="risky_events_past_year.png" class="img-fluid" alt="Responsive image">
+          </div>
         </main>
       </div>
     </div>
-- 
cgit v1.2.3

