fix(home): fix home page filters EE-2972 (#6789)

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

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

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.module.css

@@ -1,6 +1,5 @@
 .sort-by-container {
   display: flex;
-  flex-wrap: wrap;
   align-items: center;
   justify-content: flex-end;
 }
@@ -8,3 +7,12 @@
 .sort-by-element {
   display: inline-block;
 }
+
+.sort-button {
+  background-color: var(--bg-sortbutton-color);
+  color: var(--text-ui-select-color);
+  border: 1px solid var(--border-sortbutton);
+  display: inline-block;
+  padding: 8px 10px;
+  border-radius: 5px;
+}

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

@@ -1,7 +1,6 @@
 import { useEffect, useState } from 'react';
 
 import { Select } from '@/portainer/components/form-components/ReactSelect';
-import { Button } from '@/portainer/components/Button';
 import { Filter } from '@/portainer/home/types';
 
 import styles from './SortbySelector.module.css';
@@ -13,6 +12,7 @@ interface Props {
   placeHolder: string;
   sortByDescending: boolean;
   sortByButton: boolean;
+  value?: Filter;
 }
 
 export function SortbySelector({
@@ -22,16 +22,17 @@ export function SortbySelector({
   placeHolder,
   sortByDescending,
   sortByButton,
+  value,
 }: Props) {
   const upIcon = 'fa fa-sort-alpha-up';
   const downIcon = 'fa fa-sort-alpha-down';
-  const [iconStyle, setIconStyle] = useState(upIcon);
+  const [iconStyle, setIconStyle] = useState(downIcon);
 
   useEffect(() => {
     if (sortByDescending) {
-      setIconStyle(downIcon);
-    } else {
       setIconStyle(upIcon);
+    } else {
+      setIconStyle(downIcon);
     }
   }, [sortByDescending]);
 
@@ -43,11 +44,13 @@ export function SortbySelector({
           options={filterOptions}
           onChange={(option) => onChange(option as Filter)}
           isClearable
+          value={value}
         />
       </div>
-      <div className={styles.sortbyelement}>
-        <Button
-          size="medium"
+      <div className={styles.sortByElement}>
+        <button
+          className={styles.sortButton}
+          type="button"
           disabled={!sortByButton}
           onClick={(e) => {
             e.preventDefault();
@@ -55,7 +58,7 @@ export function SortbySelector({
           }}
         >
           <i className={iconStyle} />
-        </Button>
+        </button>
       </div>
     </div>
   );

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.module.css

@@ -8,7 +8,6 @@
 
 .filter-container {
   display: flex;
-  flex-wrap: wrap;
   justify-content: flex-start;
 }
 
@@ -21,7 +20,7 @@
 
 .filter-right {
   padding: 10px;
-  width: 15%;
+  width: 20%;
   right: 0;
   display: inline-block;
   margin-left: auto;
@@ -33,3 +32,31 @@
   width: 5%;
   display: inline-block;
 }
+
+.clear-button {
+  display: inline-block;
+  border: 0px;
+  padding: 10px;
+}
+
+.action-button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.refresh-button {
+  display: inline-block;
+  width: fit-content;
+}
+
+.kubeconfig-button {
+  display: inline-block;
+  width: fit-content;
+}
+
+.filterSearchbar {
+  display: inline-block;
+  width: 100%;
+  padding-left: 10px;
+}

app/portainer/home/EnvironmentList/EnvironmentList.tsx

@@ -8,6 +8,7 @@ import {
   EnvironmentType,
   EnvironmentStatus,
 } from '@/portainer/environments/types';
+import { EnvironmentGroupId } from '@/portainer/environment-groups/types';
 import { Button } from '@/portainer/components/Button';
 import { useIsAdmin } from '@/portainer/hooks/useUser';
 import {
@@ -15,7 +16,10 @@ import {
   useSearchBarState,
 } from '@/portainer/components/datatables/components/FilterSearchBar';
 import { SortbySelector } from '@/portainer/components/datatables/components/SortbySelector';
-import { HomepageFilter } from '@/portainer/home/HomepageFilter';
+import {
+  HomepageFilter,
+  useHomePageFilter,
+} from '@/portainer/home/HomepageFilter';
 import {
   TableActions,
   TableContainer,
@@ -38,42 +42,97 @@ interface Props {
   onRefresh(): void;
 }
 
+const PlatformOptions = [
+  { value: EnvironmentType.Docker, label: 'Docker' },
+  { value: EnvironmentType.Azure, label: 'Azure' },
+  { value: EnvironmentType.KubernetesLocal, label: 'Kubernetes' },
+];
+
+const status = [
+  { value: EnvironmentStatus.Up, label: 'Up' },
+  { value: EnvironmentStatus.Down, label: 'Down' },
+];
+
+const SortByOptions = [
+  { value: 1, label: 'Name' },
+  { value: 2, label: 'Group' },
+  { value: 3, label: 'Status' },
+];
+
+const storageKey = 'home_endpoints';
+const allEnvironmentType = [
+  EnvironmentType.Docker,
+  EnvironmentType.AgentOnDocker,
+  EnvironmentType.Azure,
+  EnvironmentType.EdgeAgentOnDocker,
+  EnvironmentType.KubernetesLocal,
+  EnvironmentType.AgentOnKubernetes,
+  EnvironmentType.EdgeAgentOnKubernetes,
+];
+
 export function EnvironmentList({ onClickItem, onRefresh }: Props) {
   const isAdmin = useIsAdmin();
-  const storageKey = 'home_endpoints';
-  const allEnvironmentType = [
-    EnvironmentType.Docker,
-    EnvironmentType.AgentOnDocker,
-    EnvironmentType.Azure,
-    EnvironmentType.EdgeAgentOnDocker,
-    EnvironmentType.KubernetesLocal,
-    EnvironmentType.AgentOnKubernetes,
-    EnvironmentType.EdgeAgentOnKubernetes,
-  ];
 
-  const [platformType, setPlatformType] = useState(allEnvironmentType);
+  const [platformType, setPlatformType] = useHomePageFilter(
+    '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] = useHomePageFilter<
+    EnvironmentStatus[]
+  >('status', []);
+  const [tagFilter, setTagFilter] = useHomePageFilter<number[]>('tag', []);
+  const [groupFilter, setGroupFilter] = useHomePageFilter<EnvironmentGroupId[]>(
+    'group',
+    []
+  );
+  const [sortByFilter, setSortByFilter] = useSearchBarState('sortBy');
+  const [sortByDescending, setSortByDescending] = useHomePageFilter(
+    'sortOrder',
+    false
+  );
+  const [sortByButton, setSortByButton] = useHomePageFilter(
+    'sortByButton',
+    false
+  );
 
-  const [platformState, setPlatformState] = useState<Filter[]>([]);
-  const [statusState, setStatusState] = useState<Filter[]>([]);
-  const [tagState, setTagState] = useState<Filter[]>([]);
-  const [groupState, setGroupState] = useState<Filter[]>([]);
+  const [platformState, setPlatformState] = useHomePageFilter<Filter[]>(
+    'type_state',
+    []
+  );
+  const [statusState, setStatusState] = useHomePageFilter<Filter[]>(
+    'status_state',
+    []
+  );
+  const [tagState, setTagState] = useHomePageFilter<Filter[]>('tag_state', []);
+  const [groupState, setGroupState] = useHomePageFilter<Filter[]>(
+    'group_state',
+    []
+  );
+  const [sortByState, setSortByState] = useHomePageFilter<Filter | undefined>(
+    'sortby_state',
+    undefined
+  );
 
   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,29 +140,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' },
-    { value: EnvironmentType.KubernetesLocal, label: 'Kubernetes' },
-  ];
-
-  const status = [
-    { value: EnvironmentStatus.Up, label: 'Up' },
-    { value: EnvironmentStatus.Down, label: 'Down' },
-  ];
-
-  const SortByOptions = [
-    { value: 1, label: 'Name' },
-    { value: 2, label: 'Group' },
-    { value: 3, label: 'Status' },
-  ];
-
   const groupOptions = [...(groupsQuery.data || [])];
   const uniqueGroup = [
     ...new Map(groupOptions.map((item) => [item.Id, item])).values(),
@@ -121,64 +157,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 +170,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 = filterOptions.map(
+        (filterOption) => filterOption.value
+      );
+      if (finalFilterEnvironment.includes(dockerBaseType)) {
         finalFilterEnvironment = [
-          ...filteredEnvironment,
+          ...finalFilterEnvironment,
+          ...dockerRelateType,
+        ];
+      }
+      if (finalFilterEnvironment.includes(kubernetesBaseType)) {
+        finalFilterEnvironment = [
+          ...finalFilterEnvironment,
           ...kubernetesRelateType,
         ];
       }
@@ -266,7 +241,6 @@ export function EnvironmentList({ onClickItem, onRefresh }: Props) {
   }
 
   function clearFilter() {
-    setSearchBarValue('');
     setPlatformState([]);
     setPlatformType(allEnvironmentType);
     setStatusState([]);
@@ -281,9 +255,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);
     }
   }
 
@@ -304,19 +280,34 @@ export function EnvironmentList({ onClickItem, onRefresh }: Props) {
                 <i className="fa fa-exclamation-circle blue-icon space-right" />
                 Click on an environment to manage
               </div>
-
-              {isAdmin && (
-                <Button
-                  onClick={onRefresh}
-                  data-cy="home-refreshEndpointsButton"
-                  className={clsx(styles.refreshEnvironmentsButton)}
-                >
-                  <i className="fa fa-sync space-right" aria-hidden="true" />
-                  Refresh
-                </Button>
-              )}
-
-              <KubeconfigButton environments={environments} />
+              <div className={styles.actionButton}>
+                <div className={styles.refreshButton}>
+                  {isAdmin && (
+                    <Button
+                      onClick={onRefresh}
+                      data-cy="home-refreshEndpointsButton"
+                      className={clsx(styles.refreshEnvironmentsButton)}
+                    >
+                      <i
+                        className="fa fa-sync space-right"
+                        aria-hidden="true"
+                      />
+                      Refresh
+                    </Button>
+                  )}
+                </div>
+                <div className={styles.kubeconfigButton}>
+                  <KubeconfigButton environments={environments} />
+                </div>
+                <div className={styles.filterSearchbar}>
+                  <FilterSearchBar
+                    value={searchBarValue}
+                    onChange={setSearchBarValue}
+                    placeholder="Search by name, group, tag, status, URL..."
+                    data-cy="home-endpointsSearchInput"
+                  />
+                </div>
+              </div>
             </TableActions>
             <div className={styles.filterContainer}>
               <div className={styles.filterLeft}>
@@ -351,19 +342,13 @@ export function EnvironmentList({ onClickItem, onRefresh }: Props) {
                   value={groupState}
                 />
               </div>
-              <div className={styles.filterLeft}>
-                <FilterSearchBar
-                  value={searchBarValue}
-                  onChange={setSearchBarValue}
-                  placeholder="Search...."
-                  data-cy="home-endpointsSearchInput"
-                />
-              </div>
-              <div className={styles.filterButton}>
-                <Button size="medium" onClick={clearFilter}>
-                  Clear
-                </Button>
-              </div>
+              <button
+                type="button"
+                className={styles.clearButton}
+                onClick={clearFilter}
+              >
+                Clear all
+              </button>
               <div className={styles.filterRight}>
                 <SortbySelector
                   filterOptions={SortByOptions}
@@ -372,6 +357,7 @@ export function EnvironmentList({ onClickItem, onRefresh }: Props) {
                   placeHolder="Sort By"
                   sortByDescending={sortByDescending}
                   sortByButton={sortByButton}
+                  value={sortByState}
                 />
               </div>
             </div>
@@ -379,7 +365,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,5 +1,6 @@
 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';
 
@@ -42,3 +43,33 @@ export function HomepageFilter({
     />
   );
 }
+
+export function useHomePageFilter<T>(
+  key: string,
+  defaultValue: T
+): [T, (value: T) => void] {
+  const filterKey = keyBuilder(key);
+  const [storageValue, setStorageValue] = useLocalStorage(
+    filterKey,
+    JSON.stringify(defaultValue),
+    sessionStorage
+  );
+  const value = jsonParse(storageValue, defaultValue);
+  return [value, setValue];
+
+  function setValue(value?: T) {
+    setStorageValue(JSON.stringify(value));
+  }
+}
+
+function keyBuilder(key: string) {
+  return `datatable_home_filter_type_${key}`;
+}
+
+function jsonParse<T>(value: string, defaultValue: T): T {
+  try {
+    return JSON.parse(value);
+  } catch (e) {
+    return defaultValue;
+  }
+}