Latest plugin changes from upstream

CHANGELOG.md

@@ -5,6 +5,22 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](http://keepachangelog.com/)
 and this project adheres to [Semantic Versioning](http://semver.org/).
 
+## Unreleased
+### Added
+- SLA over time graphs, [#728](https://github.com/alexanderzobnin/grafana-zabbix/issues/728)
+
+## [3.10.4] - 2019-08-08
+### Fixed
+- Problems panel: query editor broken in Grafana 6.3, [#778](https://github.com/alexanderzobnin/grafana-zabbix/issues/778)
+- Problems panel: some heart icons are missing, [#754](https://github.com/alexanderzobnin/grafana-zabbix/issues/754)
+
+## [3.10.3] - 2019-07-26
+### Fixed
+- Direct DB Connection: can't stay enabled, [#731](https://github.com/alexanderzobnin/grafana-zabbix/issues/731)
+- Triggers query mode: count doesn't work with Singlestat, [#726](https://github.com/alexanderzobnin/grafana-zabbix/issues/726)
+- Query editor: function editor looks odd in Grafana 6.x, [#765](https://github.com/alexanderzobnin/grafana-zabbix/issues/765)
+- Alerting: heart icon on panels in Grafana 6.x, [#715](https://github.com/alexanderzobnin/grafana-zabbix/issues/715)
+
 ## [3.10.2] - 2019-04-23
 ### Fixed
 - Direct DB Connection: provisioned datasource fails to load, [#711](https://github.com/alexanderzobnin/grafana-zabbix/issues/711)

package.json

@@ -1,7 +1,7 @@
 {
   "name": "grafana-zabbix",
   "private": false,
-  "version": "3.10.1",
+  "version": "3.10.4",
   "description": "Zabbix plugin for Grafana",
   "scripts": {
     "build": "webpack --config webpack/webpack.prod.conf.js --progress --colors",
@@ -69,6 +69,7 @@
     "react-table": "^6.8.6",
     "react-test-renderer": "^16.7.0",
     "react-transition-group": "^2.5.2",
+    "rst2html": "github:thoward/rst2html#990cb89",
     "sass-loader": "^7.1.0",
     "style-loader": "^0.23.1",
     "tether-drop": "^1.4.2",

src/datasource-zabbix/components/FunctionEditor.tsx

@@ -0,0 +1,109 @@
+import React from 'react';
+// import rst2html from 'rst2html';
+import { FunctionDescriptor, FunctionEditorControlsProps, FunctionEditorControls } from './FunctionEditorControls';
+
+// @ts-ignore
+import { PopperController, Popper } from '@grafana/ui';
+
+interface FunctionEditorProps extends FunctionEditorControlsProps {
+  func: FunctionDescriptor;
+}
+
+interface FunctionEditorState {
+  showingDescription: boolean;
+}
+
+class FunctionEditor extends React.PureComponent<FunctionEditorProps, FunctionEditorState> {
+  private triggerRef = React.createRef<HTMLSpanElement>();
+
+  constructor(props: FunctionEditorProps) {
+    super(props);
+
+    this.state = {
+      showingDescription: false,
+    };
+  }
+
+  renderContent = ({ updatePopperPosition }) => {
+    const {
+      onMoveLeft,
+      onMoveRight,
+      func: {
+        def: { name, description },
+      },
+    } = this.props;
+    const { showingDescription } = this.state;
+
+    if (showingDescription) {
+      return (
+        <div style={{ overflow: 'auto', maxHeight: '30rem', textAlign: 'left', fontWeight: 'normal' }}>
+          <h4 style={{ color: 'white' }}> {name} </h4>
+          <div>{description}</div>
+          />
+        </div>
+      );
+    }
+
+    return (
+      <FunctionEditorControls
+        {...this.props}
+        onMoveLeft={() => {
+          onMoveLeft(this.props.func);
+          updatePopperPosition();
+        }}
+        onMoveRight={() => {
+          onMoveRight(this.props.func);
+          updatePopperPosition();
+        }}
+        onDescriptionShow={() => {
+          this.setState({ showingDescription: true }, () => {
+            updatePopperPosition();
+          });
+        }}
+      />
+    );
+  };
+
+  render() {
+    return (
+      <PopperController content={this.renderContent} placement="top" hideAfter={300}>
+        {(showPopper, hidePopper, popperProps) => {
+          return (
+            <>
+              {this.triggerRef && (
+                <Popper
+                  {...popperProps}
+                  referenceElement={this.triggerRef.current}
+                  wrapperClassName="popper"
+                  className="popper__background"
+                  onMouseLeave={() => {
+                    this.setState({ showingDescription: false });
+                    hidePopper();
+                  }}
+                  onMouseEnter={showPopper}
+                  renderArrow={({ arrowProps, placement }) => (
+                    <div className="popper__arrow" data-placement={placement} {...arrowProps} />
+                  )}
+                />
+              )}
+
+              <span
+                ref={this.triggerRef}
+                onClick={popperProps.show ? hidePopper : showPopper}
+                onMouseLeave={() => {
+                  hidePopper();
+                  this.setState({ showingDescription: false });
+                }}
+                style={{ cursor: 'pointer' }}
+              >
+                {this.props.func.def.name}
+              </span>
+            </>
+          );
+        }}
+      </PopperController>
+    );
+  }
+}
+
+export { FunctionEditor };

src/datasource-zabbix/components/FunctionEditorControls.tsx

@@ -0,0 +1,67 @@
+import React from 'react';
+
+const DOCS_FUNC_REF_URL = 'https://alexanderzobnin.github.io/grafana-zabbix/reference/functions/';
+
+export interface FunctionDescriptor {
+  text: string;
+  params: string[];
+  def: {
+    category: string;
+    defaultParams: string[];
+    description?: string;
+    fake: boolean;
+    name: string;
+    params: string[];
+  };
+}
+
+export interface FunctionEditorControlsProps {
+  onMoveLeft: (func: FunctionDescriptor) => void;
+  onMoveRight: (func: FunctionDescriptor) => void;
+  onRemove: (func: FunctionDescriptor) => void;
+}
+
+const FunctionHelpButton = (props: { description: string; name: string; onDescriptionShow: () => void }) => {
+  if (props.description) {
+    return <span className="pointer fa fa-question-circle" onClick={props.onDescriptionShow} />;
+  }
+
+  return (
+    <span
+      className="pointer fa fa-question-circle"
+      onClick={() => {
+        window.open(
+          DOCS_FUNC_REF_URL + '#' + props.name,
+          '_blank'
+        );
+      }}
+    />
+  );
+};
+
+export const FunctionEditorControls = (
+  props: FunctionEditorControlsProps & {
+    func: FunctionDescriptor;
+    onDescriptionShow: () => void;
+  }
+) => {
+  const { func, onMoveLeft, onMoveRight, onRemove, onDescriptionShow } = props;
+  return (
+    <div
+      style={{
+        display: 'flex',
+        width: '60px',
+        justifyContent: 'space-between',
+      }}
+    >
+      <span className="pointer fa fa-arrow-left" onClick={() => onMoveLeft(func)} />
+      <FunctionHelpButton
+        name={func.def.name}
+        description={func.def.description}
+        onDescriptionShow={onDescriptionShow}
+      />
+      <span className="pointer fa fa-remove" onClick={() => onRemove(func)} />
+      <span className="pointer fa fa-arrow-right" onClick={() => onMoveRight(func)} />
+    </div>
+  );
+};

src/datasource-zabbix/config.controller.js

@@ -29,9 +29,7 @@ export class ZabbixDSConfigController {
     this.current.jsonData = migrateDSConfig(this.current.jsonData);
     _.defaults(this.current.jsonData, defaultConfig);
 
-    this.dbConnectionEnable = this.current.jsonData.dbConnectionEnable;
     this.dbConnectionDatasourceId = this.current.jsonData.dbConnectionDatasourceId;
-
     this.dbDataSources = this.getSupportedDBDataSources();
     this.zabbixVersions = _.cloneDeep(zabbixVersions);
     this.autoDetectZabbixVersion();
@@ -81,4 +79,8 @@ export class ZabbixDSConfigController {
       }
     });
   }
+
+  onDBConnectionDatasourceChange() {
+    this.current.jsonData.dbConnectionDatasourceId = this.dbConnectionDatasourceId;
+  }
 }

src/datasource-zabbix/constants.js

@@ -34,3 +34,6 @@ export const TRIGGER_SEVERITY = [
   {val: 4, text: 'High'},
   {val: 5, text: 'Disaster'}
 ];
+
+/** Minimum interval for SLA over time (1 hour) */
+export const MIN_SLA_INTERVAL = 3600;

src/datasource-zabbix/datasource.js

@@ -323,8 +323,8 @@ export class ZabbixDatasource {
 
     return this.zabbix.getITServices(itServiceFilter)
     .then(itservices => {
-      return this.zabbix.getSLA(itservices, timeRange, target, options);
-    });
+      return this.zabbix.getSLA(itservices, timeRange, target, options);})
+    .then(itservicesdp => this.applyDataProcessingFunctions(itservicesdp, target));
   }
 
   queryTriggersData(target, timeRange) {