@flamingo-stack/openframe-frontend-core 0.0.711 → 0.0.712

package/src/components/features/logs/log-drawer.tsx

@@ -0,0 +1,138 @@
+'use client';
+
+import type { ReactNode } from 'react';
+import {
+  AppLayoutDrawer,
+  AppLayoutDrawerBody,
+  AppLayoutDrawerContent,
+  AppLayoutDrawerDescription,
+  AppLayoutDrawerHeader,
+  AppLayoutDrawerTitle,
+} from '../../navigation/app-layout-drawer';
+import { Tag, type TagProps } from '../../ui/tag';
+import { TruncateText } from '../../ui/truncate-text';
+
+/** What the drawer shows for a field the record does not have. */
+const EMPTY_MARK = '—';
+
+function EmptyMark() {
+  return <span className="text-ods-text-secondary">{EMPTY_MARK}</span>;
+}
+
+export interface LogDrawerInfoField {
+  label: string;
+  value: string | ReactNode;
+}
+
+export interface LogDrawerProps {
+  isOpen: boolean;
+  onClose: () => void;
+  description: ReactNode;
+  statusTag?: {
+    label: string;
+    variant?: TagProps['variant'];
+  };
+  timestamp?: string;
+  infoFields?: LogDrawerInfoField[];
+  /** The device the log belongs to, pinned to the bottom. The host renders the card. */
+  deviceCard?: ReactNode;
+  /** Drawn under the info card, for example a Copy action. */
+  children?: ReactNode;
+  /**
+   * The drawer sits in a box of its own beside the content instead of over it:
+   * no backdrop. The box is the element `AppLayoutDrawerContainerContext`
+   * provides (a positioned element the host renders next to the table).
+   */
+  docked?: boolean;
+}
+
+export function LogDrawer({
+  isOpen,
+  onClose,
+  description,
+  statusTag,
+  timestamp,
+  infoFields,
+  deviceCard,
+  children,
+  docked = false,
+}: LogDrawerProps) {
+  return (
+    <AppLayoutDrawer
+      open={isOpen}
+      onOpenChange={open => {
+        if (!open) onClose();
+      }}
+    >
+      {/* md:w matches the mobileBreakpoint: below it the panel is forced
+          full-bleed, so a fixed width there would detach it from the right edge */}
+      <AppLayoutDrawerContent
+        side="right"
+        className="md:w-[400px]"
+        overlayClassName={docked ? 'hidden' : undefined}
+        dismissOnInteractOutside={docked ? false : undefined}
+      >
+        {/* Header: title, status and time only. The log text itself goes in the
+            body. The header is not a scroll region and the panel clips, so a long
+            log up here grew past the panel and squeezed the body to nothing: the
+            wheel had nothing to scroll and the end of the log was unreachable. */}
+        <AppLayoutDrawerHeader>
+          <AppLayoutDrawerTitle>Log Details</AppLayoutDrawerTitle>
+
+          {(statusTag || timestamp) && (
+            <div className="flex items-center gap-2">
+              {statusTag && <Tag label={statusTag.label} variant={statusTag.variant} />}
+              {timestamp && <span className="text-ods-text-secondary text-h6">{timestamp}</span>}
+            </div>
+          )}
+        </AppLayoutDrawerHeader>
+
+        {/* Body */}
+        <AppLayoutDrawerBody>
+          <div className="min-h-0 flex-1 space-y-4 overflow-y-auto">
+            {/* The log text: still the dialog's accessible description, rendered
+                inside the scroll region. `asChild` makes the slot a div, so the
+                content may hold block elements (the loading skeleton). */}
+            {description && (
+              <AppLayoutDrawerDescription asChild className="leading-6 text-ods-text-primary text-h4">
+                <div>{description}</div>
+              </AppLayoutDrawerDescription>
+            )}
+            {/* Info card: vertical fields, the value on top and its label below */}
+            {infoFields && infoFields.length > 0 && (
+              <div className="grid grid-cols-1 gap-3 rounded-[6px] border border-ods-border bg-ods-card p-4">
+                {infoFields.map(field => (
+                  <div key={typeof field.label === 'string' ? field.label : ''} className="grid grid-cols-1 gap-0.5">
+                    {typeof field.value === 'string' ? (
+                      field.value === '' || field.value === EMPTY_MARK ? (
+                        <span className="text-h4">
+                          <EmptyMark />
+                        </span>
+                      ) : (
+                        <TruncateText>{field.value}</TruncateText>
+                      )
+                    ) : (
+                      <span className="truncate text-ods-text-primary text-h4">
+                        {field.value === null || field.value === undefined || field.value === false ? (
+                          <EmptyMark />
+                        ) : (
+                          field.value
+                        )}
+                      </span>
+                    )}
+                    <span className="truncate text-ods-text-secondary text-h6">{field.label}</span>
+                  </div>
+                ))}
+              </div>
+            )}
+            {children}
+          </div>
+
+          {/* The device card, pinned to the bottom: outside the scroll region, so
+              it never scrolls away with a long log. */}
+          {deviceCard && <div className="mt-auto">{deviceCard}</div>}
+        </AppLayoutDrawerBody>
+      </AppLayoutDrawerContent>
+    </AppLayoutDrawer>
+  );
+}

package/src/components/features/logs/log-source-labels.ts

@@ -0,0 +1,25 @@
+/**
+ * What the Source column shows for a log row.
+ *
+ * System events (Fleet audit: "User logged in", "Created saved query") arrive
+ * with the literal string "null" in `hostname`, `organizationName` and
+ * `organizationId`, not with null. The ingest side is being fixed, but log rows
+ * are immutable, so the ones already written keep the literal; it is mapped
+ * here, once, for every table that renders the column.
+ */
+const NULL_LITERAL = 'null';
+
+/** The Source column's label for a system event, which has no device. */
+export const SYSTEM_SOURCE_LABEL = 'System';
+
+export interface LogSourceLabels {
+  deviceName: string;
+  organization: string | undefined;
+}
+
+export function logSourceLabels(device: { name: string; organization?: string }): LogSourceLabels {
+  return {
+    deviceName: device.name === NULL_LITERAL ? SYSTEM_SOURCE_LABEL : device.name,
+    organization: device.organization === NULL_LITERAL ? undefined : device.organization,
+  };
+}

package/src/components/features/logs/logs-page-view.tsx

@@ -0,0 +1,100 @@
+'use client';
+
+import { type ReactNode, useMemo } from 'react';
+import { CheckIcon, Copy02Icon, Filter02Icon, Refresh02HrIcon, SearchIcon } from '../../icons-v2-generated';
+import { PageLayout } from '../../layout/page-layout';
+import { Button } from '../../ui/button';
+import { Input } from '../../ui/input';
+
+export interface LogsPageViewProps {
+  /** The table (and whatever boundary the host loads it under). */
+  children: ReactNode;
+  /** The header's Refresh action. */
+  onRefresh?: () => void;
+  /** Render the page header (title and Refresh). Default true; a section with its own heading passes false. */
+  showHeader?: boolean;
+  className?: string;
+  /** The search field's text. */
+  search: string;
+  onSearchChange: (value: string) => void;
+  /** Hide the search toolbar: there is nothing to search yet. */
+  hideSearch?: boolean;
+  /** The narrow layout's filter button. */
+  onOpenFilters?: () => void;
+}
+
+/**
+ * The Logs page chrome: the header with its Refresh action and the search
+ * toolbar, around the table. The toolbar sits outside the table so the field
+ * keeps focus while the host loads another result.
+ */
+export function LogsPageView({
+  children,
+  onRefresh,
+  showHeader,
+  className,
+  search,
+  onSearchChange,
+  hideSearch = false,
+  onOpenFilters,
+}: LogsPageViewProps) {
+  const actions = useMemo(
+    () => [
+      {
+        label: 'Refresh',
+        variant: 'outline' as const,
+        icon: <Refresh02HrIcon size={24} className="text-ods-text-secondary" />,
+        onClick: onRefresh,
+      },
+    ],
+    [onRefresh],
+  );
+
+  return (
+    <PageLayout title="Logs" actions={actions} showHeader={showHeader} className={className}>
+      {!hideSearch && (
+        <div className="sticky top-0 z-20 -my-[var(--spacing-system-l)] flex items-center gap-[var(--spacing-system-m)] bg-ods-bg py-[var(--spacing-system-l)]">
+          <Input
+            placeholder="Search for Logs"
+            value={search}
+            onChange={e => onSearchChange(e.target.value)}
+            className="flex-1"
+            startAdornment={<SearchIcon className="h-4 w-4 content-md:h-6 content-md:w-6" />}
+          />
+          <Button
+            variant="outline"
+            size="icon"
+            className="content-md:hidden"
+            onClick={onOpenFilters}
+            aria-label="Open filters"
+            leftIcon={<Filter02Icon className="text-ods-text-primary" />}
+          />
+        </div>
+      )}
+
+      {children}
+    </PageLayout>
+  );
+}
+
+export interface LogCopyIconButtonProps {
+  onClick?: () => void;
+  /** The copy just succeeded: the icon is a check. */
+  copied?: boolean;
+  disabled?: boolean;
+}
+
+/** A row's "Copy log details" icon button. The host fetches the log and copies it. */
+export function LogCopyIconButton({ onClick, copied = false, disabled = false }: LogCopyIconButtonProps) {
+  return (
+    <Button
+      onClick={onClick}
+      disabled={disabled}
+      variant="outline"
+      size="icon"
+      leftIcon={copied ? <CheckIcon className="h-5 w-5 text-ods-success" /> : <Copy02Icon className="h-5 w-5" />}
+      aria-label="Copy log details"
+      className="bg-ods-card"
+    />
+  );
+}

package/src/components/features/logs/logs-table-columns.ts

@@ -0,0 +1,16 @@
+/**
+ * Column widths of the logs table. Data-only, read by the live table and by
+ * `LogsTableSkeleton`, so the header row cannot drift from the rows it stands in
+ * for and a width is changed in one place.
+ */
+export const LOG_COLUMN_WIDTHS = {
+  logId: 'w-[200px]',
+  status: 'w-[120px]',
+  // Sized for the widest badge, "Google Workspace": the 24px mark, its gap and the
+  // text-h4 label, inside the cell's own padding, on one line.
+  tool: 'w-[240px]',
+  source: 'w-[120px]',
+  description: 'flex-1',
+  /** One icon button. */
+  action: 'w-12 shrink-0 flex-none',
+} as const;