After launching the static version of our dashboard, we set out to create a more interactive and customizable experience. In this blog post, we share how we selected React-Grid-Layout to enable drag-and-drop and resizing functionalities and why it was the best fit for ilert.
Observability, beyond its traditional scope of logging, monitoring, and tracing, can be intricately defined through the lens of incident response efficiency—specifically by examining the time it takes for teams to grasp the full context and background of a technical incident.
ClusterControl by Several9s is one more great partner introduced among ilert integrations for DevOps teams. In this article, learn more about ClusterControl functionality and the benefits of ilert integration.
About ClusterControl
ClusterControl, developed by Severalnines, is an agentless operations management and automation platform for open-source and source-available database clusters. It provides a user-friendly interface for deploying, monitoring, managing, and scaling high-availability database clusters in on-prem, hybrid, and cloud environments. ClusterControl offers real-time performance monitoring through customizable dashboards and alerting mechanisms, ensuring optimal operation. It also provides automated failover and facilitates automated, verified backups with point-in-time recovery options to maintain data integrity and availability.
ClusterControl integrates with various tools and supports multiple database technologies, including MySQL, PostgreSQL, and MongoDB, making it highly versatile for diverse environments. By consolidating these functionalities into a single platform, ClusterControl simplifies database operations and reduces the complexity of managing distributed database systems.
About ilert's integration for ClusterControl
Integrating ClusterControl with ilert aims to enhance the incident management workflow for DevOps and IT engineers managing database clusters where uptime is critical. This integration combines ClusterControl's robust database monitoring capabilities with ilert's set of features to manage incidents efficiently. Whether addressing a sudden MySQL crash or proactively resolving replication lag, this integration empowers engineers to ensure databases run smoothly with minimal disruptions for end users.
ClusterControl can send various alerts to ilert, including notifications about database availability issues, performance degradations, backup failures, storage capacity warnings, and security alerts. For instance, if a MySQL node goes down or a replica falls out of sync, ilert ensures the alert is routed and escalated to the appropriate on-call engineer. Similarly, alerts about high query execution times, failed backups, or unauthorized access attempts are handled with the same precision, enabling teams to act before these issues escalate into major incidents.
Real-time actionable notifications across multiple channels. Whenever there is an alert from ClusterControl, the user receives it via SMS, phone call, push notification in the app, or as a messenger in the chat tool. The first remediation steps can be taken from this message without logging into ilert.
Automated on-call duty distribution and escalations. Users set an on-call schedule for the team once, and ilert takes care of the rest. No more manual calendars or unclear responsibilities.
Alert grouping and filtering. By integrating ilert and ClusterControl, engineers can group alerts based on their content similarity, filter and prioritize them, ensuring they only receive notifications for issues requiring attention.
Centralized alert management. ilert absorbs alerts from various sources, giving users a 360-view into their systems. They can correlate ClusterControl alerts with other monitoring tools' notifications to perform root cause analysis faster.
ilert and ClusterControl security and compliance commitment
Built in Europe, ilert and ClusterControl are designed with a strong commitment to security and GDPR compliance, making them ideal solutions for customers in the European Union. Both platforms enable EU-based customers to confidently manage their database clusters and incident response processes while adhering to GDPR requirements, ensuring data integrity, privacy, and regulatory compliance. This robust approach to database management, security and compliance provides peace of mind for businesses that prioritize protecting sensitive customer and operational data.
Learn more about ClusterControl security and compliance standards.
Learn more about ilert's security and compliance commitment.
I studied web and app development at bib International College. At ilert, I'm constantly learning and growing by working on projects that improve our platform. I’d like to share my journey of joining the ilert team, the first challenges I’ve encountered, and some advice I’d offer to other aspiring junior developers or frontend developers taking their first steps in the tech industry.
How Do You Get Your First Job as a Frontend Developer?
It all started when my college teacher suggested that I consider an internship at ilert. I decided to apply and was lucky enough to be accepted. During my internship, I worked on developing a dashboard — a customizable page that allows clients to see team-related metrics and gain insights into different aspects of the incident management process. This hands-on experience was great for me because it was the first time I worked on such a big project in a real-world scenario and with many new technologies:
- React: A JavaScript library for building user interfaces that allowed us to create reusable UI components.
- TypeScript: A typed superset of JavaScript that adds static types, making code more robust and easier to debug.
- Material UI (MUI): A popular React UI framework that implements Google's Material Design and provides pre-built, customizable components.
- MobX: A state management library that simplifies managing and updating the state in React applications.
After my internship, I continued working on the dashboard as a working student and later as a junior developer, helping launch its first version for customers. Now, I fully own the dashboard feature (under the supervision of my senior colleagues, of course), overseeing its functionality and resolving issues. While it's a huge responsibility, I'm grateful that since day one, I’ve had my project that constantly evolves.
First challenge
Now, a few words on challenges. One of the biggest issues I faced was implementing drag-and-drop and resizing features for the new dashboard version. Finding a suitable package was difficult, but after testing many options, I settled on react-grid-layout.
Progress was smooth at first until I got stuck with a nasty bug: the widgets started mysteriously snapping to the center of the screen. I combed through the code, trying everything I knew but couldn’t find the issue. After hours of frustration, I reached out to a teammate, who offered simple advice: ‘Follow the flow of the code.’ With that nudge, I soon discovered the culprit—I'd swapped numbers in the widget position calculations, pushing the widgets outside the dashboard boundaries and causing them to default back to the center.
Fixing this small error instantly solved the problem, and I gained some valuable insights. I realized that small tips can be incredibly helpful when you're stuck. It also showed me that spending too much time fixated on a bug can lead to tunnel vision, causing you to overlook simple mistakes. Sometimes, it's best to step away, rest, and revisit the issue the next day with fresh eyes.
What Should Junior Developers Focus on When Starting Their Careers?
Reflecting on my journey, I'd like to share some tips for those starting out as junior developers, front-end developers or working students:
Combine React's component-based architecture with MUI's styled-components to create reusable and readable UI elements. For instance, we use an extensive collection of shared React components, such as tables and selects. We also use the MUI theme, which uses spacing, palette, and typography to ensure consistent styling across all components. These shared components and themes make coding much faster and ensure consistency across the app.
Ask questions wisely! Of course, asking questions is essential, but if you're stuck, try to solve problems yourself first. Research and try different solutions before asking for help. This approach not only improves your problem-solving skills but also demonstrates your commitment to learning. Take the initiative to learn and understand the technologies you're working with. Don't hesitate to explore documentation, tutorials, and other resources.
Use efficient state management in your React applications e.g. MobX. For example, we use the store pattern, maintaining shared stores primarily for our API calls and a page store to combine those API calls while adding UI logic. This approach simplifies state management and keeps your code organized.
The transition to full-time work can be stressful. Stay resilient, and remember that challenges are opportunities for growth.
If you’re a new frontend developer or junior developer and ready to start your career, explore the ilert career page to see if there’s a role that suits you. Good luck on your journey!
ilert's CTO, Christian Fröhlingsdorf: "We are always welcoming engineers who are at the beginning of their careers and are eager to grow and evolve as developers. There is no magic pill or fast track to becoming an experienced engineer. In my experience, the only functional approach to growing is to have a real product area or features and take responsibility for it. It's one thing to work on something that may never reach production and another to receive customer feedback on a daily basis."
Read how we set up an experimental chatbot environment that allows us to switch LLMs dynamically and enhances the predictability of AI-assisted features' behavior within the ilert platform. The article includes a guide on how you can build something similar if you plan to add AI features with a chatbot interface to your product.
Why use an AI chatbot playground?
At ilert, we are integrating various AI features that utilize a chat interface, including on-call scheduling and AI-powered assistance for our technical customer support team. To streamline development and maximize efficiency, we have created an AI chatbot playground that allows us to switch between different large language models. This AI playground serves as a tool for instructing models to respond within specific parameters, enabling us to predict model behaviors, debug issues, and test new features and enhancements.
We recently showcased this playground at our meetup, allowing attendees to experience how we approach AI feature development. The AI chatbot playground served as an effective demonstration tool, enabling attendees to test it themselves and learn how to apply similar techniques in their own work. It has become essential to our AI feature development process, allowing us to iterate quickly and optimize our models based on real-world feedback and a variety of testing scenarios.
Tips on how to build your own AI chatbot playground
AI Playground Setup
To set up our AI playground, we’ll use Vite. It offers a quick step-by-step setup of a repository via CLI.
bun create vite
Following the prompts, you may now choose your project name, framework, and variant (language + transpiler).
Building the UI
The following is one possible approach to building your chatbot’s UI. Feel free to get creative and put your own spin on it.
Building an AI playground should roughly have the following structure with components:
Headerbar
Logo
Heading
Action buttons
Sidebar
Instructions
Model
Chat
Messages
Input box
Components
Earlier in our setup, we chose React as our framework with Typescript, while MUI serves as our component library.
Headerbar
The headerbar contains a logo, heading, and action buttons.
Our sidebar wraps components and provides the user with the ability to choose and tune a model. Instructions should be a text input field, while the Model should be a dropdown with select functionality.
Here’s a snapshot of our finished product, highlighting the components mentioned above:
Going forward
Building your own AI playground might take some time, but the reward is great, given its endless use cases. You can choose your own data sources, whether they are cloud providers like OpenAI or self-hosted open-source models.
To further expand on this idea, you could create an export function or bundle the app into different platforms using tools like Electron for desktop applications. Other sensible features would be a theme mode toggle, authorization input (for ex., API keys when using third-party providers), or providing a language switch.