From bb7be72ac55b5c357328ba1b4f262285e40e5e75 Mon Sep 17 00:00:00 2001 From: v-zhuravlev Date: Fri, 24 Oct 2025 09:44:29 +0300 Subject: [PATCH 1/7] Move style choices to design tokens dir Making eaier to manage those choices and override those in the future in one place. --- common-lib/CHANGELOG.md | 3 ++ common-lib/common/main.libsonnet | 1 + .../common/panels/generic/base.libsonnet | 2 +- .../common/panels/generic/stat/base.libsonnet | 5 ++- .../generic/table/cold_hot_gauge.libsonnet | 3 +- .../panels/generic/timeSeries/base.libsonnet | 16 +++----- .../generic/timeSeries/percentage.libsonnet | 3 +- .../generic/timeSeries/threshold.libsonnet | 5 ++- .../timeSeries/topk_percentage.libsonnet | 5 ++- .../hardware/timeSeries/temperature.libsonnet | 7 ++-- .../statusHistory/interface_status.libsonnet | 5 ++- .../panels/requests/stat/duration.libsonnet | 5 ++- .../panels/requests/stat/errors.libsonnet | 5 ++- .../panels/requests/stat/rate.libsonnet | 5 ++- .../panels/requests/timeSeries/base.libsonnet | 1 + .../requests/timeSeries/duration.libsonnet | 6 ++- .../requests/timeSeries/errors.libsonnet | 7 ++-- .../panels/requests/timeSeries/rate.libsonnet | 5 ++- common-lib/common/tokens/colors.libsonnet | 37 +++++++++++++++++++ common-lib/common/tokens/main.libsonnet | 8 ++++ common-lib/common/tokens/timeSeries.libsonnet | 27 ++++++++++++++ 21 files changed, 124 insertions(+), 37 deletions(-) create mode 100644 common-lib/common/tokens/colors.libsonnet create mode 100644 common-lib/common/tokens/main.libsonnet create mode 100644 common-lib/common/tokens/timeSeries.libsonnet diff --git a/common-lib/CHANGELOG.md b/common-lib/CHANGELOG.md index d1192bbd8..557161a4a 100644 --- a/common-lib/CHANGELOG.md +++ b/common-lib/CHANGELOG.md @@ -1,3 +1,6 @@ +# 0.5.0 +- [Panels] feat: Move style choices (colors, line styles) to design tokens directory. + # 0.4.3 - [Signal] fix: No longer aggregates histogram signals after histogram_quantile() as it is pointless aggregation. Aggregation before applying histogram_quantile() is kept and works as expected. diff --git a/common-lib/common/main.libsonnet b/common-lib/common/main.libsonnet index 2fd023f37..450860a8c 100644 --- a/common-lib/common/main.libsonnet +++ b/common-lib/common/main.libsonnet @@ -1,5 +1,6 @@ { annotations: import './annotations/main.libsonnet', + tokens: import './tokens/main.libsonnet', panels: import './panels.libsonnet', variables: import './variables/variables.libsonnet', utils: import './utils.libsonnet', diff --git a/common-lib/common/panels/generic/base.libsonnet b/common-lib/common/panels/generic/base.libsonnet index 067cf534c..6c42ca882 100644 --- a/common-lib/common/panels/generic/base.libsonnet +++ b/common-lib/common/panels/generic/base.libsonnet @@ -6,7 +6,7 @@ local custom = timeSeries.fieldConfig.defaults.custom; local defaults = timeSeries.fieldConfig.defaults; local options = timeSeries.options; -// This is base of ALL panels in the common lib +// This is the base of ALL panels in the common lib { new(targets, description=''): // hidden field to hold styles modifiers diff --git a/common-lib/common/panels/generic/stat/base.libsonnet b/common-lib/common/panels/generic/stat/base.libsonnet index bcfbf9c74..553f13cfe 100644 --- a/common-lib/common/panels/generic/stat/base.libsonnet +++ b/common-lib/common/panels/generic/stat/base.libsonnet @@ -1,4 +1,5 @@ local g = import '../../../g.libsonnet'; +local tokens = import '../../../tokens/main.libsonnet'; local stat = g.panel.stat; local base = import '../base.libsonnet'; @@ -9,6 +10,6 @@ base { stylize(allLayers=true): (if allLayers then super.stylize() else {}) - + stat.standardOptions.color.withMode('fixed') - + stat.standardOptions.color.withFixedColor('text'), + + stat.standardOptions.color.withMode(tokens.base.colors.mode.single) + + stat.standardOptions.color.withFixedColor(tokens.base.colors.mode.coldhot), } diff --git a/common-lib/common/panels/generic/table/cold_hot_gauge.libsonnet b/common-lib/common/panels/generic/table/cold_hot_gauge.libsonnet index ada99c7bd..1a286d0ff 100644 --- a/common-lib/common/panels/generic/table/cold_hot_gauge.libsonnet +++ b/common-lib/common/panels/generic/table/cold_hot_gauge.libsonnet @@ -4,6 +4,7 @@ local timeSeries = g.panel.timeSeries; local percentage = import '../timeSeries/percentage.libsonnet'; local fieldOverride = g.panel.timeSeries.fieldOverride; local fieldConfig = g.panel.timeSeries.fieldConfig; +local tokens = import '../../../tokens/main.libsonnet'; local base = import './base.libsonnet'; // This panel can be used to display gauge metrics in table columns with unknown max/min values. // Examples: Network bandwidth, RPS. @@ -19,7 +20,7 @@ base { + fieldOverride.byName.withProperty('custom.cellOptions', { type: 'gauge', mode: 'basic' }) + fieldOverride.byName.withProperty('fieldMinMax', true) + fieldOverride.byName.withPropertiesFromOptions( - timeSeries.standardOptions.color.withMode('continuous-BlYlRd') + timeSeries.standardOptions.color.withMode(tokens.base.colors.mode.coldhot) ), ), } diff --git a/common-lib/common/panels/generic/timeSeries/base.libsonnet b/common-lib/common/panels/generic/timeSeries/base.libsonnet index da5adb8dd..004246a5a 100644 --- a/common-lib/common/panels/generic/timeSeries/base.libsonnet +++ b/common-lib/common/panels/generic/timeSeries/base.libsonnet @@ -1,4 +1,5 @@ local g = import '../../../g.libsonnet'; +local tokens = import '../../../tokens/main.libsonnet'; local timeSeries = g.panel.timeSeries; local fieldOverride = g.panel.timeSeries.fieldOverride; @@ -14,16 +15,11 @@ base { stylize(allLayers=true): (if allLayers then super.stylize() else {}) - // Style choice: Make lines more thick - + custom.withLineWidth(2) - // Style choice: Opacity level - + custom.withFillOpacity(30) - // Style choice: Don't show points on lines - + custom.withShowPoints('never') - // Style choice: Opacity gradient - + custom.withGradientMode('opacity') - // Style choice: Smoother lines - + custom.withLineInterpolation('smooth') + + custom.withLineWidth(tokens.panels.timeSeries.lines.width.default) + + custom.withFillOpacity(tokens.panels.timeSeries.lines.opacity.default) + + custom.withShowPoints(tokens.panels.timeSeries.lines.showPoints.default) + + custom.withGradientMode(tokens.panels.timeSeries.lines.gradientMode.default) + + custom.withLineInterpolation(tokens.panels.timeSeries.lines.interpolation.default) // Style choice: Show all values in tooltip, sorted + options.tooltip.withMode('multi') + options.tooltip.withSort('desc') diff --git a/common-lib/common/panels/generic/timeSeries/percentage.libsonnet b/common-lib/common/panels/generic/timeSeries/percentage.libsonnet index 3a538bef6..7e7cc91e9 100644 --- a/common-lib/common/panels/generic/timeSeries/percentage.libsonnet +++ b/common-lib/common/panels/generic/timeSeries/percentage.libsonnet @@ -1,4 +1,5 @@ local g = import '../../../g.libsonnet'; +local tokens = import '../../../tokens/main.libsonnet'; local timeSeries = g.panel.timeSeries; local base = import './base.libsonnet'; // This panel can be used to display gauge metrics with possible values range 0-100%. @@ -9,7 +10,7 @@ base { + timeSeries.standardOptions.withDecimals(1) + timeSeries.standardOptions.withUnit('percent') // Change color from blue(cold) to red(hot) - + timeSeries.standardOptions.color.withMode('continuous-BlYlRd') + + timeSeries.standardOptions.color.withMode(tokens.base.colors.mode.coldhot) + timeSeries.fieldConfig.defaults.custom.withGradientMode('scheme') + timeSeries.standardOptions.withMax(100) + timeSeries.standardOptions.withMin(0), diff --git a/common-lib/common/panels/generic/timeSeries/threshold.libsonnet b/common-lib/common/panels/generic/timeSeries/threshold.libsonnet index b338495ba..ff7d76159 100644 --- a/common-lib/common/panels/generic/timeSeries/threshold.libsonnet +++ b/common-lib/common/panels/generic/timeSeries/threshold.libsonnet @@ -1,4 +1,5 @@ local g = import '../../../g.libsonnet'; +local tokens = import '../../../tokens/main.libsonnet'; local timeSeries = g.panel.timeSeries; local fieldOverride = g.panel.timeSeries.fieldOverride; local fieldConfig = g.panel.timeSeries.fieldConfig; @@ -15,8 +16,8 @@ local fieldConfig = g.panel.timeSeries.fieldConfig; } ) + fieldConfig.defaults.custom.withFillOpacity(0) - + timeSeries.standardOptions.color.withMode('fixed') - + timeSeries.standardOptions.color.withFixedColor('light-orange'), + + timeSeries.standardOptions.color.withMode(tokens.base.colors.mode.single) + + timeSeries.standardOptions.color.withFixedColor(tokens.base.colors.palette.threshold), stylizeByRegexp(regexp): timeSeries.standardOptions.withOverridesMixin( fieldOverride.byRegexp.new(regexp) diff --git a/common-lib/common/panels/generic/timeSeries/topk_percentage.libsonnet b/common-lib/common/panels/generic/timeSeries/topk_percentage.libsonnet index 6b35e0288..d9377e366 100644 --- a/common-lib/common/panels/generic/timeSeries/topk_percentage.libsonnet +++ b/common-lib/common/panels/generic/timeSeries/topk_percentage.libsonnet @@ -1,4 +1,5 @@ local g = import '../../../g.libsonnet'; +local tokens = import '../../../tokens/main.libsonnet'; local base = import './base.libsonnet'; local generic = import './main.libsonnet'; local timeSeries = g.panel.timeSeries; @@ -51,8 +52,8 @@ base { } ) + fieldConfig.defaults.custom.withFillOpacity(0) - + timeSeries.standardOptions.color.withMode('fixed') - + timeSeries.standardOptions.color.withFixedColor('light-purple'), + + timeSeries.standardOptions.color.withMode(tokens.base.colors.mode.single) + + timeSeries.standardOptions.color.withFixedColor(tokens.base.colors.palette['light-purple']), ) ), } diff --git a/common-lib/common/panels/hardware/timeSeries/temperature.libsonnet b/common-lib/common/panels/hardware/timeSeries/temperature.libsonnet index dbc971e34..e8d0c2ef7 100644 --- a/common-lib/common/panels/hardware/timeSeries/temperature.libsonnet +++ b/common-lib/common/panels/hardware/timeSeries/temperature.libsonnet @@ -1,4 +1,5 @@ local g = import '../../../g.libsonnet'; +local tokens = import '../../../tokens/main.libsonnet'; local generic = import '../../generic/timeSeries/main.libsonnet'; local base = import './base.libsonnet'; local timeSeries = g.panel.timeSeries; @@ -13,13 +14,13 @@ base { super.new(title, targets, description) + self.stylize(), - stylize(allLayers=true, softMin=0, softMax=100, unit='Celsius'): + stylize(allLayers=true, softMin=0, softMax=100, unit='celsius'): (if allLayers then super.stylize() else {}) + timeSeries.fieldConfig.defaults.custom.withAxisSoftMax(softMax) + timeSeries.fieldConfig.defaults.custom.withAxisSoftMin(softMin) + timeSeries.standardOptions.withDecimals(1) - + timeSeries.standardOptions.withUnit('celsius') + + timeSeries.standardOptions.withUnit(unit) // Change color from blue(cold) to red(hot) - + timeSeries.standardOptions.color.withMode('continuous-BlYlRd') + + timeSeries.standardOptions.color.withMode(tokens.base.colors.mode.coldhot) + timeSeries.fieldConfig.defaults.custom.withGradientMode('scheme'), } diff --git a/common-lib/common/panels/network/statusHistory/interface_status.libsonnet b/common-lib/common/panels/network/statusHistory/interface_status.libsonnet index 78ae91606..110426f03 100644 --- a/common-lib/common/panels/network/statusHistory/interface_status.libsonnet +++ b/common-lib/common/panels/network/statusHistory/interface_status.libsonnet @@ -1,4 +1,5 @@ local g = import '../../../g.libsonnet'; +local tokens = import '../../../tokens/main.libsonnet'; local base = import './base.libsonnet'; local statusHistory = g.panel.statusHistory; base { @@ -15,12 +16,12 @@ base { options: { '0': { text: 'Down', - color: 'light-red', + color: tokens.base.colors.palette.critical, index: 0, }, '1': { text: 'Up', - color: 'light-green', + color: tokens.base.colors.palette.ok, index: 1, }, }, diff --git a/common-lib/common/panels/requests/stat/duration.libsonnet b/common-lib/common/panels/requests/stat/duration.libsonnet index a10f98eca..2a0b11d99 100644 --- a/common-lib/common/panels/requests/stat/duration.libsonnet +++ b/common-lib/common/panels/requests/stat/duration.libsonnet @@ -1,4 +1,5 @@ local g = import '../../../g.libsonnet'; +local tokens = import '../../../tokens/main.libsonnet'; local generic = import '../../generic/stat/main.libsonnet'; local base = import './base.libsonnet'; local stat = g.panel.stat; @@ -9,8 +10,8 @@ base { stylize(allLayers=true): (if allLayers then super.stylize() else {}) - + stat.standardOptions.color.withMode('fixed') - + stat.standardOptions.color.withFixedColor('light-blue') + + stat.standardOptions.color.withMode(tokens.base.colors.mode.monochrome) + + stat.standardOptions.color.withFixedColor(tokens.base.colors.palette.duration) + stat.standardOptions.withUnit('s') + stat.options.withGraphMode('none'), } diff --git a/common-lib/common/panels/requests/stat/errors.libsonnet b/common-lib/common/panels/requests/stat/errors.libsonnet index a7d64d8b1..ca83e84d7 100644 --- a/common-lib/common/panels/requests/stat/errors.libsonnet +++ b/common-lib/common/panels/requests/stat/errors.libsonnet @@ -1,4 +1,5 @@ local g = import '../../../g.libsonnet'; +local tokens = import '../../../tokens/main.libsonnet'; local generic = import '../../generic/stat/main.libsonnet'; local base = import './base.libsonnet'; local stat = g.panel.stat; @@ -10,8 +11,8 @@ base { stylize(allLayers=true): (if allLayers then super.stylize() else {}) - + stat.standardOptions.color.withMode('fixed') - + stat.standardOptions.color.withFixedColor('light-red') + + stat.standardOptions.color.withMode(tokens.base.colors.mode.monochrome) + + stat.standardOptions.color.withFixedColor(tokens.base.colors.palette.errors) + stat.standardOptions.withNoValue('No errors') + stat.options.withGraphMode('none'), } diff --git a/common-lib/common/panels/requests/stat/rate.libsonnet b/common-lib/common/panels/requests/stat/rate.libsonnet index f2a8f5733..25dd224ce 100644 --- a/common-lib/common/panels/requests/stat/rate.libsonnet +++ b/common-lib/common/panels/requests/stat/rate.libsonnet @@ -1,4 +1,5 @@ local g = import '../../../g.libsonnet'; +local tokens = import '../../../tokens/main.libsonnet'; local generic = import '../../generic/stat/main.libsonnet'; local base = import './base.libsonnet'; local stat = g.panel.stat; @@ -10,7 +11,7 @@ base { stylize(allLayers=true): (if allLayers then super.stylize() else {}) - + stat.standardOptions.color.withMode('fixed') - + stat.standardOptions.color.withFixedColor('light-purple') + + stat.standardOptions.color.withMode(tokens.base.colors.mode.monochrome) + + stat.standardOptions.color.withFixedColor(tokens.base.colors.palette.rate) + stat.options.withGraphMode('none'), } diff --git a/common-lib/common/panels/requests/timeSeries/base.libsonnet b/common-lib/common/panels/requests/timeSeries/base.libsonnet index 622d9bed7..a149e0aa0 100644 --- a/common-lib/common/panels/requests/timeSeries/base.libsonnet +++ b/common-lib/common/panels/requests/timeSeries/base.libsonnet @@ -1,4 +1,5 @@ local g = import '../../../g.libsonnet'; +local tokens = import '../../../tokens/main.libsonnet'; local base = import '../../generic/timeSeries/base.libsonnet'; base { diff --git a/common-lib/common/panels/requests/timeSeries/duration.libsonnet b/common-lib/common/panels/requests/timeSeries/duration.libsonnet index 1668aad8a..56a6239b7 100644 --- a/common-lib/common/panels/requests/timeSeries/duration.libsonnet +++ b/common-lib/common/panels/requests/timeSeries/duration.libsonnet @@ -1,6 +1,8 @@ +local tokens = import '../../.../tokens/main.libsonnet'; local g = import '../../../g.libsonnet'; local generic = import '../../generic/timeSeries/main.libsonnet'; local base = import './base.libsonnet'; + base { new( title='Response time', @@ -14,7 +16,7 @@ base { stylize(allLayers=true): (if allLayers then super.stylize() else {}) - + g.panel.timeSeries.standardOptions.color.withMode('fixed') - + g.panel.timeSeries.standardOptions.color.withFixedColor('blue') + + g.panel.timeSeries.standardOptions.color.withMode(tokens.base.colors.palette.monochrome) + + g.panel.timeSeries.standardOptions.color.withFixedColor(tokens.base.colors.palette.duration) + g.panel.timeSeries.standardOptions.withUnit('s'), } diff --git a/common-lib/common/panels/requests/timeSeries/errors.libsonnet b/common-lib/common/panels/requests/timeSeries/errors.libsonnet index cad5dae9f..6ef5aee25 100644 --- a/common-lib/common/panels/requests/timeSeries/errors.libsonnet +++ b/common-lib/common/panels/requests/timeSeries/errors.libsonnet @@ -1,4 +1,5 @@ local g = import '../../../g.libsonnet'; +local tokens = import '../../../tokens/main.libsonnet'; local base = import './base.libsonnet'; base { new( @@ -16,9 +17,9 @@ base { (if allLayers then super.stylize() else {}) + timeSeries.fieldConfig.defaults.custom.withDrawStyle('bars') + timeSeries.queryOptions.withMaxDataPoints(100) - + timeSeries.fieldConfig.defaults.custom.withFillOpacity(100) + + timeSeries.fieldConfig.defaults.custom.withFillOpacity(tokens.panels.timeSeries.lines.opacity.full) + timeSeries.fieldConfig.defaults.custom.withStacking({ mode: 'normal' }) - + timeSeries.standardOptions.color.withMode('fixed') - + timeSeries.standardOptions.color.withFixedColor('light-red') + + timeSeries.standardOptions.color.withMode(tokens.base.colors.mode.monochrome) + + timeSeries.standardOptions.color.withFixedColor(tokens.base.colors.palette.errors) + timeSeries.standardOptions.withNoValue('No errors'), } diff --git a/common-lib/common/panels/requests/timeSeries/rate.libsonnet b/common-lib/common/panels/requests/timeSeries/rate.libsonnet index 3956d10b5..3fa3ac754 100644 --- a/common-lib/common/panels/requests/timeSeries/rate.libsonnet +++ b/common-lib/common/panels/requests/timeSeries/rate.libsonnet @@ -1,4 +1,5 @@ local g = import '../../../g.libsonnet'; +local tokens = import '../../../tokens/main.libsonnet'; local generic = import '../../generic/timeSeries/main.libsonnet'; local base = import './base.libsonnet'; base { @@ -19,6 +20,6 @@ base { + g.panel.timeSeries.queryOptions.withMaxDataPoints(100) + g.panel.timeSeries.fieldConfig.defaults.custom.withFillOpacity(100) + g.panel.timeSeries.fieldConfig.defaults.custom.withStacking({ mode: 'normal' }) - + g.panel.timeSeries.standardOptions.color.withMode('fixed') - + g.panel.timeSeries.standardOptions.color.withFixedColor('light-purple'), + + g.panel.timeSeries.standardOptions.color.withMode(tokens.base.colors.mode.monochrome) + + g.panel.timeSeries.standardOptions.color.withFixedColor(tokens.base.colors.palette.rate), } diff --git a/common-lib/common/tokens/colors.libsonnet b/common-lib/common/tokens/colors.libsonnet new file mode 100644 index 000000000..6d9752339 --- /dev/null +++ b/common-lib/common/tokens/colors.libsonnet @@ -0,0 +1,37 @@ +{ + palette: { + // Palette + blue: '#5794f2', //blue in grafana aliases + 'light-purple': '#ca95e5', //light-purple in grafana aliases + 'light-red': '#ff7383', //light-red in grafana aliases + green: '#73bf69', // green in grafana aliases + yellow: '#fade2a', // yellow in grafana aliases + 'light-orange': '#ffb357', // light-orange in grafana + orange: '#ff9830', //orange in grafana aliases + white: '#ccccdc', + + // Semantic colors + // requests + rate: self['light-purple'], + duration: self.blue, + errors: self['light-red'], + text: 'text', + // alerts and thresholds + ok: self.green, + critical: self['light-red'], + warning: self.yellow, + info: self.blue, + // threshold line + threshold: self['light-orange'], + + }, + mode: { + // used by default + default: 'palette-classic', + // used when single color should be used but multiple values are possible + monochrome: 'shades', + single: 'fixed', + coldhot: 'continuous-BlYlRd', + }, + +} diff --git a/common-lib/common/tokens/main.libsonnet b/common-lib/common/tokens/main.libsonnet new file mode 100644 index 000000000..90de47eb8 --- /dev/null +++ b/common-lib/common/tokens/main.libsonnet @@ -0,0 +1,8 @@ +{ + base: { + colors: import './colors.libsonnet', + }, + panels: { + timeSeries: import './timeSeries.libsonnet', + }, +} diff --git a/common-lib/common/tokens/timeSeries.libsonnet b/common-lib/common/tokens/timeSeries.libsonnet new file mode 100644 index 000000000..289d49202 --- /dev/null +++ b/common-lib/common/tokens/timeSeries.libsonnet @@ -0,0 +1,27 @@ +{ + lines: { + width: { + // Default style choice: Make lines more thick + default: 2, + alternative: 1, + }, + opacity: { + // Default Style choice: Opacity level + default: 30, // 0-100 + full: 100, + none: 0, + }, + showPoints: { + // Style choice: Don't show points on lines + default: 'never', + }, + gradientMode: { + // Style choice: Opacity gradient + default: 'opacity', + }, + interpolation: { + // Style choice: Smoother lines + default: 'smooth', + }, + }, +} From 1759616e96a3b248974f9010383a2d3cf57c73e5 Mon Sep 17 00:00:00 2001 From: v-zhuravlev Date: Fri, 24 Oct 2025 10:14:55 +0300 Subject: [PATCH 2/7] Add default stylize --- common-lib/common/panels/generic/base.libsonnet | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/common-lib/common/panels/generic/base.libsonnet b/common-lib/common/panels/generic/base.libsonnet index 6c42ca882..9f658e66c 100644 --- a/common-lib/common/panels/generic/base.libsonnet +++ b/common-lib/common/panels/generic/base.libsonnet @@ -22,6 +22,12 @@ local options = timeSeries.options; ) else {}) + self.stylize(), - stylize(): {}, + stylize(): + // remove 0-80(green), >80 red threshold by default. + { fieldConfig+: { + defaults+: { + thresholds: {}, + }, + } }, } From d0c727d26a0bc8385e052d1cc16f69cb9cbd9a82 Mon Sep 17 00:00:00 2001 From: v-zhuravlev Date: Fri, 24 Oct 2025 10:18:31 +0300 Subject: [PATCH 3/7] Update default style: Remove misleading thresholds from grafana by default --- common-lib/common/panels/generic/base.libsonnet | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/common-lib/common/panels/generic/base.libsonnet b/common-lib/common/panels/generic/base.libsonnet index 9f658e66c..4b30c253b 100644 --- a/common-lib/common/panels/generic/base.libsonnet +++ b/common-lib/common/panels/generic/base.libsonnet @@ -24,10 +24,12 @@ local options = timeSeries.options; stylize(): // remove 0-80(green), >80 red threshold by default. - { fieldConfig+: { - defaults+: { - thresholds: {}, + { + fieldConfig+: { + defaults+: { + thresholds: {}, + }, }, - } }, + }, } From ec362b01db11c92903a7360a4d0515b89c882e87 Mon Sep 17 00:00:00 2001 From: v-zhuravlev Date: Fri, 24 Oct 2025 11:08:52 +0300 Subject: [PATCH 4/7] Fix typo --- .../common/panels/requests/timeSeries/duration.libsonnet | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/common-lib/common/panels/requests/timeSeries/duration.libsonnet b/common-lib/common/panels/requests/timeSeries/duration.libsonnet index 56a6239b7..b5b81aaf5 100644 --- a/common-lib/common/panels/requests/timeSeries/duration.libsonnet +++ b/common-lib/common/panels/requests/timeSeries/duration.libsonnet @@ -1,5 +1,5 @@ -local tokens = import '../../.../tokens/main.libsonnet'; local g = import '../../../g.libsonnet'; +local tokens = import '../../../tokens/main.libsonnet'; local generic = import '../../generic/timeSeries/main.libsonnet'; local base = import './base.libsonnet'; @@ -16,7 +16,7 @@ base { stylize(allLayers=true): (if allLayers then super.stylize() else {}) - + g.panel.timeSeries.standardOptions.color.withMode(tokens.base.colors.palette.monochrome) + + g.panel.timeSeries.standardOptions.color.withMode(tokens.base.colors.mode.monochrome) + g.panel.timeSeries.standardOptions.color.withFixedColor(tokens.base.colors.palette.duration) + g.panel.timeSeries.standardOptions.withUnit('s'), } From 4d062ec0b32dc8956f8283171a46d0826ba282b4 Mon Sep 17 00:00:00 2001 From: v-zhuravlev Date: Fri, 24 Oct 2025 11:39:19 +0300 Subject: [PATCH 5/7] Fix generic stat --- common-lib/common/panels/generic/stat/base.libsonnet | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/common-lib/common/panels/generic/stat/base.libsonnet b/common-lib/common/panels/generic/stat/base.libsonnet index 553f13cfe..ec6e83d4c 100644 --- a/common-lib/common/panels/generic/stat/base.libsonnet +++ b/common-lib/common/panels/generic/stat/base.libsonnet @@ -11,5 +11,5 @@ base { stylize(allLayers=true): (if allLayers then super.stylize() else {}) + stat.standardOptions.color.withMode(tokens.base.colors.mode.single) - + stat.standardOptions.color.withFixedColor(tokens.base.colors.mode.coldhot), + + stat.standardOptions.color.withFixedColor(tokens.base.colors.palette.text), } From 066c25dab785f30fa30b2600ce228f2795ce707f Mon Sep 17 00:00:00 2001 From: v-zhuravlev Date: Fri, 24 Oct 2025 11:40:04 +0300 Subject: [PATCH 6/7] Revert thresholds --- common-lib/common/panels/generic/base.libsonnet | 10 +--------- 1 file changed, 1 insertion(+), 9 deletions(-) diff --git a/common-lib/common/panels/generic/base.libsonnet b/common-lib/common/panels/generic/base.libsonnet index 4b30c253b..6c42ca882 100644 --- a/common-lib/common/panels/generic/base.libsonnet +++ b/common-lib/common/panels/generic/base.libsonnet @@ -22,14 +22,6 @@ local options = timeSeries.options; ) else {}) + self.stylize(), - stylize(): - // remove 0-80(green), >80 red threshold by default. - { - fieldConfig+: { - defaults+: { - thresholds: {}, - }, - }, - }, + stylize(): {}, } From 0527e3ebbaae62d24cfa740d2bd343b4a18b29c8 Mon Sep 17 00:00:00 2001 From: v-zhuravlev Date: Fri, 24 Oct 2025 14:31:04 +0300 Subject: [PATCH 7/7] Update panels --- .../common/panels/generic/base.libsonnet | 18 ++++++++++++++++-- .../common/panels/generic/stat/base.libsonnet | 19 ++++++++++++++++++- .../common/panels/generic/stat/info.libsonnet | 5 +++-- .../panels/generic/stat/percentage.libsonnet | 3 ++- common-lib/common/tokens/colors.libsonnet | 3 ++- 5 files changed, 41 insertions(+), 7 deletions(-) diff --git a/common-lib/common/panels/generic/base.libsonnet b/common-lib/common/panels/generic/base.libsonnet index 6c42ca882..902ec1bf0 100644 --- a/common-lib/common/panels/generic/base.libsonnet +++ b/common-lib/common/panels/generic/base.libsonnet @@ -1,10 +1,11 @@ local g = import '../../g.libsonnet'; - +local tokens = import '../../tokens/main.libsonnet'; local timeSeries = g.panel.timeSeries; local fieldOverride = g.panel.timeSeries.fieldOverride; local custom = timeSeries.fieldConfig.defaults.custom; local defaults = timeSeries.fieldConfig.defaults; local options = timeSeries.options; +local standardOptions = timeSeries.standardOptions; // This is the base of ALL panels in the common lib { @@ -22,6 +23,19 @@ local options = timeSeries.options; ) else {}) + self.stylize(), - stylize(): {}, + stylize(): + standardOptions.color.withMode(tokens.base.colors.mode.default) + + standardOptions.color.withFixedColor(tokens.base.colors.palette.default) + // remove 0-80(green), >80 red threshold by default. + { + fieldConfig+: { + defaults+: { + thresholds: { + mode: 'absolute', + steps: [], + }, + }, + }, + }, } diff --git a/common-lib/common/panels/generic/stat/base.libsonnet b/common-lib/common/panels/generic/stat/base.libsonnet index ec6e83d4c..1b8079262 100644 --- a/common-lib/common/panels/generic/stat/base.libsonnet +++ b/common-lib/common/panels/generic/stat/base.libsonnet @@ -11,5 +11,22 @@ base { stylize(allLayers=true): (if allLayers then super.stylize() else {}) + stat.standardOptions.color.withMode(tokens.base.colors.mode.single) - + stat.standardOptions.color.withFixedColor(tokens.base.colors.palette.text), + + stat.standardOptions.color.withFixedColor(tokens.base.colors.palette.default) + // remove 0-80(green), >80 red threshold by default. + + { + fieldConfig+: { + defaults+: { + + thresholds: { + mode: 'absolute', + steps: [ + { + color: tokens.base.colors.palette.default, + value: null, + }, + ], + }, + }, + }, + }, } diff --git a/common-lib/common/panels/generic/stat/info.libsonnet b/common-lib/common/panels/generic/stat/info.libsonnet index 05fc5a7d7..3dcee31c2 100644 --- a/common-lib/common/panels/generic/stat/info.libsonnet +++ b/common-lib/common/panels/generic/stat/info.libsonnet @@ -1,4 +1,5 @@ local g = import '../../../g.libsonnet'; +local tokens = import '../../../tokens/main.libsonnet'; local base = import './base.libsonnet'; local stat = g.panel.stat; // Simple info panel prototype with text or count of things. @@ -7,8 +8,8 @@ base { stylize(allLayers=true): (if allLayers then super.stylize() else {}) // Style choice: No color for simple text panels by default - + stat.options.withColorMode('fixed') - + stat.standardOptions.color.withFixedColor('text') + + stat.standardOptions.color.withMode(tokens.base.colors.mode.single) + + stat.standardOptions.color.withFixedColor(tokens.base.colors.palette.text) // Style choice: No graph + stat.options.withGraphMode('none') // Show last value by default, not mean. diff --git a/common-lib/common/panels/generic/stat/percentage.libsonnet b/common-lib/common/panels/generic/stat/percentage.libsonnet index a8a8d9097..6d0083df4 100644 --- a/common-lib/common/panels/generic/stat/percentage.libsonnet +++ b/common-lib/common/panels/generic/stat/percentage.libsonnet @@ -1,4 +1,5 @@ local g = import '../../../g.libsonnet'; +local tokens = import '../../../tokens/main.libsonnet'; local stat = g.panel.stat; local base = import './base.libsonnet'; // This panel can be used to display gauge metrics with possible values range 0-100%. @@ -11,7 +12,7 @@ base { + stat.standardOptions.withUnit('percent') + stat.options.withColorMode('value') // Change color from blue(cold) to red(hot) - + stat.standardOptions.color.withMode('continuous-BlYlRd') + + stat.standardOptions.color.withMode(tokens.base.colors.mode.coldhot) + stat.standardOptions.withMax(100) + stat.standardOptions.withMin(0) // Show last value by default, not mean. diff --git a/common-lib/common/tokens/colors.libsonnet b/common-lib/common/tokens/colors.libsonnet index 6d9752339..d994fe9b5 100644 --- a/common-lib/common/tokens/colors.libsonnet +++ b/common-lib/common/tokens/colors.libsonnet @@ -1,6 +1,7 @@ { palette: { // Palette + default: self.blue, blue: '#5794f2', //blue in grafana aliases 'light-purple': '#ca95e5', //light-purple in grafana aliases 'light-red': '#ff7383', //light-red in grafana aliases @@ -15,7 +16,7 @@ rate: self['light-purple'], duration: self.blue, errors: self['light-red'], - text: 'text', + text: 'text', //special color that changes to opposite depending on light/dark theme // alerts and thresholds ok: self.green, critical: self['light-red'],