jan/openreplay
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat(ui) - dashboard - filter fix duration

Browse source
This commit is contained in:
Shekar Siri 2022-04-15 13:03:06 +02:00
parent eb4aa50211
commit f7c06ff125
3 changed files with 19 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

27
frontend/app/components/shared/Filters/FilterAutoCompleteLocal/FilterAutoCompleteLocal.tsx
View file

@ -1,9 +1,6 @@
import React, { useState, useEffect } from 'react';
import { Icon, Loader } from 'UI';
// import { debounce } from 'App/utils';
import { Icon } from 'UI';
import stl from './FilterAutoCompleteLocal.css';
// import cn from 'classnames';
interface Props {
showOrButton?: boolean;
showCloseButton?: boolean;
@ -15,6 +12,7 @@ interface Props {
icon?: string;
type?: string;
isMultilple?: boolean;
allowDecimals?: boolean;
}
function FilterAutoCompleteLocal(props: Props) {
@ -28,15 +26,24 @@ function FilterAutoCompleteLocal(props: Props) {
icon = null,
type = "text",
isMultilple = true,
allowDecimals = true,
} = props;
const [showModal, setShowModal] = useState(true)
const [query, setQuery] = useState(value);
// const debounceOnSelect = debounce(props.onSelect, 500);
const onInputChange = ({ target: { value } }) => {
setQuery(value);
props.onSelect(null, { value });
}
const onInputChange = (e) => {
if(allowDecimals) {
const value = e.target.value;
setQuery(value);
props.onSelect(null, { value });
} else {
const value = e.target.value.replace(/[^\d]/, "");
if (+value !== 0) {
setQuery(value);
props.onSelect(null, { value });
}
}
};
useEffect(() => {
setQuery(value);
@ -58,7 +65,7 @@ function FilterAutoCompleteLocal(props: Props) {
<div className={stl.wrapper}>
<input
name="query"
onChange={ onInputChange }
onInput={ onInputChange }
// onBlur={ onBlur }
onFocus={ () => setShowModal(true)}
value={ query }

1
frontend/app/components/shared/Filters/FilterValue/FilterValue.tsx
View file

@ -137,6 +137,7 @@ function FilterValue(props: Props) {
onSelect={(e, item) => debounceOnSelect(e, item, valueIndex)}
icon={filter.icon}
type="number"
allowDecimals={false}
isMultilple={false}
/>
// <input

2
frontend/app/types/filter/newFilter.js
View file

@ -18,7 +18,7 @@ export const filtersMap = {
{ key: FilterKey.FETCH_URL, type: FilterType.MULTIPLE, category: FilterCategory.PERFORMANCE, label: 'with URL', operator: 'is', operatorOptions: filterOptions.stringOperators, icon: 'filters/fetch' },
{ key: FilterKey.FETCH_STATUS_CODE, type: FilterType.NUMBER_MULTIPLE, category: FilterCategory.PERFORMANCE, label: 'with status code', operator: '=', operatorOptions: filterOptions.customOperators, icon: 'filters/fetch' },
{ key: FilterKey.FETCH_METHOD, type: FilterType.MULTIPLE_DROPDOWN, category: FilterCategory.PERFORMANCE, label: 'with method', operator: 'is', operatorOptions: filterOptions.stringOperators, icon: 'filters/fetch', options: filterOptions.methodOptions },
{ key: FilterKey.FETCH_DURATION, type: FilterType.NUMBER, category: FilterCategory.PERFORMANCE, label: 'with duration', operator: '=', operatorOptions: filterOptions.customOperators, icon: 'filters/fetch' },
{ key: FilterKey.FETCH_DURATION, type: FilterType.NUMBER, category: FilterCategory.PERFORMANCE, label: 'with duration (ms)', operator: '=', operatorOptions: filterOptions.customOperators, icon: 'filters/fetch' },
{ key: FilterKey.FETCH_REQUEST_BODY, type: FilterType.STRING, category: FilterCategory.PERFORMANCE, label: 'with request body', operator: 'is', operatorOptions: filterOptions.stringOperators, icon: 'filters/fetch' },
{ key: FilterKey.FETCH_RESPONSE_BODY, type: FilterType.STRING, category: FilterCategory.PERFORMANCE, label: 'with response body', operator: 'is', operatorOptions: filterOptions.stringOperators, icon: 'filters/fetch' },
], icon: 'filters/fetch', isEvent: true },