WIP: We fill with 0s the buckets that have missing values for the histogra…

build.test.js

@@ -6,9 +6,7 @@ function getDashboard(dashboard) {
     const options = {
         table: "basicrum_friends_webperf_rum_events",
         datasourceUid: "A0Wl5Mc4z",
-        filterMap: {
-            "hosts":"testHosts",
-        },
+        filterMap: {},
     }
 
     builder.build(dashboard, options);

docker-compose.yaml

@@ -12,13 +12,16 @@ services:
       - ./build/dashboards:/etc/grafana/provisioning/dashboards
 
   basicrum_clickhouse_server_build:
-    image: clickhouse/clickhouse-server:22.8
+    image: clickhouse/clickhouse-server:23.6.2.18-alpine
     env_file:
       - .env
     volumes:
       - ./clickhouse/data:/var/lib/clickhouse
       - ./setup/ch/users.d:/etc/clickhouse-server/users.d
       - ./setup/ch/init-schema:/docker-entrypoint-initdb.d
+    ports:
+      - 8153:8123
+      - 9005:9000
 
     ulimits:
       nproc: 65535

fill-test-data.js

@@ -47,7 +47,7 @@ const params = {
     "nt_first_paint": "1700515101401",
     "nt_red_cnt": "1",
     "nt_nav_type": "0",
-    "u": "https://calendar.perfplanet.com/",
+    "u": "https://www.example.com/",
     "v": "1.737.60",
     "sv": "14",
     "vsm": "p",
@@ -114,7 +114,7 @@ formBody = formBody.join("&");
 
 console.log(formBody);
 
-fetch('https://ocetinssl.basicrum.com/beacon/catcher', {
+fetch('http://localhost:8087/beacon/catcher', {
   method: 'POST',
   headers: {
     'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'

setup/ch/init-schema/3.sql

@@ -0,0 +1,8 @@
+CREATE TABLE IF NOT EXISTS default.webperf_rum_hostnames (
+    hostname                        LowCardinality(String),
+    updated_at                      DateTime64(3) DEFAULT now()
+)
+ENGINE = ReplacingMergeTree
+PARTITION BY hostname
+ORDER BY hostname
+SETTINGS index_granularity = 8192

templates/ae3e-plotly-panel/default/layout.json

@@ -15,6 +15,11 @@
     "plot_bgcolor": "rgba(0, 0, 0, 0)",
     "xaxis": {
         "autorange": false,
-        "tickmode": "array"
+        "tickmode": "array",
+        "fixedrange": true
+    },
+    "yaxis": {
+        "fixedrange": true,
+        "tickformat": "d"
     }
 }

templates/ae3e-plotly-panel/default/query.sql

@@ -8,7 +8,9 @@ WHERE
     $timeFilter
     AND event_type = 'visit_page'
     AND browser_name = '$$browser_name'
+    AND $$column_name < 12000
     $conditionalTest(AND hostname in($hostname), $hostname)
 
 GROUP BY value
-ORDER BY value
+ORDER BY value
+WITH FILL FROM 0 TO 12000 STEP $bucket_size

templates/ae3e-plotly-panel/default/script.js

@@ -4,8 +4,17 @@ var yValue = [];
 var dataFound = true;
 
 try {
-    var xValue = data.series[0].fields[0].values.buffer;
-    var yValue = data.series[0].fields[1].values.buffer;
+    if (data.series[0].fields[0].values.buffer !== undefined
+        && data.series[0].fields[1].values.buffer !== undefined)
+    {
+        xValue = data.series[0].fields[0].values.buffer;
+        yValue = data.series[0].fields[1].values.buffer;
+    }
+    else
+    {
+        xValue = data.series[0].fields[0].values;
+        yValue = data.series[0].fields[1].values; 
+    }
 }
 catch (e) {
     dataFound = false

templates/ae3e-plotly-panel/fcp/query.sql

@@ -13,4 +13,5 @@ WHERE
     $conditionalTest(AND hostname in($hostname), $hostname)
 
 GROUP BY value
-ORDER BY value
+ORDER BY value
+WITH FILL FROM 0 TO 10000 STEP $bucket_size

templates/ae3e-plotly-panel/fid/query.sql

@@ -12,4 +12,5 @@ WHERE
     $conditionalTest(AND hostname in($hostname), $hostname)
 
 GROUP BY value
-ORDER BY value
+ORDER BY value
+WITH FILL FROM 0 TO 500 STEP 20

templates/ae3e-plotly-panel/lcp/query.sql

@@ -13,4 +13,5 @@ WHERE
     $conditionalTest(AND hostname in($hostname), $hostname)
 
 GROUP BY value
-ORDER BY value
+ORDER BY value
+WITH FILL FROM 0 TO 10000 STEP $bucket_size

templates/ae3e-plotly-panel/metric/query.sql

@@ -14,3 +14,4 @@ WHERE
 
 GROUP BY metric_value
 ORDER BY metric_value
+WITH FILL FROM 0 TO 10000 STEP $bucket_size

templates/ae3e-plotly-panel/screen-width/query.sql

@@ -12,3 +12,4 @@ WHERE
 
 GROUP BY screen_width
 ORDER BY screen_width
+WITH FILL FROM 0 TO 2600 STEP 100

templates/dashboards/General.yaml

@@ -2,7 +2,7 @@ apiVersion: 1
 
 providers:
   - name: Basic RUM  # A uniquely identifiable name for the provider
-    folder: Custom   # The folder where to place the dashboards
+    folder: WebPerformance   # The folder where to place the dashboards
     type: file
     options:
       path:  /etc/grafana/provisioning/dashboards

templates/filters/hosts.json

@@ -1,34 +1,19 @@
 {
-    "allValue": "",
-    "current": {
-        "selected": true,
-        "text": ["All"],
-        "value": ["$__all"]
+    "datasource": {
+      "type": "vertamedia-clickhouse-datasource",
+      "uid": "BRUMMUCSTARBUCS"
     },
+    "definition": "select hostname from webperf_rum_hostnames group by hostname\n",
     "hide": 1,
-    "includeAll": true,
-    "label": "Hostname",
+    "includeAll": false,
+    "label": "Host",
     "multi": true,
     "name": "hostname",
-    "options": [
-        {
-            "selected": true,
-            "text": "All",
-            "value": "$__all"
-        },
-        {
-            "selected": false,
-            "text": "example1.com",
-            "value": "example1.com"
-        },
-        {
-            "selected": false,
-            "text": "example2.com",
-            "value": "example2.com"
-        }
-    ],
-    "query": "example1.com : example1.com, example2.com : example2.com",
-    "queryValue": "",
+    "options": [],
+    "query": "select hostname from webperf_rum_hostnames group by hostname\n",
+    "refresh": 1,
+    "regex": "",
     "skipUrlSync": false,
-    "type": "custom"
-}
+    "sort": 1,
+    "type": "query"
+  }

templates/landing-ae3e-plotly-panel/default/layout.json

@@ -14,7 +14,12 @@
     "paper_bgcolor": "rgba(0, 0, 0, 0)",
     "plot_bgcolor": "rgba(0, 0, 0, 0)",
     "xaxis": {
-        "autorange": true,
-        "tickmode": "array"
+        "autorange": false,
+        "tickmode": "array",
+        "fixedrange": true
+    },
+    "yaxis": {
+        "fixedrange": true,
+        "tickformat": "d"
     }
 }

templates/landing-ae3e-plotly-panel/default/query.sql

@@ -13,4 +13,5 @@ WHERE
     $conditionalTest(AND hostname in($hostname), $hostname)
 
 GROUP BY value
-ORDER BY value
+ORDER BY value
+WITH FILL FROM 0 TO 12000 STEP $bucket_size

templates/landing-ae3e-plotly-panel/default/script.js

@@ -4,8 +4,17 @@ var yValue = [];
 var dataFound = true;
 
 try {
-    var xValue = data.series[0].fields[0].values.buffer;
-    var yValue = data.series[0].fields[1].values.buffer;
+    if (data.series[0].fields[0].values.buffer !== undefined
+        && data.series[0].fields[1].values.buffer !== undefined)
+    {
+        xValue = data.series[0].fields[0].values.buffer;
+        yValue = data.series[0].fields[1].values.buffer;
+    }
+    else
+    {
+        xValue = data.series[0].fields[0].values;
+        yValue = data.series[0].fields[1].values; 
+    }
 }
 catch (e) {
     dataFound = false

templates/landing-ae3e-plotly-panel/fcp/query.sql

@@ -14,4 +14,5 @@ WHERE
     $conditionalTest(AND hostname in($hostname), $hostname)
 
 GROUP BY value
-ORDER BY value
+ORDER BY value
+WITH FILL FROM 0 TO 10000 STEP $bucket_size

templates/landing-ae3e-plotly-panel/fid/query.sql

@@ -13,4 +13,5 @@ WHERE
     $conditionalTest(AND hostname in($hostname), $hostname)
 
 GROUP BY value
-ORDER BY value
+ORDER BY value
+WITH FILL FROM 0 TO 500 STEP 20

templates/landing-ae3e-plotly-panel/lcp/query.sql

@@ -14,4 +14,5 @@ WHERE
     $conditionalTest(AND hostname in($hostname), $hostname)
 
 GROUP BY value
-ORDER BY value
+ORDER BY value
+WITH FILL FROM 0 TO 10000 STEP $bucket_size

templates/landing-ae3e-plotly-panel/ttfb/layout.merge.json

@@ -1,6 +1,6 @@
 {
     "xaxis": {
-        "range": [-1, 6],
+        "range": [-100, 8100],
         "ticktext": [
             "1 sec",
             "2 sec",
@@ -9,12 +9,8 @@
             "5 sec",
             "6 sec",
             "7 sec",
-            "8 sec",
-            "9 sec",
-            "10 sec",
-            "11 sec",
-            "12 sec"
+            "8 sec"
         ],
-        "tickvals": [1000, 2000, 3000, 4000, 5000, 6000, 7000, 8000, 9000, 10000, 11000, 12000]
+        "tickvals": [1000, 2000, 3000, 4000, 5000, 6000, 7000, 8000]
     }
 }

templates/landing-ae3e-plotly-panel/ttfb/query.sql

@@ -13,4 +13,5 @@ WHERE
     $conditionalTest(AND hostname in($hostname), $hostname)
 
 GROUP BY value
-ORDER BY value
+ORDER BY value
+WITH FILL FROM 0 TO 12000 STEP $bucket_size