Configuration overview
---
title: Konfigurace dashboardu a widgetů
---
# Konfigurace dashboardu a widgetů
## Nastavení dashboardu
Pro úpravu rozložení nebo konfigurace dashboardu musí mít uživatel přiřazený prostředek `dashboards:admin`.
### Ruční nastavení dashboardu z knihovny
#### Konfigurace knihovny
Konfigurace knihovny je uložena v uzlu Knihovny. Musí být typu JSON.
Aby bylo možné získat konfiguraci z knihovny, musí běžet služba `asab_library` s konfigurací ukazující na hlavní uzel knihovny.
Konfigurace z knihovny je editovatelná - pozice a velikost widgetů mohou být uloženy do knihovny přímo z BS-WebUI.
##### Nastavení dashboardu s konfigurací z 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 Knihovny Dashboardů. Název `config` je také **název dashboardu zobrazeného v postranním panelu** aplikace. Je to povinný parametr.
- **DŮLEŽITÁ POZNÁMKA** - konfigurační soubor MUSÍ mít příponu `.json`, jinak nebude možné zobrazit konfigurační soubor v modulu `Knihovna` a tím spustit funkce jako `Upravit` nebo `Zakázat`.
Struktura konfigurace v knihovně
library)
- Dashboards
- config.json
Kde
- \*\*hlavní uzel knihovny\*\* by měl být obvykle pojmenován jako `library`
- \*\*config\*\* je název konkrétní konfigurace dashboardu, např. `My Dashboard.json`
V knihovně vypadá cesta k konfiguračnímu souboru takto:
`/<hlavní uzel knihovny>/Dashboards/<dashboardConfig>.json`
Podívejte se na [příklad](./configuration-example.md) konfigurace dashboardu.
## Konfigurace dashboardu
### Zdroje dat
Primárně se používá pro nastavení zdroje dat pro widgety. Může být neomezený počet zdrojů dat.
Příklad nastavení zdroje dat
"Dashboard:datasource:elastic": {
"type": "elasticsearch", // Zdroj dat
"datetimeField": "@timestamp", // Typ datumu a času
"specification": "es-pattern*" // Indexový vzor nebo vzor URL
},
...
}
Pokročilé nastavení Elasticsearch
{
...
"Dashboard:datasource:elastic": {
// Základní nastavení
"type": "elasticsearch",
"datetimeField": "@timestamp",
"specification": "es-pattern*",
// Pokročilé nastavení
"sortData": "asc", // Řadit data "asc" nebo "desc" během zpracování (volitelné)
// Pokročilé nastavení elasticsearch
"size": 100, // Max velikost hitů v odpovědi (výchozí 20) (volitelné)
"aggregateResult": true, // Pouze pro grafy (ne PieChart) - požádá ES o agregované hodnoty (volitelné)
"groupBy": "user.id", // Pouze pro grafy - požádá 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 zdroje dat
},
...
} ```
Propojení zdroje dat s widgetem¶
Pokud není zdroj dat přiřazen k widgetu, žádná data nejsou zpracovávána pro zobrazení ve widgetu. ``` { ...
"Dashboard:widget:somewidget": {
"datasource": "Dashboard:datasource:elastic",
...
},
...
} ```
Výzvy¶
Sekce nastavení výzev poskytuje další možnosti pro nastavení výzvy dashboardu nebo změnu jejích výchozích hodnot. Použití v konfiguračním souboru: ``` { ...
"Dashboard:prompts": {
"dateRangePicker": true, // Povolit výzvu pro výběr datového rozsahu
"filterInput": true, // Povolit výzvu pro vstup filtru
"submitButton": true // Povolit výzvu pro tlačítko odeslat
},
...
} ```
Nastavení vlastních časových období¶
Někdy je žádoucí nastavit vlastní časové období pro zobrazení dat, protože data leží např. mimo výchozí období nastavené pro dashboard. Výchozí období je now-1H, které by mělo hledat data v rozmezí now a 1 hodina zpět. Například to může být nastaveno 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 na **počáteční období** (počáteční) a na **koncové období** (konečné).
Možnosti nastavení pro obě období jsou:
- now-`n`s
- now-`n`m
- now-`n`H
- now-`n`d
- now-`n`w
- now-`n`M
- now-`n`Y
- now
- now+`n`s
- now+`n`m
- now+`n`H
- now+`n`d
- now+`n`w
- now+`n`M
- now+`n`Y
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
Ostatní hodnoty budou ignorovány.
Je možné například nastavit pouze jedno období, jak je uvedeno v tomto příkladu, druhé období zůstane výchozí:
{
...
"Dashobard:prompts": {
...
"dateRangePicker": true,
"dateRangePicker:datetimeStart": "now-1H",
...
},
...
}
Další příklad nastavení časového rozsahu, kde jsou data zobrazena 15 hodin zpět a hledána 10 minut do budoucnosti:
{
...
"Dashboard:prompts": {
...
"dateRangePicker": true,
"dateRangePicker:datetimeStart": "now-15H",
"dateRangePicker:datetimeEnd": "now+10m",
...
},
...
} ```
Systém mřížky (volitelné nastavení)¶
Mřížka může být nakonfigurována unikátně pro různé dashboardy. Tímto způsobem může být konfigurace mřížky implementována do konfigurace dashboardu, jak je vidět v příkladu. Pokud není v konfiguraci specifikováno, použije se výchozí nastavení mřížky. ``` { ...
"Dashboard:grid": {
"preventCollision": false // Pokud je nastaveno na true, zabrání kolizím widgetů na mřížce
},
"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¶
Dashboard může být omezen na přístup pouze pro konkrétní nájemce. To znamená, že uživatelé bez konkrétního nájemce nemohou přistupovat k dashboardu. To je výhodné např. když chce administrátor omezit přístup k dashboardům se citlivými daty na konkrétní skupiny uživatelů.
Pro zakázání konfigurace pro konkrétního nájemce se musí uživatel navigovat 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 poté přidán do souboru .disabled.yaml s dotčenými nájemci v uzlu Knihovny.
Zlidnění¶
Komponenta používaná pro převod číselných hodnot do lidsky čitelné formy.
Zobrazuje hodnoty v lidsky čitelné formě, jako:
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 hodnot a více hodnot.
Aby byla komponenta Humanize povolena ve widgetu, musí být nastavena
- "humanize": true v konfiguraci widgetu
- "base": <number> definuje základ pro převod (přepočet), volitelný parametr, výchozí je 1000
- "decimals": <number> definuje, kolik desetinných míst by měla zobrazit, volitelný parametr
- "displayUnits": true zobrazuje prefix (tj. µ, m, k, M, G) jednotek, volitelný parametr, výchozí false
- "units": <string> zobrazuje uživatelsky definovaný 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",
...
},
...
} ```
Nápověda (volitelné nastavení)¶
Nápověda může být přidána pro jakýkoli widget kromě widgetu Nástroje. Tímto způsobem bude nápověda vložena jako tooltip vedle názvu widgetu.
Po přidání nápovědy se v záhlaví widgetu objeví ikona s informacemi (vedle názvu). Po najetí myší na ikonu se zobrazí vložená nápověda.
Nápověda může být pouze typu string.
Příklad, jak přidat nápovědu:
```
{
...
"Dashboard:widget:somewidget": {
...
"hint": "Nějaká nápověda",
...
},
...
} ```
Rozložení widgetu¶
Velikost a pozice widgetu na mřížce mohou být definovány pro každý widget v konfiguraci. Pokud není nastaveno, má widget své předdefinované hodnoty pro rozložení a pozici a bude vykreslen odpovídajícím způsobem.
Widgety mohou být přesouvány a měněny v rámci mřížky prostřednictvím Nastavení dashboardu >> Upravit. To je k dispozici pro uživatele s prostředkem dashboards:admin.
Příklad základních nastavení rozložení:
```
{
...
"Dashboard:widget:somewidget": {
...
// Základní nastavení
"layout:w": 4, // Šířka widgetu v jednotkách mřížky
"layout:h": 2, // Výška widgetu v jednotkách mřížky
"layout:x": 0, // Pozice widgetu na ose x v jednotkách mřížky
"layout:y": 0, // Pozice widgetu na ose y v jednotkách mřížky
// Vlastní nastavení (volitelné)
"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ých nastavení rozložení:
{
...
"Dashboard:widget:somewidget": {
...
// Pokročilé nastavení (volitelné)
"layout:isBounded": false, // Pokud je true a je možné táhnout, položka bude přesunuta pouze v rámci mřížky
"layout:resizeHandles": ?Array<'s' | 'w' | 'e' | 'n' | 'sw' | 'nw' | 'se' | 'ne'> = ['se'], // Ve výchozím nastavení je úchytka zobrazena pouze v pravém dolním rohu
"layout:static": ?boolean = false, // Opravit widget na statické pozici (nelze přesunout ani změnit velikost). Pokud je true, rovno `isDraggable: false, isResizable: false`
"layout:isDraggable": ?boolean = true, // Pokud je false, nebude možné widget táhnout. Přepíše `static`
"layout:isResizable": ?boolean = true, // Pokud je false, nebude možné widget měnit velikost. Přepíše `static`
...
},
...
} ```
Widgety¶
Příklad widgetu v konfiguračním souboru: ``` { ...
"Dashboard:widget:somewidget": {
"datasource": "Dashboard:datasource:elastic",
"type": "Value",
"field": "some.variable",
"title": "Nějaký název",
"layout:w": 2,
"layout:h": 1,
"layout:x": 0,
"layout:y": 1
},
...
} ```
Widget s hodnotou¶
Běžně se používá k zobrazení jedné hodnoty, i když může také zobrazit datetime a filtrovaný widget hodnoty najednou. ``` { ...
"Dashboard:widget:valuewidget": {
// Základní nastavení
"datasource": "Dashboard:datasource:elastic",
"type": "Value", // Typ widgetu
"field": "some.variable", // Pole (hodnota) zobrazené ve widgetu
"title": "Nějaký název", // Název widgetu
// Pokročilé nastavení (volitelné)
"onlyDateResult": true, // Zobrazit pouze datum s časem
"units": "GB", // Jednotky hodnoty pole
"displayWidgetDateTime": true, // Zobrazit datum a čas ve widgetu pod hodnotou
"hint": "Nějaká nápověda", // Zobrazit nápovědu widgetu
// Zlidnění hodnoty (může být použito k transformaci hodnot do čitelné formy pro člověka, např. bajty na GB) (volitelné)
"humanize": true, // Povolit komponentu Humanize
"base": 1024, // Základ pro přepočet hodnoty pro komponentu Humanize
"decimals": 3, // Zaokrouhlit hodnotu na n číslic v komponentě Humanize
"displayUnits": true, // Zobrazit prefix jednotky velikosti (např. k, M, T,...) v komponentě Humanize
// Nastavení rozložení
"layout:w": 2,
"layout:h": 1,
"layout:x": 0,
"layout