Update Hosts page for CL

Make the basic features on the main Host page functional
freeipa · Nov 29, 2023 · 95da905 · 95da905
1 parent 6dddb12
commit 95da905
Show file tree

Hide file tree

Showing 21 changed files with 529 additions and 294 deletions.
diff --git a/src/components/BulkSelectorHostsPrep.tsx b/src/components/BulkSelectorHostsPrep.tsx
@@ -108,13 +108,13 @@ const BulkSelectorHostsPrep = (props: PropsToBulkSelectorHostsPrep) => {
     selectableHostsList: Host[]
   ) => {
     props.elementData.changeSelectedHostIds(
-      isSelecting ? selectableHostsList.map((r) => r.id) : []
+      isSelecting ? selectableHostsList.map((r) => r.fqdn) : []
     );
 
     // Update selected elements
     const hostNamesArray: string[] = [];
     selectableHostsList.map((host) => {
-      hostNamesArray.push(host.id);
+      hostNamesArray.push(host.fqdn);
     });
     props.elementData.updateSelectedHosts(hostNamesArray);
 
@@ -131,7 +131,7 @@ const BulkSelectorHostsPrep = (props: PropsToBulkSelectorHostsPrep) => {
           hostsIdArray.push(host);
         });
         selectableHostsList.map((host) => {
-          hostsIdArray.push(host.id);
+          hostsIdArray.push(host.fqdn);
         });
       }
 
@@ -163,20 +163,20 @@ const BulkSelectorHostsPrep = (props: PropsToBulkSelectorHostsPrep) => {
     selectableHostsList: Host[]
   ) => {
     props.elementData.changeSelectedHostIds(
-      isSelecting ? selectableHostsList.map((r) => r.id) : []
+      isSelecting ? selectableHostsList.map((r) => r.fqdn) : []
     );
 
     // Update selected elements
     const hostNamesArray: string[] = [];
     selectableHostsList.map((host) => {
-      hostNamesArray.push(host.id);
+      hostNamesArray.push(host.fqdn);
     });
     props.elementData.updateSelectedHosts(hostNamesArray);
 
     // Enable/disable 'Delete' button
     if (isSelecting) {
       const hostsIdArray: string[] = [];
-      selectableHostsList.map((host) => hostsIdArray.push(host.id));
+      selectableHostsList.map((host) => hostsIdArray.push(host.fqdn));
       props.elementData.changeSelectedHostIds(hostsIdArray);
       props.elementData.updateSelectedHosts(hostsIdArray);
       props.buttonsData.updateIsDeleteButtonDisabled(false);
@@ -240,7 +240,7 @@ const BulkSelectorHostsPrep = (props: PropsToBulkSelectorHostsPrep) => {
   // The 'currentPageAlreadySelected' should be set when elements are selected
   useEffect(() => {
     const found = props.shownElementsList.every(
-      (host) => props.elementData.selectedHosts.indexOf(host.id) >= 0
+      (host) => props.elementData.selectedHosts.indexOf(host.fqdn) >= 0
     );
 
     if (found) {
@@ -252,7 +252,7 @@ const BulkSelectorHostsPrep = (props: PropsToBulkSelectorHostsPrep) => {
       // If there is no elements selected on the page yet, reset 'selectedPerPage'
       if (
         !props.shownElementsList.some(
-          (host) => props.elementData.selectedHosts.indexOf(host.id) >= 0
+          (host) => props.elementData.selectedHosts.indexOf(host.fqdn) >= 0
         )
       ) {
         props.selectedPerPageData.updateSelectedPerPage(0);

diff --git a/src/components/HostsSections/AllowedCreateKeytab.tsx b/src/components/HostsSections/AllowedCreateKeytab.tsx
@@ -17,12 +17,12 @@ const AllowedCreateKeytab = (props: PropsToAllowCreateKeytab) => {
   return (
     <Flex direction={{ default: "column", lg: "row" }}>
       <FlexItem flex={{ default: "flex_1" }}>
-        <CreateKeytabUsersTable host={props.host.hostName} />
-        <CreateKeytabHostsTable host={props.host.hostName} />
+        <CreateKeytabUsersTable host={props.host.fqdn} />
+        <CreateKeytabHostsTable host={props.host.fqdn} />
       </FlexItem>
       <FlexItem flex={{ default: "flex_1" }}>
-        <CreateKeytabUserGroupsTable host={props.host.hostName} />
-        <CreateKeytabHostGroupsTable host={props.host.hostName} />
+        <CreateKeytabUserGroupsTable host={props.host.fqdn} />
+        <CreateKeytabHostGroupsTable host={props.host.fqdn} />
       </FlexItem>
     </Flex>
   );

diff --git a/src/components/HostsSections/AllowedRetrieveKeytab.tsx b/src/components/HostsSections/AllowedRetrieveKeytab.tsx
@@ -17,12 +17,12 @@ const AllowedRetrieveKeytab = (props: PropsToAllowRetrieveKeytab) => {
   return (
     <Flex direction={{ default: "column", lg: "row" }}>
       <FlexItem flex={{ default: "flex_1" }}>
-        <RetrieveKeytabUsersTable host={props.host.hostName} />
-        <RetrieveKeytabHostsTable host={props.host.hostName} />
+        <RetrieveKeytabUsersTable host={props.host.fqdn} />
+        <RetrieveKeytabHostsTable host={props.host.fqdn} />
       </FlexItem>
       <FlexItem flex={{ default: "flex_1" }}>
-        <RetrieveKeytabUserGroupsTable host={props.host.hostName} />
-        <RetrieveKeytabHostGroupsTable host={props.host.hostName} />
+        <RetrieveKeytabUserGroupsTable host={props.host.fqdn} />
+        <RetrieveKeytabHostGroupsTable host={props.host.fqdn} />
       </FlexItem>
     </Flex>
   );

diff --git a/src/components/HostsSections/HostSettings.tsx b/src/components/HostsSections/HostSettings.tsx
@@ -40,15 +40,15 @@ interface PropsToHostSettings {
 const HostSettings = (props: PropsToHostSettings) => {
   const REALM = "@SERVER.IPA.DEMO";
   // Host name - textbox (mandatory field)
-  const [hostName] = useState(props.host.hostName);
+  const [hostName] = useState(props.host.fqdn);
 
   // Principal alias - textbox
   const [principalAliasList, setPrincipalAliasList] = useState<
     PrincipalAlias[]
   >([
     {
       id: 0,
-      alias: "host/" + props.host.hostName + REALM, // TODO: The realm (@SERVER.IPA.DEMO) should adapt to context
+      alias: "host/" + props.host.fqdn + REALM, // TODO: The realm (@SERVER.IPA.DEMO) should adapt to context
     },
   ]);
 
@@ -61,7 +61,7 @@ const HostSettings = (props: PropsToHostSettings) => {
   };
 
   // Class - textbox
-  const [hostClass, setHostClass] = useState(props.host.class);
+  const [hostClass, setHostClass] = useState(props.host.userclass);
   const updateHostClass = (newHostClass: string) => {
     setHostClass(newHostClass);
   };

diff --git a/src/components/ManagedBy/ManagedByAddModal.tsx b/src/components/ManagedBy/ManagedByAddModal.tsx
@@ -27,12 +27,12 @@ interface PropsToAddModal {
 }
 
 interface ManagedByElement {
-  hostName?: string;
+  fqdn?: string;
 }
 
 const ManagedByAddModal = (props: PropsToAddModal) => {
   // Dual list data
-  const data = props.availableData.map((d) => d.hostName);
+  const data = props.availableData.map((d) => d.fqdn);
 
   // Dual list selector
   const [availableOptions, setAvailableOptions] = useState<ReactNode[]>(data);
@@ -86,7 +86,7 @@ const ManagedByAddModal = (props: PropsToAddModal) => {
 
   // Get all info from a chosen option
   const getInfoFromGroupData = (option: unknown) => {
-    return props.availableData.find((d) => option === d.hostName);
+    return props.availableData.find((d) => option === d.fqdn);
   };
 
   // Add group option
@@ -98,7 +98,7 @@ const ManagedByAddModal = (props: PropsToAddModal) => {
         // Host groups
         if (props.tabData.tabName === "Hosts") {
           props.groupRepository.push({
-            hostName: optionData.hostName !== undefined && optionData.hostName,
+            hostName: optionData.fqdn !== undefined && optionData.fqdn,
           } as Host);
           // Send updated data to table
           props.updateGroupRepository(props.groupRepository as Host[]);

diff --git a/src/components/ManagedBy/ManagedByDeleteModal.tsx b/src/components/ManagedBy/ManagedByDeleteModal.tsx
@@ -74,7 +74,7 @@ const ManagedByDeleteModal = (props: PropsToDeleteModal) => {
     let generalUpdatedGroupList = props.groupRepository;
     props.groupNamesToDelete.map((groupName) => {
       const updatedGroupList = generalUpdatedGroupList.filter(
-        (grp) => grp.hostName !== groupName
+        (grp) => grp.fqdn !== groupName
       );
       // If not empty, replace groupList by new array
       if (updatedGroupList) {

diff --git a/src/components/ManagedBy/ManagedByTable.tsx b/src/components/ManagedBy/ManagedByTable.tsx
@@ -50,7 +50,7 @@ const ManagedByTable = (props: PropsToTable) => {
   const [selectedElementIds, setSelectedElementIds] = useState<string[]>([]);
 
   // Selectable checkboxes on table
-  const isElementSelectable = (element: Host) => element.hostName !== "";
+  const isElementSelectable = (element: Host) => element.fqdn !== "";
   const selectableElements = props.list.filter(isElementSelectable);
 
   // Selected rows are tracked. Primary key: hostName
@@ -61,31 +61,29 @@ const ManagedByTable = (props: PropsToTable) => {
   const setElementSelected = (element: Host, isSelecting = true) =>
     setSelectedElementNames((prevSelected) => {
       const otherSelectedElementNames = prevSelected.filter(
-        (r) => r !== element.hostName
+        (r) => r !== element.fqdn
       );
       return isSelecting && isElementSelectable(element)
-        ? [...otherSelectedElementNames, element.hostName]
+        ? [...otherSelectedElementNames, element.fqdn]
         : otherSelectedElementNames;
     });
 
   const areAllElementsSelected =
     selectedElementNames.length === selectableElements.length;
 
   const isElementSelected = (element: Host) =>
-    selectedElementNames.includes(element.hostName);
+    selectedElementNames.includes(element.fqdn);
 
   // Multiple selection
   const selectAllElements = (isSelecting = true) => {
     setSelectedElementNames(
-      isSelecting ? selectableElements.map((g) => g.hostName) : []
+      isSelecting ? selectableElements.map((g) => g.fqdn) : []
     );
 
     // Enable/disable 'Delete' button
     if (isSelecting) {
       const groupsNameArray: string[] = [];
-      selectableElements.map((element) =>
-        groupsNameArray.push(element.hostName)
-      );
+      selectableElements.map((element) => groupsNameArray.push(element.fqdn));
       setSelectedElementIds(groupsNameArray);
       props.updateElementsSelected(groupsNameArray);
       props.buttonData.changeIsDeleteButtonDisabled(false);
@@ -131,12 +129,12 @@ const ManagedByTable = (props: PropsToTable) => {
     // Update selectedElements array
     let selectedElementsArray = selectedElementNames;
     if (isSelecting) {
-      selectedElementsArray.push(element.hostName);
+      selectedElementsArray.push(element.fqdn);
       setSelectedElementIds(selectedElementsArray);
       props.updateElementsSelected(selectedElementsArray);
     } else {
       selectedElementsArray = selectedElementsArray.filter(
-        (elementName) => elementName !== element.hostName
+        (elementName) => elementName !== element.fqdn
       );
       setSelectedElementIds(selectedElementsArray);
       props.updateElementsSelected(selectedElementsArray);
@@ -219,7 +217,7 @@ const ManagedByTable = (props: PropsToTable) => {
 
   // Define table body
   const body = props.list.map((element, rowIndex) => (
-    <Tr key={element.hostName} id={element.hostName}>
+    <Tr key={element.fqdn} id={element.fqdn}>
       <Td
         dataLabel="checkbox"
         select={{
@@ -230,7 +228,7 @@ const ManagedByTable = (props: PropsToTable) => {
           disable: !isElementSelectable(element),
         }}
       />
-      <Td dataLabel={element.hostName}>{element.hostName}</Td>
+      <Td dataLabel={element.fqdn}>{element.fqdn}</Td>
     </Tr>
   ));
 

diff --git a/src/components/modals/AddHost.tsx b/src/components/modals/AddHost.tsx
@@ -23,6 +23,7 @@ import { addHost } from "src/store/Identity/hosts-slice";
 export interface PropsToAddHost {
   show: boolean;
   handleModalToggle: () => void;
+  onRefresh?: () => void;
 }
 
 const AddHost = (props: PropsToAddHost) => {
@@ -304,13 +305,23 @@ const AddHost = (props: PropsToAddHost) => {
     const validation = validateFields();
     if (validation) {
       const newHost: Host = {
-        id: hostName,
-        hostName: hostName + "." + dnsZoneSelected,
+        hostName: hostName,
+        fqdn: hostName + "." + dnsZoneSelected,
         dnsZone: dnsZoneSelected,
-        class: hostClass,
-        ipAddress: hostIpAddress,
+        userclass: hostClass,
+        ip_address: hostIpAddress,
         description: "",
-        enrolled: true, // TODO: Investigate on enrolling hosts to set this value correctly
+        enrolledby: "", // TODO: Investigate on enrolling hosts to see how this value is determined
+        force: false,
+        has_keytab: false,
+        has_password: false,
+        krbcanonicalname: "",
+        krbprincipalname: "",
+        managedby_host: [],
+        memberof_hostgroup: [],
+        sshpubkeyfp: [],
+        nshostlocation: "",
+        l: "",
       };
       dispatch(addHost(newHost));
       cleanAndCloseModal();
@@ -321,13 +332,23 @@ const AddHost = (props: PropsToAddHost) => {
     const validation = validateFields();
     if (validation) {
       const newHost: Host = {
-        id: hostName,
-        hostName: hostName + "." + dnsZoneSelected,
+        hostName: hostName,
+        fqdn: hostName + "." + dnsZoneSelected,
         dnsZone: dnsZoneSelected,
-        class: hostClass,
-        ipAddress: hostIpAddress,
+        userclass: hostClass,
+        ip_address: hostIpAddress,
         description: "",
-        enrolled: true, // TODO: Investigate on enrolling hosts to set this value correctly
+        enrolledby: "", // TODO: Investigate on enrolling hosts to set this value correctly
+        force: false,
+        has_keytab: false,
+        has_password: false,
+        krbcanonicalname: "",
+        krbprincipalname: "",
+        managedby_host: [],
+        memberof_hostgroup: [],
+        sshpubkeyfp: [],
+        nshostlocation: "",
+        l: "",
       };
       dispatch(addHost(newHost));
       // Do not close the modal, but clean fields & reset validations
@@ -358,7 +379,7 @@ const AddHost = (props: PropsToAddHost) => {
     </Button>,
   ];
 
-  // Render 'AddUser'
+  // Render 'AddHost'
   return (
     <ModalWithFormLayout
       variantType="small"

diff --git a/src/components/modals/AddService.tsx b/src/components/modals/AddService.tsx
@@ -31,7 +31,7 @@ const AddService = (props: PropsToAddService) => {
 
   // Set host names list
   const hostsList = useAppSelector((state) => state.hosts.hostsList);
-  const hostNamesList = hostsList.map((hostName) => hostName.hostName);
+  const hostNamesList = hostsList.map((hostName) => hostName.fqdn);
 
   // 'Service' select
   const [isServiceOpen, setIsServiceOpen] = useState(false);

diff --git a/src/components/modals/DeleteHosts.tsx b/src/components/modals/DeleteHosts.tsx
@@ -29,6 +29,7 @@ export interface PropsToDeleteHosts {
   handleModalToggle: () => void;
   selectedHostsData: SelectedHostsData;
   buttonsData: ButtonsData;
+  onRefresh?: () => void;
 }
 
 const DeleteHosts = (props: PropsToDeleteHosts) => {

diff --git a/src/components/tables/HostsSettings/CreateKeytabHostsTable.tsx b/src/components/tables/HostsSettings/CreateKeytabHostsTable.tsx
@@ -16,7 +16,7 @@ interface PropsToTable {
 const CreateKeytabHostsTable = (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/pages/ActiveUsers/ActiveUsers.tsx b/src/pages/ActiveUsers/ActiveUsers.tsx
@@ -49,7 +49,7 @@ import { API_VERSION_BACKUP, isUserSelectable } from "src/utils/utils";
 import {
   Command,
   useGettingActiveUserQuery,
-  useSimpleMutCommandMutation,
+  useAutoMemberRebuildUsersMutation,
   UsersPayload,
 } from "src/services/rpc";
 // Errors
@@ -71,7 +71,7 @@ const ActiveUsers = () => {
   const [activeUsersList, setActiveUsersList] = useState<User[]>([]);
 
   // Define 'executeCommand' to execute simple commands (via Mutation)
-  const [executeCommand] = useSimpleMutCommandMutation();
+  const [executeAutoMemberRebuild] = useAutoMemberRebuildUsersMutation();
 
   // Alerts to show in the UI
   const alerts = useAlerts();
@@ -270,27 +270,14 @@ const ActiveUsers = () => {
   // [API call] 'Rebuild auto membership'
   // TODO: Move this into a separate component
   const onRebuildAutoMembership = () => {
-    // The operation will be made depending on the selected users
-    const paramArgs =
-      selectedUsers.length === 0
-        ? { type: "group", version: apiVersion }
-        : { users: selectedUsers.map((uid) => uid[0]), version: apiVersion };
-
-    // Prepare API call payload
-    const automemberPayload: Command = {
-      method: "automember_rebuild",
-      params: [[], paramArgs],
-    };
-
-    executeCommand(automemberPayload).then((result) => {
+    executeAutoMemberRebuild(selectedUsers).then((result) => {
       if ("data" in result) {
         const automemberError = result.data.error as
           | FetchBaseQueryError
           | SerializedError;
 
         if (automemberError) {
           // alert: error
-
           let error: string | undefined = "";
           if ("error" in automemberError) {
             error = automemberError.error;