add cluster and instance aliases along with edit capability and stori…

apps/frontend/src/components/Dashboard.tsx

@@ -13,7 +13,7 @@ import { selectData } from "@/state/valkey-features/info/infoSelectors.ts"
 
 export function Dashboard() {
   const { id } = useParams()
-  const infoData = useSelector(selectData(id!))
+  const infoData = useSelector(selectData(id!)) || {}
   const [searchQuery, setSearchQuery] = useState("")
 
   const memoryUsageMetrics = {

apps/frontend/src/components/connection/ClusterConnectionGroup.tsx

@@ -1,8 +1,10 @@
 import { useState, useRef, useEffect } from "react"
-import { ChevronDown, ChevronRight, Network, CircleChevronRight } from "lucide-react"
+import { ChevronDown, ChevronRight, Network, CircleChevronRight, PencilIcon, CheckIcon, XIcon } from "lucide-react"
 import { CONNECTED } from "@common/src/constants.ts"
 import { ConnectionEntry } from "./ConnectionEntry.tsx"
-import type { ConnectionState } from "@/state/valkey-features/connection/connectionSlice"
+import { updateConnectionDetails, type ConnectionState } from "@/state/valkey-features/connection/connectionSlice"
+import { useAppDispatch } from "@/hooks/hooks.ts"
+import { Button } from "@/components/ui/button.tsx"
 import history from "@/history.ts"
 
 interface ClusterConnectionGroupProps {
@@ -11,7 +13,10 @@ interface ClusterConnectionGroupProps {
 }
 
 export const ClusterConnectionGroup = ({ clusterId, connections }: ClusterConnectionGroupProps) => {
+  const dispatch = useAppDispatch()
   const [isOpen, setIsOpen] = useState(false)
+  const [isEditing, setIsEditing] = useState(false)
+  const [editedAlias, setEditedAlias] = useState("")
   const dropdownRef = useRef<HTMLDivElement>(null)
 
   useEffect(() => {
@@ -32,12 +37,36 @@ export const ClusterConnectionGroup = ({ clusterId, connections }: ClusterConnec
   const hasConnectedInstance = connectedCount > 0
   const firstConnectedConnection = connected[0]
 
+  // capture cluster alias from the first node's alias
+  const firstNode = connections[0]
+  const firstNodeAlias = firstNode?.connection.connectionDetails.alias
+
   const handleOpenCluster = () => {
     if (firstConnectedConnection) {
       history.navigate(`/${clusterId}/${firstConnectedConnection.connectionId}/cluster-topology`)
     }
   }
 
+  const handleEdit = () => {
+    setEditedAlias(firstNodeAlias || "")
+    setIsEditing(true)
+  }
+
+  const handleSave = () => {
+    if (firstNode) {
+      dispatch(updateConnectionDetails({
+        connectionId: firstNode.connectionId,
+        alias: editedAlias.trim() || undefined,
+      }))
+    }
+    setIsEditing(false)
+  }
+
+  const handleCancel = () => {
+    setEditedAlias(firstNodeAlias || "")
+    setIsEditing(false)
+  }
+
   return (
     <div
       className="mb-3 border dark:border-tw-dark-border rounded bg-white dark:bg-tw-dark-primary"
@@ -54,20 +83,43 @@ export const ClusterConnectionGroup = ({ clusterId, connections }: ClusterConnec
               {isOpen ? <ChevronDown size={20} /> : <ChevronRight size={20} />}
             </button>
 
-            <div className="flex items-center gap-2">
+            <div className="flex items-center gap-2 flex-1">
               <div className="p-2 bg-tw-primary/10 dark:bg-tw-primary/20 rounded">
                 <Network className="text-tw-primary" size={18} />
               </div>
-              <div>
-                <div className="flex items-center gap-2">
-                  <h3 className="text-sm text-gray-900 dark:text-white">{clusterId}</h3>
-                  {hasConnectedInstance && (
-                    <span className="px-2 py-0.5 text-xs font-medium bg-teal-100 dark:bg-teal-900/30 text-teal-700
-                     dark:text-teal-400 rounded-full">
-                      {connectedCount} connected
-                    </span>
-                  )}
-                </div>
+              <div className="flex-1">
+                {isEditing ? (
+                  <div className="flex items-center gap-2 mb-1">
+                    <input
+                      autoFocus
+                      className="px-2 py-1 text-sm border dark:border-tw-dark-border rounded
+                        bg-white dark:bg-tw-primary/20 focus:outline-none focus:ring-2 focus:ring-tw-primary"
+                      onChange={(e) => setEditedAlias(e.target.value)}
+                      placeholder={clusterId}
+                      type="text"
+                      value={editedAlias}
+                    />
+                    <Button onClick={handleSave} size="sm" title="Save" variant="secondary">
+                      <CheckIcon className="text-tw-primary" size={16} />
+                    </Button>
+                    <Button onClick={handleCancel} size="sm" title="Cancel" variant="destructiveGhost">
+                      <XIcon className="" size={16} />
+                    </Button>
+                  </div>
+                ) : (
+                  <div className="flex items-center gap-2">
+                    <h3 className="text-sm text-gray-900 dark:text-white">{firstNodeAlias ? firstNodeAlias : clusterId}</h3>
+                    <Button className="h-6 w-6 p-0" onClick={handleEdit} size="sm" variant="ghost">
+                      <PencilIcon size={14} />
+                    </Button>
+                    {hasConnectedInstance && (
+                      <span className="px-2 py-0.5 text-xs font-medium bg-teal-100 dark:bg-teal-900/30 text-teal-700
+                       dark:text-teal-400 rounded-full">
+                        {connectedCount} connected
+                      </span>
+                    )}
+                  </div>
+                )}
                 <p className="text-sm text-gray-500 dark:text-gray-400">
                   {connections.length} instance{connections.length !== 1 ? "s" : ""}
                 </p>

apps/frontend/src/components/connection/ConnectionEntry.tsx

@@ -8,14 +8,18 @@ import {
   PowerIcon,
   PowerOffIcon,
   Trash2Icon,
-  Server
+  Server,
+  CheckIcon,
+  XIcon
 } from "lucide-react"
 import { Link } from "react-router"
+import { useState } from "react"
 import {
   type ConnectionState,
   connectPending,
   closeConnection,
-  deleteConnection
+  deleteConnection,
+  updateConnectionDetails
 } from "@/state/valkey-features/connection/connectionSlice"
 import { Button } from "@/components/ui/button.tsx"
 import { cn } from "@/lib/utils.ts"
@@ -38,15 +42,39 @@ export const ConnectionEntry = ({
   isNested = false,
 }: ConnectionEntryProps) => {
   const dispatch = useAppDispatch()
+  const [isEditing, setIsEditing] = useState(false)
+  const [editedAlias, setEditedAlias] = useState(connection.connectionDetails.alias || "")
+
   const handleDisconnect = () => dispatch(closeConnection({ connectionId }))
   const handleConnect = () => dispatch(connectPending({ ...connection.connectionDetails, connectionId }))
   const handleDelete = () => dispatch(deleteConnection({ connectionId }))
 
+  const handleEdit = () => {
+    setEditedAlias(connection.connectionDetails.alias || "")
+    setIsEditing(true)
+  }
+
+  const handleSave = () => {
+    dispatch(updateConnectionDetails({
+      connectionId,
+      alias: editedAlias.trim() || undefined,
+    }))
+    setIsEditing(false)
+  }
+
+  const handleCancel = () => {
+    setEditedAlias(connection.connectionDetails.alias || "")
+    setIsEditing(false)
+  }
+
   const isConnected = connection.status === CONNECTED
   const isConnecting = connection.status === CONNECTING
   const isError = connection.status === ERROR
   const isDisconnected = connection.status === DISCONNECTED
-  const label = `${connection.connectionDetails.username}@${connection.connectionDetails.host}:${connection.connectionDetails.port}`
+  const label = connection.connectionDetails.username
+    ? `${connection.connectionDetails.username}@${connection.connectionDetails.host}:${connection.connectionDetails.port}`
+    : `${connection.connectionDetails.host}:${connection.connectionDetails.port}`
+  const aliasLabel = connection.connectionDetails.alias || label
 
   const StatusBadge = () => {
     if (isConnected) {
@@ -107,9 +135,6 @@ export const ConnectionEntry = ({
           <div className="flex items-center gap-1">
             {isConnected && (
               <>
-                <Button onClick={() => alert("todo")} size="sm" variant="ghost">
-                  <PencilIcon size={16} />
-                </Button>
                 <Button onClick={handleDisconnect} size="sm" variant="ghost">
                   <PowerOffIcon size={16} />
                 </Button>
@@ -129,7 +154,7 @@ export const ConnectionEntry = ({
     )
   }
 
-  // for standalone instnces 
+  // for standalone instnces
   return (
     <div className="mb-3 p-2 border dark:border-tw-dark-border rounded bg-white dark:bg-tw-dark-primary">
       <div className="flex items-center justify-between gap-4">
@@ -139,15 +164,39 @@ export const ConnectionEntry = ({
           </div>
 
           <div className="flex-1 min-w-0">
-            <Button
-              asChild
-              className={cn(!isConnected && "pointer-events-none opacity-60", "justify-start p-0 h-auto font-mono text-sm mb-1 truncate")}
-              variant="link"
-            >
-              <Link title={label} to={clusterId ? `/${clusterId}/${connectionId}/dashboard` : `/${connectionId}/dashboard`}>
-                {label}
-              </Link>
-            </Button>
+            {isEditing ? (
+              <div className="flex items-center gap-2 mb-1">
+                <input
+                  autoFocus
+                  className="px-2 py-1 text-sm font-mono border dark:border-tw-dark-border rounded
+                    bg-white dark:bg-tw-primary/20 focus:outline-none focus:ring-2 focus:ring-tw-primary"
+                  onChange={(e) => setEditedAlias(e.target.value)}
+                  placeholder={label}
+                  type="text"
+                  value={editedAlias}
+                />
+                <Button onClick={handleSave} size="sm" title="Save" variant="secondary">
+                  <CheckIcon className="text-tw-primary" size={16} />
+                </Button>
+                <Button onClick={handleCancel} size="sm" title="Cancel" variant="destructiveGhost">
+                  <XIcon className="" size={16} />
+                </Button>
+              </div>
+            ) : (
+              <Button
+                asChild
+                className={cn(!isConnected && "pointer-events-none opacity-60", "justify-start p-0 h-auto font-mono text-sm mb-1 truncate")}
+                variant="link"
+              >
+                <Link title={aliasLabel} to={clusterId ? `/${clusterId}/${connectionId}/dashboard` : `/${connectionId}/dashboard`}>
+                  {aliasLabel}
+                </Link>
+              </Button>
+            )}
+            {!isEditing && connection.connectionDetails.alias && (
+              <span className="ml-1 font-mono text-xs text-tw-dark-border dark:text-white/50">
+                ({label})
+              </span>)}
             <div>
               <StatusBadge />
             </div>
@@ -168,10 +217,10 @@ export const ConnectionEntry = ({
                   Open
                 </button>
               )}
-              <Button onClick={() => alert("todo")} size="sm" variant="ghost">
+              <Button disabled={isEditing} onClick={handleEdit} size="sm" variant="ghost">
                 <PencilIcon size={16} />
               </Button>
-              <Button onClick={handleDisconnect} size="sm" variant="ghost">
+              <Button disabled={isEditing} onClick={handleDisconnect} size="sm" variant="ghost">
                 <PowerOffIcon size={16} />
               </Button>
             </>
@@ -181,7 +230,7 @@ export const ConnectionEntry = ({
               <PowerIcon size={16} />
             </Button>
           )}
-          <Button onClick={handleDelete} size="sm" variant="destructiveGhost">
+          <Button disabled={isEditing} onClick={handleDelete} size="sm" variant="destructiveGhost">
             <Trash2Icon size={16} />
           </Button>
         </div>

apps/frontend/src/components/ui/app-header.tsx

@@ -19,7 +19,7 @@ function AppHeader({ title, icon, className }: AppHeaderProps) {
   const dropdownRef = useRef<HTMLDivElement>(null)
   const navigate = useNavigate()
   const { id, clusterId } = useParams<{ id: string; clusterId: string }>()
-  const { host, port, username } = useSelector(selectConnectionDetails(id!))
+  const { host, port, username, alias } = useSelector(selectConnectionDetails(id!))
   const clusterData = useSelector(selectCluster(clusterId!))
   const ToggleIcon = isOpen ? CircleChevronUp : CircleChevronDown
 
@@ -63,7 +63,7 @@ function AppHeader({ title, icon, className }: AppHeaderProps) {
 
           <div className="">
             <span className="text-sm font-light border border-tw-primary text-tw-primary px-3 py-1 rounded">
-              {username}@{host}:{port}
+              {alias ? alias : `${username}@${host}:${port}`}
             </span>
           </div>
         </div>

apps/frontend/src/components/ui/connection-form.tsx

@@ -15,12 +15,13 @@ function ConnectionForm({ onClose }: ConnectionFormProps) {
   const [port, setPort] = useState("6379")
   const [username, setUsername] = useState("")
   const [password, setPassword] = useState("")
+  const [alias, setAlias] = useState("")
 
   const handleSubmit = (e: FormEvent) => {
     e.preventDefault()
     const connectionId = sanitizeUrl(`${host}-${port}`)
     dispatch(
-      connectPending({ host, port, username, password, connectionId }),
+      connectPending({ host, port, username, password, alias, connectionId }),
     )
     onClose()
   }
@@ -60,6 +61,16 @@ function ConnectionForm({ onClose }: ConnectionFormProps) {
               value={port}
             />
           </div>
+          <div>
+            <label className="block mb-1 text-sm">Alias</label>
+            <input
+              className="w-full px-3 py-2 border rounded dark:border-tw-dark-border placeholder:text-xs"
+              onChange={(e) => setAlias(e.target.value)}
+              placeholder="Alias of the first cluster node will be the alias of the cluster"
+              type="text"
+              value={alias}
+            />
+          </div>
           <div>
             <label className="block mb-1 text-sm">Username</label>
             <input

apps/frontend/src/state/epics/rootEpic.ts

@@ -1,16 +1,18 @@
 import { merge } from "rxjs"
 import { wsConnectionEpic } from "./wsEpics"
-import { connectionEpic, sendRequestEpic, setDataEpic, deleteConnectionEpic, autoReconnectEpic, valkeyRetryEpic } from "./valkeyEpics"
+import { connectionEpic, sendRequestEpic, setDataEpic, deleteConnectionEpic, autoReconnectEpic, valkeyRetryEpic, 
+  updateConnectionDetailsEpic } from "./valkeyEpics"
 import { keyBrowserEpic } from "./keyBrowserEpic"
 import type { Store } from "@reduxjs/toolkit"
 
 export const registerEpics = (store: Store) => {
   merge(
     wsConnectionEpic(store),
-    connectionEpic(),
+    connectionEpic(store),
     autoReconnectEpic(store),
     valkeyRetryEpic(store),
     deleteConnectionEpic(),
+    updateConnectionDetailsEpic(store),
     sendRequestEpic(),
     setDataEpic(),
     keyBrowserEpic(),