feat(home): move edge device to view [EE-4559] (#8189)

Co-authored-by: matias.spinarolli <matias.spinarolli@portainer.io>
2025-08-09 15:55:23 +02:00 · 2022-12-20 23:07:34 +02:00 · 2022-12-20 23:07:34 +02:00 · 7fe0712b61
commit 7fe0712b61
parent b4a6f6911c
72 changed files with 988 additions and 1593 deletions
--- a/app/react/portainer/HomeView/EnvironmentList/AMTButton/AMTButton.tsx
+++ b/app/react/portainer/HomeView/EnvironmentList/AMTButton/AMTButton.tsx
@ -0,0 +1,55 @@
+import { Link } from 'lucide-react';
+import { useState } from 'react';
+
+import { Environment } from '@/react/portainer/environments/types';
+import { useSettings } from '@/react/portainer/settings/queries';
+import { Query } from '@/react/portainer/environments/queries/useEnvironmentList';
+import { isEdgeEnvironment } from '@/react/portainer/environments/utils';
+
+import { Button } from '@@/buttons';
+
+import { AssociateAMTDialog } from './AssociateAMTDialog';
+
+export function AMTButton({
+  environments,
+  envQueryParams,
+}: {
+  environments: Environment[];
+  envQueryParams: Query;
+}) {
+  const [isOpenDialog, setOpenDialog] = useState(false);
+  const isOpenAmtEnabledQuery = useSettings(
+    (settings) =>
+      settings.EnableEdgeComputeFeatures &&
+      settings.openAMTConfiguration.enabled
+  );
+
+  const isOpenAMTEnabled = !!isOpenAmtEnabledQuery.data;
+
+  if (!isOpenAMTEnabled) {
+    return null;
+  }
+
+  const edgeEnvironments = environments.filter((env) =>
+    isEdgeEnvironment(env.Type)
+  );
+
+  return (
+    <>
+      <Button onClick={openDialog} icon={Link} color="light">
+        Associate with OpenAMT
+      </Button>
+      {isOpenDialog && (
+        <AssociateAMTDialog
+          selectedItems={edgeEnvironments.map((env) => env.Id)}
+          onClose={() => setOpenDialog(false)}
+          envQueryParams={envQueryParams}
+        />
+      )}
+    </>
+  );
+
+  function openDialog() {
+    setOpenDialog(true);
+  }
+}
--- a/app/react/portainer/HomeView/EnvironmentList/AMTButton/AssociateAMTDialog.tsx
+++ b/app/react/portainer/HomeView/EnvironmentList/AMTButton/AssociateAMTDialog.tsx
@ -0,0 +1,118 @@
+import { useState } from 'react';
+import clsx from 'clsx';
+
+import { useActivateDevicesMutation } from '@/react/edge/edge-devices/open-amt/useActivateDevicesMutation';
+import { usePaginationLimitState } from '@/react/hooks/usePaginationLimitState';
+import { Query } from '@/react/portainer/environments/queries/useEnvironmentList';
+import { EdgeTypes, Environment } from '@/react/portainer/environments/types';
+import { useEnvironmentList } from '@/react/portainer/environments/queries';
+import { useListSelection } from '@/react/hooks/useListSelection';
+
+import { Checkbox } from '@@/form-components/Checkbox';
+import { Modal } from '@@/modals/Modal';
+import { PaginationControls } from '@@/PaginationControls';
+import { Button, LoadingButton } from '@@/buttons';
+
+interface Props {
+  envQueryParams: Query;
+  onClose: () => void;
+  selectedItems: Array<Environment['Id']>;
+}
+
+const storageKey = 'home_endpoints';
+
+export function AssociateAMTDialog({
+  selectedItems,
+  onClose,
+  envQueryParams,
+}: Props) {
+  const activateDeviceMutation = useActivateDevicesMutation();
+  const [page, setPage] = useState(1);
+  const [pageLimit, setPageLimit] = usePaginationLimitState(storageKey);
+
+  const [selection, toggleSelection] =
+    useListSelection<Environment['Id']>(selectedItems);
+
+  const { environments, totalCount, isLoading } = useEnvironmentList({
+    ...envQueryParams,
+    page,
+    pageLimit,
+    types: EdgeTypes,
+  });
+  const isAllPageSelected =
+    !isLoading && environments.every((env) => selection.includes(env.Id));
+
+  return (
+    <Modal onDismiss={onClose} aria-label="Associate with OpenAMT">
+      <Modal.Header title="Associate with OpenAMT" />
+      <Modal.Body>
+        <span>
+          Select the environments to add to associate to OpenAMT. You may select
+          across multiple pages.
+        </span>
+        <div className="h-8 flex items-center">
+          <Checkbox
+            id="settings-container-truncate-name"
+            label="Select all (in this page)"
+            checked={isAllPageSelected}
+            onChange={handleSelectAll}
+          />
+        </div>
+        <div className="datatable">
+          <div className="bootbox-checkbox-list">
+            {environments.map((env) => (
+              <div
+                key={env.Id}
+                className={clsx('h-8 flex items-center pt-1 pl-2')}
+              >
+                <Checkbox
+                  id={`${env.Id}`}
+                  label={`${env.Name} (${env.URL})`}
+                  checked={selection.includes(env.Id)}
+                  onChange={() =>
+                    toggleSelection(env.Id, !selection.includes(env.Id))
+                  }
+                />
+              </div>
+            ))}
+          </div>
+          <div className="pt-3 flex justify-end w-full">
+            <PaginationControls
+              showAll={totalCount <= 100}
+              page={page}
+              onPageChange={setPage}
+              pageLimit={pageLimit}
+              onPageLimitChange={setPageLimit}
+              totalCount={totalCount}
+            />
+          </div>
+        </div>
+      </Modal.Body>
+      <Modal.Footer>
+        <Button onClick={onClose} color="default">
+          Cancel
+        </Button>
+        <LoadingButton
+          onClick={handleSubmit}
+          disabled={selection.length === 0}
+          loadingText="Associating..."
+          isLoading={activateDeviceMutation.isLoading}
+        >
+          Associate Devices
+        </LoadingButton>
+      </Modal.Footer>
+    </Modal>
+  );
+
+  function handleSelectAll() {
+    environments.forEach((env) => toggleSelection(env.Id, !isAllPageSelected));
+  }
+
+  function handleSubmit() {
+    activateDeviceMutation.mutate(selection, {
+      onSuccess() {
+        onClose();
+      },
+    });
+  }
+}
--- a/app/react/portainer/HomeView/EnvironmentList/EnvironmentItem/AgentDetails.tsx
+++ b/app/react/portainer/HomeView/EnvironmentList/EnvironmentItem/AgentDetails.tsx
@ -0,0 +1,22 @@
+import { Globe } from 'lucide-react';
+
+import { Environment } from '@/react/portainer/environments/types';
+import { isAgentEnvironment } from '@/react/portainer/environments/utils';
+
+export function AgentDetails({ environment }: { environment: Environment }) {
+  if (!isAgentEnvironment(environment.Type)) {
+    return null;
+  }
+
+  return (
+    <>
+      <span>{environment.Agent.Version}</span>
+      {environment.Edge.AsyncMode && (
+        <span className="vertical-center gap-1">
+          <Globe className="icon icon-sm space-right" aria-hidden="true" />
+          Async Environment
+        </span>
+      )}
+    </>
+  );
+}
--- a/app/react/portainer/HomeView/EnvironmentList/EnvironmentItem/AgentVersionTag.tsx
+++ b/app/react/portainer/HomeView/EnvironmentList/EnvironmentItem/AgentVersionTag.tsx
@ -1,28 +0,0 @@
-import { Zap } from 'lucide-react';
-
-import { EnvironmentType } from '@/react/portainer/environments/types';
-import {
-  isAgentEnvironment,
-  isEdgeEnvironment,
-} from '@/react/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">
-      <Zap className="icon icon-xs vertical-center" aria-hidden="true" />
-
-      <span>{isEdgeEnvironment(type) ? 'Edge Agent' : 'Agent'}</span>
-
-      <span>{version}</span>
-    </span>
-  );
-}
--- a/app/react/portainer/HomeView/EnvironmentList/EnvironmentItem/EditButtons.tsx
+++ b/app/react/portainer/HomeView/EnvironmentList/EnvironmentItem/EditButtons.tsx
@ -21,11 +21,11 @@ export function EditButtons({ environment }: { environment: Environment }) {

  const configRoute = getConfigRoute(environment);
  return (
-    <ButtonsGrid className="w-11 -m-[11px] ml-3">
+    <ButtonsGrid className="w-11 ml-3">
      <LinkButton
        disabled={!isAdmin}
        to="portainer.endpoints.endpoint"
-        params={{ id: environment.Id }}
+        params={{ id: environment.Id, redirectTo: 'portainer.home' }}
        color="none"
        icon={Edit2}
        size="medium"
@ -79,15 +79,21 @@ function ButtonsGrid({
  return (
    <div
      className={clsx(
-        'grid grid-rows-3 border border-solid border-gray-5 rounded-r-lg',
+        'grid border border-solid border-gray-5 rounded-r-lg',
        className
      )}
    >
-      <div>{children[0] || null}</div>
-      <div className="border-x-0 border-y border-gray-5 border-solid">
-        {children[1] || null}
-      </div>
-      <div>{children[2] || null}</div>
+      {children.map((child, index) => (
+        <div
+          key={index}
+          className={clsx({
+            'border-0 border-b border-solid border-b-gray-5':
+              index < children.length - 1,
+          })}
+        >
+          {child}
+        </div>
+      ))}
    </div>
  );
 }
--- a/app/react/portainer/HomeView/EnvironmentList/EnvironmentItem/EnvironmentBrowseButtons.tsx
+++ b/app/react/portainer/HomeView/EnvironmentList/EnvironmentItem/EnvironmentBrowseButtons.tsx
@ -11,6 +11,7 @@ import { Icon } from '@@/Icon';
 import { LinkButton } from '@@/LinkButton';

 type BrowseStatus = 'snapshot' | 'connected' | 'disconnected';
+
 export function EnvironmentBrowseButtons({
  environment,
  onClickBrowse,
@ -23,7 +24,7 @@ export function EnvironmentBrowseButtons({
  const isEdgeAsync = checkEdgeAsync(environment);
  const browseStatus = getStatus(isActive, isEdgeAsync);
  return (
-    <div className="flex flex-col gap-1 ml-auto [&>*]:flex-1">
+    <div className="flex flex-col gap-1 justify-center [&>*]:h-1/3 h-24">
      {isBE && (
        <LinkButton
          icon={History}
@ -33,13 +34,14 @@ export function EnvironmentBrowseButtons({
            environmentId: environment.Id,
          }}
          color="light"
-          className="w-full py-1"
+          className="w-full !py-0 !m-0"
        >
          Browse snapshot
        </LinkButton>
      )}

      <LinkButton
+        title="Live connection is not available for async environments"
        icon={Wifi}
        disabled={isEdgeAsync || browseStatus === 'connected'}
        to={getDashboardRoute(environment)}
@ -48,7 +50,7 @@ export function EnvironmentBrowseButtons({
        }}
        onClick={onClickBrowse}
        color="primary"
-        className="w-full py-1"
+        className="w-full !py-0 !m-0"
      >
        Live connect
      </LinkButton>
@ -85,7 +87,7 @@ function BrowseStatusTag({ status }: { status: BrowseStatus }) {

 function Disconnected() {
  return (
-    <div className="min-h-[30px] vertical-center justify-center opacity-50">
+    <div className="vertical-center justify-center opacity-50">
      <Icon icon={WifiOff} />
      Disconnected
    </div>
@ -94,7 +96,7 @@ function Disconnected() {

 function Connected() {
  return (
-    <div className="min-h-[30px] vertical-center gap-2 justify-center text-green-8 bg-green-3 rounded-lg">
+    <div className="vertical-center gap-2 justify-center text-green-8 bg-green-3 rounded-lg">
      <div className="rounded-full h-2 w-2 bg-green-8" />
      Connected
    </div>
@ -103,7 +105,7 @@ function Connected() {

 function Snapshot() {
  return (
-    <div className="min-h-[30px] vertical-center gap-2 justify-center text-warning-7 bg-warning-3 rounded-lg">
+    <div className="vertical-center gap-2 justify-center text-warning-7 bg-warning-3 rounded-lg">
      <div className="rounded-full h-2 w-2 bg-warning-7" />
      Browsing Snapshot
    </div>
--- a/app/react/portainer/HomeView/EnvironmentList/EnvironmentItem/EnvironmentItem.tsx
+++ b/app/react/portainer/HomeView/EnvironmentList/EnvironmentItem/EnvironmentItem.tsx
@ -1,5 +1,5 @@
 import _ from 'lodash';
-import { Tag, Globe, Activity } from 'lucide-react';
+import { Tag, Activity } from 'lucide-react';

 import {
  isoDateFromTimestamp,
@ -24,9 +24,10 @@ import { Link } from '@@/Link';
 import { EnvironmentIcon } from './EnvironmentIcon';
 import { EnvironmentStats } from './EnvironmentStats';
 import { EngineVersion } from './EngineVersion';
-import { AgentVersionTag } from './AgentVersionTag';
+import { EnvironmentTypeTag } from './EnvironmentTypeTag';
 import { EnvironmentBrowseButtons } from './EnvironmentBrowseButtons';
 import { EditButtons } from './EditButtons';
+import { AgentDetails } from './AgentDetails';

 interface Props {
  environment: Environment;
@ -48,84 +49,82 @@ export function EnvironmentItem({
  const tags = useEnvironmentTagNames(environment.TagIds);

  return (
-    <Link
-      to={getDashboardRoute(environment)}
-      params={{
-        endpointId: environment.Id,
-        environmentId: environment.Id,
-      }}
-      className="no-link"
-    >
-      <button
-        className="blocklist-item flex items-stretch overflow-hidden min-h-[100px] bg-transparent w-full"
-        onClick={onClickBrowse}
-        type="button"
+    <div className="relative">
+      <Link
+        to={getDashboardRoute(environment)}
+        params={{
+          endpointId: environment.Id,
+          environmentId: environment.Id,
+        }}
+        className="no-link"
      >
-        <div className="ml-2 self-center flex justify-center">
-          <EnvironmentIcon type={environment.Type} />
-        </div>
-        <div className="ml-3 mr-auto flex justify-center gap-3 flex-col items-start">
-          <div className="flex flex-wrap items-center gap-x-4 gap-y-2">
-            <span className="font-bold">{environment.Name}</span>
-            {isEdge ? (
-              <EdgeIndicator environment={environment} showLastCheckInDate />
-            ) : (
-              <>
-                <EnvironmentStatusBadge status={environment.Status} />
-                {snapshotTime && (
-                  <span
-                    className="small text-muted vertical-center gap-1"
-                    title="Last snapshot time"
-                  >
-                    <Activity className="icon icon-sm" aria-hidden="true" />
-                    {snapshotTime}
-                  </span>
-                )}
-              </>
-            )}
-            <EngineVersion environment={environment} />
-            {!isEdge && (
-              <span className="text-muted small vertical-center">
-                {stripProtocol(environment.URL)}
-              </span>
-            )}
+        <button
+          className="blocklist-item flex items-stretch overflow-hidden min-h-[110px] bg-transparent w-full !m-0 !pr-56"
+          onClick={onClickBrowse}
+          type="button"
+        >
+          <div className="ml-2 self-center flex justify-center">
+            <EnvironmentIcon type={environment.Type} />
          </div>
-          <div className="small text-muted flex flex-wrap items-center gap-x-4 gap-y-2">
-            {groupName && (
-              <span className="font-semibold">
-                <span>Group: </span>
-                <span>{groupName}</span>
+          <div className="ml-3 mr-auto flex justify-center gap-3 flex-col items-start">
+            <div className="flex flex-wrap items-center gap-x-4 gap-y-2">
+              <span className="font-bold">{environment.Name}</span>
+              {isEdge ? (
+                <EdgeIndicator environment={environment} showLastCheckInDate />
+              ) : (
+                <>
+                  <EnvironmentStatusBadge status={environment.Status} />
+                  {snapshotTime && (
+                    <span
+                      className="small text-muted vertical-center gap-1"
+                      title="Last snapshot time"
+                    >
+                      <Activity className="icon icon-sm" aria-hidden="true" />
+                      {snapshotTime}
+                    </span>
+                  )}
+                </>
+              )}
+              <EngineVersion environment={environment} />
+              {!isEdge && (
+                <span className="text-muted small vertical-center">
+                  {stripProtocol(environment.URL)}
+                </span>
+              )}
+            </div>
+            <div className="small text-muted flex flex-wrap items-center gap-x-4 gap-y-2">
+              {groupName && (
+                <span className="font-semibold">
+                  <span>Group: </span>
+                  <span>{groupName}</span>
+                </span>
+              )}
+              <span className="vertical-center gap-1">
+                <Tag className="icon icon-sm" aria-hidden="true" />
+                {tags}
              </span>
-            )}
-            <span className="vertical-center gap-1">
-              <Tag className="icon icon-sm" aria-hidden="true" />
-              {tags}
-            </span>
-            {isEdge && (
-              <>
-                <AgentVersionTag
-                  type={environment.Type}
-                  version={environment.Agent.Version}
-                />
-                {environment.Edge.AsyncMode && (
-                  <span className="vertical-center gap-1">
-                    <Globe className="icon icon-sm" aria-hidden="true" />
-                    Async Environment
-                  </span>
-                )}
-              </>
-            )}
+              <EnvironmentTypeTag environment={environment} />
+              <AgentDetails environment={environment} />
+            </div>
+            <EnvironmentStats environment={environment} />
          </div>
-          <EnvironmentStats environment={environment} />
+        </button>
+      </Link>
+      {/* 
+      Buttons are extracted out of the main button because it causes errors with react and accessibility issues
+      see https://stackoverflow.com/questions/66409964/warning-validatedomnesting-a-cannot-appear-as-a-descendant-of-a
+      */}
+      <div className="absolute inset-y-0 right-0 flex justify-end w-56">
+        <div className="py-3 flex items-center">
+          <EnvironmentBrowseButtons
+            environment={environment}
+            onClickBrowse={onClickBrowse}
+            isActive={isActive}
+          />
        </div>
-        <EnvironmentBrowseButtons
-          environment={environment}
-          onClickBrowse={onClickBrowse}
-          isActive={isActive}
-        />
        <EditButtons environment={environment} />
-      </button>
-    </Link>
+      </div>
+    </div>
  );
 }

--- a/app/react/portainer/HomeView/EnvironmentList/EnvironmentItem/EnvironmentStatsDocker.tsx
+++ b/app/react/portainer/HomeView/EnvironmentList/EnvironmentItem/EnvironmentStatsDocker.tsx
@ -1,16 +1,19 @@
 import {
-  Layers,
-  Shuffle,
-  Database,
-  List,
-  HardDrive,
  Box,
-  Power,
+  Cpu,
+  Database,
+  HardDrive,
  Heart,
+  Layers,
+  List,
+  Power,
+  Shuffle,
 } from 'lucide-react';

+import Memory from '@/assets/ico/memory.svg?c';
 import { addPlural } from '@/portainer/helpers/strings';
 import { DockerSnapshot } from '@/react/docker/snapshots/types';
+import { humanize } from '@/portainer/filters/filters';

 import { StatsItem } from '@@/StatsItem';

@ -49,6 +52,13 @@ export function EnvironmentStatsDocker({ snapshot }: Props) {
      />
      <StatsItem value={addPlural(snapshot.ImageCount, 'image')} icon={List} />

+      <StatsItem icon={Cpu} value={`${snapshot.TotalCPU} CPU`} />
+
+      <StatsItem
+        icon={Memory}
+        value={`${humanize(snapshot.TotalMemory)} RAM`}
+      />
+
      {snapshot.Swarm && (
        <StatsItem
          value={addPlural(snapshot.NodeCount, 'node')}
--- a/app/react/portainer/HomeView/EnvironmentList/EnvironmentItem/EnvironmentTypeTag.tsx
+++ b/app/react/portainer/HomeView/EnvironmentList/EnvironmentItem/EnvironmentTypeTag.tsx
@ -0,0 +1,55 @@
+import { Zap } from 'lucide-react';
+
+import {
+  Environment,
+  EnvironmentType,
+} from '@/react/portainer/environments/types';
+import {
+  isEdgeEnvironment,
+  isLocalEnvironment,
+  isAgentEnvironment,
+} from '@/react/portainer/environments/utils';
+
+export function EnvironmentTypeTag({
+  environment,
+}: {
+  environment: Environment;
+}) {
+  const typeLabel = getTypeLabel(environment);
+
+  if (!typeLabel) {
+    return null;
+  }
+
+  return (
+    <span className="vertical-center gap-1">
+      <Zap className="icon icon-xs vertical-center" aria-hidden="true" />
+
+      <span>{typeLabel}</span>
+    </span>
+  );
+}
+
+function getTypeLabel(environment: Environment) {
+  if (environment.IsEdgeDevice) {
+    return 'Edge Device';
+  }
+
+  if (isEdgeEnvironment(environment.Type)) {
+    return 'Edge Agent';
+  }
+
+  if (isLocalEnvironment(environment)) {
+    return 'Local';
+  }
+
+  if (environment.Type === EnvironmentType.Azure) {
+    return 'ACI';
+  }
+
+  if (isAgentEnvironment(environment.Type)) {
+    return 'Agent';
+  }
+
+  return '';
+}
--- a/app/react/portainer/HomeView/EnvironmentList/EnvironmentList.module.css
+++ b/app/react/portainer/HomeView/EnvironmentList/EnvironmentList.module.css
@ -23,17 +23,11 @@
 }

 .filter-left {
-  margin-left: 10px;
-  padding: 10px 0px;
  width: 15%;
-  display: inline-block;
 }

 .filter-right {
-  padding: 10px;
  width: 20%;
-  right: 0;
-  display: inline-block;
  margin-left: auto;
 }

@ -48,9 +42,9 @@
  white-space: nowrap;

  border: 0px;
-  padding: 10px;

  background: transparent;
+  margin: 0;
 }

 .action-button {
--- a/app/react/portainer/HomeView/EnvironmentList/EnvironmentList.tsx
+++ b/app/react/portainer/HomeView/EnvironmentList/EnvironmentList.tsx
@ -1,5 +1,4 @@
 import { ReactNode, useEffect, useState } from 'react';
-import clsx from 'clsx';
 import { HardDrive, RefreshCcw } from 'lucide-react';
 import _ from 'lodash';
 import { useStore } from 'zustand';
@ -13,72 +12,48 @@ import {
  EdgeTypes,
 } from '@/react/portainer/environments/types';
 import { EnvironmentGroupId } from '@/react/portainer/environments/environment-groups/types';
-import { useDebouncedValue } from '@/react/hooks/useDebouncedValue';
 import {
  refetchIfAnyOffline,
  useEnvironmentList,
 } from '@/react/portainer/environments/queries/useEnvironmentList';
 import { useGroups } from '@/react/portainer/environments/environment-groups/queries';
-import { useTags } from '@/portainer/tags/queries';
-import { useAgentVersionsList } from '@/react/portainer/environments/queries/useAgentVersionsList';
 import { EnvironmentsQueryParams } from '@/react/portainer/environments/environment.service';
 import { useUser } from '@/react/hooks/useUser';
 import { isBE } from '@/react/portainer/feature-flags/feature-flags.service';
 import { environmentStore } from '@/react/hooks/current-environment-store';

 import { TableFooter } from '@@/datatables/TableFooter';
-import { TableActions, TableContainer, TableTitle } from '@@/datatables';
-import {
-  FilterSearchBar,
-  useSearchBarState,
-} from '@@/datatables/FilterSearchBar';
+import { TableContainer, TableTitle } from '@@/datatables';
 import { Button } from '@@/buttons';
 import { PaginationControls } from '@@/PaginationControls';
+import { SearchBar, useSearchBarState } from '@@/datatables/SearchBar';

-import { SortbySelector } from './SortbySelector';
-import { HomepageFilter, useHomePageFilter } from './HomepageFilter';
-import { Filter } from './types';
+import { useHomePageFilter } from './HomepageFilter';
+import { ConnectionType, Filter } from './types';
 import { EnvironmentItem } from './EnvironmentItem';
 import { KubeconfigButton } from './KubeconfigButton';
 import { NoEnvironmentsInfoPanel } from './NoEnvironmentsInfoPanel';
-import styles from './EnvironmentList.module.css';
 import { UpdateBadge } from './UpdateBadge';
+import { EnvironmentListFilters } from './EnvironmentListFilters';
+import { AMTButton } from './AMTButton/AMTButton';

 interface Props {
  onClickBrowse(environment: Environment): void;
  onRefresh(): void;
 }

-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' },
-];
-
-enum ConnectionType {
-  API,
-  Agent,
-  EdgeAgent,
-  EdgeDevice,
-}
-
 const storageKey = 'home_endpoints';

 export function EnvironmentList({ onClickBrowse, onRefresh }: Props) {
  const { isAdmin } = useUser();
  const { environmentId: currentEnvironmentId } = useStore(environmentStore);
+
  const [platformTypes, setPlatformTypes] = useHomePageFilter<
    Filter<PlatformType>[]
  >('platformType', []);
  const [searchBarValue, setSearchBarValue] = useSearchBarState(storageKey);
  const [pageLimit, setPageLimit] = usePaginationLimitState(storageKey);
  const [page, setPage] = useState(1);
-  const debouncedTextFilter = useDebouncedValue(searchBarValue);

  const [connectionTypes, setConnectionTypes] = useHomePageFilter<
    Filter<ConnectionType>[]
@ -127,18 +102,21 @@ export function EnvironmentList({ onClickBrowse, onRefresh }: Props) {
      platformTypes.map((p) => p.value),
      connectionTypes.map((p) => p.value)
    ),
-    search: debouncedTextFilter,
+    search: searchBarValue,
    status: statusFilter,
    tagIds: tagFilter?.length ? tagFilter : undefined,
    groupIds: groupFilter,
    provisioned: true,
-    edgeDevice: false,
    tagsPartialMatch: true,
    agentVersions: agentVersions.map((a) => a.value),
    updateInformation: isBE,
  };

-  const tagsQuery = useTags();
+  const queryWithSort = {
+    ...environmentsQueryParams,
+    sort: sortByFilter,
+    order: sortByDescending ? 'desc' : ('asc' as 'desc' | 'asc'),
+  };

  const {
    isLoading,
@ -150,193 +128,122 @@ export function EnvironmentList({ onClickBrowse, onRefresh }: Props) {
    {
      page,
      pageLimit,
-      sort: sortByFilter,
-      order: sortByDescending ? 'desc' : 'asc',
-      ...environmentsQueryParams,
+      ...queryWithSort,
    },
    refetchIfAnyOffline
  );

-  const agentVersionsQuery = useAgentVersionsList();
-
  useEffect(() => {
    setPage(1);
  }, [searchBarValue]);

-  const groupOptions = [...(groupsQuery.data || [])];
-  const uniqueGroup = [
-    ...new Map(groupOptions.map((item) => [item.Id, item])).values(),
-  ].map(({ Id: value, Name: label }) => ({
-    value,
-    label,
-  }));
-
-  const tagOptions = [...(tagsQuery.tags || [])];
-  const uniqueTag = [
-    ...new Map(tagOptions.map((item) => [item.ID, item])).values(),
-  ].map(({ ID: value, Name: label }) => ({
-    value,
-    label,
-  }));
-
-  const connectionTypeOptions = getConnectionTypeOptions(platformTypes);
-  const platformTypeOptions = getPlatformTypeOptions(connectionTypes);
-
  return (
    <>
      {totalAvailable === 0 && <NoEnvironmentsInfoPanel isAdmin={isAdmin} />}
-      <TableContainer>
-        <TableTitle icon={HardDrive} label="Environments">
-          {isBE && updateAvailable && <UpdateBadge />}
-        </TableTitle>
-
-        <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"
-                  size="medium"
-                  color="secondary"
-                  className={clsx(
-                    'vertical-center !ml-0',
-                    styles.refreshEnvironmentsButton
-                  )}
-                >
-                  <RefreshCcw
-                    className="lucide 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={clsx(styles.filterSearchbar, 'ml-3')}>
-              <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
+      <div className="row">
+        <div className="col-sm-12">
+          <TableContainer>
+            <div className="px-4">
+              <TableTitle
+                className="!px-0"
+                icon={HardDrive}
+                label="Environments"
+                description={
+                  <div className="w-full text-sm text-gray-7">
+                    Click on an environment to manage
+                  </div>
                }
-                onClickBrowse={() => onClickBrowse(env)}
-                isActive={env.Id === currentEnvironmentId}
-              />
-            ))
-          )}
-        </div>
+              >
+                <div className="flex gap-4">
+                  <SearchBar
+                    className="!bg-transparent !m-0"
+                    value={searchBarValue}
+                    onChange={setSearchBarValue}
+                    placeholder="Search by name, group, tag, status, URL..."
+                    data-cy="home-endpointsSearchInput"
+                  />
+                  {isAdmin && (
+                    <Button
+                      onClick={onRefresh}
+                      data-cy="home-refreshEndpointsButton"
+                      size="medium"
+                      color="light"
+                      icon={RefreshCcw}
+                      className="!m-0"
+                    >
+                      Refresh
+                    </Button>
+                  )}
+                  <KubeconfigButton
+                    environments={environments}
+                    envQueryParams={queryWithSort}
+                  />

-        <TableFooter>
-          <PaginationControls
-            showAll={totalCount <= 100}
-            pageLimit={pageLimit}
-            page={page}
-            onPageChange={setPage}
-            totalCount={totalCount}
-            onPageLimitChange={setPageLimit}
-          />
-        </TableFooter>
-      </TableContainer>
+                  <AMTButton
+                    environments={environments}
+                    envQueryParams={queryWithSort}
+                  />
+
+                  {updateAvailable && <UpdateBadge />}
+                </div>
+              </TableTitle>
+              <div className="-mt-3">
+                <EnvironmentListFilters
+                  setPlatformTypes={setPlatformTypes}
+                  platformTypes={platformTypes}
+                  setConnectionTypes={setConnectionTypes}
+                  connectionTypes={connectionTypes}
+                  statusOnChange={statusOnChange}
+                  statusState={statusState}
+                  tagOnChange={tagOnChange}
+                  tagState={tagState}
+                  groupOnChange={groupOnChange}
+                  groupState={groupState}
+                  setAgentVersions={setAgentVersions}
+                  agentVersions={agentVersions}
+                  clearFilter={clearFilter}
+                  sortOnchange={sortOnchange}
+                  sortOnDescending={sortOnDescending}
+                  sortByDescending={sortByDescending}
+                  sortByButton={sortByButton}
+                  sortByState={sortByState}
+                />
+              </div>
+              <div
+                className="blocklist !p-0 mt-5 !space-y-2"
+                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
+                      }
+                      onClickBrowse={() => onClickBrowse(env)}
+                      isActive={env.Id === currentEnvironmentId}
+                    />
+                  ))
+                )}
+              </div>
+              <TableFooter>
+                <PaginationControls
+                  showAll={totalCount <= 100}
+                  pageLimit={pageLimit}
+                  page={page}
+                  onPageChange={setPage}
+                  totalCount={totalCount}
+                  onPageLimitChange={setPageLimit}
+                />
+              </TableFooter>
+            </div>
+          </TableContainer>
+        </div>
+      </div>
    </>
  );

@ -472,80 +379,6 @@ export function EnvironmentList({ onClickBrowse, onRefresh }: Props) {
  }
 }

-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,
-    ],
-    [PlatformType.Nomad]: [ConnectionType.EdgeAgent, ConnectionType.EdgeDevice],
-  };
-
-  const connectionTypesDefaultOptions = [
-    { value: ConnectionType.API, label: 'API' },
-    { value: ConnectionType.Agent, label: 'Agent' },
-    { value: ConnectionType.EdgeAgent, label: 'Edge Agent' },
-  ];
-
-  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 (isBE) {
-    platformDefaultOptions.push({
-      value: PlatformType.Nomad,
-      label: 'Nomad',
-    });
-  }
-
-  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.Nomad,
-      PlatformType.Docker,
-    ],
-    [ConnectionType.EdgeDevice]: [
-      PlatformType.Nomad,
-      PlatformType.Docker,
-      PlatformType.Kubernetes,
-    ],
-  };
-
-  return _.compact(
-    _.intersection(
-      ...connectionTypes.map((p) => connectionTypePlatformType[p.value])
-    ).map((c) => platformDefaultOptions.find((o) => o.value === c))
-  );
-}
-
 function renderItems(
  isLoading: boolean,
  totalCount: number,
--- a/app/react/portainer/HomeView/EnvironmentList/EnvironmentListFilters.tsx
+++ b/app/react/portainer/HomeView/EnvironmentList/EnvironmentListFilters.tsx
@ -0,0 +1,246 @@
+import _ from 'lodash';
+
+import { useTags } from '@/portainer/tags/queries';
+
+import { useAgentVersionsList } from '../../environments/queries/useAgentVersionsList';
+import { EnvironmentStatus, PlatformType } from '../../environments/types';
+import { isBE } from '../../feature-flags/feature-flags.service';
+import { useGroups } from '../../environments/environment-groups/queries';
+
+import { HomepageFilter } from './HomepageFilter';
+import { SortbySelector } from './SortbySelector';
+import { ConnectionType, Filter } from './types';
+import styles from './EnvironmentList.module.css';
+
+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' },
+];
+
+export function EnvironmentListFilters({
+  agentVersions,
+  clearFilter,
+  connectionTypes,
+  groupOnChange,
+  groupState,
+  platformTypes,
+  setAgentVersions,
+  setConnectionTypes,
+  setPlatformTypes,
+  sortByButton,
+  sortByDescending,
+  sortByState,
+  sortOnDescending,
+  sortOnchange,
+  statusOnChange,
+  statusState,
+  tagOnChange,
+  tagState,
+}: {
+  platformTypes: Filter<PlatformType>[];
+  setPlatformTypes: (value: Filter<PlatformType>[]) => void;
+
+  connectionTypes: Filter<ConnectionType>[];
+  setConnectionTypes: (value: Filter<ConnectionType>[]) => void;
+
+  statusState: Filter<number>[];
+  statusOnChange: (filterOptions: Filter[]) => void;
+
+  tagOnChange: (filterOptions: Filter[]) => void;
+  tagState: Filter<number>[];
+
+  groupOnChange: (filterOptions: Filter[]) => void;
+  groupState: Filter<number>[];
+
+  setAgentVersions: (value: Filter<string>[]) => void;
+  agentVersions: Filter<string>[];
+
+  sortByState: Filter<number> | undefined;
+  sortOnchange: (filterOptions: Filter) => void;
+
+  sortOnDescending: () => void;
+  sortByDescending: boolean;
+
+  sortByButton: boolean;
+
+  clearFilter: () => void;
+}) {
+  const agentVersionsQuery = useAgentVersionsList();
+  const connectionTypeOptions = getConnectionTypeOptions(platformTypes);
+  const platformTypeOptions = getPlatformTypeOptions(connectionTypes);
+
+  const groupsQuery = useGroups();
+  const groupOptions = [...(groupsQuery.data || [])];
+  const uniqueGroup = [
+    ...new Map(groupOptions.map((item) => [item.Id, item])).values(),
+  ].map(({ Id: value, Name: label }) => ({
+    value,
+    label,
+  }));
+
+  const tagsQuery = useTags();
+  const tagOptions = [...(tagsQuery.tags || [])];
+  const uniqueTag = [
+    ...new Map(tagOptions.map((item) => [item.ID, item])).values(),
+  ].map(({ ID: value, Name: label }) => ({
+    value,
+    label,
+  }));
+
+  return (
+    <div className="flex gap-2">
+      <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>
+  );
+}
+
+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,
+    ],
+    [PlatformType.Nomad]: [ConnectionType.EdgeAgent, ConnectionType.EdgeDevice],
+  };
+
+  const connectionTypesDefaultOptions = [
+    { value: ConnectionType.API, label: 'API' },
+    { value: ConnectionType.Agent, label: 'Agent' },
+    { value: ConnectionType.EdgeAgent, label: 'Edge Agent' },
+  ];
+
+  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 (isBE) {
+    platformDefaultOptions.push({
+      value: PlatformType.Nomad,
+      label: 'Nomad',
+    });
+  }
+
+  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.Nomad,
+      PlatformType.Docker,
+    ],
+    [ConnectionType.EdgeDevice]: [
+      PlatformType.Nomad,
+      PlatformType.Docker,
+      PlatformType.Kubernetes,
+    ],
+  };
+
+  return _.compact(
+    _.intersection(
+      ...connectionTypes.map((p) => connectionTypePlatformType[p.value])
+    ).map((c) => platformDefaultOptions.find((o) => o.value === c))
+  );
+}
--- a/app/react/portainer/HomeView/EnvironmentList/KubeconfigButton/KubeconfigButton.tsx
+++ b/app/react/portainer/HomeView/EnvironmentList/KubeconfigButton/KubeconfigButton.tsx
@ -28,11 +28,12 @@ export function KubeconfigButton({ environments, envQueryParams }: Props) {
      <Button
        onClick={handleClick}
        size="medium"
-        className="!ml-3"
+        className="!m-0"
        disabled={environments.some(
          (env) => !isKubernetesEnvironment(env.Type)
        )}
        icon={Download}
+        color="light"
      >
        Kubeconfig
      </Button>
--- a/app/react/portainer/HomeView/EnvironmentList/SortbySelector.tsx
+++ b/app/react/portainer/HomeView/EnvironmentList/SortbySelector.tsx
@ -27,29 +27,26 @@ export function SortbySelector({
 }: Props) {
  const sorted = sortByButton && !!value;
  return (
-    <div className={styles.sortByContainer}>
-      <div className={styles.sortByElement}>
-        <Select
-          placeholder={placeHolder}
-          options={filterOptions}
-          onChange={(option) => onChange(option as Filter)}
-          isClearable
-          value={value}
-        />
-      </div>
-      <div className={styles.sortByElement}>
-        <button
-          className={clsx(styles.sortButton, 'h-[34px]')}
-          type="button"
-          disabled={!sorted}
-          onClick={(e) => {
-            e.preventDefault();
-            onDescending();
-          }}
-        >
-          <TableHeaderSortIcons sorted={sorted} descending={sortByDescending} />
-        </button>
-      </div>
+    <div className="flex items-center gap-1 justify-end">
+      <Select
+        placeholder={placeHolder}
+        options={filterOptions}
+        onChange={(option) => onChange(option as Filter)}
+        isClearable
+        value={value}
+      />
+
+      <button
+        className={clsx(styles.sortButton, 'h-[34px] !m-0')}
+        type="button"
+        disabled={!sorted}
+        onClick={(e) => {
+          e.preventDefault();
+          onDescending();
+        }}
+      >
+        <TableHeaderSortIcons sorted={sorted} descending={sortByDescending} />
+      </button>
    </div>
  );
 }
--- a/app/react/portainer/HomeView/EnvironmentList/types.ts
+++ b/app/react/portainer/HomeView/EnvironmentList/types.ts
@ -2,3 +2,10 @@ export interface Filter<T = number> {
  value: T;
  label: string;
 }
+
+export enum ConnectionType {
+  API,
+  Agent,
+  EdgeAgent,
+  EdgeDevice,
+}
--- a/app/react/portainer/environments/queries/index.ts
+++ b/app/react/portainer/environments/queries/index.ts
@ -0,0 +1,2 @@
+export { useEnvironment } from './useEnvironment';
+export { useEnvironmentList } from './useEnvironmentList';
--- a/app/react/portainer/environments/utils/index.ts
+++ b/app/react/portainer/environments/utils/index.ts
@ -59,6 +59,14 @@ export function isUnassociatedEdgeEnvironment(env: Environment) {
  return isEdgeEnvironment(env.Type) && !env.EdgeID;
 }

+export function isLocalEnvironment(environment: Environment) {
+  return (
+    environment.URL.includes('unix://') ||
+    environment.URL.includes('npipe://') ||
+    environment.Type === EnvironmentType.KubernetesLocal
+  );
+}
+
 export function getDashboardRoute(environment: Environment) {
  if (isEdgeEnvironment(environment.Type)) {
    if (!environment.EdgeID) {
--- a/app/react/portainer/settings/EdgeComputeView/SettingsOpenAMT/SettingsOpenAMT.tsx
+++ b/app/react/portainer/settings/EdgeComputeView/SettingsOpenAMT/SettingsOpenAMT.tsx
@ -2,7 +2,7 @@ import { useState } from 'react';
 import { Formik, Field, Form } from 'formik';
 import { Laptop } from 'lucide-react';

-import { OpenAMTConfiguration } from '@/portainer/hostmanagement/open-amt/model';
+import { OpenAMTConfiguration } from '@/react/edge/edge-devices/open-amt/types';

 import { Switch } from '@@/form-components/SwitchField/Switch';
 import { FormControl } from '@@/form-components/FormControl';