Fix error when opening problem details, #1357

src/datasource-zabbix/types.ts

@@ -1,4 +1,4 @@
-import { DataQuery, DataSourceJsonData, SelectableValue } from "@grafana/data";
+import { DataQuery, DataSourceJsonData, DataSourceRef, SelectableValue } from "@grafana/data";
 
 export interface ZabbixDSOptions extends DataSourceJsonData {
   username: string;
@@ -185,7 +185,7 @@ export interface ProblemDTO {
   /** Whether the trigger is in OK or problem state. */
   value?: string;
 
-  datasource?: string;
+  datasource?: DataSourceRef | string;
   comments?: string;
   host?: string;
   hostTechName?: string;

src/panel-triggers/components/EventTag.tsx

@@ -1,6 +1,7 @@
 import React, { PureComponent } from 'react';
 import { ZBXTag } from '../types';
 import Tooltip from '../../components/Tooltip/Tooltip';
+import { DataSourceRef } from '@grafana/data';
 
 const TAG_COLORS = [
   '#E24D42',
@@ -87,14 +88,16 @@ function djb2(str) {
 
 interface EventTagProps {
   tag: ZBXTag;
+  datasource: DataSourceRef | string;
   highlight?: boolean;
-  onClick?: (tag: ZBXTag, ctrlKey?: boolean, shiftKey?: boolean) => void;
+  onClick?: (tag: ZBXTag, datasource: DataSourceRef | string, ctrlKey?: boolean, shiftKey?: boolean) => void;
 }
 
 export default class EventTag extends PureComponent<EventTagProps> {
   handleClick = (event) => {
     if (this.props.onClick) {
-      this.props.onClick(this.props.tag, event.ctrlKey, event.shiftKey);
+      const { tag, datasource} = this.props;
+      this.props.onClick(tag, datasource, event.ctrlKey, event.shiftKey);
     }
   }
 

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

@@ -1,5 +1,7 @@
 import React, { FC, PureComponent } from 'react';
 import moment from 'moment';
+import { TimeRange, DataSourceRef } from "@grafana/data";
+import { getDataSourceSrv } from '@grafana/runtime';
 import * as utils from '../../../datasource-zabbix/utils';
 import { ProblemDTO, ZBXAlert, ZBXEvent, ZBXGroup, ZBXHost, ZBXTag } from '../../../datasource-zabbix/types';
 import { APIExecuteScriptResponse, ZBXScript } from '../../../datasource-zabbix/zabbix/connectors/zabbix_api/types';
@@ -10,7 +12,6 @@ import AcknowledgesList from './AcknowledgesList';
 import ProblemTimeline from './ProblemTimeline';
 import { AckButton, ExecScriptButton, ExploreButton, FAIcon, ModalController, Tooltip } from '../../../components';
 import { ExecScriptData, ExecScriptModal } from '../ExecScriptModal';
-import { TimeRange } from "@grafana/data";
 import ProblemStatusBar from "./ProblemStatusBar";
 
 interface ProblemDetailsProps extends RTRow<ProblemDTO> {
@@ -26,7 +27,7 @@ interface ProblemDetailsProps extends RTRow<ProblemDTO> {
   onExecuteScript(problem: ProblemDTO, scriptid: string): Promise<APIExecuteScriptResponse>;
 
   onProblemAck?: (problem: ProblemDTO, data: AckProblemData) => Promise<any> | any;
-  onTagClick?: (tag: ZBXTag, datasource: string, ctrlKey?: boolean, shiftKey?: boolean) => void;
+  onTagClick?: (tag: ZBXTag, datasource: DataSourceRef | string, ctrlKey?: boolean, shiftKey?: boolean) => void;
 }
 
 interface ProblemDetailsState {
@@ -55,9 +56,9 @@ export class ProblemDetails extends PureComponent<ProblemDetailsProps, ProblemDe
     });
   }
 
-  handleTagClick = (tag: ZBXTag, ctrlKey?: boolean, shiftKey?: boolean) => {
+  handleTagClick = (tag: ZBXTag, datasource: DataSourceRef | string, ctrlKey?: boolean, shiftKey?: boolean) => {
     if (this.props.onTagClick) {
-      this.props.onTagClick(tag, this.props.original.datasource, ctrlKey, shiftKey);
+      this.props.onTagClick(tag, datasource, ctrlKey, shiftKey);
     }
   };
 
@@ -103,6 +104,12 @@ export class ProblemDetails extends PureComponent<ProblemDetailsProps, ProblemDe
     const showAcknowledges = problem.acknowledges && problem.acknowledges.length !== 0;
     const problemSeverity = Number(problem.severity);
 
+    let dsName: string = (this.props.original.datasource as string);
+    if ((this.props.original.datasource as DataSourceRef)?.uid) {
+      const dsInstance = getDataSourceSrv().getInstanceSettings((this.props.original.datasource as DataSourceRef).uid);
+      dsName = dsInstance.name;
+    }
+
     return (
       <div className={`problem-details-container ${displayClass}`}>
         <div className="problem-details-body">
@@ -171,6 +178,7 @@ export class ProblemDetails extends PureComponent<ProblemDetailsProps, ProblemDe
                 <EventTag
                   key={tag.tag + tag.value}
                   tag={tag}
+                  datasource={problem.datasource}
                   highlight={tag.tag === problem.correlation_tag}
                   onClick={this.handleTagClick}
                 />)
@@ -198,7 +206,7 @@ export class ProblemDetails extends PureComponent<ProblemDetailsProps, ProblemDe
           <div className="problem-details-right">
             <div className="problem-details-right-item">
               <FAIcon icon="database"/>
-              <span>{problem.datasource}</span>
+              <span>{dsName}</span>
             </div>
             {problem.proxy &&
             <div className="problem-details-right-item">

src/panel-triggers/triggers_panel_ctrl.ts

@@ -267,7 +267,7 @@ export class TriggerPanelCtrl extends MetricsPanelCtrl {
 
   addTagFilter(tag, datasource) {
     for (const target of this.panel.targets) {
-      if (target.datasource === datasource || this.panel.datasource === datasource) {
+      if (target.datasource?.uid === datasource?.uid || target.datasource === datasource || this.panel.datasource === datasource) {
         const tagFilter = target.tags.filter;
         let targetTags = this.parseTags(tagFilter);
         const newTag = { tag: tag.tag, value: tag.value };
@@ -283,7 +283,7 @@ export class TriggerPanelCtrl extends MetricsPanelCtrl {
   removeTagFilter(tag, datasource) {
     const matchTag = t => t.tag === tag.tag && t.value === tag.value;
     for (const target of this.panel.targets) {
-      if (target.datasource === datasource || this.panel.datasource === datasource) {
+      if (target.datasource?.uid === datasource?.uid || target.datasource === datasource || this.panel.datasource === datasource) {
         const tagFilter = target.tags.filter;
         let targetTags = this.parseTags(tagFilter);
         _.remove(targetTags, matchTag);

src/panel-triggers/types.ts

@@ -1,3 +1,5 @@
+import { DataSourceRef } from "@grafana/data";
+
 export interface ProblemsPanelOptions {
   schemaVersion: number;
   datasources: any[];
@@ -84,7 +86,7 @@ export interface ZBXTrigger {
   comments?: string;
   correlation_mode?: string;
   correlation_tag?: string;
-  datasource?: string;
+  datasource?: DataSourceRef | string;
   description?: string;
   error?: string;
   expression?: string;