From f7c06ff12536eb7ae270c5868f7974b490f5f8ef Mon Sep 17 00:00:00 2001
From: Shekar Siri <sshekarsiri@gmail.com>
Date: Fri, 15 Apr 2022 13:03:06 +0200
Subject: [PATCH] feat(ui) - dashboard - filter fix duration

---
 .../FilterAutoCompleteLocal.tsx               | 27 ++++++++++++-------
 .../Filters/FilterValue/FilterValue.tsx       |  1 +
 frontend/app/types/filter/newFilter.js        |  2 +-
 3 files changed, 19 insertions(+), 11 deletions(-)

diff --git a/frontend/app/components/shared/Filters/FilterAutoCompleteLocal/FilterAutoCompleteLocal.tsx b/frontend/app/components/shared/Filters/FilterAutoCompleteLocal/FilterAutoCompleteLocal.tsx
index 542dfce1c..2030d422a 100644
--- a/frontend/app/components/shared/Filters/FilterAutoCompleteLocal/FilterAutoCompleteLocal.tsx
+++ b/frontend/app/components/shared/Filters/FilterAutoCompleteLocal/FilterAutoCompleteLocal.tsx
@@ -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 }
diff --git a/frontend/app/components/shared/Filters/FilterValue/FilterValue.tsx b/frontend/app/components/shared/Filters/FilterValue/FilterValue.tsx
index 2fd2fc132..4e8d4001f 100644
--- a/frontend/app/components/shared/Filters/FilterValue/FilterValue.tsx
+++ b/frontend/app/components/shared/Filters/FilterValue/FilterValue.tsx
@@ -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
diff --git a/frontend/app/types/filter/newFilter.js b/frontend/app/types/filter/newFilter.js
index 7a640bbbd..c7f4934f6 100644
--- a/frontend/app/types/filter/newFilter.js
+++ b/frontend/app/types/filter/newFilter.js
@@ -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 },