UI: Implemented supporting templates for run env

frontend/src/api.ts

@@ -119,6 +119,8 @@ export const API = {
         SECRETS_DELETE: (projectName: IProject['project_name']) => `${API.BASE()}/project/${projectName}/secrets/delete`,
         // GPUS
         GPUS_LIST: (projectName: IProject['project_name']) => `${API.BASE()}/project/${projectName}/gpus/list`,
+        // GPUS
+        TEMPLATES_LIST: (projectName: IProject['project_name']) => `${API.BASE()}/project/${projectName}/templates/list`,
     },
 
     BACKENDS: {

frontend/src/components/form/Input/index.tsx

@@ -10,6 +10,7 @@ export const FormInput = <T extends FieldValues>({
     name,
     control,
     rules,
+    defaultValue,
     label,
     info,
     constraintText,
@@ -30,6 +31,7 @@ export const FormInput = <T extends FieldValues>({
             name={name}
             control={control}
             rules={rules}
+            defaultValue={defaultValue}
             render={({ field: { onChange, ...fieldRest }, fieldState: { error } }) => {
                 return (
                     <FormField

frontend/src/components/form/Input/types.ts

@@ -5,7 +5,7 @@ import { InputProps } from '@cloudscape-design/components/input';
 
 export type FormInputProps<T extends FieldValues> = Omit<InputProps, 'value' | 'name'> &
     Omit<FormFieldProps, 'errorText'> &
-    Pick<ControllerProps<T>, 'control' | 'name' | 'rules'> & {
+    Pick<ControllerProps<T>, 'control' | 'name' | 'rules' | 'defaultValue'> & {
         leftContent?: ReactNode;
         hotspotId?: string;
     };

frontend/src/components/form/Select/index.tsx

@@ -9,6 +9,7 @@ import { FormSelectProps } from './types';
 export const FormSelect = <T extends FieldValues>({
     name,
     rules,
+    defaultValue,
     control,
     label,
     info,
@@ -24,6 +25,7 @@ export const FormSelect = <T extends FieldValues>({
             name={name}
             control={control}
             rules={rules}
+            defaultValue={defaultValue}
             render={({ field: { onChange, ...fieldRest }, fieldState: { error } }) => {
                 const selectedOption = props.options?.find((i) => i.value === fieldRest.value) ?? null;
 

frontend/src/components/form/Select/types.ts

@@ -7,6 +7,6 @@ export type FormSelectOptions = ReadonlyArray<FormSelectOption>;
 
 export type FormSelectProps<T extends FieldValues> = Omit<SelectProps, 'value' | 'name' | 'selectedOption' | 'options'> &
     Omit<FormFieldProps, 'errorText'> &
-    Pick<ControllerProps<T>, 'control' | 'name' | 'rules'> & {
+    Pick<ControllerProps<T>, 'control' | 'name' | 'rules' | 'defaultValue'> & {
         options: ReadonlyArray<SelectProps.Option>;
     };

frontend/src/components/form/Toogle/index.tsx

@@ -11,6 +11,7 @@ export const FormToggle = <T extends FieldValues>({
     name,
     control,
     rules,
+    defaultValue,
     label,
     info,
     constraintText,
@@ -29,6 +30,7 @@ export const FormToggle = <T extends FieldValues>({
             name={name}
             control={control}
             rules={rules}
+            defaultValue={defaultValue}
             render={({ field: { onChange, value, ...fieldRest }, fieldState: { error } }) => {
                 return (
                     <FormField

frontend/src/components/form/Toogle/types.ts

@@ -5,7 +5,7 @@ import { ToggleProps } from '@cloudscape-design/components/toggle';
 
 export type FormToggleProps<T extends FieldValues> = Omit<ToggleProps, 'value' | 'checked' | 'name'> &
     Omit<FormFieldProps, 'errorText'> &
-    Pick<ControllerProps<T>, 'control' | 'name' | 'rules'> & {
+    Pick<ControllerProps<T>, 'control' | 'name' | 'rules' | 'defaultValue'> & {
         toggleDescription?: ReactNode;
         leftContent?: ReactNode;
         toggleLabel?: ReactNode | string;

frontend/src/hooks/useProjectFilter.ts

@@ -16,7 +16,7 @@ export const useProjectFilter = ({ localStorePrefix }: Args) => {
         null,
     );
 
-    const { data: projectsData } = useGetProjectsQuery({});
+    const { data: projectsData, isLoading } = useGetProjectsQuery({});
 
     const projectOptions = useMemo<SelectCSDProps.Options>(() => {
         if (!projectsData?.data?.length) return [];
@@ -40,5 +40,6 @@ export const useProjectFilter = ({ localStorePrefix }: Args) => {
         projectOptions,
         selectedProject,
         setSelectedProject,
+        isLoadingProjectOptions: isLoading,
     } as const;
 };

frontend/src/libs/index.ts

@@ -5,6 +5,7 @@ export {
     getServerError,
 } from './serverErrors';
 import { format, formatDistanceToNowStrict } from 'date-fns';
+export { generateSecurePassword, generatePassword, generateSimplePassword } from './password';
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export function arrayToRecordByKeyName<T extends { [K in keyof T]: any }, K extends keyof T>(array: T[], selector: K) {

frontend/src/libs/password.ts

@@ -0,0 +1,106 @@
+const UPPERCASE_LETTERS = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
+const LOWERCASE_LETTERS = 'abcdefghijklmnopqrstuvwxyz';
+const NUMBERS = '0123456789';
+const SPECIAL_CHARACTERS = '@#$^_+-';
+
+interface PasswordOptions {
+    length: number;
+    includeUppercase?: boolean;
+    includeLowercase?: boolean;
+    includeNumbers?: boolean;
+    includeSpecial?: boolean;
+}
+function generatePassword(options: PasswordOptions): string {
+    const { length, includeUppercase = true, includeLowercase = true, includeNumbers = true, includeSpecial = true } = options;
+
+    let allowedChars = '';
+
+    if (includeUppercase) allowedChars += UPPERCASE_LETTERS;
+    if (includeLowercase) allowedChars += LOWERCASE_LETTERS;
+    if (includeNumbers) allowedChars += NUMBERS;
+    if (includeSpecial) allowedChars += SPECIAL_CHARACTERS;
+
+    if (allowedChars.length === 0) {
+        throw new Error('No character type is selected for the password');
+    }
+
+    if (length < 4) {
+        throw new Error('The password must be at least 4 characters long');
+    }
+
+    let password = '';
+    const randomValues = new Uint32Array(length);
+
+    crypto.getRandomValues(randomValues);
+
+    for (let i = 0; i < length; i++) {
+        const randomIndex = randomValues[i] % allowedChars.length;
+        password += allowedChars[randomIndex];
+    }
+
+    return password;
+}
+
+function generateSimplePassword(length: number): string {
+    const ALL_CHARS = UPPERCASE_LETTERS + LOWERCASE_LETTERS + NUMBERS + SPECIAL_CHARACTERS;
+
+    if (length < 1) {
+        throw new Error('The password length must be a positive number');
+    }
+
+    let password = '';
+    const randomValues = new Uint32Array(length);
+
+    crypto.getRandomValues(randomValues);
+
+    for (let i = 0; i < length; i++) {
+        const randomIndex = randomValues[i] % ALL_CHARS.length;
+        password += ALL_CHARS[randomIndex];
+    }
+
+    return password;
+}
+
+function generateSecurePassword(length: number): string {
+    if (length < 4) {
+        throw new Error('The minimum length for a secure password is 4 characters');
+    }
+
+    const charSets = [UPPERCASE_LETTERS, LOWERCASE_LETTERS, NUMBERS, SPECIAL_CHARACTERS];
+
+    let password = '';
+    password += UPPERCASE_LETTERS[Math.floor(Math.random() * UPPERCASE_LETTERS.length)];
+    password += LOWERCASE_LETTERS[Math.floor(Math.random() * LOWERCASE_LETTERS.length)];
+    password += NUMBERS[Math.floor(Math.random() * NUMBERS.length)];
+    password += SPECIAL_CHARACTERS[Math.floor(Math.random() * SPECIAL_CHARACTERS.length)];
+
+    const ALL_CHARS = charSets.join('');
+    const remainingLength = length - 4;
+
+    if (remainingLength > 0) {
+        const randomValues = new Uint32Array(remainingLength);
+        crypto.getRandomValues(randomValues);
+
+        for (let i = 0; i < remainingLength; i++) {
+            const randomIndex = randomValues[i] % ALL_CHARS.length;
+            password += ALL_CHARS[randomIndex];
+        }
+    }
+
+    return password
+        .split('')
+        .sort(() => Math.random() - 0.5)
+        .join('');
+}
+
+export {
+    generatePassword,
+    generateSimplePassword,
+    generateSecurePassword,
+    UPPERCASE_LETTERS,
+    LOWERCASE_LETTERS,
+    NUMBERS,
+    SPECIAL_CHARACTERS,
+};
+
+export type { PasswordOptions };