Problems count mode (#1493)

* Problems count mode

* Use tooltip from grafana ui

* Add editors for new modes

* Fix macro mode

* Fix bugs

* Unify editors to use one Triggers editor for all count queries

* Use time range toggle for triggers query, #918

* Add item tags suport for triggers count mode

* Fix triggers count by items

* Use data frames for triggers data, #1441

* Return empty result if no items found

* Add migration for problems count mode

* bump version to 4.3.0-pre

* Add zip task to makefile

* Add schema to query model

* Minor refactor

* Refactor: move components to separate files

* Minor refactor

* Support url in event tags

* Add tooltip with link url

* Update grafana packages

* Fix adding new problems panel

* ProblemDetails: rewrite as a functional component

* minor refactor

.gitignore

@@ -5,6 +5,7 @@
 .vscode
 
 *.bat
+.DS_Store
 
 # Grafana linter config
 # .jshintrc
@@ -38,6 +39,7 @@ yarn-error.log
 # Built plugin
 dist/
 ci/
+alexanderzobnin-zabbix-app.zip
 
 # Grafana toolkit configs
 # .prettierrc.js

Makefile

@@ -82,3 +82,8 @@ sign-package:
 	yarn sign
 
 package: install dist sign-package
+
+zip:
+	cp -r dist/ alexanderzobnin-zabbix-app
+	zip -r alexanderzobnin-zabbix-app.zip alexanderzobnin-zabbix-app
+	rm -rf alexanderzobnin-zabbix-app

package.json

@@ -31,14 +31,14 @@
   "devDependencies": {
     "@emotion/css": "11.1.3",
     "@emotion/react": "11.1.5",
-    "@grafana/data": "9.1.2",
+    "@grafana/data": "9.3.2",
     "@grafana/e2e": "9.2.5",
     "@grafana/e2e-selectors": "9.2.5",
     "@grafana/eslint-config": "^5.1.0",
-    "@grafana/runtime": "9.1.2",
+    "@grafana/runtime": "9.3.2",
     "@grafana/toolkit": "9.1.2",
     "@grafana/tsconfig": "^1.2.0-rc1",
-    "@grafana/ui": "9.1.2",
+    "@grafana/ui": "9.3.2",
     "@popperjs/core": "2.4.0",
     "@swc/core": "^1.2.144",
     "@swc/helpers": "^0.4.12",

src/datasource/components/QueryEditor.tsx

@@ -2,7 +2,7 @@ import React, { useEffect } from 'react';
 import { QueryEditorProps, SelectableValue } from '@grafana/data';
 import { InlineField, InlineFieldRow, Select } from '@grafana/ui';
 import * as c from '../constants';
-import * as migrations from '../migrations';
+import { migrate, DS_QUERY_SCHEMA } from '../migrations';
 import { ZabbixDatasource } from '../datasource';
 import { ShowProblemTypes, ZabbixDSOptions, ZabbixMetricsQuery, ZabbixQueryOptions } from '../types';
 import { MetricsQueryEditor } from './QueryEditor/MetricsQueryEditor';
@@ -13,6 +13,7 @@ import { ProblemsQueryEditor } from './QueryEditor/ProblemsQueryEditor';
 import { ItemIdQueryEditor } from './QueryEditor/ItemIdQueryEditor';
 import { ServicesQueryEditor } from './QueryEditor/ServicesQueryEditor';
 import { TriggersQueryEditor } from './QueryEditor/TriggersQueryEditor';
+import { UserMacrosQueryEditor } from './QueryEditor/UserMacrosQueryEditor';
 
 const zabbixQueryTypeOptions: Array<SelectableValue<string>> = [
   {
@@ -38,29 +39,32 @@ const zabbixQueryTypeOptions: Array<SelectableValue<string>> = [
   {
     value: c.MODE_TRIGGERS,
     label: 'Triggers',
-    description: 'Query triggers data',
+    description: 'Count triggers',
   },
   {
     value: c.MODE_PROBLEMS,
     label: 'Problems',
     description: 'Query problems',
   },
+  {
+    value: c.MODE_MACROS,
+    label: 'User macros',
+    description: 'User Macros',
+  },
 ];
 
 const getDefaultQuery: () => Partial<ZabbixMetricsQuery> = () => ({
+  schema: DS_QUERY_SCHEMA,
   queryType: c.MODE_METRICS,
   group: { filter: '' },
   host: { filter: '' },
   application: { filter: '' },
   itemTag: { filter: '' },
   item: { filter: '' },
+  macro: { filter: '' },
   functions: [],
-  triggers: {
-    count: true,
-    minSeverity: 3,
-    acknowledged: 2,
-  },
   trigger: { filter: '' },
+  countTriggersBy: '',
   tags: { filter: '' },
   proxy: { filter: '' },
   textFilter: '',
@@ -70,6 +74,7 @@ const getDefaultQuery: () => Partial<ZabbixMetricsQuery> = () => ({
     disableDataAlignment: false,
     useZabbixValueMapping: false,
     useTrends: 'default',
+    count: false,
   },
   table: {
     skipEmptyValues: false,
@@ -96,6 +101,7 @@ function getProblemsQueryDefaults(): Partial<ZabbixMetricsQuery> {
       hostProxy: false,
       limit: c.DEFAULT_ZABBIX_PROBLEMS_LIMIT,
       useTimeRange: false,
+      count: false,
     },
   };
 }
@@ -119,7 +125,7 @@ export const QueryEditor = ({ query, datasource, onChange, onRunQuery }: ZabbixQ
 
   // Migrate query on load
   useEffect(() => {
-    const migratedQuery = migrations.migrate(query);
+    const migratedQuery = migrate(query);
     onChange(migratedQuery);
   }, []);
 
@@ -184,6 +190,10 @@ export const QueryEditor = ({ query, datasource, onChange, onRunQuery }: ZabbixQ
     return <TriggersQueryEditor query={query} datasource={datasource} onChange={onChangeInternal} />;
   };
 
+  const renderUserMacrosEditor = () => {
+    return <UserMacrosQueryEditor query={query} datasource={datasource} onChange={onChangeInternal} />;
+  };
+
   return (
     <>
       <InlineFieldRow>
@@ -206,6 +216,7 @@ export const QueryEditor = ({ query, datasource, onChange, onRunQuery }: ZabbixQ
       {queryType === c.MODE_ITSERVICE && renderITServicesEditor()}
       {queryType === c.MODE_PROBLEMS && renderProblemsEditor()}
       {queryType === c.MODE_TRIGGERS && renderTriggersEditor()}
+      {queryType === c.MODE_MACROS && renderUserMacrosEditor()}
       <QueryOptionsEditor queryType={queryType} queryOptions={query.options} onChange={onOptionsChange} />
     </>
   );

src/datasource/components/QueryEditor/QueryOptionsEditor.tsx

@@ -201,6 +201,12 @@ export const QueryOptionsEditor = ({ queryType, queryOptions, onChange }: Props)
             onChange={onPropChange('acknowledged')}
           />
         </InlineField>
+        <InlineField label="Use time range" labelWidth={24}>
+          <InlineSwitch
+            value={queryOptions.useTimeRange}
+            onChange={() => onChange({ ...queryOptions, useTimeRange: !queryOptions.useTimeRange })}
+          />
+        </InlineField>
       </>
     );
   };