> For the complete documentation index, see [llms.txt](https://docs.liman.dev/liman-eklentileri/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.liman.dev/liman-eklentileri/ag-izleme-eklentisi/ag-izleme-pano-kullanimi.md).

# Ağ İzleme Pano Kullanımı

## **1. Kişiselleştirilmiş Pano Oluşturma**

* Network eklentisine girilir. Dashboard sekmesine girilir. Mavi "+" butonuna tıklanıp girdi olarak isim girip kişiselleştirilir.Daha sonra "Create" butonuna basılır ve yeni bir pano oluşturulur.

[![Image description](https://res.cloudinary.com/practicaldev/image/fetch/s--fDl7x3Yp--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kk5uhv54glm6i1mp4er8.png)](https://res.cloudinary.com/practicaldev/image/fetch/s--fDl7x3Yp--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kk5uhv54glm6i1mp4er8.png)

Sağ üstteki mavi kaydet butonuyla pano kaydedilebilir.

## **2. Pano Düzenleme ve İzleme**

* Pano oluşturulduktan sonra sağ köşede bulunan ve pano düzenlemeyi etkinleştirmeyi sağlayacak olan buton aktifleştirilir. Ardından "+" butonuna basılır ve istenen widget eklemesi yapılır.

Örnek olarak burada Host olarak Liman Server 111 seçildi ve Item olarak zabbix deneme'nin indirme hızını veren bir Graph isteğinde bulunuldu;

[![Image description](https://res.cloudinary.com/practicaldev/image/fetch/s--6Aiz0m7d--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qjztxroop5epf9p3eneu.png)](https://res.cloudinary.com/practicaldev/image/fetch/s--6Aiz0m7d--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qjztxroop5epf9p3eneu.png)

* Bu widget'lara düzenleme yapmak da mümkündür. Örneğin silinebilir veya yukarıdaki eklenen grafikte sonuç, grafiğin sağ üstündeki üç çizgili logodan istenen formatta indirilebilir ve yakınlaştırma/uzaklaştırma gibi işlemler de yapılabilir. Sonuç olarak diğer türlerden de eklemeler ile beraber kişisel bir panonun görünümü aşağıdaki görsele benzer olacaktır;

[![Image description](https://res.cloudinary.com/practicaldev/image/fetch/s--49CpmXE0--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u8dda8teqxfbw374y9t2.png)](https://res.cloudinary.com/practicaldev/image/fetch/s--49CpmXE0--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u8dda8teqxfbw374y9t2.png)

## **3. Pano Grafiklerinin Zamana Göre Filtrelenebilmesi**

* Zamana göre pano grafiklerinin düzenlenebilmesi için orta üstte bulunan takvimden izlenmek istenen tarih aralığı girilir, mavi "Onayla" butonuna tıklanır ve grafiklere olan yansımaları görülür.

[![Image description](https://res.cloudinary.com/practicaldev/image/fetch/s--JfKl6qQq--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5ghkumnfpzw6bpfldzvc.png)](https://res.cloudinary.com/practicaldev/image/fetch/s--JfKl6qQq--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5ghkumnfpzw6bpfldzvc.png)

Örneğin 31 Ocak-1 Şubat tarih aralığındaki grafik şu şekilde gözükmektedir;

[![Image description](https://res.cloudinary.com/practicaldev/image/fetch/s--h2Dgmaqb--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wkyy1u3a4uy74j9hoqgc.png)](https://res.cloudinary.com/practicaldev/image/fetch/s--h2Dgmaqb--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wkyy1u3a4uy74j9hoqgc.png)
