GitHub-Proxy/signoz
1
0
Fork 0
mirror of https://git.mirrors.martin98.com/https://github.com/SigNoz/signoz synced 2025-08-11 20:59:00 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: added blur event to having input in query section (#5684)

Browse Source 
* feat: added blur event to having input in query section

* feat: added a error message for incomplete having clause and improved handleBlur

* feat: added focus event to remove error message

---------

Co-authored-by: Srikanth Chekuri <srikanth.chekuri92@gmail.com>
This commit is contained in:
rahulkeswani101 2024-09-26 16:12:49 +05:30 committed by GitHub
parent fc8391c5aa
commit 6e3141a4ce
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 56 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

79
frontend/src/container/QueryBuilder/filters/HavingFilter/HavingFilter.tsx
View File

@ -1,3 +1,4 @@
import { Color } from '@signozhq/design-tokens';
import { Select } from 'antd';
import { ENTITY_VERSION_V4 } from 'constants/app';
// ** Constants
@ -34,6 +35,7 @@ export function HavingFilter({
const [currentFormValue, setCurrentFormValue] = useState<HavingForm>(
initialHavingValues,
);
const [errorMessage, setErrorMessage] = useState<string | null>(null);
const { isMulti } = useTagValidation(
currentFormValue.op,
@ -198,6 +200,29 @@ export function HavingFilter({
resetChanges();
};
const handleFocus = useCallback(() => {
setErrorMessage(null);
}, []);
const handleBlur = useCallback((): void => {
if (searchText) {
const { columnName, op, value } = getHavingObject(searchText);
const isCompleteHavingClause =
columnName && op && value.every((v) => v !== '');
if (isCompleteHavingClause && isValidHavingValue(searchText)) {
setLocalValues((prev) => {
const updatedValues = [...prev, searchText];
onChange(updatedValues.map(transformFromStringToHaving));
return updatedValues;
});
setSearchText('');
} else {
setErrorMessage('Invalid HAVING clause');
}
}
}, [searchText, onChange]);
useEffect(() => {
parseSearchText(searchText);
}, [searchText, parseSearchText]);
@ -209,28 +234,36 @@ export function HavingFilter({
const isMetricsDataSource = query.dataSource === DataSource.METRICS;
return (
<Select
getPopupContainer={popupContainer}
autoClearSearchValue={false}
mode="multiple"
onSearch={handleSearch}
searchValue={searchText}
tagRender={tagRender}
value={localValues}
data-testid="havingSelect"
disabled={isMetricsDataSource && !query.aggregateAttribute.key}
style={{ width: '100%' }}
notFoundContent={currentFormValue.value.length === 0 ? undefined : null}
placeholder="GroupBy(operation) > 5"
onDeselect={handleDeselect}
onChange={handleChange}
onSelect={handleSelect}
>
{options.map((opt) => (
<Select.Option key={opt.value} value={opt.value} title="havingOption">
{opt.label}
</Select.Option>
))}
</Select>
<>
<Select
getPopupContainer={popupContainer}
autoClearSearchValue={false}
mode="multiple"
onSearch={handleSearch}
searchValue={searchText}
tagRender={tagRender}
value={localValues}
data-testid="havingSelect"
disabled={isMetricsDataSource && !query.aggregateAttribute.key}
style={{ width: '100%' }}
notFoundContent={currentFormValue.value.length === 0 ? undefined : null}
placeholder="GroupBy(operation) > 5"
onDeselect={handleDeselect}
onChange={handleChange}
onSelect={handleSelect}
onFocus={handleFocus}
onBlur={handleBlur}
status={errorMessage ? 'error' : undefined}
>
{options.map((opt) => (
<Select.Option key={opt.value} value={opt.value} title="havingOption">
{opt.label}
</Select.Option>
))}
</Select>
{errorMessage && (
<div style={{ color: Color.BG_CHERRY_500 }}>{errorMessage}</div>
)}
</>
);
}