feat(intel): Enable OpenAMT and FDO capabilities (#6212)

* feat(openamt): add AMT Devices information in Environments view [INT-8] (#6169)

* feat(openamt): add AMT Devices Ouf of Band Managamenet actions  [INT-9] (#6171)

* feat(openamt): add AMT Devices KVM Connection [INT-10] (#6179)

* feat(openamt): Enhance the Environments MX to activate OpenAMT on compatible environments [INT-7] (#6196)

* feat(openamt): Enable KVM by default [INT-25] (#6228)

* feat(fdo): implement the FDO configuration settings INT-19 (#6238)

feat(fdo): implement the FDO configuration settings INT-19

* feat(fdo): implement Owner client INT-17 (#6231)

feat(fdo): implement Owner client INT-17

* feat(openamt): hide wireless config in OpenAMT form (#6250)

* feat(openamt): Increase OpenAMT timeouts [INT-30] (#6253)

* feat(openamt): Disable the ability to use KVM and OOB actions on a MPS disconnected device [INT-36] (#6254)

* feat(fdo): add import device UI [INT-20] (#6240)

feat(fdo): add import device UI INT-20

* refactor(fdo): fix develop merge issues

* feat(openamt): Do not fetch OpenAMT details for an unassociated Edge endpoint (#6273)

* fix(intel): Fix switches params (#6282)

* feat(openamt): preload existing AMT settings (#6283)

* feat(openamt): Better UI/UX for AMT activation loading [INT-39] (#6290)

* feat(openamt): Remove wireless config related code [INT-41] (#6291)

* yarn install

* feat(openamt): change kvm redirection for pop up, always enable features [INT-37] (#6292)

* feat(openamt): change kvm redirection for pop up, always enable features [INT-37] (#6293)

* feat(openmt): use .ts services with axios for OpenAMT (#6312)

* Minor code cleanup.

* fix(fdo): move the FDO client code to the hostmanagement folder INT-44 (#6345)

* refactor(intel): Add Edge Compute Settings view (#6351)

* feat(fdo): add FDO profiles INT-22 (#6363)

feat(fdo): add FDO profiles INT-22

* fix(fdo): fix incorrect profile URL INT-45 (#6377)

* fixed husky version

* fix go.mod with go mod tidy

* feat(edge): migrate OpenAMT devices views to Edge Devices [EE-2322] (#6373)

* feat(intel): OpenAMT UI/UX adjustments (#6394)

* only allow edge agent as edge device

* show all edge agent environments on Edge Devices view

* feat(fdo): add the ability to import multiple ownership vouchers at once EE-2324 (#6395)

* fix(edge): settings edge compute alert (#6402)

* remove pagination, add useMemo for devices result array (#6409)

* feat(edge): minor Edge Devices (AMT) UI fixes (#6410)

* chore(eslint): fix versions

* chore(app): reformat codebase

* change add edge agent modal behaviour, fix yarn.lock

* fix use pagination

* remove extractedTranslations folder

* feat(edge): add FDO Profiles Datatable [EE-2406] (#6415)

* feat(edge): add KVM workaround tooltip (#6441)

* feat(edge): Add default FDO profile (#6450)

* feat(edge): add settings to disable trust on first connect and enforce Edge ID INT-1 EE-2410 (#6429)

Co-authored-by: andres-portainer <91705312+andres-portainer@users.noreply.github.com>
Co-authored-by: Anthony Lapenna <anthony.lapenna@portainer.io>
Co-authored-by: andres-portainer <andres-portainer@users.noreply.github.com>
Co-authored-by: Chaim Lev-Ari <chiptus@gmail.com>

app/edge/devices/components/EdgeDevicesDatatable/EdgeDevicesDatatable.module.css

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

app/edge/devices/components/EdgeDevicesDatatable/EdgeDevicesDatatable.tsx

@@ -0,0 +1,265 @@
+import { useEffect } from 'react';
+import {
+  useTable,
+  useExpanded,
+  useSortBy,
+  useFilters,
+  useGlobalFilter,
+  usePagination,
+} from 'react-table';
+import { useRowSelectColumn } from '@lineup-lite/hooks';
+
+import { Environment } from '@/portainer/environments/types';
+import { PaginationControls } from '@/portainer/components/pagination-controls';
+import {
+  Table,
+  TableActions,
+  TableContainer,
+  TableHeaderRow,
+  TableRow,
+  TableSettingsMenu,
+  TableTitle,
+  TableTitleActions,
+} from '@/portainer/components/datatables/components';
+import { multiple } from '@/portainer/components/datatables/components/filter-types';
+import { useTableSettings } from '@/portainer/components/datatables/components/useTableSettings';
+import { ColumnVisibilityMenu } from '@/portainer/components/datatables/components/ColumnVisibilityMenu';
+import { useRepeater } from '@/portainer/components/datatables/components/useRepeater';
+import { useDebounce } from '@/portainer/hooks/useDebounce';
+import {
+  useSearchBarContext,
+  SearchBar,
+} from '@/portainer/components/datatables/components/SearchBar';
+import { useRowSelect } from '@/portainer/components/datatables/components/useRowSelect';
+import { TableFooter } from '@/portainer/components/datatables/components/TableFooter';
+import { SelectedRowsCount } from '@/portainer/components/datatables/components/SelectedRowsCount';
+import { EdgeDeviceTableSettings } from '@/edge/devices/types';
+import { EdgeDevicesDatatableSettings } from '@/edge/devices/components/EdgeDevicesDatatable/EdgeDevicesDatatableSettings';
+import { EdgeDevicesDatatableActions } from '@/edge/devices/components/EdgeDevicesDatatable/EdgeDevicesDatatableActions';
+import { AMTDevicesDatatable } from '@/edge/devices/components/AMTDevicesDatatable/AMTDevicesDatatable';
+import { TextTip } from '@/portainer/components/Tip/TextTip';
+
+import { RowProvider } from './columns/RowContext';
+import { useColumns } from './columns';
+import styles from './EdgeDevicesDatatable.module.css';
+
+export interface EdgeDevicesTableProps {
+  isEnabled: boolean;
+  isFdoEnabled: boolean;
+  isOpenAmtEnabled: boolean;
+  disableTrustOnFirstConnect: boolean;
+  mpsServer: string;
+  dataset: Environment[];
+  onRefresh(): Promise<void>;
+  setLoadingMessage(message: string): void;
+}
+
+export function EdgeDevicesDatatable({
+  isFdoEnabled,
+  isOpenAmtEnabled,
+  disableTrustOnFirstConnect,
+  mpsServer,
+  dataset,
+  onRefresh,
+  setLoadingMessage,
+}: EdgeDevicesTableProps) {
+  const { settings, setTableSettings } =
+    useTableSettings<EdgeDeviceTableSettings>();
+  const [searchBarValue, setSearchBarValue] = useSearchBarContext();
+
+  const columns = useColumns();
+
+  useRepeater(settings.autoRefreshRate, onRefresh);
+
+  const {
+    getTableProps,
+    getTableBodyProps,
+    headerGroups,
+    page,
+    prepareRow,
+    selectedFlatRows,
+    allColumns,
+    gotoPage,
+    setPageSize,
+    setHiddenColumns,
+    setGlobalFilter,
+    state: { pageIndex, pageSize },
+  } = useTable<Environment>(
+    {
+      defaultCanFilter: false,
+      columns,
+      data: dataset,
+      filterTypes: { multiple },
+      initialState: {
+        pageSize: settings.pageSize || 10,
+        hiddenColumns: settings.hiddenColumns,
+        sortBy: [settings.sortBy],
+        globalFilter: searchBarValue,
+      },
+      isRowSelectable() {
+        return true;
+      },
+      autoResetExpanded: false,
+      autoResetSelectedRows: false,
+      selectColumnWidth: 5,
+    },
+    useFilters,
+    useGlobalFilter,
+    useSortBy,
+    useExpanded,
+    usePagination,
+    useRowSelect,
+    useRowSelectColumn
+  );
+
+  const debouncedSearchValue = useDebounce(searchBarValue);
+
+  useEffect(() => {
+    setGlobalFilter(debouncedSearchValue);
+  }, [debouncedSearchValue, setGlobalFilter]);
+
+  const columnsToHide = allColumns.filter((colInstance) => {
+    const columnDef = columns.find((c) => c.id === colInstance.id);
+    return columnDef?.canHide;
+  });
+
+  const tableProps = getTableProps();
+  const tbodyProps = getTableBodyProps();
+
+  const someDeviceHasAMTActivated = dataset.some(
+    (environment) =>
+      environment.AMTDeviceGUID && environment.AMTDeviceGUID !== ''
+  );
+
+  return (
+    <TableContainer>
+      <TableTitle icon="fa-plug" label="Edge Devices">
+        <TableTitleActions>
+          <ColumnVisibilityMenu<Environment>
+            columns={columnsToHide}
+            onChange={handleChangeColumnsVisibility}
+            value={settings.hiddenColumns}
+          />
+
+          <TableSettingsMenu>
+            <EdgeDevicesDatatableSettings />
+          </TableSettingsMenu>
+        </TableTitleActions>
+      </TableTitle>
+
+      <TableActions>
+        <EdgeDevicesDatatableActions
+          selectedItems={selectedFlatRows.map((row) => row.original)}
+          isFDOEnabled={isFdoEnabled}
+          isOpenAMTEnabled={isOpenAmtEnabled}
+          setLoadingMessage={setLoadingMessage}
+        />
+      </TableActions>
+
+      {someDeviceHasAMTActivated && (
+        <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">
+              site
+            </a>{' '}
+            and add to your trusted site list
+          </TextTip>
+        </div>
+      )}
+
+      <SearchBar value={searchBarValue} onChange={handleSearchBarChange} />
+
+      <Table
+        className={tableProps.className}
+        role={tableProps.role}
+        style={tableProps.style}
+      >
+        <thead>
+          {headerGroups.map((headerGroup) => {
+            const { key, className, role, style } =
+              headerGroup.getHeaderGroupProps();
+
+            return (
+              <TableHeaderRow<Environment>
+                key={key}
+                className={className}
+                role={role}
+                style={style}
+                headers={headerGroup.headers}
+                onSortChange={handleSortChange}
+              />
+            );
+          })}
+        </thead>
+        <tbody
+          className={tbodyProps.className}
+          role={tbodyProps.role}
+          style={tbodyProps.style}
+        >
+          {page.map((row) => {
+            prepareRow(row);
+            const { key, className, role, style } = row.getRowProps();
+
+            return (
+              <RowProvider
+                key={key}
+                disableTrustOnFirstConnect={disableTrustOnFirstConnect}
+              >
+                <TableRow<Environment>
+                  cells={row.cells}
+                  key={key}
+                  className={className}
+                  role={role}
+                  style={style}
+                />
+                {row.isExpanded && (
+                  <tr>
+                    <td />
+                    <td colSpan={row.cells.length - 1}>
+                      <AMTDevicesDatatable environmentId={row.original.Id} />
+                    </td>
+                  </tr>
+                )}
+              </RowProvider>
+            );
+          })}
+        </tbody>
+      </Table>
+
+      <TableFooter>
+        <SelectedRowsCount value={selectedFlatRows.length} />
+        <PaginationControls
+          showAll
+          pageLimit={pageSize}
+          page={pageIndex + 1}
+          onPageChange={(p) => gotoPage(p - 1)}
+          totalCount={dataset.length}
+          onPageLimitChange={handlePageSizeChange}
+        />
+      </TableFooter>
+    </TableContainer>
+  );
+
+  function handlePageSizeChange(pageSize: number) {
+    setPageSize(pageSize);
+    setTableSettings((settings) => ({ ...settings, pageSize }));
+  }
+
+  function handleChangeColumnsVisibility(hiddenColumns: string[]) {
+    setHiddenColumns(hiddenColumns);
+    setTableSettings((settings) => ({ ...settings, hiddenColumns }));
+  }
+
+  function handleSearchBarChange(value: string) {
+    setSearchBarValue(value);
+  }
+
+  function handleSortChange(id: string, desc: boolean) {
+    setTableSettings((settings) => ({
+      ...settings,
+      sortBy: { id, desc },
+    }));
+  }
+}

app/edge/devices/components/EdgeDevicesDatatable/EdgeDevicesDatatableActions.tsx

@@ -0,0 +1,173 @@
+import { useRouter } from '@uirouter/react';
+
+import type { Environment } from '@/portainer/environments/types';
+import { Button } from '@/portainer/components/Button';
+import { confirmAsync } from '@/portainer/services/modal.service/confirm';
+import { promptAsync } from '@/portainer/services/modal.service/prompt';
+import * as notifications from '@/portainer/services/notifications';
+import { activateDevice } from '@/portainer/hostmanagement/open-amt/open-amt.service';
+import { deleteEndpoint } from '@/portainer/environments/environment.service';
+
+interface Props {
+  selectedItems: Environment[];
+  isFDOEnabled: boolean;
+  isOpenAMTEnabled: boolean;
+  setLoadingMessage(message: string): void;
+}
+
+export function EdgeDevicesDatatableActions({
+  selectedItems,
+  isOpenAMTEnabled,
+  isFDOEnabled,
+  setLoadingMessage,
+}: Props) {
+  const router = useRouter();
+
+  return (
+    <div className="actionBar">
+      <Button
+        disabled={selectedItems.length < 1}
+        color="danger"
+        onClick={() => onDeleteEdgeDeviceClick()}
+      >
+        <i className="fa fa-trash-alt space-right" aria-hidden="true" />
+        Remove
+      </Button>
+
+      <Button onClick={() => onAddNewDeviceClick()}>
+        <i className="fa fa-plus-circle space-right" aria-hidden="true" />
+        Add Device
+      </Button>
+
+      {isOpenAMTEnabled && (
+        <Button
+          disabled={selectedItems.length !== 1}
+          onClick={() => onAssociateOpenAMTClick(selectedItems)}
+        >
+          <i className="fa fa-link space-right" aria-hidden="true" />
+          Associate with OpenAMT
+        </Button>
+      )}
+    </div>
+  );
+
+  async function onDeleteEdgeDeviceClick() {
+    const confirmed = await confirmAsync({
+      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() {
+    if (!isFDOEnabled) {
+      router.stateService.go('portainer.endpoints.newEdgeDevice');
+      return;
+    }
+
+    const result = await promptAsync({
+      title: 'How would you like to add an Edge Device?',
+      inputType: 'radio',
+      inputOptions: [
+        {
+          text: 'Provision bare-metal using Intel FDO',
+          value: 'FDO',
+        },
+        {
+          text: 'Deploy agent manually',
+          value: 'MANUAL',
+        },
+      ],
+      buttons: {
+        confirm: {
+          label: 'Confirm',
+          className: 'btn-primary',
+        },
+      },
+    });
+
+    switch (result) {
+      case 'FDO':
+        router.stateService.go('portainer.endpoints.importDevice');
+        break;
+      case 'MANUAL':
+        router.stateService.go('portainer.endpoints.newEdgeDevice');
+        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;
+    }
+
+    try {
+      setLoadingMessage(
+        'Activating Active Management Technology on selected device...'
+      );
+      await activateDevice(selectedEnvironment.Id);
+      notifications.success(
+        'Successfully associated with OpenAMT',
+        selectedEnvironment.Name
+      );
+    } catch (err) {
+      notifications.error(
+        'Failure',
+        err as Error,
+        'Unable to associate with OpenAMT'
+      );
+    } finally {
+      setLoadingMessage('');
+    }
+  }
+}

app/edge/devices/components/EdgeDevicesDatatable/EdgeDevicesDatatableContainer.tsx

@@ -0,0 +1,42 @@
+import { react2angular } from '@/react-tools/react2angular';
+import { TableSettingsProvider } from '@/portainer/components/datatables/components/useTableSettings';
+import { SearchBarProvider } from '@/portainer/components/datatables/components/SearchBar';
+
+import {
+  EdgeDevicesDatatable,
+  EdgeDevicesTableProps,
+} from './EdgeDevicesDatatable';
+
+export function EdgeDevicesDatatableContainer({
+  ...props
+}: EdgeDevicesTableProps) {
+  const defaultSettings = {
+    autoRefreshRate: 0,
+    hiddenQuickActions: [],
+    hiddenColumns: [],
+    pageSize: 10,
+    sortBy: { id: 'state', desc: false },
+  };
+
+  return (
+    <TableSettingsProvider defaults={defaultSettings} storageKey="edgeDevices">
+      <SearchBarProvider storageKey="edgeDevices">
+        {/* eslint-disable-next-line react/jsx-props-no-spreading */}
+        <EdgeDevicesDatatable {...props} />
+      </SearchBarProvider>
+    </TableSettingsProvider>
+  );
+}
+
+export const EdgeDevicesDatatableAngular = react2angular(
+  EdgeDevicesDatatableContainer,
+  [
+    'dataset',
+    'onRefresh',
+    'setLoadingMessage',
+    'isFdoEnabled',
+    'disableTrustOnFirstConnect',
+    'isOpenAmtEnabled',
+    'mpsServer',
+  ]
+);

app/edge/devices/components/EdgeDevicesDatatable/EdgeDevicesDatatableSettings.tsx

@@ -0,0 +1,19 @@
+import { TableSettingsMenuAutoRefresh } from '@/portainer/components/datatables/components/TableSettingsMenuAutoRefresh';
+import { useTableSettings } from '@/portainer/components/datatables/components/useTableSettings';
+import { EdgeDeviceTableSettings } from '@/edge/devices/types';
+
+export function EdgeDevicesDatatableSettings() {
+  const { settings, setTableSettings } =
+    useTableSettings<EdgeDeviceTableSettings>();
+
+  return (
+    <TableSettingsMenuAutoRefresh
+      value={settings.autoRefreshRate}
+      onChange={handleRefreshRateChange}
+    />
+  );
+
+  function handleRefreshRateChange(autoRefreshRate: number) {
+    setTableSettings({ autoRefreshRate });
+  }
+}

app/edge/devices/components/EdgeDevicesDatatable/columns/RowContext.tsx

@@ -0,0 +1,32 @@
+import { createContext, useContext, useMemo, PropsWithChildren } from 'react';
+
+interface RowContextState {
+  disableTrustOnFirstConnect: boolean;
+}
+
+const RowContext = createContext<RowContextState | null>(null);
+
+export interface RowProviderProps {
+  disableTrustOnFirstConnect: boolean;
+}
+
+export function RowProvider({
+  disableTrustOnFirstConnect,
+  children,
+}: PropsWithChildren<RowProviderProps>) {
+  const state = useMemo(
+    () => ({ disableTrustOnFirstConnect }),
+    [disableTrustOnFirstConnect]
+  );
+
+  return <RowContext.Provider value={state}>{children}</RowContext.Provider>;
+}
+
+export function useRowContext() {
+  const context = useContext(RowContext);
+  if (!context) {
+    throw new Error('should be nested under RowProvider');
+  }
+
+  return context;
+}

app/edge/devices/components/EdgeDevicesDatatable/columns/actions.tsx

@@ -0,0 +1,107 @@
+import { CellProps, Column } from 'react-table';
+import { MenuItem, MenuLink } from '@reach/menu-button';
+import { useRouter, useSref } from '@uirouter/react';
+
+import { Environment } from '@/portainer/environments/types';
+import { ActionsMenu } from '@/portainer/components/datatables/components/ActionsMenu';
+import {
+  snapshotEndpoint,
+  trustEndpoint,
+} from '@/portainer/environments/environment.service';
+import * as notifications from '@/portainer/services/notifications';
+import { getRoute } from '@/portainer/environments/utils';
+import { confirmAsync } from '@/portainer/services/modal.service/confirm';
+import { useRowContext } from '@/edge/devices/components/EdgeDevicesDatatable/columns/RowContext';
+
+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 = getRoute(environment);
+  const browseLinkProps = useSref(environmentRoute, {
+    id: environment.Id,
+    endpointId: environment.Id,
+  });
+
+  const showRefreshSnapshot = false; // remove and show MenuItem when feature is available
+
+  const { disableTrustOnFirstConnect } = useRowContext();
+
+  return (
+    <ActionsMenu>
+      <MenuLink href={browseLinkProps.href} onClick={browseLinkProps.onClick}>
+        Browse
+      </MenuLink>
+      {showRefreshSnapshot && (
+        <MenuItem hidden onSelect={() => handleRefreshSnapshotClick()}>
+          Refresh Snapshot
+        </MenuItem>
+      )}
+      {disableTrustOnFirstConnect && !environment.UserTrusted && (
+        <MenuLink onClick={trustDevice}>Trust</MenuLink>
+      )}
+    </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();
+    }
+  }
+
+  async function trustDevice() {
+    const confirmed = await confirmAsync({
+      title: '',
+      message: `Mark ${environment.Name} as trusted?`,
+      buttons: {
+        cancel: {
+          label: 'Cancel',
+          className: 'btn-default',
+        },
+        confirm: {
+          label: 'Trust',
+          className: 'btn-primary',
+        },
+      },
+    });
+
+    if (!confirmed) {
+      return;
+    }
+
+    try {
+      await trustEndpoint(environment.Id);
+    } catch (err) {
+      notifications.error(
+        'Failure',
+        err as Error,
+        'An error occurred while trusting the environment'
+      );
+    } finally {
+      await router.stateService.reload();
+    }
+  }
+}

app/edge/devices/components/EdgeDevicesDatatable/columns/group.tsx

@@ -0,0 +1,12 @@
+import { Column } from 'react-table';
+
+import { Environment } from '@/portainer/environments/types';
+import { DefaultFilter } from '@/portainer/components/datatables/components/Filter';
+
+export const group: Column<Environment> = {
+  Header: 'Group',
+  accessor: (row) => row.GroupName || '-',
+  id: 'groupName',
+  Filter: DefaultFilter,
+  canHide: true,
+};

app/edge/devices/components/EdgeDevicesDatatable/columns/heartbeat.tsx

@@ -0,0 +1,50 @@
+import { CellProps, Column } from 'react-table';
+import clsx from 'clsx';
+
+import { Environment, EnvironmentStatus } from '@/portainer/environments/types';
+import { useRowContext } from '@/edge/devices/components/EdgeDevicesDatatable/columns/RowContext';
+
+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>) {
+  const { disableTrustOnFirstConnect } = useRowContext();
+
+  if (disableTrustOnFirstConnect && !environment.UserTrusted) {
+    return <span className="label label-default">untrusted</span>;
+  }
+
+  if (!environment.LastCheckInDate) {
+    return (
+      <span className="label label-default">
+        <s>associated</s>
+      </span>
+    );
+  }
+
+  return (
+    <i
+      className={clsx(
+        'fa',
+        'fa-heartbeat',
+        environmentStatusLabel(environment.Status)
+      )}
+      aria-hidden="true"
+    />
+  );
+
+  function environmentStatusLabel(status: EnvironmentStatus) {
+    if (status === EnvironmentStatus.Up) {
+      return 'green-icon';
+    }
+    return 'orange-icon';
+  }
+}

app/edge/devices/components/EdgeDevicesDatatable/columns/index.tsx

@@ -0,0 +1,10 @@
+import { useMemo } from 'react';
+
+import { name } from './name';
+import { heartbeat } from './heartbeat';
+import { group } from './group';
+import { actions } from './actions';
+
+export function useColumns() {
+  return useMemo(() => [name, heartbeat, group, actions], []);
+}

app/edge/devices/components/EdgeDevicesDatatable/columns/name.tsx

@@ -0,0 +1,30 @@
+import { CellProps, Column, TableInstance } from 'react-table';
+
+import { Environment } from '@/portainer/environments/types';
+import { Link } from '@/portainer/components/Link';
+import { ExpandingCell } from '@/portainer/components/datatables/components/ExpandingCell';
+
+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<TableInstance>) {
+  return (
+    <ExpandingCell row={row}>
+      <Link
+        to="portainer.endpoints.endpoint"
+        params={{ id: row.original.Id }}
+        title={name}
+      >
+        {name}
+      </Link>
+    </ExpandingCell>
+  );
+}