From b1579262cfff1d1fa1c7213787387c88f8bb25af Mon Sep 17 00:00:00 2001 From: tsscarla Date: Fri, 21 Apr 2023 16:57:50 +0200 Subject: [PATCH] Refactor cluster creation loading message and change current region to the one of the created cluster --- frontend/locales/en/strings.json | 7 +- frontend/src/model.tsx | 10 +- frontend/src/old-pages/Configure/Create.tsx | 111 ++++++++++---------- 3 files changed, 71 insertions(+), 57 deletions(-) diff --git a/frontend/locales/en/strings.json b/frontend/locales/en/strings.json index 45b82756..e0ae511b 100644 --- a/frontend/locales/en/strings.json +++ b/frontend/locales/en/strings.json @@ -1080,10 +1080,11 @@ "create": { "title": "Create", "description": "Review or edit your cluster configuration and create your cluster.", + "pending": "{{clusterName}} create is in progress. In Clusters, view {{clusterName}} create status.", + "success": "{{clusterName}} successfully created.", "configuration": { "title": "Cluster configuration YAML file", "description": "Review or edit the YAML file that is used to create your cluster.", - "pending": "{{clusterName}} {{action}} is in progress. In Clusters, view {{clusterName}} {{action}} status.", "forceUpdate": "Force update: Edit the cluster while the compute fleet is still running." }, "flashBar": { @@ -1101,6 +1102,7 @@ }, "update": { "title": "Edit", + "pending": "{{clusterName}} update is in progress. In Clusters, view {{clusterName}} update status.", "helpPanel": { "title": "Cluster configuration", "description": "

Review, edit and test cluster configuration.

Choose Dry run to validate your configuration without editing your cluster.

Choose Edit cluster to validate your configuration and edit your cluster in one step.

", @@ -1110,6 +1112,9 @@ } } }, + "dryRun": { + "pending": "{{clusterName}} dry-run is in progress." + }, "components": { "instanceSelect": { "placeholder": "Choose an instance type", diff --git a/frontend/src/model.tsx b/frontend/src/model.tsx index d486ea48..aa812fcd 100644 --- a/frontend/src/model.tsx +++ b/frontend/src/model.tsx @@ -34,12 +34,19 @@ import flowRight from 'lodash/flowRight' // Types type Callback = (arg?: any) => void -function notify(text: any, type = 'info', id?: string, dismissible = true) { +function notify( + text: any, + type = 'info', + id?: string, + dismissible = true, + loading = false, +) { let messageId = id || generateRandomId() let newMessage = { type: type, content: text, id: messageId, + loading: loading, dismissible: dismissible, onDismiss: () => updateState(['app', 'messages'], (currentMessages: Array) => @@ -97,7 +104,6 @@ function CreateCluster( .then((response: any) => { if (response.status === 202) { if (!dryrun && region === selectedRegion) { - notify('Successfully created: ' + clusterName, 'success') updateState(['clusters', 'index', clusterName], (existing: any) => { return {...existing, ...response.data} }) diff --git a/frontend/src/old-pages/Configure/Create.tsx b/frontend/src/old-pages/Configure/Create.tsx index 51da46d8..f322ef97 100644 --- a/frontend/src/old-pages/Configure/Create.tsx +++ b/frontend/src/old-pages/Configure/Create.tsx @@ -11,13 +11,7 @@ // limitations under the License. import * as React from 'react' import {Trans, useTranslation} from 'react-i18next' -import { - CreateCluster, - UpdateCluster, - ListClusters, - DescribeCluster, - notify, -} from '../../model' +import {CreateCluster, UpdateCluster, ListClusters, notify} from '../../model' // UI Elements import { @@ -41,6 +35,7 @@ import {errorsToFlashbarItems} from './errorsToFlashbarItems' // Constants const configPath = ['app', 'wizard', 'clusterConfigYaml'] +const clusterLoadingMsgId = 'cluster-loading' function handleWarnings(resp: any) { if (!resp.validationMessages) return @@ -50,6 +45,45 @@ function handleWarnings(resp: any) { }) } +function setClusterLoadingMsg( + clusterName: string, + editing: boolean, + dryRun: boolean, +) { + let content: React.ReactElement + if (dryRun) { + content = ( + + ) + } else { + content = editing ? ( + + ) : ( + + ) + } + notify(content, 'success', clusterLoadingMsgId, true, true) +} + +function removeClusterLoadingMsg() { + updateState( + ['app', 'messages'], + (currentMessages: Array) => + (currentMessages || []).filter( + message => message.id !== clusterLoadingMsgId, + ), + ) +} + function handleCreate( clearWizardState: () => void, navigate: NavigateFunction, @@ -61,25 +95,32 @@ function handleCreate( const dryRun = false const region = getState(['app', 'wizard', 'config', 'Region']) const selectedRegion = getState(['app', 'selectedRegion']) + setClusterLoadingMsg(clusterName, editing, dryRun) + var errHandler = (err: any) => { setState(['app', 'wizard', 'errors', 'create'], err) - setState(['app', 'wizard', 'pending'], false) + removeClusterLoadingMsg() } var successHandler = (resp: any) => { let href = `/clusters/${clusterName}/stack-events` handleWarnings(resp) - - setState(['app', 'wizard', 'pending'], false) - DescribeCluster(clusterName) + setState(['app', 'selectedRegion'], region) setState(['app', 'clusters', 'selected'], clusterName) + ListClusters() clearWizardState() + notify( + , + 'success', + ) navigate(href) } setState(['app', 'wizard', 'errors', 'create'], null) if (editing) { - setState(['app', 'wizard', 'pending'], 'Update') UpdateCluster( clusterName, clusterConfig, @@ -89,7 +130,6 @@ function handleCreate( errHandler, ) } else { - setState(['app', 'wizard', 'pending'], 'Create') CreateCluster( clusterName, clusterConfig, @@ -110,15 +150,15 @@ function handleDryRun() { const region = getState(['app', 'wizard', 'config', 'Region']) const selectedRegion = getState(['app', 'selectedRegion']) const dryRun = true + setClusterLoadingMsg(clusterName, editing, dryRun) + var errHandler = (err: any) => { setState(['app', 'wizard', 'errors', 'create'], err) - setState(['app', 'wizard', 'pending'], false) + removeClusterLoadingMsg() } var successHandler = (resp: any) => { handleWarnings(resp) - setState(['app', 'wizard', 'pending'], false) } - setState(['app', 'wizard', 'pending'], 'Dry Run') setState(['app', 'wizard', 'errors', 'create'], null) if (editing) UpdateCluster( @@ -188,10 +228,8 @@ const EditReviewHelpPanel = () => { function Create() { const {t} = useTranslation() const clusterConfig = useState(configPath) - const clusterName = useState(['app', 'wizard', 'clusterName']) const forceUpdate = useState(['app', 'wizard', 'forceUpdate']) || false const errors = useState(['app', 'wizard', 'errors', 'create']) - const pending = useState(['app', 'wizard', 'pending']) const editing = getState(['app', 'wizard', 'editing']) const HelpPanelComponent = editing @@ -200,44 +238,9 @@ function Create() { useHelpPanel() - const setPendingFlashbar = React.useCallback( - (pending: boolean) => { - const content = ( - - ) - const messageId = 'cluster-loading' - if (pending) { - updateState( - ['app', 'messages'], - (currentMessages: Array) => - (currentMessages || []).concat({ - id: messageId, - content: content, - loading: true, - type: 'success', - }), - ) - } else { - updateState( - ['app', 'messages'], - (currentMessages: Array) => - (currentMessages || []).filter(message => message.id !== messageId), - ) - } - }, - [clusterName, editing], - ) - React.useEffect(() => { setFlashbarItems(errorsToFlashbarItems(errors, setFlashbarItems)) - if (pending !== null) setPendingFlashbar(pending) - }, [errors, pending, setPendingFlashbar]) + }, [errors]) const [flashbarItems, setFlashbarItems] = React.useState< FlashbarProps.MessageDefinition[]