Fix problems list panel error in new Grafana version

src/panel-triggers/components/AlertList/AlertCard.tsx

@@ -12,6 +12,7 @@ import { ProblemDTO, ZBXTag } from '../../../datasource-zabbix/types';
 import { ModalController } from '../../../components';
 import { DataSourceRef } from '@grafana/data';
 import { Tooltip } from '@grafana/ui';
+import { getDataSourceSrv } from '@grafana/runtime';
 
 interface AlertCardProps {
   problem: ProblemDTO;
@@ -48,6 +49,12 @@ export default class AlertCard extends PureComponent<AlertCardProps> {
     const lastchange = formatLastChange(problem.timestamp, panelOptions.customLastChangeFormat && panelOptions.lastChangeFormat);
     const age = moment.unix(problem.timestamp).fromNow(true);
 
+    let dsName: string = (problem.datasource as string);
+    if ((problem.datasource as DataSourceRef)?.uid) {
+      const dsInstance = getDataSourceSrv().getInstanceSettings((problem.datasource as DataSourceRef).uid);
+      dsName = dsInstance.name;
+    }
+
     let newProblem = false;
     if (panelOptions.highlightNewerThan) {
       newProblem = isNewProblem(problem, panelOptions.highlightNewerThan);
@@ -87,7 +94,7 @@ export default class AlertCard extends PureComponent<AlertCardProps> {
                     <EventTag
                       key={tag.tag + tag.value}
                       tag={tag}
-                      datasource={problem.datasource}
+                      datasource={dsName}
                       highlight={tag.tag === problem.correlation_tag}
                       onClick={this.handleTagClick}
                     />
@@ -125,7 +132,7 @@ export default class AlertCard extends PureComponent<AlertCardProps> {
           <div className="alert-rule-item__time zabbix-trigger-source">
             <span>
               <i className="fa fa-database"></i>
-              {problem.datasource}
+              {dsName}
             </span>
           </div>
         )}

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

@@ -4,6 +4,7 @@ import { ProblemsPanelOptions, GFTimeRange } from '../../types';
 import { AckProblemData } from '../AckModal';
 import AlertCard from './AlertCard';
 import { ProblemDTO, ZBXTag } from '../../../datasource-zabbix/types';
+import { DataSourceRef } from '@grafana/data';
 
 export interface AlertListProps {
   problems: ProblemDTO[];
@@ -67,9 +68,9 @@ export default class AlertList extends PureComponent<AlertListProps, AlertListSt
       <div className="triggers-panel-container" key="alertListContainer">
         <section className="card-section card-list-layout-list">
           <ol className={alertListClass}>
-            {currentProblems.map(problem =>
+            {currentProblems.map((problem, index) =>
               <AlertCard
-                key={`${problem.triggerid}-${problem.eventid}-${problem.datasource}`}
+                key={`${problem.triggerid}-${problem.eventid}-${(problem.datasource as DataSourceRef)?.uid || problem.datasource}-${index}`}
                 problem={problem}
                 panelOptions={panelOptions}
                 onTagClick={this.handleTagClick}