DEV Community

Cover image for How I Contributed to Kestra: A Beginner’s Perspective
Pravesh Sudha
Pravesh Sudha

Posted on

How I Contributed to Kestra: A Beginner’s Perspective

💡 Introduction

Welcome to the world of Open Source! Today, I’m excited to share my experience of contributing to an amazing open-source project—Kestra.

For those unfamiliar, Kestra is an open-source platform designed for orchestrating data and automating workflows, much like data pipelines. What makes it special? You can define workflows in YAML format, making it highly developer-friendly, while its no-code interface allows non-developers to automate tasks effortlessly.

One of the things I love most about Kestra is its open-source nature and its philosophy—"Start simple and grow as needed." Getting started with Kestra is incredibly easy. You can spin it up on your local system using Docker with just one command:

docker run --pull=always --rm -it -p 8080:8080 --user=root \
-v /var/run/docker.sock:/var/run/docker.sock -v /tmp:/tmp \
kestra/kestra:latest server local
Enter fullscreen mode Exit fullscreen mode

With that, you’re all set to explore the power of workflow automation!


💡 My First Issue: Fixing Pagination Colors

Contributing to open source for the first time can feel overwhelming, but trust me—it’s an exciting journey! My first issue in Kestra was a UI-related task that involved fixing pagination colors in the Vue files. You can check out my contribution here.

The issue? The colors of the page numbers in the pagination component were not aligned with the design system. It might seem like a small change, but good UI/UX plays a crucial role in making an application feel polished.

Image description

How I Fixed It

To resolve this issue, I made the following updates in the Pagination.vue file:

  • Adjusted the color of total pages using Vue’s CSS variables:

    • --ks-content-secondary/primary
    • --ks-border-primary
    • --ks-button-background
  • Added logic for hover and active page color, ensuring that the UI looked more interactive and visually consistent.

Image description

This task might seem minor, but it was a great first step to understanding how Kestra’s UI components work. It also gave me confidence in navigating an open-source codebase and making meaningful changes.

Image description


💡 My Second Issue: Adding kestraFilter to Flow Triggers

After successfully fixing the pagination colors, I moved on to my next issue—adding the kestraFilter to the Trigger section of Flows. At first, I misunderstood the task and ended up modifying the position of the Refresh button instead. Thankfully, Milos Paunovic, a Senior Frontend Engineer at Kestra, patiently guided me toward the actual requirement.

Understanding the Problem

After carefully analyzing the UI, I realized that the Kestra filter was already implemented in multiple components across the application. The goal was to bring this filter functionality to the Flow Trigger section, allowing users to search and filter triggers efficiently.

How I Fixed It

To implement this, I:

  • Created the KestraFilter in the FlowTrigger.vue file.

  • Added a searchTrigger function to handle filtering logic.

Image description

However, things didn’t go smoothly at first. For some reason, the search functionality wasn’t working as expected. I debugged it for a while but couldn’t pinpoint the exact issue. That’s when Milos stepped in to help, made a few minor tweaks, and—boom!—the filter was up and running.

Image description

Lessons Learned

This issue taught me an important lesson about debugging—sometimes, even a small change can break functionality, and it’s okay to ask for help. Open-source contributions are not just about writing code; they’re also about collaborating, learning from experienced developers, and improving problem-solving skills.


💡 Conclusion

My open-source journey with Kestra has been nothing short of amazing! A huge shoutout to Kunal Kushwaha — I first learned about Kestra from one of his video, and that led me to explore and contribute to this fantastic project.

The Kestra team has been incredibly responsive and welcoming, making my experience smooth and enjoyable. Special thanks to Milos Paunovic, whose minor tweaks taught me valuable lessons about debugging and refining code. This experience has motivated me to contribute even more and continue learning with the team.

For anyone interested in workflow automation, I highly recommend checking out Kestra! If you ever get stuck, don’t hesitate to join the Kestra Slack channel and ask your questions in the appropriate channel—you’ll find a supportive community ready to help.

Happy coding, and see you in the open-source world! 🚀

✨ For more informative blog, Follow me on Hashnode, X(Twitter) and LinkedIn.

Top comments (0)