feat(home): filter by connection type and agent version [EE-3373] (#7085)

2025-08-09 15:55:23 +02:00 · 2022-08-11 07:32:12 +03:00 · 2022-08-11 07:32:12 +03:00 · 5ee570e075
commit 5ee570e075
parent 9666c21b8a
31 changed files with 828 additions and 323 deletions
--- a/app/portainer/environments/environment.service/create.ts
+++ b/app/portainer/environments/environment.service/create.ts
@ -166,6 +166,7 @@ interface CreateEdgeAgentEnvironment {
  meta?: EnvironmentMetadata;
  pollFrequency: number;
  gpus?: Gpu[];
+  isEdgeDevice?: boolean;
 }

 export function createEdgeAgentEnvironment({
@ -173,18 +174,20 @@ export function createEdgeAgentEnvironment({
  portainerUrl,
  meta = { tagIds: [] },
  gpus = [],
+  isEdgeDevice,
 }: CreateEdgeAgentEnvironment) {
  return createEnvironment(
    name,
    EnvironmentCreationTypes.EdgeAgentEnvironment,
    {
      url: portainerUrl,
-      ...meta,
      tls: {
        skipVerify: true,
        skipClientVerify: true,
      },
      gpus,
+      isEdgeDevice,
+      ...meta,
    }
  );
 }
--- a/app/portainer/environments/environment.service/index.ts
+++ b/app/portainer/environments/environment.service/index.ts
@ -26,6 +26,7 @@ export interface EnvironmentsQueryParams {
  edgeDeviceUntrusted?: boolean;
  provisioned?: boolean;
  name?: string;
+  agentVersions?: string[];
 }

 export interface GetEnvironmentsOptions {
@ -72,6 +73,17 @@ export async function getEnvironments(
  }
 }

+export async function getAgentVersions() {
+  try {
+    const response = await axios.get<string[]>(
+      buildUrl(undefined, 'agent_versions')
+    );
+    return response.data;
+  } catch (e) {
+    throw parseAxiosError(e as Error);
+  }
+}
+
 export async function getEndpoint(id: EnvironmentId) {
  try {
    const { data: endpoint } = await axios.get<Environment>(buildUrl(id));
--- a/app/portainer/environments/queries/useAgentVersionsList.ts
+++ b/app/portainer/environments/queries/useAgentVersionsList.ts
@ -0,0 +1,7 @@
+import { useQuery } from 'react-query';
+
+import { getAgentVersions } from '../environment.service';
+
+export function useAgentVersionsList() {
+  return useQuery(['environments', 'agentVersions'], () => getAgentVersions());
+}
--- a/app/portainer/environments/types.ts
+++ b/app/portainer/environments/types.ts
@ -90,6 +90,7 @@ export interface EnvironmentSecuritySettings {
 }

 export type Environment = {
+  Agent: { Version: string };
  Id: EnvironmentId;
  Type: EnvironmentType;
  TagIds: TagId[];
@ -112,6 +113,7 @@ export type Environment = {
  SecuritySettings: EnvironmentSecuritySettings;
  Gpus: { name: string; value: string }[];
 };
+
 /**
 * TS reference of endpoint_create.go#EndpointCreationType iota
 */
--- a/app/portainer/environments/utils.ts
+++ b/app/portainer/environments/utils.ts
@ -25,6 +25,15 @@ export function isKubernetesEnvironment(envType: EnvironmentType) {
  return getPlatformType(envType) === PlatformType.Kubernetes;
 }

+export function isAgentEnvironment(envType: EnvironmentType) {
+  return (
+    isEdgeEnvironment(envType) ||
+    [EnvironmentType.AgentOnDocker, EnvironmentType.AgentOnKubernetes].includes(
+      envType
+    )
+  );
+}
+
 export function isEdgeEnvironment(envType: EnvironmentType) {
  return [
    EnvironmentType.EdgeAgentOnDocker,
--- a/app/portainer/home/EnvironmentList/EnvironmentItem/AgentVersionTag.tsx
+++ b/app/portainer/home/EnvironmentList/EnvironmentItem/AgentVersionTag.tsx
@ -0,0 +1,29 @@
+import { Zap } from 'react-feather';
+
+import { EnvironmentType } from '@/portainer/environments/types';
+import {
+  isAgentEnvironment,
+  isEdgeEnvironment,
+} from '@/portainer/environments/utils';
+
+interface Props {
+  type: EnvironmentType;
+  version: string;
+}
+
+export function AgentVersionTag({ type, version }: Props) {
+  if (!isAgentEnvironment(type)) {
+    return null;
+  }
+
+  return (
+    <span className="space-x-1">
+      <span>
+        + <Zap className="icon icon-xs vertical-center" aria-hidden="true" />
+      </span>
+      <span>{isEdgeEnvironment(type) ? 'Edge Agent' : 'Agent'}</span>
+
+      <span>{version}</span>
+    </span>
+  );
+}
--- a/app/portainer/home/EnvironmentList/EnvironmentItem/EnvironmentStats.tsx
+++ b/app/portainer/home/EnvironmentList/EnvironmentItem/EnvironmentStats.tsx
@ -15,6 +15,8 @@ export function EnvironmentStats({ environment }: Props) {
      return (
        <EnvironmentStatsKubernetes
          snapshots={environment.Kubernetes.Snapshots || []}
+          type={environment.Type}
+          agentVersion={environment.Agent.Version}
        />
      );
    case PlatformType.Docker:
@ -22,6 +24,7 @@ export function EnvironmentStats({ environment }: Props) {
        <EnvironmentStatsDocker
          snapshots={environment.Snapshots}
          type={environment.Type}
+          agentVersion={environment.Agent.Version}
        />
      );
    default:
--- a/app/portainer/home/EnvironmentList/EnvironmentItem/EnvironmentStatsDocker.tsx
+++ b/app/portainer/home/EnvironmentList/EnvironmentItem/EnvironmentStatsDocker.tsx
@ -1,19 +1,23 @@
-import { Zap } from 'react-feather';
-
 import {
  DockerSnapshot,
  EnvironmentType,
 } from '@/portainer/environments/types';
 import { addPlural } from '@/portainer/helpers/strings';

+import { AgentVersionTag } from './AgentVersionTag';
 import { Stat } from './EnvironmentStatsItem';

 interface Props {
  snapshots: DockerSnapshot[];
  type: EnvironmentType;
+  agentVersion: string;
 }

-export function EnvironmentStatsDocker({ snapshots = [], type }: Props) {
+export function EnvironmentStatsDocker({
+  snapshots = [],
+  type,
+  agentVersion,
+}: Props) {
  if (snapshots.length === 0) {
    return (
      <div className="blocklist-item-line endpoint-item">
@ -60,15 +64,9 @@ export function EnvironmentStatsDocker({ snapshots = [], type }: Props) {
      </span>

      <span className="small text-muted space-x-2 vertical-center">
-        <span>{snapshot.Swarm ? 'Swarm' : 'Standalone'}</span>
-        <span>{snapshot.DockerVersion}</span>
-        {type === EnvironmentType.AgentOnDocker && (
-          <span>
-            +{' '}
-            <Zap className="icon icon-xs vertical-center" aria-hidden="true" />{' '}
-            Agent
-          </span>
-        )}
+        <span>
+          {snapshot.Swarm ? 'Swarm' : 'Standalone'} {snapshot.DockerVersion}
+        </span>
        {snapshot.Swarm && (
          <Stat
            value={addPlural(snapshot.NodeCount, 'node')}
@ -76,6 +74,7 @@ export function EnvironmentStatsDocker({ snapshots = [], type }: Props) {
            featherIcon
          />
        )}
+        <AgentVersionTag version={agentVersion} type={type} />
      </span>
    </div>
  );
--- a/app/portainer/home/EnvironmentList/EnvironmentItem/EnvironmentStatsKubernetes.tsx
+++ b/app/portainer/home/EnvironmentList/EnvironmentItem/EnvironmentStatsKubernetes.tsx
@ -1,14 +1,24 @@
-import { KubernetesSnapshot } from '@/portainer/environments/types';
+import {
+  EnvironmentType,
+  KubernetesSnapshot,
+} from '@/portainer/environments/types';
 import { humanize } from '@/portainer/filters/filters';
 import { addPlural } from '@/portainer/helpers/strings';

+import { AgentVersionTag } from './AgentVersionTag';
 import { Stat } from './EnvironmentStatsItem';

 interface Props {
  snapshots?: KubernetesSnapshot[];
+  type: EnvironmentType;
+  agentVersion: string;
 }

-export function EnvironmentStatsKubernetes({ snapshots = [] }: Props) {
+export function EnvironmentStatsKubernetes({
+  snapshots = [],
+  type,
+  agentVersion,
+}: Props) {
  if (snapshots.length === 0) {
    return (
      <div className="blocklist-item-line endpoint-item">
@ -38,6 +48,7 @@ export function EnvironmentStatsKubernetes({ snapshots = [] }: Props) {
          icon="hard-drive"
          featherIcon
        />
+        <AgentVersionTag type={type} version={agentVersion} />
      </span>
    </div>
  );
--- a/app/portainer/home/EnvironmentList/EnvironmentList.tsx
+++ b/app/portainer/home/EnvironmentList/EnvironmentList.tsx
@ -1,12 +1,15 @@
 import { ReactNode, useEffect, useState } from 'react';
 import clsx from 'clsx';
 import { RefreshCcw } from 'react-feather';
+import _ from 'lodash';

 import { usePaginationLimitState } from '@/portainer/hooks/usePaginationLimitState';
 import {
  Environment,
  EnvironmentType,
  EnvironmentStatus,
+  PlatformType,
+  EdgeTypes,
 } from '@/portainer/environments/types';
 import { EnvironmentGroupId } from '@/portainer/environment-groups/types';
 import { useIsAdmin } from '@/portainer/hooks/useUser';
@ -22,6 +25,8 @@ import {
 import { useGroups } from '@/portainer/environment-groups/queries';
 import { useTags } from '@/portainer/tags/queries';
 import { Filter } from '@/portainer/home/types';
+import { useAgentVersionsList } from '@/portainer/environments/queries/useAgentVersionsList';
+import { EnvironmentsQueryParams } from '@/portainer/environments/environment.service';

 import { TableFooter } from '@@/datatables/TableFooter';
 import { TableActions, TableContainer, TableTitle } from '@@/datatables';
@ -35,54 +40,49 @@ import { PaginationControls } from '@@/PaginationControls';

 import { EnvironmentItem } from './EnvironmentItem';
 import { KubeconfigButton } from './KubeconfigButton';
-import styles from './EnvironmentList.module.css';
 import { NoEnvironmentsInfoPanel } from './NoEnvironmentsInfoPanel';
+import styles from './EnvironmentList.module.css';

 interface Props {
  onClickItem(environment: Environment): void;
  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 = [
+const sortByOptions = [
  { value: 1, label: 'Name' },
  { value: 2, label: 'Group' },
  { value: 3, label: 'Status' },
 ];

+enum ConnectionType {
+  API,
+  Agent,
+  EdgeAgent,
+  EdgeDevice,
+}
+
 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 [platformType, setPlatformType] = useHomePageFilter(
-    'platformType',
-    allEnvironmentType
-  );
+  const [platformTypes, setPlatformTypes] = useHomePageFilter<
+    Filter<PlatformType>[]
+  >('platformType', []);
  const [searchBarValue, setSearchBarValue] = useSearchBarState(storageKey);
  const [pageLimit, setPageLimit] = usePaginationLimitState(storageKey);
  const [page, setPage] = useState(1);
  const debouncedTextFilter = useDebounce(searchBarValue);

+  const [connectionTypes, setConnectionTypes] = useHomePageFilter<
+    Filter<ConnectionType>[]
+  >('connectionTypes', []);
+
  const [statusFilter, setStatusFilter] = useHomePageFilter<
    EnvironmentStatus[]
  >('status', []);
@ -101,10 +101,6 @@ export function EnvironmentList({ onClickItem, onRefresh }: Props) {
    false
  );

-  const [platformState, setPlatformState] = useHomePageFilter<Filter[]>(
-    'type_state',
-    []
-  );
  const [statusState, setStatusState] = useHomePageFilter<Filter[]>(
    'status_state',
    []
@ -115,31 +111,46 @@ export function EnvironmentList({ onClickItem, onRefresh }: Props) {
    []
  );
  const [sortByState, setSortByState] = useHomePageFilter<Filter | undefined>(
-    'sortby_state',
+    'sort_by_state',
    undefined
  );
+  const [agentVersions, setAgentVersions] = useHomePageFilter<Filter<string>[]>(
+    'agentVersions',
+    []
+  );

  const groupsQuery = useGroups();

+  const environmentsQueryParams: EnvironmentsQueryParams = {
+    types: getTypes(
+      platformTypes.map((p) => p.value),
+      connectionTypes.map((p) => p.value)
+    ),
+    search: debouncedTextFilter,
+    status: statusFilter,
+    tagIds: tagFilter?.length ? tagFilter : undefined,
+    groupIds: groupFilter,
+    edgeDevice: getEdgeDeviceFilter(connectionTypes.map((p) => p.value)),
+    tagsPartialMatch: true,
+    agentVersions: agentVersions.map((a) => a.value),
+  };
+
+  const tagsQuery = useTags();
+
  const { isLoading, environments, totalCount, totalAvailable } =
    useEnvironmentList(
      {
        page,
        pageLimit,
-        types: platformType,
-        search: debouncedTextFilter,
-        status: statusFilter,
-        tagIds: tagFilter?.length ? tagFilter : undefined,
-        groupIds: groupFilter,
        sort: sortByFilter,
        order: sortByDescending ? 'desc' : 'asc',
-        provisioned: true,
-        edgeDevice: false,
-        tagsPartialMatch: true,
+        ...environmentsQueryParams,
      },
      refetchIfAnyOffline
    );

+  const agentVersionsQuery = useAgentVersionsList();
+
  useEffect(() => {
    setPage(1);
  }, [searchBarValue]);
@ -152,8 +163,7 @@ export function EnvironmentList({ onClickItem, onRefresh }: Props) {
    label,
  }));

-  const alltags = useTags();
-  const tagOptions = [...(alltags.tags || [])];
+  const tagOptions = [...(tagsQuery.tags || [])];
  const uniqueTag = [
    ...new Map(tagOptions.map((item) => [item.ID, item])).values(),
  ].map(({ ID: value, Name: label }) => ({
@ -161,39 +171,231 @@ export function EnvironmentList({ onClickItem, onRefresh }: Props) {
    label,
  }));

-  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,
-    ];
+  const connectionTypeOptions = getConnectionTypeOptions(platformTypes);
+  const platformTypeOptions = getPlatformTypeOptions(connectionTypes);

-    if (filterOptions.length === 0) {
-      setPlatformType(allEnvironmentType);
-    } else {
-      let finalFilterEnvironment = filterOptions.map(
-        (filterOption) => filterOption.value
-      );
-      if (finalFilterEnvironment.includes(dockerBaseType)) {
-        finalFilterEnvironment = [
-          ...finalFilterEnvironment,
-          ...dockerRelateType,
-        ];
-      }
-      if (finalFilterEnvironment.includes(kubernetesBaseType)) {
-        finalFilterEnvironment = [
-          ...finalFilterEnvironment,
-          ...kubernetesRelateType,
-        ];
-      }
-      setPlatformType(finalFilterEnvironment);
+  return (
+    <>
+      {totalAvailable === 0 && <NoEnvironmentsInfoPanel isAdmin={isAdmin} />}
+      <div className="row">
+        <div className="col-sm-12">
+          <TableContainer>
+            <TableTitle icon="hard-drive" featherIcon label="Environments" />
+
+            <TableActions className={styles.actionBar}>
+              <div className={styles.description}>
+                Click on an environment to manage
+              </div>
+              <div className={styles.actionButton}>
+                <div className={styles.refreshButton}>
+                  {isAdmin && (
+                    <Button
+                      onClick={onRefresh}
+                      data-cy="home-refreshEndpointsButton"
+                      className={clsx(
+                        'vertical-center',
+                        styles.refreshEnvironmentsButton
+                      )}
+                    >
+                      <RefreshCcw
+                        className="feather icon-sm icon-white"
+                        aria-hidden="true"
+                      />
+                      Refresh
+                    </Button>
+                  )}
+                </div>
+                <div className={styles.kubeconfigButton}>
+                  <KubeconfigButton
+                    environments={environments}
+                    envQueryParams={{
+                      ...environmentsQueryParams,
+                      sort: sortByFilter,
+                      order: sortByDescending ? 'desc' : 'asc',
+                    }}
+                  />
+                </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}>
+                <HomepageFilter
+                  filterOptions={platformTypeOptions}
+                  onChange={setPlatformTypes}
+                  placeHolder="Platform"
+                  value={platformTypes}
+                />
+              </div>
+              <div className={styles.filterLeft}>
+                <HomepageFilter
+                  filterOptions={connectionTypeOptions}
+                  onChange={setConnectionTypes}
+                  placeHolder="Connection Type"
+                  value={connectionTypes}
+                />
+              </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}>
+                <HomepageFilter<string>
+                  filterOptions={
+                    agentVersionsQuery.data?.map((v) => ({
+                      label: v,
+                      value: v,
+                    })) || []
+                  }
+                  onChange={setAgentVersions}
+                  placeHolder="Agent Version"
+                  value={agentVersions}
+                />
+              </div>
+              <button
+                type="button"
+                className={styles.clearButton}
+                onClick={clearFilter}
+              >
+                Clear all
+              </button>
+              <div className={styles.filterRight}>
+                <SortbySelector
+                  filterOptions={sortByOptions}
+                  onChange={sortOnchange}
+                  onDescending={sortOnDescending}
+                  placeHolder="Sort By"
+                  sortByDescending={sortByDescending}
+                  sortByButton={sortByButton}
+                  value={sortByState}
+                />
+              </div>
+            </div>
+            <div className="blocklist" data-cy="home-endpointList">
+              {renderItems(
+                isLoading,
+                totalCount,
+                environments.map((env) => (
+                  <EnvironmentItem
+                    key={env.Id}
+                    environment={env}
+                    groupName={
+                      groupsQuery.data?.find((g) => g.Id === env.GroupId)?.Name
+                    }
+                    onClick={onClickItem}
+                  />
+                ))
+              )}
+            </div>
+
+            <TableFooter>
+              <PaginationControls
+                showAll={totalCount <= 100}
+                pageLimit={pageLimit}
+                page={page}
+                onPageChange={setPage}
+                totalCount={totalCount}
+                onPageLimitChange={setPageLimit}
+              />
+            </TableFooter>
+          </TableContainer>
+        </div>
+      </div>
+    </>
+  );
+
+  function getEdgeDeviceFilter(connectionTypes: ConnectionType[]) {
+    // show both types of edge agent if both are selected or  if no connection type is selected
+    if (
+      connectionTypes.length === 0 ||
+      (connectionTypes.includes(ConnectionType.EdgeAgent) &&
+        connectionTypes.includes(ConnectionType.EdgeDevice))
+    ) {
+      return undefined;
    }
+
+    return connectionTypes.includes(ConnectionType.EdgeDevice);
+  }
+
+  function getTypes(
+    platformTypes: PlatformType[],
+    connectionTypes: ConnectionType[]
+  ) {
+    if (platformTypes.length === 0 && connectionTypes.length === 0) {
+      return [];
+    }
+
+    const typesByPlatform = {
+      [PlatformType.Docker]: [
+        EnvironmentType.Docker,
+        EnvironmentType.AgentOnDocker,
+        EnvironmentType.EdgeAgentOnDocker,
+      ],
+      [PlatformType.Azure]: [EnvironmentType.Azure],
+      [PlatformType.Kubernetes]: [
+        EnvironmentType.KubernetesLocal,
+        EnvironmentType.AgentOnKubernetes,
+        EnvironmentType.EdgeAgentOnKubernetes,
+      ],
+    };
+
+    const typesByConnection = {
+      [ConnectionType.API]: [
+        EnvironmentType.Azure,
+        EnvironmentType.KubernetesLocal,
+        EnvironmentType.Docker,
+      ],
+      [ConnectionType.Agent]: [
+        EnvironmentType.AgentOnDocker,
+        EnvironmentType.AgentOnKubernetes,
+      ],
+      [ConnectionType.EdgeAgent]: EdgeTypes,
+      [ConnectionType.EdgeDevice]: EdgeTypes,
+    };
+
+    const selectedTypesByPlatform = platformTypes.flatMap(
+      (platformType) => typesByPlatform[platformType]
+    );
+    const selectedTypesByConnection = connectionTypes.flatMap(
+      (connectionType) => typesByConnection[connectionType]
+    );
+
+    if (selectedTypesByPlatform.length === 0) {
+      return selectedTypesByConnection;
+    }
+
+    if (selectedTypesByConnection.length === 0) {
+      return selectedTypesByPlatform;
+    }
+
+    return _.intersection(selectedTypesByConnection, selectedTypesByPlatform);
  }

  function statusOnChange(filterOptions: Filter[]) {
@ -245,8 +447,7 @@ export function EnvironmentList({ onClickItem, onRefresh }: Props) {
  }

  function clearFilter() {
-    setPlatformState([]);
-    setPlatformType(allEnvironmentType);
+    setPlatformTypes([]);
    setStatusState([]);
    setStatusFilter([]);
    setTagState([]);
@ -267,149 +468,67 @@ export function EnvironmentList({ onClickItem, onRefresh }: Props) {
    }
  }

-  function sortOndescending() {
+  function sortOnDescending() {
    setSortByDescending(!sortByDescending);
  }
+}

-  return (
-    <>
-      {totalAvailable === 0 && <NoEnvironmentsInfoPanel isAdmin={isAdmin} />}
-      <div className="row">
-        <div className="col-sm-12">
-          <TableContainer>
-            <TableTitle icon="hard-drive" featherIcon label="Environments" />
+function getConnectionTypeOptions(platformTypes: Filter<PlatformType>[]) {
+  const platformTypeConnectionType = {
+    [PlatformType.Docker]: [
+      ConnectionType.API,
+      ConnectionType.Agent,
+      ConnectionType.EdgeAgent,
+      ConnectionType.EdgeDevice,
+    ],
+    [PlatformType.Azure]: [ConnectionType.API],
+    [PlatformType.Kubernetes]: [
+      ConnectionType.Agent,
+      ConnectionType.EdgeAgent,
+      ConnectionType.EdgeDevice,
+    ],
+  };

-            <TableActions className={styles.actionBar}>
-              <div className={styles.description}>
-                Click on an environment to manage
-              </div>
-              <div className={styles.actionButton}>
-                <div className={styles.refreshButton}>
-                  {isAdmin && (
-                    <Button
-                      onClick={onRefresh}
-                      data-cy="home-refreshEndpointsButton"
-                      className={clsx(
-                        'vertical-center',
-                        styles.refreshEnvironmentsButton
-                      )}
-                    >
-                      <RefreshCcw
-                        className="feather icon-sm icon-white"
-                        aria-hidden="true"
-                      />
-                      Refresh
-                    </Button>
-                  )}
-                </div>
-                <div className={styles.kubeconfigButton}>
-                  <KubeconfigButton
-                    environments={environments}
-                    envQueryParams={{
-                      types: platformType,
-                      search: debouncedTextFilter,
-                      status: statusFilter,
-                      tagIds: tagFilter?.length ? tagFilter : undefined,
-                      groupIds: groupFilter,
-                      sort: sortByFilter,
-                      order: sortByDescending ? 'desc' : 'asc',
-                      edgeDevice: false,
-                    }}
-                  />
-                </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}>
-                <HomepageFilter
-                  filterOptions={PlatformOptions}
-                  onChange={platformOnChange}
-                  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>
-              <button
-                type="button"
-                className={styles.clearButton}
-                onClick={clearFilter}
-              >
-                Clear all
-              </button>
-              <div className={styles.filterRight}>
-                <SortbySelector
-                  filterOptions={SortByOptions}
-                  onChange={sortOnchange}
-                  onDescending={sortOndescending}
-                  placeHolder="Sort By"
-                  sortByDescending={sortByDescending}
-                  sortByButton={sortByButton}
-                  value={sortByState}
-                />
-              </div>
-            </div>
-            <div className="blocklist" data-cy="home-endpointList">
-              {renderItems(
-                isLoading,
-                totalCount,
-                environments.map((env) => (
-                  <EnvironmentItem
-                    key={env.Id}
-                    environment={env}
-                    groupName={
-                      groupsQuery.data?.find((g) => g.Id === env.GroupId)?.Name
-                    }
-                    onClick={onClickItem}
-                  />
-                ))
-              )}
-            </div>
+  const connectionTypesDefaultOptions = [
+    { value: ConnectionType.API, label: 'API' },
+    { value: ConnectionType.Agent, label: 'Agent' },
+    { value: ConnectionType.EdgeAgent, label: 'Edge Agent' },
+    { value: ConnectionType.EdgeDevice, label: 'Edge Device' },
+  ];

-            <TableFooter>
-              <PaginationControls
-                showAll={totalCount <= 100}
-                pageLimit={pageLimit}
-                page={page}
-                onPageChange={setPage}
-                totalCount={totalCount}
-                onPageLimitChange={setPageLimit}
-              />
-            </TableFooter>
-          </TableContainer>
-        </div>
-      </div>
-    </>
+  if (platformTypes.length === 0) {
+    return connectionTypesDefaultOptions;
+  }
+
+  return _.compact(
+    _.intersection(
+      ...platformTypes.map((p) => platformTypeConnectionType[p.value])
+    ).map((c) => connectionTypesDefaultOptions.find((o) => o.value === c))
+  );
+}
+
+function getPlatformTypeOptions(connectionTypes: Filter<ConnectionType>[]) {
+  const platformDefaultOptions = [
+    { value: PlatformType.Docker, label: 'Docker' },
+    { value: PlatformType.Azure, label: 'Azure' },
+    { value: PlatformType.Kubernetes, label: 'Kubernetes' },
+  ];
+
+  if (connectionTypes.length === 0) {
+    return platformDefaultOptions;
+  }
+
+  const connectionTypePlatformType = {
+    [ConnectionType.API]: [PlatformType.Docker, PlatformType.Azure],
+    [ConnectionType.Agent]: [PlatformType.Docker, PlatformType.Kubernetes],
+    [ConnectionType.EdgeAgent]: [PlatformType.Kubernetes, PlatformType.Docker],
+    [ConnectionType.EdgeDevice]: [PlatformType.Docker, PlatformType.Kubernetes],
+  };
+
+  return _.compact(
+    _.intersection(
+      ...connectionTypes.map((p) => connectionTypePlatformType[p.value])
+    ).map((c) => platformDefaultOptions.find((o) => o.value === c))
  );
 }

--- a/app/portainer/home/EnvironmentList/KubeconfigButton/KubeconfigButton.tsx
+++ b/app/portainer/home/EnvironmentList/KubeconfigButton/KubeconfigButton.tsx
@ -2,14 +2,15 @@ import { useState } from 'react';
 import { Download } from 'react-feather';

 import { Environment } from '@/portainer/environments/types';
-import { Query } from '@/portainer/environments/queries/useEnvironmentList';
 import { isKubernetesEnvironment } from '@/portainer/environments/utils';
 import { trackEvent } from '@/angulartics.matomo/analytics-services';
+import { Query } from '@/portainer/environments/queries/useEnvironmentList';

 import { Button } from '@@/buttons';

 import styles from './KubeconfigButton.module.css';
 import { KubeconfigPrompt } from './KubeconfigPrompt';
+
 import '@reach/dialog/styles.css';

 export interface Props {
--- a/app/portainer/home/EnvironmentList/KubeconfigButton/KubeconfigPrompt.tsx
+++ b/app/portainer/home/EnvironmentList/KubeconfigButton/KubeconfigPrompt.tsx
@ -4,10 +4,12 @@ import { DialogOverlay } from '@reach/dialog';
 import * as kcService from '@/kubernetes/services/kubeconfig.service';
 import * as notifications from '@/portainer/services/notifications';
 import { EnvironmentType } from '@/portainer/environments/types';
-import { EnvironmentsQueryParams } from '@/portainer/environments/environment.service/index';
 import { usePaginationLimitState } from '@/portainer/hooks/usePaginationLimitState';
-import { useEnvironmentList } from '@/portainer/environments/queries/useEnvironmentList';
 import { usePublicSettings } from '@/portainer/settings/queries';
+import {
+  Query,
+  useEnvironmentList,
+} from '@/portainer/environments/queries/useEnvironmentList';

 import { PaginationControls } from '@@/PaginationControls';
 import { Checkbox } from '@@/form-components/Checkbox';
@ -18,7 +20,7 @@ import styles from './KubeconfigPrompt.module.css';
 import '@reach/dialog/styles.css';

 export interface KubeconfigPromptProps {
-  envQueryParams: EnvironmentsQueryParams;
+  envQueryParams: Query;
  onClose: () => void;
 }
 const storageKey = 'home_endpoints';
--- a/app/portainer/home/HomepageFilter.tsx
+++ b/app/portainer/home/HomepageFilter.tsx
@ -5,14 +5,14 @@ import { Filter } from '@/portainer/home/types';

 import { Select } from '@@/form-components/ReactSelect';

-interface Props {
-  filterOptions: Filter[];
-  onChange: (filterOptions: Filter[]) => void;
+interface Props<TValue = number> {
+  filterOptions?: Filter<TValue>[];
+  onChange: (filterOptions: Filter<TValue>[]) => void;
  placeHolder: string;
-  value: Filter[];
+  value: Filter<TValue>[];
 }

-function Option(props: OptionProps<Filter, true>) {
+function Option<TValue = number>(props: OptionProps<Filter<TValue>, true>) {
  const { isSelected, label } = props;
  return (
    <div>
@ -27,12 +27,12 @@ function Option(props: OptionProps<Filter, true>) {
  );
 }

-export function HomepageFilter({
-  filterOptions,
+export function HomepageFilter<TValue = number>({
+  filterOptions = [],
  onChange,
  placeHolder,
  value,
-}: Props) {
+}: Props<TValue>) {
  return (
    <Select
      closeMenuOnSelect={false}
@ -41,7 +41,7 @@ export function HomepageFilter({
      value={value}
      isMulti
      components={{ Option }}
-      onChange={(option) => onChange(option as Filter[])}
+      onChange={(option) => onChange([...option])}
    />
  );
 }
@ -51,27 +51,9 @@ export function useHomePageFilter<T>(
  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));
-  }
+  return useLocalStorage(filterKey, defaultValue, sessionStorage);
 }

 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;
-  }
-}
--- a/app/portainer/home/types.ts
+++ b/app/portainer/home/types.ts
@ -6,7 +6,7 @@ export interface Motd {
  ContentLayout?: Record<string, string>;
 }

-export interface Filter {
-  value: number;
+export interface Filter<T = number> {
+  value: T;
  label: string;
 }
--- a/app/react-tools/test-mocks.ts
+++ b/app/react-tools/test-mocks.ts
@ -92,5 +92,8 @@ export function createMockEnvironment(): Environment {
      enableHostManagementFeatures: false,
    },
    Gpus: [],
+    Agent: {
+      Version: '',
+    },
  };
 }
--- a/app/react/portainer/environments/wizard/EnvironmentsCreationView/shared/EdgeAgentTab/EdgeAgentForm/EdgeAgentForm.tsx
+++ b/app/react/portainer/environments/wizard/EnvironmentsCreationView/shared/EdgeAgentTab/EdgeAgentForm/EdgeAgentForm.tsx
@ -4,6 +4,7 @@ import { Environment } from '@/portainer/environments/types';
 import { useCreateEdgeAgentEnvironmentMutation } from '@/portainer/environments/queries/useCreateEnvironmentMutation';
 import { baseHref } from '@/portainer/helpers/pathHelper';
 import { EdgeCheckinIntervalField } from '@/edge/components/EdgeCheckInIntervalField';
+import { useCreateEdgeDeviceParam } from '@/react/portainer/environments/wizard/hooks/useCreateEdgeDeviceParam';

 import { FormSection } from '@@/form-components/FormSection';
 import { LoadingButton } from '@@/buttons/LoadingButton';
@ -24,6 +25,8 @@ interface Props {
 const initialValues = buildInitialValues();

 export function EdgeAgentForm({ onCreate, readonly, showGpus = false }: Props) {
+  const createEdgeDevice = useCreateEdgeDeviceParam();
+
  const createMutation = useCreateEdgeAgentEnvironmentMutation();

  return (
@ -68,11 +71,14 @@ export function EdgeAgentForm({ onCreate, readonly, showGpus = false }: Props) {
  );

  function handleSubmit(values: typeof initialValues) {
-    createMutation.mutate(values, {
-      onSuccess(environment) {
-        onCreate(environment);
-      },
-    });
+    createMutation.mutate(
+      { ...values, isEdgeDevice: createEdgeDevice },
+      {
+        onSuccess(environment) {
+          onCreate(environment);
+        },
+      }
+    );
  }
 }