fix(alerts+diag): quickToggle SMTP-Datenverlust + Diagnostics Viewer-Gate

Alerts: quickToggle schickte den Channel durch buildPayload(), das SMTP-
Settings aus einem flachen ChannelFormValues rekonstruiert. Bei Email-
Channels wurde damit jedes aktiv/inaktiv-Toggle zum SMTP-Config-Wipe,
weil die Flat-Fields (smtp_host, smtp_port, from, ...) undefined waren.
Fix: raw Channel-Objekt mit geändertem active-Flag direkt PUT-ten.

testFire-Button fehlte disabled={isViewer} + Tooltip.

Diagnostics: kein isViewer-Check, Viewer sahen funktionierende Run-
Buttons und bekamen 403 ohne Erklärung. Fix: isViewer aus Auth-Store,
disabled-Prop in ToolCard, alle 5 Cards + Enter-Handler gegattet.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

management-ui/src/pages/Alerts/index.tsx

@@ -147,7 +147,7 @@ export default function AlertsPage() {
   })
   const quickToggle = useMutation({
     mutationFn: async ({ id, row, checked }: { id: number; row: Channel; checked: boolean }) => {
-      await apiClient.put(`/alerts/channels/${id}`, buildPayload({ ...row, active: checked } as ChannelFormValues))
+      await apiClient.put(`/alerts/channels/${id}`, { ...row, active: checked })
     },
     onSuccess: () => { void qc.invalidateQueries({ queryKey: ['alerts', 'channels'] }) },
     onError: (e: Error) => message.error(e.message),
@@ -284,11 +284,14 @@ export default function AlertsPage() {
         subtitle={t('alerts.intro')}
         extra={
           <Space>
-            <Button icon={<ExperimentOutlined />}
-              onClick={() => testFire.mutate()}
-              loading={testFire.isPending}>
-              {t('alerts.test')}
-            </Button>
+            <Tooltip title={isViewer ? t('auth.viewerBadge') : undefined}>
+              <Button icon={<ExperimentOutlined />}
+                onClick={() => testFire.mutate()}
+                loading={testFire.isPending}
+                disabled={isViewer}>
+                {t('alerts.test')}
+              </Button>
+            </Tooltip>
           </Space>
         }
       />

management-ui/src/pages/Diagnostics/index.tsx

@@ -11,6 +11,7 @@ import { useTranslation } from 'react-i18next'
 
 import apiClient, { isEnvelope } from '../../api/client'
 import PageHeader from '../../components/PageHeader'
+import { useAuthStore } from '../../stores/auth'
 
 const { Text } = Typography
 
@@ -30,7 +31,7 @@ interface DiagResult {
 // - Eigene Input-Form
 // - "Ausführen"-Button → POST /diagnostics/<tool>
 // - Output-Pane mit monospace-Output, Status-Tag (OK/Error), Dauer
-function ToolCard({ icon, title, intro, children, result, loading, run }: {
+function ToolCard({ icon, title, intro, children, result, loading, run, disabled }: {
   icon: React.ReactNode
   title: string
   intro: string
@@ -38,6 +39,7 @@ function ToolCard({ icon, title, intro, children, result, loading, run }: {
   result: DiagResult | null
   loading: boolean
   run: () => void
+  disabled?: boolean
 }) {
   const { t } = useTranslation()
   return (
@@ -45,10 +47,12 @@ function ToolCard({ icon, title, intro, children, result, loading, run }: {
       size="small"
       title={<Space>{icon}<Text strong>{title}</Text></Space>}
       extra={
-        <Button type="primary" size="small" onClick={run} loading={loading}
-          icon={<RadarChartOutlined />}>
-          {t('diag.run')}
-        </Button>
+        <Tooltip title={disabled ? t('auth.viewerBadge') : undefined}>
+          <Button type="primary" size="small" onClick={run} loading={loading}
+            disabled={disabled} icon={<RadarChartOutlined />}>
+            {t('diag.run')}
+          </Button>
+        </Tooltip>
       }
     >
       <Text type="secondary" style={{ fontSize: 12 }}>{intro}</Text>
@@ -84,6 +88,7 @@ function ToolCard({ icon, title, intro, children, result, loading, run }: {
 
 export default function DiagnosticsPage() {
   const { t } = useTranslation()
+  const isViewer = useAuthStore((s) => s.user?.role) === 'viewer'
 
   const [pingTarget, setPingTarget] = useState('1.1.1.1')
   const [traceTarget, setTraceTarget] = useState('1.1.1.1')
@@ -145,11 +150,12 @@ export default function DiagnosticsPage() {
             result={pingRes}
             loading={ping.isPending}
             run={() => ping.mutate()}
+            disabled={isViewer}
           >
             <Input placeholder="1.1.1.1 oder example.com"
               value={pingTarget}
               onChange={(e) => setPingTarget(e.target.value)}
-              onPressEnter={() => ping.mutate()} />
+              onPressEnter={() => { if (!isViewer) ping.mutate() }} />
           </ToolCard>
         </Col>
         <Col xs={24} lg={12}>
@@ -160,11 +166,12 @@ export default function DiagnosticsPage() {
             result={traceRes}
             loading={trace.isPending}
             run={() => trace.mutate()}
+            disabled={isViewer}
           >
             <Input placeholder="1.1.1.1 oder example.com"
               value={traceTarget}
               onChange={(e) => setTraceTarget(e.target.value)}
-              onPressEnter={() => trace.mutate()} />
+              onPressEnter={() => { if (!isViewer) trace.mutate() }} />
           </ToolCard>
         </Col>
         <Col xs={24} lg={12}>
@@ -175,12 +182,13 @@ export default function DiagnosticsPage() {
             result={digRes}
             loading={dig.isPending}
             run={() => dig.mutate()}
+            disabled={isViewer}
           >
             <Space.Compact style={{ width: '100%' }}>
               <Input placeholder="netcell-it.de"
                 value={digName}
                 onChange={(e) => setDigName(e.target.value)}
-                onPressEnter={() => dig.mutate()}
+                onPressEnter={() => { if (!isViewer) dig.mutate() }}
                 style={{ flex: 1 }} />
               <Select
                 value={digType}
@@ -199,11 +207,12 @@ export default function DiagnosticsPage() {
             result={curlRes}
             loading={curl.isPending}
             run={() => curl.mutate()}
+            disabled={isViewer}
           >
             <Input placeholder="https://example.com"
               value={curlUrl}
               onChange={(e) => setCurlUrl(e.target.value)}
-              onPressEnter={() => curl.mutate()} />
+              onPressEnter={() => { if (!isViewer) curl.mutate() }} />
           </ToolCard>
         </Col>
         <Col xs={24}>
@@ -214,12 +223,13 @@ export default function DiagnosticsPage() {
             result={tcpRes}
             loading={tcp.isPending}
             run={() => tcp.mutate()}
+            disabled={isViewer}
           >
             <Space.Compact style={{ width: '100%' }}>
               <Input placeholder="10.0.5.14"
                 value={tcpHost}
                 onChange={(e) => setTcpHost(e.target.value)}
-                onPressEnter={() => tcp.mutate()}
+                onPressEnter={() => { if (!isViewer) tcp.mutate() }}
                 style={{ flex: 1 }} />
               <InputNumber
                 min={1} max={65535}