The VMware Host Client is a HTML5 client that is used to connect to and manage single ESXi hosts without a vCenter Server. The Host client was initially created as a Fling, but made it to a supported component of vSphere 6.0 Update 2.
No Flash, no Windows-based C# Client – Shouldn’t it work on Android based smartphones and tablets? I’ve tried to manage a standalone Homelab ESXi Host with the Web-based Host Client and it works quite nice (with some tweaking).
Of Course, it’s not suitable for large platforms, as the vCenter Web-Client is still Flash based.
This the the Virtual Machine view on my 8″ Android tablet, without any modification. Looks okay, works but I’m not really happy with the layout as there are annoying tabs and the address bar. The whole site is non-zoomable and above the browser viewport:
However, I want to optimize it for my tablet/smartphone by removing the address bar and making it zoomable. To achieve this, I’ve investigated the source code.
In the head I’ve found the following meta tags:
<!-- The initial, max and min scale, values are needed due to what appears to be a bug in iOS 9. We should be able to remove those once that bug is addressed by Apple. See https://forums.developer.apple.com/thread/13510 --> <meta name="viewport" content=" width=device-width, initial-scale=1.0001, minimum-scale=1.0001, maximum-scale=1.0001, user-scalable=yes" /> <!-- The following will hide the chrome on mobile Safari if the user has added a shortcut to their home screen, this is currently broken on iOS 9, awaiting a fix from Apple. See https://forums.developer.apple.com/thread/9819 --> <meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
Well…looks like Apple products are common at VMware. I’m also a little bit confused why they set the minimum and maximum scale to one, and making it “user-scalable”. Doesn’t make any sense to me. Also the android supported “mobile-capable” meta tags are missing.
[Unsupported Part starts here. Don’t do this in production!]
I’ve replaced the odd vieport tag and added another tag for better Android support:
<meta name="viewport" content="width=device-width, initial-scale=1.0001, minimum-scale=0.5001, maximum-scale=5.0001, user-scalable=yes" /> <meta name="mobile-web-app-capable" content="yes">
The file that needs to be edited is located here (Requires to SSH to the ESXi Host):
The file is read-only and can’t be edited. Any changes are blocked with the error message:
“index.html” Operation not permitted
Not sure what kind of lock this is (and no chattr on ESXi), but there is an easy workaround:
cd /usr/lib/vmware/hostd/docroot/ui/ mv index.html index.old cp index.old index.html
You can now edit index.html and replace the meta tags in the <head> tag. The file should look like this:
To make the new index.html persistent after a reboot, change the ESXi bootbank:
cd /tmp mkdir esx_ui cd esx_ui vmtar -x /bootbank/esx_ui.v00 -o esx_ui.tar tar xvf esx_ui.tar rm esx_ui.tar vi usr/lib/vmware/hostd/docroot/ui/index.html (Make changes!) tar cvf esx_ui.tar usr vmtar -c esx_ui.tar -o esx_ui.vgz mv esx_ui.vgz /bootbank/esx_ui.v00
That’s it on the ESXi Host. The page is now zoomable, the width should fit to most devices and it is “mobile-capable”. To get a browser without Tabs/Adress bar in Android, a little trick is required:
- Open Host Client in Chrome
- Options -> Add to Homescreen
- Open the Host Client with the link on the Homescreeen
- Browser is now in “App-Mode” (No Tabs/Address bar)
Here are some screenshots from my Android-based tablet: