- Introduced HostOTP component to handle one-time passcode generation and display. - Added OTPIcon for visual representation of OTP functionality. - Updated HostInfo component to integrate OTP modal and manage state for OTP actions. - Refactored Host model to include a new 'connect' action for OTP access. - Created new SVG and design assets for OTP icon representation. - Enhanced user experience with loading states and progress indicators for OTP validity.
164 lines
3.6 KiB
JavaScript
164 lines
3.6 KiB
JavaScript
import HostIcon from '../../components/Icons/HostIcon'
|
|
import InfoCircleIcon from '../../components/Icons/InfoCircleIcon'
|
|
import ReloadIcon from '../../components/Icons/ReloadIcon'
|
|
import EditIcon from '../../components/Icons/EditIcon'
|
|
import OTPIcon from '../../components/Icons/OTPIcon'
|
|
|
|
export const Host = {
|
|
name: 'host',
|
|
label: 'Host',
|
|
prefix: 'HST',
|
|
icon: HostIcon,
|
|
actions: [
|
|
{
|
|
name: 'info',
|
|
label: 'Info',
|
|
default: true,
|
|
row: true,
|
|
icon: InfoCircleIcon,
|
|
url: (_id) => `/dashboard/management/hosts/info?hostId=${_id}`
|
|
},
|
|
|
|
{
|
|
name: 'reload',
|
|
label: 'Reload',
|
|
icon: ReloadIcon,
|
|
url: (_id) =>
|
|
`/dashboard/management/hosts/info?hostId=${_id}&action=reload`
|
|
},
|
|
{
|
|
name: 'connect',
|
|
label: 'Connect',
|
|
icon: OTPIcon,
|
|
url: (_id) =>
|
|
`/dashboard/management/hosts/info?hostId=${_id}&action=hostOTP`
|
|
},
|
|
{
|
|
name: 'edit',
|
|
label: 'Edit',
|
|
row: true,
|
|
icon: EditIcon,
|
|
url: (_id) => `/dashboard/management/hosts/info?hostId=${_id}&action=edit`
|
|
}
|
|
],
|
|
columns: ['name', '_id', 'state', 'tags', 'connectedAt'],
|
|
filters: ['name', '_id', 'state', 'tags'],
|
|
sorters: ['name', 'state', 'connectedAt'],
|
|
group: ['tags'],
|
|
properties: [
|
|
{
|
|
name: '_id',
|
|
label: 'ID',
|
|
type: 'id',
|
|
objectType: 'host',
|
|
showCopy: true
|
|
},
|
|
{
|
|
name: 'connectedAt',
|
|
label: 'Connected At',
|
|
type: 'dateTime',
|
|
readOnly: true
|
|
},
|
|
{
|
|
name: 'name',
|
|
label: 'Name',
|
|
required: true,
|
|
type: 'text',
|
|
columnWidth: 200,
|
|
columnFixed: 'left'
|
|
},
|
|
{
|
|
name: 'state',
|
|
label: 'State',
|
|
type: 'state',
|
|
objectType: 'host',
|
|
showName: false,
|
|
readOnly: true
|
|
},
|
|
{
|
|
name: 'active',
|
|
label: 'Active',
|
|
type: 'bool',
|
|
required: true
|
|
},
|
|
{
|
|
name: 'online',
|
|
label: 'Online',
|
|
type: 'bool',
|
|
readOnly: true
|
|
},
|
|
{
|
|
name: 'deviceInfo.os',
|
|
label: 'Operating System',
|
|
type: 'text',
|
|
required: false,
|
|
readOnly: true,
|
|
value: (objectData) => {
|
|
if (
|
|
objectData.deviceInfo?.os?.type &&
|
|
objectData.deviceInfo?.os?.release &&
|
|
objectData.deviceInfo?.os?.arch
|
|
) {
|
|
return `${objectData.deviceInfo.os.type} ${objectData.deviceInfo.os.release} (${objectData.deviceInfo.os.arch})`
|
|
}
|
|
}
|
|
},
|
|
{
|
|
name: 'deviceInfo.os.hostname',
|
|
label: 'Hostname',
|
|
type: 'text',
|
|
required: false,
|
|
readOnly: true
|
|
},
|
|
{
|
|
name: 'deviceInfo.cpu.model',
|
|
label: 'CPU Model',
|
|
type: 'text',
|
|
required: false,
|
|
readOnly: true
|
|
},
|
|
{
|
|
name: 'deviceInfo.cpu',
|
|
label: 'CPU Info',
|
|
type: 'text',
|
|
required: false,
|
|
readOnly: true,
|
|
value: (objectData) => {
|
|
if (
|
|
objectData.deviceInfo?.cpu?.cores &&
|
|
objectData.deviceInfo?.cpu?.speedMHz
|
|
) {
|
|
return `Cores: ${objectData.deviceInfo.cpu.cores}, Speed: ${objectData.deviceInfo.cpu.speedMHz} MHz`
|
|
}
|
|
}
|
|
},
|
|
{
|
|
name: 'deviceInfo.user.username',
|
|
label: 'User',
|
|
type: 'text',
|
|
required: false,
|
|
readOnly: true
|
|
},
|
|
{
|
|
name: 'deviceInfo.user.homedir',
|
|
label: 'User Home',
|
|
type: 'text',
|
|
required: false,
|
|
readOnly: true
|
|
},
|
|
{
|
|
name: 'deviceInfo.process.nodeVersion',
|
|
label: 'NodeJS Version',
|
|
type: 'text',
|
|
required: false,
|
|
readOnly: true
|
|
},
|
|
{
|
|
name: 'tags',
|
|
label: 'Tags',
|
|
type: 'tags',
|
|
required: false
|
|
}
|
|
]
|
|
}
|