
% Kapitola "Uživatelské rozhraní dohledového systému"


%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
\kapitola{Uživatelské rozhraní dohledového systému}
\label{kap:webgui}
Koncepce dohledového systému je zvolena tak, aby všechny jeho části mohly pracovat zcela nezávisle na sobě. Jediným styčným bodem, který je navzájem spojuje ve funkční celek, jsou společná data v~DBMS. Činnost uživatelského rozhraní je omezena výhradně na manipulaci s~těmito daty.
\par
Na základě uvedených vlastností lze realizaci uživatelského rozhraní pojmout několika způsoby. Je možné vytvořit klasickou GUI aplikaci (tlustý klient) s~kompletní vnitřní logikou, která se k~DBMS prostřednictvím sítě připojí a~umožní tak správu dostupných dat. Výhodou je vysoká míra interaktivity, nevýhodou závislost na platformě (PC, PDA, mobilní telefon) a~decentralizace různých verzí na různých místech. Vzhledem k~síťově orientované povaze dohledového systému a~absence jakýchkoliv činností prováděných offline, je forma tlustého klienta z~provozního hlediska výrazně komplikovanější.
\par 
Tenký klient představuje způsob, jímž lze vnitřní logiku uživatelského rozhraní odstranit z~lokální aplikace a~přenést ji na centrální distribuční místo – server. V~současnosti je pojem tenký klient spojován převážně s~formou webových aplikací. Pro realizaci uživatelského rozhraní je tento způsob výhodnější a~byl proto zvolen.
\medskip
\par\noindent
Charakteristika uživatelského rozhraní:
\medskip
\begin{itemize}
\item{Zobrazení kompletního stromu prvků včetně chybového kódu.}
\item{Barevné odlišení prvku pro dostupný a~nedostupný stav.}
\item{Administrace všech parametrů prvku.}
\item{Export stromu prvků do formátu PDF.}
\item{Přehledné zobrazení v~minimalistických prohlížečích (textové a~mobilní).}
\item{Využití šablony uživatelského rozhraní systému Netadmin.}
\end{itemize}
\medskip

%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
\sekce{Vlastnosti WWW rozhraní}
%Plnohodnotný webový prohlížeč je jedním ze základních programů, který je možné nalézt téměř ve všech instalacích operačních systémů. Výjimkou jsou specializované a~jednoúčelové OS, které se však na běžně užívaných počítačích zpravidla nevyskytují. 
%\par
%Většina uživatelů WWW prohlížeč důvěrně zná a~jeho ovládání jim nečiní větší potíže. U administrátorů nebo osob, jež jsou pověřeny administrací dohledového systému, se dokonalá znalost webového prohlížeče považuje za samozřejmost.
%\img{webgui/img/web_aplikace}%
%    {127mm}%
%    {Princip činnosti webové aplikace}%
%    {fig:webgui:webappz}%
    
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
\podsekce{Centralizace zdrojového kódu aplikace}
Možnost umístění zdrojového kódu odděleně od klienta představuje zřetelnou výhodu především z~pohledu vývoje a~údržby aplikace. Mezi uživatele není nutné šířit nové nebo opravené verze, ale úpravy provedené na centrálním místě (zpravidla WWW server) jsou k~dispozici všem uživatelům ihned bez zbytečného prodlení. Přístup k~takové aplikaci je pak v~zásadě možný z~jakéhokoliv počítače, který disponuje prohlížečem WWW stránek.
\img{webgui/img/web_aplikace}%
    {127mm}%
    {Princip činnosti webové aplikace}%
    {fig:webgui:webappz}%

%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
\podsekce{Nestavovost a~interaktivita}
Nestavovost je klíčovou vlastností webových aplikací -- nikde neexistuje žádný začátek ani konec aplikace. Z~tohoto důvodu musí být všechny logické celky aplikace rozděleny do funkčních kroků, které musí být schopny provozu na základě předaných parametrů, identifikačního řetězce dané relace (session\_id) nebo cookies uložených v~prohlížeči uživatele. Důležitým faktorem spolehlivé aplikace je ošetření vstupních parametrů proti zneužití a~eliminace následků nežádoucích projevů, které vzniknout například kliknutím na tlačítko krok zpět nebo obnovit v~prohlížeči.
\par 
Omezená interaktivita webové aplikace je daná samotnou technologií. Způsobuje nemožnost pružné a~okamžité reakce na změnu stavu, který na straně serveru nastane. Týká se to především změn hodnot v~DB a~jejich následné prezentace uživateli. Webová stránka se může zobrazit pouze na pokyn uživatele (kliknutí na odkaz) nebo po uplynutí stanoveného časového intervalu (metatag, JavaScript). V~obou případech se jedná o~podnět k~obnově obsahu ze strany klienta, nikoliv zdroje dat. Periodická aktualizace stránky je tak nutností v~případě, že požadavkem aplikace je udržet aktuální stav dat na obrazovce uživatele. Důsledkem této aktivity je zvýšená zátěž serveru a~je proto nutné stanovit aktualizační interval vzhledem k~povaze problému.
\par
V současné době je mezi tvůrci webových aplikací velmi populární technologie se souhrnným názvem AJAX. Jedná se o~kombinaci JavaSciptu a~objektu XMLHttpRequest. Zásadní výhodou této technologie je možnost zpracování http požadavků na pozadí zobrazené stránky. Její struktura se nemusí načítat celá, zůstane stále vykreslena. Aktualizují se pouze ty elementy, které jsou pro popis situace důležité. Stránka pak působí dojmem interaktivní desktopové aplikace, přestože v~pozadí stále dochází k~periodickým požadavkům na server. Ty však mají značně snížené nároky na systémové zdroje serveru. Interaktivita je v~tomto případě pouze iluzorní.
\par 
Moderní prohlížeče AJAX podporují. V~reálném provozu dohledového systému ovšem může nastat situace, kdy bude nutné k~uživatelskému rozhraní přistupovat pomocí prohlížečů s~omezenou funkcionalitou. Jsou jimi například konzolové textové prohlížeče, minimalistické verze v~PDA nebo mobilních telefonech. Pro návrh uživatelského rozhraní byl proto zachován konzervativní přístup a~využity pouze základní vlastnosti prohlížeče.

%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
%\podsekce{Zobrazení WWW stránek}
%Aktuální verze nejrozšířenějších plnohodnotných prohlížečů interpretují rozvržení HTML značek a~kaskádových stylů CSS na poměrně solidní úrovni. Drobné rozdíly, které stále mezi jednotlivými prohlížeči existují, nepředstavují pro vývoj uživatelského rozhraní zásadní problém. Zcela jiné chování je však patrné u~zmíněných prohlížečů s omezenou funkcionalitou. Některé formátování webové stránky zcela ignorují, jiné si jej interně modifikují pro dosažení nejlepšího zobrazení na malém displeji nebo textové konzoli. V~obou případech je nutné návrh uživatelského rozhraní vytvořit tak, aby byly webové stránky i~v~těchto prohlížečích co nejsnadněji čitelné a~nebylo nutné vytvářet odlišné verze pro různé typy prohlížečů.
%\par
%Nejsnazší cesta k~dosažení tohoto cíle je čistě textová forma sdělovaných informací s formátováním pomocí kaskádových stylů. Případné menu by mělo být umístěno na začátku zdrojového kódu stránky a~pomocí CSS přesunuto na příslušné místo, stejně jako následující vlastní obsah. Tato struktura zajistí přehlednost i~v~případě úplné ignorace rozvržení prohlížečem. Pokud je využit nějaký obrázek nebo ikona, je nutné specifikovat zástupný text atributem alt, protože právě tento text je jedinou informací o~významu obrázku v~textových prohlížečích.

%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
\podsekce{WWW Server}
Nasazení administračního rozhraní do reálného provozu předpokládá využití šablony uživatelského rozhraní správního systému Netadmin. V~rámci této šablony je již vyřešeno formátování vzhledu výsledných stránek, optimalizace pro textové prohlížeče a~autentizace uživatelů. 
\par
V současné době provozuje sdružení Starhill z~důvodu zabezpečení dva webové servery~–~uživatelský a~administrační. Pro přístup k~administrační části je požadováno zabezpečené spojení pomocí SSL s~příslušným certifikátem a~vlastnictví uživatelského jména a~hesla. SSL je možno v~případě nouzového přístupu vypnout a~zajistit tím správnou funkčnost starších textových prohlížečů. Realizace obou těchto serverů je provedena s využitím dvou nezávislých instancí http serveru Apache. V~obou instancích je povolena možnost využití skriptovacích jazyků PHP, PERL, Python a C\# prostřednictvím technologie ASP.NET (mod\_mono).
\par
Šablona uživatelského rozhraní systému Netadmin je vytvořena v~jazyce PHP, a~přestože je prakticky možné kombinovat v~rámci webových aplikací více jazyků, uživatelské rozhraní dohledového systému využívá rovněž PHP.

%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
\sekce{Grafická reprezentace prvku}
Důležitým aspektem při zobrazení stromu prvků je jejich grafické ztvárnění a~nalezení optimálního poměru mezi estetickým a~funkčním návrhem. Na základě tohoto požadavku a~s přihlédnutím ke specifikům webového rozhraní byl navrhnut vzhled prvku, který je uveden na obr. \link{fig:webgui:prvek}. 
\medskip
\par\noindent
Mezi vlastnosti navrženého vzhledu patří:
\medskip
\begin{itemize}
\item{Malé rozměry. Jsou uvedeny pouze základní údaje o prvku.}
\item{Chybový kód je zobrazen ve stylu barevného indikačního proužku.}
\item{Barva pozadí je závislá na dostupnosti nebo nedostupnosti prvku.}
\item{Vazby k~ostatním prvkům jsou umístěny ve fixních polohách.}
\end{itemize}
\medskip
\img{webgui/img/prvek}%
    {114mm}%
    {Grafická reprezentace prvku.}%
    {fig:webgui:prvek}%

%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
\podsekce{Chybový kód}
Znázornění chybového kódu prostřednictvím barevného indikačního proužku bylo vytvořeno z~důvodu snazší orientace administrátora při pohledu na objekt prvku. Usnadnění spočívá v~tom, že administrátor nemusí znát přesný význam numerické reprezentace chybového kódu, ale dle barev zobrazených polí je schopen určit, v~jakém stavu se prvek nachází a~jaká je orientační pravděpodobnost, že se dohledovému systému podaří dostupnost prvku obnovit. Využita je přitom vlastnost rostoucí hodnoty chybového kódu popsaná v~kapitole \linkover{kap:dohled:erc}{kap:dohled}.
\par
Na obr. \link{fig:webgui:prvek} je znázorněn plně dostupný prvek s~chybovým kódem 1. Všechna pole jsou zobrazena ve svých základních barvách – zelená, oranžová a~červená. Pokud dojde u~tohoto prvku k~inkrementaci chybového kódu, první pole z~levé strany, které bylo doposud vyplněno svou základní barvou, bude černé. Ukázka prvku s~chybovým kódem 10 je na obr. \link{fig:webgui:triprvky}.
\par
Zástupný text proužku je získán z~databázové tabulky \texttt{node\_erc} a~v prohlížeči se zobrazí zpravidla po najetí myši nad jeho libovolnou část. Administrátor je tak schopen velmi rychle zjistit, pokud má zájem, co přesně se prvkem děje. Přehled zástupných textů je uveden v~tab.~
\linkover{tab:dohled:erctxt}{kap:dohled}.

%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
\podsekce{Barva pozadí}
Při řešení výpadků v~reálném provozu sítě je třeba, aby administrátor získal pohledem na strom prvků okamžitý přehled o~tom, který prvek je dostupný a~který nikoliv. Tuto informaci lze sice odvodit na základě chybového kódu, ale při větším počtu zobrazených prvků je forma barevného proužku nepřehledná. Z~tohoto důvodu byla signalizace nedostupnosti realizována změnou barvy pozadí ze žluté na oranžovou, resp. šedou, pokud se prvek nachází mezi následníky za nedostupným prvkem. Na obr. \link{fig:webgui:triprvky} jsou uvedeny všechny varianty zobrazení prvku.
\img{webgui/img/barevny_prvky}%
    {138mm}%
    {Varianty zobrazení prvku dle jeho dostupnosti.}%
    {fig:webgui:triprvky}%

%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
\sekce{Stromová struktura prvků}
Grafická reprezentace prvků a~jejich vzájemných vazeb je základní vizuální forma, která je administrátorovi nabídnuta. Umožňuje získat snadný přehled o~stavu sítě a~současně velmi rychle odvodit závislosti mezi jednotlivými prvky. Na obr. \link{fig:webgui:strom} je uveden příklad stromové struktury několika prvků z~celkových 147, které jsou v~rámci sítě Starhill provozovány. Kompletní graf je z~prostorových důvodů umístěn v~příloze~\ref{kap:supp:cd}.
\par
Vykreslení struktury je realizováno rekurzivní funkcí využívající seznamu prvků v~databázové tabulce \texttt{node}. Pokud je nalezen prvek, který má nastaven atribut \texttt{erc} na hodnotu 0, je vykreslování zbytku větve přerušeno. Dohledový systém tento zbytek ignoruje a~je zbytečné jej zobrazovat. Během prohledávání je současně u~každého prvku analyzován chybový kód a~na základě jeho hodnoty jsou nastaveny vlastnosti zobrazení prvku, případně celé následující větve. 
\img{webgui/img/web_strom}%
    {150mm}%
    {Ukázka vykreslení stromu prvků ve webové aplikaci.}%
    {fig:webgui:strom}%
Zobrazený objekt prvku obsahuje pouze omezené množství podstatných informací. Z~tohoto důvodu byl do textu s jeho názvem vložen hypertextový odkaz, který směřuje na ucelený přehled všech jeho parametrů. Ukázka pro prvek \uv{2.4G AP sektor 1} je na obr. \link{fig:webgui:parametry}.
\par
Pokud je prvek testovatelný a~současně konfigurovatelný prostřednictvím vlastního WWW rozhraní, lze kliknutím na zobrazenou IP adresu do tohoto prostřední vstoupit. Podmínkou je funkční síťové spojení mezi klientským počítačem a~prvkem. Kliknutím na ikonu \uv{EDIT} lze upravit příslušné parametry prvku ve vztahu k~dohledovému systému.
%\img{webgui/img/web_parametry}%
%    {100mm}%
%    {Přehled parametrů prvku.}%
%    {fig:webgui:parametry}%

%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
\sekce{Administrace prvků}
Účelem tabulky na obr. \link{fig:webgui:seznam} je zobrazit prvky bez jejich vzájemných vazeb, ale s možností jejich editace. Administrátor zde může nové prvky přidávat, upravovat nebo mazat. Tato funkcionalita není v~režimu zobrazení stromového grafu dostupná. 
\par
Sloupec \textit{stav} obsahuje aktuální chybový kód prvku. Barva pozadí pole je přitom závislá na jeho hodnotě podobně jako u~grafické reprezentace prvku. Sloupec \textit{aktivní} obsahuje text ano, pokud je atribut \texttt{enable} databázové tabulky \texttt{node} nastaven na hodnotu 1. Následující 3 sloupce seznamu prvků popisují, zda-li je prvek testovatelný, resetovatelný a~informovatelný. Kliknutím na ikonu \uv{EDIT} je zpřístupněna možnost změny požadovaného parametru. Kliknutím na název prvku se zobrazí ucelený přehled jeho parametrů, stejně jako je tomu u~stromu prvků.
\img{webgui/img/web_seznam}%
    {119mm}%
    {Ukázka seznamu prvků.}%
    {fig:webgui:seznam}%
    
\img{webgui/img/web_parametry}%
    {100mm}%
    {Přehled parametrů prvku.}%
    {fig:webgui:parametry}%    

%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
\sekce{Export do PDF}
Výstup seznamu prvků do formátu PDF je vytvořen zejména pro servisní a~dokumentační účely. Administrátor si může tento seznam vytisknout a~při své činnosti mít k~dispozici podklady s~aktuálním rozložením prvků v~síti. Vzájemné vazby mezi nimi jsou naznačeny odsazením z~levé strany. V~pravé části dokumentu je místo pro případné poznámky, které mohou být následně zaneseny do dohledového nebo správního systému. 
\par\noindent
Pro generování PDF je využita volně dostupná open-source knihovna fpdf \cite{lit:web:fpdf}.
\img{webgui/img/web_pedofil}%
    {127mm}%
    {Příklad struktury PDF dokumentu.}%
    {fig:webgui:pedofil}%

