fix home page filters

api/http/handler/endpoints/endpoint_list.go

@@ -2,6 +2,7 @@ package endpoints
 
 import (
 	"net/http"
+	"sort"
 	"strconv"
 	"strings"
 	"time"
@@ -53,8 +54,9 @@ func (handler *Handler) endpointList(w http.ResponseWriter, r *http.Request) *ht
 		search = strings.ToLower(search)
 	}
 
-	groupID, _ := request.RetrieveNumericQueryParameter(r, "groupId", true)
 	limit, _ := request.RetrieveNumericQueryParameter(r, "limit", true)
+	sortField, _ := request.RetrieveQueryParameter(r, "sort", true)
+	sortOrder, _ := request.RetrieveQueryParameter(r, "order", true)
 
 	var endpointTypes []int
 	request.RetrieveJSONQueryParameter(r, "types", &endpointTypes, true)
@@ -67,6 +69,12 @@ func (handler *Handler) endpointList(w http.ResponseWriter, r *http.Request) *ht
 	var endpointIDs []portainer.EndpointID
 	request.RetrieveJSONQueryParameter(r, "endpointIds", &endpointIDs, true)
 
+	var statuses []int
+	request.RetrieveJSONQueryParameter(r, "status", &statuses, true)
+
+	var groupIDs []int
+	request.RetrieveJSONQueryParameter(r, "groupIds", &groupIDs, true)
+
 	endpointGroups, err := handler.DataStore.EndpointGroup().EndpointGroups()
 	if err != nil {
 		return &httperror.HandlerError{http.StatusInternalServerError, "Unable to retrieve environment groups from the database", err}
@@ -94,8 +102,8 @@ func (handler *Handler) endpointList(w http.ResponseWriter, r *http.Request) *ht
 		filteredEndpoints = filteredEndpointsByIds(filteredEndpoints, endpointIDs)
 	}
 
-	if groupID != 0 {
-		filteredEndpoints = filterEndpointsByGroupID(filteredEndpoints, portainer.EndpointGroupID(groupID))
+	if len(groupIDs) > 0 {
+		filteredEndpoints = filterEndpointsByGroupID(filteredEndpoints, groupIDs)
 	}
 
 	edgeDeviceFilter, _ := request.RetrieveQueryParameter(r, "edgeDeviceFilter", false)
@@ -103,6 +111,10 @@ func (handler *Handler) endpointList(w http.ResponseWriter, r *http.Request) *ht
 		filteredEndpoints = filterEndpointsByEdgeDevice(filteredEndpoints, edgeDeviceFilter)
 	}
 
+	if len(statuses) > 0 {
+		filteredEndpoints = filterEndpointsByStatuses(filteredEndpoints, statuses)
+	}
+
 	if search != "" {
 		tags, err := handler.DataStore.Tag().Tags()
 		if err != nil {
@@ -123,6 +135,11 @@ func (handler *Handler) endpointList(w http.ResponseWriter, r *http.Request) *ht
 		filteredEndpoints = filteredEndpointsByTags(filteredEndpoints, tagIDs, endpointGroups, tagsPartialMatch)
 	}
 
+	// Sort endpoints by field
+	if sortField != "" {
+		sortEndpointsByField(filteredEndpoints, endpointGroups, sortField, sortOrder)
+	}
+
 	filteredEndpointCount := len(filteredEndpoints)
 
 	paginatedEndpoints := paginateEndpoints(filteredEndpoints, start, limit)
@@ -160,11 +177,11 @@ func paginateEndpoints(endpoints []portainer.Endpoint, start, limit int) []porta
 	return endpoints[start:end]
 }
 
-func filterEndpointsByGroupID(endpoints []portainer.Endpoint, endpointGroupID portainer.EndpointGroupID) []portainer.Endpoint {
+func filterEndpointsByGroupID(endpoints []portainer.Endpoint, endpointGroupIDs []int) []portainer.Endpoint {
 	filteredEndpoints := make([]portainer.Endpoint, 0)
 
 	for _, endpoint := range endpoints {
-		if endpoint.GroupID == endpointGroupID {
+		if containsInIntSlice(endpointGroupIDs, int(endpoint.GroupID)) {
 			filteredEndpoints = append(filteredEndpoints, endpoint)
 		}
 	}
@@ -190,6 +207,84 @@ func filterEndpointsBySearchCriteria(endpoints []portainer.Endpoint, endpointGro
 	return filteredEndpoints
 }
 
+func containsInIntSlice(s []int, e int) bool {
+	for _, a := range s {
+		if a == e {
+			return true
+		}
+	}
+	return false
+}
+
+func filterEndpointsByStatuses(endpoints []portainer.Endpoint, statuses []int) []portainer.Endpoint {
+	filteredEndpoints := make([]portainer.Endpoint, 0)
+
+	for _, endpoint := range endpoints {
+		status := endpoint.Status
+		if endpoint.Type == portainer.EdgeAgentOnDockerEnvironment || endpoint.Type == portainer.EdgeAgentOnKubernetesEnvironment {
+			isCheckValid := false
+			if endpoint.EdgeCheckinInterval != 0 && endpoint.LastCheckInDate != 0 {
+				isCheckValid = time.Now().Unix()-endpoint.LastCheckInDate <= int64(endpoint.EdgeCheckinInterval*2+20)
+			}
+			if isCheckValid {
+				status = portainer.EndpointStatusUp // Online
+			} else {
+				status = portainer.EndpointStatusDown // Offline
+			}
+		}
+
+		if containsInIntSlice(statuses, int(status)) {
+			filteredEndpoints = append(filteredEndpoints, endpoint)
+			continue
+		}
+	}
+
+	return filteredEndpoints
+}
+
+func sortEndpointsByField(endpoints []portainer.Endpoint, endpointGroups []portainer.EndpointGroup, sortField, sortOrder string) {
+	if sortField == "Name" {
+		if sortOrder == "asc" {
+			sort.Slice(endpoints, func(i, j int) bool {
+				// Case insensitive sort
+				return strings.ToLower(endpoints[i].Name) < strings.ToLower(endpoints[j].Name)
+			})
+		} else {
+			sort.Slice(endpoints, func(i, j int) bool {
+				return strings.ToLower(endpoints[i].Name) > strings.ToLower(endpoints[j].Name)
+			})
+		}
+	}
+
+	if sortField == "Group" {
+		if sortOrder == "asc" {
+			sort.Slice(endpoints, func(i, j int) bool {
+				groupOne := getEndpointGroup(endpoints[i].GroupID, endpointGroups)
+				groupTwo := getEndpointGroup(endpoints[j].GroupID, endpointGroups)
+				return strings.ToLower(groupOne.Name) < strings.ToLower(groupTwo.Name)
+			})
+		} else {
+			sort.Slice(endpoints, func(i, j int) bool {
+				groupOne := getEndpointGroup(endpoints[i].GroupID, endpointGroups)
+				groupTwo := getEndpointGroup(endpoints[j].GroupID, endpointGroups)
+				return strings.ToLower(groupOne.Name) > strings.ToLower(groupTwo.Name)
+			})
+		}
+	}
+
+	if sortField == "Status" {
+		if sortOrder == "asc" {
+			sort.Slice(endpoints, func(i, j int) bool {
+				return endpoints[i].Status < endpoints[j].Status
+			})
+		} else {
+			sort.Slice(endpoints, func(i, j int) bool {
+				return endpoints[i].Status > endpoints[j].Status
+			})
+		}
+	}
+}
+
 func endpointMatchSearchCriteria(endpoint *portainer.Endpoint, tags []string, searchCriteria string) bool {
 	if strings.Contains(strings.ToLower(endpoint.Name), searchCriteria) {
 		return true

app/portainer/components/datatables/components/FilterSearchBar.module.css

@@ -8,3 +8,7 @@
   display: inline-block;
   margin-right: 5px;
 }
+
+.searchBar .textSpan {
+  display: inline-block;
+}

app/portainer/components/datatables/components/FilterSearchBar.tsx

@@ -18,7 +18,7 @@ export function FilterSearchBar({
       <span className={styles.iconSpan}>
         <i className="fa fa-search" aria-hidden="true" />
       </span>
-      <span className={styles.iconSpan}>
+      <span className={styles.textSpan}>
         <input
           type="text"
           className="searchInput"

app/portainer/components/datatables/components/SortbySelector.tsx

@@ -13,6 +13,7 @@ interface Props {
   placeHolder: string;
   sortByDescending: boolean;
   sortByButton: boolean;
+  value?: Filter | undefined;
 }
 
 export function SortbySelector({
@@ -22,6 +23,7 @@ export function SortbySelector({
   placeHolder,
   sortByDescending,
   sortByButton,
+  value,
 }: Props) {
   const upIcon = 'fa fa-sort-alpha-up';
   const downIcon = 'fa fa-sort-alpha-down';
@@ -43,6 +45,7 @@ export function SortbySelector({
           options={filterOptions}
           onChange={(option) => onChange(option as Filter)}
           isClearable
+          value={value}
         />
       </div>
       <div className={styles.sortbyelement}>

app/portainer/environments/environment.service/index.ts

@@ -9,6 +9,7 @@ import type {
   EnvironmentId,
   EnvironmentType,
   EnvironmentSettings,
+  EnvironmentStatus,
 } from '../types';
 
 import { arrayToJson, buildUrl } from './utils';
@@ -19,14 +20,24 @@ export interface EnvironmentsQueryParams {
   tagIds?: TagId[];
   endpointIds?: EnvironmentId[];
   tagsPartialMatch?: boolean;
-  groupId?: EnvironmentGroupId;
+  groupIds?: EnvironmentGroupId[];
   edgeDeviceFilter?: 'all' | 'trusted' | 'untrusted';
+  status?: EnvironmentStatus[];
+  sort?: string;
+  order?: 'asc' | 'desc';
 }
 
 export async function getEndpoints(
   start: number,
   limit: number,
-  { types, tagIds, endpointIds, ...query }: EnvironmentsQueryParams = {}
+  {
+    types,
+    tagIds,
+    endpointIds,
+    status,
+    groupIds,
+    ...query
+  }: EnvironmentsQueryParams = {}
 ) {
   if (tagIds && tagIds.length === 0) {
     return { totalCount: 0, value: <Environment[]>[] };
@@ -48,6 +59,14 @@ export async function getEndpoints(
     params.endpointIds = arrayToJson(endpointIds);
   }
 
+  if (status) {
+    params.status = arrayToJson(status);
+  }
+
+  if (groupIds) {
+    params.groupIds = arrayToJson(groupIds);
+  }
+
   try {
     const response = await axios.get<Environment[]>(url, { params });
     const totalCount = response.headers['x-total-count'];
@@ -94,7 +113,7 @@ export async function endpointsByGroup(
   search: string,
   groupId: EnvironmentGroupId
 ) {
-  return getEndpoints(start, limit, { search, groupId });
+  return getEndpoints(start, limit, { search, groupIds: [groupId] });
 }
 
 export async function disassociateEndpoint(id: EnvironmentId) {

app/portainer/home/EnvironmentList/EnvironmentList.tsx

@@ -15,7 +15,15 @@ import {
   useSearchBarState,
 } from '@/portainer/components/datatables/components/FilterSearchBar';
 import { SortbySelector } from '@/portainer/components/datatables/components/SortbySelector';
-import { HomepageFilter } from '@/portainer/home/HomepageFilter';
+import {
+  HomepageFilter,
+  useHomePageFilterState,
+  useHomePageFilterBoolState,
+  useHomePageFilterTypeState,
+  useHomePageStatusTypeState,
+  useHomePageNumberTypeState,
+  useHomePageSingleFilterTypeState,
+} from '@/portainer/home/HomepageFilter';
 import {
   TableActions,
   TableContainer,
@@ -51,29 +59,46 @@ export function EnvironmentList({ onClickItem, onRefresh }: Props) {
     EnvironmentType.EdgeAgentOnKubernetes,
   ];
 
-  const [platformType, setPlatformType] = useState(allEnvironmentType);
+  const [platformType, setPlatformType] = useHomePageNumberTypeState(
+    'platformType',
+    allEnvironmentType
+  );
   const [searchBarValue, setSearchBarValue] = useSearchBarState(storageKey);
   const [pageLimit, setPageLimit] = usePaginationLimitState(storageKey);
   const [page, setPage] = useState(1);
   const debouncedTextFilter = useDebounce(searchBarValue);
 
-  const [statusFilter, setStatusFilter] = useState<number[]>([]);
-  const [tagFilter, setTagFilter] = useState<number[]>([]);
-  const [groupFilter, setGroupFilter] = useState<number[]>([]);
-  const [sortByFilter, setSortByFilter] = useState<string>('');
-  const [sortByDescending, setSortByDescending] = useState(false);
-  const [sortByButton, setSortByButton] = useState(false);
+  const [statusFilter, setStatusFilter] = useHomePageStatusTypeState('status');
+  const [tagFilter, setTagFilter] = useHomePageNumberTypeState('tag', []);
+  const [groupFilter, setGroupFilter] = useHomePageFilterState('group');
+  const [sortByFilter, setSortByFilter] = useSearchBarState('sortBy');
+  const [sortByDescending, setSortByDescending] =
+    useHomePageFilterBoolState('sortOrder');
+  const [sortByButton, setSortByButton] =
+    useHomePageFilterBoolState('sortByButton');
 
-  const [platformState, setPlatformState] = useState<Filter[]>([]);
-  const [statusState, setStatusState] = useState<Filter[]>([]);
-  const [tagState, setTagState] = useState<Filter[]>([]);
-  const [groupState, setGroupState] = useState<Filter[]>([]);
+  const [platformState, setPlatformState] = useHomePageFilterTypeState('type');
+  const [statusState, setStatusState] = useHomePageFilterTypeState('status');
+  const [tagState, setTagState] = useHomePageFilterTypeState('tag');
+  const [groupState, setGroupState] = useHomePageFilterTypeState('group');
+  const [sortByState, setSortByState] =
+    useHomePageSingleFilterTypeState('sortBy');
 
   const groupsQuery = useGroups();
 
   const { isLoading, environments, totalCount, totalAvailable } =
     useEnvironmentList(
-      { page, pageLimit, types: platformType, search: debouncedTextFilter },
+      {
+        page,
+        pageLimit,
+        types: platformType,
+        search: debouncedTextFilter,
+        status: statusFilter,
+        tagIds: tagFilter?.length ? tagFilter : undefined,
+        groupIds: groupFilter,
+        sort: sortByFilter,
+        order: sortByDescending ? 'desc' : 'asc',
+      },
       true
     );
 
@@ -81,12 +106,6 @@ export function EnvironmentList({ onClickItem, onRefresh }: Props) {
     setPage(1);
   }, [searchBarValue]);
 
-  interface Collection {
-    Status: number[];
-    TagIds: number[];
-    GroupId: number[];
-  }
-
   const PlatformOptions = [
     { value: EnvironmentType.Docker, label: 'Docker' },
     { value: EnvironmentType.Azure, label: 'Azure' },
@@ -121,64 +140,6 @@ export function EnvironmentList({ onClickItem, onRefresh }: Props) {
     label,
   }));
 
-  const collection = {
-    Status: statusFilter,
-    TagIds: tagFilter,
-    GroupId: groupFilter,
-  };
-
-  function multiPropsFilter(
-    environments: Environment[],
-    collection: Collection,
-    sortByFilter: string,
-    sortByDescending: boolean
-  ) {
-    const filterKeys = Object.keys(collection);
-    const filterResult = environments.filter((environment: Environment) =>
-      filterKeys.every((key) => {
-        if (!collection[key as keyof Collection].length) return true;
-        if (Array.isArray(environment[key as keyof Collection])) {
-          return (environment[key as keyof Collection] as number[]).some(
-            (keyEle) => collection[key as keyof Collection].includes(keyEle)
-          );
-        }
-        return collection[key as keyof Collection].includes(
-          environment[key as keyof Collection] as number
-        );
-      })
-    );
-
-    switch (sortByFilter) {
-      case 'Name':
-        return sortByDescending
-          ? filterResult.sort((a, b) =>
-              b.Name.toUpperCase() > a.Name.toUpperCase() ? 1 : -1
-            )
-          : filterResult.sort((a, b) =>
-              a.Name.toUpperCase() > b.Name.toUpperCase() ? 1 : -1
-            );
-      case 'Group':
-        return sortByDescending
-          ? filterResult.sort((a, b) => b.GroupId - a.GroupId)
-          : filterResult.sort((a, b) => a.GroupId - b.GroupId);
-      case 'Status':
-        return sortByDescending
-          ? filterResult.sort((a, b) => b.Status - a.Status)
-          : filterResult.sort((a, b) => a.Status - b.Status);
-      case 'None':
-        return filterResult;
-      default:
-        return filterResult;
-    }
-  }
-
-  const filteredEnvironments: Environment[] = multiPropsFilter(
-    environments,
-    collection,
-    sortByFilter,
-    sortByDescending
-  );
-
   function platformOnChange(filterOptions: Filter[]) {
     setPlatformState(filterOptions);
     const dockerBaseType = EnvironmentType.Docker;
@@ -192,24 +153,21 @@ export function EnvironmentList({ onClickItem, onRefresh }: Props) {
       EnvironmentType.EdgeAgentOnKubernetes,
     ];
 
-    let finalFilterEnvironment: number[] = [];
-
     if (filterOptions.length === 0) {
       setPlatformType(allEnvironmentType);
     } else {
-      const filteredEnvironment = [
-        ...new Set(
-          filterOptions.map(
-            (filterOptions: { value: number }) => filterOptions.value
-          )
-        ),
-      ];
-      if (filteredEnvironment.includes(dockerBaseType)) {
-        finalFilterEnvironment = [...filteredEnvironment, ...dockerRelateType];
-      }
-      if (filteredEnvironment.includes(kubernetesBaseType)) {
+      let finalFilterEnvironment: number[] = filterOptions.map(
+        (filterOption: { value: number }) => filterOption.value
+      );
+      if (finalFilterEnvironment.includes(dockerBaseType)) {
         finalFilterEnvironment = [
-          ...filteredEnvironment,
+          ...finalFilterEnvironment,
+          ...dockerRelateType,
+        ];
+      }
+      if (finalFilterEnvironment.includes(kubernetesBaseType)) {
+        finalFilterEnvironment = [
+          ...finalFilterEnvironment,
           ...kubernetesRelateType,
         ];
       }
@@ -281,9 +239,11 @@ export function EnvironmentList({ onClickItem, onRefresh }: Props) {
     if (filterOptions !== null) {
       setSortByFilter(filterOptions.label);
       setSortByButton(true);
+      setSortByState(filterOptions);
     } else {
-      setSortByFilter('None');
-      setSortByButton(false);
+      setSortByFilter('');
+      setSortByButton(true);
+      setSortByState(undefined);
     }
   }
 
@@ -361,7 +321,7 @@ export function EnvironmentList({ onClickItem, onRefresh }: Props) {
               </div>
               <div className={styles.filterButton}>
                 <Button size="medium" onClick={clearFilter}>
-                  Clear
+                  Clear all
                 </Button>
               </div>
               <div className={styles.filterRight}>
@@ -372,6 +332,7 @@ export function EnvironmentList({ onClickItem, onRefresh }: Props) {
                   placeHolder="Sort By"
                   sortByDescending={sortByDescending}
                   sortByButton={sortByButton}
+                  value={sortByState}
                 />
               </div>
             </div>
@@ -379,7 +340,7 @@ export function EnvironmentList({ onClickItem, onRefresh }: Props) {
               {renderItems(
                 isLoading,
                 totalCount,
-                filteredEnvironments.map((env) => (
+                environments.map((env) => (
                   <EnvironmentItem
                     key={env.Id}
                     environment={env}

app/portainer/home/HomepageFilter.tsx

@@ -1,7 +1,12 @@
 import { components, OptionProps } from 'react-select';
 
+import { useLocalStorage } from '@/portainer/hooks/useLocalStorage';
 import { Select } from '@/portainer/components/form-components/ReactSelect';
 import { Filter } from '@/portainer/home/types';
+import {
+  EnvironmentType,
+  EnvironmentStatus,
+} from '@/portainer/environments/types';
 
 interface Props {
   filterOptions: Filter[];
@@ -42,3 +47,130 @@ export function HomepageFilter({
     />
   );
 }
+
+export function useHomePageStatusTypeState(
+  key: string
+): [
+  EnvironmentStatus[] | undefined,
+  (value: EnvironmentStatus[] | undefined) => void
+] {
+  const filterKey = keyBuilder(key);
+  const [value, setValue] = useLocalStorage(filterKey, '[]', sessionStorage);
+
+  const v = JSON.parse(value);
+  // eslint-disable-next-line func-style
+  const setValueParsed = (value: EnvironmentStatus[] | undefined) => {
+    setValue(JSON.stringify(value));
+  };
+
+  return [v, setValueParsed];
+
+  function keyBuilder(key: string) {
+    return `datatable_home_filter_${key}`;
+  }
+}
+
+export function useHomePageNumberTypeState(
+  key: string,
+  defaultValue: number[]
+): [number[] | undefined, (value: number[] | undefined) => void] {
+  const filterKey = keyBuilder(key);
+  const [value, setValue] = useLocalStorage(
+    filterKey,
+    JSON.stringify(defaultValue),
+    sessionStorage
+  );
+
+  const v = JSON.parse(value);
+  // eslint-disable-next-line func-style
+  const setValueParsed = (value: number[] | undefined) => {
+    setValue(JSON.stringify(value));
+  };
+
+  return [v, setValueParsed];
+
+  function keyBuilder(key: string) {
+    return `datatable_home_filter_${key}`;
+  }
+}
+
+export function useHomePageFilterState(
+  key: string
+): [
+  EnvironmentType[] | EnvironmentStatus[] | undefined,
+  (value: EnvironmentType[] | EnvironmentStatus[] | undefined) => void
+] {
+  const filterKey = keyBuilder(key);
+  const [value, setValue] = useLocalStorage(filterKey, '[]', sessionStorage);
+
+  const v = JSON.parse(value);
+  // eslint-disable-next-line func-style
+  const setValueParsed = (
+    value: EnvironmentType[] | EnvironmentStatus[] | undefined
+  ) => {
+    setValue(JSON.stringify(value));
+  };
+
+  return [v, setValueParsed];
+
+  function keyBuilder(key: string) {
+    return `datatable_home_filter_${key}`;
+  }
+}
+
+export function useHomePageFilterBoolState(
+  key: string
+): [boolean, (value: boolean) => void] {
+  const filterKey = keyBuilder(key);
+  const [value, setValue] = useLocalStorage(filterKey, 'false', sessionStorage);
+
+  const v = JSON.parse(value);
+  // eslint-disable-next-line func-style
+  const setValueParsed = (value: boolean) => {
+    setValue(JSON.stringify(value));
+  };
+
+  return [v, setValueParsed];
+
+  function keyBuilder(key: string) {
+    return `datatable_home_filter_${key}`;
+  }
+}
+
+export function useHomePageFilterTypeState(
+  key: string
+): [Filter[], (value: Filter[]) => void] {
+  const filterKey = keyBuilder(key);
+  const [value, setValue] = useLocalStorage(filterKey, '[]', sessionStorage);
+
+  const v = JSON.parse(value);
+  // eslint-disable-next-line func-style
+  const setValueParsed = (value: Filter[]) => {
+    setValue(JSON.stringify(value));
+  };
+
+  return [v, setValueParsed];
+
+  function keyBuilder(key: string) {
+    return `datatable_home_filter_type_${key}`;
+  }
+}
+
+export function useHomePageSingleFilterTypeState(
+  key: string
+): [Filter | undefined, (value: Filter | undefined) => void] {
+  const filterKey = keyBuilder(key);
+  const [value, setValue] = useLocalStorage(filterKey, '', sessionStorage);
+
+  const v = value && JSON.parse(value);
+  // eslint-disable-next-line func-style
+  const setValueParsed = (value: Filter | undefined) => {
+    setValue(JSON.stringify(value));
+  };
+
+  return [v, setValueParsed];
+
+  function keyBuilder(key: string) {
+    return `datatable_home_filter_type_${key}`;
+  }
+}