Add alias field to ssh hosts for improved ux

frontend/src/hooks/api/sshHost/types.ts

@@ -2,6 +2,7 @@ export type TSshHost = {
   id: string;
   projectId: string;
   hostname: string;
+  alias: string | null;
   userCertTtl: string;
   hostCertTtl: string;
   loginMappings: {
@@ -15,6 +16,7 @@ export type TSshHost = {
 export type TCreateSshHostDTO = {
   projectId: string;
   hostname: string;
+  alias: string | null;
   userCertTtl?: string;
   hostCertTtl?: string;
   loginMappings: {
@@ -28,6 +30,7 @@ export type TCreateSshHostDTO = {
 export type TUpdateSshHostDTO = {
   sshHostId: string;
   hostname?: string;
+  alias?: string | null;
   userCertTtl?: string;
   hostCertTtl?: string;
   loginMappings?: {

frontend/src/pages/ssh/SshHostsPage/components/SshHostModal.tsx

@@ -36,6 +36,7 @@ type Props = {
 const schema = z
   .object({
     hostname: z.string(),
+    alias: z.string(),
     userCertTtl: z
       .string()
       .trim()
@@ -81,6 +82,7 @@ export const SshHostModal = ({ popUp, handlePopUpToggle }: Props) => {
     resolver: zodResolver(schema),
     defaultValues: {
       hostname: "",
+      alias: "",
       userCertTtl: "8h",
       loginMappings: []
     }
@@ -95,6 +97,7 @@ export const SshHostModal = ({ popUp, handlePopUpToggle }: Props) => {
     if (sshHost) {
       reset({
         hostname: sshHost.hostname,
+        alias: sshHost.alias ?? "",
         userCertTtl: sshHost.userCertTtl,
         loginMappings: sshHost.loginMappings.map(({ loginUser, allowedPrincipals }) => ({
           loginUser,
@@ -108,13 +111,14 @@ export const SshHostModal = ({ popUp, handlePopUpToggle }: Props) => {
     } else {
       reset({
         hostname: "",
+        alias: "",
         userCertTtl: "8h",
         loginMappings: []
       });
     }
   }, [sshHost]);
 
-  const onFormSubmit = async ({ hostname, userCertTtl, loginMappings }: FormData) => {
+  const onFormSubmit = async ({ hostname, alias, userCertTtl, loginMappings }: FormData) => {
     try {
       if (!projectId) return;
 
@@ -122,7 +126,7 @@ export const SshHostModal = ({ popUp, handlePopUpToggle }: Props) => {
       const existingHostnames =
         sshHosts?.filter((h) => h.id !== sshHost?.id).map((h) => h.hostname) || [];
 
-      if (existingHostnames.includes(hostname)) {
+      if (existingHostnames.includes(hostname.trim())) {
         createNotification({
           text: "A host with this hostname already exists.",
           type: "error"
@@ -130,10 +134,28 @@ export const SshHostModal = ({ popUp, handlePopUpToggle }: Props) => {
         return;
       }
 
+      const processedAlias = alias.trim() || null;
+
+      // check if there is already a different host with the same non-null alias
+      if (processedAlias) {
+        const existingAliases =
+          sshHosts?.filter((h) => h.id !== sshHost?.id && h.alias !== null).map((h) => h.alias) ||
+          [];
+
+        if (existingAliases.includes(processedAlias)) {
+          createNotification({
+            text: "A host with this alias already exists.",
+            type: "error"
+          });
+          return;
+        }
+      }
+
       if (sshHost) {
         await updateMutateAsync({
           sshHostId: sshHost.id,
           hostname,
+          alias: processedAlias,
           userCertTtl,
           loginMappings: loginMappings.map(({ loginUser, allowedPrincipals }) => ({
             loginUser,
@@ -146,6 +168,7 @@ export const SshHostModal = ({ popUp, handlePopUpToggle }: Props) => {
         await createMutateAsync({
           projectId,
           hostname,
+          alias: processedAlias,
           userCertTtl,
           loginMappings: loginMappings.map(({ loginUser, allowedPrincipals }) => ({
             loginUser,
@@ -209,6 +232,16 @@ export const SshHostModal = ({ popUp, handlePopUpToggle }: Props) => {
               </FormControl>
             )}
           />
+          <Controller
+            control={control}
+            defaultValue=""
+            name="alias"
+            render={({ field, fieldState: { error } }) => (
+              <FormControl label="Alias" isError={Boolean(error)} errorText={error?.message}>
+                <Input {...field} placeholder="host" />
+              </FormControl>
+            )}
+          />
           <Controller
             control={control}
             defaultValue=""

frontend/src/pages/ssh/SshHostsPage/components/SshHostsTable.tsx

@@ -66,6 +66,7 @@ export const SshHostsTable = ({ handlePopUpOpen }: Props) => {
         <Table>
           <THead>
             <Tr>
+              <Th>Alias</Th>
               <Th>Hostname</Th>
               <Th>Login User - Authorized Principals Mapping</Th>
               <Th />
@@ -83,6 +84,7 @@ export const SshHostsTable = ({ handlePopUpOpen }: Props) => {
                     className="h-10"
                     key={`ssh-host-${host.id}`}
                   >
+                    <Td>{host.alias ?? "-"}</Td>
                     <Td>{host.hostname}</Td>
                     <Td>
                       {host.loginMappings.length === 0 ? (