HomePortfolioBuilding a User Interface to Monitor Millions of Cloud Services

Building a User Interface to Monitor Millions of Cloud Services

Healthcare
Cloud-Native

A provider of cloud monitoring software turned to Altoros to build a user interface for its flagship product in active development under tight deadlines before upcoming release.

Building a User Interface to Monitor Millions of Cloud Services

About the project

Brief results of the collaboration:

  • The customer built a user interface with elaborate visualization features for its platform that monitors millions of pods, nodes, and services across distributed multicloud systems in just 3 months.
  • With the chosen technology stack and implementation of optimization best practices, the user interface delivers native experience during the troubleshooting process without compromising performance.
  • Thanks to an efficient staff augmentation process, involving strict nondisclosure agreements (NDAs) and the adoption of security policies/best practices/tools, the company successfully maintained the state of secretiveness before an upcoming release, not worrying about the leak of intellectual property.

The customer

Based in the US, the customer is developing a platform that monitors health status of distributed multicloud apps. The startup is now operating in stealth mode until the platform’s official release.

The need

Usually, organizations rely on a stack of tools to monitor multicloud apps and services—due to their complexity—rather than a single instrument. Still, such a stack needs fine-grained configuration to track relevant health metrics out of the whole abundance. This is a time-consuming process requiring specific expertise. Founded by DevOps professionals, the company was developing a monitoring platform to address these pain points. The product detects the root cause of an issue, relates it to a pod, node, or service within a cloud, ranks issues by severity, and sends detailed alerts. However, the platform lacked user interface, and there were no in-house front-end engineers. Hiring the talent might take up to 12 months, dramatically pushing back the release.

Partnering with Altoros, the customer wanted to build a user interface for its platform, meeting the deadline for MVP rollout scheduled in three months.

The challenges

Under the project, the team at Altoros had to address the following issues:

  • As the company was operating in stealth mode, it was crucial to prevent leak of intellectual property around the product in development.
  • The system was to visualize cloud objects (pods, nodes, apps, and services) as interconnected entities within a graph. Due to large volumes of data, dependencies between entities overlapped, hampering visual perception and making the graph hard to follow.
  • It was necessary to display hundreds of health metrics and logs as lists and diagrams, while also allowing for simultaneous scrolling and zooming in/out. This could lead to slow page loading times, badly affecting user experience.

The solution

Stage 1. After requirement analysis, front-end engineers at Altoros conducted a comparative research of the technologies on the market to build a user interface upon. The developers chose TypeScript for its elaborate code structure, error detection at a compilation stage, and simplified debugging / upgrades. For visualization, the team at Altoros utilized the AntV library (components G6 and G2) due to powerful capabilities and ease of customization.

In the first two weeks, the engineers built the whole user experience from scratch and delivered a proof of concept for the visualization graph—a major unit showing cloud entities (nodes, pods, or services).

To prevent intellectual property leaks, the developers signed strict nondisclosure agreements, adopting company’s security policies, best practices, and tools (e.g., nmp-audit and HTTP Security Headers Tool to scan for system vulnerabilities).

Stage 2. By configuring AntV G6, the engineers at Altoros created a layout to display millions of cloud entities in a single graph without quality loss. Each object differed in color as per issue severity (blue, yellow, and red as info, warning, and critical). The team also added a legend detailing each entity state: an issue discovery date, a version, etc.

Stage 3. Then, developers at Altoros built an admin panel featuring a timeline, graphs, and mindmap views. To prevent performance issues on the page, the team employed best practices of React optimization (e.g., memoization). The engineers also configured Antv G2 to provide detailed insights into the detected issues. For instance, the team delivered custom controls for the diagrams in the timeline, such as clusters with additional information, and enabled zoom in/out of a particular diagram area.

Stage 4. Developers at Altoros assisted the in-house team in implementing and customizing Grafana dashboards to view relevant logs and metrics for each entity. Finally, the engineers integrated the platform’s back and front ends using REST API.

The outcome

Partnering with Altoros, the customer built a user interface for its platform monitoring millions of pods, nodes, and services across distributed multicloud systems. Thanks to the chosen technology stack, the user interface delivers uninterrupted experience during the troubleshooting process by means of informative and easy-to-comprehend graphs, native navigation through millions of monitored cloud entities, etc.

With the time saved on onboarding, the startup was able to build an MVP in 3 months, get early feedback from users, and introduce improvements before official release. An efficient staff augmentation process (NDAs, adoption of security policies/best practices/tools) enabled the company to successfully operate in stealth mode.

Technology stack

Programming languages

TypeScript, JavaScript

Frameworks and tools

React.js, AntV, Redux, Saga, REST API, nmp-audit, HTTP Security Headers Check Tool

Millions

of monitored
cloud entities

3 months

on MVP
delivery

1 week

for talent
onboarding

Want to develop something similar?

Preloader
Ryan Meharg

Ryan Meharg

Technical Director

ryan.m@altoros.com650 265-2266

4900 Hopyard Rd. Suite 100 Pleasanton, CA 94588