Add IBMi login process as an note under my services

support/docs/IBMi_userguide.md

@@ -0,0 +1,107 @@
+# IBM® i User Guide
+
+Welcome to the IBM® i User Guide for IBM® Power® Access Cloud. This guide walks you through deploying an IBM® i instance and accessing it via SSH and 5250 console.
+
+---
+
+## 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 IBM i 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: The IPL and Boot Process
+
+**Important Note:**
+
+Once the status shows **Active**, an External IP address will be assigned to your machine. However, the OS is not immediately reachable.
+
+**For IBM i-based VMs**, the system must undergo an Initial Program Load (IPL) and several internal boot-up sequences. It typically takes **30–40 minutes** after the status turns "Active" before the SSHD (SSH Daemon) starts and the machine becomes accessible via the network.
+
+---
+
+## 3. Phase 3: Initial Remote Access
+
+**Steps:**
+
+After 30-40 minutes of waiting, you can establish your first connection using the default administrative profile.
+
+1. **Retrieve IP:** Copy the External IP from the service details page.
+2. **Connect via SSH:** Open your local terminal (PowerShell, Command Prompt, or Terminal) and run:
+   ```bash
+   ssh PAC@<your-external-ip>
+   ```
+
+---
+
+## 4. Accessing 5250 Console via SSH-Key Tunneling
+
+**Prerequisites:** You have successfully enabled SSH-key based login.
+
+Follow these steps to establish your 5250 console:
+
+### Step 1: Set IBM i User Password
+
+SSH keys handle the secure "handshake" for the tunnel, but the 5250 sign-on screen still requires a standard IBM i password.
+
+```
+system "CHGUSRPRF USRPRF(*USER) PASSWORD(YourSecurePassword)"
+```
+
+**Note:** Replace `*USER` with your specific PAC user profile.
+
+### Step 2: Enable Telnet Service
+
+The 5250 session runs over Telnet (Port 23), which must be active on the system to accept the tunneled connection.
+
+```
+system "STRTCPSVR *TELNET"
+```
+
+### Step 3: Establish the SSH Tunnel
+
+On your local workstation (Laptop/PC), open a terminal or command prompt to create the secure bridge. This command maps a local port to the IBM i Telnet port.
+
+```bash
+ssh -L 50000:localhost:23 PAC@powervs_public_ip
+```
+
+**Parameters:**
+- `-L`: Maps local port 50000 to the remote localhost port 23.
+
+**Important:** Keep this terminal window open; closing it kills the connection to the 5250 console.
+
+### Step 4: Configure ACS 5250 Session
+
+With the tunnel active, configure your IBM i Access Client Solutions (ACS) tool to point at the local end of the tunnel.
+
+1. Open the **ACS Tool**.
+2. Go to the **5250 Session Manager**.
+3. Select **New Display Session**.
+4. In the settings, enter the following:
+   - **Destination:** `localhost`
+   - **Port:** `50000` (This must match the port used in your SSH tunnel command).
+5. Click **OK** or **Connect**.
+
+### Step 5: Sign On to 5250
+
+The classic IBM i "Sign On" display will appear.
+
+1. Enter your **User ID** (PAC).
+2. Enter the **Password** you created in Step 1.

web/src/components/ServicesForHome.jsx

@@ -13,12 +13,13 @@ import {
   OverflowMenu,
   OverflowMenuItem,
   Button,
-  Tooltip
+  Tooltip,
+  InlineNotification
 } from "@carbon/react";
 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, Launch } from "@carbon/icons-react";
 import DeleteService from "./PopUp/DeleteService";
 import ServiceExtend from "./PopUp/ServiceExtend";
 import ServiceDetails from './PopUp/ServiceDetails';
@@ -113,13 +114,6 @@ const ServicesForHome=({groups})=> {
     setServicesRows(data?.payload);
     setLoading(false);
   };
-  // useEffect(()=>{
-  //   fetchServicesData();
-  //   const intervalId = setInterval(() => {
-  //     fetchServicesData(); // Fetch data every 1 minutes
-  //   }, 60000);
-  //   return () => clearInterval(intervalId);
-  // },[actionProps])
 
   useEffect(()=>{
     fetchServicesData();
@@ -223,11 +217,33 @@ const ServicesForHome=({groups})=> {
                             <Information />
                           </Button>
                     </Tooltip></h4>
+
+                {/* --- IBMI OPEN NOTE --- */}
+                <InlineNotification
+                  kind="info"
+                  lowContrast
+                  hideCloseButton
+                  title="Note for IBMi Users:"
+                  subtitle={
+                    <span>
+                      Once the status is <strong>Active</strong>, the system requires <strong>35-40 minutes</strong> to fully initialize before SSH access is available. The default username is <strong>PAC</strong>. For more reference,{' '}
+                      <a 
+                        href="https://github.com/IBM/power-access-cloud/blob/main/support/docs/IBMi_userguide.md" 
+                        target="_blank" 
+                        rel="noopener noreferrer" 
+                        style={{ textDecoration: 'underline', fontWeight: 'bold', display: 'inline-flex', alignItems: 'center', gap: '4px' }}
+                      >
+                        go to link <Launch size={14} />
+                      </a>
+                    </span>
+                  }
+                  style={{ marginBottom: '1rem', marginTop: '1rem', maxWidth: '100%' }}
+                />
 
                 <TableContainer
                   {...getTableContainerProps()}
                 >
-                  {((rows.length>0)&&<Table {...getTableProps()} style={{marginTop:"2rem"}}>
+                  {((rows.length>0)&&<Table {...getTableProps()} style={{marginTop:"1rem"}}>
                     <TableHead>
                       <TableRow>
                         {headers.map((header) => (
@@ -241,13 +257,12 @@ const ServicesForHome=({groups})=> {
                       {rows.map((row) => (
                         <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"
                             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>
-                           <polygon points="24.9,23.9 23.5,22.5 22.1,23.9 23.5,25.3 24.9,26.7 26.3,28.1 27.7,26.7 26.3,25.3 	"/>
-                           <polygon points="23.5,28.1 22.1,29.5 23.5,30.9 24.9,29.5 26.3,28.1 27.7,26.7 26.3,25.3 24.9,26.7 	"/>
+                           <polygon points="24.9,23.9 23.5,22.5 22.1,23.9 23.5,25.3 24.9,26.7 26.3,28.1 27.7,26.7 26.3,25.3   "/>
+                           <polygon points="23.5,28.1 22.1,29.5 23.5,30.9 24.9,29.5 26.3,28.1 27.7,26.7 26.3,25.3 24.9,26.7   "/>
                          </g>
                          <g>
                            <circle cx="10.3" cy="17" r="2"/>
@@ -296,8 +311,6 @@ const ServicesForHome=({groups})=> {
                           </TableCell>
                         </TableRow>
                       ))}
-                       {
-                  }
                     </TableBody>
                   </Table>)}
                 </TableContainer>