Problems: filter by particular severity, fixes #572

src/datasource/components/QueryEditor/ProblemsQueryEditor.tsx

@@ -3,7 +3,7 @@ import React, { useEffect, FormEvent } from 'react';
 import { useAsyncFn } from 'react-use';
 
 import { SelectableValue } from '@grafana/data';
-import { InlineField, Input, Select } from '@grafana/ui';
+import { InlineField, Input, MultiSelect, Select } from '@grafana/ui';
 import { QueryEditorRow } from './QueryEditorRow';
 import { MetricPicker } from '../../../components';
 import { getVariableOptions } from './utils';
@@ -143,9 +143,9 @@ export const ProblemsQueryEditor = ({ query, datasource, onChange }: Props) => {
     };
   };
 
-  const onMinSeverityChange = (option: SelectableValue) => {
-    if (option.value !== null) {
-      onChange({ ...query, options: { ...query.options, minSeverity: option.value } });
+  const onSeveritiesChange = (options: SelectableValue[]) => {
+    if (options !== null) {
+      onChange({ ...query, options: { ...query.options, severities: options.map((o) => o.value) } });
     }
   };
 
@@ -217,13 +217,14 @@ export const ProblemsQueryEditor = ({ query, datasource, onChange }: Props) => {
             onChange={onPropChange('showProblems')}
           />
         </InlineField>
-        <InlineField label="Min severity" labelWidth={12}>
-          <Select
+        <InlineField label="Severity" labelWidth={12}>
+          <MultiSelect
             isSearchable={false}
-            width={24}
-            value={query.options?.minSeverity}
+            isClearable={true}
+            placeholder="Show all problems"
+            value={query.options?.severities}
             options={severityOptions}
-            onChange={onMinSeverityChange}
+            onChange={onSeveritiesChange}
           />
         </InlineField>
       </QueryEditorRow>

src/datasource/datasource.ts

@@ -682,9 +682,10 @@ export class ZabbixDatasource extends DataSourceApi<ZabbixMetricsQuery, ZabbixDS
 
     if (target.options?.minSeverity) {
       let severities = [0, 1, 2, 3, 4, 5].filter((v) => v >= target.options?.minSeverity);
-      if (target.options?.severities) {
-        severities = severities.filter((v) => target.options?.severities.includes(v));
-      }
+      problemsOptions.severities = severities;
+    }
+    if (target.options?.severities?.length) {
+      let severities = [0, 1, 2, 3, 4, 5].filter((v) => target.options?.severities.includes(v));
       problemsOptions.severities = severities;
     }
 

src/datasource/migrations.ts

@@ -2,7 +2,7 @@ import _ from 'lodash';
 import { ZabbixMetricsQuery } from './types';
 import * as c from './constants';
 
-export const DS_QUERY_SCHEMA = 11;
+export const DS_QUERY_SCHEMA = 12;
 export const DS_CONFIG_SCHEMA = 3;
 
 /**
@@ -115,6 +115,15 @@ function migrateNewTriggersCountModes(target: any) {
   }
 }
 
+function migrateProblemsSeverity(target: any) {
+  if (target.schema >= 12) {
+    return;
+  }
+  if (target?.options?.minSeverity) {
+    target.options.severities = [0, 1, 2, 3, 4, 5].filter((v) => v >= target.options.minSeverity);
+  }
+}
+
 export function migrate(target) {
   target.resultFormat = target.resultFormat || 'time_series';
   target = fixTargetGroup(target);
@@ -129,6 +138,7 @@ export function migrate(target) {
   migrateSLAProperty(target);
   migrateTriggersMode(target);
   migrateNewTriggersCountModes(target);
+  migrateProblemsSeverity(target);
 
   target.schema = DS_QUERY_SCHEMA;
   return target;