Homepage Filter Component (#6762)

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

@@ -0,0 +1,10 @@
+.searchBar {
+  padding: 8px;
+  border: 1px solid var(--border-color);
+  border-radius: 5px;
+}
+
+.searchBar .iconSpan {
+  display: inline-block;
+  margin-right: 5px;
+}

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

@@ -0,0 +1,45 @@
+import { useLocalStorage } from '@/portainer/hooks/useLocalStorage';
+
+import styles from './FilterSearchBar.module.css';
+
+interface Props {
+  value: string;
+  placeholder?: string;
+  onChange(value: string): void;
+}
+
+export function FilterSearchBar({
+  value,
+  placeholder = 'Search...',
+  onChange,
+}: Props) {
+  return (
+    <div className={styles.searchBar}>
+      <span className={styles.iconSpan}>
+        <i className="fa fa-search" aria-hidden="true" />
+      </span>
+      <span className={styles.iconSpan}>
+        <input
+          type="text"
+          className="searchInput"
+          value={value}
+          onChange={(e) => onChange(e.target.value)}
+          placeholder={placeholder}
+        />
+      </span>
+    </div>
+  );
+}
+
+export function useSearchBarState(
+  key: string
+): [string, (value: string) => void] {
+  const filterKey = keyBuilder(key);
+  const [value, setValue] = useLocalStorage(filterKey, '', sessionStorage);
+
+  return [value, setValue];
+
+  function keyBuilder(key: string) {
+    return `datatable_text_filter_${key}`;
+  }
+}

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

@@ -0,0 +1,10 @@
+.sort-by-container {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: flex-end;
+}
+
+.sort-by-element {
+  display: inline-block;
+}

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

@@ -0,0 +1,62 @@
+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';
+
+interface Props {
+  filterOptions: Filter[];
+  onChange: (filterOptions: Filter) => void;
+  onDescending: () => void;
+  placeHolder: string;
+  sortByDescending: boolean;
+  sortByButton: boolean;
+}
+
+export function SortbySelector({
+  filterOptions,
+  onChange,
+  onDescending,
+  placeHolder,
+  sortByDescending,
+  sortByButton,
+}: Props) {
+  const upIcon = 'fa fa-sort-alpha-up';
+  const downIcon = 'fa fa-sort-alpha-down';
+  const [iconStyle, setIconStyle] = useState(upIcon);
+
+  useEffect(() => {
+    if (sortByDescending) {
+      setIconStyle(downIcon);
+    } else {
+      setIconStyle(upIcon);
+    }
+  }, [sortByDescending]);
+
+  return (
+    <div className={styles.sortByContainer}>
+      <div className={styles.sortByElement}>
+        <Select
+          placeholder={placeHolder}
+          options={filterOptions}
+          onChange={(option) => onChange(option as Filter)}
+          isClearable
+        />
+      </div>
+      <div className={styles.sortbyelement}>
+        <Button
+          size="medium"
+          disabled={!sortByButton}
+          onClick={(e) => {
+            e.preventDefault();
+            onDescending();
+          }}
+        >
+          <i className={iconStyle} />
+        </Button>
+      </div>
+    </div>
+  );
+}

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

@@ -50,7 +50,6 @@ export async function getEndpoints(
 
   try {
     const response = await axios.get<Environment[]>(url, { params });
-
     const totalCount = response.headers['x-total-count'];
     const totalAvailable = response.headers['x-total-available'];
 

app/portainer/environments/queries.ts

@@ -33,7 +33,6 @@ export function useEnvironmentList(query: Query = {}, refetchOffline = false) {
         const hasOfflineEnvironment = data.value.some(
           (env) => env.Status === EnvironmentStatus.Down
         );
-
         return hasOfflineEnvironment && ENVIRONMENTS_POLLING_INTERVAL;
       },
       onError(error) {

app/portainer/home/EnvironmentList/EnvironmentList.module.css

@@ -5,3 +5,31 @@
 .refresh-environments-button {
   margin-left: 0 !important;
 }
+
+.filter-container {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-start;
+}
+
+.filter-left {
+  margin-left: 10px;
+  padding: 10px 0px;
+  width: 15%;
+  display: inline-block;
+}
+
+.filter-right {
+  padding: 10px;
+  width: 15%;
+  right: 0;
+  display: inline-block;
+  margin-left: auto;
+}
+
+.filter-button {
+  margin-left: 10px;
+  padding: 10px 0px;
+  width: 5%;
+  display: inline-block;
+}

app/portainer/home/EnvironmentList/EnvironmentList.tsx

@@ -3,13 +3,19 @@ import clsx from 'clsx';
 
 import { PaginationControls } from '@/portainer/components/pagination-controls';
 import { usePaginationLimitState } from '@/portainer/hooks/usePaginationLimitState';
-import { Environment } from '@/portainer/environments/types';
+import {
+  Environment,
+  EnvironmentType,
+  EnvironmentStatus,
+} from '@/portainer/environments/types';
 import { Button } from '@/portainer/components/Button';
 import { useIsAdmin } from '@/portainer/hooks/useUser';
 import {
-  SearchBar,
+  FilterSearchBar,
   useSearchBarState,
-} from '@/portainer/components/datatables/components/SearchBar';
+} from '@/portainer/components/datatables/components/FilterSearchBar';
+import { SortbySelector } from '@/portainer/components/datatables/components/SortbySelector';
+import { HomepageFilter } from '@/portainer/home/HomepageFilter';
 import {
   TableActions,
   TableContainer,
@@ -19,6 +25,8 @@ import { TableFooter } from '@/portainer/components/datatables/components/TableF
 import { useDebounce } from '@/portainer/hooks/useDebounce';
 import { useEnvironmentList } from '@/portainer/environments/queries';
 import { useGroups } from '@/portainer/environment-groups/queries';
+import { useTags } from '@/portainer/tags/queries';
+import { Filter } from '@/portainer/home/types';
 
 import { EnvironmentItem } from './EnvironmentItem';
 import { KubeconfigButton } from './KubeconfigButton';
@@ -33,21 +41,255 @@ interface Props {
 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 [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 [platformState, setPlatformState] = useState<Filter[]>([]);
+  const [statusState, setStatusState] = useState<Filter[]>([]);
+  const [tagState, setTagState] = useState<Filter[]>([]);
+  const [groupState, setGroupState] = useState<Filter[]>([]);
+
+  const groupsQuery = useGroups();
+
+  const { isLoading, environments, totalCount, totalAvailable } =
+    useEnvironmentList(
+      { page, pageLimit, types: platformType, search: debouncedTextFilter },
+      true
+    );
+
   useEffect(() => {
     setPage(1);
   }, [searchBarValue]);
 
-  const groupsQuery = useGroups();
+  interface Collection {
+    Status: number[];
+    TagIds: number[];
+    GroupId: number[];
+  }
 
-  const { isLoading, environments, totalCount, totalAvailable } =
+  const PlatformOptions = [
-    useEnvironmentList({ page, pageLimit, search: debouncedTextFilter }, true);
+    { 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(),
+  ].map(({ Id: value, Name: label }) => ({
+    value,
+    label,
+  }));
+
+  const alltags = useTags();
+  const tagOptions = [...(alltags.tags || [])];
+  const uniqueTag = [
+    ...new Map(tagOptions.map((item) => [item.ID, item])).values(),
+  ].map(({ ID: value, Name: label }) => ({
+    value,
+    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;
+    const kubernetesBaseType = EnvironmentType.KubernetesLocal;
+    const dockerRelateType = [
+      EnvironmentType.AgentOnDocker,
+      EnvironmentType.EdgeAgentOnDocker,
+    ];
+    const kubernetesRelateType = [
+      EnvironmentType.AgentOnKubernetes,
+      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)) {
+        finalFilterEnvironment = [
+          ...filteredEnvironment,
+          ...kubernetesRelateType,
+        ];
+      }
+      setPlatformType(finalFilterEnvironment);
+    }
+  }
+
+  function statusOnChange(filterOptions: Filter[]) {
+    setStatusState(filterOptions);
+    if (filterOptions.length === 0) {
+      setStatusFilter([]);
+    } else {
+      const filteredStatus = [
+        ...new Set(
+          filterOptions.map(
+            (filterOptions: { value: number }) => filterOptions.value
+          )
+        ),
+      ];
+      setStatusFilter(filteredStatus);
+    }
+  }
+
+  function groupOnChange(filterOptions: Filter[]) {
+    setGroupState(filterOptions);
+    if (filterOptions.length === 0) {
+      setGroupFilter([]);
+    } else {
+      const filteredGroups = [
+        ...new Set(
+          filterOptions.map(
+            (filterOptions: { value: number }) => filterOptions.value
+          )
+        ),
+      ];
+      setGroupFilter(filteredGroups);
+    }
+  }
+
+  function tagOnChange(filterOptions: Filter[]) {
+    setTagState(filterOptions);
+    if (filterOptions.length === 0) {
+      setTagFilter([]);
+    } else {
+      const filteredTags = [
+        ...new Set(
+          filterOptions.map(
+            (filterOptions: { value: number }) => filterOptions.value
+          )
+        ),
+      ];
+      setTagFilter(filteredTags);
+    }
+  }
+
+  function clearFilter() {
+    setSearchBarValue('');
+    setPlatformState([]);
+    setPlatformType(allEnvironmentType);
+    setStatusState([]);
+    setStatusFilter([]);
+    setTagState([]);
+    setTagFilter([]);
+    setGroupState([]);
+    setGroupFilter([]);
+  }
+
+  function sortOnchange(filterOptions: Filter) {
+    if (filterOptions !== null) {
+      setSortByFilter(filterOptions.label);
+      setSortByButton(true);
+    } else {
+      setSortByFilter('None');
+      setSortByButton(false);
+    }
+  }
+
+  function sortOndescending() {
+    setSortByDescending(!sortByDescending);
+  }
 
   return (
     <>
@@ -76,19 +318,68 @@ export function EnvironmentList({ onClickItem, onRefresh }: Props) {
 
               <KubeconfigButton environments={environments} />
             </TableActions>
-
+            <div className={styles.filterContainer}>
-            <SearchBar
+              <div className={styles.filterLeft}>
-              value={searchBarValue}
+                <HomepageFilter
-              onChange={setSearchBarValue}
+                  filterOptions={PlatformOptions}
-              placeholder="Search by name, group, tag, status, URL..."
+                  onChange={platformOnChange}
-              data-cy="home-endpointsSearchInput"
+                  placeHolder="Platform"
-            />
+                  value={platformState}
-
+                />
+              </div>
+              <div className={styles.filterLeft}>
+                <HomepageFilter
+                  filterOptions={status}
+                  onChange={statusOnChange}
+                  placeHolder="Status"
+                  value={statusState}
+                />
+              </div>
+              <div className={styles.filterLeft}>
+                <HomepageFilter
+                  filterOptions={uniqueTag}
+                  onChange={tagOnChange}
+                  placeHolder="Tags"
+                  value={tagState}
+                />
+              </div>
+              <div className={styles.filterLeft}>
+                <HomepageFilter
+                  filterOptions={uniqueGroup}
+                  onChange={groupOnChange}
+                  placeHolder="Groups"
+                  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>
+              <div className={styles.filterRight}>
+                <SortbySelector
+                  filterOptions={SortByOptions}
+                  onChange={sortOnchange}
+                  onDescending={sortOndescending}
+                  placeHolder="Sort By"
+                  sortByDescending={sortByDescending}
+                  sortByButton={sortByButton}
+                />
+              </div>
+            </div>
             <div className="blocklist" data-cy="home-endpointList">
               {renderItems(
                 isLoading,
                 totalCount,
-                environments.map((env) => (
+                filteredEnvironments.map((env) => (
                   <EnvironmentItem
                     key={env.Id}
                     environment={env}

app/portainer/home/HomepageFilter.tsx

@@ -0,0 +1,44 @@
+import { components, OptionProps } from 'react-select';
+
+import { Select } from '@/portainer/components/form-components/ReactSelect';
+import { Filter } from '@/portainer/home/types';
+
+interface Props {
+  filterOptions: Filter[];
+  onChange: (filterOptions: Filter[]) => void;
+  placeHolder: string;
+  value: Filter[];
+}
+
+function Option(props: OptionProps<Filter, true>) {
+  const { isSelected, label } = props;
+  return (
+    <div>
+      <components.Option
+        // eslint-disable-next-line react/jsx-props-no-spreading
+        {...props}
+      >
+        <input type="checkbox" checked={isSelected} onChange={() => null} />{' '}
+        <label>{label}</label>
+      </components.Option>
+    </div>
+  );
+}
+
+export function HomepageFilter({
+  filterOptions,
+  onChange,
+  placeHolder,
+  value,
+}: Props) {
+  return (
+    <Select
+      placeholder={placeHolder}
+      options={filterOptions}
+      value={value}
+      isMulti
+      components={{ Option }}
+      onChange={(option) => onChange(option as Filter[])}
+    />
+  );
+}

app/portainer/home/types.ts

@@ -5,3 +5,8 @@ export interface Motd {
   Style?: string;
   ContentLayout?: Record<string, string>;
 }
+
+export interface Filter {
+  value: number;
+  label: string;
+}