feat(edge-devices): set specific page to view [EE-2082] (#6869)

app/edge/EdgeDevices/EdgeDevicesView/AMTDevicesDatatable/AMTDevicesDatatable.tsx

@@ -0,0 +1,108 @@
+import { usePagination, useTable } from 'react-table';
+
+import {
+  Table,
+  TableContainer,
+  TableHeaderRow,
+  TableRow,
+} from '@/portainer/components/datatables/components';
+import { InnerDatatable } from '@/portainer/components/datatables/components/InnerDatatable';
+import { Device } from '@/portainer/hostmanagement/open-amt/model';
+import { useAMTDevices } from '@/edge/EdgeDevices/EdgeDevicesView/AMTDevicesDatatable/useAMTDevices';
+import { RowProvider } from '@/edge/EdgeDevices/EdgeDevicesView/AMTDevicesDatatable/columns/RowContext';
+import { EnvironmentId } from '@/portainer/environments/types';
+import PortainerError from '@/portainer/error';
+
+import { useColumns } from './columns';
+
+export interface AMTDevicesTableProps {
+  environmentId: EnvironmentId;
+}
+
+export function AMTDevicesDatatable({ environmentId }: AMTDevicesTableProps) {
+  const columns = useColumns();
+
+  const { isLoading, devices, error } = useAMTDevices(environmentId);
+
+  const { getTableProps, getTableBodyProps, headerGroups, page, prepareRow } =
+    useTable<Device>(
+      {
+        columns,
+        data: devices,
+      },
+      usePagination
+    );
+
+  const tableProps = getTableProps();
+  const tbodyProps = getTableBodyProps();
+
+  return (
+    <InnerDatatable>
+      <TableContainer>
+        <Table
+          className={tableProps.className}
+          role={tableProps.role}
+          style={tableProps.style}
+        >
+          <thead>
+            {headerGroups.map((headerGroup) => {
+              const { key, className, role, style } =
+                headerGroup.getHeaderGroupProps();
+              return (
+                <TableHeaderRow<Device>
+                  key={key}
+                  className={className}
+                  role={role}
+                  style={style}
+                  headers={headerGroup.headers}
+                />
+              );
+            })}
+          </thead>
+          <tbody
+            className={tbodyProps.className}
+            role={tbodyProps.role}
+            style={tbodyProps.style}
+          >
+            {!isLoading && devices && devices.length > 0 ? (
+              page.map((row) => {
+                prepareRow(row);
+                const { key, className, role, style } = row.getRowProps();
+
+                return (
+                  <RowProvider key={key} environmentId={environmentId}>
+                    <TableRow<Device>
+                      cells={row.cells}
+                      key={key}
+                      className={className}
+                      role={role}
+                      style={style}
+                    />
+                  </RowProvider>
+                );
+              })
+            ) : (
+              <tr>
+                <td colSpan={5} className="text-center text-muted">
+                  {userMessage(isLoading, error)}
+                </td>
+              </tr>
+            )}
+          </tbody>
+        </Table>
+      </TableContainer>
+    </InnerDatatable>
+  );
+}
+
+function userMessage(isLoading: boolean, error?: PortainerError) {
+  if (isLoading) {
+    return 'Loading...';
+  }
+
+  if (error) {
+    return error.message;
+  }
+
+  return 'No devices found';
+}

app/edge/EdgeDevices/EdgeDevicesView/AMTDevicesDatatable/columns/RowContext.tsx

@@ -0,0 +1,43 @@
+import {
+  createContext,
+  useContext,
+  useMemo,
+  useReducer,
+  PropsWithChildren,
+} from 'react';
+import { EnvironmentId } from 'Portainer/environments/types';
+
+interface RowContextState {
+  environmentId: EnvironmentId;
+  isLoading: boolean;
+  toggleIsLoading(): void;
+}
+
+const RowContext = createContext<RowContextState | null>(null);
+
+export interface RowProviderProps {
+  environmentId: EnvironmentId;
+}
+
+export function RowProvider({
+  environmentId,
+  children,
+}: PropsWithChildren<RowProviderProps>) {
+  const [isLoading, toggleIsLoading] = useReducer((state) => !state, false);
+
+  const state = useMemo(
+    () => ({ isLoading, toggleIsLoading, environmentId }),
+    [isLoading, toggleIsLoading, environmentId]
+  );
+
+  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/EdgeDevices/EdgeDevicesView/AMTDevicesDatatable/columns/actions.tsx

@@ -0,0 +1,114 @@
+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 { ActionsMenu } from '@/portainer/components/datatables/components/ActionsMenu';
+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 { ActionsMenuTitle } from '@/portainer/components/datatables/components/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/edge/EdgeDevices/EdgeDevicesView/AMTDevicesDatatable/columns/hostname.tsx

@@ -0,0 +1,13 @@
+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/edge/EdgeDevices/EdgeDevicesView/AMTDevicesDatatable/columns/index.tsx

@@ -0,0 +1,10 @@
+import { useMemo } from 'react';
+
+import { hostname } from './hostname';
+import { status } from './status';
+import { powerState } from './power-state';
+import { actions } from './actions';
+
+export function useColumns() {
+  return useMemo(() => [hostname, status, powerState, actions], []);
+}

app/edge/EdgeDevices/EdgeDevicesView/AMTDevicesDatatable/columns/power-state.tsx

@@ -0,0 +1,75 @@
+import { CellProps, Column } from 'react-table';
+import clsx from 'clsx';
+
+import { Device } from '@/portainer/hostmanagement/open-amt/model';
+
+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 && <i className="fa fa-cog fa-spin space-left" />}</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/edge/EdgeDevices/EdgeDevicesView/AMTDevicesDatatable/columns/status.tsx

@@ -0,0 +1,22 @@
+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/edge/EdgeDevices/EdgeDevicesView/AMTDevicesDatatable/useAMTDevices.tsx

@@ -0,0 +1,32 @@
+import { useEffect, useMemo } from 'react';
+import { useQuery } from 'react-query';
+
+import { getDevices } from '@/portainer/hostmanagement/open-amt/open-amt.service';
+import { EnvironmentId } from '@/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,
+  };
+}