ManageIQ / manageiq-ui-classic

Classic UI of ManageIQ
Apache License 2.0
50 stars 358 forks source link

Form Field Display Issue with "Copy Original Request" Button and Multiselect Options #9284

Open rabah-beldi opened 1 month ago

rabah-beldi commented 1 month ago

When using the "Copy Request" button in ManageIQ to reload a service request form, some fields fail to display correctly. Specifically, the dropdown values that were correctly populated during the initial request from the catalog are not displayed when copying the request.

Actual Behavior: After using the "Copy Request" button, the following error appears in the console:

SyntaxError: Unexpected token 'G', "GRP_All_FR" is not valid JSON at JSON.parse (<anonymous>)

Additionally, the form fails to display certain fields (e.g., dynamic dropdowns) that were initially populated correctly.

Relevant Code (Dynamic Dropdown Logic):

dialog_field = $evm.object
dialog_field['values'] = nil

service_template = $evm.vmdb(:service_template).find_by_id($evm.root.attributes['service_template_id'])

if service_template['name'] !~ /RDS|AURORA/ 
  passhport_grp = "/Config/PaSSHPort/Groups/GRP_*"
else
  passhport_grp = "/Config/PaSSHPort/Groups/GRPBDD_*"
end

template_hash = { nil => "<Choose>" }

$evm.instance_find("#{passhport_grp}").each do |k, v|
  template_hash[v['name']] = "#{v['description']}"
end

dialog_field['values'] = template_hash unless template_hash.length == 0

Additional Notes: This issue does not occur when loading the form for the first time via the catalog. It only happens after copying the request. There are no error logs generated on the server side related to this behavior. Can you confirm if this is a known issue or if there are any workarounds for dynamic dropdowns in this context?

Steps to Reproduce:

Create a service request via the catalog where dropdown fields are populated dynamically (e.g., based on external resources like groups or instances). Use the "Copy Request" button to copy the service request. Observe that some fields (such as dropdowns) are not displayed or populated correctly after the copy.

  1. Describe environment, including
    • Quinteros
    • Environment
      • EC2 appliance
rabah-beldi commented 1 month ago

here is the complete error trace in the console: SyntaxError: Unexpected token 'G', "GRP_All_FR" is not valid JSON at JSON.parse (<anonymous>) at e.setDefaultValue (ui-components.js:4278:41) at e.setupField (ui-components.js:4206:36) at t.initField (ui-components.js:4545:60) at t.$onInit (ui-components.js:4538:26) at angular.js:10029:34 at C (angular.js:426:18) at oe (angular.js:10018:9) at angular.js:9311:13 at angular.js:9314:13 (anonyme) @ angular.js:14961 (anonyme) @ angular.js:11281 (anonyme) @ angular.js:10031 C @ angular.js:426 oe @ angular.js:10018 (anonyme) @ angular.js:9311 (anonyme) @ angular.js:9314 (anonyme) @ angular.js:9176 (anonyme) @ angular.js:9567 r @ angular.js:9354 A @ angular.js:10121 (anonyme) @ angular.js:28487 $digest @ angular.js:18542 (anonyme) @ angular.js:18835 p @ angular.js:6439 (anonyme) @ angular.js:6718 setTimeout (asynchrone) o.defer @ angular.js:6716 $evalAsync @ angular.js:18833 (anonyme) @ angular.js:17202 u @ angular.js:17378 e @ angular.js:17405 n @ angular.js:17414 Promise.then (asynchrone) e @ angular.js:17401 m @ angular.js:17389 b @ angular.js:17534 (anonyme) @ miq_api.js:10 (anonyme) @ dialog_user_controller.js:11 b.$onInit @ dialog_user_controller.js:5 (anonyme) @ angular.js:10029 C @ angular.js:426 oe @ angular.js:10018 (anonyme) @ angular.js:9311 (anonyme) @ angular.js:9176 (anonyme) @ angular.js:1970 $eval @ angular.js:18796 $apply @ angular.js:18895 (anonyme) @ angular.js:1968 invoke @ angular.js:5117 o @ angular.js:1966 Pe @ angular.js:1986 window.miq_bootstrap @ miq_angular_application.js:73 (anonyme) @ prov_copy?org_controller=service&prov_type=ServiceTemplateProvisionRequest&req_id=24198:138 Afficher 37 autres frames Afficher moins 6miq_api.js:10 TypeError: Cannot read properties of undefined (reading 'fieldBeingRefreshed') at e.setupField (ui-components.js:4201:43) at e.setup (ui-components.js:4844:41) at e.$onInit (ui-components.js:4829:14) at angular.js:10029:34 at C (angular.js:426:18) at oe (angular.js:10018:9) at angular.js:9311:13 at angular.js:9314:13 at angular.js:9176:30 at angular.js:9567:25 (anonyme) @ angular.js:14961 (anonyme) @ angular.js:11281 (anonyme) @ angular.js:10031 C @ angular.js:426 oe @ angular.js:10018 (anonyme) @ angular.js:9311 (anonyme) @ angular.js:9314 (anonyme) @ angular.js:9176 (anonyme) @ angular.js:9567 r @ angular.js:9354 A @ angular.js:10121 (anonyme) @ angular.js:32418 (anonyme) @ angular.js:18403 $digest @ angular.js:18542 (anonyme) @ angular.js:18835 p @ angular.js:6439 (anonyme) @ angular.js:6718 setTimeout (asynchrone) o.defer @ angular.js:6716 $evalAsync @ angular.js:18833 (anonyme) @ angular.js:17202 u @ angular.js:17378 e @ angular.js:17405 n @ angular.js:17414 Promise.then (asynchrone) e @ angular.js:17401 m @ angular.js:17389 b @ angular.js:17534 (anonyme) @ miq_api.js:10 (anonyme) @ dialog_user_controller.js:11 b.$onInit @ dialog_user_controller.js:5 (anonyme) @ angular.js:10029 C @ angular.js:426 oe @ angular.js:10018 (anonyme) @ angular.js:9311 (anonyme) @ angular.js:9176 (anonyme) @ angular.js:1970 $eval @ angular.js:18796 $apply @ angular.js:18895 (anonyme) @ angular.js:1968 invoke @ angular.js:5117 o @ angular.js:1966 Pe @ angular.js:1986 window.miq_bootstrap @ miq_angular_application.js:73 (anonyme) @ prov_copy?org_controller=service&prov_type=ServiceTemplateProvisionRequest&req_id=24198:138 Afficher 38 autres frames Afficher moins

rabah-beldi commented 1 month ago

I believe I've isolated the problem to the multi-select option in the field. It seems that enabling this feature is causing the form loading issue. I've confirmed that disabling it resolves the problem. Could this be a known issue with the multi-select functionality, or is there a specific configuration that needs to be adjusted?

rabah-beldi commented 1 month ago

Further details: We've discovered that the problem is consistent across all fields configured with the multi-select functionality. This includes both static and dynamically generated fields. Our testing has revealed that the specific error encountered depends on the number of values selected within the field for the original request:

Single selection: Folowing Error is triggered: SyntaxError: Unexpected token 'G', "GRP_CMP" is not valid JSON at JSON.parse (<anonymous>) at e.setDefaultValue (ui-components.js:4278:41) at e.setupField (ui-components.js:4206:36) at t.initField (ui-components.js:4545:60) at t.$onInit (ui-components.js:4538:26) at angular.js:10029:34 at C (angular.js:426:18) at ne (angular.js:10018:9) at angular.js:9311:13 at angular.js:9314:13 (anonyme) @ angular.js:14961 (anonyme) @ angular.js:11281 (anonyme) @ angular.js:10031 C @ angular.js:426 ne @ angular.js:10018 (anonyme) @ angular.js:9311 (anonyme) @ angular.js:9314 (anonyme) @ angular.js:9176 (anonyme) @ angular.js:9567 r @ angular.js:9354 A @ angular.js:10121 (anonyme) @ angular.js:28487 $digest @ angular.js:18542 (anonyme) @ angular.js:18835 p @ angular.js:6439 (anonyme) @ angular.js:6718 setTimeout (asynchrone) n.defer @ angular.js:6716 $evalAsync @ angular.js:18833 (anonyme) @ angular.js:17202 u @ angular.js:17378 e @ angular.js:17405 o @ angular.js:17414 Afficher 22 autres frames Afficher moins 6 source code: if (data.type === 'DialogFieldDropDownList') { if (data.default_value && _.isString(data.default_value)) { if (data.options.force_multi_value) { // multi-select - convert value from JSON, assume right type defaultValue = JSON.parse(data.default_value).map(function (value) { return _this.convertDropdownValue(value, data.data_type); }); } Multiple selections: Error is triggered: VM8294:1 Uncaught (in promise) SyntaxError: Bad control character in string literal in JSON at position 2027 (line 1 column 2028) at JSON.parse (<anonymous>) at dialog_user_controller.js:24:57 at st (lodash.js:530:11) at Function.li (lodash.js:9409:52) at dialog_user_controller.js:23:11 at st (lodash.js:530:11) at Function.li (lodash.js:9409:52) at dialog_user_controller.js:22:9 at st (lodash.js:530:11) at Function.li (lodash.js:9409:52)

source code:

miq
rabah-beldi commented 1 month ago

here's a screenshot of a form loaded once you've pressed the “copy original request” button. The field causing the issue is located in the settings section:

miqcopyrequestforms
rabah-beldi commented 2 days ago

This bug completely blocks the use of this essential functionality for our production environment. Has anyone else encountered this problem? Any updates or workarounds would be greatly appreciated.

Fryguy commented 2 days ago

@GilbertCherrie or @liu-samuel can you take a look at this one?