service filter (#324)

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);

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>;
+};
+

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}