VM List

Initial objectives:

• There is a simple static html table report generated periodically by a backend system. Task: find a better way to make that report easier to use and digest.
• Admin should be able to quickly find a VM, i.e. located in which box (usually done by Ctrl+F in the browser).
• Admin should be able to identify if any box has low storage.

Feature highlights:

• Parse and transform the HTML using only client's side scripting (javascript)
• Display all machines (boxes) and the summary of its contents in a very compact visualization
• It is mobile friendly
• Each box can be clicked to reveal the details of VM list
• Smart Find tool utilizing the Ctrl+F (browser's native find tool) to find things quickly. When searching, the matched words will be slightly revealed and highlighted automatically. It works even on mobile. Example: Try to find "Kelly" using the online demo in the link above. In which box is it?
  Update: Previously, it worked in all browsers, but apparently it now only works in MSIE and Edge. Chrome and Firefox don't auto scroll divs to show highlighted searched keywords anymore.
• Any box with low storage will be marked clearly as yellow or red

Screenshots

(Click on an image to open its actual size)

The original
long HTML page

After redesigned
(all boxes are visible in the above screenshot
with still enough detailed summary)

Two boxes are expanded to reveal their contents