ในโลกของการตรวจสอบโครงสร้างพื้นฐาน นักพัฒนากำลังค้นพบเทคโนโลยีเว็บที่มีประสิทธิภาพแต่ถูกละเลยบ่อยครั้ง นั่นคือ Scalable Vector Graphics (SVG) สิ่งที่เริ่มต้นจากการค้นหาของนักพัฒนาคนหนึ่งเพื่อสร้างภาพแสดงเครือข่ายแล็บที่บ้านของเขา ได้จุดประกายการอภิปรายในชุมชนเกี่ยวกับทางเลือกที่เรียบง่ายและมีประสิทธิภาพมากกว่าสำหรับเครื่องมือตรวจสอบที่ซับซ้อนอย่าง Grafana แนวทางนี้แทนที่การออกแบบที่ตอบสนองต่ออุปกรณ์ที่ซับซ้อนด้วยการจัดการ SVG ที่ตรงไปตรงมา ช่วยให้สามารถสร้างแดชบอร์ดแบบกำหนดเองที่โหลดทันทีและแสดงผลสิ่งที่วิศวกรต้องการเห็นอย่างแท้จริง
จากแล็บที่บ้าน สู่โครงสร้างพื้นฐานระดับเมือง
ความเรียบง่ายของแดชบอร์ดที่ใช้ SVG นั้นกลับพบว่าสามารถขยายขนาดได้อย่างน่าประหลาดใจ ผู้ใช้ท่านหนึ่งบรรยายถึงการนำแนวทางนี้ไปใช้กับเครือข่ายระบบน้ำประปาของทั้งเมือง โดยแทนที่ระบบ SCADA แบบเดิมที่มีราคาแพงและล้าหลังต่อความสามารถของเว็บสมัยใหม่ ด้วยการใช้คำสั่ง SQL เพื่อส่งข้อมูลผ่าน JSON ทุกนาที พวกเขาสร้างระบบที่โหลดได้ทันทีและรองรับผู้ใช้พร้อมกันได้ไม่จำกัด โดยไม่มีค่าใบอนุญาตที่แพง
ฉันนำแผนภาพระบบท่อมาและทำเครื่องหมายมิเตอร์วัดการไหล ทรานสดิวเซอร์วัดแรงดัน ปั๊ม เซนเซอร์วัดระดับอ่างเก็บน้ำ และแม้แต่มิเตอร์วัดการไหลของแม่น้ำ โดยใช้รหัสเฉพาะสำหรับแต่ละองค์ประกอบ วิศวกรระบบอัตโนมัติระดับมืออาชีพถึงกับอ้าปากค้างเมื่อฉันบอกว่าการสร้างใช้เวลาเพียงไม่กี่วัน
แนวทางนี้แสดงให้เห็นว่าแดชบอร์ด SVG สามารถจัดการกับโครงสร้างพื้นฐานที่ซับซ้อนในโลกจริงได้อย่างไร ในขณะที่ยังคงเข้าถึงได้สำหรับนักพัฒนาโดยไม่จำเป็นต้องมีความเชี่ยวชาญด้าน Frontend เป็นพิเศษ ความสามารถในการสร้างภาพประกอบแบบกำหนดเองได้อย่างรวดเร็วแสดงถึงข้อได้เปรียบที่สำคัญเมื่อเทียบกับโซลูชันการตรวจสอบระดับองค์กรแบบดั้งเดิม
การนำไปใช้ทางเทคนิคและการปรับปรุงโดยชุมชน
เทคนิคหลักเกี่ยวข้องกับการกำหนดรหัสเฉพาะให้กับองค์ประกอบ SVG และเปลี่ยนสีเติม (fill) อย่างไดนามิกเพื่อแสดงสถานะที่แตกต่างกัน พอร์ตเราต์เตอร์อาจแสดงสีเขียวเมื่อออนไลน์ สีแดงเมื่อปิดการทำงาน หรือสีเหลืองสำหรับเงื่อนไขสถานะอื่นๆ ในขณะที่การนำไปใช้ดั้งเดิมใช้การเปลี่ยนสีแบบง่ายๆ สมาชิกในชุมชนก็ระบุโอกาสในการปรับปรุงได้ในทันที
ผู้ใช้หลายท่านแนะนำให้ใช้คลาส CSS แทนการจัดการแอตทริบิวต์ fill โดยตรง ซึ่งจะช่วยให้สามารถสร้างภาพเคลื่อนไหวที่ลื่นไหลระหว่างการเปลี่ยนสถานะได้ แนวทางนี้ช่วยขจัดอาการกะพริบทางภาพที่อาจทำให้การตรวจจับการเปลี่ยนแปลงสถานะที่ละเอียดอ่อนทำได้ยาก ภาพเคลื่อนไหว CSS ทำงานร่วมกับคุณสมบัติของ SVG ได้อย่างลงตัว ทำให้มีการเปลี่ยนผ่านที่ดูสมบูรณ์โดยไม่ต้องใช้ไลบรารี JavaScript เพิ่มเติม
ศักยภาพเชิงโต้ตอบยังไปไกลกว่าการสร้างภาพประกอบเพียงอย่างเดียว นักพัฒนาสามารถแนบตัวติดตามเหตุการณ์ (event listener) ของ JavaScript กับองค์ประกอบ SVG เพื่อสร้างอินเทอร์เฟซที่คลิกได้และตอบสนองต่อการป้อนข้อมูลของผู้ใช้ ฟังก์ชันการทำงานนี้ช่วยให้มีความสามารถในการเจาะลึก (drill-down) โดยการคลิกที่องค์ประกอบอุปกรณ์อาจเผยให้เห็นสถิติโดยละเอียดหรือตัวเลือกการกำหนดค่า
แนวทางการพัฒนา Dashboard ด้วย SVG
| วิธีการ | ข้อดี | ข้อควรพิจารณา |
|---|---|---|
| การปรับแต่ง fill attribute โดยตรง | การพัฒนาที่เรียบง่าย ให้ผลลัพธ์ทางภาพทันที | อาจทำให้เกิดภาพกระพริบระหว่างการอัปเดต |
| การจัดรูปแบบด้วย CSS class | ช่วยให้ทำ animation ได้อย่างลื่นไหล แยกส่วนการทำงานได้ดีกว่า | ต้องการการตั้งค่าที่ซับซ้อนขึ้นเล็กน้อย |
| JavaScript event listeners | เปิดใช้งานฟีเจอร์เชิงโต้ตอบและความสามารถในการเจาะลึกข้อมูล | มีข้อจำกัดด้านความปลอดภัยของเบราว์เซอร์ |
| การป้อนข้อมูลด้วย JSON | อัปเดตแบบเรียลไทม์ บูรณาการกับฐานข้อมูลที่มีอยู่ได้ | ต้องการ data pipeline ฝั่ง backend |
ก้าวข้ามธรรมเนียมการออกแบบแดชบอร์ดแบบดั้งเดิม
แนวทาง SVG ท้าทายการออกแบบแดชบอร์ดแบบดั้งเดิม ซึ่งโดยทั่วไปจะเน้นไปที่แผนภูมิ กราฟ และตาราง นักพัฒนาคนหนึ่งยอมรับว่าเครื่องมือสร้างแดชบอร์ดของพวกเขาไม่รองรับสไตล์ภาพแบบนี้ เพราะพวกเขาไม่เคยจินตนาการมาก่อนว่าจะมีใครต้องการมัน สิ่งนี้เผยให้เห็นว่าความคิดที่ฝังรากลึกเกี่ยวกับการแสดงข้อมูลสามารถจำกัดนวัตกรรมในอินเทอร์เฟซการตรวจสอบได้อย่างไร
วิธีการนี้โดดเด่นเป็นพิเศษสำหรับการตรวจสอบโครงสร้างพื้นฐานทางกายภาพซึ่งความสัมพันธ์เชิงพื้นที่มีความสำคัญ วิศวกรเครือข่ายสามารถเห็นสถานะพอร์ตในการจัดเรียงทางกายภาพตามจริงของพวกเขา ในขณะที่ผู้จัดการอาคารสามารถตรวจสอบอุปกรณ์ได้ตรงตำแหน่งที่ตั้งในอาคาร ความเที่ยงตรงเชิงพื้นที่นี้ให้บริบทที่เข้าใจได้ทันทีซึ่งแผนภูมิแบบนามธรรมไม่สามารถเทียบได้
สมาชิกในชุมชนบางท่านตั้งข้อสังเกตว่าแนวทางนี้ให้ความรู้สึกคล้ายกับการพัฒนา Flash จากยุคแรกเริ่มของเว็บ ซึ่งนักออกแบบทำงานกับขนาดผ้าใบที่คงที่แทนที่จะเป็นเลย์เอาต์ที่ตอบสนองต่ออุปกรณ์ แม้ว่าอาจดูเหมือนเป็นข้อจำกัด แต่มันกลับทำให้การพัฒนาสำหรับจอแสดงผลตรวจสอบเฉพาะทางที่มีขนาดหน้าจอคงที่นั้นง่ายขึ้น
เครื่องมือออกแบบ SVG ทั่วไปสำหรับแดชบอร์ด
- draw.io: เครื่องมือบนเว็บฟรีสำหรับสร้างไดอะแกรมและผังงาน
- Inkscape: โปรแกรมแก้ไขกราฟิกแบบเวกเตอร์โอเพนซอร์สที่มีความสามารถด้าน SVG อย่างครอบคลุม
- Adobe Illustrator: ซอฟต์แวร์ออกแบบเวกเตอร์ระดับมืออาชีพที่มีตัวเลือกการส่งออก SVG ที่แม่นยำ
ข้อควรพิจารณาในทางปฏิบัติและความปลอดภัย
การนำไปใช้ต้องให้ความสนใจกับนโยบายความปลอดภัยของเบราว์เซอร์ SVG ที่มี JavaScript แทรกอยู่โดยทั่วไปจะทำงานได้เมื่อให้บริการจากเว็บเซิร์ฟเวอร์เท่านั้น ไม่ใช่ระบบไฟล์ท้องถิ่น ข้อจำกัดนี้ช่วยเพิ่มความปลอดภัยโดยป้องกันการดำเนินการ SVG โดยพลการ นักพัฒนาไม่ควรอนุญาตให้อัปโหลด SVG ที่ไม่น่าเชื่อถือไปยังระบบผลิต เนื่องจากความเสี่ยงด้านความปลอดภัยที่อาจเกิดขึ้น
เทคนิคนี้ทำงานได้ดีกับเครื่องมือออกแบบทั่วไป ผู้ใช้กล่าวถึงการใช้ draw.io และ Inkscape ในการสร้างไดอะแกรมพื้นฐาน ทำให้แนวทางนี้เข้าถึงได้สำหรับทีมที่ไม่มีทรัพยากรการออกแบบเฉพาะทาง ลักษณะเวกเตอร์ของ SVG รองรับการแสดงผลที่คมชัดในทุกระดับการซูม ซึ่งมีความสำคัญอย่างยิ่งสำหรับไดอะแกรมโครงสร้างพื้นฐานที่มีรายละเอียด
เมื่อองค์กรขยายขนาดการนำไปใช้ พวกเขาจะต้องพิจารณาวิธีจัดการตรรกะสถานะที่ซับซ้อนและความขึ้นต่อกันของอุปกรณ์ การอภิปรายในชุมชนชี้ให้เห็นว่าแนวทางนี้ทำงานได้ดีสำหรับการแสดงสถานะโดยตรง แต่可能需要ต้องมีการวางแผนโครงสร้างเพิ่มเติมสำหรับระบบแจ้งเตือนและสายโซ่การพึ่งพาที่ซับซ้อน
การกลับมาของ SVG สำหรับการตรวจสอบโครงสร้างพื้นฐานแสดงให้เห็นว่าบางครั้งโซลูชันที่มีประสิทธิภาพที่สุดมาจากการทบทวนสมมติฐานพื้นฐานใหม่ แทนที่จะต่อสู้กับเครื่องมือที่ถูกออกแบบให้ซับซ้อนเกินความจำเป็น นักพัฒนากำลังค้นพบว่าเทคโนโลยีพื้นฐานที่ตรงไปตรงมา เมื่อนำไปใช้อย่างสร้างสรรค์ สามารถแก้ปัญหาจริงในโลกได้อย่างมีประสิทธิภาพมากกว่าโซลูชันระดับองค์กรราคาแพง ดังที่ผู้ใช้ท่านหนึ่งระบุไว้ ชัยชนะที่แท้จริงมาจากการละทิ้งเครื่องมือที่ซับซ้อนเกินไปเพื่อไปสู่โซลูชันเฉพาะทางที่ตอบโจทย์ความต้องการของวิศวกรได้อย่างแท้จริง
อ้างอิง: Create a Custom Interactive Infrastructure Dashboards