From aa3510e936e17b003ca6ce64f4c43676094295bf Mon Sep 17 00:00:00 2001
From: lirazyehezkel <61656597+lirazyehezkel@users.noreply.github.com>
Date: Wed, 6 Oct 2021 16:22:08 +0300
Subject: [PATCH] service filter (#324)

---
 ui/src/components/EntriesList.tsx |  8 +++++---
 ui/src/components/Filters.tsx     | 20 +++++++++++++++++++-
 ui/src/components/TrafficPage.tsx |  4 ++++
 3 files changed, 28 insertions(+), 4 deletions(-)

diff --git a/ui/src/components/EntriesList.tsx b/ui/src/components/EntriesList.tsx
index e67eb8289..53e653a05 100644
--- a/ui/src/components/EntriesList.tsx
+++ b/ui/src/components/EntriesList.tsx
@@ -19,7 +19,8 @@ interface EntriesListProps {
     setNoMoreDataBottom: (flag: boolean) => void;
     methodsFilter: Array<string>;
     statusFilter: Array<string>;
-    pathFilter: string
+    pathFilter: string;
+    serviceFilter: string;
     listEntryREF: any;
     onScrollEvent: (isAtBottom:boolean) => void;
     scrollableList: boolean;
@@ -32,7 +33,7 @@ enum FetchOperator {
 
 const api = new Api();
 
-export const EntriesList: React.FC<EntriesListProps> = ({entries, setEntries, focusedEntryId, setFocusedEntryId, connectionOpen, noMoreDataTop, setNoMoreDataTop, noMoreDataBottom, setNoMoreDataBottom, methodsFilter, statusFilter, pathFilter, listEntryREF, onScrollEvent, scrollableList}) => {
+export const EntriesList: React.FC<EntriesListProps> = ({entries, setEntries, focusedEntryId, setFocusedEntryId, connectionOpen, noMoreDataTop, setNoMoreDataTop, noMoreDataBottom, setNoMoreDataBottom, methodsFilter, statusFilter, pathFilter, serviceFilter, listEntryREF, onScrollEvent, scrollableList}) => {
 
     const [loadMoreTop, setLoadMoreTop] = useState(false);
     const [isLoadingTop, setIsLoadingTop] = useState(false);
@@ -54,10 +55,11 @@ export const EntriesList: React.FC<EntriesListProps> = ({entries, setEntries, fo
     const filterEntries = useCallback((entry) => {
         if(methodsFilter.length > 0 && !methodsFilter.includes(entry.method.toLowerCase())) return;
         if(pathFilter && entry.path?.toLowerCase()?.indexOf(pathFilter) === -1) return;
+        if(serviceFilter && entry.service?.toLowerCase()?.indexOf(serviceFilter) === -1) return;
         if(statusFilter.includes(StatusType.SUCCESS) && entry.statusCode >= 400) return;
         if(statusFilter.includes(StatusType.ERROR) && entry.statusCode < 400) return;
         return entry;
-    },[methodsFilter, pathFilter, statusFilter])
+    },[methodsFilter, pathFilter, statusFilter, serviceFilter])
 
     const filteredEntries = useMemo(() => {
         return entries.filter(filterEntries);
diff --git a/ui/src/components/Filters.tsx b/ui/src/components/Filters.tsx
index c7188c2a5..dda73eab6 100644
--- a/ui/src/components/Filters.tsx
+++ b/ui/src/components/Filters.tsx
@@ -11,14 +11,17 @@ interface FiltersProps {
     setStatusFilter: (methods: Array<string>) => void;
     pathFilter: string
     setPathFilter: (val: string) => void;
+    serviceFilter: string
+    setServiceFilter: (val: string) => void;
 }
 
-export const Filters: React.FC<FiltersProps> = ({methodsFilter, setMethodsFilter, statusFilter, setStatusFilter, pathFilter, setPathFilter}) => {
+export const Filters: React.FC<FiltersProps> = ({methodsFilter, setMethodsFilter, statusFilter, setStatusFilter, pathFilter, setPathFilter, serviceFilter, setServiceFilter}) => {
 
     return <div className={styles.container}>
         <MethodFilter methodsFilter={methodsFilter} setMethodsFilter={setMethodsFilter}/>
         <StatusTypesFilter statusFilter={statusFilter} setStatusFilter={setStatusFilter}/>
         <PathFilter pathFilter={pathFilter} setPathFilter={setPathFilter}/>
+        <ServiceFilter serviceFilter={serviceFilter} setServiceFilter={setServiceFilter}/>
     </div>;
 };
 
@@ -117,3 +120,18 @@ const PathFilter: React.FC<PathFilterProps> = ({pathFilter, setPathFilter}) => {
     </FilterContainer>;
 };
 
+interface ServiceFilterProps {
+    serviceFilter: string;
+    setServiceFilter: (val: string) => void;
+}
+
+const ServiceFilter: React.FC<ServiceFilterProps> = ({serviceFilter, setServiceFilter}) => {
+
+    return <FilterContainer>
+        <div className={styles.filterLabel}>Service</div>
+        <div>
+            <TextField value={serviceFilter} variant="outlined" className={styles.filterText} style={{minWidth: '150px'}} onChange={(e: any) => setServiceFilter(e.target.value)}/>
+        </div>
+    </FilterContainer>;
+};
+
diff --git a/ui/src/components/TrafficPage.tsx b/ui/src/components/TrafficPage.tsx
index 3e9b2911b..fa365fc36 100644
--- a/ui/src/components/TrafficPage.tsx
+++ b/ui/src/components/TrafficPage.tsx
@@ -58,6 +58,7 @@ export const TrafficPage: React.FC<TrafficPageProps> = ({setAnalyzeStatus, onTLS
     const [methodsFilter, setMethodsFilter] = useState([]);
     const [statusFilter, setStatusFilter] = useState([]);
     const [pathFilter, setPathFilter] = useState("");
+    const [serviceFilter, setServiceFilter] = useState("");
 
     const [tappingStatus, setTappingStatus] = useState(null);
 
@@ -192,6 +193,8 @@ export const TrafficPage: React.FC<TrafficPageProps> = ({setAnalyzeStatus, onTLS
                                 setStatusFilter={setStatusFilter}
                                 pathFilter={pathFilter}
                                 setPathFilter={setPathFilter}
+                                serviceFilter={serviceFilter}
+                                setServiceFilter={setServiceFilter}
                     />
                     <div className={styles.container}>
                         <EntriesList entries={entries}
@@ -206,6 +209,7 @@ export const TrafficPage: React.FC<TrafficPageProps> = ({setAnalyzeStatus, onTLS
                                         methodsFilter={methodsFilter}
                                         statusFilter={statusFilter}
                                         pathFilter={pathFilter}
+                                        serviceFilter={serviceFilter}
                                         listEntryREF={listEntry}
                                         onScrollEvent={onScrollEvent}
                                         scrollableList={disableScrollList}