Files
csbot-prototype/documentation/05-dashboard-a-builder.md
T
JiriUhlir 7b045a9f20 Nahrazeni sablony kompletnim webem a klientskym portalem
Web a portal Automia v jednom containeru. Express obsluhuje API
i zbuildovanou React aplikaci z dist/public.

Obsah:
- verejny web: homepage, sluzby, o nas, kontakt, 404
- prihlaseni pres JWT, demo ucty
- portal: prehled s grafem, tickety, incidenty, automatizace, konektory
- builder automatizaci: strom akci, vetveni podminkou
- katalog 25 konektoru v 8 kategoriich
- webhook s registrovanou adresou, token generuje server
- zivy dashboard pres SSE vcetne simulace provozu
- Swagger UI na /docs a OpenAPI na /openapi.json

Soulad s AGENTS.md:
- ROOT_PATH z prostredi, prefix proxy nikde nehardcodovan
- mount na koren i na prefix, funguje s handle_path i bez nej
- base tag a window.__BASE_PATH__ vkladane do index.html za behu
- OpenAPI servers obsahuje prefix, Try it out vola spravnou adresu
- povinne /health a /docs, port 3000, naslouchani na 0.0.0.0
- secrets jen z environment variables, nikdy v logu

Dokumentace ve slozce documentation/.
2026-07-31 17:00:37 +02:00

4.6 KiB

05 - Dashboard, builder automatizaci a simulace

Stranky portalu

/dashboard                  prehled: dlazdice, graf za 14 dni, posledni tickety a incidenty
/dashboard/automatizace     seznam a zalozeni nove
/dashboard/automatizace/:id builder: strom akci
/dashboard/konektory        katalog sluzeb, jejich spousteču a akci
/dashboard/tickety          tabulka ticketu
/dashboard/incidenty        prehled incidentu
/dashboard/nastaveni        udaje o uctu

V postrannim menu je pod Nastavenim tlacitko Simulace.

Zivy dashboard

Portal drzi jedno SSE spojeni pro celou aplikaci. Zajistuje ho EventStreamProvider v web/src/components/dashboard/.

  • Stav spojeni ukazuje LiveIndicator v horni liste. Uzivatel musi poznat, ze data nejsou ziva.
  • Prichozi udalosti ukazuje EventToasts jako bubliny vpravo dole.
  • Data se obnovuji sama. useApiQuery ma volitelny refetchOn se seznamem typu udalosti, po kterych se ma dotaz zopakovat. Vice udalosti tesne po sobe se slouci do jednoho nacteni.

Pri vypadku se stream znovu pripojuje s exponencialne rostoucim odstupem az do 15 sekund, aby pri vypadku serveru neubijel provoz.

Simulace provozu

Modalni okno se otevre tlacitkem Simulace. Umoznuje:

  • zalozit ticket s vlastnim predmetem, zadavatelem a prioritou,
  • vyvolat incident s vlastnim popisem, sluzbou a zavaznosti,
  • vyresit prvni nevyrizeny ticket nebo bezici incident,
  • spustit automatizaci uspesne nebo s chybou.

Kazda akce opravdu meni data na serveru, takze se projevi i v seznamech a v souhrnu, ne jen v bublinach.

Strom akci

Automatizace se sklada z spoustece a kroku. Krok je bud akce nad konektorem, nebo podminka se dvema vetvemi - proto je to strom, ne seznam.

interface AutomationFlow {
  trigger: {
    connectorId: string;
    operationId: string;
    fields: TriggerField[];   // vstupni parametry
    webhookToken?: string;    // generuje vyhradne server
  } | null;
  steps: FlowStep[];
}

type FlowStep =
  | { id: string; kind: 'action'; connectorId: string; operationId: string }
  | { id: string; kind: 'condition'; fieldId: string; operator: string;
      value?: string; yes: FlowStep[]; no: FlowStep[] };

Podminka odkazuje na field.id, ne na nazev. Prejmenovani parametru proto existujici podminky nerozbije.

Misto vlozeni urcuje FlowPath v web/src/lib/flow.ts: prazdne pole je hlavni sekvence, [{ stepId, branch }] je vetev konkretni podminky.

Webhook a vstupni parametry

U spoustece typu webhook vygeneruje server pri ulozeni adresu POST <verejna-adresa>/webhook/<token>. U spoustece se deklaruji vstupni parametry: nazev, typ (text, cislo, ano-ne, datum) a povinnost.

Podminky pak porovnavaji hodnotu parametru, napriklad score >= 15. Nabidka operatoru se ridi typem, na cislo nejde pustit "obsahuje". Tabulka operatoru je na obou stranach - src/data/conditions.ts a web/src/lib/flow.ts. Server je autorita, kopie na klientovi existuje jen proto, aby UI nenabidlo nesmysl. Pri zmene upravit obe.

Dokud spoustec nema zadny parametr, nejde pridat podminka - nebylo by podle ceho se rozhodovat. Dialog to vysvetli.

Validace

Rozlisuji se dve veci:

Chyby vraci 400 a neulozi se: neexistujici konektor nebo operace, operace spatneho druhu, podminka na neexistujici parametr, operator nesedici na typ, duplicitni nebo nevalidni nazev parametru.

Nedodelky se ulozi, jen brani zapnuti: chybi spoustec, zadny krok, webhook bez adresy, podminka bez hodnoty. Vraci se v poli issues a builder je vypise. Rozdelana prace se nikdy nezahazuje.

Pridani konektoru

  1. Pridat zaznam do connectors v src/data/connectors.ts vcetne triggers a actions.
  2. Pokud pouziva novou ikonu, doplnit klic do web/src/lib/connectorIcons.ts. Musi existovat v lucide-react.
  3. Pokud patri do nove kategorie, doplnit ji do connectorCategories a do typu ConnectorCategory na obou stranach.

Builder i katalog ji vezmou automaticky.

Co chybi

Chybi Poznamka
Nastaveni poli akci fields u akci se zobrazuji jen jako napoveda
Predavani dat do akci chybi syntaxe odkazu, navrh je {{trigger.customer}}
Kombinovane podminky jedna podminka je jedno porovnani, AND a OR jen vnorenim
Beh automatizaci ulozeny strom se nevykonava
Historie behu a logy prazdne, chybi runtime
Drag and drop presouvani je zatim tlacitky nahoru a dolu