Photo by Irina Popovich on Unsplash

VISUALIZATION-SERIES

Visualization — TraceChart Samples

Bu blog yazılarında Visualization Kapsamında yazdığımız yazılar ile ilgili örnekler üzerinden ilgili Layout ve Chart’ları nasıl kullandığımızı anlatacağım.

2 min readFeb 20, 2023

--

TraceChart Thundra uygulamalarında sıkça kullandığımız Trace, Process vb.. hiyerarşik yapıdaki verileri göstermekte kullandığımız bir araç. Thundra’da OpenSource halinde bu linkten erişebilirsiniz.

1. TraceChart (Show/Hide)

İlk örnekte TraceChart içerisinde bir takım konfigurasyonlar ile TraceChart farklı şekillerde nasıl kullanabileceğimizi inceleyeceğiz.

  • Show Mini Trace: Üstünde TraceChart Preview olarak gösteren Ufak TraceChart açılır.
  • Show Duration: Ekranda trace’lerin gerçekleşme süreleri gösterilir.
  • Show Critical Path: Trace’lerin child(çocuk trace) kesişip, kesişmediği kısımlar gösterilir.
  • Show TraceChart Header: TraceChart Colon Başıklarını içerir.
  • Show Header: TraChart üzerinde TraceId, Duration, Services vb.. ekstra bilgilerin gösterildiği header.
  • Show Span Detail: Span Detail gösterilip gösterilmeyeceği
  • Show Span Detail Title: Span Detail Title gösterilip gösterilmeyeceği
trace-chart-showhide

2. TraceChart (Process Display)

Bu örnek bizim Foresight uygulamasında Process’lerin gösterimi için CriticalPath gösterimi ile hangi process hangi child processlerden oluşuyor ve ne kadarlık zamanı kapsadığını (yani kesişen ve kesişmeyen) kısımlarında gösterilmesini sağlayan CritacalPath gösterimi ile Process detaylarının gösterimi sağlanır.

https://onurdayibasi.dev/trace-chart-process-display

3. TraceChart (Workflow/Job/Step)

Bu örnekte ise GitHub Actions içerisinde yer alan Workflow, Job ve Step hiyerarşik yapısının gösterimini farklı renkler ve yine kesişimlerini gösteren CriticalPath ile birlikte görebilirsiniz

https://onurdayibasi.dev/trace-chart-workflow-display

Okumaya Devam Et 😃

Bu yazının devamı veya yazı grubundaki diğer yazılara erişmek için bu linke tıklayabilirsiniz.

--

--