✨(dashboard) add video event distribution during the video

The video event distribution during the video could be a useful indicator in the video details dashboard.
openfun · Jun 30, 2021 · 3d4a791 · 3d4a791
1 parent 2567fb5
commit 3d4a791
Show file tree

Hide file tree

Showing 5 changed files with 119 additions and 2 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -10,6 +10,8 @@ Changelog](https://keepachangelog.com/en/1.0.0/), and this project adheres to
 
 ### Added
 
+- Video details dashboard new panel: video events distribution along the video
+  timeline
 - Course video events distribution panel in details Dashboard
 - Completion threshold metrics in details Dashboard
 - Complete views, unique complete views panels in details Dashboard

diff --git a/Makefile b/Makefile
@@ -14,6 +14,9 @@ WAIT_GRAFANA         = $(COMPOSE_RUN) dockerize -wait http://grafana:3000 -timeo
 sources := $(shell find src/ -type f -name '*.jsonnet')
 targets := $(patsubst src/%.jsonnet,var/lib/grafana/%.json,$(sources))
 
+# -- Plugins
+BAR_CHART_PLUGIN = https://github.com/gipong/grafana-groupedbarchart-panel/archive/refs/heads/master.zip
+
 default: help
 
 # ==============================================================================
@@ -25,14 +28,26 @@ var/lib/grafana/%.json: src/%.jsonnet
 	mkdir -p $(shell dirname $@)
 	bin/jsonnet -o /$@ $<
 
+var/lib/grafana/plugins:
+	mkdir -p ./var/lib/grafana/plugins
+
 tree: \
-	var/lib/grafana
+	var/lib/grafana \
+	var/lib/grafana/plugins
 .PHONY: tree
 
+# ==============================================================================
+# PLUGINS
+
+var/lib/grafana/plugins/grafana-groupedbarchart-panel-master:
+	curl -Lo /tmp/grafana_bar_chart_plugin.zip $(BAR_CHART_PLUGIN)
+	unzip /tmp/grafana_bar_chart_plugin.zip -d ./var/lib/grafana/plugins/
+
 # ==============================================================================
 # RULES
 bootstrap: \
 	tree \
+	plugins \
 	build \
 	compile
 bootstrap: ## bootstrap the application
@@ -42,14 +57,20 @@ build: ## build potsie development image
 	@$(COMPOSE) build app
 .PHONY: build
 
+clean: \
+	down
+clean: ## remove project files and containers (warning: it removes the database container)
+	rm -rf ./var
+.PHONY: clean
+
 compile: \
 	tree \
 	$(targets)
 compile: ## compile jsonnet sources to json
 .PHONY: compile
 
 down: ## remove stack (warning: it removes the database container)
-	@$(COMPOSE) down
+	@$(COMPOSE) down || echo WARNING: unable to remove the stack. Try to stop linked containers or networks first.
 .PHONY: down
 
 format: ## format Jsonnet sources
@@ -64,6 +85,12 @@ logs: ## display grafana logs (follow mode)
 	@$(COMPOSE) logs -f grafana
 .PHONY: logs
 
+plugins: \
+	tree \
+	var/lib/grafana/plugins/grafana-groupedbarchart-panel-master
+plugins: ## download plugins
+.PHONY: plugins
+
 restart: ## restart grafana
 	@$(COMPOSE) restart grafana
 .PHONY: restart

diff --git a/docker-compose.yml b/docker-compose.yml
@@ -14,6 +14,7 @@ services:
     volumes:
       - ./etc/grafana/provisioning/dashboards:/etc/grafana/provisioning/dashboards
       - ./etc/grafana/provisioning/datasources:/etc/grafana/provisioning/datasources
+      - ./var/lib/grafana/plugins:/var/lib/grafana/plugins/
       - ./var/lib/grafana/dashboards:/var/lib/grafana/dashboards
     env_file:
       - env.d/grafana

diff --git a/env.d/grafana b/env.d/grafana
@@ -7,3 +7,7 @@ GF_DATABASE_PASSWORD=pass
 
 # Auth
 GF_SECURITY_ADMIN_PASSWORD=pass
+
+# Plugins
+GF_PATHS_PLUGINS=/var/lib/grafana/plugins/
+GF_PLUGINS_ALLOW_LOADING_UNSIGNED_PLUGINS=grafana-groupedbarchart-panel
diff --git a/src/dashboards/videos/details.jsonnet b/src/dashboards/videos/details.jsonnet
@@ -97,6 +97,15 @@ dashboard.new(
     refresh='time'
   )
 )
+.addTemplate(
+  template.custom(
+    name='EVENT_GROUP_INTERVAL',
+    current='30',
+    label='Event group interval',
+    query='1,10,20,30,60,120,180,300,600',
+    refresh='time'
+  )
+)
 .addPanel(
   row.new(title='Views metrics', collapse=false),
   gridPos={ x: 0, y: 0, w: 24, h: 1 }
@@ -449,3 +458,77 @@ dashboard.new(
   ),
   gridPos={ x: 12, y: 8, w: 12, h: 9 }
 )
+.addPanel(
+  {
+    title: 'Event distribution during the video',
+    description: |||
+      We divide the video duration into equal intervals and for each interval display
+      its event distribution.
+      The interval size is controlled by the `Event group interval` variable
+    |||,
+    aliasColors: {},
+    avgLineShow: false,
+    barValuesShow: true,
+    cacheTimeout: null,
+    chartType: 'stacked bar chart',
+    colorSch: [],
+    datasource: 'lrs',
+    fontColor: '#fff',
+    fontSize: '80%',
+    format: 'short',
+    height: 400,
+    id: 9,
+    interval: null,
+    labelOrientation: 'horizontal',
+    labelSpace: 40,
+    legend: {
+      position: 'On graph',
+      show: true,
+    },
+    links: [],
+    maxDataPoints: 3,
+    nullPointMode: 'connected',
+    orientation: 'vertical',
+    strokeWidth: 1,
+    targets: [
+      {
+        alias: '',
+        bucketAggs: [
+          {
+            field: result_extensions_time_field,
+            id: '2',
+            settings: {
+              interval: '$EVENT_GROUP_INTERVAL',
+              min_doc_count: '1',
+            },
+            type: 'histogram',
+          },
+          {
+            field: verb_display_en_us_field,
+            id: '3',
+            settings: {
+              min_doc_count: '0',
+              order: 'desc',
+              orderBy: '_term',
+              size: '0',
+            },
+            type: 'terms',
+          },
+        ],
+        metrics: [
+          {
+            id: '1',
+            type: 'count',
+          },
+        ],
+        query: video_id_query,
+        refId: 'A',
+        timeField: 'timestamp',
+      },
+    ],
+    type: 'grafana-groupedbarchart-panel',
+    valueName: 'current',
+    width: 800,
+  },
+  gridPos={ x: 0, y: 17, w: 24, h: 16 }
+)