Misthios/grafana-zabbix
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Config: fix direct db connection ds selector, closes #1027

Browse Source
This commit is contained in:
Alexander Zobnin
2020-08-28 18:03:23 +03:00
parent 8e781da7bd
commit 5ec8fc885b
1 changed files with 30 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
src/datasource-zabbix/components/ConfigEditor.tsx
View File

@@ -1,8 +1,8 @@
import React, { useEffect, useState } from 'react'; import React, { useEffect, useState } from 'react';
import { getDataSourceSrv } from '@grafana/runtime'; import { getDataSourceSrv } from '@grafana/runtime';
import { DataSourcePluginOptionsEditorProps, DataSourceSettings, SelectableValue } from '@grafana/data'; import { DataSourcePluginOptionsEditorProps, DataSourceSettings, SelectableValue } from '@grafana/data';
import { DataSourceHttpSettings, LegacyForms, Field, Input, Button, InlineFormLabel } from '@grafana/ui'; import { DataSourceHttpSettings, LegacyForms, Field, Input, Button, InlineFormLabel, Select } from '@grafana/ui';
const { Select, FormField, Switch } = LegacyForms; const { FormField, Switch } = LegacyForms;
import { ZabbixDSOptions, ZabbixSecureJSONData } from '../types'; import { ZabbixDSOptions, ZabbixSecureJSONData } from '../types';
const SUPPORTED_SQL_DS = ['mysql', 'postgres', 'influxdb']; const SUPPORTED_SQL_DS = ['mysql', 'postgres', 'influxdb'];
@@ -67,7 +67,7 @@ export const ConfigEditor = (props: Props) => {
return ( return (
<> <>
<DataSourceHttpSettings <DataSourceHttpSettings
defaultUrl={'http://localhost:9200'} defaultUrl={'http://localhost/zabbix/api_jsonrpc.php'}
dataSourceConfig={options} dataSourceConfig={options}
showAccessOptions={true} showAccessOptions={true}
onChange={onOptionsChange} onChange={onOptionsChange}
@@ -168,7 +168,12 @@ export const ConfigEditor = (props: Props) => {
<> <>
<div className="gf-form"> <div className="gf-form">
<InlineFormLabel width={9}>Data Source</InlineFormLabel> <InlineFormLabel width={9}>Data Source</InlineFormLabel>
<Select width={16} options={getDirectDBDSOptions()} value={selectedDBDatasource} /> <Select
width={32}
options={getDirectDBDSOptions()}
value={selectedDBDatasource}
onChange={directDBDatasourceChanegeHandler(options, onOptionsChange, setSelectedDBDatasource, setCurrentDSType)}
/>
</div> </div>
{currentDSType === 'influxdb' && {currentDSType === 'influxdb' &&
<div className="gf-form"> <div className="gf-form">
@@ -265,6 +270,26 @@ const resetSecureJsonField = (
}); });
}; };
const directDBDatasourceChanegeHandler = (
options: DataSourceSettings<ZabbixDSOptions, ZabbixSecureJSONData>,
onChange: Props['onOptionsChange'],
setSelectedDS: React.Dispatch<any>,
setSelectedDSType: React.Dispatch<any>,
) => (
value: SelectableValue<number>
) => {
const selectedDs = getDirectDBDatasources().find(dsOption => dsOption.id === value.value);
setSelectedDS({ label: selectedDs.name, value: selectedDs.id });
setSelectedDSType(selectedDs.type);
onChange({
...options,
jsonData: {
...options.jsonData,
dbConnectionDatasourceId: value.value
},
});
};
const getDirectDBDatasources = () => { const getDirectDBDatasources = () => {
let dsList = (getDataSourceSrv() as any).getAll(); let dsList = (getDataSourceSrv() as any).getAll();
dsList = dsList.filter(ds => SUPPORTED_SQL_DS.includes(ds.type)); dsList = dsList.filter(ds => SUPPORTED_SQL_DS.includes(ds.type));
@@ -273,6 +298,6 @@ const getDirectDBDatasources = () => {
const getDirectDBDSOptions = () => { const getDirectDBDSOptions = () => {
const dsList = getDirectDBDatasources(); const dsList = getDirectDBDatasources();
const dsOpts: Array<SelectableValue<number>> = dsList.map(ds => ({ label: ds.name, value: ds.id })); const dsOpts: Array<SelectableValue<number>> = dsList.map(ds => ({ label: ds.name, value: ds.id, description: ds.type }));
return dsOpts; return dsOpts;
}; };