dashboard: use Grafana 11 color scheme in overview table

Before this patch, older Grafana 6 color scheme were used for overview panel. It was fine for Grafana from 8 to 10, but don't work properly with Grafana 11. After this patch, the panel works properly with Grafana 11 and newer. For Grafana 9 and 10 everything works fine, except for row coloring: only single cell is colored [1]. For Grafana 8 and older, table column hiding no longer works properly so it's simpler for us to treat it as unsupported since it's EOLed 1 year and 3 months ago [2]. 1. grafana/grafana#27542 2. https://endoflife.date/grafana Follows #234
tarantool · DifferentialOrange · Oct 4, 2024 · Aug 8, 2024 · Oct 3, 2024 · Oct 3, 2024
commit b564c2c0d55967a99f1d259dc156bc3e0c7e1c63
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -6,6 +6,11 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+### Changed
+- Use Grafana 11 color scheme for Prometheus cluster overview panel (#234)
+- Drop Grafana 8 support (#234)
+- Bump recommended requirements to Grafana 11 (#234)
+
 ### Fixed
 - Prometheus cluster overview panel not works for Grafana 11+ (#234)
 

diff --git a/dashboard/build/dashboard.libsonnet b/dashboard/build/dashboard.libsonnet
@@ -170,7 +170,7 @@ function(cfg) std.foldl(
         type='grafana',
         id='grafana',
         name='Grafana',
-        version='8.0.0'
+        version='9.0.0'
       ).addRequired(
         type='panel',
         id='graph',

diff --git a/dashboard/panels/cluster.libsonnet b/dashboard/panels/cluster.libsonnet
@@ -27,62 +27,17 @@ local prometheus = grafana.prometheus;
       Instance alias filtering is disabled here.
 
       If Prometheus job filter is not specified, displays running instances
-      and ignores unreachable instances (we have no specific source to fetch)
+      and ignores unreachable instances (we have no specific source to fetch).
+
+      Color scheme is expected to work properly only for Grafana 11+.
     |||),
   ):: tablePanel.new(
     title=title,
     description=description,
     datasource=cfg.datasource,
 
-    styles=[
-      {
-        alias: 'Instance alias',
-        pattern: 'alias',
-        thresholds: [],
-        type: 'string',
-        mappingType: 1,
-      },
-      {
-        alias: 'Instance URI',
-        pattern: 'instance',
-        thresholds: [],
-        type: 'string',
-        mappingType: 1,
-      },
-      {
-        alias: 'Uptime',
-        colorMode: 'row',
-        colors: [
-          'rgba(245, 54, 54, 0.9)',
-          'rgba(237, 129, 40, 0.89)',
-          'rgba(50, 172, 45, 0.97)',
-        ],
-        decimals: 0,
-        mappingType: 1,
-        pattern: 'Value',
-        thresholds: ['0.1', '0.1'],
-        type: 'number',
-        unit: 's',
-      },
-      {
-        alias: 'job',
-        pattern: 'job',
-        thresholds: [],
-        type: 'hidden',
-      },
-      {
-        alias: 'Time',
-        pattern: 'Time',
-        thresholds: [],
-        type: 'hidden',
-      },
-      {
-        alias: '__name__',
-        pattern: '__name__',
-        thresholds: [],
-        type: 'hidden',
-      },
-    ],
+    styles=null,
+
     sort={
       col: 2,
       desc: false,
@@ -114,7 +69,163 @@ local prometheus = grafana.prometheus;
       )
     else if cfg.type == variable.datasource_type.influxdb then
       error 'InfluxDB target is not supported yet'
-  ) { gridPos: { w: 12, h: 8 } },
+  ) {
+    // Workaround is expected to be removed after migrating to
+    // https://github.com/tarantool/grafana-dashboard/issues/215
+    fieldConfig: {
+      defaults: {
+        custom: {
+          cellOptions: {
+            type: 'auto',
+          },
+          inspect: false,
+        },
+        mappings: [],
+        thresholds: {
+          mode: 'absolute',
+          steps: [
+            {
+              color: 'green',
+              value: null,
+            },
+            {
+              color: 'red',
+              value: 80,
+            },
+          ],
+        },
+      },
+      overrides: [
+        {
+          matcher: {
+            id: 'byName',
+            options: 'alias',
+          },
+          properties: [
+            {
+              id: 'displayName',
+              value: 'Instance alias',
+            },
+            {
+              id: 'custom.align',
+            },
+          ],
+        },
+        {
+          matcher: {
+            id: 'byName',
+            options: 'instance',
+          },
+          properties: [
+            {
+              id: 'displayName',
+              value: 'Instance URI',
+            },
+            {
+              id: 'custom.align',
+            },
+          ],
+        },
+        {
+          matcher: {
+            id: 'byName',
+            options: 'Value',
+          },
+          properties: [
+            {
+              id: 'displayName',
+              value: 'Uptime',
+            },
+            {
+              id: 'unit',
+              value: 's',
+            },
+            {
+              id: 'custom.cellOptions',
+              value: {
+                applyToRow: true,
+                type: 'color-background',
+              },
+            },
+            {
+              id: 'custom.align',
+            },
+            {
+              id: 'thresholds',
+              value: {
+                mode: 'absolute',
+                steps: [
+                  {
+                    color: 'rgba(245, 54, 54, 0.9)',
+                    value: null,
+                  },
+                  {
+                    color: 'rgba(50, 172, 45, 0.97)',
+                    value: 0.1,
+                  },
+                ],
+              },
+            },
+          ],
+        },
+        {
+          matcher: {
+            id: 'byName',
+            options: 'job',
+          },
+          properties: [
+            {
+              id: 'displayName',
+              value: 'job',
+            },
+            {
+              id: 'custom.hidden',
+              value: true,
+            },
+            {
+              id: 'custom.align',
+            },
+          ],
+        },
+        {
+          matcher: {
+            id: 'byName',
+            options: 'job',
+          },
+          properties: [
+            {
+              id: 'custom.hidden',
+              value: true,
+            },
+          ],
+        },
+        {
+          matcher: {
+            id: 'byName',
+            options: 'Time',
+          },
+          properties: [
+            {
+              id: 'custom.hidden',
+              value: true,
+            },
+          ],
+        },
+        {
+          matcher: {
+            id: 'byName',
+            options: '__name__',
+          },
+          properties: [
+            {
+              id: 'custom.hidden',
+              value: true,
+            },
+          ],
+        },
+      ],
+    },
+  } { gridPos: { w: 12, h: 8 } },
 
   local title_workaround(  // Workaround for missing options.fieldOptions.defaults.title https://github.com/grafana/grafonnet-lib/pull/260
     stat_panel,

diff --git a/docker-compose.cartridge.yml b/docker-compose.cartridge.yml
@@ -58,7 +58,7 @@ services:
       - ./example_cluster/prometheus/alerts.yml:/etc/prometheus/cartridge_alerts.yml
 
   grafana:
-    image: grafana/grafana:8.1.3
+    image: grafana/grafana:11.2.2
     environment: 
       GF_SECURITY_DISABLE_INITIAL_ADMIN_CREATION: "true"
       GF_AUTH_ANONYMOUS_ENABLED: "true"

diff --git a/docker-compose.localapp.yml b/docker-compose.localapp.yml
@@ -37,7 +37,7 @@ services:
       - ./example_cluster/prometheus/alerts.yml:/etc/prometheus/alerts.yml
 
   grafana:
-    image: grafana/grafana:8.1.5
+    image: grafana/grafana:11.2.2
     environment: 
       GF_SECURITY_DISABLE_INITIAL_ADMIN_CREATION: "true"
       GF_AUTH_ANONYMOUS_ENABLED: "true"

diff --git a/docker-compose.tdg.yml b/docker-compose.tdg.yml
@@ -65,7 +65,7 @@ services:
       - ./example_cluster/prometheus/prometheus.tdg.yml:/etc/prometheus/prometheus.yml
 
   grafana:
-    image: grafana/grafana:8.1.5
+    image: grafana/grafana:11.2.2
     environment: 
       GF_SECURITY_DISABLE_INITIAL_ADMIN_CREATION: "true"
       GF_AUTH_ANONYMOUS_ENABLED: "true"

diff --git a/docker-compose.yml b/docker-compose.yml
@@ -58,7 +58,7 @@ services:
       - ./example_cluster/prometheus/alerts.yml:/etc/prometheus/alerts.yml
 
   grafana:
-    image: grafana/grafana:8.1.3
+    image: grafana/grafana:11.2.2
     environment: 
       GF_SECURITY_DISABLE_INITIAL_ADMIN_CREATION: "true"
       GF_AUTH_ANONYMOUS_ENABLED: "true"

diff --git a/tests/InfluxDB/dashboard_cartridge_compiled.json b/tests/InfluxDB/dashboard_cartridge_compiled.json
@@ -5,7 +5,7 @@
          "id": "grafana",
          "name": "Grafana",
          "type": "grafana",
-         "version": "8.0.0"
+         "version": "9.0.0"
       },
       {
          "id": "graph",

diff --git a/tests/InfluxDB/dashboard_custom_compiled.json b/tests/InfluxDB/dashboard_custom_compiled.json
@@ -5,7 +5,7 @@
          "id": "grafana",
          "name": "Grafana",
          "type": "grafana",
-         "version": "8.0.0"
+         "version": "9.0.0"
       },
       {
          "id": "graph",

diff --git a/tests/InfluxDB/dashboard_tarantool3_compiled.json b/tests/InfluxDB/dashboard_tarantool3_compiled.json
@@ -5,7 +5,7 @@
          "id": "grafana",
          "name": "Grafana",
          "type": "grafana",
-         "version": "8.0.0"
+         "version": "9.0.0"
       },
       {
          "id": "graph",

diff --git a/tests/InfluxDB/dashboard_tdg_compiled.json b/tests/InfluxDB/dashboard_tdg_compiled.json
@@ -5,7 +5,7 @@
          "id": "grafana",
          "name": "Grafana",
          "type": "grafana",
-         "version": "8.0.0"
+         "version": "9.0.0"
       },
       {
          "id": "graph",

diff --git a/tests/InfluxDB/dashboard_with_custom_panels_compiled.json b/tests/InfluxDB/dashboard_with_custom_panels_compiled.json
@@ -5,7 +5,7 @@
          "id": "grafana",
          "name": "Grafana",
          "type": "grafana",
-         "version": "8.0.0"
+         "version": "9.0.0"
       },
       {
          "id": "graph",