@kwirthmagnify/kwirth-sender-tee 0.1.2 → 0.1.4

package/README.md

@@ -0,0 +1,79 @@
+# Tee Sender
+
+Sender intermedio que recibe un mensaje y lo reenvía en paralelo a múltiples senders de destino configurados, sin hacer ningún envío final él mismo. Funciona como el comando Unix `tee`: lo que entra, sale por todos los canales a la vez.
+
+## Cuándo usarlo
+
+- Enviar la misma alerta simultáneamente a consola y a fichero.
+- Construir pipelines de notificación: un único punto de entrada que abanica hacia varios destinos.
+- Encadenar tees para topologías más complejas (un tee apuntando a otro tee).
+
+## Configuración
+
+Cada config tiene un campo `targets`: lista de pares `(senderId, configName)` que identifican el sender y la config de destino.
+
+| Campo     | Tipo                              | Requerido | Descripción                                    |
+|-----------|-----------------------------------|-----------|------------------------------------------------|
+| `name`    | `string`                          | Sí        | Nombre de esta config                          |
+| `targets` | `Array<{senderId, configName}>`   | Sí        | Lista de senders de destino                    |
+
+### Estructura de un target
+
+```json
+{
+  "senderId":   "console",       // id del sender destino (ej: "console", "file", "tee")
+  "configName": "mi-console"     // nombre de la config ya registrada en ese sender
+}
+```
+
+## Ejemplos
+
+### Fan-out a consola y fichero
+
+Prerequisito: tener configurados un `ConsoleSender` con config `"alerts-console"` y un `FileSender` con config `"alerts-file"`.
+
+```json
+{
+  "name": "alerts-tee",
+  "targets": [
+    { "senderId": "console", "configName": "alerts-console" },
+    { "senderId": "file",    "configName": "alerts-file" }
+  ]
+}
+```
+
+Invocar:
+```ts
+senderAccess.send('tee', 'alerts-tee', {
+  level: 'error',
+  subject: 'Pod crash',
+  body: 'nginx-7d4f crashed in namespace prod'
+})
+```
+
+El mensaje llega al mismo tiempo a stdout y al fichero de log.
+
+### Cadena de tees
+
+```
+tee-main
+  ├─ tee-ops    →  console + file
+  └─ tee-biz    →  kafka + slack
+```
+
+Config `tee-main`:
+```json
+{
+  "name": "tee-main",
+  "targets": [
+    { "senderId": "tee", "configName": "tee-ops" },
+    { "senderId": "tee", "configName": "tee-biz" }
+  ]
+}
+```
+
+## Comportamiento
+
+- Los envíos a todos los targets se hacen en **paralelo** (`Promise.all`).
+- Si un target falla, el error se propaga (el `Promise.all` rechaza). Los targets completados antes del fallo **no se revierten**.
+- El `ISenderAccess` se inyecta en `startSender()` — el tee no funciona antes de que el sistema lo inicialice.

package/build.mjs

@@ -0,0 +1,61 @@
+import esbuild from 'esbuild'
+import fs from 'fs'
+import path from 'path'
+
+const kwirthGlobalsPlugin = {
+    name: 'kwirth-globals',
+    setup(build) {
+        const globals = {
+            'react': 'window.__kwirth__.React',
+            '@mui/material': 'window.__kwirth__.MUI.material',
+            '@mui/icons-material': 'window.__kwirth__.MUI.icons',
+            '@kwirthmagnify/kwirth-common': 'window.__kwirth__.kwirthCommon',
+        }
+        for (const pkg of Object.keys(globals)) {
+            build.onResolve({ filter: new RegExp(`^${pkg.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')}$`) }, () => ({ path: pkg, namespace: 'kwirth-globals' }))
+        }
+        build.onLoad({ filter: /.*/, namespace: 'kwirth-globals' }, (args) => ({
+            contents: `module.exports = ${globals[args.path]}`, loader: 'js',
+        }))
+    },
+}
+
+fs.mkdirSync('dist', { recursive: true })
+
+await esbuild.build({
+    entryPoints: ['src/back/index.ts'],
+    bundle: true,
+    format: 'cjs',
+    platform: 'node',
+    target: 'node20',
+    outfile: 'dist/back.js',
+    loader: { '.ts': 'ts' },
+    minify: false,
+})
+console.log('Built dist/back.js')
+
+await esbuild.build({
+    entryPoints: ['src/front/index.tsx'],
+    bundle: true,
+    format: 'iife',
+    outfile: 'dist/front.js',
+    plugins: [kwirthGlobalsPlugin],
+    loader: { '.tsx': 'tsx', '.ts': 'ts' },
+    jsx: 'transform',
+    jsxFactory: 'React.createElement',
+    jsxFragment: 'React.Fragment',
+    target: 'es2020',
+    minify: false,
+})
+console.log('Built dist/front.js')
+
+const meta = JSON.parse(fs.readFileSync('package.json', 'utf-8'))
+const distMeta = {
+    id: meta.id,
+    name: meta.name,
+    displayName: meta.displayName,
+    version: meta.version,
+    description: meta.description,
+}
+fs.writeFileSync(path.join('dist', 'package.json'), JSON.stringify(distMeta, null, 2))
+console.log('Wrote dist/package.json')

package/{front.js → dist/front.js}

@@ -80,7 +80,10 @@
     const loadConfigs = async () => {
       try {
         const res = await fetch(`${backendUrl}/senders/tee/configs`, authGet(accessString));
-        if (res.ok) setConfigs(await res.json());
+        if (res.ok) {
+          const data = await res.json();
+          setConfigs(Array.isArray(data) ? data : data.configs ?? []);
+        }
       } catch {
       }
     };

package/dist/package.json

@@ -0,0 +1,7 @@
+{
+  "id": "tee",
+  "name": "@kwirthmagnify/kwirth-sender-tee",
+  "displayName": "Tee Sender",
+  "version": "0.1.4",
+  "description": "Tee sender plugin for Kwirth — fans out an incoming message to multiple downstream senders simultaneously, acting as an intermediate pipeline node"
+}

package/package.json

@@ -1,7 +1,25 @@
-{
-  "id": "tee",
-  "name": "@kwirthmagnify/kwirth-sender-tee",
-  "displayName": "Tee Sender",
-  "version": "0.1.2",
-  "description": "Tee sender plugin for Kwirth — fans out an incoming message to multiple downstream senders simultaneously, acting as an intermediate pipeline node"
-}
+{
+  "id": "tee",
+  "name": "@kwirthmagnify/kwirth-sender-tee",
+  "publisher": "@kwirthmagnify",
+  "version": "0.1.4",
+  "displayName": "Tee Sender",
+  "description": "Tee sender plugin for Kwirth — fans out an incoming message to multiple downstream senders simultaneously, acting as an intermediate pipeline node",
+  "type": "module",
+  "scripts": {
+    "build": "node build.mjs",
+    "watch": "node watch.mjs"
+  },
+  "dependencies": {
+    "@kwirthmagnify/kwirth-common-back": "^0.5.11"
+  },
+  "devDependencies": {
+    "@mui/icons-material": "^7.1.2",
+    "@mui/material": "^7.1.2",
+    "@types/node": "^20.12.13",
+    "@types/react": "^19.2.16",
+    "@types/react-dom": "^19.2.3",
+    "esbuild": "^0.27.2",
+    "typescript": "^5.4.0"
+  }
+}

package/src/back/index.ts

@@ -0,0 +1,68 @@
+import { ISender, ISenderAccess, ISenderConfig, ISenderFieldDef, ISenderMessage } from '@kwirthmagnify/kwirth-common-back'
+
+// ─── Config ────────────────────────────────────────────────────────────────────
+
+export interface ITeeSenderTarget {
+    senderId: string
+    configName: string
+}
+
+export interface ITeeSenderConfig extends ISenderConfig {
+    name: string
+    targets: ITeeSenderTarget[]  // list of downstream (senderId, configName) pairs to fan out to
+}
+
+// ─── Sender ────────────────────────────────────────────────────────────────────
+
+export class TeeSender implements ISender {
+    readonly id = 'tee'
+    private configs = new Map<string, ITeeSenderConfig>()
+    private senderAccess: ISenderAccess | undefined
+
+    addConfig(config: ISenderConfig): void {
+        const tc = config as ITeeSenderConfig
+        if (!Array.isArray(tc.targets)) tc.targets = []
+        this.configs.set(tc.name, tc)
+    }
+
+    removeConfig(name: string): void {
+        this.configs.delete(name)
+    }
+
+    hasConfig(name: string): boolean {
+        return this.configs.has(name)
+    }
+
+    getConfigNames(): string[] {
+        return Array.from(this.configs.keys())
+    }
+
+    async send(configName: string, message: ISenderMessage): Promise<void> {
+        const config = this.configs.get(configName)
+        if (!config) throw new Error(`TeeSender: config '${configName}' not found`)
+        if (!this.senderAccess) throw new Error(`TeeSender: senderAccess not initialized`)
+
+        await Promise.all(
+            config.targets.map(target =>
+                this.senderAccess!.send(target.senderId, target.configName, message)
+            )
+        )
+    }
+
+    getConfigSchema(): ISenderFieldDef[] {
+        return [
+            { name: 'name', label: 'Name', required: true },
+            { name: 'targets', label: 'Targets (JSON)', type: 'json' },
+        ]
+    }
+
+    async startSender(senders: ISenderAccess): Promise<void> {
+        this.senderAccess = senders
+    }
+
+    async stopSender(): Promise<void> {
+        this.senderAccess = undefined
+    }
+}
+
+export default TeeSender

package/src/front/TeeSenderDialog.tsx

@@ -0,0 +1,211 @@
+import React, { useEffect, useState } from 'react'
+import {
+    Box, Button, CircularProgress, Dialog, DialogActions, DialogContent, DialogTitle,
+    Divider, FormControl, IconButton, InputLabel, List, ListItem, ListItemButton,
+    ListItemText, MenuItem, Select, Stack, TextField, Tooltip, Typography
+} from '@mui/material'
+import { Add, ContentCopy, Delete } from '@mui/icons-material'
+
+function authGet(token: string): RequestInit {
+    return { headers: { Authorization: token ? `Bearer ${token}` : '', 'X-Kwirth-App': 'true' } }
+}
+function authPost(token: string, body: string): RequestInit {
+    return { method: 'POST', body, headers: { Authorization: token ? `Bearer ${token}` : '', 'X-Kwirth-App': 'true', 'Content-Type': 'application/json' } }
+}
+function authDelete(token: string): RequestInit {
+    return { method: 'DELETE', headers: { Authorization: token ? `Bearer ${token}` : '', 'X-Kwirth-App': 'true' } }
+}
+
+interface IProps { onClose: () => void; backendUrl: string; accessString: string }
+interface IConfig { name: string; description?: string; targets: { senderId: string; configName: string }[] }
+interface ISender { id: string; displayName?: string; configNames: string[] }
+
+const TeeSenderDialog: React.FC<IProps> = ({ onClose, backendUrl, accessString }) => {
+    const [configs, setConfigs] = useState<IConfig[]>([])
+    const [senders, setSenders] = useState<ISender[]>([])
+    const [selectedName, setSelectedName] = useState<string | undefined>()
+    const [originalName, setOriginalName] = useState<string | undefined>()
+    const [editName, setEditName] = useState('')
+    const [editDescription, setEditDescription] = useState('')
+    const [targets, setTargets] = useState<{ senderId: string; configName: string }[]>([])
+    const [newSenderId, setNewSenderId] = useState('')
+    const [newConfigName, setNewConfigName] = useState('')
+    const [saving, setSaving] = useState(false)
+    const [deleting, setDeleting] = useState<string | undefined>()
+    const [error, setError] = useState<string | undefined>()
+
+    useEffect(() => { loadConfigs(); loadSenders() }, [])
+
+    const loadConfigs = async () => {
+        try {
+            const res = await fetch(`${backendUrl}/senders/tee/configs`, authGet(accessString))
+            if (res.ok) { const data = await res.json(); setConfigs(Array.isArray(data) ? data : (data.configs ?? [])) }
+        } catch {}
+    }
+
+    const loadSenders = async () => {
+        try {
+            const res = await fetch(`${backendUrl}/senders`, authGet(accessString))
+            if (res.ok) setSenders((await res.json() as ISender[]).filter(s => s.id !== 'tee'))
+        } catch {}
+    }
+
+    const selectConfig = (cfg: IConfig) => {
+        setSelectedName(cfg.name); setOriginalName(cfg.name)
+        setEditName(cfg.name); setEditDescription(cfg.description ?? '')
+        setTargets([...cfg.targets])
+        setNewSenderId(''); setNewConfigName(''); setError(undefined)
+    }
+
+    const newConfig = () => {
+        setSelectedName(undefined); setOriginalName(undefined)
+        setEditName(''); setEditDescription(''); setTargets([])
+        setNewSenderId(''); setNewConfigName(''); setError(undefined)
+    }
+
+    const cloneConfig = () => {
+        if (!selectedName) return
+        const base = configs.find(c => c.name === selectedName)
+        if (!base) return
+        setSelectedName(undefined); setOriginalName(undefined)
+        setEditName(`${base.name} (copy)`); setEditDescription(base.description ?? '')
+        setTargets([...base.targets])
+        setNewSenderId(''); setNewConfigName(''); setError(undefined)
+    }
+
+    const addTarget = () => {
+        if (!newSenderId || !newConfigName) return
+        if (targets.some(t => t.senderId === newSenderId && t.configName === newConfigName)) return
+        setTargets(prev => [...prev, { senderId: newSenderId, configName: newConfigName }])
+        setNewSenderId(''); setNewConfigName('')
+    }
+
+    const save = async () => {
+        const trimmed = editName.trim()
+        if (!trimmed) return
+        setSaving(true); setError(undefined)
+        try {
+            const res = await fetch(`${backendUrl}/senders/tee/configs`, authPost(accessString, JSON.stringify({ name: trimmed, ...(editDescription.trim() ? { description: editDescription.trim() } : {}), targets })))
+            if (!res.ok) throw new Error((await res.json()).error ?? `HTTP ${res.status}`)
+            if (originalName && originalName !== trimmed) {
+                await fetch(`${backendUrl}/senders/tee/configs/${encodeURIComponent(originalName)}`, authDelete(accessString))
+            }
+            setSelectedName(trimmed); setOriginalName(trimmed)
+            await loadConfigs()
+        } catch (err) { setError(`Save failed: ${err}`) }
+        finally { setSaving(false) }
+    }
+
+    const deleteConfig = async (name: string) => {
+        setDeleting(name)
+        try {
+            const res = await fetch(`${backendUrl}/senders/tee/configs/${encodeURIComponent(name)}`, authDelete(accessString))
+            if (!res.ok) throw new Error(`HTTP ${res.status}`)
+            if (selectedName === name) newConfig()
+            await loadConfigs()
+        } catch (err) { setError(`Delete failed: ${err}`) }
+        finally { setDeleting(undefined) }
+    }
+
+    const newSenderConfigs = senders.find(s => s.id === newSenderId)?.configNames ?? []
+
+    return (
+        <Dialog open={true} maxWidth={false} sx={{ '& .MuiDialog-paper': { width: '700px', height: '520px' } }}>
+            <DialogTitle>Configure: Tee Sender</DialogTitle>
+            <DialogContent sx={{ display: 'flex', gap: 2, p: 2, pt: 2, overflow: 'hidden', height: '100%' }}>
+
+                {/* Left — config list */}
+                <Box sx={{ width: 190, display: 'flex', flexDirection: 'column', gap: 1, flexShrink: 0 }}>
+                    <Typography variant='caption' color='text.secondary' fontWeight='bold'>Configs</Typography>
+                    <Box sx={{ flex: 1, border: 1, borderColor: 'divider', borderRadius: 1, overflowY: 'auto' }}>
+                        <List dense disablePadding>
+                            {configs.map(cfg => (
+                                <ListItem key={cfg.name} disablePadding secondaryAction={
+                                    <IconButton size='small' color='error' disabled={deleting === cfg.name} onClick={() => deleteConfig(cfg.name)}>
+                                        {deleting === cfg.name ? <CircularProgress size={12} /> : <Delete sx={{ fontSize: 14 }} />}
+                                    </IconButton>
+                                }>
+                                    <ListItemButton selected={selectedName === cfg.name} onClick={() => selectConfig(cfg)} dense sx={{ pr: 4 }}>
+                                        <ListItemText
+                                            primary={cfg.name}
+                                            secondary={`${cfg.targets.length} target${cfg.targets.length !== 1 ? 's' : ''}`}
+                                            primaryTypographyProps={{ variant: 'body2', noWrap: true }}
+                                            secondaryTypographyProps={{ variant: 'caption' }} />
+                                    </ListItemButton>
+                                </ListItem>
+                            ))}
+                        </List>
+                    </Box>
+                    <Stack direction='row' spacing={0.5}>
+                        <Button size='small' startIcon={<Add />} onClick={newConfig} sx={{ flex: 1 }}>New</Button>
+                        <Button size='small' startIcon={<ContentCopy />} onClick={cloneConfig} disabled={!selectedName} sx={{ flex: 1 }}>Clone</Button>
+                    </Stack>
+                </Box>
+
+                <Divider orientation='vertical' flexItem />
+
+                {/* Right — editor */}
+                <Box sx={{ flex: 1, display: 'flex', flexDirection: 'column', gap: 1.5, minWidth: 0, pt: 1 }}>
+                    <Typography variant='caption' color='text.secondary' fontWeight='bold'>
+                        {selectedName ? `Editing: ${selectedName}` : 'New config'}
+                    </Typography>
+                    <TextField size='small' label='Name *' value={editName}
+                        onChange={e => setEditName(e.target.value)} fullWidth />
+                    <TextField size='small' label='Description' value={editDescription}
+                        onChange={e => setEditDescription(e.target.value)} fullWidth multiline maxRows={2} />
+
+                    <Typography variant='caption' color='text.secondary' fontWeight='bold'>Targets</Typography>
+
+                    <Box sx={{ flex: 1, border: 1, borderColor: 'divider', borderRadius: 1, overflowY: 'auto' }}>
+                        {targets.length === 0
+                            ? <Typography variant='caption' color='text.disabled' sx={{ p: 1, display: 'block' }}>No targets yet.</Typography>
+                            : targets.map((t, i) => (
+                                <Box key={i} sx={{ display: 'flex', alignItems: 'center', gap: 1, px: 1, py: 0.5, borderBottom: 1, borderColor: 'divider' }}>
+                                    <Typography variant='body2' sx={{ flex: 1, minWidth: 0, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{t.senderId}</Typography>
+                                    <Typography variant='body2' color='text.secondary' sx={{ flex: 1, minWidth: 0, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{t.configName}</Typography>
+                                    <IconButton size='small' color='error' onClick={() => setTargets(prev => prev.filter((_, idx) => idx !== i))}>
+                                        <Delete sx={{ fontSize: 14 }} />
+                                    </IconButton>
+                                </Box>
+                            ))
+                        }
+                    </Box>
+
+                    <Stack direction='row' spacing={1} alignItems='center'>
+                        <FormControl size='small' sx={{ flex: 1 }}>
+                            <InputLabel>Sender</InputLabel>
+                            <Select label='Sender' value={newSenderId} onChange={e => { setNewSenderId(e.target.value); setNewConfigName('') }}>
+                                {senders.map(s => <MenuItem key={s.id} value={s.id}>{s.displayName || s.id}</MenuItem>)}
+                            </Select>
+                        </FormControl>
+                        <FormControl size='small' sx={{ flex: 1 }} disabled={!newSenderId}>
+                            <InputLabel>Config</InputLabel>
+                            <Select label='Config' value={newConfigName} onChange={e => setNewConfigName(e.target.value)}>
+                                {newSenderConfigs.map(c => <MenuItem key={c} value={c}>{c}</MenuItem>)}
+                            </Select>
+                        </FormControl>
+                        <Tooltip title='Add target'>
+                            <span>
+                                <IconButton size='small' color='primary' disabled={!newSenderId || !newConfigName} onClick={addTarget}>
+                                    <Add />
+                                </IconButton>
+                            </span>
+                        </Tooltip>
+                    </Stack>
+
+                    <Stack direction='row' justifyContent='flex-end' alignItems='center' spacing={1}>
+                        {error && <Typography variant='caption' color='error' sx={{ flex: 1 }}>{error}</Typography>}
+                        <Button size='small' variant='contained' disabled={saving || !editName.trim()} onClick={save}>
+                            {saving ? <CircularProgress size={14} /> : selectedName ? 'Update' : 'Add'}
+                        </Button>
+                    </Stack>
+                </Box>
+            </DialogContent>
+            <DialogActions>
+                <Button size='small' onClick={onClose}>Close</Button>
+            </DialogActions>
+        </Dialog>
+    )
+}
+
+export default TeeSenderDialog

package/src/front/index.tsx

@@ -0,0 +1,6 @@
+import TeeSenderDialog from './TeeSenderDialog'
+
+declare global { interface Window { __kwirth_senders__: Record<string, any> } }
+
+window.__kwirth_senders__ = window.__kwirth_senders__ ?? {}
+window.__kwirth_senders__['tee'] = TeeSenderDialog

package/tsconfig.json

@@ -0,0 +1,13 @@
+{
+    "compilerOptions": {
+        "target": "ES2020",
+        "module": "ESNext",
+        "moduleResolution": "bundler",
+        "strict": true,
+        "lib": ["ES2020"],
+        "types": ["node"],
+        "skipLibCheck": true,
+        "esModuleInterop": true
+    },
+    "include": ["src"]
+}

package/watch.mjs

@@ -0,0 +1,68 @@
+import esbuild from 'esbuild'
+import fs from 'fs'
+import path from 'path'
+
+const kwirthGlobalsPlugin = {
+    name: 'kwirth-globals',
+    setup(build) {
+        const globals = {
+            'react': 'window.__kwirth__.React',
+            '@mui/material': 'window.__kwirth__.MUI.material',
+            '@mui/icons-material': 'window.__kwirth__.MUI.icons',
+            '@kwirthmagnify/kwirth-common': 'window.__kwirth__.kwirthCommon',
+        }
+        for (const pkg of Object.keys(globals)) {
+            build.onResolve({ filter: new RegExp(`^${pkg.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')}$`) }, () => ({ path: pkg, namespace: 'kwirth-globals' }))
+        }
+        build.onLoad({ filter: /.*/, namespace: 'kwirth-globals' }, (args) => ({
+            contents: `module.exports = ${globals[args.path]}`, loader: 'js',
+        }))
+    },
+}
+
+const notifyPlugin = (label) => ({
+    name: `notify-${label}`,
+    setup(build) {
+        build.onEnd(result => {
+            const t = new Date().toLocaleTimeString()
+            if (result.errors.length) {
+                console.error(`[${t}] ${label} FAILED: ${result.errors.map(e => e.text).join('; ')}`)
+            } else {
+                console.log(`[${t}] ${label} OK`)
+            }
+        })
+    },
+})
+
+fs.mkdirSync('dist', { recursive: true })
+const meta = JSON.parse(fs.readFileSync('package.json', 'utf-8'))
+fs.writeFileSync(path.join('dist', 'package.json'), JSON.stringify({ id: meta.id, name: meta.name, displayName: meta.displayName, version: meta.version, description: meta.description }, null, 2))
+
+const backCtx = await esbuild.context({
+    entryPoints: ['src/back/index.ts'],
+    bundle: true,
+    format: 'cjs',
+    platform: 'node',
+    target: 'node20',
+    outfile: 'dist/back.js',
+    loader: { '.ts': 'ts' },
+    minify: false,
+    plugins: [notifyPlugin('back')],
+})
+
+const frontCtx = await esbuild.context({
+    entryPoints: ['src/front/index.tsx'],
+    bundle: true,
+    format: 'iife',
+    outfile: 'dist/front.js',
+    plugins: [kwirthGlobalsPlugin, notifyPlugin('front')],
+    loader: { '.tsx': 'tsx', '.ts': 'ts' },
+    jsx: 'transform',
+    jsxFactory: 'React.createElement',
+    jsxFragment: 'React.Fragment',
+    target: 'es2020',
+    minify: false,
+})
+
+await Promise.all([backCtx.watch(), frontCtx.watch()])
+console.log('[watch] Watching src/ — back.js and front.js rebuild on every change.')