Explore button refactor

src/components/ExploreButton/ExploreButton.tsx

@@ -0,0 +1,89 @@
+import React, { FC } from 'react';
+import { cx, css } from 'emotion';
+import { stylesFactory, useTheme } from '@grafana/ui';
+import { GrafanaTheme, GrafanaThemeType } from '@grafana/data';
+import { getLocationSrv } from '@grafana/runtime';
+import { MODE_METRICS, MODE_ITEMID } from '../../datasource-zabbix/constants';
+import { renderUrl } from '../../panel-triggers/utils';
+import { FAIcon } from '../FAIcon/FAIcon';
+import { ProblemDTO } from '../../datasource-zabbix/types';
+
+interface Props {
+  problem: ProblemDTO;
+  panelId: number;
+}
+
+export const ExploreButton: FC<Props> = ({ problem, panelId }) => {
+  const theme = useTheme();
+  const styles = getStyles(theme);
+  const buttonClass = cx('btn', styles.button);
+
+  return (
+    <button className={buttonClass} onClick={() => openInExplore(problem, panelId)}>
+      <FAIcon icon="compass" customClass={styles.icon} /><span>Explore</span>
+    </button>
+  );
+};
+
+const openInExplore = (problem: ProblemDTO, panelId: number) => {
+  console.log(problem, panelId);
+  let query: any = {};
+
+  if (problem.items?.length === 1 && problem.hosts?.length === 1) {
+    const item = problem.items[0];
+    const host = problem.hosts[0];
+    query = {
+      queryType: MODE_METRICS,
+      group: { filter: '/.*/' },
+      application: { filter: '' },
+      host: { filter: host.name },
+      item: { filter: item.name },
+    };
+  } else {
+    const itemids = problem.items?.map(p => p.itemid).join(',');
+    query = {
+      queryType: MODE_ITEMID,
+      itemids: itemids,
+    };
+  }
+
+  const state: any = {
+    datasource: problem.datasource,
+    context: 'explore',
+    originPanelId: panelId,
+    queries: [query],
+  };
+
+  const exploreState = JSON.stringify(state);
+  const url = renderUrl('/explore', { left: exploreState });
+  console.log(url);
+  getLocationSrv().update({ path: url, query: {} });
+};
+
+const getStyles = stylesFactory((theme: GrafanaTheme) => {
+  const actionBlue = theme.type === GrafanaThemeType.Light ? '#497dc0' : '#005f81';
+  return {
+    button: css`
+      width: 6rem;
+      height: 2rem;
+      background-image: none;
+      background-color: ${actionBlue};
+      border: 1px solid darken(${actionBlue}, 6%);
+      border-radius: 1px;
+      margin-right: 1.6rem;
+
+      i {
+        vertical-align: middle;
+      }
+
+      &:hover {
+        background-color: darken(${actionBlue}, 4%);
+      }
+    `,
+    icon: css`
+      i {
+        color: ${theme.colors.text};
+      }
+    `,
+  };
+});

src/components/FAIcon/FAIcon.tsx

@@ -7,7 +7,7 @@ interface Props {
 }
 
 export const FAIcon: FC<Props> = ({ icon, customClass }) => {
-  const wrapperClass = cx('fa-icon-container', customClass);
+  const wrapperClass = cx(customClass, 'fa-icon-container');
 
   return (
     <span className={wrapperClass}>

src/components/index.ts

@@ -1,4 +1,5 @@
 export { GFHeartIcon } from './GFHeartIcon/GFHeartIcon';
 export { FAIcon } from './FAIcon/FAIcon';
+export { ExploreButton } from './ExploreButton/ExploreButton';
 export { Tooltip } from './Tooltip/Tooltip';
 export { ModalController } from './Modal/ModalController';

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

@@ -1,7 +1,6 @@
 import React, { PureComponent } from 'react';
 import moment from 'moment';
 import * as utils from '../../../datasource-zabbix/utils';
-import { MODE_ITEMID, MODE_METRICS } from '../../../datasource-zabbix/constants';
 import { ProblemDTO, ZBXHost, ZBXGroup, ZBXEvent, ZBXTag, ZBXAlert } from '../../../datasource-zabbix/types';
 import { ZBXItem, GFTimeRange, RTRow } from '../../types';
 import { AckModal, AckProblemData } from '../AckModal';
@@ -9,9 +8,7 @@ import EventTag from '../EventTag';
 import ProblemStatusBar from './ProblemStatusBar';
 import AcknowledgesList from './AcknowledgesList';
 import ProblemTimeline from './ProblemTimeline';
-import { FAIcon, Tooltip, ModalController } from '../../../components';
+import { FAIcon, ExploreButton, Tooltip, ModalController } from '../../../components';
-import { renderUrl } from '../../utils';
-import { getLocationSrv } from '@grafana/runtime';
 
 interface ProblemDetailsProps extends RTRow<ProblemDTO> {
   rootWidth: number;
@@ -77,40 +74,6 @@ export class ProblemDetails extends PureComponent<ProblemDetailsProps, ProblemDe
     return this.props.onProblemAck(problem, data);
   }
 
-  openInExplore = () => {
-    const problem = this.props.original as ProblemDTO;
-    let query: any = {};
-
-    if (problem.items?.length === 1 && problem.hosts?.length === 1) {
-      const item = problem.items[0];
-      const host = problem.hosts[0];
-      query = {
-        queryType: MODE_METRICS,
-        group: { filter: '/.*/' },
-        application: { filter: '' },
-        host: { filter: host.name },
-        item: { filter: item.name },
-      };
-    } else {
-      const itemids = problem.items?.map(p => p.itemid).join(',');
-      query = {
-        queryType: MODE_ITEMID,
-        itemids: itemids,
-      };
-    }
-
-    const state: any = {
-      datasource: problem.datasource,
-      context: 'explore',
-      originPanelId: this.props.panelId,
-      queries: [query],
-    };
-
-    const exploreState = JSON.stringify(state);
-    const url = renderUrl('/explore', { left: exploreState });
-    getLocationSrv().update({ path: url, query: {} });
-  };
-
   render() {
     const problem = this.props.original as ProblemDTO;
     const alerts = this.state.alerts;
@@ -133,7 +96,7 @@ export class ProblemDetails extends PureComponent<ProblemDetailsProps, ProblemDe
               </div>
               {problem.items && <ProblemItems items={problem.items} />}
             </div>
-            <ExploreButton onClick={this.openInExplore} />
+            <ExploreButton problem={problem} panelId={this.props.panelId} />
             <ProblemStatusBar problem={problem} alerts={alerts} className={compactStatusBar && 'compact'} />
             {problem.showAckButton &&
               <div className="problem-actions">
@@ -308,15 +271,3 @@ class ProblemActionButton extends PureComponent<ProblemActionButtonProps> {
     return button;
   }
 }
-
-interface ExploreButtonProps {
-  onClick: (event?) => void;
-}
-
-const ExploreButton: React.FC<ExploreButtonProps> = ({ onClick }) => {
-  return (
-    <button className="btn problem-explore-button" onClick={onClick}>
-      <FAIcon icon="compass" /><span>Explore</span>
-    </button>
-  );
-};