Streamlit je framework, pomocí kterého můžeme data z testování převést na interaktivní webové aplikace. V tomto článku si ukážeme, jak vytvořit graf s anotacemi, který kromě prezentace výsledků dobře poslouží také k jejich analýze.
V předchozích článcích jsme si ukázali, jak na performance monitoring pomocí Telegrafu a Grafany. Ne vždy je ale možné tyto nástroje použít a v případně jednorázových testů by to mohlo být také kontraproduktivní. Pro samotné měření dat můžeme použít Windows Performance Monitor, který najdete ve všech verzích Windows, a není proto potřeba instalovat další nástroje. Výsledky potom můžeme zpracovat pomocí Pythonu a vizualizovat právě pomocí Streamlitu.
Kromě samotného Streamlitu budeme potřebovat nainstalovat také dva další moduly, Pandas a Plotly:
pip install streamlit pandas plotly
Jako zdroj dat použiji log z Windows Performance Monitoru. Vytvoření grafu je velice snadné – naměřené hodnoty načteme pomocí Pandas, Plotly se poté postará o jejich vykreslení.
Jako první krok je vhodné upravit si (přemapovat) hlavičku dat, protože názvy sloupců můžou být velmi dlouhé nebo nepřehledné. Pro časové razítko (timestamp) to může být například “(PDH-TSV 4.0) (Central Europe Standard Time)(-60)“. Po přemapování na “Timestamp” se nám bude s daty pracovat mnohem lépe:
Pomocí pandas.read_csv() tedy soubor s daty načteme. V případě našeho logu jsou data seřazená podle časového razítka. Kdyby tomu tak nebylo, můžeme pro seřazení použít pandas.DataFeame.sort_values():
Čárový (spojnicový) graf vytvoříme pomocí plotly.express.line(). Pro osu x použijeme první sloupec s časovým razítkem a pro osu y všechny ostatní. Streamlit následně graf vykreslí pomocí st.plotly_chart():
Tip: Co znamená zápis columns[1:]? Podívejte se na Python List Slicing.
Pár řádků kódu a náš graf je na světě. Hotový skript spustíme pomocí příkazu streamlit run nas-skript.py:
Často se mi stává, že nechci zobrazovat všechny sloupce ve stejném grafu – některé sloupce nemusí obsahovat hodnoty se stejnou jednotkou (například RAM se udává v kB ale využití CPU v %), některé sloupce pro prezentaci dat nepotřebuji nebo je vykreslování, zejména při velkém množství dat, pomalé. Můžu proto explicitně nastavit, které sloupce se na ose y vykreslí:
Ve vykresleném grafu potom vidím pouze mnou definované sloupce:
Takovýto graf už nám pro prezentace i analýzu výsledků může stačit. Pokud naměříme hodnoty, které nás nějak zajímají, stačí porovnat jejich časové razítko s logem testované aplikace a zjistit, co se v danou dobu dělo. Co by nám ale takové bádání usnadnilo, je vypsání informací z logu aplikace přímo do grafu.
Pomocí pandas.concat() můžeme sloučit více datových zdrojů do jednoho. Stačí tedy výsledky z Performance Monitoru spojit s logem aplikace do jednoho datového zdroje. Já mám v tomhle případně výhodu, protože aplikace, kterou testuji, je modul Pythonu, a můžu si tak snadno vytvořit logovací funkci, kterou použiji ve svých testovacích skriptech pro logování konkrétních kroků:
Pokud takovou možnost nemáte, můžete log z vaší aplikace například přeformátovat ručně ve VS Code ale věřím, že najdete způsob, jak to udělat za pomocí Pandas nebo vlastního Python kódu.
Načteme tedy oba dva datové zdroje a spojíme je dohromady pomocí pd.concat():
Čárový graf vytvoříme pomocí plotly.express.line() jako v předchozím případě, navíc ale přidáme samotné zprávy z logu aplikace a graf těmito zprávami anotujeme:
Výsledkem je interaktivní anotovaný graf, ve kterém si můžeme přibližovat jednotlivé oblasti a výsledek uložit jako obrázek ve formátu PNG:
Stejně jako v případně ostatních návodů, i v tomto případně najdete ukázkové skripty na našem GitHubu.
