@hed-hog/core 0.0.387 → 0.0.393

package/hedhog/frontend/app/incidents/page.tsx.ejs

@@ -0,0 +1,400 @@
+'use client';
+
+import {
+  EmptyState,
+  Page,
+  PageHeader,
+  PaginationFooter,
+  SearchBar,
+  type SearchBarControl,
+} from '@/components/entity-list';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import { Card, CardContent } from '@/components/ui/card';
+import { KpiCardsGrid, type KpiCardItem } from '@/components/ui/kpi-cards-grid';
+import { ResizableSheetContent } from '@/components/ui/resizable-sheet-content';
+import { ScrollArea } from '@/components/ui/scroll-area';
+import { Sheet, SheetDescription, SheetHeader, SheetTitle } from '@/components/ui/sheet';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@/components/ui/table';
+import { useDebounce } from '@/hooks/use-debounce';
+import { usePersistedPageSize } from '@/hooks/use-persisted-page-size';
+import { formatDateTime } from '@/lib/format-date';
+import { useApp, useQuery } from '@hed-hog/next-app-provider';
+import { AlertTriangle, CheckCircle2, Flame, Repeat } from 'lucide-react';
+import { useTranslations } from 'next-intl';
+import { useMemo, useState } from 'react';
+
+type Severity = 'warning' | 'error' | 'critical';
+type StatusFilter = 'open' | 'resolved' | 'all';
+
+type Incident = {
+  id: number;
+  source: string;
+  code: string;
+  severity: Severity;
+  message: string;
+  context: Record<string, unknown> | null;
+  occurrences: number;
+  first_seen_at: string;
+  last_seen_at: string;
+  resolved_at: string | null;
+};
+
+type PaginationResult<T> = {
+  data: T[];
+  total: number;
+  page: number;
+  pageSize: number;
+};
+
+type Summary = {
+  open: number;
+  resolved: number;
+  bySeverity: Array<{ severity: Severity; incidents: number; occurrences: number }>;
+  bySource: Array<{ source: string; incidents: number }>;
+};
+
+const SEVERITY_CLASSES: Record<Severity, string> = {
+  warning: 'bg-amber-100 text-amber-800 dark:bg-amber-900 dark:text-amber-200',
+  error: 'bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200',
+  critical: 'bg-rose-200 text-rose-900 dark:bg-rose-950 dark:text-rose-200',
+};
+
+const DEFAULT_PAGE_SIZES = [6, 12, 24, 48, 96] as const;
+
+export default function IncidentsPage() {
+  const t = useTranslations('core.Incidents');
+  const { request, getSettingValue } = useApp();
+
+  const [searchTerm, setSearchTerm] = useState('');
+  const [severity, setSeverity] = useState<Severity | 'all'>('all');
+  const [source, setSource] = useState('all');
+  const [status, setStatus] = useState<StatusFilter>('open');
+  const [page, setPage] = useState(1);
+  const [pageSize, setPageSize] = usePersistedPageSize({
+    storageKey: 'core-incidents',
+    defaultValue: 12,
+    allowedValues: [...DEFAULT_PAGE_SIZES],
+  });
+  const [selected, setSelected] = useState<Incident | null>(null);
+  const [isDetailOpen, setIsDetailOpen] = useState(false);
+
+  const debouncedSearch = useDebounce(searchTerm);
+
+  const { data: summary, refetch: refetchSummary } = useQuery<Summary>({
+    queryKey: ['incident-summary'],
+    queryFn: async () => {
+      const response = await request({ url: '/incident/summary', method: 'GET' });
+      return response.data as Summary;
+    },
+    refetchInterval: 30000,
+  });
+
+  const {
+    data: result,
+    isLoading,
+    refetch,
+  } = useQuery<PaginationResult<Incident>>({
+    queryKey: ['incident', debouncedSearch, severity, source, status, page, pageSize],
+    queryFn: async () => {
+      const response = await request({
+        url: '/incident',
+        params: {
+          search: debouncedSearch || undefined,
+          severity: severity !== 'all' ? severity : undefined,
+          source: source !== 'all' ? source : undefined,
+          status,
+          page,
+          pageSize,
+        },
+      });
+      return response.data as PaginationResult<Incident>;
+    },
+    refetchInterval: 30000,
+  });
+
+  const { data: incidents = [], total = 0 } = result ?? {};
+
+  const criticalCount = useMemo(
+    () => summary?.bySeverity.find((s) => s.severity === 'critical')?.incidents ?? 0,
+    [summary],
+  );
+
+  const totalOccurrences = useMemo(
+    () => (summary?.bySeverity ?? []).reduce((acc, s) => acc + s.occurrences, 0),
+    [summary],
+  );
+
+  const kpiCards = useMemo<KpiCardItem[]>(
+    () => [
+      {
+        key: 'open',
+        title: t('kpiOpen'),
+        value: summary?.open ?? 0,
+        icon: AlertTriangle,
+        layout: 'compact',
+        accentClassName: 'from-rose-500 via-red-400 to-orange-500',
+        iconContainerClassName:
+          'bg-rose-500/15 text-rose-700 ring-1 ring-rose-500/20 dark:text-rose-300',
+      },
+      {
+        key: 'critical',
+        title: t('kpiCritical'),
+        value: criticalCount,
+        icon: Flame,
+        layout: 'compact',
+        accentClassName: 'from-amber-500 via-orange-400 to-rose-500',
+        iconContainerClassName:
+          'bg-amber-500/15 text-amber-700 ring-1 ring-amber-500/20 dark:text-amber-300',
+      },
+      {
+        key: 'occurrences',
+        title: t('kpiOccurrences'),
+        value: totalOccurrences,
+        icon: Repeat,
+        layout: 'compact',
+        accentClassName: 'from-violet-500 via-fuchsia-400 to-pink-500',
+        iconContainerClassName:
+          'bg-violet-500/15 text-violet-700 ring-1 ring-violet-500/20 dark:text-violet-300',
+      },
+      {
+        key: 'resolved',
+        title: t('kpiResolved'),
+        value: summary?.resolved ?? 0,
+        icon: CheckCircle2,
+        layout: 'compact',
+        accentClassName: 'from-emerald-500 via-teal-400 to-cyan-500',
+        iconContainerClassName:
+          'bg-emerald-500/15 text-emerald-700 ring-1 ring-emerald-500/20 dark:text-emerald-300',
+      },
+    ],
+    [summary, criticalCount, totalOccurrences, t],
+  );
+
+  const searchControls = useMemo<SearchBarControl[]>(
+    () => [
+      {
+        id: 'status',
+        type: 'select',
+        value: status,
+        onChange: (value) => {
+          setStatus(value as StatusFilter);
+          setPage(1);
+        },
+        placeholder: t('filterByStatus'),
+        options: [
+          { value: 'open', label: t('statusOpen') },
+          { value: 'resolved', label: t('statusResolved') },
+          { value: 'all', label: t('statusAll') },
+        ],
+      },
+      {
+        id: 'severity',
+        type: 'select',
+        value: severity,
+        onChange: (value) => {
+          setSeverity(value as Severity | 'all');
+          setPage(1);
+        },
+        placeholder: t('filterBySeverity'),
+        options: [
+          { value: 'all', label: t('severityAll') },
+          { value: 'critical', label: t('severityCritical') },
+          { value: 'error', label: t('severityError') },
+          { value: 'warning', label: t('severityWarning') },
+        ],
+      },
+      {
+        id: 'source',
+        type: 'select',
+        value: source,
+        onChange: (value) => {
+          setSource(value);
+          setPage(1);
+        },
+        placeholder: t('filterBySource'),
+        options: [
+          { value: 'all', label: t('sourceAll') },
+          ...(summary?.bySource ?? []).map((item) => ({
+            value: item.source,
+            label: `${item.source} (${item.incidents})`,
+          })),
+        ],
+      },
+    ],
+    [status, severity, source, summary, t],
+  );
+
+  const changeStatus = async (incident: Incident, action: 'resolve' | 'reopen') => {
+    await request({ url: `/incident/${incident.id}/${action}`, method: 'PATCH' });
+    setIsDetailOpen(false);
+    await Promise.all([refetch(), refetchSummary()]);
+  };
+
+  const openDetail = (incident: Incident) => {
+    setSelected(incident);
+    setIsDetailOpen(true);
+  };
+
+  return (
+    <Page>
+      <PageHeader
+        breadcrumbs={[{ label: t('breadcrumbHome'), href: '/' }, { label: t('breadcrumbTitle') }]}
+        title={t('title')}
+        description={t('description')}
+      />
+
+      <KpiCardsGrid items={kpiCards} className="mb-1" />
+
+      <SearchBar
+        searchQuery={searchTerm}
+        onSearchChange={(v) => {
+          setSearchTerm(v);
+          setPage(1);
+        }}
+        onSearch={() => setPage(1)}
+        placeholder={t('searchPlaceholder')}
+        controls={searchControls}
+      />
+
+      {!isLoading && incidents.length === 0 ? (
+        <EmptyState
+          icon={<CheckCircle2 />}
+          title={t('emptyTitle')}
+          description={t('emptyDescription')}
+        />
+      ) : (
+        <Card>
+          <CardContent className="p-0">
+            <Table>
+              <TableHeader>
+                <TableRow>
+                  <TableHead>{t('columnSeverity')}</TableHead>
+                  <TableHead>{t('columnSource')}</TableHead>
+                  <TableHead>{t('columnMessage')}</TableHead>
+                  <TableHead className="text-right">{t('columnOccurrences')}</TableHead>
+                  <TableHead>{t('columnLastSeen')}</TableHead>
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {incidents.map((incident) => (
+                  <TableRow
+                    key={incident.id}
+                    className="cursor-pointer"
+                    onClick={() => openDetail(incident)}
+                  >
+                    <TableCell>
+                      <span
+                        className={`inline-flex items-center rounded px-1.5 py-0.5 text-xs font-semibold ${SEVERITY_CLASSES[incident.severity]}`}
+                      >
+                        {t(`severity_${incident.severity}`)}
+                      </span>
+                    </TableCell>
+                    <TableCell>
+                      <div className="font-medium">{incident.source}</div>
+                      <div className="text-muted-foreground text-xs">{incident.code}</div>
+                    </TableCell>
+                    <TableCell className="max-w-md truncate">{incident.message}</TableCell>
+                    <TableCell className="text-right font-semibold">
+                      {incident.occurrences}
+                    </TableCell>
+                    <TableCell className="whitespace-nowrap">
+                      {formatDateTime(incident.last_seen_at, getSettingValue)}
+                      {incident.resolved_at ? (
+                        <Badge variant="outline" className="ml-2">
+                          {t('statusResolved')}
+                        </Badge>
+                      ) : null}
+                    </TableCell>
+                  </TableRow>
+                ))}
+              </TableBody>
+            </Table>
+          </CardContent>
+        </Card>
+      )}
+
+      <PaginationFooter
+        currentPage={page}
+        pageSize={pageSize}
+        totalItems={total}
+        onPageChange={setPage}
+        onPageSizeChange={(s) => {
+          setPageSize(s);
+          setPage(1);
+        }}
+        pageSizeOptions={DEFAULT_PAGE_SIZES}
+      />
+
+      {selected && (
+        <Sheet open={isDetailOpen} onOpenChange={setIsDetailOpen}>
+          <ResizableSheetContent
+            sheetId="core-incident-detail-sheet"
+            defaultWidth={640}
+            minWidth={460}
+            maxWidth={980}
+          >
+            <SheetHeader>
+              <SheetTitle>{selected.code}</SheetTitle>
+              <SheetDescription>{selected.source}</SheetDescription>
+            </SheetHeader>
+
+            <ScrollArea className="mt-4 h-[calc(100vh-220px)] pr-4">
+              <div className="space-y-4">
+                <div>
+                  <div className="text-muted-foreground text-xs">{t('columnMessage')}</div>
+                  <p className="text-sm">{selected.message}</p>
+                </div>
+
+                <div className="grid grid-cols-2 gap-4 text-sm">
+                  <div>
+                    <div className="text-muted-foreground text-xs">{t('columnOccurrences')}</div>
+                    {selected.occurrences}
+                  </div>
+                  <div>
+                    <div className="text-muted-foreground text-xs">{t('columnSeverity')}</div>
+                    {t(`severity_${selected.severity}`)}
+                  </div>
+                  <div>
+                    <div className="text-muted-foreground text-xs">{t('firstSeen')}</div>
+                    {formatDateTime(selected.first_seen_at, getSettingValue)}
+                  </div>
+                  <div>
+                    <div className="text-muted-foreground text-xs">{t('columnLastSeen')}</div>
+                    {formatDateTime(selected.last_seen_at, getSettingValue)}
+                  </div>
+                </div>
+
+                {selected.context ? (
+                  <div>
+                    <div className="text-muted-foreground text-xs">{t('context')}</div>
+                    <pre className="bg-muted mt-1 overflow-x-auto rounded p-3 text-xs">
+                      {JSON.stringify(selected.context, null, 2)}
+                    </pre>
+                  </div>
+                ) : null}
+              </div>
+            </ScrollArea>
+
+            <div className="mt-4 flex justify-end">
+              {selected.resolved_at ? (
+                <Button variant="outline" onClick={() => changeStatus(selected, 'reopen')}>
+                  {t('reopen')}
+                </Button>
+              ) : (
+                <Button onClick={() => changeStatus(selected, 'resolve')}>{t('resolve')}</Button>
+              )}
+            </div>
+          </ResizableSheetContent>
+        </Sheet>
+      )}
+    </Page>
+  );
+}

package/hedhog/frontend/app/integration/profiles/page.tsx.ejs

@@ -53,7 +53,13 @@ import { TabsOverflowList } from '@/components/ui/tabs-overflow-list';
 import { usePagination } from '@/hooks/use-pagination';
 import { formatDate } from '@/lib/format-date';
 import { useApp } from '@hed-hog/next-app-provider';
-import { Pencil, PlugZap, Trash2 } from 'lucide-react';
+import {
+  CircleAlert,
+  CircleCheck,
+  Pencil,
+  PlugZap,
+  Trash2,
+} from 'lucide-react';
 import { useTranslations } from 'next-intl';
 import { useSearchParams } from 'next/navigation';
 import { useEffect, useRef, useState } from 'react';
@@ -226,6 +232,22 @@ function TypeTab({
     return '—';
   };
 
+  /**
+   * Resultado do último "Testar conexão", gravado no config pelo backend. Os campos
+   * não são segredo, então sobrevivem ao mascaramento da listagem.
+   */
+  const getValidation = (
+    profile: IntegrationProfile
+  ): { state: 'ok' | 'error' | 'never'; at: string; error: string } => {
+    const config = (profile.config ?? {}) as Record<string, unknown>;
+    const status = String(config.last_validation_status ?? '');
+    return {
+      state: status === 'ok' ? 'ok' : status === 'error' ? 'error' : 'never',
+      at: String(config.last_validated_at ?? ''),
+      error: String(config.last_error ?? ''),
+    };
+  };
+
   return (
     <div className="space-y-4">
       <SearchBar
@@ -263,6 +285,7 @@ function TypeTab({
                     ? 'Configuração'
                     : 'Configuration'}
                 </TableHead>
+                <TableHead>{t('tableValidation')}</TableHead>
                 <TableHead>{t('tableStatus')}</TableHead>
                 <TableHead className="text-right">{t('tableUses')}</TableHead>
                 <TableHead>{t('tableUpdated')}</TableHead>
@@ -273,89 +296,138 @@ function TypeTab({
             </TableHeader>
             <TableBody>
               {isLoading ? (
-                <TableBodySkeleton rows={pageSize} columns={9} />
+                <TableBodySkeleton rows={pageSize} columns={10} />
               ) : (
                 profiles.map((profile) => (
-                <TableRow
-                  key={profile.id}
-                  className="cursor-pointer"
-                  onDoubleClick={() => onEdit(profile)}
-                >
-                  <TableCell>
-                    <Checkbox
-                      checked={selectedProfileIds.has(profile.id)}
-                      onCheckedChange={(checked) =>
-                        onToggleProfileSelection(profile.id, checked === true)
-                      }
-                      onClick={(event) => event.stopPropagation()}
-                      aria-label={t('selectProfile')}
-                    />
-                  </TableCell>
-                  <TableCell className="font-medium">{profile.name}</TableCell>
-                  <TableCell className="font-mono text-sm text-muted-foreground">
-                    {profile.slug}
-                  </TableCell>
-                  <TableCell>
-                    <Badge variant="secondary" className="gap-1.5">
-                      <IntegrationLogo
-                        provider={getProviderSlug(profile)}
-                        size={14}
-                        decorative
+                  <TableRow
+                    key={profile.id}
+                    className="cursor-pointer"
+                    onDoubleClick={() => onEdit(profile)}
+                  >
+                    <TableCell>
+                      <Checkbox
+                        checked={selectedProfileIds.has(profile.id)}
+                        onCheckedChange={(checked) =>
+                          onToggleProfileSelection(profile.id, checked === true)
+                        }
+                        onClick={(event) => event.stopPropagation()}
+                        aria-label={t('selectProfile')}
                       />
-                      {getProviderName(profile)}
-                    </Badge>
-                  </TableCell>
-                  <TableCell>
-                    <Badge variant="outline">
-                      {getConfigurationLabel(profile)}
-                    </Badge>
-                  </TableCell>
-                  <TableCell>
-                    <Badge variant={profile.is_active ? 'default' : 'outline'}>
-                      {profile.is_active
-                        ? t('statusActive')
-                        : t('statusInactive')}
-                    </Badge>
-                  </TableCell>
-                  <TableCell className="text-right">
-                    {profile.uses_count > 0 ? (
-                      <Badge variant="secondary">{profile.uses_count}</Badge>
-                    ) : (
-                      <span className="text-muted-foreground">—</span>
-                    )}
-                  </TableCell>
-                  <TableCell className="text-muted-foreground">
-                    {formatDate(
-                      profile.updated_at,
-                      getSettingValue,
-                      currentLocaleCode
-                    )}
-                  </TableCell>
-                  <TableCell className="text-right">
-                    <div className="flex justify-end gap-2">
-                      <Button
-                        variant="ghost"
-                        size="icon"
-                        onClick={(e) => {
-                          e.stopPropagation();
-                          onEdit(profile);
-                        }}
-                      >
-                        <Pencil className="h-4 w-4" />
-                      </Button>
-                      <Button
-                        variant="ghost"
-                        size="icon"
-                        onClick={(e) => {
-                          e.stopPropagation();
-                          onDelete(profile.id);
-                        }}
+                    </TableCell>
+                    <TableCell className="font-medium">
+                      {profile.name}
+                    </TableCell>
+                    <TableCell className="font-mono text-sm text-muted-foreground">
+                      {profile.slug}
+                    </TableCell>
+                    <TableCell>
+                      <Badge variant="secondary" className="gap-1.5">
+                        <IntegrationLogo
+                          provider={getProviderSlug(profile)}
+                          size={14}
+                          decorative
+                        />
+                        {getProviderName(profile)}
+                      </Badge>
+                    </TableCell>
+                    <TableCell>
+                      <Badge variant="outline">
+                        {getConfigurationLabel(profile)}
+                      </Badge>
+                    </TableCell>
+                    <TableCell>
+                      {(() => {
+                        const validation = getValidation(profile);
+                        if (validation.state === 'never') {
+                          return (
+                            <span
+                              className="text-muted-foreground"
+                              title={t('validationNever')}
+                            >
+                              —
+                            </span>
+                          );
+                        }
+                        return (
+                          <Badge
+                            variant={
+                              validation.state === 'ok'
+                                ? 'secondary'
+                                : 'destructive'
+                            }
+                            className="gap-1.5"
+                            title={
+                              validation.state === 'error'
+                                ? validation.error
+                                : t('validationTooltipAt', {
+                                    date: formatDate(
+                                      validation.at,
+                                      getSettingValue,
+                                      currentLocaleCode
+                                    ),
+                                  })
+                            }
+                          >
+                            {validation.state === 'ok' ? (
+                              <CircleCheck className="h-3 w-3" />
+                            ) : (
+                              <CircleAlert className="h-3 w-3" />
+                            )}
+                            {validation.state === 'ok'
+                              ? t('validationOk')
+                              : t('validationError')}
+                          </Badge>
+                        );
+                      })()}
+                    </TableCell>
+                    <TableCell>
+                      <Badge
+                        variant={profile.is_active ? 'default' : 'outline'}
                       >
-                        <Trash2 className="h-4 w-4 text-destructive" />
-                      </Button>
-                    </div>
-                  </TableCell>
-                </TableRow>
+                        {profile.is_active
+                          ? t('statusActive')
+                          : t('statusInactive')}
+                      </Badge>
+                    </TableCell>
+                    <TableCell className="text-right">
+                      {profile.uses_count > 0 ? (
+                        <Badge variant="secondary">{profile.uses_count}</Badge>
+                      ) : (
+                        <span className="text-muted-foreground">—</span>
+                      )}
+                    </TableCell>
+                    <TableCell className="text-muted-foreground">
+                      {formatDate(
+                        profile.updated_at,
+                        getSettingValue,
+                        currentLocaleCode
+                      )}
+                    </TableCell>
+                    <TableCell className="text-right">
+                      <div className="flex justify-end gap-2">
+                        <Button
+                          variant="ghost"
+                          size="icon"
+                          onClick={(e) => {
+                            e.stopPropagation();
+                            onEdit(profile);
+                          }}
+                        >
+                          <Pencil className="h-4 w-4" />
+                        </Button>
+                        <Button
+                          variant="ghost"
+                          size="icon"
+                          onClick={(e) => {
+                            e.stopPropagation();
+                            onDelete(profile.id);
+                          }}
+                        >
+                          <Trash2 className="h-4 w-4 text-destructive" />
+                        </Button>
+                      </div>
+                    </TableCell>
+                  </TableRow>
                 ))
               )}
             </TableBody>
@@ -399,9 +471,7 @@ export default function IntegrationProfilesPage() {
   const [isSheetOpen, setIsSheetOpen] = useState(false);
   const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false);
   const [profileToDelete, setProfileToDelete] = useState<number | null>(null);
-  const [editingProfileId, setEditingProfileId] = useState<number | null>(
-    null
-  );
+  const [editingProfileId, setEditingProfileId] = useState<number | null>(null);
   const [selectedProfileIds, setSelectedProfileIds] = useState<Set<number>>(
     new Set()
   );
@@ -658,7 +728,6 @@ export default function IntegrationProfilesPage() {
     }
   };
 
-
   return (
     <Page>
       <PageHeader