Hosts fixes and improvements.

src/components/Dashboard/Management/Hosts.jsx

@@ -84,6 +84,7 @@ const Hosts = () => {
           open={newHostOpen}
           footer={null}
           width={700}
+          destroyOnHidden={true}
           onCancel={() => {
             setNewHostOpen(false)
           }}

src/components/Dashboard/Management/Hosts/NewHost.jsx

@@ -1,21 +1,14 @@
 import PropTypes from 'prop-types'
-import { useState } from 'react'
-import { useMediaQuery } from 'react-responsive'
-import { Typography, Flex, Steps, Divider } from 'antd'
-
 import ObjectInfo from '../../common/ObjectInfo'
 import NewObjectForm from '../../common/NewObjectForm'
-import NewObjectButtons from '../../common/NewObjectButtons'
+import WizardView from '../../common/WizardView'
-
-const { Title } = Typography
 
 const NewHost = ({ onOk }) => {
-  const [currentStep, setCurrentStep] = useState(0)
-
-  const isMobile = useMediaQuery({ maxWidth: 768 })
-
   return (
-    <NewObjectForm type={'host'}>
+    <NewObjectForm
+      type={'host'}
+      defaultValues={{ active: true, state: { type: 'offline' } }}
+    >
       {({ handleSubmit, submitLoading, objectData, formValid }) => {
         const steps = [
           {
@@ -43,6 +36,20 @@ const NewHost = ({ onOk }) => {
                 isEditing={true}
                 required={false}
                 objectData={objectData}
+                visibleProperties={{
+                  _id: false,
+                  createdAt: false,
+                  updatedAt: false,
+                  operatingSystem: false,
+                  'deviceInfo.os': false,
+                  'deviceInfo.os.hostname': false,
+                  'deviceInfo.cpu': false,
+                  'deviceInfo.cpu.model': false,
+                  'deviceInfo.user.username': false,
+                  'deviceInfo.user.homedir': false,
+                  'deviceInfo.process.nodeVersion': false,
+                  files: false
+                }}
               />
             )
           },
@@ -57,7 +64,18 @@ const NewHost = ({ onOk }) => {
                 visibleProperties={{
                   _id: false,
                   createdAt: false,
-                  updatedAt: false
+                  updatedAt: false,
+                  operatingSystem: false,
+                  'deviceInfo.os': false,
+                  'deviceInfo.os.hostname': false,
+                  'deviceInfo.cpu': false,
+                  'deviceInfo.cpu.model': false,
+                  'deviceInfo.user.username': false,
+                  'deviceInfo.user.homedir': false,
+                  'deviceInfo.process.nodeVersion': false,
+                  files: false,
+                  connectedAt: false,
+                  online: false
                 }}
                 isEditing={false}
                 objectData={objectData}
@@ -66,45 +84,18 @@ const NewHost = ({ onOk }) => {
           }
         ]
         return (
-          <Flex gap='middle'>
+          <WizardView
-            {!isMobile && (
+            steps={steps}
-              <div style={{ minWidth: '160px' }}>
+            loading={submitLoading}
-                <Steps
+            formValid={formValid}
-                  current={currentStep}
+            title='New Host'
-                  items={steps}
-                  direction='vertical'
-                  style={{ width: 'fit-content' }}
-                />
-              </div>
-            )}
-
-            {!isMobile && (
-              <Divider type='vertical' style={{ height: 'unset' }} />
-            )}
-
-            <Flex vertical gap='middle' style={{ flexGrow: 1 }}>
-              <Title level={2} style={{ margin: 0 }}>
-                New Host
-              </Title>
-              <div style={{ minHeight: '260px', marginBottom: 8 }}>
-                {steps[currentStep].content}
-              </div>
-              <NewObjectButtons
-                currentStep={currentStep}
-                totalSteps={steps.length}
-                onPrevious={() => setCurrentStep((prev) => prev - 1)}
-                onNext={() => setCurrentStep((prev) => prev + 1)}
             onSubmit={async () => {
               const result = await handleSubmit()
               if (result) {
                 onOk()
               }
             }}
-                formValid={formValid}
-                submitLoading={submitLoading}
           />
-            </Flex>
-          </Flex>
         )
       }}
     </NewObjectForm>

src/database/models/Host.js

@@ -28,13 +28,6 @@ export const Host = {
       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',
@@ -65,6 +58,16 @@ export const Host = {
       visible: (objectData) => {
         return objectData?._isEditing && objectData?._isEditing == true
       }
+    },
+    {
+      type: 'divider'
+    },
+    {
+      name: 'connect',
+      label: 'Connect',
+      icon: OTPIcon,
+      url: (_id) =>
+        `/dashboard/management/hosts/info?hostId=${_id}&action=hostOTP`
     }
   ],
   columns: ['name', '_reference', 'state', 'tags', 'connectedAt'],