mirror of https://github.com/grafana/grafana.git
51 lines
1.4 KiB
TypeScript
51 lines
1.4 KiB
TypeScript
import React from 'react';
|
|
import useAsync from 'react-use/lib/useAsync';
|
|
|
|
import { SelectableValue } from '@grafana/data';
|
|
|
|
import { DB, SQLExpression, SQLQuery, SQLSelectableValue } from '../../types';
|
|
import { useSqlChange } from '../../utils/useSqlChange';
|
|
|
|
import { Config } from './AwesomeQueryBuilder';
|
|
import { WhereRow } from './WhereRow';
|
|
|
|
interface WhereRowProps<T extends SQLQuery> {
|
|
query: T;
|
|
fields: SelectableValue[];
|
|
onQueryChange: (query: T) => void;
|
|
db: DB;
|
|
}
|
|
|
|
export function SQLWhereRow<T extends SQLQuery>({ query, fields, onQueryChange, db }: WhereRowProps<T>) {
|
|
const state = useAsync(async () => {
|
|
return mapFieldsToTypes(fields);
|
|
}, [fields]);
|
|
|
|
const { onSqlChange } = useSqlChange({ query, onQueryChange, db });
|
|
|
|
return (
|
|
<WhereRow
|
|
// TODO: fix key that's used to force clean render or SQLWhereRow - otherwise it doesn't render operators correctly
|
|
key={JSON.stringify(state.value)}
|
|
config={{ fields: state.value || {} }}
|
|
sql={query.sql || {}}
|
|
onSqlChange={(val: SQLExpression) => {
|
|
onSqlChange(val);
|
|
}}
|
|
/>
|
|
);
|
|
}
|
|
|
|
// needed for awesome query builder
|
|
function mapFieldsToTypes(columns: SQLSelectableValue[]) {
|
|
const fields: Config['fields'] = {};
|
|
for (const col of columns) {
|
|
fields[col.value] = {
|
|
type: col.raqbFieldType || 'text',
|
|
valueSources: ['value'],
|
|
mainWidgetProps: { customProps: { icon: col.icon } },
|
|
};
|
|
}
|
|
return fields;
|
|
}
|