69 lines
1.7 KiB
TypeScript
69 lines
1.7 KiB
TypeScript
import React, { FC } from 'react';
|
|
import { css, cx } from '@emotion/css';
|
|
import { EventsWithValidation, ValidationEvents, useTheme } from '@grafana/ui';
|
|
import { GrafanaTheme } from '@grafana/data';
|
|
import { isRegex, variableRegex } from '../utils';
|
|
|
|
import * as grafanaUi from '@grafana/ui';
|
|
const Input = (grafanaUi as any).LegacyForms?.Input || (grafanaUi as any).Input;
|
|
|
|
const variablePattern = RegExp(`^${variableRegex.source}`);
|
|
|
|
const getStyles = (theme: GrafanaTheme) => ({
|
|
inputRegex: css`
|
|
color: ${theme.palette.orange}
|
|
`,
|
|
inputVariable: css`
|
|
color: ${theme.colors.textBlue}
|
|
`,
|
|
});
|
|
|
|
const zabbixInputValidationEvents: ValidationEvents = {
|
|
[EventsWithValidation.onBlur]: [
|
|
{
|
|
rule: value => {
|
|
if (!value) {
|
|
return true;
|
|
}
|
|
if (value.length > 1 && value[0] === '/') {
|
|
if (value[value.length - 1] !== '/') {
|
|
return false;
|
|
}
|
|
}
|
|
return true;
|
|
},
|
|
errorMessage: 'Not a valid regex',
|
|
},
|
|
{
|
|
rule: value => {
|
|
if (value === '*') {
|
|
return false;
|
|
}
|
|
return true;
|
|
},
|
|
errorMessage: 'Wildcards not supported. Use /.*/ instead',
|
|
},
|
|
],
|
|
};
|
|
|
|
export const ZabbixInput: FC<any> = ({ value, ref, validationEvents, ...restProps }) => {
|
|
const theme = useTheme();
|
|
const styles = getStyles(theme);
|
|
|
|
let inputClass = styles.inputRegex;
|
|
if (variablePattern.test(value as string)) {
|
|
inputClass = styles.inputVariable;
|
|
} else if (isRegex(value)) {
|
|
inputClass = styles.inputRegex;
|
|
}
|
|
|
|
return (
|
|
<Input
|
|
className={inputClass}
|
|
value={value}
|
|
validationEvents={zabbixInputValidationEvents}
|
|
{...restProps}
|
|
/>
|
|
);
|
|
};
|