Fix Explore button, fixes #1240

Also pass dashboard time range to the explore view.

src/components/ExploreButton/ExploreButton.tsx

@@ -1,25 +1,26 @@
 import React, { FC } from 'react';
-import { getLocationSrv } from '@grafana/runtime';
-import { MODE_METRICS, MODE_ITEMID } from '../../datasource-zabbix/constants';
-import { renderUrl } from '../../panel-triggers/utils';
+import { locationService } from '@grafana/runtime';
+import { ExploreUrlState, TimeRange, urlUtil } from "@grafana/data";
+import { MODE_ITEMID, MODE_METRICS } from '../../datasource-zabbix/constants';
+import { ActionButton } from '../ActionButton/ActionButton';
 import { expandItemName } from '../../datasource-zabbix/utils';
 import { ProblemDTO } from '../../datasource-zabbix/types';
-import { ActionButton } from '../ActionButton/ActionButton';
 
 interface Props {
   problem: ProblemDTO;
+  range: TimeRange;
   panelId: number;
 }
 
-export const ExploreButton: FC<Props> = ({ problem, panelId }) => {
+export const ExploreButton: FC<Props> = ({ problem, panelId, range }) => {
   return (
-    <ActionButton icon="compass" width={6} onClick={() => openInExplore(problem, panelId)}>
+    <ActionButton icon="compass" width={6} onClick={() => openInExplore(problem, panelId, range)}>
       Explore
     </ActionButton>
   );
 };
 
-const openInExplore = (problem: ProblemDTO, panelId: number) => {
+const openInExplore = (problem: ProblemDTO, panelId: number, range: TimeRange) => {
   let query: any = {};
 
   if (problem.items?.length === 1 && problem.hosts?.length === 1) {
@@ -41,14 +42,16 @@ const openInExplore = (problem: ProblemDTO, panelId: number) => {
     };
   }
 
-  const state: any = {
+  const state: ExploreUrlState = {
     datasource: problem.datasource,
     context: 'explore',
     originPanelId: panelId,
+    range: range.raw,
     queries: [query],
   };
 
   const exploreState = JSON.stringify(state);
-  const url = renderUrl('/explore', { left: exploreState });
-  getLocationSrv().update({ path: url, query: {} });
+  const url = urlUtil.renderUrl('/explore', { left: exploreState });
+  locationService.push(url);
 };
+

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

@@ -1,27 +1,30 @@
 import React, { FC, PureComponent } from 'react';
 import moment from 'moment';
 import * as utils from '../../../datasource-zabbix/utils';
-import { ProblemDTO, ZBXHost, ZBXGroup, ZBXEvent, ZBXTag, ZBXAlert } from '../../../datasource-zabbix/types';
-import { ZBXScript, APIExecuteScriptResponse } from '../../../datasource-zabbix/zabbix/connectors/zabbix_api/types';
-import { ZBXItem, GFTimeRange, RTRow } from '../../types';
+import { ProblemDTO, ZBXAlert, ZBXEvent, ZBXGroup, ZBXHost, ZBXTag } from '../../../datasource-zabbix/types';
+import { APIExecuteScriptResponse, ZBXScript } from '../../../datasource-zabbix/zabbix/connectors/zabbix_api/types';
+import { GFTimeRange, RTRow, ZBXItem } from '../../types';
 import { AckModal, AckProblemData } from '../AckModal';
 import EventTag from '../EventTag';
 import ProblemStatusBar from './ProblemStatusBar';
 import AcknowledgesList from './AcknowledgesList';
 import ProblemTimeline from './ProblemTimeline';
-import { FAIcon, ExploreButton, AckButton, Tooltip, ModalController, ExecScriptButton } from '../../../components';
-import { ExecScriptModal, ExecScriptData } from '../ExecScriptModal';
-import { Icon } from '@grafana/ui';
+import { AckButton, ExecScriptButton, ExploreButton, FAIcon, ModalController, Tooltip } from '../../../components';
+import { ExecScriptData, ExecScriptModal } from '../ExecScriptModal';
+import { TimeRange } from "@grafana/data";
 
 interface ProblemDetailsProps extends RTRow<ProblemDTO> {
   rootWidth: number;
   timeRange: GFTimeRange;
+  range: TimeRange;
   showTimeline?: boolean;
   panelId?: number;
   getProblemEvents: (problem: ProblemDTO) => Promise<ZBXEvent[]>;
   getProblemAlerts: (problem: ProblemDTO) => Promise<ZBXAlert[]>;
   getScripts: (problem: ProblemDTO) => Promise<ZBXScript[]>;
+
   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;
 }
@@ -56,7 +59,7 @@ export class ProblemDetails extends PureComponent<ProblemDetailsProps, ProblemDe
     if (this.props.onTagClick) {
       this.props.onTagClick(tag, this.props.original.datasource, ctrlKey, shiftKey);
     }
-  }
+  };
 
   fetchProblemEvents() {
     const problem = this.props.original;
@@ -77,22 +80,22 @@ export class ProblemDetails extends PureComponent<ProblemDetailsProps, ProblemDe
   ackProblem = (data: AckProblemData) => {
     const problem = this.props.original as ProblemDTO;
     return this.props.onProblemAck(problem, data);
-  }
+  };
 
   getScripts = () => {
     const problem = this.props.original as ProblemDTO;
     return this.props.getScripts(problem);
-  }
+  };
 
   onExecuteScript = (data: ExecScriptData) => {
     const problem = this.props.original as ProblemDTO;
     return this.props.onExecuteScript(problem, data.scriptid);
-  }
+  };
 
   render() {
     const problem = this.props.original as ProblemDTO;
     const alerts = this.state.alerts;
-    const rootWidth = this.props.rootWidth;
+    const { rootWidth, panelId, range } = this.props;
     const displayClass = this.state.show ? 'show' : '';
     const wideLayout = rootWidth > 1200;
     const compactStatusBar = rootWidth < 800 || problem.acknowledges && wideLayout && rootWidth < 1400;
@@ -104,7 +107,7 @@ export class ProblemDetails extends PureComponent<ProblemDetailsProps, ProblemDe
       <div className={`problem-details-container ${displayClass}`}>
         <div className="problem-details-head">
           <div className="problem-actions-left">
-            <ExploreButton problem={problem} panelId={this.props.panelId} />
+            <ExploreButton problem={problem} panelId={panelId} range={range}/>
           </div>
           {problem.showAckButton &&
           <div className="problem-actions">

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

@@ -7,17 +7,19 @@ import { isNewProblem } from '../../utils';
 import EventTag from '../EventTag';
 import { ProblemDetails } from './ProblemDetails';
 import { AckProblemData } from '../AckModal';
-import { GFHeartIcon, FAIcon } from '../../../components';
-import { ProblemsPanelOptions, GFTimeRange, RTCell, TriggerSeverity, RTResized } from '../../types';
-import { ProblemDTO, ZBXEvent, ZBXTag, ZBXAlert } from '../../../datasource-zabbix/types';
-import { ZBXScript, APIExecuteScriptResponse } from '../../../datasource-zabbix/zabbix/connectors/zabbix_api/types';
+import { FAIcon, GFHeartIcon } from '../../../components';
+import { GFTimeRange, ProblemsPanelOptions, RTCell, RTResized, TriggerSeverity } from '../../types';
+import { ProblemDTO, ZBXAlert, ZBXEvent, ZBXTag } from '../../../datasource-zabbix/types';
+import { APIExecuteScriptResponse, ZBXScript } from '../../../datasource-zabbix/zabbix/connectors/zabbix_api/types';
 import { AckCell } from './AckCell';
+import { TimeRange } from "@grafana/data";
 
 export interface ProblemListProps {
   problems: ProblemDTO[];
   panelOptions: ProblemsPanelOptions;
   loading?: boolean;
   timeRange?: GFTimeRange;
+  range?: TimeRange;
   pageSize?: number;
   fontSize?: number;
   panelId?: number;
@@ -52,26 +54,26 @@ export default class ProblemList extends PureComponent<ProblemListProps, Problem
 
   setRootRef = ref => {
     this.rootRef = ref;
-  }
+  };
 
   handleProblemAck = (problem: ProblemDTO, data: AckProblemData) => {
     return this.props.onProblemAck(problem, data);
-  }
+  };
 
   onExecuteScript = (problem: ProblemDTO, data: AckProblemData) => {
-  }
+  };
 
   handlePageSizeChange = (pageSize, pageIndex) => {
     if (this.props.onPageSizeChange) {
       this.props.onPageSizeChange(pageSize, pageIndex);
     }
-  }
+  };
 
   handleResizedChange = (newResized, event) => {
     if (this.props.onColumnResize) {
       this.props.onColumnResize(newResized);
     }
-  }
+  };
 
   handleExpandedChange = (expanded: any, event: any) => {
     const { problems, pageSize } = this.props;
@@ -99,13 +101,13 @@ export default class ProblemList extends PureComponent<ProblemListProps, Problem
       expanded: nextExpanded,
       expandedProblems: nextExpandedProblems,
     });
-  }
+  };
 
   handleTagClick = (tag: ZBXTag, datasource: string, ctrlKey?: boolean, shiftKey?: boolean) => {
     if (this.props.onTagClick) {
       this.props.onTagClick(tag, datasource, ctrlKey, shiftKey);
     }
-  }
+  };
 
   getExpandedPage = (page: number) => {
     const { problems, pageSize } = this.props;
@@ -124,7 +126,7 @@ export default class ProblemList extends PureComponent<ProblemListProps, Problem
     }
 
     return expandedPage;
-  }
+  };
 
   buildColumns() {
     const result = [];
@@ -209,6 +211,7 @@ export default class ProblemList extends PureComponent<ProblemListProps, Problem
             <ProblemDetails {...props}
                             rootWidth={this.rootWidth}
                             timeRange={this.props.timeRange}
+                            range={this.props.range}
                             showTimeline={panelOptions.problemTimeline}
                             panelId={this.props.panelId}
                             getProblemEvents={this.props.getProblemEvents}
@@ -270,7 +273,7 @@ function SeverityCell(
   }
 
   return (
-    <div className='severity-cell' style={{ background: color }}>
+    <div className="severity-cell" style={{ background: color }}>
       {severityDesc.severity}
     </div>
   );
@@ -350,7 +353,7 @@ class TagCell extends PureComponent<TagCellProps> {
     if (this.props.onTagClick) {
       this.props.onTagClick(tag, this.props.original.datasource, ctrlKey, shiftKey);
     }
-  }
+  };
 
   render() {
     const tags = this.props.value || [];

src/panel-triggers/triggers_panel_ctrl.ts

@@ -4,10 +4,9 @@ import _ from 'lodash';
 import { getDataSourceSrv } from '@grafana/runtime';
 import { PanelEvents } from '@grafana/data';
 import * as dateMath from 'grafana/app/core/utils/datemath';
-import * as utils from '../datasource-zabbix/utils';
 import { MetricsPanelCtrl } from 'grafana/app/plugins/sdk';
 import { triggerPanelOptionsTab } from './options_tab';
-import { migratePanelSchema, CURRENT_SCHEMA_VERSION } from './migrations';
+import { CURRENT_SCHEMA_VERSION, migratePanelSchema } from './migrations';
 import ProblemList from './components/Problems/Problems';
 import AlertList from './components/AlertList/AlertList';
 import { ProblemDTO } from 'datasource-zabbix/types';
@@ -413,6 +412,7 @@ export class TriggerPanelCtrl extends MetricsPanelCtrl {
         problems,
         panelOptions,
         timeRange: { timeFrom, timeTo },
+        range: ctrl.range,
         loading,
         pageSize,
         fontSize: fontSizeProp,

src/panel-triggers/utils.ts

@@ -32,74 +32,3 @@ export const getNextRefIdChar = (queries: DataQuery[]): string => {
     });
   });
 };
-
-export type UrlQueryMap = Record<string, any>;
-
-export function renderUrl(path: string, query: UrlQueryMap | undefined): string {
-  if (query && Object.keys(query).length > 0) {
-    path += '?' + toUrlParams(query);
-  }
-  return path;
-}
-
-function encodeURIComponentAsAngularJS(val: string, pctEncodeSpaces?: boolean) {
-  return encodeURIComponent(val)
-    .replace(/%25/gi, '%2525') // Double-encode % symbol to make it properly decoded in Explore
-    .replace(/%40/gi, '@')
-    .replace(/%3A/gi, ':')
-    .replace(/%24/g, '$')
-    .replace(/%2C/gi, ',')
-    .replace(/%3B/gi, ';')
-    .replace(/%20/g, pctEncodeSpaces ? '%20' : '+');
-}
-
-function toUrlParams(a: any) {
-  const s: any[] = [];
-  const rbracket = /\[\]$/;
-
-  const isArray = (obj: any) => {
-    return Object.prototype.toString.call(obj) === '[object Array]';
-  };
-
-  const add = (k: string, v: any) => {
-    v = typeof v === 'function' ? v() : v === null ? '' : v === undefined ? '' : v;
-    if (typeof v !== 'boolean') {
-      s[s.length] = encodeURIComponentAsAngularJS(k, true) + '=' + encodeURIComponentAsAngularJS(v, true);
-    } else {
-      s[s.length] = encodeURIComponentAsAngularJS(k, true);
-    }
-  };
-
-  const buildParams = (prefix: string, obj: any) => {
-    let i, len, key;
-
-    if (prefix) {
-      if (isArray(obj)) {
-        for (i = 0, len = obj.length; i < len; i++) {
-          if (rbracket.test(prefix)) {
-            add(prefix, obj[i]);
-          } else {
-            buildParams(prefix, obj[i]);
-          }
-        }
-      } else if (obj && String(obj) === '[object Object]') {
-        for (key in obj) {
-          buildParams(prefix + '[' + key + ']', obj[key]);
-        }
-      } else {
-        add(prefix, obj);
-      }
-    } else if (isArray(obj)) {
-      for (i = 0, len = obj.length; i < len; i++) {
-        add(obj[i].name, obj[i].value);
-      }
-    } else {
-      for (key in obj) {
-        buildParams(key, obj[key]);
-      }
-    }
-    return s;
-  };
-
-  return buildParams('', a).join('&');
-}