Closing in on the Completion of the User Interface Migration: Cloud and Monitor Pages

Revamping Cloud and Monitor

We’re getting closer to completing the Bootstrap migration and this time, we have revamped the Cloud and Monitor pages.

This is part 7 of a series of posts about revamping the user interface of OBS. We started off with the Package pages in October 2018, moved on to the Project, User and Group pages in December 2018, continued with the Request pages in February 2019 and migrated the Configuration pages in March 2019. We then finished the Maintenance pages in April 2019, the Search and Kiwi Editor pages were completed in May 2019 and now, we focused on the Cloud and Monitor pages.

These changes are already available for all users in the beta program.

Cloud

The Cloud pages were brought up to the Bootstrap UI without much visual changes. The changes are first and foremost for the code and its maintainability. Still, you must wonder how these pages look, so we won’t leave you hanging. There you go!

Cloud Upload Overview

Cloud Upload for Amazon EC2

Cloud Upload for Microsoft Azure

Monitor

The Server Status, Workers and Statistical Plots sections are migrated with minor changes, which are highlighted below.

Workers

The progress bars under each worker are from Bootstrap.

Statistical Plots

The Architecture and Timeframe options are now horizontally centered and the plots are a tad bigger.

What Is Next?

In the next weeks, the Bootstrap UI will be exiting the beta program. Stay tuned!

How to Give Us Feedback

As always, we need your feedback to make this even better. Don’t forget to join the beta program, try the new user interface and tell us what you think about it. Please read the How Give Us Feedback section in this previous announcement. We are looking for:

  • Bugs, so anything breaking workflows.
  • Design feedback, so anything related to the user experience and interface.
  • How it works on your device / browser.
{"cc_re__cc_re__cc_by_4_0": ["face\"><i class=\"left arrow icon\"></i>The Search and Kiwi Editor Pages Are Now Part of the Revamped User Interface</a>\n          \n        </div>\n        <div class=\"right aligned eight wide column\">\n          \n            <a href=\"/2019/06/13/post-mortem/\" rel=\"next\" title=\"Next Post: Post-mortem: Downtime on June 13, 2019\">Post-mortem: Downtime on June 13, 2019<i class=\"right arrow icon\"></i></a>\n          \n        </div>\n      </div>\n    </div>\n\n    <div class=\"ui visible message license\">\n    <a rel=\"license\" href=\"http://creativecommons.org/licenses/by/4.0/\">\n      <img alt=\"CC\" src=\"/images/icons/cc.png\" width=\"18px\" class=\"license-image\"/>\n      <img alt=\"BY\" src=\"/images/icons/by.png\" width=\"18px\" class=\"license-image\"/>\n    </a>\n    \n    This blog's content is licensed under a <a rel=\"license\" href=\"http://creativecommons.org/licenses/by/4.0/\">Creative Commons Attribution 4.0 International License</a>.\n</div>\n\n    <div class=\"sixteen wide column\">\n      <div id=\"disqus_thread\">\n      </div>\n    </div>\n    <script type=\"text/javascript\">\n        ", "m: Downtime on June 13, 2019\">Post-mortem: Downtime on June 13, 2019<i class=\"right arrow icon\"></i></a>\n          \n        </div>\n      </div>\n    </div>\n\n    <div class=\"ui visible message license\">\n    <a rel=\"license\" href=\"http://creativecommons.org/licenses/by/4.0/\">\n      <img alt=\"CC\" src=\"/images/icons/cc.png\" width=\"18px\" class=\"license-image\"/>\n      <img alt=\"BY\" src=\"/images/icons/by.png\" width=\"18px\" class=\"license-image\"/>\n    </a>\n    \n    This blog's content is licensed under a <a rel=\"license\" href=\"http://creativecommons.org/licenses/by/4.0/\">Creative Commons Attribution 4.0 International License</a>.\n</div>\n\n    <div class=\"sixteen wide column\">\n      <div id=\"disqus_thread\">\n      </div>\n    </div>\n    <script type=\"text/javascript\">\n        var disqus_config = function () {\n            this.page.url = '/2019/06/06/revamping-cloud-ui/';\n            this.page.identifier = '/2019/06/06/revamping-cloud-ui';\n        };\n\n        /* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */\n        var disqus_shortname = '"]}