Cannot start Diagnostics workflow in Skyline Health Diagnostics due to incomplete UI rendering of Wizard

Products

• VMware vSphere ESXi

Issue/Introduction

Symptoms:

• Skyline Health Diagnostics user interface does not display the wizard button 
• Due to this user is unable to submit any type of analysis, or create the schedules using SHD UI
   

Environment

VMware vSphere 7.0.x

Cause

• An upstream update on style sheets (CSS) related to Clarity Design package (V. 13.0.3 - Released on 03/18/22) causes incorrect rendering of user interface
• Current user interface in Skyline Health Diagnostics uses latest release without specific version being tagged. 
  hence version 13.0.3 is used at runtime as it being the latest

Resolution

As a resolution, we need to update the Skyline Health Diagnostics UI package to use specific version of Clarity Design package.
Following files contain setting related to the version to be used.

• /opt/vmware-shd/vmware-shd/htdocs/main-es2015.js
• /opt/vmware-shd/vmware-shd/htdocs/main-es5.js
• /opt/vmware-shd/vmware-shd/htdocs/main-es5.js.map

Please follow the below steps to update the above listed files with correct version tagging

1. login to Skyline Health Diagnostics Appliance/Virtual Machine as root user over SSH
2. Execute the following commands in order
   • sed -i 's/com\/@clr\/ui\/clr-ui.min.css/com\/@clr\/[email protected]\/clr-ui.min.css/g' /opt/vmware-shd/vmware-shd/htdocs/main-es2015.js 
   • sed -i 's/com\/@clr\/ui\/clr-ui-dark.min.css/com\/@clr\/[email protected]\/clr-ui-dark.min.css/g' /opt/vmware-shd/vmware-shd/htdocs/main-es2015.js
   • sed -i 's/com\/@clr\/ui\/clr-ui.min.css/com\/@clr\/[email protected]\/clr-ui.min.css/g' /opt/vmware-shd/vmware-shd/htdocs/main-es5.js
   • sed -i 's/com\/@clr\/ui\/clr-ui-dark.min.css/com\/@clr\/[email protected]\/clr-ui-dark.min.css/g'  /opt/vmware-shd/vmware-shd/htdocs/main-es5.js
   • sed -i 's/com\/@clr\/ui\/clr-ui.min.css/com\/@clr\/[email protected]\/clr-ui.min.css/g'  /opt/vmware-shd/vmware-shd/htdocs/main-es5.js.map
   • sed -i 's/com\/@clr\/ui\/clr-ui-dark.min.css/com\/@clr\/[email protected]\/clr-ui-dark.min.css/g'  /opt/vmware-shd/vmware-shd/htdocs/main-es5.js.map
3. Perform vmware-shd service restart by running systemctl restart vmware-shd
   This issue will be fixed with a new patch/update in future. The above changes do not impact the future upgrade/patching on Skyline Health Diagnostics.
4. Perform Browser Cache clean up ->  Click on History -> Select Clear browsing data
5. Open the SHD UI in the new browser window