🎡 بهبود CyclopsUI: مدرن کردن صفحه جزئیات گره با Ant-D!

Summarize this content to 400 words in Persian Lang

🥽 مقدمه

Cyclops یک ابزار نظارتی پیشرفته است که برای ساده کردن مدیریت خوشه Kubernetes (k8s) طراحی شده است. ماموریت مداوم ما ارائه یک تجربه کاربری بی نظیر با بهبود مستمر رابط و عملکرد است. در آخرین به روز رسانی خود، ما بر مدرن کردن صفحه جزئیات گره با ادغام اجزای طراحی مورچه تمرکز کردیم. این پست وبلاگ جزئیات تغییرات ایجاد شده، مزایای این به‌روزرسانی‌ها و تلاش‌های عظیمی که در این تحول انجام شده است را توضیح می‌دهد.

🐜 قدرت طراحی مورچه

Ant Design یک کتابخانه جامع React UI است که انبوهی از اجزای با طراحی خوب و با کیفیت را ارائه می دهد. به دلیل سازگاری، انعطاف پذیری و سهولت استفاده از آن متمایز است و آن را به گزینه ای ایده آل برای برنامه های کاربردی وب مدرن تبدیل می کند. با اتخاذ طراحی مورچه، هدف ما این بود:

افزایش جذابیت بصری: یک رابط کاربری مدرن تر و جذاب تر ایجاد کنید.

از ثبات اطمینان حاصل کنید: ظاهر و احساس یکنواخت را در طول برنامه حفظ کنید.

بهبود قابلیت استفاده: رابط کاربری را بصری تر و کاربر پسندتر کنید.

🚗 مدرن کردن گیج ها

🥚 قبل از

گیج های قبلی ما، در حالی که کاربردی بودند، فاقد پیچیدگی بصری و تعاملی که کاربران مدرن انتظار دارند، بودند. آنها از کامپوننت-react-gauge گرفته شده بودند و با فضای داشبورد کلی مطابقت نداشتند.

import GaugeComponent from “react-gauge-component”;
// …
GaugeComponent … />

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

🍳 پس از

من به Ant Design منتقل شدم Progress کامپوننت، که ظاهری تمیز و حرفه ای و تجربه کاربری روان را ارائه می دهد.

import { Progress } from “antd”;

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

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

🎨 پالت رنگ

این رنگ های پر جنب و جوش از رنگ های برند دیسکورد گرفته شده اند که به خوبی با طراحی کلی هماهنگی دارند!

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

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

🍖 مزایای سنج های جدید

درخواست تجدیدنظر بصری پیشرفته: سنج های جدید شیک و مدرن هستند و ظاهر کلی صفحه جزئیات گره را بهبود می بخشند.

ثبات: استفاده از Ant Design ظاهر یکنواخت را در قسمت های مختلف برنامه تضمین می کند.

سهولت در تعمیر و نگهداری: اجزای طراحی مورچه به خوبی مستند شده و نگهداری می شوند و تلاش لازم برای به روز رسانی های آینده را کاهش می دهند.

خوانایی بهبود یافته: کاربران می توانند به راحتی داده های استفاده از منابع را درک و تفسیر کنند.

🃏 ارتقاء کارت های وضعیت/وضعیت

🥚 قبل از

کارت‌های شرط اولیه بودند و فاقد شاخص‌های بصری بودند و ارزیابی سریع شرایط گره را برای کاربران دشوار می‌کرد.

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” }}>MemoryPressureh1>
Card>
Col>

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

🍳 پس از

ما کارت های شرایط را با Ant Design ارتقا دادیم Card و Progress اجزاء. این تغییرات باعث می شود که کارت ها آموزنده تر و از نظر بصری جذاب تر شوند.

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>Memorystrong>
h1>
h3>
({formatBytes(node.requested.memory)}
{” / “}
{formatBytes(node.available.memory)})
h3>
div>
Col>

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

با استفاده از status=”normal” به من اجازه داد که علامت های چک یا ضربدر را در محدوده پیشرفت دور بزنم. پس از دو روز جستجو، سرانجام به تنهایی راه حلی را کشف کردم، زیرا هیچ کمکی در بحث های GitHub دریافت نکردم.

🍖 مزایا

ارزیابی سریع: نشانگرهای پیشرفت دایره ای به کاربران این امکان را می دهد که به سرعت وضعیت شرایط مختلف گره را بسنجند.

بهبودهای زیبایی شناختی: کارت های به روز شده جذاب تر هستند و به طور یکپارچه با طراحی کلی برنامه هماهنگ هستند.

آموزنده: کارت ها در یک نگاه اطلاعات بیشتری را ارائه می دهند و توانایی کاربر را برای نظارت موثر بر سلامت گره بهبود می بخشند.

راحتی در استفاده: اجرای اجزای Ant Design ساده است و در زمان و تلاش توسعه صرفه جویی می کند.

🗓️ اضافه کردن تاریخ ایجاد

برای ارائه اطلاعات متنی بیشتر در مورد هر گره به کاربران، بخشی را اضافه کردیم که تاریخ ایجاد گره را نشان می دهد. این به روز رسانی کوچک و در عین حال قابل توجه، شفافیت و سودمندی صفحه جزئیات گره را افزایش می دهد.

🥚 قبل از

پیش از این، هیچ راه مستقیمی برای کاربران وجود نداشت که ببینند چه زمانی یک گره ایجاد شده است، که می تواند برای اهداف ردیابی و مدیریت بسیار مهم باشد.

🍳 پس از

من یک ردیف ساده برای نمایش تاریخ ایجاد گره با استفاده از Ant Design اضافه کردم Text جزء. این با حداقل کد به دست آمد اما ارزش قابل توجهی به رابط اضافه کرد.

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

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

🤔 مزایای اضافه کردن تاریخ ایجاد

اطلاعات پیشرفته: اطلاعات ضروری در مورد چرخه عمر گره را در اختیار کاربران قرار می دهد.

راحتی در استفاده: تاریخ ایجاد اکنون به راحتی مستقیماً از صفحه جزئیات گره قابل دسترسی است.

مدیریت بهبود یافته: به کاربران کمک می کند زمان ایجاد گره را که برای نظارت و مدیریت بسیار مهم است، پیگیری کنند.

😓 تلاش Lowkey پشت به‌روزرسانی

به روز رسانی صفحه جزئیات گره مستلزم برنامه ریزی و اجرای دقیق بود. ما زمان و تلاش قابل توجهی را برای اطمینان از ادغام یکپارچه اجزای طراحی مورچه اختصاص دادیم. این شامل:

تکرارهای طراحی: ایجاد چندین نمونه اولیه طراحی و جمع آوری بازخورد برای اطمینان از بهترین تجربه کاربر.

توسعه و آزمایش: نوشتن کد تمیز و کارآمد و آزمایش کامل هر جزء برای اطمینان از عملکرد و عملکرد.

همکاری: هماهنگی تلاش ها در موضوعات مختلف، از جمله طراحی، توسعه، و تضمین کیفیت، برای ارائه به روز رسانی منسجم و صیقلی.

💻 گزارش های مشارکت

به روز رسانی به مخزن Cyclops UI از طریق PR #443، با رسیدگی به چندین مشکل مهم. این به‌روزرسانی‌ها با هدف مدرن‌سازی رابط کاربری و افزایش تجربه کاربری کلی انجام شده‌اند.

مشکل شماره 422 رفع شد: سنج های قدیمی روی NodeDetails.tsx صفحه با اجزای مدرن تر و جذاب تر جایگزین شد. می توانید موضوع را در اینجا مشاهده کنید.

کارت های وضعیت به روز شده: تغییراتی در رابطه با شماره 440 ایجاد شد تا کارت‌های شرایط را به‌روزرسانی کنند و آنها را آموزنده‌تر و از نظر بصری جذاب‌تر کند.

این تغییرات با commit زیر در مخزن اصلی ادغام شده اند: 42fcbd7bdf71005f6c39eff73d9936114ac7e7d8. می‌توانید مشارکت‌ها و سایر پروژه‌های من را در نمایه GitHub من بررسی کنید.

🧀 ترویج سیکلوپ

Cyclops در خط مقدم نظارت Kubernetes قرار دارد و ابزارهای قدرتمندی برای ساده‌سازی مدیریت خوشه ارائه می‌کند. به روز رسانی های اخیر ما در صفحه جزئیات گره بخشی از تعهد مداوم ما به تعالی است. با Cyclops، به لطف پیشرفت‌های مستمر و تعهد ما به رضایت کاربر، می‌توانید خوشه‌های Kubernetes خود را به راحتی و با اطمینان کنترل و مدیریت کنید.

🥗 در تلاش به ما بپیوندید!

این پست وبلاگ بخشی از Quest 15 است، مسابقه ای که در آن موجود است quira.sh که بر ترویج Cyclops و حل مشکلات موجود در مخزن Cyclops و نوشتن مطالب در مورد آن تمرکز دارد. با شرکت در Quest 15 می توانید به بهبود مستمر و بازاریابی Cyclops کمک کنید.

علاقه مند به مسابقه، علاقه مندان به فناوری، دانش آموز مشتاق. GitHub با پرده برداری از دانش عمیق، پناهگاه من می شود! – ArnavK-09

github.com

رابط کاربری قابل تنظیم برای بارهای کاری Kubernetes 👁️

Kubernetes دوستدار توسعه دهندگان

صفحه وب – Discord – X – LinkedIn

🟠 Cyclops چیست؟

Cyclops یک ابزار توسعه دهنده منبع باز است که Kubernetes را با یک رابط کاربری آسان برای استفاده ساده می کند و باعث می شود کمتر ترسناک باشد. به‌جای ایجاد و پیکربندی مانیفست‌های Kubernetes خود با YAML، از Cyclops برای پیکربندی و استقرار بدون درد برنامه‌های خود استفاده کنید – شامل اعتبارسنجی‌ها!

به لطف سیستم قالب‌ها، رابط کاربری Cyclops هنگام تعریف تنظیمات بسیار قابل تنظیم است. قالب های ما ساعت ها و روزهای پیکربندی برنامه ها را به چند کلیک تبدیل می کنند.

💡 چگونه کار می کند؟

Cyclops پلتفرمی است که به تیم‌های DevOps اجازه می‌دهد تا به سرعت و بدون کدنویسی رابط‌های کاربری سفارشی برای توسعه‌دهندگان، تیم‌های QA، مدیران محصول و سایر اعضای تیم که لزوماً تجربه کار با Kubernetes را ندارند ایجاد کنند.

اما نگران نباشید! اگر تیم DevOps همراه خود ندارید، Cyclops با یکسری الگوهای از پیش تعریف شده برای شروع کار همراه است!

در زیر کاپوت، Cyclops از نمودارهای Helm استفاده می کند…

🧊 نتیجه گیری

پیشرفت های به NodeDetails صفحه نشان دهنده تعهد ما به بهبود مستمر و رضایت کاربر است. با ادغام اجزای طراحی مورچه، رابط کاربری را مدرن کرده‌ام و آن را سازگارتر، آموزنده‌تر و از نظر بصری جذاب‌تر کرده‌ام. ما از شما دعوت می کنیم امروز Cyclops را امتحان کنید و این پیشرفت ها را از نزدیک تجربه کنید.

Cyclops همچنان پیشرو در نظارت Kubernetes است، و این به روز رسانی ها تنها یکی از راه هایی است که ما مدیریت خوشه را آسان تر و کارآمدتر می کنیم. به ما در Quira.sh برای Quest 15 بپیوندید و بخشی از این سفر هیجان انگیز باشید. منتظر به‌روزرسانی‌های بیشتر باشید و کشف کنید که طراحی مورچه چگونه می‌تواند برنامه‌های کاربردی وب شما را متحول و بهبود بخشد.