Wizard: Add retry for edge cases in params/script

core/frontend/src/components/wizard/DefaultParamLoader.vue

@@ -14,11 +14,14 @@
         @change="setParamSet(filtered_param_sets[selected_param_set_name])"
       />
     </v-form>
-    <p v-if="is_loading_parameters">
-      Loading parameters...
+    <p v-if="has_parameters_load_error">
+      Failed to load parameters.
+    </p>
+    <p v-else-if="fetch_retries > 0">
+      Failed to fetch parameters, trying again...
     </p>
-    <p v-else-if="has_parameters_load_error">
-      Unable to load parameters.
+    <p v-else-if="is_loading_parameters">
+      Loading parameters...
     </p>
     <p v-else-if="invalid_board">
       Determining current board...
@@ -59,6 +62,8 @@ import { availableFirmwares, fetchCurrentBoard } from '../autopilot/AutopilotMan
 
 const REPOSITORY_URL = 'https://docs.bluerobotics.com/Blueos-Parameter-Repository/params_v1.json'
 
+const MAX_FETCH_PARAMS_RETRIES = 4
+
 export default Vue.extend({
   name: 'DefaultParamLoader',
   props: {
@@ -70,16 +75,13 @@ export default Vue.extend({
       type: String,
       required: true,
     },
-    online: {
-      type: Boolean,
-      required: true,
-    },
   },
   data: () => ({
     all_param_sets: {} as Dictionary<Dictionary<number>>,
     selected_param_set: {},
     selected_param_set_name: '' as string,
     version: undefined as (undefined | SemVer),
+    fetch_retries: 0,
     is_loading_parameters: false,
     has_parameters_load_error: false,
   }),
@@ -104,7 +106,10 @@ export default Vue.extend({
           break
         }
       }
-      return fw_params
+      return {
+        ...fw_params,
+        [this.not_load_default_params_option]: {},
+      }
     },
     filtered_param_sets_names(): {full: string, sanitized: string}[] {
       return Object.keys(this.filtered_param_sets ?? {}).map((full) => ({
@@ -123,15 +128,23 @@ export default Vue.extend({
       return !this.board
     },
     is_loading(): boolean {
-      return this.is_loading_parameters || this.invalid_board
+      return (
+        this.is_loading_parameters
+        || this.invalid_board
+        || this.fetch_retries > 0 && !this.has_parameters_load_error
+      )
     },
     not_load_default_params_option(): string {
       return 'Do not load default parameters'
     },
   },
   watch: {
     vehicle() {
+      this.selected_param_set = {}
+      this.selected_param_set_name = ''
+      this.fetch_retries = 0
       this.version = undefined
+
       this.setUpParams()
     },
   },
@@ -143,25 +156,32 @@ export default Vue.extend({
   },
   methods: {
     async setUpParams() {
-      if (!this.online && this.vehicle !== '') {
-        setTimeout(() => this.setUpParams(), 1000)
-        return
-      }
+      this.$emit('input', undefined)
 
       this.is_loading_parameters = true
       this.has_parameters_load_error = false
       try {
         this.version = await this.fetchLatestFirmwareVersion()
         this.all_param_sets = await this.fetchParamSets()
+
+        this.fetch_retries = 0
       } catch (error) {
+        this.fetch_retries += 1
+
+        if (this.fetch_retries <= MAX_FETCH_PARAMS_RETRIES) {
+          setTimeout(() => this.setUpParams(), 2500)
+          return
+        }
+
         this.has_parameters_load_error = true
       } finally {
         this.is_loading_parameters = false
-
-        this.selected_param_set_name = this.filtered_param_sets_names.length > 0
-          ? ''
-          : this.not_load_default_params_option
       }
+
+      this.$emit('input', {})
+      this.selected_param_set_name = this.filtered_param_sets_names.length > 1
+        ? ''
+        : this.not_load_default_params_option
     },
     // this is used by Wizard.vue, but eslint doesn't detect it
     // eslint-disable-next-line

core/frontend/src/components/wizard/RequireInternet.vue

@@ -1,7 +1,7 @@
 <template>
-  <div>
+  <div class="d-flex justify-center align-center">
     <v-card elevation="0">
-      <v-stepper vertical>
+      <v-stepper vertical elevation="0">
         <v-stepper-step
           step="1"
           :color="icon_color"

core/frontend/src/components/wizard/ScriptLoader.vue

@@ -18,11 +18,14 @@
         @change="setScriptsList(selected_scripts)"
       />
     </v-form>
-    <p v-if="is_loading_scripts">
-      Loading scripts...
+    <p v-if="has_script_load_error">
+      Failed to load scripts.
+    </p>
+    <p v-else-if="fetch_retries > 0">
+      Failed to fetch scripts, trying again...
     </p>
-    <p v-else-if="has_script_load_error">
-      Unable to load scripts.
+    <p v-else-if="is_loading_scripts">
+      Loading scripts...
     </p>
     <p v-else-if="invalid_board">
       Determining current board...
@@ -46,22 +49,21 @@ import { availableFirmwares, fetchCurrentBoard } from '../autopilot/AutopilotMan
 const REPOSITORY_ROOT = 'https://docs.bluerobotics.com/Blueos-Parameter-Repository'
 const REPOSITORY_SCRIPTS_URL = `${REPOSITORY_ROOT}/scripts_v1.json`
 
+const MAX_FETCH_SCRIPTS_RETRIES = 4
+
 export default Vue.extend({
   name: 'ScriptLoader',
   props: {
     vehicle: {
       type: String,
       required: true,
     },
-    online: {
-      type: Boolean,
-      required: true,
-    },
   },
   data: () => ({
     all_scripts: [] as string[],
     selected_scripts: [] as string[],
     version: undefined as (undefined | SemVer),
+    fetch_retries: 0,
     is_loading_scripts: false,
     has_script_load_error: false,
   }),
@@ -87,11 +89,13 @@ export default Vue.extend({
       return !this.board
     },
     is_loading(): boolean {
-      return this.is_loading_scripts || this.invalid_board
+      return this.is_loading_scripts || this.invalid_board || this.fetch_retries > 0 && !this.has_script_load_error
     },
   },
   watch: {
     vehicle() {
+      this.all_scripts = []
+      this.fetch_retries = 0
       this.version = undefined
       this.setUpScripts()
     },
@@ -104,17 +108,21 @@ export default Vue.extend({
   },
   methods: {
     async setUpScripts() {
-      if (!this.online && this.vehicle !== '') {
-        setTimeout(() => this.setUpScripts(), 1000)
-        return
-      }
-
       this.is_loading_scripts = true
       this.has_script_load_error = false
       try {
         this.version = await this.fetchLatestFirmwareVersion()
         this.all_scripts = await this.fetchScripts()
+
+        this.fetch_retries = 0
       } catch (error) {
+        this.fetch_retries += 1
+
+        if (this.fetch_retries <= MAX_FETCH_SCRIPTS_RETRIES) {
+          setTimeout(() => this.setUpScripts(), 2500)
+          return
+        }
+
         this.has_script_load_error = true
       } finally {
         this.is_loading_scripts = false

core/frontend/src/components/wizard/Wizard.vue

@@ -68,8 +68,11 @@
             </v-row>
           </v-stepper-content>
           <v-stepper-content step="1">
-            <RequireInternet v-if="step_number === 1" @online="is_online = true" @next="nextStep()" />
-            <v-row class="pa-5">
+            <RequireInternet
+              v-if="step_number === 1"
+              @next="nextStep()"
+            />
+            <v-row class="pa-5 mt-5">
               <v-btn
 
                 color="warning"
@@ -132,13 +135,11 @@
             <ScriptLoader
               v-model="scripts"
               :vehicle="vehicle_type"
-              :online="is_online"
             />
             <DefaultParamLoader
               ref="param_loader"
               v-model="params"
               :vehicle="vehicle_type"
-              :online="is_online"
             />
             <v-alert :value="configuration_failed" type="error">
               {{ error_message }}
@@ -154,6 +155,7 @@
               <v-spacer />
               <v-btn
                 color="primary"
+                :disabled="!params"
                 @click="validateParams() && setupConfiguration()"
               >
                 Continue
@@ -331,7 +333,6 @@ export default Vue.extend({
   },
   data() {
     return {
-      is_online: false,
       boat_model: get_model('boat', 'UNDEFINED'),
       scripts: [] as string[],
       configuration_failed: false,
@@ -347,7 +348,7 @@ export default Vue.extend({
       vehicle_image: null as string | null,
       // Allow us to check if the user is stuck in retry
       retry_count: 0,
-      params: {} as Dictionary<number>,
+      params: undefined as undefined | Dictionary<number>,
       // Final configuration
       configurations: [] as Configuration[],
       // Vehicle configuration