🎡 Enhancing CyclopsUI: Modernizing the Node Details Page with Ant-D!

🥽 Introduction

Cyclops is an advanced monitoring tool designed to streamline Kubernetes (k8s) cluster management. Our ongoing mission is to provide an unparalleled user experience by continuously enhancing the interface and functionality. In this pr, i focused on modernizing the Node Details page by integrating Ant Design components. This blog post will detail the changes made, the benefits of these updates, and the immense effort involved in this transformation.

🐜 The Power of Ant Design

Ant Design is a comprehensive React UI library that offers a wealth of well-designed, high-quality components. It stands out for its consistency, flexibility, and ease of use, making it an ideal choice for modern web applications. By adopting Ant Design, I aimed to:

• Enhance Visual Appeal: Create a more modern and visually appealing interface.
• Ensure Consistency: Maintain a consistent look and feel throughout the application.
• Improve Usability: Make the user interface more intuitive and user-friendly.

🚗 Modernizing the Gauges

🥚 Before

Cyclop's previous gauges, while functional, lacked the visual sophistication and interactivity that modern users expect. They were taken from react-gauge-component and didn't match the overall dashboard vibe.

import GaugeComponent from "react-gauge-component";
// ...
<GaugeComponent ... />

🍳 After

I transitioned to Ant Design's Progress component, which provides a clean, professional look and a smooth user experience.

import { Progress } from "antd";

<Progress
  type="dashboard"
  strokeWidth={10}
  status="normal"
  percent={resources.cpu * 100}
  strokeColor={gaugeColors}
/>
<h1 style={{ marginBottom: "6px" }}>
  <strong>CPU</strong>
</h1>
<h3>
  ({node.requested.cpu}m / {node.available.cpu}m)
</h3>

🎨 Color Palette

These vibrant colors are taken from Discord's branding colors, which fit well with the overall design!

const gaugeColors = {
  "0%": "#57F287",
  "50%": "#FEE75C",
  "100%": "#ED4245",
};

🍖 Benefits of New Gauges

• Enhanced Visual Appeal: The new gauges are sleek and modern, enhancing the overall look of the Node Details page.
• Consistency: Using Ant Design ensures a uniform appearance across different parts of the application.
• Ease of Maintenance: Ant Design components are well-documented and maintained, reducing the effort needed for future updates.
• Improved Readability: Users can more easily understand and interpret resource usage data.

---

🃏 Enhancing Condition/Status Cards

🥚 Before

The condition cards were basic and lacked visual indicators, making it difficult for users to quickly assess node conditions.

<Col
  span={6}
  style={{
    display: "flex",
    justifyContent: "center",
    alignItems: "center",
  }}
>
  <Card
    style={{
      borderRadius: "10px",
      backgroundColor: conditionColor("MemoryPressure"),
      width: "100%",
      margin: "5px",
      textAlign: "center",
      color: "white",
    }}
  >
    <h1 style={{ margin: "0" }}>MemoryPressure</h1>
  </Card>
</Col>

🍳 After

I upgraded the condition cards with Ant Design's Card and Progress components. These changes make the cards more informative and visually engaging.

import { Card, Progress } from "antd";
// ...
<Col span={8}>
  <div style={{ textAlign: "center", width: "80%" }}>
    <Progress
      type="dashboard"
      strokeWidth={10}
      status="normal"
      percent={resources.memory * 100}
      strokeColor={gaugeColors}
    />
    <h1 style={{ marginBottom: "6px" }}>
      <strong>Memory</strong>
    </h1>
    <h3>
      ({formatBytes(node.requested.memory)}
      {" / "}
      {formatBytes(node.available.memory)})
    </h3>
  </div>
</Col>

Utilizing status="normal" allowed me to bypass the check or cross symbols at the range limits of progress. After two days of searching, I finally discovered a solution on my own, since I received no assistance in the GitHub discussions.

🍖 Benefits

• Quick Assessment: Circular progress indicators allow users to quickly gauge the status of various node conditions.
• Aesthetic Improvements: The updated cards are more attractive and align seamlessly with the overall application design.
• Informative: The cards provide more information at a glance, improving the user's ability to monitor node health effectively.
• Ease of Use: Ant Design’s components are straightforward to implement, saving development time and effort.

---

🗓️ Adding the Creation Date

To provide users with more contextual information about each node, I added a section displaying the node's creation date. This small yet significant update enhances the transparency and usefulness of the Node Details page.

🥚 Before

Previously, there was no direct way for users to see when a node was created, which could be crucial for tracking and management purposes.

🍳 After

I added a simple row to display the node's creation date using Ant Design's Text component. This was achieved with minimal code but added substantial value to the interface.

<Row>
  <Text keyboard>
    Created on:{" "}
    {new Date(node.node?.metadata?.creationTimestamp.toString()).toLocaleString()}
  </Text>
</Row>

🤔 Benefits of Adding the Creation Date

• Enhanced Information: Provides users with essential information about the node's lifecycle.
• Ease of Use: The creation date is now easily accessible directly from the Node Details page.
• Improved Management: Helps users keep track of node creation times, which is crucial for monitoring and management.

---

😓 The Lowkey Effort Behind the Update

Updating the Node Details page involved meticulous planning and execution. I dedicated significant time and effort to ensure a seamless integration of Ant Design components. This included:

• Design Iterations: Creating multiple design prototypes and gathering feedback to ensure the best user experience.
• Development and Testing: Writing clean, efficient code and thoroughly testing each component to ensure functionality and performance.
• Collaboration: Coordinating efforts across different issues, including design, development, and quality assurance, to deliver a cohesive and polished update.

---

💻 Contribution Logs

Made update to the Cyclops UI repository through PR #443, addressing several important issues. These updates were aimed at modernizing the user interface and enhancing the overall user experience.

• Fixed Issue #422: The outdated gauges on the NodeDetails.tsx page were replaced with more modern and visually appealing components. You can view the issue here.
• Updated Condition Cards: Changes were made in relation to Issue #440 to update the condition cards, making them more informative and visually engaging.

These changes have been merged into the main repository with the following commit: 42fcbd7bdf71005f6c39eff73d9936114ac7e7d8. You can check out my contributions and other projects on my GitHub profile.

🧀 Promoting Cyclops

Cyclops is at the forefront of Kubernetes monitoring, providing powerful tools to simplify cluster management. With Cyclops, you can monitor and manage your Kubernetes clusters with ease and confidence, thanks to our continuous improvements and dedication to user satisfaction.

🥗 Join Us in the Quest!

This blog post is part of Quest 15, a contest available on quira.sh that focuses on promoting Cyclops and resolving issues in the Cyclops repository and writing content about it. By participating in Quest 15, you can contribute to the continuous improvement and marketing of Cyclops.

ArnavK-09 (Arnav K) · GitHub

Racing aficionado, tech enthusiast, avid student. Unveiling profound knowledge, GitHub becomes my sanctuary! - ArnavK-09

github.com

cyclops-ui / cyclops

Developer Friendly Kubernetes 👁️

Developer Friendly Kubernetes

Webpage - Discord - X - LinkedIn

🟠 What is Cyclops?

Cyclops is an open-source dev tool that simplifies Kubernetes with an easy-to-use UI, making it less intimidating. Instead of creating and configuring your Kubernetes manifests with YAML, use Cyclops to painlessly configure and deploy your applications - validations included!

Thanks to the templates system, Cyclops's UI is highly customizable when defining configurations. Our templates turn hours and days of configuring applications into a few clicks.

💡 How it works?

Cyclops is a platform that allows DevOps teams to quickly and without coding create custom UIs for developers, QA teams, product managers, and other team members who do not necessarily have experience working with Kubernetes.

But don’t worry! If you do not have a DevOps team with you, Cyclops comes with a bunch of predefined templates to get you started!

Under the hood, Cyclops uses Helm charts…

View on GitHub

---

🧊 Conclusion

The enhancements to the NodeDetails page reflect our commitment to continuous improvement and user satisfaction. By integrating Ant Design components, I've modernized the interface, making it more consistent, informative, and visually appealing.

Cyclops remains a top notch. Tool in Kubernetes monitoring, and these updates are just one of the many ways we're making cluster management easier and more efficient. Join us on Quira.sh for Quest 15 and be part of this exciting journey.

---

Comments

[Juraj]

Thanks for sharing your story 🙌