From ac92853f33cb5157776761c736ee5cdb046ab965 Mon Sep 17 00:00:00 2001 From: Christos Diamantis Date: Fri, 24 Oct 2025 16:42:55 +0300 Subject: [PATCH 1/5] single tag as column, done, working, tested --- .../components/Problems/Problems.tsx | 21 +++++++++++++++++++ src/panel-triggers/module.tsx | 15 ++++++++++++- src/panel-triggers/types.ts | 2 ++ 3 files changed, 37 insertions(+), 1 deletion(-) diff --git a/src/panel-triggers/components/Problems/Problems.tsx b/src/panel-triggers/components/Problems/Problems.tsx index bf7f2274..d09987df 100644 --- a/src/panel-triggers/components/Problems/Problems.tsx +++ b/src/panel-triggers/components/Problems/Problems.tsx @@ -192,6 +192,27 @@ export default class ProblemList extends PureComponent , }, + { + Header: options.customTagColumn || 'Custom Tag', + id: 'customTag', + show: options.customTagColumn && options.customTagColumn.length > 0, + width: 150, + accessor: (problem) => { + if (!problem.tags || !options.customTagColumn) { + return ''; + } + const tag = problem.tags.find((t) => t.tag === options.customTagColumn); + return tag ? tag.value : ''; + }, + Cell: (props) => { + const tagValue = props.value || ''; + return ( +
+ {tagValue} +
+ ); + }, + }, { Header: 'Age', className: 'problem-age', diff --git a/src/panel-triggers/module.tsx b/src/panel-triggers/module.tsx index 4254c7f2..7ef6c875 100644 --- a/src/panel-triggers/module.tsx +++ b/src/panel-triggers/module.tsx @@ -220,7 +220,20 @@ export const plugin = new PanelPlugin(ProblemsPanel) name: 'Datasource name', defaultValue: defaultPanelOptions.showDatasourceName, category: ['Fields'], - }); + }) + + // Select tag name to display as column + .addTextInput({ + path: 'customTagColumn', + name: 'Custom tag column', + defaultValue: '', + description: 'Tag name to display', + settings: { + placeholder: 'Specify the key of the tag you need to show. eg. component:interface' + }, + category: ['Fields'], + }) + ; }); const fontSizeOptions = [ diff --git a/src/panel-triggers/types.ts b/src/panel-triggers/types.ts index c1ee5464..be03bc44 100644 --- a/src/panel-triggers/types.ts +++ b/src/panel-triggers/types.ts @@ -42,6 +42,8 @@ export interface ProblemsPanelOptions { okEventColor: TriggerColor; ackEventColor: TriggerColor; markAckEvents?: boolean; + // Custom tag name to display as column + customTagColumn?: string; } export const DEFAULT_SEVERITY: TriggerSeverity[] = [ From aa3d27446e6d7f42fa3cb0f65676514bc055f276 Mon Sep 17 00:00:00 2001 From: Christos Diamantis Date: Fri, 24 Oct 2025 16:48:36 +0300 Subject: [PATCH 2/5] if tag name present multiple times, concat --- src/panel-triggers/components/Problems/Problems.tsx | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/src/panel-triggers/components/Problems/Problems.tsx b/src/panel-triggers/components/Problems/Problems.tsx index d09987df..30b6ba87 100644 --- a/src/panel-triggers/components/Problems/Problems.tsx +++ b/src/panel-triggers/components/Problems/Problems.tsx @@ -201,8 +201,11 @@ export default class ProblemList extends PureComponent t.tag === options.customTagColumn); - return tag ? tag.value : ''; + // There are cases where multiple tags with same name + const matchingTags = problem.tags.filter((t) => t.tag === options.customTagColumn); + // Extract values and join with comma + const values = matchingTags.map((t) => t.value).filter((v) => v); + return values.length > 0 ? values.join(', ') : ''; }, Cell: (props) => { const tagValue = props.value || ''; From 87177075f540e654dc81b7d5d41957c3ce755722 Mon Sep 17 00:00:00 2001 From: Christos Diamantis Date: Fri, 24 Oct 2025 17:14:47 +0300 Subject: [PATCH 3/5] add ability for multiple tags to columns --- .../components/Problems/Problems.tsx | 70 ++++++++++++------- src/panel-triggers/module.tsx | 8 +-- src/panel-triggers/types.ts | 4 +- 3 files changed, 51 insertions(+), 31 deletions(-) diff --git a/src/panel-triggers/components/Problems/Problems.tsx b/src/panel-triggers/components/Problems/Problems.tsx index 30b6ba87..61ed263d 100644 --- a/src/panel-triggers/components/Problems/Problems.tsx +++ b/src/panel-triggers/components/Problems/Problems.tsx @@ -185,6 +185,49 @@ export default class ProblemList extends PureComponent , }, + ]; + // CUSTOM TAGS ARE ADDED HERE, BEFORE THE ORIGINAL TAGS COLUMN + if (options.customTagColumns && options.customTagColumns.trim().length > 0) { + const tagNames = options.customTagColumns + .split(',') + .map((tag) => tag.trim()) + .filter((tag) => tag.length > 0); + + // Helper function to capitalize first letter for uniformity + const capitalizeFirstLetter = (str: string) => { + return str.charAt(0).toUpperCase() + str.slice(1).toLowerCase(); + } + + // Create a column for each tag + tagNames.forEach((tagName) => { + columns.push({ + Header: capitalizeFirstLetter(tagName), + id: `customTag_${tagName}`, + className: `customTag_${tagName}`, + show: true, + width: 150, + accessor: (problem) => { + if (!problem) { + return ''; + } + // There are cases where multiple tags with same name + const matchingTags = problem.tags.filter((t) => t.tag === tagName); + const values = matchingTags.map((t) => t.value).filter((v) => v); + return values.length > 0 ? values.join(', ') : ''; + }, + Cell: (props) => { + const tagValue = props.value || ''; + return ( +
+ {tagValue} +
+ ); + }, + }); + }); + } + + columns.push( { Header: 'Tags', accessor: 'tags', @@ -192,30 +235,6 @@ export default class ProblemList extends PureComponent , }, - { - Header: options.customTagColumn || 'Custom Tag', - id: 'customTag', - show: options.customTagColumn && options.customTagColumn.length > 0, - width: 150, - accessor: (problem) => { - if (!problem.tags || !options.customTagColumn) { - return ''; - } - // There are cases where multiple tags with same name - const matchingTags = problem.tags.filter((t) => t.tag === options.customTagColumn); - // Extract values and join with comma - const values = matchingTags.map((t) => t.value).filter((v) => v); - return values.length > 0 ? values.join(', ') : ''; - }, - Cell: (props) => { - const tagValue = props.value || ''; - return ( -
- {tagValue} -
- ); - }, - }, { Header: 'Age', className: 'problem-age', @@ -234,7 +253,8 @@ export default class ProblemList extends PureComponent LastChangeCell(props, options.customLastChangeFormat && options.lastChangeFormat), }, { Header: '', className: 'custom-expander', width: 60, expander: true, Expander: CustomExpander }, - ]; + ); + for (const column of columns) { if (column.show || column.show === undefined) { delete column.show; diff --git a/src/panel-triggers/module.tsx b/src/panel-triggers/module.tsx index 7ef6c875..d8b93d4b 100644 --- a/src/panel-triggers/module.tsx +++ b/src/panel-triggers/module.tsx @@ -224,12 +224,12 @@ export const plugin = new PanelPlugin(ProblemsPanel) // Select tag name to display as column .addTextInput({ - path: 'customTagColumn', - name: 'Custom tag column', + path: 'customTagColumns', + name: 'Tags to columns', defaultValue: '', - description: 'Tag name to display', + description: 'Comma-separated list of tag names to display as columns (e.g., component, scope, environment)', settings: { - placeholder: 'Specify the key of the tag you need to show. eg. component:interface' + placeholder: 'component, scope, target' }, category: ['Fields'], }) diff --git a/src/panel-triggers/types.ts b/src/panel-triggers/types.ts index be03bc44..6541f1a4 100644 --- a/src/panel-triggers/types.ts +++ b/src/panel-triggers/types.ts @@ -42,8 +42,8 @@ export interface ProblemsPanelOptions { okEventColor: TriggerColor; ackEventColor: TriggerColor; markAckEvents?: boolean; - // Custom tag name to display as column - customTagColumn?: string; + // Custom tag names to display as column + customTagColumns?: string; } export const DEFAULT_SEVERITY: TriggerSeverity[] = [ From 1419853869ef133f07837dc3e10ae39543ec368d Mon Sep 17 00:00:00 2001 From: Christos Diamantis Date: Fri, 24 Oct 2025 17:15:59 +0300 Subject: [PATCH 4/5] changeset update --- .changeset/rotten-ghosts-accept.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/rotten-ghosts-accept.md diff --git a/.changeset/rotten-ghosts-accept.md b/.changeset/rotten-ghosts-accept.md new file mode 100644 index 00000000..f3b65cef --- /dev/null +++ b/.changeset/rotten-ghosts-accept.md @@ -0,0 +1,5 @@ +--- +'grafana-zabbix': minor +--- + +Enhance the problems panel with the ability to convert specific tags to columns. Single or multiple tags supported. From 1e239a328cbe3837e256b99c9075e9ff585dccde Mon Sep 17 00:00:00 2001 From: Christos Diamantis Date: Fri, 24 Oct 2025 17:16:35 +0300 Subject: [PATCH 5/5] version change --- .changeset/rotten-ghosts-accept.md | 5 ----- CHANGELOG.md | 8 ++++++++ package.json | 2 +- 3 files changed, 9 insertions(+), 6 deletions(-) delete mode 100644 .changeset/rotten-ghosts-accept.md diff --git a/.changeset/rotten-ghosts-accept.md b/.changeset/rotten-ghosts-accept.md deleted file mode 100644 index f3b65cef..00000000 --- a/.changeset/rotten-ghosts-accept.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'grafana-zabbix': minor ---- - -Enhance the problems panel with the ability to convert specific tags to columns. Single or multiple tags supported. diff --git a/CHANGELOG.md b/CHANGELOG.md index ffaa19a3..79962628 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,13 @@ # Change Log +## 6.1.0 + +### Minor Changes + +🚀 Enhance the problems panel with the ability to convert specific tags to columns. Single or multiple tags supported. + +### Patch Changes + ## 6.0.3 ### Patch Changes diff --git a/package.json b/package.json index 0af9c760..20d38959 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "grafana-zabbix", - "version": "6.0.3", + "version": "6.1.0", "description": "Zabbix plugin for Grafana", "homepage": "http://grafana-zabbix.org", "bugs": {