Konfigurace Dashboardu a widgetů

Nastavení dashboardu

Pro úpravu rozložení nebo konfiguraci dashboardu musí mít uživatel přiřazen prostředek dashboards:admin.

Manuální nastavení dashboardu z Knihovny

Konfigurace knihovny

Konfigurace knihovny je uložena v uzlu Knihovny. Musí být ve formátu JSON.

Pro načtení konfigurace z Knihovny musí běžet služba asab_library, která ukazuje na hlavní uzel Knihovny.

Konfigurace z Knihovny je editovatelná - pozice a velikost widgetů lze uložit do Knihovny přímo z BS-WebUI.

Nastavení dashboardu s konfigurací knihovny

• Konfigurační soubory dashboardů musí být uloženy v uzlu dashboard/Dashboards Knihovny podle následující struktury.

• konfigurační soubor knihovny (config), který definuje váš uzel Knihovny s konfigurací v uzlu Library Dashboards. Jméno config je také jméno Dashboardu zobrazeného v postranním panelu aplikace. Je povinným parametrem.

• DŮLEŽITÁ POZNÁMKA - konfigurační soubor MUSÍ mít příponu .json, jinak nebude možné zobrazit konfigurační soubor v modulu Library, a tím pádem nebude možné aktivovat funkce jako Edit nebo Disable.

Struktura konfigurace v Knihovně

- hlavní uzel Knihovny (`library`)
    - Dashboards
        - **config**.json

Kde

• hlavní uzel Knihovny je obvykle pojmenován jako library
• config je jméno konkrétní konfigurace Dashboardu, např. My Dashboard.json.

V Knihovně vypadá cesta k souboru s konfigurací takto:

/<hlavní uzel Knihovny>/Dashboards/<dashboardConfig>.json

Podívejte se na příklad konfigurace dashboardu tady.

Konfigurace dashboardu

Datasource

Primárně se používá pro nastavení zdroje dat pro widgety. Počet datasourců může být neomezený.

Příklad nastavení datasource

{
    ...

     "Dashboard:datasource:elastic": {
        "type": "elasticsearch", // Zdroj dat
        "datetimeField": "@timestamp", // Typ datetime
        "specification": "es-pattern*" // Indexový nebo URL vzorec
    },

    ...
}

Pokročilé nastavení Elasticsearch

{
    ...

     "Dashboard:datasource:elastic": {
        // Základní nastavení
        "type": "elasticsearch",
        "datetimeField": "@timestamp",
        "specification": "es-pattern*",

        // Pokročilé nastavení
        "sortData": "asc", // Řazení "asc" nebo "desc" dat při zpracování (volitelné)

        // Pokročilé nastavení Elasticsearch
        "size": 100, // Max velikost výsledků v odpovědi (výchozí 20) (volitelné)
        "aggregateResult": true, // Pouze pro grafy (ne pro PieChart) - bude žádat ES o agregované hodnoty (volitelné)
        "groupBy": "user.id", // Pouze pro grafy - bude žádat ES o agregaci podle termínu definovaného v klíči "groupBy" (volitelné)
        "matchPhrase": "event.dataset: microsoft-office-365" // Pro výchozí zobrazení konkrétního shody datasource
    },

    ...
}

Propojení datasource s widgetem

Pokud datasource není přiřazena k widgetu, nebudou zpracována žádná data pro zobrazení ve widgetu.

{
    ...

    "Dashboard:widget:somewidget": {
        "datasource": "Dashboard:datasource:elastic",

        ...
    },

    ...
}

Výzvy (Prompts)

Sekce nastavení Prompt poskytuje další možnost nastavení výzev Dashboardu nebo změny jejich výchozích hodnot.

Použití v konfiguračním souboru:

{
    ...

    "Dashboard:prompts": {
        "dateRangePicker": true, // Povolit výběr časového rozmezí
        "filterInput": true, // Povolit vstupní pole filtru
        "submitButton": true // Povolit tlačítko pro odeslání
    },

    ...
}

Nastavení vlastních časových intervalů

Někdy je potřeba nastavit vlastní časová období pro zobrazení dat, protože data leží mimo výchozí období nastavené pro Dashboard. Výchozí období je now-1H, které vyhledává data mezi now a 1 hodina zpět. Například toto lze nastavit v Dashboard:prompts následujícím způsobem:

{
    ...

    "Dashboard:prompts": {
        ...

        "dateRangePicker": true,
        "dateRangePicker:datetimeStart": "now-1H",
        "dateRangePicker:datetimeEnd": "now",
        ...
    },

    ...
}

Kde dateRangePicker:datetimeStart a dateRangePicker:datetimeEnd jsou období, která nastavují rozsah od počátečního období (výchozího) a do konečného období (konečného).

Možnosti nastavení pro obě období jsou:

• now-ns
• now-nm
• now-nH
• now-nd
• now-nw
• now-nM
• now-nY
• now
• now+ns
• now+nm
• now+nH
• now+nd
• now+nw
• now+nM
• now+nY

Kde - n je číslo, např. 2, - s označuje sekundy, - m označuje minuty, - H označuje hodiny, - d označuje dny, - w označuje týdny, - M označuje měsíce, - Y označuje roky

Jiné hodnoty budou ignorovány.

Lze například nastavit pouze jedno období, jak je ukázáno v tomto příkladu, druhé období zůstane výchozí:

{
    ...

    "Dashboard:prompts": {
        ...

        "dateRangePicker": true,
        "dateRangePicker:datetimeStart": "now-1H",
        ...
    },

    ...
}

Další příklad nastavení časového rozsahu, kde data jsou zobrazena 15 hodin do minulosti a vyhledává se 10 minut do budoucnosti:

{
    ...

    "Dashboard:prompts": {
        ...

        "dateRangePicker": true,
        "dateRangePicker:datetimeStart": "now-15H",
        "dateRangePicker:datetimeEnd": "now+10m",
        ...
    },

    ...
}

<!-- Lze specifikovat název tlačítka, barvu, cestu k end-pointu a formItems, což je pole objektů.

Ve formItems je možné specifikovat typ vstupního formuláře (uživatelské jméno, telefon, email, heslo) a jejich názvy a nápovědné zprávy. Při odeslání budou vyplněné informace nastaveny jako JSON tělo POST požadavku na zadanou cestu služby telco.

widgets: [{
            component_id: "WidgetContainer",
            dataSource: "ES",
            type: "Value",
            title: "Title",
            ...
            actionButton: {
                title: 'Trigger', // Název tlačítka
                backgroundColor: 'primary', // Barva tlačítka (pouze reakční a bootstrap barvy, pokud potřebujete širší rozsah, nastavte jej pomocí externího CSS)
                buttonOutline: true, // Nastavení obrysu tlačítka (výchozí false)
                action:"/path/of/the/endpoint", // Cesta URL end-pointu (bez protokolu a hostitele)
                formItems:[
                    {form:"username", title:"Username", hint: "Input username"},
                    {form:"phone", title:"Phone", hint: "Input phone"},
                    {form:"email", title:"Email", hint: "Input email"},
                    {form:"password", title:"Password", hint: "Input password"}
                ] // Formuláře, které se zobrazí v popoveru
                }, // Přidejte libovolné tlačítko, které provede nějakou akci prostřednictvím spuštění end-pointu definovaného v cestě
            ...
        }]
``` -->

### Grid systém (volitelné nastavení)

Grid může být konfigurován unikátně pro různé dashboardy. Tak lze konfiguraci gridu implementovat do konfigurace dashboardu, jak je vidět na příkladu. Pokud není definováno v konfiguraci, použije se výchozí nastavení gridu.

{ ...

"Dashboard:grid": {
    "preventCollision": false // Pokud je nastaveno na true, brání kolizím widgetů na gridu
},
"Dashboard:grid:breakpoints": {
    "lg": 1200,
    "md": 996,
    "sm": 768,
    "xs": 480,
    "xxs": 0
},
"Dashboard:grid:cols": {
    "lg": 12,
    "md": 10,
    "sm": 6,
    "xs": 4,
    "xxs": 2
},

...

} ``` Výše uvedené nastavení je také výchozím nastavením dashboardu.

Autorizace / Zakázání konfigurace

Přístup k dashboardu může být omezen pouze pro konkrétní tenanty. To znamená, že uživatelé bez konkrétních tenantů nemohou k dashboardu přistupovat. To je vhodné např. když administrátor chce omezit přístup k dashboardům s citlivými daty pro konkrétní skupiny uživatelů. Chcete-li zakázat konfiguraci pro konkrétní tenant, musíte přejít do sekce Knihovna aplikace a Zakázat konkrétní soubor kliknutím na přepínač v souboru. Zakázaný název souboru konkrétní konfigurace Dashboardu bude pak přidán do souboru .disabled.yaml s ovlivněnými tenanty v uzlu Knihovny.

Humanize (Zlidnění)

Komponenta použitá pro převod číselných hodnot do čitelnější formy pro člověka. Zobrazuje hodnoty v čitelnější formě, například: 0.000001 => 1 µ 0.00001 => 10 µ 0.0001 => 100 µ 0.001 => 1 m 0.01 => 10 m 0.1 => 100 m 1 => 1 10 => 10 100 => 100 1000 => 1 k 10000 => 10 k 100000 => 100 k 1000000 => 1 M atd. Může být použit pro widgety s hodnotou a vícenásobnými hodnotami. Chcete-li povolit komponentu Humanize ve widgetu, je třeba nastavit - "humanize": true v konfiguraci widgetu - "base": <number> definuje základnu pro převod (přepočet), volitelný parametr, výchozí je 1000 - "decimals": <number> definuje, kolik desetinných míst se zobrazí, volitelný parametr - "displayUnits": true zobrazuje prefix (tj. µ, m, k, M, G) jednotek, volitelný parametr, výchozí false - "units": <string> zobrazuje uživatelsky definovanou příponu jednotek (např. B, Hz,...) displayUnits a units budou spojeny ve widgetu a výsledek může vypadat jako MHz, kde M je prefix a Hz je uživatelsky definovaná přípona. ``` { ...

"Dashboard:widget:valuewidget": {
    ...

    "humanize": true,
    "base": 1024,
    "decimals": 3,
    "displayUnits": true,
    "units": "B",

    ...
},

...

} ```

Hint (volitelné nastavení)

Hint (nápověda) může být přidán pro jakýkoliv widget kromě nástroje Tools widget. Tímto způsobem bude nápověda vložena jako tooltip hint vedle titulu widgetu. Po přidání nápovědy se v záhlaví widgetu objeví ikona informace (vedle titulu). Po najetí myší na tuto ikonu se zobrazí přidaná nápověda. Hint může být pouze typu string. Příklad, jak přidat hint: ``` { ...

"Dashboard:widget:somewidget": {

    ...

    "hint": "Nějaká nápověda",

    ...
},

...

} ```

Rozvržení widgetu

Velikost widgetu a pozice na gridu mohou být definovány pro každý widget v konfiguraci. Pokud není nastaveno, widget má své předdefinované hodnoty pro rozvržení a pozici a bude vykreslen odpovídajícím způsobem. Widgety lze přesouvat a měnit jejich velikost v síti prostřednictvím Dashboard setting prompt >> Edit. To je dostupné pro uživatele s prostředkem dashboards:admin. Příklad základního nastavení rozvržení: ``` { ...

"Dashboard:widget:somewidget": {

    ...

    // Základní nastavení
    "layout:w": 4, // Šířka widgetu v jednotkách gridu
    "layout:h": 2, // Výška widgetu v jednotkách gridu
    "layout:x": 0, // Pozice widgetu na ose x v jednotkách gridu
    "layout:y": 0, // Pozice widgetu na ose y v jednotkách gridu

    // Volitelná vlastní nastavení
    "layout:minW": 2, // Minimální šířka widgetu
    "layout:minH": 2, // Minimální výška widgetu
    "layout:maxW": 6, // Maximální šířka widgetu
    "layout:maxH": 6, // Maximální výška widgetu

    ...
},

...

} Příklad pokročilého nastavení rozvržení: { ...

"Dashboard:widget:somewidget": {

    ...

    // Volitelná pokročilá nastavení
    "layout:isBounded": false, // Pokud je true a widget je tažný, bude se pohybovat pouze v rámci gridu
    "layout:resizeHandles": ?Array<'s' | 'w' | 'e' | 'n' | 'sw' | 'nw' | 'se' | 'ne'> = ['se'], // Ve výchozím nastavení se zobrazí rukojeť pouze v dolním pravém rohu (jihovýchod)
    "layout:static": ?boolean = false,  // Fixuje widget na statické pozici (nelze pohnout ani změnit velikost). Pokud je true, rovná se `isDraggable: false, isResizable: false`
    "layout:isDraggable": ?boolean