Add the ability to convert specific tags to columns on problems panel

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

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": {

src/panel-triggers/components/Problems/Problems.tsx

@@ -185,6 +185,49 @@ export default class ProblemList extends PureComponent<ProblemListProps, Problem
         width: 70,
         Cell: (props) => <AckCell {...props} />,
       },
+    ];
+    // 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 (
+              <div>
+                <span>{tagValue}</span>
+              </div>
+            );
+          },
+        });
+      });
+    }
+
+    columns.push(
       {
         Header: 'Tags',
         accessor: 'tags',
@@ -210,7 +253,8 @@ export default class ProblemList extends PureComponent<ProblemListProps, Problem
         Cell: (props) => 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;

src/panel-triggers/module.tsx

@@ -220,7 +220,20 @@ export const plugin = new PanelPlugin<ProblemsPanelOptions, {}>(ProblemsPanel)
         name: 'Datasource name',
         defaultValue: defaultPanelOptions.showDatasourceName,
         category: ['Fields'],
-      });
+      })
+
+      // Select tag name to display as column
+      .addTextInput({
+        path: 'customTagColumns',
+        name: 'Tags to columns',
+        defaultValue: '',
+        description: 'Comma-separated list of tag names to display as columns (e.g., component, scope, environment)',
+        settings: {
+          placeholder: 'component, scope, target'
+        },
+        category: ['Fields'],
+      })
+      ;
   });
 
 const fontSizeOptions = [

src/panel-triggers/types.ts

@@ -42,6 +42,8 @@ export interface ProblemsPanelOptions {
   okEventColor: TriggerColor;
   ackEventColor: TriggerColor;
   markAckEvents?: boolean;
+  // Custom tag names to display as column
+  customTagColumns?: string;
 }
 
 export const DEFAULT_SEVERITY: TriggerSeverity[] = [