mirror of
https://github.com/portainer/portainer.git
synced 2025-08-04 21:35:23 +02:00
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>
This commit is contained in:
Marcelo Rydel
GitHub
parent
3ed92e5fee
commit
2c4c638f46
170 changed files with 6834 additions and 819 deletions
|
|
@ -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/devices/components/AMTDevicesDatatable/useAMTDevices';
|
||||
import { RowProvider } from '@/edge/devices/components/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';
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -0,0 +1,108 @@
|
|||
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 '@/edge/devices/components/AMTDevicesDatatable/columns/RowContext';
|
||||
import { DeviceAction } from '@/edge/devices/types';
|
||||
|
||||
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();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -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,
|
||||
};
|
||||
|
|
@ -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], []);
|
||||
}
|
||||
|
|
@ -0,0 +1,56 @@
|
|||
import { CellProps, Column } from 'react-table';
|
||||
import clsx from 'clsx';
|
||||
|
||||
import { Device } from '@/portainer/hostmanagement/open-amt/model';
|
||||
import { useRowContext } from '@/edge/devices/components/AMTDevicesDatatable/columns/RowContext';
|
||||
import { PowerState, PowerStateCode } from '@/edge/devices/types';
|
||||
|
||||
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 '-';
|
||||
}
|
||||
}
|
||||
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
|
@ -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,
|
||||
};
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue