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

Co-authored-by: matias.spinarolli <matias.spinarolli@portainer.io>

api/http/handler/settings/settings_public.go

@@ -33,6 +33,11 @@ type publicSettingsResponse struct {
 	// Whether team sync is enabled
 	TeamSync bool `json:"TeamSync" example:"true"`
 
+	// Whether FDO is enabled
+	IsFDOEnabled bool
+	// Whether AMT is enabled
+	IsAMTEnabled bool
+
 	Edge struct {
 		// Whether the device has been started in edge async mode
 		AsyncMode bool
@@ -76,6 +81,8 @@ func generatePublicSettings(appSettings *portainer.Settings) *publicSettingsResp
 		EnableTelemetry:           appSettings.EnableTelemetry,
 		KubeconfigExpiry:          appSettings.KubeconfigExpiry,
 		Features:                  appSettings.FeatureFlagSettings,
+		IsFDOEnabled:              appSettings.EnableEdgeComputeFeatures && appSettings.FDOConfiguration.Enabled,
+		IsAMTEnabled:              appSettings.EnableEdgeComputeFeatures && appSettings.OpenAMTConfiguration.Enabled,
 	}
 
 	publicSettings.Edge.AsyncMode = appSettings.Edge.AsyncMode

app/docker/components/imageRegistry/por-image-registry-rate-limits.controller.js

@@ -1,4 +1,4 @@
-import EndpointHelper from '@/portainer/helpers/endpointHelper';
+import { isAgentEnvironment, isLocalEnvironment } from '@/react/portainer/environments/utils';
 
 export default class porImageRegistryContainerController {
   /* @ngInject */
@@ -25,7 +25,7 @@ export default class porImageRegistryContainerController {
 
   async fetchRateLimits() {
     this.pullRateLimits = null;
-    if (!EndpointHelper.isAgentEndpoint(this.endpoint) && !EndpointHelper.isLocalEndpoint(this.endpoint)) {
+    if (!isAgentEnvironment(this.endpoint.Type) && !isLocalEnvironment(this.endpoint)) {
       this.setValidity(true);
       return;
     }

app/edge/__module.js

@@ -113,11 +113,7 @@ angular
     $stateRegistryProvider.register({
       name: 'edge.devices',
       url: '/devices',
-      views: {
+      abstract: true,
-        'content@': {
-          component: 'edgeDevicesView',
-        },
-      },
     });
 
     if (process.env.PORTAINER_EDITION === 'BE') {

app/edge/react/views/index.ts

@@ -1,7 +1,6 @@
 import angular from 'angular';
 
 import { r2a } from '@/react-tools/react2angular';
-import { ListView } from '@/react/edge/edge-devices/ListView';
 import { withCurrentUser } from '@/react-tools/withCurrentUser';
 import { withReactQuery } from '@/react-tools/withReactQuery';
 import { withUIRouter } from '@/react-tools/withUIRouter';
@@ -12,8 +11,4 @@ export const viewsModule = angular
   .component(
     'waitingRoomView',
     r2a(withUIRouter(withReactQuery(withCurrentUser(WaitingRoomView))), [])
-  )
-  .component(
-    'edgeDevicesView',
-    r2a(withUIRouter(withReactQuery(withCurrentUser(ListView))), [])
   ).name;

app/portainer/__module.js

@@ -175,7 +175,10 @@ angular
 
       var endpoint = {
         name: 'portainer.endpoints.endpoint',
-        url: '/:id',
+        url: '/:id?redirectTo',
+        params: {
+          redirectTo: '',
+        },
         views: {
           'content@': {
             templateUrl: './views/endpoints/edit/endpoint.html',

app/portainer/components/datatables/datatable.css

@@ -51,7 +51,7 @@
 
 .datatable .searchBar {
   border: 1px solid var(--border-searchbar);
-  background: var(--bg-searchbar) !important;
+  background: var(--bg-searchbar);
   border-radius: 5px;
   padding: 4px 10px;
   font-size: 14px;
@@ -64,10 +64,9 @@
 }
 
 .toolBar .searchBar {
-  flex: right;
   margin-right: 10px;
-  height: 30px;
   display: inline-flex;
+  min-height: 30px;
 }
 
 .datatable .searchBar input[type='text'] {
@@ -112,12 +111,15 @@
 
 .datatable .footer .paginationControls {
   float: right;
-  margin: 10px 15px 5px 0;
+  margin: 10px 0 5px 0;
 }
 
 .datatable .footer .paginationControls .limitSelector {
   font-size: 12px;
-  margin-right: 15px;
+}
+
+.datatable .footer .paginationControls .limitSelector:not(:last-child) {
+  margin-right: 10px;
 }
 
 .datatable .footer .paginationControls .pagination {

app/portainer/helpers/endpointHelper.js

@@ -8,10 +8,6 @@ function findAssociatedGroup(endpoint, groups) {
 }
 
 export default class EndpointHelper {
-  static isLocalEndpoint(endpoint) {
-    return endpoint.URL.includes('unix://') || endpoint.URL.includes('npipe://') || endpoint.Type === PortainerEndpointTypes.KubernetesLocalEnvironment;
-  }
-
   static isDockerEndpoint(endpoint) {
     return [PortainerEndpointTypes.DockerEnvironment, PortainerEndpointTypes.AgentOnDockerEnvironment, PortainerEndpointTypes.EdgeAgentOnDockerEnvironment].includes(endpoint.Type);
   }

app/portainer/hostmanagement/open-amt/open-amt.service.ts

@@ -1,13 +1,11 @@
 import axios, { parseAxiosError } from '@/portainer/services/axios';
 import { EnvironmentId } from '@/react/portainer/environments/types';
-
 import {
   OpenAMTConfiguration,
   AMTInformation,
   AuthorizationResponse,
-  Device,
   DeviceFeatures,
-} from './model';
+} from '@/react/edge/edge-devices/open-amt/types';
 
 const BASE_URL = '/open_amt';
 
@@ -34,42 +32,6 @@ export async function getAMTInfo(environmentId: EnvironmentId) {
   }
 }
 
-export async function activateDevice(environmentId: EnvironmentId) {
-  try {
-    await axios.post(`${BASE_URL}/${environmentId}/activate`);
-  } catch (e) {
-    throw parseAxiosError(e as Error, 'Unable to activate device');
-  }
-}
-
-export async function getDevices(environmentId: EnvironmentId) {
-  try {
-    const { data: devices } = await axios.get<Device[]>(
-      `${BASE_URL}/${environmentId}/devices`
-    );
-
-    return devices;
-  } catch (e) {
-    throw parseAxiosError(e as Error, 'Unable to retrieve device information');
-  }
-}
-
-export async function executeDeviceAction(
-  environmentId: EnvironmentId,
-  deviceGUID: string,
-  action: string
-) {
-  try {
-    const actionPayload = { action };
-    await axios.post(
-      `${BASE_URL}/${environmentId}/devices/${deviceGUID}/action`,
-      actionPayload
-    );
-  } catch (e) {
-    throw parseAxiosError(e as Error, 'Unable to execute device action');
-  }
-}
-
 export async function enableDeviceFeatures(
   environmentId: EnvironmentId,
   deviceGUID: string,

app/portainer/hostmanagement/open-amt/queries.ts

@@ -1,18 +0,0 @@
-import { useMutation } from 'react-query';
-
-import { activateDevice } from './open-amt.service';
-
-export const activateDeviceMutationKey = [
-  'environments',
-  'open-amt',
-  'activate',
-];
-
-export function useActivateDeviceMutation() {
-  return useMutation(activateDevice, {
-    mutationKey: activateDeviceMutationKey,
-    meta: {
-      message: 'Unable to associate with OpenAMT',
-    },
-  });
-}

app/portainer/models/settings.js

@@ -38,6 +38,8 @@ export function PublicSettingsViewModel(settings) {
   this.Edge = new EdgeSettingsViewModel(settings.Edge);
   this.DefaultRegistry = settings.DefaultRegistry;
   this.ShowKomposeBuildOption = settings.ShowKomposeBuildOption;
+  this.IsAMTEnabled = settings.IsAMTEnabled;
+  this.IsFDOEnabled = settings.IsFDOEnabled;
 }
 
 export function InternalAuthSettingsViewModel(data) {

app/portainer/react/components/index.ts

@@ -98,7 +98,14 @@ export const componentsModule = angular
   )
   .component(
     'datatableSearchbar',
-    r2a(SearchBar, ['data-cy', 'onChange', 'value', 'placeholder'])
+    r2a(SearchBar, [
+      'data-cy',
+      'onChange',
+      'value',
+      'placeholder',
+      'children',
+      'className',
+    ])
   )
   .component('badgeIcon', r2a(BadgeIcon, ['icon', 'size']))
   .component(

app/portainer/services/api/dockerhubService.js

@@ -1,5 +1,5 @@
-import EndpointHelper from 'Portainer/helpers/endpointHelper';
+import { PortainerEndpointTypes } from '@/portainer/models/endpoint/models';
-import { PortainerEndpointTypes } from 'Portainer/models/endpoint/models';
+import { isLocalEnvironment } from '@/react/portainer/environments/utils';
 
 angular.module('portainer.app').factory('DockerHubService', DockerHubService);
 
@@ -10,7 +10,7 @@ function DockerHubService(Endpoints, AgentDockerhub) {
   };
 
   function checkRateLimits(endpoint, registryId) {
-    if (EndpointHelper.isLocalEndpoint(endpoint)) {
+    if (isLocalEnvironment(endpoint)) {
       return Endpoints.dockerhubLimits({ id: endpoint.Id, registryId }).$promise;
     }
 

app/portainer/views/endpoints/edit/endpointController.js

@@ -252,7 +252,7 @@ function EndpointController(
     EndpointService.updateEndpoint(endpoint.Id, payload).then(
       function success() {
         Notifications.success('Environment updated', $scope.endpoint.Name);
-        $state.go('portainer.endpoints', {}, { reload: true });
+        $state.go($state.params.redirectTo || 'portainer.endpoints', {}, { reload: true });
       },
       function error(err) {
         Notifications.error('Failure', err, 'Unable to update environment');

app/react/components/LinkButton.tsx

@@ -8,29 +8,26 @@ export function LinkButton({
   to,
   params,
   disabled,
-  children,
   className,
+  children,
+  title = '',
   ...props
 }: ComponentProps<typeof Button> & ComponentProps<typeof Link>) {
-  const button = (
+  return (
     <Button
+      title={title}
+      size="medium"
       // eslint-disable-next-line react/jsx-props-no-spreading
       {...props}
-      className={clsx(className, '!m-0')}
+      className={clsx(className, '!m-0 no-link')}
-      size="medium"
       disabled={disabled}
+      as={disabled ? 'span' : Link}
+      props={{
+        to,
+        params,
+      }}
     >
       {children}
     </Button>
   );
-
-  if (disabled) {
-    return button;
-  }
-
-  return (
-    <Link to={to} params={params} className="text-inherit hover:no-underline">
-      {button}
-    </Link>
-  );
 }

app/react/components/buttons/Button.tsx

@@ -25,7 +25,9 @@ type Color =
   | 'none';
 type Size = 'xsmall' | 'small' | 'medium' | 'large';
 
-export interface Props extends AriaAttributes, AutomationTestingProps {
+export interface Props<TasProps = unknown>
+  extends AriaAttributes,
+    AutomationTestingProps {
   icon?: ReactNode | ComponentType<unknown>;
 
   color?: Color;
@@ -34,10 +36,12 @@ export interface Props extends AriaAttributes, AutomationTestingProps {
   title?: string;
   className?: string;
   type?: Type;
+  as?: ComponentType<TasProps> | string;
   onClick?: MouseEventHandler<HTMLButtonElement>;
+  props?: TasProps;
 }
 
-export function Button({
+export function Button<TasProps = unknown>({
   type = 'button',
   color = 'primary',
   size = 'small',
@@ -47,11 +51,13 @@ export function Button({
   title,
   icon,
   children,
-
+  as = 'button',
+  props,
   ...ariaProps
-}: PropsWithChildren<Props>) {
+}: PropsWithChildren<Props<TasProps>>) {
+  const Component = as as 'button';
   return (
-    <button
+    <Component
       /* eslint-disable-next-line react/button-has-type */
       type={type}
       disabled={disabled}
@@ -60,10 +66,12 @@ export function Button({
       title={title}
       // eslint-disable-next-line react/jsx-props-no-spreading
       {...ariaProps}
+      // eslint-disable-next-line react/jsx-props-no-spreading
+      {...props}
     >
       {icon && <Icon icon={icon} size={getIconSize(size)} />}
       {children}
-    </button>
+    </Component>
   );
 }
 

app/react/components/datatables/FilterSearchBar.tsx

@@ -1,42 +0,0 @@
-import { Search } from 'lucide-react';
-
-import { useLocalStorage } from '@/react/hooks/useLocalStorage';
-
-interface Props {
-  value: string;
-  placeholder?: string;
-  onChange(value: string): void;
-}
-
-export function FilterSearchBar({
-  value,
-  placeholder = 'Search...',
-  onChange,
-}: Props) {
-  return (
-    <div className="searchBar items-center flex h-[34px]">
-      <Search className="searchIcon lucide" />
-      <input
-        type="text"
-        className="searchInput"
-        value={value}
-        onChange={(e) => onChange(e.target.value)}
-        placeholder={placeholder}
-        data-cy="home-environmentSearch"
-      />
-    </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/react/components/datatables/SearchBar.tsx

@@ -1,13 +1,19 @@
-import { Search } from 'lucide-react';
+import { ReactNode } from 'react';
+import { Search, X } from 'lucide-react';
+import clsx from 'clsx';
 
 import { useLocalStorage } from '@/react/hooks/useLocalStorage';
 import { AutomationTestingProps } from '@/types';
 import { useDebounce } from '@/react/hooks/useDebounce';
 
+import { Button } from '@@/buttons';
+
 interface Props extends AutomationTestingProps {
   value: string;
   placeholder?: string;
   onChange(value: string): void;
+  className?: string;
+  children?: ReactNode;
 }
 
 export function SearchBar({
@@ -15,11 +21,19 @@ export function SearchBar({
   placeholder = 'Search...',
   onChange,
   'data-cy': dataCy,
+  className,
+  children,
 }: Props) {
   const [searchValue, setSearchValue] = useDebounce(value, onChange);
 
+  function onClear() {
+    setSearchValue('');
+  }
+
   return (
-    <div className="searchBar items-center flex min-w-[90px]">
+    <div
+      className={clsx('searchBar items-center flex min-w-[90px]', className)}
+    >
       <Search className="searchIcon lucide shrink-0" />
       <input
         type="text"
@@ -29,6 +43,8 @@ export function SearchBar({
         placeholder={placeholder}
         data-cy={dataCy}
       />
+      {children}
+      <Button onClick={onClear} icon={X} color="none" disabled={!searchValue} />
     </div>
   );
 }

app/react/components/datatables/TableTitle.tsx

@@ -1,4 +1,5 @@
 import { ComponentType, PropsWithChildren, ReactNode } from 'react';
+import clsx from 'clsx';
 
 import { Icon } from '@@/Icon';
 
@@ -6,6 +7,7 @@ interface Props {
   icon?: ReactNode | ComponentType<unknown>;
   label: string;
   description?: ReactNode;
+  className?: string;
 }
 
 export function TableTitle({
@@ -13,9 +15,10 @@ export function TableTitle({
   label,
   children,
   description,
+  className,
 }: PropsWithChildren<Props>) {
   return (
-    <div className="toolBar flex-col">
+    <div className={clsx('toolBar flex-col', className)}>
       <div className="flex gap-1 p-0 w-full items-center">
         <div className="toolBarTitle">
           {icon && (

app/react/components/form-components/PortainerSelect.tsx

@@ -5,7 +5,7 @@ import { AutomationTestingProps } from '@/types';
 
 import { Select as ReactSelect } from '@@/form-components/ReactSelect';
 
-interface Option<TValue> {
+export interface Option<TValue> {
   value: TValue;
   label: string;
 }

app/react/components/form-components/ReactSelect.css

@@ -13,6 +13,16 @@
   --single-value-option-text-color: var(--white-color);
 }
 
+.portainer-selector__placeholder {
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+
+.portainer-selector__indicator-separator {
+  display: none;
+}
+
 /* input style */
 .portainer-selector-root .portainer-selector__control {
   border-color: var(--border-form-control-color);

app/react/components/modals/Modal/CloseButton.tsx

@@ -12,7 +12,7 @@ export function CloseButton({
   return (
     <button
       type="button"
-      className={clsx(styles.close, className, 'absolute top-2 right-2')}
+      className={clsx(styles.close, className, 'absolute top-4 right-5')}
       onClick={() => onClose()}
     >
       ×

app/react/components/modals/Modal/Modal.module.css

@@ -1,3 +1,7 @@
+.overlay[data-reach-dialog-overlay] {
+  background: hsla(0, 0%, 0%, 0.8);
+}
+
 .modal-dialog {
   width: 450px;
   display: inline-block;

app/react/components/modals/Modal/Modal.tsx

@@ -33,7 +33,10 @@ export function Modal({
     <Context.Provider value>
       <DialogOverlay
         isOpen
-        className="flex items-center justify-center z-50"
+        className={clsx(
+          styles.overlay,
+          'flex items-center justify-center z-50'
+        )}
         onDismiss={onDismiss}
         role="dialog"
       >

app/react/components/modals/Modal/ModalFooter.tsx

@@ -1,15 +1,11 @@
-import clsx from 'clsx';
 import { PropsWithChildren } from 'react';
 
 import { useModalContext } from './Modal';
-import styles from './ModalFooter.module.css';
 
 export function ModalFooter({ children }: PropsWithChildren<unknown>) {
   useModalContext();
 
   return (
-    <div className={clsx(styles.modalFooter, 'flex justify-end')}>
+    <div className="flex justify-end gap-3 [&>*]:flex-1 pt-3">{children}</div>
-      {children}
-    </div>
   );
 }

app/react/components/modals/Modal/ModalHeader.tsx

@@ -24,7 +24,7 @@ export function ModalHeader({ title, modalType }: Props) {
         />
       )}
       {typeof title === 'string' ? (
-        <h5 className="font-bold">{title}</h5>
+        <h5 className="font-bold m-0">{title}</h5>
       ) : (
         title
       )}

app/react/components/modals/Modal/index.tsx

@@ -3,6 +3,8 @@ import { ModalHeader } from './ModalHeader';
 import { ModalBody } from './ModalBody';
 import { ModalFooter } from './ModalFooter';
 
+export { ModalType, type OnSubmit } from './types';
+
 interface WithSubComponents {
   Header: typeof ModalHeader;
   Body: typeof ModalBody;

app/react/edge/edge-devices/ListView/EdgeDevicesDatatable/AMTDevicesDatatable/AMTDevicesDatatable.tsx

@@ -1,33 +0,0 @@
-import { EnvironmentId } from '@/react/portainer/environments/types';
-import PortainerError from '@/portainer/error';
-
-import { NestedDatatable } from '@@/datatables/NestedDatatable';
-
-import { useAMTDevices } from './useAMTDevices';
-import { columns } from './columns';
-
-export interface AMTDevicesTableProps {
-  environmentId: EnvironmentId;
-}
-
-export function AMTDevicesDatatable({ environmentId }: AMTDevicesTableProps) {
-  const devicesQuery = useAMTDevices(environmentId);
-
-  return (
-    <NestedDatatable
-      columns={columns}
-      dataset={devicesQuery.devices}
-      isLoading={devicesQuery.isLoading}
-      emptyContentLabel={userMessage(devicesQuery.error)}
-      defaultSortBy="hostname"
-    />
-  );
-}
-
-function userMessage(error?: PortainerError) {
-  if (error) {
-    return error.message;
-  }
-
-  return 'No devices found';
-}

app/react/edge/edge-devices/ListView/EdgeDevicesDatatable/AMTDevicesDatatable/columns/RowContext.tsx

@@ -1,38 +0,0 @@
-import { PropsWithChildren, useMemo, useReducer } from 'react';
-
-import { EnvironmentId } from '@/react/portainer/environments/types';
-
-import { createRowContext } from '@@/datatables/RowContext';
-
-interface RowContextState {
-  environmentId: EnvironmentId;
-  isLoading: boolean;
-  toggleIsLoading(): void;
-}
-
-const { RowProvider: InternalProvider, useRowContext } =
-  createRowContext<RowContextState>();
-
-export { useRowContext };
-
-interface Props {
-  environmentId: EnvironmentId;
-}
-
-export function RowProvider({
-  environmentId,
-  children,
-}: PropsWithChildren<Props>) {
-  const [isLoading, toggleIsLoading] = useReducer((state) => !state, false);
-
-  const context = useMemo(
-    () => ({
-      isLoading,
-      toggleIsLoading,
-      environmentId,
-    }),
-    [environmentId, isLoading]
-  );
-
-  return <InternalProvider context={context}>{children}</InternalProvider>;
-}

app/react/edge/edge-devices/ListView/EdgeDevicesDatatable/AMTDevicesDatatable/columns/actions.tsx

@@ -1,115 +0,0 @@
-import { CellProps, Column } from 'react-table';
-import { useSref } from '@uirouter/react';
-import { MenuItem, MenuLink } from '@reach/menu-button';
-import { useQueryClient } from 'react-query';
-
-import { Device } from '@/portainer/hostmanagement/open-amt/model';
-import { confirmAsync } from '@/portainer/services/modal.service/confirm';
-import { executeDeviceAction } from '@/portainer/hostmanagement/open-amt/open-amt.service';
-import * as notifications from '@/portainer/services/notifications';
-
-import { ActionsMenu } from '@@/datatables/ActionsMenu';
-import { ActionsMenuTitle } from '@@/datatables/ActionsMenuTitle';
-
-import { useRowContext } from './RowContext';
-
-enum DeviceAction {
-  PowerOn = 'power on',
-  PowerOff = 'power off',
-  Restart = 'restart',
-}
-
-export const actions: Column<Device> = {
-  Header: 'Actions',
-  accessor: () => 'actions',
-  id: 'actions',
-  disableFilters: true,
-  canHide: true,
-  disableResizing: true,
-  width: '5px',
-  sortType: 'string',
-  Filter: () => null,
-  Cell: ActionsCell,
-};
-
-export function ActionsCell({ row: { original: device } }: CellProps<Device>) {
-  const queryClient = useQueryClient();
-
-  const { isLoading, toggleIsLoading, environmentId } = useRowContext();
-
-  const kvmLinkProps = useSref('portainer.endpoints.endpoint.kvm', {
-    id: environmentId,
-    deviceId: device.guid,
-    deviceName: device.hostname,
-  });
-
-  return (
-    <ActionsMenu>
-      <ActionsMenuTitle>AMT Functions</ActionsMenuTitle>
-      <MenuItem
-        disabled={isLoading}
-        onSelect={() => handleDeviceActionClick(DeviceAction.PowerOn)}
-      >
-        Power ON
-      </MenuItem>
-      <MenuItem
-        disabled={isLoading}
-        onSelect={() => handleDeviceActionClick(DeviceAction.PowerOff)}
-      >
-        Power OFF
-      </MenuItem>
-      <MenuItem
-        disabled={isLoading}
-        onSelect={() => handleDeviceActionClick(DeviceAction.Restart)}
-      >
-        Restart
-      </MenuItem>
-      <MenuLink
-        href={kvmLinkProps.href}
-        onClick={kvmLinkProps.onClick}
-        disabled={isLoading}
-      >
-        KVM
-      </MenuLink>
-    </ActionsMenu>
-  );
-
-  async function handleDeviceActionClick(action: string) {
-    const confirmed = await confirmAsync({
-      title: 'Confirm action',
-      message: `Are you sure you want to ${action} the device?`,
-      buttons: {
-        cancel: {
-          label: 'Cancel',
-          className: 'btn-default',
-        },
-        confirm: {
-          label: 'Confirm',
-          className: 'btn-primary',
-        },
-      },
-    });
-
-    if (!confirmed) {
-      return;
-    }
-
-    try {
-      toggleIsLoading();
-      await executeDeviceAction(environmentId, device.guid, action);
-      notifications.success(
-        `${action} action sent successfully`,
-        device.hostname
-      );
-      await queryClient.invalidateQueries(['amt_devices', environmentId]);
-    } catch (err) {
-      notifications.error(
-        'Failure',
-        err as Error,
-        `Failed to ${action} the device`
-      );
-    } finally {
-      toggleIsLoading();
-    }
-  }
-}

app/react/edge/edge-devices/ListView/EdgeDevicesDatatable/AMTDevicesDatatable/columns/hostname.tsx

@@ -1,13 +0,0 @@
-import { Column } from 'react-table';
-
-import { Device } from '@/portainer/hostmanagement/open-amt/model';
-
-export const hostname: Column<Device> = {
-  Header: 'Hostname',
-  accessor: (row) => row.hostname || '-',
-  id: 'hostname',
-  disableFilters: true,
-  canHide: true,
-  sortType: 'string',
-  Filter: () => null,
-};

app/react/edge/edge-devices/ListView/EdgeDevicesDatatable/AMTDevicesDatatable/columns/index.tsx

@@ -1,6 +0,0 @@
-import { hostname } from './hostname';
-import { status } from './status';
-import { powerState } from './power-state';
-import { actions } from './actions';
-
-export const columns = [hostname, status, powerState, actions];

app/react/edge/edge-devices/ListView/EdgeDevicesDatatable/AMTDevicesDatatable/columns/power-state.tsx

@@ -1,82 +0,0 @@
-import { CellProps, Column } from 'react-table';
-import clsx from 'clsx';
-import { Settings } from 'lucide-react';
-
-import { Device } from '@/portainer/hostmanagement/open-amt/model';
-
-import { Icon } from '@@/Icon';
-
-import { useRowContext } from './RowContext';
-
-enum PowerState {
-  Running = 'Running',
-  Sleep = 'Sleep',
-  Off = 'Off',
-  Hibernate = 'Hibernate',
-  PowerCycle = 'Power Cycle',
-}
-
-enum PowerStateCode {
-  On = 2,
-  SleepLight = 3,
-  SleepDeep = 4,
-  OffHard = 6,
-  Hibernate = 7,
-  OffSoft = 8,
-  PowerCycle = 9,
-  OffHardGraceful = 13,
-}
-
-export const powerState: Column<Device> = {
-  Header: 'Power State',
-  accessor: (row) => parsePowerState(row.powerState),
-  id: 'powerState',
-  disableFilters: true,
-  canHide: true,
-  sortType: 'string',
-  Cell: PowerStateCell,
-  Filter: () => null,
-};
-
-export function PowerStateCell({
-  row: { original: device },
-}: CellProps<Device>) {
-  const { isLoading } = useRowContext();
-  return (
-    <>
-      <span
-        className={clsx({
-          'text-success': device.powerState === PowerStateCode.On,
-        })}
-      >
-        {parsePowerState(device.powerState)}
-      </span>
-      <span>
-        {isLoading && (
-          <Icon icon={Settings} className="animate-spin-slow !ml-1" />
-        )}
-      </span>
-    </>
-  );
-}
-
-function parsePowerState(value: PowerStateCode) {
-  // https://app.swaggerhub.com/apis-docs/rbheopenamt/mps/1.4.0#/AMT/get_api_v1_amt_power_state__guid_
-  switch (value) {
-    case PowerStateCode.On:
-      return PowerState.Running;
-    case PowerStateCode.SleepLight:
-    case PowerStateCode.SleepDeep:
-      return PowerState.Sleep;
-    case PowerStateCode.OffHard:
-    case PowerStateCode.OffSoft:
-    case PowerStateCode.OffHardGraceful:
-      return PowerState.Off;
-    case PowerStateCode.Hibernate:
-      return PowerState.Hibernate;
-    case PowerStateCode.PowerCycle:
-      return PowerState.PowerCycle;
-    default:
-      return '-';
-  }
-}

app/react/edge/edge-devices/ListView/EdgeDevicesDatatable/AMTDevicesDatatable/columns/status.tsx

@@ -1,22 +0,0 @@
-import { CellProps, Column } from 'react-table';
-import clsx from 'clsx';
-
-import { Device } from '@/portainer/hostmanagement/open-amt/model';
-
-export const status: Column<Device> = {
-  Header: 'MPS Status',
-  id: 'status',
-  disableFilters: true,
-  canHide: true,
-  sortType: 'string',
-  Cell: StatusCell,
-  Filter: () => null,
-};
-
-export function StatusCell({ row: { original: device } }: CellProps<Device>) {
-  return (
-    <span className={clsx({ 'text-success': device.connectionStatus })}>
-      {device.connectionStatus ? 'Connected' : 'Disconnected'}
-    </span>
-  );
-}

app/react/edge/edge-devices/ListView/EdgeDevicesDatatable/AMTDevicesDatatable/index.ts

@@ -1 +0,0 @@
-export { AMTDevicesDatatable } from './AMTDevicesDatatable';

app/react/edge/edge-devices/ListView/EdgeDevicesDatatable/AMTDevicesDatatable/useAMTDevices.tsx

@@ -1,32 +0,0 @@
-import { useEffect, useMemo } from 'react';
-import { useQuery } from 'react-query';
-
-import { getDevices } from '@/portainer/hostmanagement/open-amt/open-amt.service';
-import { EnvironmentId } from '@/react/portainer/environments/types';
-import PortainerError from '@/portainer/error';
-import * as notifications from '@/portainer/services/notifications';
-
-export function useAMTDevices(environmentId: EnvironmentId) {
-  const { isLoading, data, isError, error } = useQuery(
-    ['amt_devices', environmentId],
-    () => getDevices(environmentId)
-  );
-
-  useEffect(() => {
-    if (isError) {
-      notifications.error(
-        'Failure',
-        error as Error,
-        'Failed retrieving AMT devices'
-      );
-    }
-  }, [isError, error]);
-
-  const devices = useMemo(() => data || [], [data]);
-
-  return {
-    isLoading,
-    devices,
-    error: isError ? (error as PortainerError) : undefined,
-  };
-}

app/react/edge/edge-devices/ListView/EdgeDevicesDatatable/EdgeDevicesDatatable.module.css

@@ -1,3 +0,0 @@
-.kvm-tip {
-  padding: 8px;
-}

app/react/edge/edge-devices/ListView/EdgeDevicesDatatable/EdgeDevicesDatatable.tsx

@@ -1,150 +0,0 @@
-import _ from 'lodash';
-import { useStore } from 'zustand';
-import { Box } from 'lucide-react';
-import { useState } from 'react';
-
-import { EdgeTypes, Environment } from '@/react/portainer/environments/types';
-import { EnvironmentGroup } from '@/react/portainer/environments/environment-groups/types';
-import { useEnvironmentList } from '@/react/portainer/environments/queries/useEnvironmentList';
-
-import { ExpandableDatatable } from '@@/datatables/ExpandableDatatable';
-import { TableSettingsMenu } from '@@/datatables';
-import { ColumnVisibilityMenu } from '@@/datatables/ColumnVisibilityMenu';
-import { InformationPanel } from '@@/InformationPanel';
-import { TextTip } from '@@/Tip/TextTip';
-import { useSearchBarState } from '@@/datatables/SearchBar';
-
-import { AMTDevicesDatatable } from './AMTDevicesDatatable';
-import { columns } from './columns';
-import { EdgeDevicesDatatableActions } from './EdgeDevicesDatatableActions';
-import { EdgeDevicesDatatableSettings } from './EdgeDevicesDatatableSettings';
-import { RowProvider } from './columns/RowContext';
-import styles from './EdgeDevicesDatatable.module.css';
-import { createStore } from './datatable-store';
-
-export interface EdgeDevicesTableProps {
-  storageKey: string;
-  isFdoEnabled: boolean;
-  isOpenAmtEnabled: boolean;
-  showWaitingRoomLink: boolean;
-  mpsServer: string;
-  groups: EnvironmentGroup[];
-}
-const storageKey = 'edgeDevices';
-
-const settingsStore = createStore(storageKey);
-
-export function EdgeDevicesDatatable({
-  isFdoEnabled,
-  isOpenAmtEnabled,
-  showWaitingRoomLink,
-  mpsServer,
-  groups,
-}: EdgeDevicesTableProps) {
-  const settings = useStore(settingsStore);
-  const [page, setPage] = useState(0);
-
-  const [search, setSearch] = useSearchBarState(storageKey);
-
-  const hidableColumns = _.compact(
-    columns.filter((col) => col.canHide).map((col) => col.id)
-  );
-
-  const { environments, isLoading, totalCount } = useEnvironmentList(
-    {
-      edgeDevice: true,
-      search,
-      types: EdgeTypes,
-      excludeSnapshots: true,
-      page: page + 1,
-      pageLimit: settings.pageSize,
-      sort: settings.sortBy.id,
-      order: settings.sortBy.desc ? 'desc' : 'asc',
-    },
-    settings.autoRefreshRate * 1000
-  );
-
-  const someDeviceHasAMTActivated = environments.some(
-    (environment) =>
-      environment.AMTDeviceGUID && environment.AMTDeviceGUID !== ''
-  );
-
-  return (
-    <>
-      {isOpenAmtEnabled && someDeviceHasAMTActivated && (
-        <InformationPanel>
-          <div className={styles.kvmTip}>
-            <TextTip color="blue">
-              For the KVM function to work you need to have the MPS server added
-              to your trusted site list, browse to this
-              <a
-                href={`https://${mpsServer}`}
-                target="_blank"
-                rel="noreferrer"
-                className="mx-px"
-              >
-                site
-              </a>
-              and add to your trusted site list
-            </TextTip>
-          </div>
-        </InformationPanel>
-      )}
-      <RowProvider context={{ isOpenAmtEnabled, groups }}>
-        <ExpandableDatatable
-          dataset={environments}
-          columns={columns}
-          isLoading={isLoading}
-          totalCount={totalCount}
-          title="Edge Devices"
-          titleIcon={Box}
-          initialPageSize={settings.pageSize}
-          onPageSizeChange={settings.setPageSize}
-          initialSortBy={settings.sortBy}
-          onSortByChange={settings.setSortBy}
-          searchValue={search}
-          onSearchChange={setSearch}
-          renderSubRow={(row) => (
-            <tr>
-              <td />
-              <td colSpan={row.cells.length - 1}>
-                <AMTDevicesDatatable environmentId={row.original.Id} />
-              </td>
-            </tr>
-          )}
-          initialTableState={{ pageIndex: page }}
-          pageCount={Math.ceil(totalCount / settings.pageSize)}
-          renderTableActions={(selectedRows) => (
-            <EdgeDevicesDatatableActions
-              selectedItems={selectedRows}
-              isFDOEnabled={isFdoEnabled}
-              isOpenAMTEnabled={isOpenAmtEnabled}
-              showWaitingRoomLink={showWaitingRoomLink}
-            />
-          )}
-          renderTableSettings={(tableInstance) => {
-            const columnsToHide = tableInstance.allColumns.filter(
-              (colInstance) => hidableColumns?.includes(colInstance.id)
-            );
-            return (
-              <>
-                <ColumnVisibilityMenu<Environment>
-                  columns={columnsToHide}
-                  onChange={(hiddenColumns) => {
-                    settings.setHiddenColumns(hiddenColumns);
-                    tableInstance.setHiddenColumns(hiddenColumns);
-                  }}
-                  value={settings.hiddenColumns}
-                />
-                <TableSettingsMenu>
-                  <EdgeDevicesDatatableSettings settings={settings} />
-                </TableSettingsMenu>
-              </>
-            );
-          }}
-          onPageChange={setPage}
-        />
-      </RowProvider>
-    </>
-  );
-}

app/react/edge/edge-devices/ListView/EdgeDevicesDatatable/EdgeDevicesDatatableActions.tsx

@@ -1,179 +0,0 @@
-import { useRouter } from '@uirouter/react';
-import { Plus, Trash2, Link as LinkIcon } from 'lucide-react';
-
-import type { Environment } from '@/react/portainer/environments/types';
-import {
-  confirmAsync,
-  confirmDestructiveAsync,
-} from '@/portainer/services/modal.service/confirm';
-import { promptAsync } from '@/portainer/services/modal.service/prompt';
-import * as notifications from '@/portainer/services/notifications';
-import { deleteEndpoint } from '@/react/portainer/environments/environment.service';
-import { useActivateDeviceMutation } from '@/portainer/hostmanagement/open-amt/queries';
-
-import { Button } from '@@/buttons';
-import { Link } from '@@/Link';
-
-interface Props {
-  selectedItems: Environment[];
-  isFDOEnabled: boolean;
-  isOpenAMTEnabled: boolean;
-  showWaitingRoomLink: boolean;
-}
-
-enum DeployType {
-  FDO = 'FDO',
-  MANUAL = 'MANUAL',
-}
-
-export function EdgeDevicesDatatableActions({
-  selectedItems,
-  isOpenAMTEnabled,
-  isFDOEnabled,
-  showWaitingRoomLink,
-}: Props) {
-  const router = useRouter();
-  const activateDeviceMutation = useActivateDeviceMutation();
-
-  return (
-    <div className="actionBar">
-      <Button
-        disabled={selectedItems.length < 1}
-        color="danger"
-        onClick={() => onDeleteEdgeDeviceClick()}
-        icon={Trash2}
-      >
-        Remove
-      </Button>
-
-      <Button onClick={() => onAddNewDeviceClick()} icon={Plus}>
-        Add Device
-      </Button>
-
-      {isOpenAMTEnabled && (
-        <Button
-          disabled={selectedItems.length !== 1}
-          onClick={() => onAssociateOpenAMTClick(selectedItems)}
-          icon={LinkIcon}
-        >
-          Associate with OpenAMT
-        </Button>
-      )}
-
-      {showWaitingRoomLink && (
-        <Link to="edge.devices.waiting-room">
-          <Button>Waiting Room</Button>
-        </Link>
-      )}
-    </div>
-  );
-
-  async function onDeleteEdgeDeviceClick() {
-    const confirmed = await confirmDestructiveAsync({
-      title: 'Are you sure ?',
-      message:
-        'This action will remove all configurations associated to your environment(s). Continue?',
-      buttons: {
-        confirm: {
-          label: 'Remove',
-          className: 'btn-danger',
-        },
-      },
-    });
-
-    if (!confirmed) {
-      return;
-    }
-
-    await Promise.all(
-      selectedItems.map(async (environment) => {
-        try {
-          await deleteEndpoint(environment.Id);
-
-          notifications.success(
-            'Environment successfully removed',
-            environment.Name
-          );
-        } catch (err) {
-          notifications.error(
-            'Failure',
-            err as Error,
-            'Unable to remove environment'
-          );
-        }
-      })
-    );
-
-    await router.stateService.reload();
-  }
-
-  async function onAddNewDeviceClick() {
-    const result = isFDOEnabled
-      ? await promptAsync({
-          title: 'How would you like to add an Edge Device?',
-          inputType: 'radio',
-          inputOptions: [
-            {
-              text: 'Provision bare-metal using Intel FDO',
-              value: DeployType.FDO,
-            },
-            {
-              text: 'Deploy agent manually',
-              value: DeployType.MANUAL,
-            },
-          ],
-          buttons: {
-            confirm: {
-              label: 'Confirm',
-              className: 'btn-primary',
-            },
-          },
-        })
-      : DeployType.MANUAL;
-
-    switch (result) {
-      case DeployType.FDO:
-        router.stateService.go('portainer.endpoints.importDevice');
-        break;
-      case DeployType.MANUAL:
-        router.stateService.go('portainer.wizard.endpoints', {
-          edgeDevice: true,
-        });
-        break;
-      default:
-        break;
-    }
-  }
-
-  async function onAssociateOpenAMTClick(selectedItems: Environment[]) {
-    const selectedEnvironment = selectedItems[0];
-
-    const confirmed = await confirmAsync({
-      title: '',
-      message: `Associate ${selectedEnvironment.Name} with OpenAMT`,
-      buttons: {
-        cancel: {
-          label: 'Cancel',
-          className: 'btn-default',
-        },
-        confirm: {
-          label: 'Confirm',
-          className: 'btn-primary',
-        },
-      },
-    });
-
-    if (!confirmed) {
-      return;
-    }
-
-    activateDeviceMutation.mutate(selectedEnvironment.Id, {
-      onSuccess() {
-        notifications.notifySuccess(
-          'Successfully associated with OpenAMT',
-          selectedEnvironment.Name
-        );
-      },
-    });
-  }
-}

app/react/edge/edge-devices/ListView/EdgeDevicesDatatable/EdgeDevicesDatatableSettings.tsx

@@ -1,19 +0,0 @@
-import { TableSettingsMenuAutoRefresh } from '@@/datatables/TableSettingsMenuAutoRefresh';
-import { RefreshableTableSettings } from '@@/datatables/types';
-
-interface Props {
-  settings: RefreshableTableSettings;
-}
-
-export function EdgeDevicesDatatableSettings({ settings }: Props) {
-  return (
-    <TableSettingsMenuAutoRefresh
-      value={settings.autoRefreshRate}
-      onChange={handleRefreshRateChange}
-    />
-  );
-
-  function handleRefreshRateChange(autoRefreshRate: number) {
-    settings.setAutoRefreshRate(autoRefreshRate);
-  }
-}

app/react/edge/edge-devices/ListView/EdgeDevicesDatatable/columns/RowContext.tsx

@@ -1,12 +0,0 @@
-import { EnvironmentGroup } from '@/react/portainer/environments/environment-groups/types';
-
-import { createRowContext } from '@@/datatables/RowContext';
-
-interface RowContextState {
-  isOpenAmtEnabled: boolean;
-  groups: EnvironmentGroup[];
-}
-
-const { RowProvider, useRowContext } = createRowContext<RowContextState>();
-
-export { RowProvider, useRowContext };

app/react/edge/edge-devices/ListView/EdgeDevicesDatatable/columns/actions.tsx

@@ -1,79 +0,0 @@
-import { CellProps, Column } from 'react-table';
-import { MenuItem, MenuLink } from '@reach/menu-button';
-import { useRouter, useSref } from '@uirouter/react';
-
-import { Environment } from '@/react/portainer/environments/types';
-import { snapshotEndpoint } from '@/react/portainer/environments/environment.service';
-import * as notifications from '@/portainer/services/notifications';
-import { getDashboardRoute } from '@/react/portainer/environments/utils';
-
-import { ActionsMenu } from '@@/datatables/ActionsMenu';
-
-export const actions: Column<Environment> = {
-  Header: 'Actions',
-  accessor: () => 'actions',
-  id: 'actions',
-  disableFilters: true,
-  canHide: true,
-  disableResizing: true,
-  width: '5px',
-  sortType: 'string',
-  Filter: () => null,
-  Cell: ActionsCell,
-};
-
-export function ActionsCell({
-  row: { original: environment },
-}: CellProps<Environment>) {
-  const router = useRouter();
-
-  const environmentRoute = getDashboardRoute(environment);
-  const browseLinkProps = useSref(environmentRoute, {
-    id: environment.Id,
-    endpointId: environment.Id,
-  });
-
-  const snapshotLinkProps = useSref('edge.browse.dashboard', {
-    environmentId: environment.Id,
-  });
-
-  const showRefreshSnapshot = false; // remove and show MenuItem when feature is available
-
-  return (
-    <ActionsMenu>
-      {environment.Edge.AsyncMode ? (
-        <MenuLink
-          className="!text-inherit hover:!no-underline"
-          href={snapshotLinkProps.href}
-          onClick={snapshotLinkProps.onClick}
-        >
-          Browse Snapshot
-        </MenuLink>
-      ) : (
-        <MenuLink href={browseLinkProps.href} onClick={browseLinkProps.onClick}>
-          Browse
-        </MenuLink>
-      )}
-      {showRefreshSnapshot && (
-        <MenuItem hidden onSelect={() => handleRefreshSnapshotClick()}>
-          Refresh Snapshot
-        </MenuItem>
-      )}
-    </ActionsMenu>
-  );
-
-  async function handleRefreshSnapshotClick() {
-    try {
-      await snapshotEndpoint(environment.Id);
-      notifications.success('Success', 'Environment updated');
-    } catch (err) {
-      notifications.error(
-        'Failure',
-        err as Error,
-        'An error occurred during environment snapshot'
-      );
-    } finally {
-      await router.stateService.reload();
-    }
-  }
-}

app/react/edge/edge-devices/ListView/EdgeDevicesDatatable/columns/group.tsx

@@ -1,24 +0,0 @@
-import { Column } from 'react-table';
-
-import { Environment } from '@/react/portainer/environments/types';
-import { EnvironmentGroupId } from '@/react/portainer/environments/environment-groups/types';
-
-import { DefaultFilter } from '@@/datatables/Filter';
-
-import { useRowContext } from './RowContext';
-
-export const group: Column<Environment> = {
-  Header: 'Group',
-  accessor: (row) => row.GroupId,
-  Cell: GroupCell,
-  id: 'groupName',
-  Filter: DefaultFilter,
-  canHide: true,
-};
-
-function GroupCell({ value }: { value: EnvironmentGroupId }) {
-  const { groups } = useRowContext();
-  const group = groups.find((g) => g.Id === value);
-
-  return group?.Name || '';
-}

app/react/edge/edge-devices/ListView/EdgeDevicesDatatable/columns/heartbeat.tsx

@@ -1,53 +0,0 @@
-import { CellProps, Column } from 'react-table';
-import clsx from 'clsx';
-
-import { Environment } from '@/react/portainer/environments/types';
-import { useHasHeartbeat } from '@/react/edge/hooks/useHasHeartbeat';
-
-export const heartbeat: Column<Environment> = {
-  Header: 'Heartbeat',
-  accessor: 'Status',
-  id: 'status',
-  Cell: StatusCell,
-  disableFilters: true,
-  canHide: true,
-};
-
-export function StatusCell({
-  row: { original: environment },
-}: CellProps<Environment>) {
-  return <EdgeIndicator environment={environment} />;
-}
-
-function EdgeIndicator({ environment }: { environment: Environment }) {
-  const isValid = useHasHeartbeat(environment);
-
-  if (isValid === null) {
-    return null;
-  }
-
-  const associated = !!environment.EdgeID;
-  if (!associated) {
-    return (
-      <span role="status" aria-label="edge-status">
-        <span className="label label-default" aria-label="unassociated">
-          <s>associated</s>
-        </span>
-      </span>
-    );
-  }
-
-  return (
-    <span role="status" aria-label="edge-status">
-      <span
-        className={clsx('label', {
-          'label-danger': !isValid,
-          'label-success': isValid,
-        })}
-        aria-label="edge-heartbeat"
-      >
-        heartbeat
-      </span>
-    </span>
-  );
-}

app/react/edge/edge-devices/ListView/EdgeDevicesDatatable/columns/index.tsx

@@ -1,6 +0,0 @@
-import { name } from './name';
-import { heartbeat } from './heartbeat';
-import { group } from './group';
-import { actions } from './actions';
-
-export const columns = [name, heartbeat, group, actions];

app/react/edge/edge-devices/ListView/EdgeDevicesDatatable/columns/name.tsx

@@ -1,39 +0,0 @@
-import { CellProps, Column } from 'react-table';
-
-import { Environment } from '@/react/portainer/environments/types';
-
-import { Link } from '@@/Link';
-import { ExpandingCell } from '@@/datatables/ExpandingCell';
-
-import { useRowContext } from './RowContext';
-
-export const name: Column<Environment> = {
-  Header: 'Name',
-  accessor: (row) => row.Name,
-  id: 'name',
-  Cell: NameCell,
-  disableFilters: true,
-  Filter: () => null,
-  canHide: false,
-  sortType: 'string',
-};
-
-export function NameCell({ value: name, row }: CellProps<Environment>) {
-  const { isOpenAmtEnabled } = useRowContext();
-  const showExpandedRow = !!(
-    isOpenAmtEnabled &&
-    row.original.AMTDeviceGUID &&
-    row.original.AMTDeviceGUID.length > 0
-  );
-  return (
-    <ExpandingCell row={row} showExpandArrow={showExpandedRow}>
-      <Link
-        to="portainer.endpoints.endpoint"
-        params={{ id: row.original.Id }}
-        title={name}
-      >
-        {name}
-      </Link>
-    </ExpandingCell>
-  );
-}

app/react/edge/edge-devices/ListView/EdgeDevicesDatatable/datatable-store.ts

@@ -1,14 +0,0 @@
-import {
-  refreshableSettings,
-  hiddenColumnsSettings,
-  createPersistedStore,
-} from '@@/datatables/types';
-
-import { TableSettings } from './types';
-
-export function createStore(storageKey: string) {
-  return createPersistedStore<TableSettings>(storageKey, 'Name', (set) => ({
-    ...hiddenColumnsSettings(set),
-    ...refreshableSettings(set),
-  }));
-}

app/react/edge/edge-devices/ListView/EdgeDevicesDatatable/types.ts

@@ -1,10 +0,0 @@
-import {
-  BasicTableSettings,
-  RefreshableTableSettings,
-  SettableColumnsTableSettings,
-} from '@@/datatables/types';
-
-export interface TableSettings
-  extends BasicTableSettings,
-    SettableColumnsTableSettings,
-    RefreshableTableSettings {}

app/react/edge/edge-devices/ListView/ListView.tsx

@@ -1,60 +0,0 @@
-import { useIsMutating } from 'react-query';
-
-import { useSettings } from '@/react/portainer/settings/queries';
-import { useGroups } from '@/react/portainer/environments/environment-groups/queries';
-import { activateDeviceMutationKey } from '@/portainer/hostmanagement/open-amt/queries';
-
-import { PageHeader } from '@@/PageHeader';
-import { ViewLoading } from '@@/ViewLoading';
-
-import { EdgeDevicesDatatable } from './EdgeDevicesDatatable/EdgeDevicesDatatable';
-
-export function ListView() {
-  const isActivatingDevice = useIsActivatingDevice();
-  const settingsQuery = useSettings();
-  const groupsQuery = useGroups();
-
-  if (!settingsQuery.data || !groupsQuery.data) {
-    return null;
-  }
-
-  const settings = settingsQuery.data;
-
-  return (
-    <>
-      <PageHeader
-        title="Edge Devices"
-        reload
-        breadcrumbs={[{ label: 'EdgeDevices' }]}
-      />
-
-      {isActivatingDevice ? (
-        <ViewLoading message="Activating Active Management Technology on selected device..." />
-      ) : (
-        <EdgeDevicesDatatable
-          isFdoEnabled={
-            settings.EnableEdgeComputeFeatures &&
-            settings.fdoConfiguration.enabled
-          }
-          showWaitingRoomLink={
-            process.env.PORTAINER_EDITION === 'BE' &&
-            settings.EnableEdgeComputeFeatures &&
-            !settings.TrustOnFirstConnect
-          }
-          isOpenAmtEnabled={
-            settings.EnableEdgeComputeFeatures &&
-            settings.openAMTConfiguration.enabled
-          }
-          mpsServer={settings.openAMTConfiguration.mpsServer}
-          groups={groupsQuery.data}
-          storageKey="edgeDevices"
-        />
-      )}
-    </>
-  );
-}
-
-function useIsActivatingDevice() {
-  const count = useIsMutating({ mutationKey: activateDeviceMutationKey });
-  return count > 0;
-}

app/react/edge/edge-devices/ListView/index.ts

@@ -1 +0,0 @@
-export { ListView } from './ListView';

app/react/edge/edge-devices/open-amt/types.ts

@@ -31,10 +31,21 @@ export interface DeviceFeatures {
   userConsent: string;
 }
 
+export enum PowerStateCode {
+  On = 2,
+  SleepLight = 3,
+  SleepDeep = 4,
+  OffHard = 6,
+  Hibernate = 7,
+  OffSoft = 8,
+  PowerCycle = 9,
+  OffHardGraceful = 13,
+}
+
 export type Device = {
   guid: string;
   hostname: string;
-  powerState: number;
+  powerState: PowerStateCode;
   connectionStatus: boolean;
   features?: DeviceFeatures;
 };

app/react/edge/edge-devices/open-amt/useAMTDevices.tsx

@@ -0,0 +1,33 @@
+import { useQuery } from 'react-query';
+
+import { EnvironmentId } from '@/react/portainer/environments/types';
+import { withError } from '@/react-tools/react-query';
+import axios, { parseAxiosError } from '@/portainer/services/axios';
+
+import { Device } from './types';
+
+export function useAMTDevices(
+  environmentId: EnvironmentId,
+  { enabled }: { enabled?: boolean } = {}
+) {
+  return useQuery(
+    ['amt_devices', environmentId],
+    () => getDevices(environmentId),
+    {
+      ...withError('Failed retrieving AMT devices'),
+      enabled,
+    }
+  );
+}
+
+async function getDevices(environmentId: EnvironmentId) {
+  try {
+    const { data: devices } = await axios.get<Device[]>(
+      `/open_amt/${environmentId}/devices`
+    );
+
+    return devices;
+  } catch (e) {
+    throw parseAxiosError(e as Error, 'Unable to retrieve device information');
+  }
+}

app/react/edge/edge-devices/open-amt/useActivateDevicesMutation.ts

@@ -0,0 +1,22 @@
+import { useMutation } from 'react-query';
+
+import { promiseSequence } from '@/portainer/helpers/promise-utils';
+import { mutationOptions, withError } from '@/react-tools/react-query';
+import { EnvironmentId } from '@/react/portainer/environments/types';
+import axios, { parseAxiosError } from '@/portainer/services/axios';
+
+export function useActivateDevicesMutation() {
+  return useMutation(
+    (environmentIds: EnvironmentId[]) =>
+      promiseSequence(environmentIds.map((id) => () => activateDevice(id))),
+    mutationOptions(withError('Unable to associate with OpenAMT'))
+  );
+}
+
+async function activateDevice(environmentId: EnvironmentId) {
+  try {
+    await axios.post(`/open_amt/${environmentId}/activate`);
+  } catch (e) {
+    throw parseAxiosError(e as Error, 'Unable to activate device');
+  }
+}

app/react/edge/edge-devices/open-amt/useExecuteAMTDeviceActionMutation.tsx

@@ -0,0 +1,40 @@
+import { useMutation, useQueryClient } from 'react-query';
+
+import axios, { parseAxiosError } from '@/portainer/services/axios';
+import { withError } from '@/react-tools/react-query';
+import { EnvironmentId } from '@/react/portainer/environments/types';
+
+export enum DeviceAction {
+  PowerOn = 'power on',
+  PowerOff = 'power off',
+  Restart = 'restart',
+}
+
+export function useExecuteAMTDeviceActionMutation() {
+  const queryClient = useQueryClient();
+  return useMutation(executeDeviceAction, {
+    onSuccess(_data, { environmentId }) {
+      queryClient.invalidateQueries([['amt_devices', environmentId]]);
+    },
+    ...withError('Unable to execute device action'),
+  });
+}
+
+async function executeDeviceAction({
+  action,
+  deviceGUID,
+  environmentId,
+}: {
+  environmentId: EnvironmentId;
+  deviceGUID: string;
+  action: DeviceAction;
+}) {
+  try {
+    await axios.post(
+      `/open_amt/${environmentId}/devices/${deviceGUID}/action`,
+      { action }
+    );
+  } catch (e) {
+    throw parseAxiosError(e as Error, 'Unable to execute device action');
+  }
+}

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);
+  }
+}

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();
+      },
+    });
+  }
+}

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>
+      )}
+    </>
+  );
+}

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>
-  );
-}

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>
+      {children.map((child, index) => (
-      <div className="border-x-0 border-y border-gray-5 border-solid">
+        <div
-        {children[1] || null}
+          key={index}
+          className={clsx({
+            'border-0 border-b border-solid border-b-gray-5':
+              index < children.length - 1,
+          })}
+        >
+          {child}
         </div>
-      <div>{children[2] || null}</div>
+      ))}
     </div>
   );
 }

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>

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,6 +49,7 @@ export function EnvironmentItem({
   const tags = useEnvironmentTagNames(environment.TagIds);
 
   return (
+    <div className="relative">
       <Link
         to={getDashboardRoute(environment)}
         params={{
@@ -57,7 +59,7 @@ export function EnvironmentItem({
         className="no-link"
       >
         <button
-        className="blocklist-item flex items-stretch overflow-hidden min-h-[100px] bg-transparent w-full"
+          className="blocklist-item flex items-stretch overflow-hidden min-h-[110px] bg-transparent w-full !m-0 !pr-56"
           onClick={onClickBrowse}
           type="button"
         >
@@ -101,31 +103,28 @@ export function EnvironmentItem({
                 <Tag className="icon icon-sm" aria-hidden="true" />
                 {tags}
               </span>
-            {isEdge && (
+              <EnvironmentTypeTag environment={environment} />
-              <>
+              <AgentDetails environment={environment} />
-                <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>
-                )}
-              </>
-            )}
             </div>
             <EnvironmentStats environment={environment} />
           </div>
+        </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>
         <EditButtons environment={environment} />
-      </button>
+      </div>
-    </Link>
+    </div>
   );
 }
 

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')}

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 '';
+}

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 {

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 { TableContainer, TableTitle } from '@@/datatables';
-import {
-  FilterSearchBar,
-  useSearchBarState,
-} from '@@/datatables/FilterSearchBar';
 import { Button } from '@@/buttons';
 import { PaginationControls } from '@@/PaginationControls';
+import { SearchBar, useSearchBarState } from '@@/datatables/SearchBar';
 
-import { SortbySelector } from './SortbySelector';
+import { useHomePageFilter } from './HomepageFilter';
-import { HomepageFilter, useHomePageFilter } from './HomepageFilter';
+import { ConnectionType, Filter } from './types';
-import { 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,165 +128,91 @@ export function EnvironmentList({ onClickBrowse, onRefresh }: Props) {
     {
       page,
       pageLimit,
-      sort: sortByFilter,
+      ...queryWithSort,
-      order: sortByDescending ? 'desc' : 'asc',
-      ...environmentsQueryParams,
     },
     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} />}
+      <div className="row">
+        <div className="col-sm-12">
           <TableContainer>
-        <TableTitle icon={HardDrive} label="Environments">
+            <div className="px-4">
-          {isBE && updateAvailable && <UpdateBadge />}
+              <TableTitle
-        </TableTitle>
+                className="!px-0"
-
+                icon={HardDrive}
-        <TableActions className={styles.actionBar}>
+                label="Environments"
-          <div className={styles.description}>
+                description={
+                  <div className="w-full text-sm text-gray-7">
                     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
+                <div className="flex gap-4">
-                    className="lucide icon-sm icon-white"
+                  <SearchBar
-                    aria-hidden="true"
+                    className="!bg-transparent !m-0"
-                  />
-                  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>
+                  {isAdmin && (
-          </div>
+                    <Button
-        </TableActions>
+                      onClick={onRefresh}
-        <div className={styles.filterContainer}>
+                      data-cy="home-refreshEndpointsButton"
-          <div className={styles.filterLeft}>
+                      size="medium"
-            <HomepageFilter
+                      color="light"
-              filterOptions={platformTypeOptions}
+                      icon={RefreshCcw}
-              onChange={setPlatformTypes}
+                      className="!m-0"
-              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
+                      Refresh
-          </button>
+                    </Button>
-          <div className={styles.filterRight}>
+                  )}
-            <SortbySelector
+                  <KubeconfigButton
-              filterOptions={sortByOptions}
+                    environments={environments}
-              onChange={sortOnchange}
+                    envQueryParams={queryWithSort}
-              onDescending={sortOnDescending}
+                  />
-              placeHolder="Sort By"
+
+                  <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}
-              value={sortByState}
+                  sortByState={sortByState}
                 />
               </div>
-        </div>
+              <div
-        <div className="blocklist" data-cy="home-endpointList">
+                className="blocklist !p-0 mt-5 !space-y-2"
+                data-cy="home-endpointList"
+              >
                 {renderItems(
                   isLoading,
                   totalCount,
@@ -317,7 +221,8 @@ export function EnvironmentList({ onClickBrowse, onRefresh }: Props) {
                       key={env.Id}
                       environment={env}
                       groupName={
-                  groupsQuery.data?.find((g) => g.Id === env.GroupId)?.Name
+                        groupsQuery.data?.find((g) => g.Id === env.GroupId)
+                          ?.Name
                       }
                       onClickBrowse={() => onClickBrowse(env)}
                       isActive={env.Id === currentEnvironmentId}
@@ -325,7 +230,6 @@ export function EnvironmentList({ onClickBrowse, onRefresh }: Props) {
                   ))
                 )}
               </div>
-
               <TableFooter>
                 <PaginationControls
                   showAll={totalCount <= 100}
@@ -336,7 +240,10 @@ export function EnvironmentList({ onClickBrowse, onRefresh }: Props) {
                   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,

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))
+  );
+}

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>

app/react/portainer/HomeView/EnvironmentList/SortbySelector.tsx

@@ -27,8 +27,7 @@ export function SortbySelector({
 }: Props) {
   const sorted = sortByButton && !!value;
   return (
-    <div className={styles.sortByContainer}>
+    <div className="flex items-center gap-1 justify-end">
-      <div className={styles.sortByElement}>
       <Select
         placeholder={placeHolder}
         options={filterOptions}
@@ -36,10 +35,9 @@ export function SortbySelector({
         isClearable
         value={value}
       />
-      </div>
+
-      <div className={styles.sortByElement}>
       <button
-          className={clsx(styles.sortButton, 'h-[34px]')}
+        className={clsx(styles.sortButton, 'h-[34px] !m-0')}
         type="button"
         disabled={!sorted}
         onClick={(e) => {
@@ -50,6 +48,5 @@ export function SortbySelector({
         <TableHeaderSortIcons sorted={sorted} descending={sortByDescending} />
       </button>
     </div>
-    </div>
   );
 }

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,
+}

app/react/portainer/environments/queries/index.ts

@@ -0,0 +1,2 @@
+export { useEnvironment } from './useEnvironment';
+export { useEnvironmentList } from './useEnvironmentList';

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) {

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';

app/react/sidebar/EdgeComputeSidebar.tsx

@@ -1,17 +1,13 @@
 import { Box, Clock, LayoutGrid, Layers } from 'lucide-react';
 
+import { isBE } from '../portainer/feature-flags/feature-flags.service';
+
 import { SidebarItem } from './SidebarItem';
 import { SidebarSection } from './SidebarSection';
 
 export function EdgeComputeSidebar() {
   return (
     <SidebarSection title="Edge compute">
-      <SidebarItem
-        to="edge.devices"
-        label="Edge Devices"
-        icon={Box}
-        data-cy="portainerSidebar-edgeDevices"
-      />
       <SidebarItem
         to="edge.groups"
         label="Edge Groups"
@@ -30,6 +26,14 @@ export function EdgeComputeSidebar() {
         icon={Clock}
         data-cy="portainerSidebar-edgeJobs"
       />
+      {isBE && (
+        <SidebarItem
+          to="edge.devices.waiting-room"
+          label="Waiting Room"
+          icon={Box}
+          data-cy="portainerSidebar-edgeDevicesWaitingRoom"
+        />
+      )}
     </SidebarSection>
   );
 }