From 67092a69b71d6bd19bff892cf1959f9aea3dcf54 Mon Sep 17 00:00:00 2001 From: tsscarla Date: Thu, 13 Apr 2023 15:01:04 +0200 Subject: [PATCH 1/2] Fix copy and add missing help panels --- frontend/locales/en/strings.json | 65 ++++++++++++------- frontend/src/components/DeleteDialog.tsx | 2 +- frontend/src/i18n/index.ts | 3 + .../src/old-pages/Configure/Queues/Queues.tsx | 57 +++++++++++++++- frontend/src/old-pages/Configure/Storage.tsx | 36 +++++++--- frontend/src/old-pages/Users/Users.tsx | 4 +- 6 files changed, 131 insertions(+), 36 deletions(-) diff --git a/frontend/locales/en/strings.json b/frontend/locales/en/strings.json index 6d340d9a..2b82f211 100644 --- a/frontend/locales/en/strings.json +++ b/frontend/locales/en/strings.json @@ -117,7 +117,7 @@ "tooltiptext": "Copy the command to SSH into the head node. If the key pair you use to create the head node isn't the default, you must specify the path to the key pair. See <0>Connect to your Linux instance using an SSH Client for more information." }, "configurationLabel": "Cluster configuration", - "configurationLink": "VIEW", + "configurationLink": "View YAML", "statusLabel": "Cluster status", "computeFleetStatusLabel": "Compute fleet status", "creationTimeLabel": "Created time", @@ -280,14 +280,14 @@ "cancel": "Cancel", "create": "Create cluster", "edit": "Edit cluster", - "createFromWizard": "Use interface", - "createFromTemplate": "Upload a template", - "createFromCluster": "From another cluster", + "createFromWizard": "Step by step", + "createFromTemplate": "With a template", + "createFromCluster": "With an existing cluster", "start": "Start fleet", "stop": "Stop fleet", "delete": "Delete cluster", "shell": "Shell", - "filesystem": "File system", + "filesystem": "View file system", "dcv": "DCV", "logs": "View logs" }, @@ -339,8 +339,8 @@ "preferencesModalDarkThemes": "Dark themes" }, "fromClusterModal": { - "title": "Create cluster from another cluster", - "description": "Use an existing cluster as starting point for the configuration of your new cluster. Only clusters whose version matches the version of AWS ParallelCluster can be selected.", + "title": "Start with an existing cluster", + "description": "Choose an existing cluster to populate the wizard before you start. Only clusters whose version matches the version of AWS ParallelCluster can be selected.", "actions": { "cancel": "Cancel", "create": "Create" @@ -575,12 +575,12 @@ }, "headNode": { "title": "Head node", - "description": "Configure the head node.", + "description": "Configure the cluster head node.", "instance": { "title": "Head node instance" }, "help": { - "main": "

Configure the head node of your cluster.

Choose Refresh to view recently changed or added AWS resources.

", + "main": "

Configure the head node of your cluster. The head node serves as the management node for cluster operations. You use the head node to access and manage the cluster and users. Cluster users access the head node to submit jobs.

Choose Refresh to view recently changed or added AWS resources.

", "instanceSelectionLink": { "title": "Head node instance type selection", "href": "https://docs.aws.amazon.com/parallelcluster/latest/ug/best-practices-v3.html?icmpid=docs_parallelcluster_hp_headnode_v1#best-practices-head-node-instance-type" @@ -648,7 +648,7 @@ "header": "Networking", "subnetId": { "label": "Subnet ID", - "description": "Subnet ID for head node." + "description": "Subnet ID for the head node." } }, "security": { @@ -728,9 +728,10 @@ }, "storage": { "title": "Storage", - "description": "Configure shared storage for your cluster.", + "description": "Add and configure shared storage for your cluster. Shared storage is shared between the head node and compute nodes.", "container": { "title": "Storage settings", + "description": "Add up to <0>20 file systems for shared storage.", "noStorageSelected": "No shared storage options selected.", "storageTypes": "Storage types", "storageTypesPlaceholder": "Select file system types", @@ -786,7 +787,11 @@ }, "lustreType": { "label": "FSx for Lustre", - "help": "Choose SCRATCH_1 and SCRATCH_2 deployment types when you need temporary storage and shorter-term processing of data. The SCRATCH_2 deployment type provides in-transit encryption of data and higher burst throughput capacity than SCRATCH_1. Choose the PERSISTENT_2 deployment type for longer-term storage and workloads and encryption of data in transit, choose PERSISTENT_1 only for backwards compatibility. See <0>DeploymentType." + "help": "

Choose SCRATCH_1 and SCRATCH_2 deployment types when you need temporary storage and shorter-term processing of data.

The SCRATCH_2 deployment type provides in-transit encryption of data and higher burst throughput capacity than SCRATCH_1.

Choose the PERSISTENT_2 deployment type for longer-term storage and workloads and encryption of data in transit.

Choose PERSISTENT_1 only for backwards compatibility.

", + "link": { + "title": "DeploymentType settings", + "href": "https://docs.aws.amazon.com/parallelcluster/latest/ug/SharedStorage-v3.html#yaml-SharedStorage-FsxLustreSettings-DeploymentType" + } }, "import": { "label": "Import path", @@ -799,7 +804,7 @@ "help": "Set Export path to write files from your file system into an S3 bucket. See <0>ExportPath." }, "throughput": { - "label": "Per unit storage throughput", + "label": "Per unit storage throughput (MB/s/TiB)", "help": "Configure the amount of read and write throughput for each 1 tebibyte of storage, in MB/s/TiB.", "link": { "title": "PerUnitStorageThroughput", @@ -963,7 +968,7 @@ } }, "toggle": { - "label": "Slurm memory based scheduling" + "label": "Use Slurm memory based scheduling" }, "info": { "header": "You can use Slurm memory based scheduling only when you select one instance type", @@ -973,7 +978,15 @@ "allocationStrategy": { "title": "Allocation strategy", "lowestPrice": "Lowest price", - "capacityOptimized": "Capacity optimized" + "capacityOptimized": "Capacity optimized", + "helpPanel": { + "title": "Allocation strategy", + "description": "Choose the strategy for allocating instances to compute resources.", + "link": { + "title": "AllocationStrategy setting", + "href": "https://docs.aws.amazon.com/parallelcluster/latest/ug/Scheduling-v3.html#yaml-Scheduling-SlurmQueues-AllocationStrategy" + } + } }, "schedulableMemory": { "name": "Schedulable memory (in MiB)", @@ -1041,7 +1054,15 @@ "placeholder": "Select a subnet" }, "purchaseType": { - "label": "Purchase type" + "label": "Purchase type", + "helpPanel": { + "title": "Purchase type", + "description": "Choose the instance purchasing type for compute resources.", + "link": { + "title": "CapacityType setting", + "href": "https://docs.aws.amazon.com/parallelcluster/latest/ug/Scheduling-v3.html#yaml-Scheduling-SlurmQueues-CapacityType" + } + } }, "securityGroups": { "label": "Additional security groups" @@ -1051,8 +1072,8 @@ "title": "Create", "description": "Review or edit your cluster configuration and create your cluster.", "configuration": { - "title": "Cluster configuration", - "description": "Check/edit the yaml file that is used to create the cluster", + "title": "Cluster configuration YAML file", + "description": "Review or edit the YAML file that is used to create your cluster", "pending": "{{action}} request pending...", "forceUpdate": "Force update: Edit the cluster while the compute fleet is still running." }, @@ -1138,14 +1159,14 @@ "description": "The list of users that have permission to access the AWS ParallelCluster User Interface." }, "actions": { - "create": "Create", + "add": "Add user", "refresh": "Refresh", - "delete": "Delete", + "remove": "Remove", "cancel": "Cancel" }, "helpPanel": { "title": "Users", - "description": "Maintain the list of cognito users with credentials that only permit access to the $t(global.projectName).

Enter a user email address and choose Create user to add a user.

Choose Delete to remove a user.

Choose Refresh to view changes to the list of users.

" + "description": "Maintain the list of cognito users with credentials that only permit access to the $t(global.projectName).

Enter a user email address and choose Add user

Choose Remove to remove a user.

Choose Refresh to view changes to the list of users.

" }, "list": { "columns": { @@ -1203,7 +1224,7 @@ }, "helpPanel": { "title": "Custom images", - "description": "Choose Build image to create your custom image.

You can only Create images with the same AWS ParallelCluster version that was used to create the $t(global.projectName).

If you choose Build image, you proceed to create a custom image by uploading a configuration, by entering the ID of an existing image, or by manually entering the configuration.

You can only Create images with the same AWS ParallelCluster version that was used to create the $t(global.projectName).

After you have provided the configuration, you choose Build image.

Choose Refresh to view recently changed or added AWS resources.", + "description": "Choose Build image to create your custom image.

You can only build images with the same AWS ParallelCluster version that was used to create the $t(global.projectName).

If you choose Build image, you proceed to create a custom image by uploading a configuration, by entering the ID of an existing image, or by manually entering the configuration.

After you have provided the configuration, you choose Build image.

Choose Refresh to view recently changed or added AWS resources.", "amiCustomizationlink": { "title": "AWS ParallelCluster AMI customization", "href": "https://docs.aws.amazon.com/parallelcluster/latest/ug/custom-ami-v3.html?icmpid=docs_parallelcluster_hp_custom_images_v1" diff --git a/frontend/src/components/DeleteDialog.tsx b/frontend/src/components/DeleteDialog.tsx index d63b9efe..20d04155 100644 --- a/frontend/src/components/DeleteDialog.tsx +++ b/frontend/src/components/DeleteDialog.tsx @@ -43,7 +43,7 @@ export function DeleteDialog({children, deleteCallback, header, id}: any) { diff --git a/frontend/src/i18n/index.ts b/frontend/src/i18n/index.ts index c0d26ae4..ead47bac 100644 --- a/frontend/src/i18n/index.ts +++ b/frontend/src/i18n/index.ts @@ -16,6 +16,9 @@ i18n.use(initReactI18next).init({ interpolation: { escapeValue: false, // react already safes from xss }, + react: { + transKeepBasicHtmlNodesFor: ['br', 'strong', 'i', 'code', 'p'], + }, }) export default i18n diff --git a/frontend/src/old-pages/Configure/Queues/Queues.tsx b/frontend/src/old-pages/Configure/Queues/Queues.tsx index 70a4efc0..fb6b93da 100644 --- a/frontend/src/old-pages/Configure/Queues/Queues.tsx +++ b/frontend/src/old-pages/Configure/Queues/Queues.tsx @@ -59,6 +59,7 @@ import { queueNameErrorsMapping, QUEUE_NAME_MAX_LENGTH, } from './queues.validators' +import InfoLink from '../../../components/InfoLink' // Constants const queuesPath = ['app', 'wizard', 'config', 'Scheduling', 'SlurmQueues'] @@ -455,6 +456,26 @@ function Queue({index}: any) { ) } + const purchaseTypeFooterLinks = React.useMemo( + () => [ + { + title: t('wizard.queues.purchaseType.helpPanel.link.title'), + href: t('wizard.queues.purchaseType.helpPanel.link.href'), + }, + ], + [t], + ) + + const allocationStrategyFooterLinks = React.useMemo( + () => [ + { + title: t('wizard.queues.allocationStrategy.helpPanel.link.title'), + href: t('wizard.queues.allocationStrategy.helpPanel.link.href'), + }, + ], + [t], + ) + return ( - + + } + /> + } + > [ + { + title: t('wizard.storage.Fsx.lustreType.link.title'), + href: t('wizard.storage.Fsx.lustreType.link.href'), + }, + ], + [t], + ) + return ( @@ -308,15 +318,9 @@ export function FsxLustreSettings({index}: any) { helpPanel={ - - + description={ } + footerLinks={lustreTypeFooterLinks} /> } /> @@ -1189,7 +1193,21 @@ function Storage() { return ( {t('wizard.storage.container.title')}} + header={ +

+ + + } + > + {t('wizard.storage.container.title')} +
+ } > {!hasAddedStorage && ( diff --git a/frontend/src/old-pages/Users/Users.tsx b/frontend/src/old-pages/Users/Users.tsx index 5c0a0776..76ec0a50 100644 --- a/frontend/src/old-pages/Users/Users.tsx +++ b/frontend/src/old-pages/Users/Users.tsx @@ -204,7 +204,7 @@ export default function Users() { showDialog('deleteUser') }} > - {t('users.actions.delete')} + {t('users.actions.remove')}
e.key === 'Enter' && createUser()}>
} From 219c87b9141e0fc94865680fe40b16c58da02e97 Mon Sep 17 00:00:00 2001 From: tsscarla Date: Thu, 13 Apr 2023 15:01:47 +0200 Subject: [PATCH 2/2] Align copy in e2e tests --- e2e/specs/wizard.fromcluster.spec.ts | 2 +- e2e/specs/wizard.spec.ts | 3 ++- e2e/specs/wizard.template.spec.ts | 2 +- 3 files changed, 4 insertions(+), 3 deletions(-) diff --git a/e2e/specs/wizard.fromcluster.spec.ts b/e2e/specs/wizard.fromcluster.spec.ts index ff422181..9530f808 100644 --- a/e2e/specs/wizard.fromcluster.spec.ts +++ b/e2e/specs/wizard.fromcluster.spec.ts @@ -21,7 +21,7 @@ test.describe('environment: @demo', () => { await visitAndLogin(page) await page.getByRole('button', { name: 'Create cluster' }).first().click(); - await page.getByRole('menuitem', { name: 'From another cluster' }).click(); + await page.getByRole('menuitem', { name: 'With an existing cluster' }).click(); await page.getByRole('button', { name: 'Select a cluster' }).click(); await page.getByRole('option', { name: CLUSTER_TO_COPY_FROM }).click(); diff --git a/e2e/specs/wizard.spec.ts b/e2e/specs/wizard.spec.ts index db550b82..b2decdb1 100644 --- a/e2e/specs/wizard.spec.ts +++ b/e2e/specs/wizard.spec.ts @@ -17,8 +17,9 @@ test.describe('Given an endpoint where AWS ParallelCluster UI is deployed', () = await visitAndLogin(page) await page.getByRole('button', { name: 'Create cluster' }).first().click(); - await page.getByRole('menuitem', { name: 'Use interface' }).click(); + await page.getByRole('menuitem', { name: 'Step by step' }).click(); await fillWizard(page, {vpc: /vpc-.*/, region: 'eu-west-1'}) }); }) + \ No newline at end of file diff --git a/e2e/specs/wizard.template.spec.ts b/e2e/specs/wizard.template.spec.ts index 9aa719af..0f213e12 100644 --- a/e2e/specs/wizard.template.spec.ts +++ b/e2e/specs/wizard.template.spec.ts @@ -25,7 +25,7 @@ test.describe('environment: @demo', () => { page.on("filechooser", (fileChooser: FileChooser) => { fileChooser.setFiles([TEMPLATE_PATH]); }) - await page.getByRole('menuitem', { name: 'Upload a template' }).click(); + await page.getByRole('menuitem', { name: 'With a template' }).click(); await fillWizard(page) });