Update datasource config editor

src/datasource-zabbix/components/ConfigEditor.tsx

@@ -0,0 +1,268 @@
+import React, { useEffect, useState } from 'react';
+import { getDataSourceSrv } from '@grafana/runtime';
+import { DataSourcePluginOptionsEditorProps, DataSourceSettings, SelectableValue } from '@grafana/data';
+import { DataSourceHttpSettings, LegacyForms, Field, Input, Button, InlineFormLabel } from '@grafana/ui';
+const { Select, FormField, Switch } = LegacyForms;
+import { ZabbixDSOptions, ZabbixSecureJSONData } from '../types';
+
+const SUPPORTED_SQL_DS = ['mysql', 'postgres', 'influxdb'];
+
+export type Props = DataSourcePluginOptionsEditorProps<ZabbixDSOptions, ZabbixSecureJSONData>;
+export const ConfigEditor = (props: Props) => {
+  const { options, onOptionsChange } = props;
+
+  const [selectedDBDatasource, setSelectedDBDatasource] = useState(null);
+  const [currentDSType, setCurrentDSType] = useState('');
+
+  // Apply some defaults on initial render
+  useEffect(() => {
+    onOptionsChange({
+      ...options,
+      jsonData: {
+        trends: true,
+        ...options.jsonData,
+      },
+    });
+
+    if (options.jsonData.dbConnectionEnable) {
+      if (!options.jsonData.dbConnectionDatasourceId) {
+        const dsName = options.jsonData.dbConnectionDatasourceName;
+        getDataSourceSrv().get(dsName)
+        .then(ds => {
+          if (ds) {
+            const selectedDs = getDirectDBDatasources().find(dsOption => dsOption.id === ds.id);
+            setSelectedDBDatasource({ label: selectedDs.name, value: selectedDs.id });
+            setCurrentDSType(selectedDs.type);
+            onOptionsChange({
+              ...options,
+              jsonData: {
+                ...options.jsonData,
+                dbConnectionDatasourceId: ds.id,
+              },
+            });
+          }
+        });
+      } else {
+        const selectedDs = getDirectDBDatasources().find(dsOption => dsOption.id === options.jsonData.dbConnectionDatasourceId);
+        setSelectedDBDatasource({ label: selectedDs.name, value: selectedDs.id });
+        setCurrentDSType(selectedDs.type);
+      }
+    }
+  }, []);
+
+  return (
+    <>
+      <DataSourceHttpSettings
+        defaultUrl={'http://localhost:9200'}
+        dataSourceConfig={options}
+        showAccessOptions={true}
+        onChange={onOptionsChange}
+      />
+
+      <div className="gf-form-group">
+        <h3 className="page-heading">Zabbix API details</h3>
+        <div className="gf-form max-width-25">
+          <FormField
+            labelWidth={7}
+            inputWidth={15}
+            label="Username"
+            value={options.jsonData.username || ''}
+            onChange={jsonDataChangeHandler('username', options, onOptionsChange)}
+            required
+          />
+        </div>
+        <div className="gf-form max-width-25">
+          {options.secureJsonFields?.password ?
+            <>
+              <FormField
+                labelWidth={7}
+                inputWidth={15}
+                label="Password"
+                disabled={true}
+                value=""
+                placeholder="Configured"
+              />
+              <Button onClick={resetSecureJsonField('password', options, onOptionsChange)}>Reset</Button>
+            </>:
+            <FormField
+              labelWidth={7}
+              inputWidth={15}
+              label="Password"
+              type="password"
+              value={options.secureJsonData?.password || options.jsonData.password || ''}
+              onChange={secureJsonDataChangeHandler('password', options, onOptionsChange)}
+              required
+            />
+          }
+        </div>
+        <Switch
+          label="Trends"
+          labelClass="width-7"
+          checked={options.jsonData.trends}
+          onChange={jsonDataSwitchHandler('trends', options, onOptionsChange)}
+        />
+        {options.jsonData.trends &&
+          <>
+            <div className="gf-form">
+              <FormField
+                labelWidth={7}
+                inputWidth={4}
+                label="After"
+                value={options.jsonData.trendsFrom || ''}
+                placeholder="7d"
+                onChange={jsonDataChangeHandler('trendsFrom', options, onOptionsChange)}
+                tooltip="Time after which trends will be used.
+                  Best practice is to set this value to your history storage period (7d, 30d, etc)."
+              />
+            </div>
+            <div className="gf-form">
+              <FormField
+                labelWidth={7}
+                inputWidth={4}
+                label="Range"
+                value={options.jsonData.trendsRange || ''}
+                placeholder="4d"
+                onChange={jsonDataChangeHandler('trendsRange', options, onOptionsChange)}
+                tooltip="Time range width after which trends will be used instead of history.
+                  It's better to set this value in range of 4 to 7 days to prevent loading large amount of history data."
+              />
+            </div>
+          </>
+        }
+        <div className="gf-form">
+          <FormField
+            labelWidth={7}
+            inputWidth={4}
+            label="Cache TTL"
+            value={options.jsonData.cacheTTL || ''}
+            placeholder="1h"
+            onChange={jsonDataChangeHandler('cacheTTL', options, onOptionsChange)}
+            tooltip="Zabbix data source caches metric names in memory. Specify how often data will be updated."
+          />
+        </div>
+      </div>
+
+      <div className="gf-form-group">
+        <h3 className="page-heading">Direct DB Connection</h3>
+        <Switch
+          label="Enable"
+          labelClass="width-9"
+          checked={options.jsonData.dbConnectionEnable}
+          onChange={jsonDataSwitchHandler('dbConnectionEnable', options, onOptionsChange)}
+        />
+        {options.jsonData.dbConnectionEnable &&
+          <>
+            <div className="gf-form">
+              <InlineFormLabel width={9}>Data Source</InlineFormLabel>
+              <Select width={16} options={getDirectDBDSOptions()} value={selectedDBDatasource} />
+            </div>
+            {currentDSType === 'influxdb' &&
+              <div className="gf-form">
+                <FormField
+                  labelWidth={9}
+                  inputWidth={16}
+                  label="Retention Policy"
+                  value={options.jsonData.dbConnectionRetentionPolicy || ''}
+                  placeholder="Retention policy name"
+                  onChange={jsonDataChangeHandler('dbConnectionRetentionPolicy', options, onOptionsChange)}
+                  tooltip="Specify retention policy name for fetching long-term stored data (optional).
+                    Leave it blank if only default retention policy used."
+                />
+              </div>
+            }
+          </>
+        }
+      </div>
+
+      <div className="gf-form-group">
+        <h3 className="page-heading">Other</h3>
+        <Switch
+          label="Disable acknowledges for read-only users"
+          labelClass="width-20"
+          checked={options.jsonData.disableReadOnlyUsersAck}
+          onChange={jsonDataSwitchHandler('disableReadOnlyUsersAck', options, onOptionsChange)}
+        />
+      </div>
+    </>
+  );
+};
+
+const jsonDataChangeHandler = (
+  key: keyof ZabbixDSOptions,
+  value: DataSourceSettings<ZabbixDSOptions, ZabbixSecureJSONData>,
+  onChange: Props['onOptionsChange']
+) => (
+  event: React.SyntheticEvent<HTMLInputElement | HTMLSelectElement>
+) => {
+  onChange({
+    ...value,
+    jsonData: {
+      ...value.jsonData,
+      [key]: event.currentTarget.value || (event.target as HTMLInputElement).checked,
+    },
+  });
+};
+
+const jsonDataSwitchHandler = (
+  key: keyof ZabbixDSOptions,
+  value: DataSourceSettings<ZabbixDSOptions, ZabbixSecureJSONData>,
+  onChange: Props['onOptionsChange']
+) => (
+  event: React.SyntheticEvent<HTMLInputElement>
+) => {
+  onChange({
+    ...value,
+    jsonData: {
+      ...value.jsonData,
+      [key]: (event.target as HTMLInputElement).checked,
+    },
+  });
+};
+
+const secureJsonDataChangeHandler = (
+  key: keyof ZabbixDSOptions,
+  value: DataSourceSettings<ZabbixDSOptions, ZabbixSecureJSONData>,
+  onChange: Props['onOptionsChange']
+) => (
+  event: React.SyntheticEvent<HTMLInputElement | HTMLSelectElement>
+) => {
+  onChange({
+    ...value,
+    jsonData: {
+      ...value.jsonData,
+      password: '',
+    },
+    secureJsonData: {
+      ...value.secureJsonData,
+      [key]: event.currentTarget.value,
+    },
+  });
+};
+
+const resetSecureJsonField = (
+  key: keyof ZabbixDSOptions,
+  value: DataSourceSettings<ZabbixDSOptions, ZabbixSecureJSONData>,
+  onChange: Props['onOptionsChange']
+) => (
+  event: React.SyntheticEvent<HTMLButtonElement>
+) => {
+  onChange({
+    ...value,
+    secureJsonFields: {
+      ...value.secureJsonFields,
+      [key]: false,
+    },
+  });
+};
+
+const getDirectDBDatasources = () => {
+  let dsList = (getDataSourceSrv() as any).getAll();
+  dsList = dsList.filter(ds => SUPPORTED_SQL_DS.includes(ds.type));
+  return dsList;
+};
+
+const getDirectDBDSOptions = () => {
+  const dsList = getDirectDBDatasources();
+  const dsOpts: Array<SelectableValue<number>> = dsList.map(ds => ({ label: ds.name, value: ds.id }));
+  return dsOpts;
+};

src/datasource-zabbix/components/VariableQueryEditor.tsx

@@ -3,12 +3,7 @@ import { parseLegacyVariableQuery } from '../utils';
 import { SelectableValue } from '@grafana/data';
 import { VariableQuery, VariableQueryTypes, VariableQueryProps, VariableQueryData } from '../types';
 import { ZabbixInput } from './ZabbixInput';
-
-// FormLabel was renamed to InlineFormLabel in Grafana 7.0
-import * as grafanaUi from '@grafana/ui';
-const FormLabel = grafanaUi.FormLabel || (grafanaUi as any).InlineFormLabel;
-const Select = (grafanaUi as any).LegacyForms?.Select || (grafanaUi as any).Select;
-const Input = (grafanaUi as any).LegacyForms?.Input || (grafanaUi as any).Input;
+import { InlineFormLabel, Select, Input } from '@grafana/ui';
 
 export class ZabbixVariableQueryEditor extends PureComponent<VariableQueryProps, VariableQueryData> {
   queryTypes: Array<SelectableValue<VariableQueryTypes>> = [
@@ -96,7 +91,7 @@ export class ZabbixVariableQueryEditor extends PureComponent<VariableQueryProps,
     return (
       <>
         <div className="gf-form max-width-21">
-          <FormLabel width={10}>Query Type</FormLabel>
+          <InlineFormLabel width={10}>Query Type</InlineFormLabel>
           <Select
             width={11}
             value={selectedQueryType}
@@ -106,7 +101,7 @@ export class ZabbixVariableQueryEditor extends PureComponent<VariableQueryProps,
         </div>
         <div className="gf-form-inline">
           <div className="gf-form max-width-30">
-            <FormLabel width={10}>Group</FormLabel>
+            <InlineFormLabel width={10}>Group</InlineFormLabel>
             <ZabbixInput
               value={group}
               onChange={evt => this.handleQueryUpdate(evt, 'group')}
@@ -115,7 +110,7 @@ export class ZabbixVariableQueryEditor extends PureComponent<VariableQueryProps,
           </div>
           {selectedQueryType.value !== VariableQueryTypes.Group &&
             <div className="gf-form max-width-30">
-              <FormLabel width={10}>Host</FormLabel>
+              <InlineFormLabel width={10}>Host</InlineFormLabel>
               <ZabbixInput
                 value={host}
                 onChange={evt => this.handleQueryUpdate(evt, 'host')}
@@ -129,7 +124,7 @@ export class ZabbixVariableQueryEditor extends PureComponent<VariableQueryProps,
           selectedQueryType.value === VariableQueryTypes.ItemValues) &&
           <div className="gf-form-inline">
             <div className="gf-form max-width-30">
-              <FormLabel width={10}>Application</FormLabel>
+              <InlineFormLabel width={10}>Application</InlineFormLabel>
               <ZabbixInput
                 value={application}
                 onChange={evt => this.handleQueryUpdate(evt, 'application')}
@@ -139,7 +134,7 @@ export class ZabbixVariableQueryEditor extends PureComponent<VariableQueryProps,
             {(selectedQueryType.value === VariableQueryTypes.Item ||
               selectedQueryType.value === VariableQueryTypes.ItemValues) &&
               <div className="gf-form max-width-30">
-                <FormLabel width={10}>Item</FormLabel>
+                <InlineFormLabel width={10}>Item</InlineFormLabel>
                 <ZabbixInput
                   value={item}
                   onChange={evt => this.handleQueryUpdate(evt, 'item')}
@@ -152,7 +147,7 @@ export class ZabbixVariableQueryEditor extends PureComponent<VariableQueryProps,
 
         {legacyQuery &&
           <div className="gf-form">
-            <FormLabel width={10} tooltip="Original query string, read-only">Legacy Query</FormLabel>
+            <InlineFormLabel width={10} tooltip="Original query string, read-only">Legacy Query</InlineFormLabel>
             <Input
               value={legacyQuery}
               readOnly={true}

src/datasource-zabbix/components/ZabbixInput.tsx

@@ -11,10 +11,10 @@ const variablePattern = RegExp(`^${variableRegex.source}`);
 
 const getStyles = (theme: GrafanaTheme) => ({
   inputRegex: css`
-    color: ${theme.colors.orange || (theme as any).palette.orange}
+    color: ${theme.palette.orange}
   `,
   inputVariable: css`
-    color: ${theme.colors.variable || (theme as any).palette.variable}
+    color: ${theme.colors.textBlue}
   `,
 });