Merge branch 'exec-script' into backend

src/components/ExecScriptButton/ExecScriptButton.tsx

@@ -0,0 +1,13 @@
+import React, { FC } from 'react';
+import { ActionButton } from '../ActionButton/ActionButton';
+
+interface Props {
+  className?: string;
+  onClick(): void;
+}
+
+export const ExecScriptButton: FC<Props> = ({ className, onClick }) => {
+  return (
+    <ActionButton className={className} icon="terminal" tooltip="Execute script" onClick={onClick} />
+  );
+};

src/components/index.ts

@@ -2,5 +2,6 @@ export { GFHeartIcon } from './GFHeartIcon/GFHeartIcon';
 export { FAIcon } from './FAIcon/FAIcon';
 export { AckButton } from './AckButton/AckButton';
 export { ExploreButton } from './ExploreButton/ExploreButton';
+export { ExecScriptButton } from './ExecScriptButton/ExecScriptButton';
 export { Tooltip } from './Tooltip/Tooltip';
 export { ModalController } from './Modal/ModalController';

src/datasource-zabbix/zabbix/connectors/zabbix_api/types.ts

@@ -37,6 +37,24 @@ export interface ZabbixRequestResponse {
   data?: JSONRPCResponse<any>;
 }
 
-export type ZabbixAPIResponse<T> = T;
+export type ZabbixAPIResponse<T> = Promise<T>;
 
 export type APILoginResponse = string;
+
+export interface ZBXScript {
+  scriptid: string;
+  name?: string;
+  command?: string;
+  host_access?: string;
+  usrgrpid?: string;
+  groupid?: string;
+  description?: string;
+  confirmation?: string;
+  type?: string;
+  execute_on?: string;
+}
+
+export interface APIExecuteScriptResponse {
+  response: 'success' | 'failed';
+  value?: string;
+}

src/datasource-zabbix/zabbix/connectors/zabbix_api/zabbixAPIConnector.ts

@@ -4,7 +4,7 @@ import kbn from 'grafana/app/core/utils/kbn';
 import * as utils from '../../../utils';
 import { ZBX_ACK_ACTION_NONE, ZBX_ACK_ACTION_ADD_MESSAGE, MIN_SLA_INTERVAL } from '../../../constants';
 import { ShowProblemTypes, ZBXProblem } from '../../../types';
-import { GFHTTPRequest, JSONRPCError } from './types';
+import { GFHTTPRequest, JSONRPCError, ZBXScript, APIExecuteScriptResponse } from './types';
 import { getBackendSrv } from '@grafana/runtime';
 
 const DEFAULT_ZABBIX_VERSION = '3.0.0';
@@ -629,6 +629,24 @@ export class ZabbixAPIConnector {
 
     return this.request('proxy.get', params);
   }
+
+  getScripts(hostids: string[], options?: any): Promise<ZBXScript[]> {
+    const params: any = {
+      output: 'extend',
+      hostids,
+    };
+
+    return this.request('script.get', params).then(utils.mustArray);
+  }
+
+  executeScript(hostid: string, scriptid: string): Promise<APIExecuteScriptResponse> {
+    const params: any = {
+      hostid,
+      scriptid,
+    };
+
+    return this.request('script.execute', params);
+  }
 }
 
 function filterTriggersByAcknowledge(triggers, acknowledged) {

src/datasource-zabbix/zabbix/zabbix.ts

@@ -20,7 +20,7 @@ interface AppsResponse extends Array<any> {
 const REQUESTS_TO_PROXYFY = [
   'getHistory', 'getTrend', 'getGroups', 'getHosts', 'getApps', 'getItems', 'getMacros', 'getItemsByIDs',
   'getEvents', 'getAlerts', 'getHostAlerts', 'getAcknowledges', 'getITService', 'getSLA', 'getVersion', 'getProxies',
-  'getEventAlerts', 'getExtendedEventData', 'getProblems', 'getEventsHistory', 'getTriggersByIds'
+  'getEventAlerts', 'getExtendedEventData', 'getProblems', 'getEventsHistory', 'getTriggersByIds', 'getScripts'
 ];
 
 const REQUESTS_TO_CACHE = [
@@ -30,7 +30,7 @@ const REQUESTS_TO_CACHE = [
 const REQUESTS_TO_BIND = [
   'getHistory', 'getTrend', 'getMacros', 'getItemsByIDs', 'getEvents', 'getAlerts', 'getHostAlerts',
   'getAcknowledges', 'getITService', 'getVersion', 'acknowledgeEvent', 'getProxies', 'getEventAlerts',
-  'getExtendedEventData'
+  'getExtendedEventData', 'getScripts', 'executeScript',
 ];
 
 export class Zabbix implements ZabbixConnector {

src/panel-triggers/components/ExecScriptModal.tsx

@@ -0,0 +1,226 @@
+import React, { PureComponent } from 'react';
+import { cx, css } from 'emotion';
+import { ZBX_ACK_ACTION_ADD_MESSAGE, ZBX_ACK_ACTION_ACK, ZBX_ACK_ACTION_CHANGE_SEVERITY, ZBX_ACK_ACTION_CLOSE } from '../../datasource-zabbix/constants';
+import { ZBXScript, APIExecuteScriptResponse } from '../../datasource-zabbix/zabbix/connectors/zabbix_api/types';
+import { Button, Spinner, Modal, Select, stylesFactory, withTheme, Themeable } from '@grafana/ui';
+import { GrafanaTheme, SelectableValue } from '@grafana/data';
+import { FAIcon } from '../../components';
+
+const KEYBOARD_ENTER_KEY = 13;
+const KEYBOARD_ESCAPE_KEY = 27;
+
+interface Props extends Themeable {
+  getScripts(): Promise<ZBXScript[]>;
+  onSubmit(data?: ExecScriptData): Promise<any> | any;
+  onDismiss?(): void;
+}
+
+interface State {
+  selectedScript: SelectableValue<string>;
+  scriptOptions: Array<SelectableValue<string>>;
+  script: ZBXScript;
+  error: boolean;
+  errorMessage: string | JSX.Element;
+  result: string | JSX.Element;
+  selectError: string;
+  loading: boolean;
+}
+
+export interface ExecScriptData {
+  scriptid: string;
+}
+
+export class ExecScriptModalUnthemed extends PureComponent<Props, State> {
+  scripts: ZBXScript[];
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      error: false,
+      errorMessage: '',
+      selectError: '',
+      selectedScript: null,
+      result: '',
+      loading: false,
+      scriptOptions: [],
+      script: null,
+    };
+  }
+
+  async componentDidMount() {
+    const scripts = await this.props.getScripts();
+    this.scripts = scripts;
+    const scriptOptions: Array<SelectableValue<string>> = scripts.map(s => {
+      return {
+        value: s.scriptid,
+        label: s.name,
+        description: s.description || s.command,
+      };
+    });
+
+    const selectedScript = scriptOptions?.length ? scriptOptions[0] : null;
+    const script = scripts.find(s => selectedScript.value === s.scriptid);
+
+    this.setState({ scriptOptions, selectedScript, script });
+  }
+
+  onChangeSelectedScript = (v: SelectableValue<string>) => {
+    const script = this.scripts.find(s => v.value === s.scriptid);
+    this.setState({ selectedScript: v, script, errorMessage: '', loading: false, result: '' });
+  };
+
+  dismiss = () => {
+    this.setState({ selectedScript: null, error: false, errorMessage: '', selectError: '', loading: false });
+    this.props.onDismiss();
+  }
+
+  submit = () => {
+    const { selectedScript } = this.state;
+
+    if (!selectedScript) {
+      return this.setState({
+        selectError: 'Select a script to execute.'
+      });
+    }
+
+    this.setState({ errorMessage: '', loading: true, result: '' });
+
+    const data: ExecScriptData = {
+      scriptid: selectedScript.value,
+    };
+
+    this.props.onSubmit(data).then((result: APIExecuteScriptResponse) => {
+      const message = this.formatResult(result?.value || '');
+      if (result?.response === 'success') {
+        this.setState({ result: message, loading: false });
+      } else {
+        this.setState({ error: true, errorMessage: message, loading: false });
+      }
+    }).catch(err => {
+      let errorMessage = err.message || err.data || '';
+      errorMessage = this.formatResult(errorMessage);
+      this.setState({
+        error: true,
+        loading: false,
+        errorMessage,
+      });
+    });
+  }
+
+  formatResult = (result: string) => {
+    const formatted = result.split('\n').map((p, i) => {
+      return <p key={i}>{p}</p>;
+    });
+    return <>{formatted}</>;
+  }
+
+  render() {
+    const { theme } = this.props;
+    const { scriptOptions, selectedScript, script, result, selectError, errorMessage, error } = this.state;
+
+    const styles = getStyles(theme);
+    const modalClass = cx(styles.modal);
+    const modalTitleClass = cx(styles.modalHeaderTitle);
+    const selectErrorClass = cx('gf-form-hint-text', styles.inputError);
+    const scriptCommandContainerClass = cx('gf-form', styles.scriptCommandContainer);
+    const scriptCommandClass = cx('gf-form-hint-text', styles.scriptCommand);
+
+    return (
+      <Modal
+        isOpen={true}
+        onDismiss={this.dismiss}
+        className={modalClass}
+        title={
+          <div className={modalTitleClass}>
+            {this.state.loading ? <Spinner size={18} /> : <FAIcon icon="terminal" />}
+            <span className="p-l-1">Execute script</span>
+          </div>
+        }
+      >
+        <div className="gf-form">
+          <label className="gf-form-hint">
+            <Select
+              options={scriptOptions}
+              value={selectedScript}
+              onChange={this.onChangeSelectedScript}
+            />
+            {selectError &&
+              <small className={selectErrorClass}>{selectError}</small>
+            }
+          </label>
+        </div>
+        <div className={scriptCommandContainerClass}>
+          {script && <small className={scriptCommandClass}>{script.command}</small>}
+        </div>
+
+        <div className={styles.resultContainer}>
+        {result &&
+          <span className={styles.execResult}>{result}</span>
+        }
+        {error &&
+          <span className={styles.execError}>{errorMessage}</span>
+        }
+        </div>
+
+        <div className="gf-form-button-row text-center">
+          <Button variant="primary" onClick={this.submit}>Execute</Button>
+          <Button variant="secondary" onClick={this.dismiss}>Cancel</Button>
+        </div>
+      </Modal>
+    );
+  }
+}
+
+const getStyles = stylesFactory((theme: GrafanaTheme) => {
+  const red = theme.colors.red || (theme as any).palette.red;
+  return {
+    modal: css`
+      width: 600px;
+    `,
+    modalHeaderTitle: css`
+      font-size: ${theme.typography.heading.h3};
+      padding-top: ${theme.spacing.sm};
+      margin: 0 ${theme.spacing.md};
+      display: flex;
+    `,
+    input: css`
+      border-color: ${red};
+      border-radius: 2px;
+      outline-offset: 2px;
+      box-shadow: 0 0 0 2px ${theme.colors.pageBg || (theme as any).colors.bg1}, 0 0 0px 4px ${red};
+    `,
+    scriptCommandContainer: css`
+      margin-bottom: ${theme.spacing.md};
+    `,
+    scriptCommand: css`
+      color: ${theme.colors.textWeak};
+      text-align: left;
+      font-family: ${theme.typography.fontFamily.monospace};
+    `,
+    inputHint: css`
+      display: inherit;
+      float: right;
+      color: ${theme.colors.textWeak};
+    `,
+    inputError: css`
+      float: left;
+      color: ${red};
+    `,
+    resultContainer: css`
+      min-height: 50px;
+      font-family: ${theme.typography.fontFamily.monospace};
+      font-size: ${theme.typography.size.sm};
+      p {
+        font-size: ${theme.typography.size.sm};
+        margin-bottom: 0px;
+      }
+    `,
+    execResult: css`
+    `,
+    execError: css`
+      color: ${red};
+    `,
+  };
+});
+
+export const ExecScriptModal = withTheme(ExecScriptModalUnthemed);

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

@@ -2,13 +2,15 @@ import React, { 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 { 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 } from '../../../components';
+import { FAIcon, ExploreButton, AckButton, Tooltip, ModalController, ExecScriptButton } from '../../../components';
+import { ExecScriptModal, ExecScriptData } from '../ExecScriptModal';
 
 interface ProblemDetailsProps extends RTRow<ProblemDTO> {
   rootWidth: number;
@@ -17,6 +19,8 @@ interface ProblemDetailsProps extends RTRow<ProblemDTO> {
   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;
 }
@@ -74,6 +78,16 @@ export class ProblemDetails extends PureComponent<ProblemDetailsProps, ProblemDe
     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;
@@ -102,6 +116,20 @@ export class ProblemDetails extends PureComponent<ProblemDetailsProps, ProblemDe
             <ProblemStatusBar problem={problem} alerts={alerts} className={compactStatusBar && 'compact'} />
             {problem.showAckButton &&
               <div className="problem-actions">
+                <ModalController>
+                  {({ showModal, hideModal }) => (
+                    <ExecScriptButton
+                      className="navbar-button navbar-button--settings"
+                      onClick={() => {
+                        showModal(ExecScriptModal, {
+                          getScripts: this.getScripts,
+                          onSubmit: this.onExecuteScript,
+                          onDismiss: hideModal,
+                        });
+                      }}
+                    />
+                  )}
+                </ModalController>
                 <ModalController>
                   {({ showModal, hideModal }) => (
                     <AckButton

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

@@ -10,6 +10,7 @@ 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 { AckCell } from './AckCell';
 
 export interface ProblemListProps {
@@ -22,6 +23,8 @@ export interface ProblemListProps {
   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) => void;
   onTagClick?: (tag: ZBXTag, datasource: string, ctrlKey?: boolean, shiftKey?: boolean) => void;
   onPageSizeChange?: (pageSize: number, pageIndex: number) => void;
@@ -53,6 +56,9 @@ export default class ProblemList extends PureComponent<ProblemListProps, Problem
     return this.props.onProblemAck(problem, data);
   }
 
+  onExecuteScript = (problem: ProblemDTO, data: AckProblemData) => {
+  }
+
   handlePageSizeChange = (pageSize, pageIndex) => {
     if (this.props.onPageSizeChange) {
       this.props.onPageSizeChange(pageSize, pageIndex);
@@ -170,7 +176,9 @@ export default class ProblemList extends PureComponent<ProblemListProps, Problem
               panelId={this.props.panelId}
               getProblemEvents={this.props.getProblemEvents}
               getProblemAlerts={this.props.getProblemAlerts}
+              getScripts={this.props.getScripts}
               onProblemAck={this.handleProblemAck}
+              onExecuteScript={this.props.onExecuteScript}
               onTagClick={this.handleTagClick}
               subRows={false}
             />

src/panel-triggers/triggers_panel_ctrl.ts

@@ -316,6 +316,15 @@ export class TriggerPanelCtrl extends MetricsPanelCtrl {
     });
   }
 
+  getProblemScripts(problem: ProblemDTO) {
+    const hostid = problem.hosts?.length ? problem.hosts[0].hostid : null;
+
+    return getDataSourceSrv().get(problem.datasource)
+    .then((datasource: any) => {
+      return datasource.zabbix.getScripts([hostid]);
+    });
+  }
+
   getAlertIconClassBySeverity(triggerSeverity) {
     let iconClass = 'icon-gf-online';
     if (triggerSeverity.priority >= 2) {
@@ -352,6 +361,15 @@ export class TriggerPanelCtrl extends MetricsPanelCtrl {
     });
   }
 
+  executeScript(problem: ProblemDTO, scriptid: string) {
+    const hostid = problem.hosts?.length ? problem.hosts[0].hostid : null;
+
+    return getDataSourceSrv().get(problem.datasource)
+    .then((datasource: any) => {
+      return datasource.zabbix.executeScript(hostid, scriptid);
+    });
+  }
+
   handlePageSizeChange(pageSize, pageIndex) {
     this.panel.pageSize = pageSize;
     this.pageIndex = pageIndex;
@@ -399,12 +417,14 @@ export class TriggerPanelCtrl extends MetricsPanelCtrl {
         panelId: ctrl.panel.id,
         getProblemEvents: ctrl.getProblemEvents.bind(ctrl),
         getProblemAlerts: ctrl.getProblemAlerts.bind(ctrl),
+        getScripts: ctrl.getProblemScripts.bind(ctrl),
         onPageSizeChange: ctrl.handlePageSizeChange.bind(ctrl),
         onColumnResize: ctrl.handleColumnResize.bind(ctrl),
         onProblemAck: (trigger, data) => {
           const { message, action, severity } = data;
           return ctrl.acknowledgeProblem(trigger, message, action, severity);
         },
+        onExecuteScript: ctrl.executeScript.bind(ctrl),
         onTagClick: (tag, datasource, ctrlKey, shiftKey) => {
           if (ctrlKey || shiftKey) {
             ctrl.removeTagFilter(tag, datasource);