From a6c5c62ec52efc1c05b1bce61ac61673da261052 Mon Sep 17 00:00:00 2001
From: Mark Reynolds <mreynolds@redhat.com>
Date: Tue, 9 Jan 2024 16:03:54 -0500
Subject: [PATCH] Issue 239 - Implement host text input settings

Implement the Text inputs on the host settings page.
Had to implement the entire CI layer, but it will make the other
components easier to add.

Signed-off-by: Mark Reynolds <mreynolds@redhat.com>
---
 src/components/Form/IpaTextArea.tsx           |  27 ++
 .../HostsSections/AllowedCreateKeytab.tsx     |  14 +-
 .../HostsSections/AllowedRetrieveKeytab.tsx   |  14 +-
 src/components/HostsSections/HostSettings.tsx | 255 ++++++++----------
 .../ManagedBy/ManagedByAddModal.tsx           |   2 +-
 .../tables/DeletedElementsTable.tsx           |   4 +-
 .../RetrieveKeytabHostsTable.tsx              |   2 +-
 src/hooks/useHostSettingsData.tsx             | 118 ++++++++
 src/pages/Hosts/HostsManagedBy.tsx            |   6 +-
 src/pages/Hosts/HostsSettings.tsx             |  90 ++++++-
 src/pages/Hosts/HostsTable.tsx                |   6 +-
 src/pages/Hosts/HostsTabs.tsx                 |  30 ++-
 src/pages/Services/ServicesManagedBy.tsx      |   4 +-
 src/services/rpc.ts                           |  82 +++++-
 src/store/Identity/hosts-slice.ts             |   8 +-
 src/utils/datatypes/globalDataTypes.ts        |  12 +-
 src/utils/hostUtils.tsx                       | 128 +++++++++
 17 files changed, 613 insertions(+), 189 deletions(-)
 create mode 100644 src/components/Form/IpaTextArea.tsx
 create mode 100644 src/hooks/useHostSettingsData.tsx
 create mode 100644 src/utils/hostUtils.tsx

diff --git a/src/components/Form/IpaTextArea.tsx b/src/components/Form/IpaTextArea.tsx
new file mode 100644
index 00000000..deef4f12
--- /dev/null
+++ b/src/components/Form/IpaTextArea.tsx
@@ -0,0 +1,27 @@
+import React from "react";
+// PatternFly
+import { TextArea } from "@patternfly/react-core";
+import {
+  IPAParamDefinition,
+  getParamProperties,
+  convertToString,
+} from "src/utils/ipaObjectUtils";
+
+const IpaTextArea = (props: IPAParamDefinition) => {
+  const { required, readOnly, value, onChange } = getParamProperties(props);
+
+  return (
+    <TextArea
+      id={props.name}
+      name={props.name}
+      value={convertToString(value)}
+      onChange={(_event, value) => onChange(value)}
+      aria-label={props.name}
+      isRequired={required}
+      readOnlyVariant={readOnly ? "plain" : undefined}
+      autoResize
+    />
+  );
+};
+
+export default IpaTextArea;
diff --git a/src/components/HostsSections/AllowedCreateKeytab.tsx b/src/components/HostsSections/AllowedCreateKeytab.tsx
index b48212e2..25d74e9e 100644
--- a/src/components/HostsSections/AllowedCreateKeytab.tsx
+++ b/src/components/HostsSections/AllowedCreateKeytab.tsx
@@ -10,19 +10,23 @@ import CreateKeytabHostGroupsTable from "../tables/HostsSettings/CreateKeytabHos
 import { Host } from "src/utils/datatypes/globalDataTypes";
 
 interface PropsToAllowCreateKeytab {
-  host: Host;
+  host: Partial<Host>;
 }
 
 const AllowedCreateKeytab = (props: PropsToAllowCreateKeytab) => {
+  let fqdn = "";
+  if (props.host.fqdn !== undefined) {
+    fqdn = props.host.fqdn;
+  }
   return (
     <Flex direction={{ default: "column", lg: "row" }}>
       <FlexItem flex={{ default: "flex_1" }}>
-        <CreateKeytabUsersTable host={props.host.fqdn} />
-        <CreateKeytabHostsTable host={props.host.fqdn} />
+        <CreateKeytabUsersTable host={fqdn} />
+        <CreateKeytabHostsTable host={fqdn} />
       </FlexItem>
       <FlexItem flex={{ default: "flex_1" }}>
-        <CreateKeytabUserGroupsTable host={props.host.fqdn} />
-        <CreateKeytabHostGroupsTable host={props.host.fqdn} />
+        <CreateKeytabUserGroupsTable host={fqdn} />
+        <CreateKeytabHostGroupsTable host={fqdn} />
       </FlexItem>
     </Flex>
   );
diff --git a/src/components/HostsSections/AllowedRetrieveKeytab.tsx b/src/components/HostsSections/AllowedRetrieveKeytab.tsx
index 9848e331..0d0bc9a8 100644
--- a/src/components/HostsSections/AllowedRetrieveKeytab.tsx
+++ b/src/components/HostsSections/AllowedRetrieveKeytab.tsx
@@ -10,19 +10,23 @@ import RetrieveKeytabHostGroupsTable from "../tables/HostsSettings/RetrieveKeyta
 import { Host } from "src/utils/datatypes/globalDataTypes";
 
 interface PropsToAllowRetrieveKeytab {
-  host: Host;
+  host: Partial<Host>;
 }
 
 const AllowedRetrieveKeytab = (props: PropsToAllowRetrieveKeytab) => {
+  let fqdn = "";
+  if (props.host.fqdn !== undefined) {
+    fqdn = props.host.fqdn;
+  }
   return (
     <Flex direction={{ default: "column", lg: "row" }}>
       <FlexItem flex={{ default: "flex_1" }}>
-        <RetrieveKeytabUsersTable host={props.host.fqdn} />
-        <RetrieveKeytabHostsTable host={props.host.fqdn} />
+        <RetrieveKeytabUsersTable host={fqdn} />
+        <RetrieveKeytabHostsTable host={fqdn} />
       </FlexItem>
       <FlexItem flex={{ default: "flex_1" }}>
-        <RetrieveKeytabUserGroupsTable host={props.host.fqdn} />
-        <RetrieveKeytabHostGroupsTable host={props.host.fqdn} />
+        <RetrieveKeytabUserGroupsTable host={fqdn} />
+        <RetrieveKeytabHostGroupsTable host={fqdn} />
       </FlexItem>
     </Flex>
   );
diff --git a/src/components/HostsSections/HostSettings.tsx b/src/components/HostsSections/HostSettings.tsx
index df070947..54614684 100644
--- a/src/components/HostsSections/HostSettings.tsx
+++ b/src/components/HostsSections/HostSettings.tsx
@@ -7,17 +7,22 @@ import {
   FlexItem,
   Form,
   FormGroup,
-  TextArea,
   TextInput,
 } from "@patternfly/react-core";
 // Data types
-import { Host } from "src/utils/datatypes/globalDataTypes";
+import { Host, Metadata } from "../../utils/datatypes/globalDataTypes";
+// Forms
+import IpaTextArea from "../Form/IpaTextArea";
+import IpaTextInput from "../Form/IpaTextInput";
+import IpaCheckboxes from "../Form/IpaCheckboxes";
 // Layouts
 import SecondaryButton from "../layouts/SecondaryButton";
 import PopoverWithIconLayout from "../layouts/PopoverWithIconLayout";
 // Modals
 import PrincipalAliasAddModal from "../modals/PrincipalAliasAddModal";
 import PrincipalAliasDeleteModal from "../modals/PrincipalAliasDeleteModal";
+// Utils
+import { asRecord } from "../../utils/hostUtils";
 
 interface PrincipalAlias {
   id: number | string;
@@ -34,55 +39,38 @@ interface MacAddress {
 }
 
 interface PropsToHostSettings {
-  host: Host;
+  host: Partial<Host>;
+  metadata: Metadata;
+  onHostChange: (host: Partial<Host>) => void;
 }
 
 const HostSettings = (props: PropsToHostSettings) => {
-  const REALM = "@SERVER.IPA.DEMO";
   // Host name - textbox (mandatory field)
-  const [hostName] = useState(props.host.fqdn);
+  let fqdn = "";
+  if (props.host.fqdn !== undefined) {
+    fqdn = props.host.fqdn;
+  }
+  const [hostName] = useState(fqdn);
+
+  // Get krb realms
+  const krbrealms = props.host.krbprincipalname;
+  const aliasList: PrincipalAlias[] = [];
+  for (let i = 0; krbrealms && krbrealms[i]; i++) {
+    aliasList.push({
+      id: i,
+      alias: krbrealms[i],
+    });
+  }
 
-  // Principal alias - textbox
-  const [principalAliasList, setPrincipalAliasList] = useState<
-    PrincipalAlias[]
-  >([
-    {
-      id: 0,
-      alias: "host/" + props.host.fqdn + REALM, // TODO: The realm (@SERVER.IPA.DEMO) should adapt to context
-    },
-  ]);
-
-  // Description - textbox
-  const [hostDescription, setHostDescription] = useState(
-    props.host.description
+  // Get 'ipaObject' and 'recordOnChange' to use in 'IpaTextInput'
+  const { ipaObject, recordOnChange } = asRecord(
+    props.host,
+    props.onHostChange
   );
-  const onChangeDescriptionHandler = (newDescription: string) => {
-    setHostDescription(newDescription);
-  };
 
-  // Class - textbox
-  const [hostClass, setHostClass] = useState(props.host.userclass);
-  const updateHostClass = (newHostClass: string) => {
-    setHostClass(newHostClass);
-  };
-
-  // Locality - textbox
-  const [locality, setLocality] = useState("");
-  const updateLocality = (newLocality: string) => {
-    setLocality(newLocality);
-  };
-  const [location, setLocation] = useState("");
-  const updateLocation = (newLocation: string) => {
-    setLocation(newLocation);
-  };
-  const [platform, setPlatform] = useState("");
-  const updatePlatform = (newPlatform: string) => {
-    setPlatform(newPlatform);
-  };
-  const [operatingSystem, setOperatingSystem] = useState("");
-  const updateOperatingSystem = (newOperatingSystem: string) => {
-    setOperatingSystem(newOperatingSystem);
-  };
+  // Principal alias - textbox
+  const [principalAliasList, setPrincipalAliasList] =
+    useState<PrincipalAlias[]>(aliasList);
 
   // SSH public keys
   const [sshPublicKeys] = useState<SshPublicKey[]>([]);
@@ -176,9 +164,15 @@ const HostSettings = (props: PropsToHostSettings) => {
   // - Add new kerberos principal alias
   const addNewKrbPrincipalAlias = (newKrbAlias: string) => {
     // Process new krb alias
-    // (whether a single name or a complete name with realm is provided, this needs to be checked)
-    if (!newKrbAlias.includes(REALM)) {
-      newKrbAlias = newKrbAlias + REALM;
+    // (whether a single name or a complete name with realm is provided,
+    // this needs to be checked)
+    if (aliasList.length > 0) {
+      // TODO this is not correct!, need to look thorguh the entire list,
+      // not just the first item.  Will address in future ticket
+      const REALM = aliasList[0].alias;
+      if (!newKrbAlias.includes(REALM)) {
+        newKrbAlias = newKrbAlias + REALM;
+      }
     }
     const principalAliasListCopy = [...principalAliasList];
     principalAliasListCopy.push({
@@ -297,75 +291,58 @@ const HostSettings = (props: PropsToHostSettings) => {
                 Add
               </SecondaryButton>
             </FormGroup>
-            <FormGroup label="Description" fieldId="host-description">
-              <TextArea
-                value={hostDescription}
+            <FormGroup label="Description" fieldId="description">
+              <IpaTextArea
                 name="description"
-                onChange={(_event, newDescription: string) =>
-                  onChangeDescriptionHandler(newDescription)
-                }
-                aria-label="host description"
-                resizeOrientation="vertical"
+                ipaObject={ipaObject}
+                onChange={recordOnChange}
+                objectName="host"
+                metadata={props.metadata}
               />
             </FormGroup>
-            <FormGroup label="Class" fieldId="host-class">
-              <TextInput
-                id="host-class"
-                name="userclass"
-                onChange={(_event, newHostClass: string) =>
-                  updateHostClass(newHostClass)
-                }
-                value={hostClass}
-                type="text"
-                aria-label="host class"
+            <FormGroup label="Class" fieldId="userclass">
+              <IpaTextInput
+                name={"userclass"}
+                ipaObject={ipaObject}
+                onChange={recordOnChange}
+                objectName="host"
+                metadata={props.metadata}
               />
             </FormGroup>
-            <FormGroup label="Locality" fieldId="locality">
-              <TextInput
-                id="locality"
-                name="l"
-                onChange={(_event, newLocality: string) =>
-                  updateLocality(newLocality)
-                }
-                value={locality}
-                type="text"
-                aria-label="locality"
+            <FormGroup label="Locality" fieldId="l">
+              <IpaTextInput
+                name={"l"}
+                ipaObject={ipaObject}
+                onChange={recordOnChange}
+                objectName="host"
+                metadata={props.metadata}
               />
             </FormGroup>
-            <FormGroup label="Location" fieldId="location">
-              <TextInput
-                id="location"
-                name="nshostlocation"
-                onChange={(_event, newLocation: string) =>
-                  updateLocation(newLocation)
-                }
-                value={location}
-                type="text"
-                aria-label="location"
+            <FormGroup label="Location" fieldId="nshostlocation">
+              <IpaTextInput
+                name={"nshostlocation"}
+                ipaObject={ipaObject}
+                onChange={recordOnChange}
+                objectName="host"
+                metadata={props.metadata}
               />
             </FormGroup>
-            <FormGroup label="Platform" fieldId="platform">
-              <TextInput
-                id="platform"
-                name="nshardwareplatform"
-                onChange={(_event, newPlatform: string) =>
-                  updatePlatform(newPlatform)
-                }
-                value={platform}
-                type="text"
-                aria-label="platform"
+            <FormGroup label="Platform" fieldId="nshardwareplatform">
+              <IpaTextInput
+                name={"nshardwareplatform"}
+                ipaObject={ipaObject}
+                onChange={recordOnChange}
+                objectName="host"
+                metadata={props.metadata}
               />
             </FormGroup>
-            <FormGroup label="Operating system" fieldId="operating-system">
-              <TextInput
-                id="operating-system"
-                name="nsosversion"
-                onChange={(_event, newOperatingSystem: string) =>
-                  updateOperatingSystem(newOperatingSystem)
-                }
-                value={operatingSystem}
-                type="text"
-                aria-label="operating-system"
+            <FormGroup label="Operating system" fieldId="nsosversion">
+              <IpaTextInput
+                name={"nsosversion"}
+                ipaObject={ipaObject}
+                onChange={recordOnChange}
+                objectName="host"
+                metadata={props.metadata}
               />
             </FormGroup>
           </Form>
@@ -408,9 +385,6 @@ const HostSettings = (props: PropsToHostSettings) => {
                         type="text"
                         name={"macaddress-" + idx}
                         aria-label="mac address"
-                        onChange={(event, value) =>
-                          onHandleMacAddressChange(value, event, idx)
-                        }
                       />
                     </FlexItem>
                     <FlexItem key={macAddress.id + "-delete-button"}>
@@ -434,45 +408,40 @@ const HostSettings = (props: PropsToHostSettings) => {
             </FormGroup>
             <FormGroup
               label="Authentication indicators"
-              fieldId="authentication-indicators"
+              fieldId="krbprincipalauthind"
               labelIcon={
                 <PopoverWithIconLayout message={AuthIndicatorsTypesMessage} />
               }
             >
-              <Checkbox
-                label="Two-factor authentication (password + OTP)"
-                isChecked={tpaCheckbox}
-                aria-label="two factor authentication from authentication indicators checkbox"
-                id="tpaCheckbox"
-                name="ipauserauthtype"
-                value="otp"
-                className="pf-v5-u-mt-xs pf-v5-u-mb-sm"
-              />
-              <Checkbox
-                label="RADIUS"
-                isChecked={radiusCheckbox}
-                aria-label="radius from authentication indicators checkbox"
-                id="radiusCheckbox"
-                name="ipauserauthtype"
-                value="radius"
-                className="pf-v5-u-mt-xs pf-v5-u-mb-sm"
-              />
-              <Checkbox
-                label="PKINIT"
-                isChecked={pkinitCheckbox}
-                aria-label="pkinit from authentication indicators checkbox"
-                id="pkinitCheckbox"
-                name="ipauserauthtype"
-                value="pkinit"
-                className="pf-v5-u-mt-xs pf-v5-u-mb-sm"
-              />
-              <Checkbox
-                label="Hardened password (by SPAKE or FAST)"
-                isChecked={hardenedPassCheckbox}
-                aria-label="hardened password from authentication indicators checkbox"
-                id="hardenedPassCheckbox"
-                name="ipauserauthtype"
-                value="hardened"
+              <IpaCheckboxes
+                name="krbprincipalauthind"
+                options={[
+                  {
+                    value: "otp",
+                    text: "Two-factor authentication (password + OTP)",
+                  },
+                  {
+                    value: "radius",
+                    text: "RADIUS",
+                  },
+
+                  {
+                    value: "pkinit",
+                    text: "PKINIT",
+                  },
+                  {
+                    value: "hardened",
+                    text: "Hardened password (by SPAKE or FAST)",
+                  },
+                  {
+                    value: "idp",
+                    text: "External Identity Provider",
+                  },
+                ]}
+                ipaObject={ipaObject}
+                onChange={recordOnChange}
+                objectName="host"
+                metadata={props.metadata}
               />
             </FormGroup>
             <FormGroup
diff --git a/src/components/ManagedBy/ManagedByAddModal.tsx b/src/components/ManagedBy/ManagedByAddModal.tsx
index 4588bea0..8f2dae93 100644
--- a/src/components/ManagedBy/ManagedByAddModal.tsx
+++ b/src/components/ManagedBy/ManagedByAddModal.tsx
@@ -102,7 +102,7 @@ const ManagedByAddModal = (props: PropsToAddModal) => {
         // Host groups
         if (props.tabData.tabName === "Hosts") {
           props.groupRepository.push({
-            hostName: optionData.fqdn !== undefined && optionData.fqdn,
+            fqdn: optionData.fqdn !== undefined && optionData.fqdn,
           } as Host);
           // Send updated data to table
           props.updateGroupRepository(props.groupRepository as Host[]);
diff --git a/src/components/tables/DeletedElementsTable.tsx b/src/components/tables/DeletedElementsTable.tsx
index b444906c..541e5438 100644
--- a/src/components/tables/DeletedElementsTable.tsx
+++ b/src/components/tables/DeletedElementsTable.tsx
@@ -50,7 +50,7 @@ const DeletedElementsTable = (props: PropsToDeletedElementsTable) => {
       if (props.elementsList !== undefined) {
         props.elementsList.map((element) => {
           props.elementsToDelete.map((selected) => {
-            if (element.fqdn[0] === selected[0]) {
+            if (element.fqdn === selected[0]) {
               elementsToDelete.push(element);
             }
           });
@@ -91,7 +91,7 @@ const DeletedElementsTable = (props: PropsToDeletedElementsTable) => {
   const getBody = () => {
     if (props.mode === "passing_full_data") {
       return elementsToDelete.map((element) => (
-        <Tr key={element.fqdn[0]} id={element.fqdn[0]}>
+        <Tr key={element.fqdn} id={element.fqdn}>
           {props.columnNames.map((columnName, idx) => (
             <Td key={idx} dataLabel={columnName}>
               {element[columnName]}
diff --git a/src/components/tables/HostsSettings/RetrieveKeytabHostsTable.tsx b/src/components/tables/HostsSettings/RetrieveKeytabHostsTable.tsx
index 461de17f..5053da6b 100644
--- a/src/components/tables/HostsSettings/RetrieveKeytabHostsTable.tsx
+++ b/src/components/tables/HostsSettings/RetrieveKeytabHostsTable.tsx
@@ -16,7 +16,7 @@ interface PropsToTable {
 const RetrieveKeytabHostsTable = (props: PropsToTable) => {
   // Full elements list -> Initial data
   const fullHostsList = useAppSelector((state) => state.hosts.hostsList);
-  const fullHostIdsList = fullHostsList.map((host) => host.hostName);
+  const fullHostIdsList = fullHostsList.map((host) => host.fqdn);
 
   // Elements on the table
   const [tableHostsList, setTableHostsList] = useState<string[]>([]);
diff --git a/src/hooks/useHostSettingsData.tsx b/src/hooks/useHostSettingsData.tsx
new file mode 100644
index 00000000..347d9352
--- /dev/null
+++ b/src/hooks/useHostSettingsData.tsx
@@ -0,0 +1,118 @@
+import { useState, useEffect } from "react";
+
+// RPC
+import {
+  useGetActiveUsersQuery,
+  useGetObjectMetadataQuery,
+  useGetHostsFullDataQuery,
+} from "src/services/rpc";
+// Data types
+import { Host, Metadata } from "src/utils/datatypes/globalDataTypes";
+
+type HostSettingsData = {
+  isLoading: boolean;
+  isFetching: boolean;
+  modified: boolean;
+  setModified: (value: boolean) => void;
+  resetValues: () => void;
+  metadata: Metadata;
+  originalHost: Partial<Host>;
+  host: Partial<Host>;
+  setHost: (fqdn: Partial<Host>) => void;
+  refetch: () => void;
+  modifiedValues: () => Partial<Host>;
+  certData?: Record<string, unknown>;
+};
+
+const useHostSettings = (hostId: string): HostSettingsData => {
+  // [API call] Metadata
+  const metadataQuery = useGetObjectMetadataQuery();
+  const metadata = metadataQuery.data || {};
+  const metadataLoading = metadataQuery.isLoading;
+
+  // [API call] Host
+  const hostFullDataQuery = useGetHostsFullDataQuery(hostId);
+  const hostFullData = hostFullDataQuery.data;
+  const isFullDataLoading = hostFullDataQuery.isLoading;
+
+  const [modified, setModified] = useState(false);
+
+  // Data displayed and modified by the user
+  const [host, setHost] = useState<Partial<Host>>({});
+
+  useEffect(() => {
+    if (hostFullData && !hostFullDataQuery.isFetching) {
+      setHost({ ...hostFullData.host });
+    }
+  }, [hostFullData, hostFullDataQuery.isFetching]);
+
+  const settings = {
+    isLoading: metadataLoading || isFullDataLoading,
+    isFetching: hostFullDataQuery.isFetching,
+    modified,
+    setModified,
+    metadata,
+    setHost,
+    refetch: hostFullDataQuery.refetch,
+    host,
+  } as HostSettingsData;
+
+  if (hostFullData) {
+    settings.originalHost = hostFullData.host || {};
+    settings.certData = hostFullData.cert;
+  } else {
+    settings.originalHost = {};
+  }
+
+  const getModifiedValues = (): Partial<Host> => {
+    if (!hostFullData || !hostFullData.host) {
+      return {};
+    }
+
+    const modifiedValues = {};
+    for (const [key, value] of Object.entries(host)) {
+      if (Array.isArray(value)) {
+        // Using 'JSON.stringify' when comparing arrays (to prevent data type false positives)
+        if (JSON.stringify(hostFullData.host[key]) !== JSON.stringify(value)) {
+          modifiedValues[key] = value;
+        }
+      } else if (hostFullData.host[key] !== value) {
+        modifiedValues[key] = value;
+      }
+    }
+    return modifiedValues;
+  };
+  settings.modifiedValues = getModifiedValues;
+
+  // Detect any change in 'originalHost' and 'host' objects
+  useEffect(() => {
+    if (!hostFullData || !hostFullData.host) {
+      return;
+    }
+    let modified = false;
+    for (const [key, value] of Object.entries(host)) {
+      if (Array.isArray(value)) {
+        // Using 'JSON.stringify' when comparing arrays (to prevent data type false positives)
+        if (JSON.stringify(hostFullData.host[key]) !== JSON.stringify(value)) {
+          modified = true;
+          break;
+        }
+      } else {
+        if (hostFullData.host[key] !== value) {
+          modified = true;
+          break;
+        }
+      }
+    }
+    setModified(modified);
+  }, [host, hostFullData]);
+
+  const onResetValues = () => {
+    setModified(false);
+  };
+  settings.resetValues = onResetValues;
+
+  return settings;
+};
+
+export { useHostSettings };
diff --git a/src/pages/Hosts/HostsManagedBy.tsx b/src/pages/Hosts/HostsManagedBy.tsx
index 5f5645bd..cb8c0ac3 100644
--- a/src/pages/Hosts/HostsManagedBy.tsx
+++ b/src/pages/Hosts/HostsManagedBy.tsx
@@ -54,7 +54,7 @@ const HostsManagedBy = (props: PropsToHostsManagedBy) => {
     // Host groups
     return availableHostsData.filter((item) => {
       return !hostsList.some((itm) => {
-        return item.hostName === itm.hostName;
+        return item.fqdn === itm.fqdn;
       });
     });
   };
@@ -204,7 +204,7 @@ const HostsManagedBy = (props: PropsToHostsManagedBy) => {
 
   const tabData = {
     tabName: "Hosts",
-    elementName: props.host.hostName,
+    elementName: props.host.fqdn,
   };
 
   // - MemberOfDeleteModal
@@ -220,7 +220,7 @@ const HostsManagedBy = (props: PropsToHostsManagedBy) => {
 
   const deleteTabData = {
     tabName: "Hosts",
-    elementName: props.host.hostName,
+    elementName: props.host.fqdn,
   };
 
   // Render component
diff --git a/src/pages/Hosts/HostsSettings.tsx b/src/pages/Hosts/HostsSettings.tsx
index 3fc9c85f..882de80d 100644
--- a/src/pages/Hosts/HostsSettings.tsx
+++ b/src/pages/Hosts/HostsSettings.tsx
@@ -15,7 +15,9 @@ import {
 // Icons
 import OutlinedQuestionCircleIcon from "@patternfly/react-icons/dist/esm/icons/outlined-question-circle-icon";
 // Data types
-import { Host } from "src/utils/datatypes/globalDataTypes";
+import { Host, Metadata } from "src/utils/datatypes/globalDataTypes";
+// Hooks
+import useAlerts from "src/hooks/useAlerts";
 // Layouts
 import HelpTextWithIconLayout from "src/components/layouts/HelpTextWithIconLayout";
 import TitleLayout from "src/components/layouts/TitleLayout";
@@ -28,14 +30,32 @@ import Enrollment from "src/components/HostsSections/Enrollment";
 import HostCertificate from "src/components/HostsSections/HostCertificate";
 import AllowedRetrieveKeytab from "src/components/HostsSections/AllowedRetrieveKeytab";
 import AllowedCreateKeytab from "src/components/HostsSections/AllowedCreateKeytab";
+// RPC
+import { ErrorResult, useSaveHostMutation } from "src/services/rpc";
 
 interface PropsToHostsSettings {
-  host: Host;
+  host: Partial<Host>;
+  originalHost: Partial<Host>;
+  metadata: Metadata;
+  certData?: Record<string, unknown>;
+  onHostChange: (host: Partial<Host>) => void;
+  onRefresh: () => void;
+  isModified: boolean;
+  isDataLoading?: boolean;
+  modifiedValues: () => Partial<Host>;
+  onResetValues: () => void;
 }
 
 const HostsSettings = (props: PropsToHostsSettings) => {
+  // Alerts to show in the UI
+  const alerts = useAlerts();
+
+  // API save the host
+  const [saveHost] = useSaveHostMutation();
+
   // Kebab
   const [isKebabOpen, setIsKebabOpen] = useState(false);
+  const [isSaving, setSaving] = useState(false);
 
   const dropdownItems = [
     <DropdownItem key="rebuild auto membership">
@@ -58,19 +78,71 @@ const HostsSettings = (props: PropsToHostsSettings) => {
   ) => {
     setIsKebabOpen(!isKebabOpen);
   };
+
+  // 'Save' handler method
+  const onSave = () => {
+    const modifiedValues = props.modifiedValues();
+    modifiedValues.fqdn = props.host.fqdn;
+    setSaving(true);
+
+    saveHost(modifiedValues).then((response) => {
+      if ("data" in response) {
+        if (response.data.result) {
+          // Show toast notification: success
+          alerts.addAlert("save-success", "Host modified", "success");
+        } else if (response.data.error) {
+          // Show toast notification: error
+          const errorMessage = response.data.error as ErrorResult;
+          alerts.addAlert("save-error", errorMessage.message, "danger");
+        }
+        // Reset values. Disable 'revert' and 'save' buttons
+        props.onResetValues();
+        setSaving(false);
+      }
+    });
+  };
+
+  // 'Revert' handler method
+  const onRevert = () => {
+    props.onHostChange(props.originalHost);
+    alerts.addAlert("revert-success", "Host data reverted", "success");
+  };
+
   // Toolbar
   const toolbarFields = [
     {
       key: 0,
-      element: <SecondaryButton>Refresh</SecondaryButton>,
+      element: (
+        <SecondaryButton onClickHandler={props.onRefresh}>
+          Refresh
+        </SecondaryButton>
+      ),
     },
     {
       key: 1,
-      element: <SecondaryButton isDisabled={true}>Revert</SecondaryButton>,
+      element: (
+        <SecondaryButton
+          isDisabled={!props.isModified}
+          onClickHandler={onRevert}
+        >
+          Revert
+        </SecondaryButton>
+      ),
     },
     {
       key: 2,
-      element: <SecondaryButton isDisabled={true}>Save</SecondaryButton>,
+      element: (
+        <SecondaryButton
+          isDisabled={!props.isModified || isSaving}
+          onClickHandler={onSave}
+          isLoading={isSaving}
+          spinnerAriaValueText="Saving"
+          spinnerAriaLabelledBy="Saving"
+          spinnerAriaLabel="Saving"
+        >
+          {isSaving ? "Saving" : "Save"}
+        </SecondaryButton>
+      ),
     },
     {
       key: 3,
@@ -86,8 +158,10 @@ const HostsSettings = (props: PropsToHostsSettings) => {
       ),
     },
   ];
+
   return (
     <>
+      <alerts.ManagedAlerts />
       <PageSection
         id="settings-page"
         variant={PageSectionVariants.light}
@@ -142,7 +216,11 @@ const HostsSettings = (props: PropsToHostsSettings) => {
                 id="host-settings"
                 text="Host settings"
               />
-              <HostSettings host={props.host} />
+              <HostSettings
+                host={props.host}
+                metadata={props.metadata}
+                onHostChange={props.onHostChange}
+              />
               <TitleLayout
                 key={1}
                 headingLevel="h2"
diff --git a/src/pages/Hosts/HostsTable.tsx b/src/pages/Hosts/HostsTable.tsx
index a6c79cae..bf78cef3 100644
--- a/src/pages/Hosts/HostsTable.tsx
+++ b/src/pages/Hosts/HostsTable.tsx
@@ -106,7 +106,7 @@ const HostsTable = (props: PropsToTable) => {
       descriptionString = description[0];
     }
 
-    return [fqdn[0], descriptionString];
+    return [fqdn, descriptionString];
   };
 
   let sortedHosts = [...shownHostsList];
@@ -260,7 +260,7 @@ const HostsTable = (props: PropsToTable) => {
   );
 
   const body = filteredShownHosts.map((host, rowIndex) => (
-    <Tr key={host.fqdn[0]} id={host.fqdn[0]}>
+    <Tr key={host.fqdn} id={host.fqdn}>
       <Td
         dataLabel="checkbox"
         select={{
@@ -273,7 +273,7 @@ const HostsTable = (props: PropsToTable) => {
       />
       <Td dataLabel={columnNames.fqdn}>
         <Link to={URL_PREFIX + "/hosts/settings"} state={host}>
-          {host.fqdn[0]}
+          {host.fqdn}
         </Link>
       </Td>
       <Td dataLabel={columnNames.description}>{host.description}</Td>
diff --git a/src/pages/Hosts/HostsTabs.tsx b/src/pages/Hosts/HostsTabs.tsx
index 7f9b3695..229c964f 100644
--- a/src/pages/Hosts/HostsTabs.tsx
+++ b/src/pages/Hosts/HostsTabs.tsx
@@ -21,14 +21,15 @@ import BreadcrumbLayout from "src/components/layouts/BreadcrumbLayout";
 import TitleLayout from "src/components/layouts/TitleLayout";
 // Data types
 import { Host } from "src/utils/datatypes/globalDataTypes";
+// Hooks
+import { useHostSettings } from "src/hooks/useHostSettingsData";
+import DataSpinner from "src/components/layouts/DataSpinner";
 
 const HostsTabs = () => {
-  // TODO: Make the 'Tabs' component data-agnostic and more reusable,
-  //   getting the data via props.
-
   // Get location (React Router DOM) and get state data
   const location = useLocation();
   const hostData: Host = location.state as Host;
+  const hostSettingsData = useHostSettings(hostData.fqdn[0]);
 
   // Tab
   const [activeTabKey, setActiveTabKey] = useState(0);
@@ -49,18 +50,22 @@ const HostsTabs = () => {
     },
   ];
 
+  if (hostSettingsData.isLoading || hostSettingsData.host.fqdn === undefined) {
+    return <DataSpinner />;
+  }
+
   return (
     <Page>
       <PageSection variant={PageSectionVariants.light} className="pf-v5-u-pr-0">
         <BreadcrumbLayout
           className="pf-v5-u-mb-md"
-          preText="Host:"
           userId={hostData.fqdn}
+          preText=""
           pagesVisited={pagesVisited}
         />
         <TitleLayout
-          id={hostData.hostName}
-          text={hostData.hostName}
+          id={hostData.fqdn}
+          text={hostData.fqdn}
           headingLevel="h1"
         />
       </PageSection>
@@ -78,7 +83,18 @@ const HostsTabs = () => {
             title={<TabTitleText>Settings</TabTitleText>}
           >
             <PageSection className="pf-v5-u-pb-0"></PageSection>
-            <HostsSettings host={hostData} />
+            <HostsSettings
+              host={hostSettingsData.host}
+              originalHost={hostSettingsData.originalHost}
+              metadata={hostSettingsData.metadata}
+              certData={hostSettingsData.certData}
+              onHostChange={hostSettingsData.setHost}
+              isDataLoading={hostSettingsData.isFetching}
+              onRefresh={hostSettingsData.refetch}
+              isModified={hostSettingsData.modified}
+              onResetValues={hostSettingsData.resetValues}
+              modifiedValues={hostSettingsData.modifiedValues}
+            />
           </Tab>
           <Tab
             eventKey={1}
diff --git a/src/pages/Services/ServicesManagedBy.tsx b/src/pages/Services/ServicesManagedBy.tsx
index 50e5e5cd..429d41cb 100644
--- a/src/pages/Services/ServicesManagedBy.tsx
+++ b/src/pages/Services/ServicesManagedBy.tsx
@@ -41,7 +41,7 @@ const ServicesManagedBy = (props: PropsToServicesManagedBy) => {
 
     availableHostsData.map((host) => {
       hostNameList.map((hostName) => {
-        if (host.hostName === hostName) {
+        if (host.fqdn === hostName) {
           fullHostList.push(host as Host);
         }
       });
@@ -71,7 +71,7 @@ const ServicesManagedBy = (props: PropsToServicesManagedBy) => {
     // Host groups
     return availableHostsData.filter((item) => {
       return !hostsList.some((itm) => {
-        return item.hostName === itm.hostName;
+        return item.fqdn === itm.fqdn;
       });
     });
   };
diff --git a/src/services/rpc.ts b/src/services/rpc.ts
index 2888f8ac..49ef8406 100644
--- a/src/services/rpc.ts
+++ b/src/services/rpc.ts
@@ -9,18 +9,20 @@ import {
 // Utils
 import { API_VERSION_BACKUP } from "src/utils/utils";
 import {
-  Metadata,
-  User,
-  UIDType,
+  CertificateAuthority,
   fqdnType,
+  Host,
   IDPServer,
-  RadiusServer,
-  CertificateAuthority,
-  PwPolicy,
   KrbPolicy,
   CertProfile,
+  Metadata,
+  PwPolicy,
+  RadiusServer,
+  UIDType,
+  User,
 } from "src/utils/datatypes/globalDataTypes";
 import { apiToUser } from "src/utils/userUtils";
+import { apiToHost } from "src/utils/hostUtils";
 import { apiToPwPolicy } from "src/utils/pwPolicyUtils";
 import { apiToKrbPolicy } from "src/utils/krbPolicyUtils";
 
@@ -31,6 +33,11 @@ export type UserFullData = {
   cert?: Record<string, unknown>;
 };
 
+export type HostFullData = {
+  host?: Partial<Host>;
+  cert?: Record<string, unknown>;
+};
+
 export interface Query {
   data: FindRPCResponse | BatchRPCResponse | undefined;
   isLoading: boolean;
@@ -199,6 +206,7 @@ export const api = createApi({
     "Hosts",
     "CertProfile",
     "DNSZones",
+    "FullHost",
   ],
   endpoints: (build) => ({
     simpleCommand: build.query<FindRPCResponse, Command | void>({
@@ -397,6 +405,47 @@ export const api = createApi({
       },
       providesTags: ["FullUser"],
     }),
+    getHostsFullData: build.query<HostFullData, string>({
+      query: (hostId) => {
+        // Prepare search parameters
+        const host_params = {
+          all: true,
+          rights: true,
+        };
+
+        const hostShowCommand: Command = {
+          method: "host_show",
+          params: [[hostId], host_params],
+        };
+
+        const certFindCommand: Command = {
+          method: "cert_find",
+          params: [[], { user: hostId, sizelimit: 0, all: true }],
+        };
+
+        const batchPayload: Command[] = [hostShowCommand, certFindCommand];
+
+        return getBatchCommand(batchPayload, API_VERSION_BACKUP);
+      },
+      transformResponse: (response: BatchResponse): HostFullData => {
+        const [hostResponse, certResponse] = response.result.results;
+
+        // Initialize user data (to prevent 'undefined' values)
+        const hostData = hostResponse.result;
+        const certData = certResponse.result;
+
+        let hostObject = {};
+        if (!hostResponse.error) {
+          hostObject = apiToHost(hostData);
+        }
+
+        return {
+          host: hostObject,
+          cert: certData,
+        };
+      },
+      providesTags: ["FullHost"],
+    }),
     saveUser: build.mutation<FindRPCResponse, Partial<User>>({
       query: (user) => {
         const params = {
@@ -428,6 +477,22 @@ export const api = createApi({
       },
       invalidatesTags: ["FullUser"],
     }),
+    saveHost: build.mutation<FindRPCResponse, Partial<Host>>({
+      query: (host) => {
+        const params = {
+          version: API_VERSION_BACKUP,
+          ...host,
+        };
+        delete params["fqdn"];
+        delete params["krbcanonicalname"];
+        const fqdn = host.fqdn !== undefined ? host.fqdn : "";
+        return getCommand({
+          method: "host_mod",
+          params: [[fqdn], params],
+        });
+      },
+      invalidatesTags: ["FullHost"],
+    }),
     getRadiusProxy: build.query<RadiusServer[], void>({
       query: () => {
         return getCommand({
@@ -607,6 +672,7 @@ export const api = createApi({
           pkey_only: true,
           sizelimit: sizeLimit,
           version: apiVersion,
+          all: true,
         };
 
         // Prepare payload
@@ -636,7 +702,7 @@ export const api = createApi({
         // Prepare payload
         const payloadHostDataBatch: Command[] = fqdns.map((fqdn) => ({
           method: "host_show",
-          params: [[fqdn], {}],
+          params: [[fqdn], { no_members: true }],
         }));
 
         // Make call using 'fetchWithBQ'
@@ -929,4 +995,6 @@ export const {
   useAddHostMutation,
   useRemoveHostsMutation,
   useGetDNSZonesQuery,
+  useSaveHostMutation,
+  useGetHostsFullDataQuery,
 } = api;
diff --git a/src/store/Identity/hosts-slice.ts b/src/store/Identity/hosts-slice.ts
index d9a522a4..1747663d 100644
--- a/src/store/Identity/hosts-slice.ts
+++ b/src/store/Identity/hosts-slice.ts
@@ -22,7 +22,7 @@ const hostsSlice = createSlice({
     addHost: (state, action: PayloadAction<Host>) => {
       const newHost = action.payload;
       state.hostsList.push({
-        hostName: newHost.hostName,
+        dn: newHost.dn,
         fqdn: newHost.fqdn,
         dnsZone: newHost.dnsZone,
         userclass: newHost.userclass,
@@ -36,6 +36,8 @@ const hostsSlice = createSlice({
         krbprincipalname: newHost.krbprincipalname,
         managedby_host: newHost.managedby_host,
         memberof_hostgroup: newHost.memberof_hostgroup,
+        sshpublickey: newHost.sshpublickey,
+        macaddress: newHost.macaddress,
         sshpubkeyfp: newHost.sshpubkeyfp,
         nshostlocation: newHost.nshostlocation,
         l: newHost.l,
@@ -46,6 +48,10 @@ const hostsSlice = createSlice({
         ipakrbrequirespreauth: newHost.ipakrbrequirespreauth,
         ipakrbokasdelegate: newHost.ipakrbokasdelegate,
         ipakrboktoauthasdelegate: newHost.ipakrboktoauthasdelegate,
+        nsosversion: newHost.nsosversion,
+        nshardwareplatform: newHost.nshardwareplatform,
+        krbprincipalauthind: newHost.krbprincipalauthind,
+        usercertificate: newHost.usercertificate,
       });
       // Update json file
     },
diff --git a/src/utils/datatypes/globalDataTypes.ts b/src/utils/datatypes/globalDataTypes.ts
index c6b04087..0a21cca9 100644
--- a/src/utils/datatypes/globalDataTypes.ts
+++ b/src/utils/datatypes/globalDataTypes.ts
@@ -152,15 +152,17 @@ export interface SudoRules {
 }
 
 export interface Host {
-  attributelevelrights: string[];
+  dn: string;
+  attributelevelrights: Record<string, unknown>;
   description: string;
-  hostName: string;
   dnsZone: string;
   enrolledby: string;
   fqdn: string;
   ip_address: string;
+  nshardwareplatform: string;
+  nsosversion: string;
   krbcanonicalname: string;
-  krbprincipalname: string;
+  krbprincipalname: string[];
   krbpwdpolicyreference: string[];
   l: string;
   managedby_host: string[];
@@ -170,6 +172,10 @@ export interface Host {
   userclass: string;
   serverhostname: string;
   sshpubkeyfp: string[];
+  sshpublickey: string[];
+  macaddress: string[];
+  krbprincipalauthind: string[];
+  usercertificate: string[];
   // Booleans
   force: boolean; // force host name even if not in DNS
   has_keytab: boolean;
diff --git a/src/utils/hostUtils.tsx b/src/utils/hostUtils.tsx
new file mode 100644
index 00000000..58ca1c03
--- /dev/null
+++ b/src/utils/hostUtils.tsx
@@ -0,0 +1,128 @@
+// Data types
+import { Host } from "src/utils/datatypes/globalDataTypes";
+// Utils
+import { convertApiObj } from "src/utils/ipaObjectUtils";
+
+// Parse the 'textInputField' data into expected data type
+// - TODO: Adapt it to work with many types of data
+export const asRecord = (
+  element: Partial<Host>,
+  onElementChange: (element: Partial<Host>) => void
+) => {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const ipaObject = element as Record<string, any>;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  function recordOnChange(ipaObject: Record<string, any>) {
+    onElementChange(ipaObject as Host);
+  }
+
+  return { ipaObject, recordOnChange };
+};
+
+// Single valued string attributes
+const simpleValues = new Set([
+  "dn",
+  "serverhostname",
+  "fqdn",
+  "description",
+  "l",
+  "ipauniqueid",
+  "krbcanonicalname",
+  "krbpwdpolicyreference",
+  "managedby",
+  "ipakrbrequirespreauth",
+  "ipakrbokasdelegate",
+  "ipakrboktoauthasdelegate",
+  "nshostlocation",
+  "userclass", // API says multivalued
+  "nsosversion",
+  "nshardwardplatform",
+]);
+const dateValues = new Set([]);
+
+export function apiToHost(apiRecord: Record<string, unknown>): Host {
+  const converted = convertApiObj(
+    apiRecord,
+    simpleValues,
+    dateValues
+  ) as Partial<Host>;
+  return objectToHost(converted) as Host;
+}
+
+// Determines whether a given property name is a simple value or is it multivalue (Array)
+//  - Returns: boolean
+export const isSimpleValue = (propertyName) => {
+  return simpleValues.has(propertyName);
+};
+
+// Covert an partial User object into a full User object
+// (initializing the undefined params with default empty values)
+export const objectToHost = (
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  partialHost: Record<string, any> | Partial<Host>,
+  oldHostObject?: Partial<Host> // Optional: To override the current object values
+): Host => {
+  const host: Host = {
+    dn: partialHost.dn || oldHostObject?.dn || "",
+    attributelevelrights:
+      partialHost.attributelevelrights ||
+      oldHostObject?.attributelevelrights ||
+      {},
+    description: partialHost.description || oldHostObject?.description || "",
+    dnsZone: partialHost.dnsZone || oldHostObject?.dnsZone || "",
+    enrolledby: partialHost.enrolledby || oldHostObject?.enrolledby || "",
+    fqdn: partialHost.fqdn || oldHostObject?.fqdn || "",
+    ip_address: partialHost.ip_address || oldHostObject?.ip_address || "",
+    krbcanonicalname:
+      partialHost.krbcanonicalname || oldHostObject?.krbcanonicalname || "",
+    krbprincipalname:
+      partialHost.krbprincipalname || oldHostObject?.krbprincipalname || [],
+    krbpwdpolicyreference:
+      partialHost.krbpwdpolicyreference ||
+      oldHostObject?.krbpwdpolicyreference ||
+      [],
+    l: partialHost.l || oldHostObject?.l || "",
+    managedby_host:
+      partialHost.managedby_host || oldHostObject?.managedby_host || [],
+    memberof_hostgroup:
+      partialHost.memberof_hostgroup || oldHostObject?.memberof_hostgroup || [],
+    managing_host:
+      partialHost.managing_host || oldHostObject?.managing_host || [],
+    nshostlocation:
+      partialHost.nshostlocation || oldHostObject?.nshostlocation || "",
+    userclass: partialHost.userclass || oldHostObject?.userclass || "",
+    serverhostname:
+      partialHost.serverhostname || oldHostObject?.serverhostname || "",
+    sshpublickey: partialHost.sshpublickey || oldHostObject?.sshpublickey || [],
+    sshpubkeyfp: partialHost.sshpubkeyfp || oldHostObject?.sshpubkeyfp || [],
+    nshardwareplatform:
+      partialHost.nshardwareplatform || oldHostObject?.nshardwareplatform || "",
+    nsosversion: partialHost.nsosversion || oldHostObject?.nsosversion || "",
+    macaddress: partialHost.macaddress || oldHostObject?.macaddress || [],
+    krbprincipalauthind:
+      partialHost.krbprincipalauthind ||
+      oldHostObject?.krbprincipalauthind ||
+      [],
+    usercertificate:
+      partialHost.usercertificate || oldHostObject?.usercertificate || [],
+    // booleans
+    force: partialHost.force || oldHostObject?.force || false,
+    has_keytab: partialHost.has_keytab || oldHostObject?.has_keytab || false,
+    has_password:
+      partialHost.has_password || oldHostObject?.has_password || false,
+    ipakrbrequirespreauth:
+      partialHost.ipakrbrequirespreauth ||
+      oldHostObject?.ipakrbrequirespreauth ||
+      false,
+    ipakrbokasdelegate:
+      partialHost.ipakrbokasdelegate ||
+      oldHostObject?.ipakrbokasdelegate ||
+      false,
+    ipakrboktoauthasdelegate:
+      partialHost.ipakrboktoauthasdelegate ||
+      oldHostObject?.ipakrboktoauthasdelegate ||
+      false,
+  };
+
+  return host;
+};