Add CentOS and AIX user guide and Access guide information under my services

support/docs/CentOS_AIX_userguide.md

@@ -0,0 +1,75 @@
+# CentOS & AIX User Guide
+
+Welcome to the CentOS & AIX User Guide for IBM® Power® Access Cloud. This guide walks you through deploying CentOS or AIX instances and accessing them via SSH.
+
+---
+
+## 1. Phase 1: Deployment via Power Access Cloud
+
+**Steps:**
+
+### Access Catalog
+1. Log in to your Power Access Cloud portal.
+2. Navigate to the **Catalog** by clicking on the "Catalog" button or "Go to Catalog".
+
+### Select Image
+1. Locate the CentOS or AIX base image (or the specific version required for your workload).
+
+### Configure & Deploy
+1. Click on the **Deploy** button.
+2. Enter the name for your Virtual Machine and click **Submit** to start provisioning.
+
+### Monitor Status
+1. Go to the **Services** tab on the Home page.
+2. The status will initially show as **Deploying**.
+3. Wait for the status to transition to **Active**.
+
+---
+
+## 2. Phase 2: Boot Process
+
+**Important Note:**
+
+Once the status shows **Active**, an External IP address will be assigned to your machine.
+
+---
+
+## 3. Phase 3: SSH Access
+
+**Steps:**
+
+Once the status is active and the External IP is assigned, you can connect to your VM via SSH.
+
+1. **Retrieve IP:** Copy the External IP from the service details page.
+2. **Open Local Terminal:** Open your local terminal (PowerShell, Command Prompt, or Terminal on your workstation).
+3. **Connect via SSH:** Run the following command:
+   ```bash
+   ssh root@<external-ip>
+   ```
+   Replace `<external-ip>` with the actual External IP address of your VM.
+
+**Example:**
+```bash
+ssh root@150.240.64.10
+```
+
+4. **Accept Host Key:** On first connection, you'll be prompted to accept the host key. Type `yes` and press Enter.
+5. **You're In:** You should now be logged into your CentOS or AIX VM.
+
+**Troubleshooting:**
+
+If you encounter a "Host key verification failed" error, run the following command to remove the old host key from the known hosts file:
+
+```bash
+ssh-keygen -R <your-external-ip>
+```
+
+---
+
+## Notes
+
+- The default user for SSH access is `root`.
+- Ensure your SSH client is properly configured on your local machine.
+- If you encounter connection issues, wait a few more minutes for the VM to fully boot and the SSH service to start.
+
+---

web/src/components/ServicesForHome.jsx

@@ -18,7 +18,7 @@ import {
 import { useNavigate } from "react-router-dom";
 import { flattenArrayOfObject } from "./commonUtils";
 import UserService from "../services/UserService";
-import { CheckmarkFilled,Pending,InProgress, Information, Renew,ErrorFilled } from "@carbon/icons-react";
+import { CheckmarkFilled,Pending,InProgress, Information, Renew,ErrorFilled, InformationFilled } from "@carbon/icons-react";
 import DeleteService from "./PopUp/DeleteService";
 import ServiceExtend from "./PopUp/ServiceExtend";
 import ServiceDetails from './PopUp/ServiceDetails';
@@ -69,6 +69,22 @@ const headers = [
     header: "Action",
   }
 ];
+// Helper function to get OS-specific access guide
+const getAccessGuideLink = (osType) => {
+  if (osType && osType.toLowerCase().includes('ibmi')) {
+    return {
+      text: 'IBMi Access Guide',
+      url: 'https://github.com/IBM/power-access-cloud/blob/main/support/docs/IBMi_userguide.md'
+    };
+  } else if (osType && (osType.toLowerCase().includes('centos') || osType.toLowerCase().includes('aix'))) {
+    return {
+      text: 'CentOS/AIX Access Guide',
+      url: 'https://github.com/IBM/power-access-cloud/blob/main/support/docs/CentOS_AIX_userguide.md'
+    };
+  }
+  return null;
+};
+
 const ServicesForHome=({groups})=> {
   let navigate = useNavigate();
   const [servicesrows, setServicesRows] = useState([]);
@@ -223,7 +239,6 @@ const ServicesForHome=({groups})=> {
                             <Information />
                           </Button>
                     </Tooltip></h4>
-
                 <TableContainer
                   {...getTableContainerProps()}
                 >
@@ -238,11 +253,38 @@ const ServicesForHome=({groups})=> {
                       </TableRow>
                     </TableHead>
                     <TableBody>
-                      {rows.map((row) => (
+                      {rows.map((row) => {
+                        const serviceData = servicesrows.find(s => s.id === row.id);
+                        const osType = serviceData?.catalog_name || serviceData?.display_name || '';
+                        const accessGuide = getAccessGuideLink(osType);
+
+                        return (
                         <TableRow key={row.id}>
-                          {row.cells.map((cell,i) => (cell.value &&
-                            // <TableCell key={cell.id}>{cell.value}</TableCell>
-                            ((i!==2)?<TableCell key={cell.id}>{cell.value}</TableCell>:<TableCell key={cell.id}>{row.cells[i].value==="PENDING EXTENSION"&&<><svg  x="0px" y="0px"
+                          {row.cells.map((cell,i) => {
+                            // Access information column (index 3) - only show tooltip if there's an actual IP (not "...")
+                            if (i === 3 && cell.value && cell.value !== "..." && accessGuide) {
+                              return (
+                                <TableCell key={cell.id}>
+                                  <div style={{display: 'flex', alignItems: 'center', gap: '0.5rem'}}>
+                                    <span>{cell.value}</span>
+                                    <Tooltip align="right" label={accessGuide.text}>
+                                      <a
+                                        href={accessGuide.url}
+                                        target="_blank"
+                                        rel="noopener noreferrer"
+                                        style={{display: 'flex', alignItems: 'center', textDecoration: 'none'}}
+                                      >
+                                        <Information size={16} style={{cursor: 'pointer', color: '#0F62FE', verticalAlign: 'middle'}} />
+                                      </a>
+                                    </Tooltip>
+                                  </div>
+                                </TableCell>
+                              );
+                            }
+                            // Status column (index 2)
+                            if (i === 2 && cell.value) {
+                              return (
+                                <TableCell key={cell.id}>{row.cells[i].value==="PENDING EXTENSION"&&<><svg  x="0px" y="0px"
                             viewBox="0 0 32 32"  width="18px" height="18px" fill="#FA4D56">
                          <path d="M28,6c0-1.1-0.9-2-2-2h-4V2h-2v2h-8V2h-2v2H6C4.9,4,4,4.9,4,6v20c0,1.1,0.9,2,2,2h19v-2H6V6h4v2h2V6h8v2h2V6h4v16h2V6z"/>
                          <g>
@@ -254,8 +296,15 @@ const ServicesForHome=({groups})=> {
                            <circle cx="22.3" cy="17" r="2"/>
                            <circle cx="16.3" cy="17" r="2"/>
                          </g>
-                         </svg> Pending Extension</>} {(row.cells[i].value==="CREATED"&&<> <CheckmarkFilled  style={{fill:"#24A148"}}/> Active</>)}{(row.cells[i].value==="NEW"&&<> <Pending style={{fill: "#FA4D56"}}/> Pending</>)}{(row.cells[i].value==="IN_PROGRESS"&&<> <InProgress style={{fill: "#F1C21B"}} /> Deploying</>)}{(row.cells[i].value==="EXPIRED"&&<> <ErrorFilled style={{fill: "#FA4D56"}} /> Expired</>)}</TableCell>)
-                          ))}
+                         </svg> Pending Extension</>} {(row.cells[i].value==="CREATED"&&<> <CheckmarkFilled  style={{fill:"#24A148"}}/> Active</>)}{(row.cells[i].value==="NEW"&&<> <Pending style={{fill: "#FA4D56"}}/> Pending</>)}{(row.cells[i].value==="IN_PROGRESS"&&<> <InProgress style={{fill: "#F1C21B"}} /> Deploying</>)}{(row.cells[i].value==="EXPIRED"&&<> <ErrorFilled style={{fill: "#FA4D56"}} /> Expired</>)}</TableCell>
+                              );
+                            }
+                            // Default cell rendering
+                            if (cell.value) {
+                              return <TableCell key={cell.id}>{cell.value}</TableCell>;
+                            }
+                            return null;
+                          })}
                           <TableCell >
                             <OverflowMenu size="sm" flipped>
                               <OverflowMenuItem 
@@ -295,7 +344,8 @@ const ServicesForHome=({groups})=> {
                             </OverflowMenu>
                           </TableCell>
                         </TableRow>
-                      ))}
+                        );
+                      })}
                        {
                   }
                     </TableBody>