log_sense 1.9.0 → 2.0.0

data/lib/log_sense/report_shaper.rb

@@ -81,6 +81,197 @@ module LogSense
       }
     end
 
+    #
+    # Reports shared between rails and apache/nginx
+    #
+
+    def time_distribution(data, header: %w[Hour Hits], column_alignment: %i[left right], color: "#d30001")
+      {
+        title: "Time Distribution",
+        header:,
+        column_alignment:,
+        rows: data[:time_distribution],
+        echarts_spec: "{
+            xAxis: {
+              type: 'category',
+              data: SERIES_DATA.map(row => row['Hour'])
+            },
+            yAxis: {
+              type: 'value'
+            },
+            tooltip: {
+               trigger: 'axis'
+            },
+            series: [
+              {
+                data: SERIES_DATA.map(row => row['Hits']),
+                type: 'bar',
+                color: '#{color}',
+                label: {
+                   show: true,
+                   position: 'top'
+                },
+              }
+            ]
+          }",
+      }
+    end
+
+    def browsers(data, header: %w[Browser Visits], column_alignment: %i[left right], color: "#D30001")
+      {
+        title: "Browsers",
+        header:,
+        column_alignment:,
+        rows: data[:browsers],
+        echarts_spec: "{
+            toolbox: {
+               feature: {
+                 saveAsImage: {},
+               }
+            },
+            tooltip: {
+               trigger: 'axis'
+            },
+            xAxis: {
+              type: 'category',
+              data: SERIES_DATA.sort(order_by_name).map(row => row['Browser']),
+              showGrid: true,
+              axisLabel: {
+                rotate: 45 // Rotate the labels (degrees)
+              }
+            },
+            yAxis: {
+              type: 'value',
+              name: 'Browser Visits',
+              showGrid: true,
+            },
+            series: [
+              {
+                name: 'Hits',
+                data: SERIES_DATA.sort(order_by_name).map(row => row['Visits']),
+                type: 'bar',
+                color: '#{color}',
+                label: {
+                  show: true,
+                  position: 'top'
+                },
+              },
+            ]
+          }
+          function order_by_name(a, b) {
+            return a['Browser'] < b['Browser'] ? -1 : 1
+          }
+          ",
+      }
+    end
+
+    def platforms(data, header: %w[Platform Visits], column_alignment: %i[left right], color: "#d30001")
+      {
+        title: "Platforms",
+        header:,
+        column_alignment:,
+        rows: data[:platforms],
+        echarts_spec: "{
+            toolbox: {
+               feature: {
+                 saveAsImage: {},
+               }
+            },
+            tooltip: {
+               trigger: 'axis'
+            },
+            xAxis: {
+              type: 'category',
+              data: SERIES_DATA.sort(order_by_platform).map(row => row['Platform']),
+              showGrid: true,
+              axisLabel: {
+                rotate: 45 // Rotate the labels by 90 degrees
+              }
+            },
+            yAxis: {
+              type: 'value',
+              name: 'Platform Visits',
+              showGrid: true,
+            },
+            series: [
+              {
+                name: 'Visits',
+                data: SERIES_DATA.sort(order_by_platform).map(row => row['Visits']),
+                type: 'bar',
+                color: '#{color}',
+                label: {
+                  show: true,
+                  position: 'top'
+                },
+              },
+            ]
+          }
+          function order_by_platform(a, b) {
+            return a['Platform'] < b['Platform'] ? -1 : 1
+          }",
+      }
+    end
+
+    def ips(data, header: %w[IPs Hits Country], column_alignment: %i[left right left], palette: :rails)
+      {
+        title: "IPs",
+        header:,
+        column_alignment:,
+        # must be like raw_html_height below
+        raw_html_height: "500px",
+        raw_html: "
+            <style>
+            #{countries_css_styles(data[:countries], palette:)}
+            </style>
+            #{File.read(File.join(File.dirname(__FILE__), "templates", "world.svg"))}
+          ",
+        rows: data[:ips]
+      }
+    end
+
+    def countries(data, header: ["Country", "Hits", "IPs", "IP List"], column_alignment: %i[left right left left], color: "#D30001")
+      {
+        title: "Countries",
+        header:,
+        column_alignment: ,
+        rows: countries_table(data[:countries]),
+        # must be like raw_html_height above
+        echarts_height: "500px",
+        echarts_spec: "{
+            tooltip: {
+                trigger: 'axis',
+                axisPointer: {
+                  type: 'shadow'
+                }
+            },
+            xAxis: {
+              type: 'value',
+              boundaryGap: [0, 0.01]
+            },
+            yAxis: {
+              type: 'category',
+              data: SERIES_DATA.sort(order_by_hits).map(row => row['Country'] ),
+            },
+            series: [
+              {
+                 type: 'bar',
+                 data: SERIES_DATA.sort(order_by_hits).map(row => row['Hits'] ),
+                 color: '#{color}',
+                 label: {
+                    show: true,
+                    position: 'right'
+                 },
+              },
+            ]
+          };
+
+          function order_by_hits(a, b) {
+            return Number(a['Hits']) < Number(b['Hits']) ? -1 : 1
+          }
+          "
+      }
+    end
+
     def session_report_spec(data)
       {
         title: "Sessions",
@@ -96,10 +287,182 @@ module LogSense
       {
         title: "IP per hour",
         header: ["IP"] + (0..23).map { |hour| hour.to_s },
-        column_alignment: [:left] + [:right] * 24,
+        column_alignment: %i[left] + (%i[right] * 24),
         rows: data,
         col: "small-12 cell"
       }
     end
+
+    def total_statuses(data)
+      {
+        title: "Statuses",
+        header: %w[Status Count],
+        column_alignment: %i[left right],
+        rows: data[:statuses],
+        echarts_spec: "{
+            xAxis: {
+              type: 'category',
+              data: SERIES_DATA.map(row => row['Status'])
+            },
+            yAxis: {
+              type: 'value'
+            },
+            tooltip: {
+               trigger: 'axis'
+            },
+            series: [
+              {
+                data: SERIES_DATA.map(row => {
+                  var color;
+                  var first_char = row['Status'].slice(0, 1)
+                  switch (first_char) {
+                    case '2':
+                      color = '#218521';
+                      break;
+                    case '3':
+                      color = '#FF8C00';
+                      break;
+                    case '4':
+                      color = '#A52A2A';
+                      break
+                    case '5':
+                      color = '#000000';
+                      break;
+                    default:
+                      color = '#4C78A8';
+                  }
+                  return {
+                    value: row['Count'],
+                    itemStyle: { color: color }
+                  }
+                }),
+                type: 'bar',
+                label: {
+                   show: true,
+                   position: 'top'
+                },
+              }
+            ]
+          }",
+      }
+    end
+
+    def daily_statuses(data)
+      {
+        title: "Statuses by Day",
+        header: %w[Date S_2xx S_3xx S_4xx S_5xx],
+        column_alignment: %i[left right right right right],
+        rows: data[:statuses_by_day],
+        echarts_spec: "{
+            xAxis: {
+              type: 'category',
+              data: SERIES_DATA.map(row => row['Date'])
+            },
+            yAxis: {
+              type: 'value'
+            },
+            tooltip: {
+               trigger: 'axis'
+            },
+            series: [
+              {
+                data: SERIES_DATA.map(row => row['S_2xx']),
+                type: 'bar',
+                color: '#218521',
+                stack: 'total',
+                label: {
+                   show: true,
+                   position: 'right'
+                },
+              },
+              {
+                data: SERIES_DATA.map(row => row['S_3xx']),
+                type: 'bar',
+                color: '#FF8C00',
+                stack: 'total',
+                label: {
+                   show: true,
+                   position: 'right'
+                },
+              },
+              {
+                data: SERIES_DATA.map(row => row['S_4xx']),
+                type: 'bar',
+                color: '#A52A2A',
+                stack: 'total',
+                label: {
+                   show: true,
+                   position: 'right'
+                },
+              },
+              {
+                data: SERIES_DATA.map(row => row['S_5xx']),
+                type: 'bar',
+                color: '#000000',
+                stack: 'total',
+                label: {
+                   show: true,
+                   position: 'right'
+                },
+              },
+            ]
+          }",
+      }
+    end
+
+    private
+
+    def countries_css_styles(country_data, palette: :rails)
+      country_and_hits = country_data&.map { |k, v|
+        [k, v.map { |x| x[1] }.inject(&:+)]
+      }
+      max = country_and_hits.map { |x| x[1] }.max
+
+      country_and_hits.map do |element|
+        underscored = (element[0] || "").gsub(" ", "_")
+        bin = bin(element[1], max:)
+        <<-EOS
+         /* bin: #{bin} */
+         .#{underscored}, ##{underscored}, path[name="#{underscored}"] {
+           fill: #{fill_color(bin, palette:)}
+         }
+        EOS
+      end.join("\n")
+    end
+
+    # return the fill colors for the map
+    # https://www.learnui.design/tools/data-color-picker.html#single
+    def fill_color(bin, palette: :rails)
+      colors = if palette == :rails
+                 ["#fff2e2", "#f9ddbe", "#f4c79b", "#efb07b", "#ea985e",
+                  "#e57f43", "#e0632a", "#da4314", "#d30001"]
+               else
+                 ["#e3ffff", "#cbedf1", "#b3dce4", "#9dcad7", "#87b8cc",
+                  "#74a6c0", "#6394b5", "#5482a9", "#48709c"]
+               end
+
+      colors[bin] || colors.last
+    end
+
+    # make number_of_bins bins between 0 and max and return in which bin
+    # number belongs to
+    def bin(number, number_of_bins: 9, max: 100)
+      ((number / max.to_f) * number_of_bins).to_i
+    end
+
+    # { country => [[ip, visit, country], ...]
+    def countries_table(data, limit: 15)
+      by_country = data&.map { |k, v|
+        [
+          k || "-",
+          v.map { |x| x[1] }.inject(&:+),
+          v.map { |x| x[0] }.uniq.size,
+          v.map { |x| x[0] }.join(WORDS_SEPARATOR)
+        ]
+      }&.sort { |x, y| x[0] <=> y[0] }
+
+      # return the first limit countries
+      (by_country || [])[0..limit - 1]
+    end
   end
 end

data/lib/log_sense/templates/_apache_theme.css

@@ -0,0 +1,35 @@
+:root {
+    --color: #222222;
+    --link-color: #4878C7;
+    --link-hover: #20365A;
+    --background: white;
+
+    --sidebar-background: #222222;
+    --sidebar-color: white;
+    --sidebar-link-color: white;
+    --sidebar-link-hover: #FFF5C3;
+
+    --accent-1: #222222;
+    --row-background: white;
+    --row-stripe: #FAFAFA;
+    --row-border: #D0D0D0;
+}
+
+@media (prefers-color-scheme: dark) {
+    :root {
+        --color: white;
+        --link-color: #7FA1D8;
+        --link-hover: #B6C9E9;
+        --background: #222222;
+
+        --sidebar-background: #444444;
+        --sidebar-color: white;
+        --sidebar-link-color: white;
+        --sidebar-link-hover: #FFF5C3;
+
+        --accent-1: white;
+        --row-background: #222222;
+        --row-stripe: #2F2F2F;
+        --row-border: #444444;
+    }
+}

data/lib/log_sense/templates/_navigation.html.erb

@@ -12,11 +12,11 @@
     <% end %>
   </ul>
 
-  <p>
+  <div class="generated-by">
     Generated by
     <a href="https://github.com/avillafiorita/log_sense">LogSense</a><br />
     version <%= LogSense::VERSION %><br />
     on <%= DateTime.now.strftime("%Y-%m-%d %H:%M") %>.<br />
     <a href='https://db-ip.com'>IP Geolocation by DB-IP</a>
-  </p>
+  </div>
 </nav>

data/lib/log_sense/templates/_rails_theme.css

@@ -0,0 +1,36 @@
+:root {
+    --color: #222222;
+    --link-color: #D30001;
+    --link-hover: #5F0000;
+    --background: white;
+
+    --sidebar-background: #222222;
+    --sidebar-color: white;
+    --sidebar-link-color: white;
+    --sidebar-link-hover: #FFF5C3;
+
+    --accent-1: #222222;
+    --row-background: white;
+    --row-stripe: #FAFAFA;
+    --row-border: #D0D0D0;
+}
+
+@media (prefers-color-scheme: dark) {
+    :root {
+        --color: white;
+        --link-color: #D30001;
+        --link-hover: #ED9999;
+        --background: #222222;
+
+        --sidebar-background: #444444;
+        --sidebar-color: white;
+        --sidebar-link-color: white;
+        --sidebar-link-hover: #FFF5C3;
+
+        --accent-1: white;
+        --row-background: #222222;
+        --row-stripe: #2F2F2F;
+        --row-border: #444444;
+    }
+}
+

data/lib/log_sense/templates/_stylesheet.css

@@ -1,35 +1,26 @@
-:root {
-    --color: #222222;
-    --background: white;
-    --main-accent: #1C1C1C;
-}
-
-/*
-@media (prefers-color-scheme: dark) {
-    :root {
-        --color: white;
-        --background: #222222;
-        --main-accent: #E3E3E3
-    }
-}
-*/
-
 :root {
   --font-family: Inter, Helvetica, Arial, sans-serif;
-
 }
 
 body {
     font-family: var(--font-family);
-    /* font-size: 12px; */
     font-size: 0.86rem;
     color: var(--color);
     background: var(--background);
 }
 
+a {
+    color: var(--link-color);
+}
+
+a:hover {
+    color: var(--link-hover);
+    text-decoration: underline;
+}
+
 #offCanvas {
-    color: var(--background);
-    background: var(--color);
+    color: var(--sidebar-color);
+    background: var(--sidebar-background);
     border-right: none;
     box-shadow: none;
     padding: 0.5rem;
@@ -38,7 +29,11 @@ body {
 }
 
 #offCanvas a {
-    color: var(--main-accent);
+    color: var(--sidebar-link-color);
+}
+
+#offCanvas a:hover {
+    color: var(--sidebar-link-hover);
 }
 
 nav {
@@ -47,11 +42,15 @@ nav {
 
 nav h2 {
     padding-left: 0rem;
-}    
+}
 
-#toggle-button {
-    font-size: 2rem;
-    margin-left: 1rem;
+.nav-item {
+    margin-bottom: 0.35rem;
+}
+
+.generated-by {
+    position: fixed;
+    bottom: 0.5rem;
 }
 
 .main-section {
@@ -61,28 +60,55 @@ h1 {
     font-family: var(--font-family);
     font-size: 2rem;
     font-weight: bold;
-    color: var(--main-accent);
+    color: var(--accent-1);
+}
+
+/* the hamburger menu */
+h1 button {
+    color: var(--color);
 }
 
 h2 {
     font-family: var(--font-family);
     font-size: 1.6rem;
     font-weight: bold;
-    color: var(--main-accent);
+    color: var(--accent-1);
 }
 
-th, td {
-    padding-top: 0.2rem !important;
-    padding-bottom: 0.2rem !important;
+.dt-length label, .dt-length select, .dt-search label, .dt-search input {
+    color: var(--color);
+    background: var(--background-color);
 }
 
-.dataTables_wrapper {
-    width: 100%;
-    padding: 0.5rem;
+.dt-search input:focus {
+    color: var(--color);
+    background: var(--background-color);
+}
+
+table thead, table tbody, table tfoot {
+    border-color: var(--row-border) !important;
+}
+
+table tr {
+    border-color: var(--row-border) !important;
+}
+
+table tr td, table tr th {
+    color: var(--color) !important;
+    background: var(--row-background) !important;
 }
 
-table.dataTable > tbody > tr:nth-child(2n) {
-    border-shadow: none !important;
+table tr td {
+    border-color: var(--row-border) !important;
+}
+
+table > tbody > tr:nth-child(2n) > * {
+    box-shadow:inset 0 0 0 9999px var(--row-stripe) !important;
+}
+
+th, td {
+    padding-top: 0.2rem !important;
+    padding-bottom: 0.2rem !important;
 }
 
 article {
@@ -100,11 +126,6 @@ input, select {
     padding: 0.2rem 0.4rem 0.2rem 0.4rem !important;
 }
 
-.dataTables_info {
-    font-size: small;
-    color: rgb(202, 202, 202);
-}
-
 ul.pagination, li.paginate_button {
     font-size: small;
     margin-top: 0px !important;
@@ -123,18 +144,18 @@ ul.pagination, li.paginate_button {
 }
 
 .stats-list .stats-list-positive {
-    color: #228b22;
+    color: #228B22;
 }
 
 .stats-list .stats-list-negative {
-    color: #a52a2a;
+    color: #A52A2A;
 }
 
 .stats-list > li {
     display: inline-block;
     margin-right: 10px;
     padding-right: 10px;
-    border-right: 1px solid #CACACA;
+    border-right: 1px solid var(--color);
     text-align: center;
     font-size: 1.2em;
     font-weight: bold;
@@ -161,4 +182,3 @@ td  {
     vertical-align: top;
 }
 
-

data/lib/log_sense/templates/report_html.erb

@@ -14,25 +14,27 @@
     <%= render "cdn_links.html.erb" %>
 
     <style>
+     <%= render @format_specific_theme %>
      <%= render "stylesheet.css" %>
-
      <%= render @format_specific_css %>
     </style>
   </head>
 
   <body>
     <div class="off-canvas-wrapper">
-      <div class="off-canvas position-left" id="offCanvas" data-off-canvas>
+      <div class="off-canvas position-left reveal-for-large" id="offCanvas" data-off-canvas>
         <%= render "navigation.html.erb",
                    menus: @reports.map { |x| x[:title] } %>
       </div>
       <div class="off-canvas-content" data-off-canvas-content>
-        <button id="toggle-button" type="button" data-toggle="offCanvas">
-          &#9776;
-        </button>
 
         <section class="main-section grid-container fluid">
-          <h1><%= options[:title] || "Log Sense #{@report_title} Log Report" %></h1>
+          <h1>
+            <button id="toggle-button" type="button" data-toggle="offCanvas" class="hide-for-large">
+              &#9776;
+            </button>
+            <%= options[:title] || "Log Sense #{@report_title} Log Report" %>
+          </h1>
 
           <p>
             <b>Input File(s):</b>
@@ -89,6 +91,12 @@
 
                   </script>
                 <% end %>
+                <% if report[:raw_html] %>
+                  <% height = report[:raw_html_height] || "400px"%>
+                  <div id="raw-html-#{index}" style="width: 100%;height: <%= height %>">
+                    <%= report[:raw_html] %>
+                  </div>
+                <% end %>
                 <% if report[:rows] %>
                   <%= render "output_table.html.erb", report: report, index: index %>
                 <% end %>