mirror of
https://github.com/supabase/supabase.git
synced 2026-10-16 22:59:11 +03:00
Alaister YoungandKevin Grüneberg
70da0f1d1d
* chore: cleanup packages - Avoid circular imports - Export API-types as types - pg-format without depending on Node internal Buffer (not browser-compatible) - Avoid importing from barrel files in ui dir * chore: avoid barrel file imports in studio (#27771) * chore: avoid barrel file imports - Removes some unused imports - Avoids barrel file import for faster builds + less memory * add eslint rule * type fixes * delete layouts barrel * delete components/grid barrel file * delete components/grid/utils barrel file * delete components/grid/components/common barrel file * delete components/grid/components/editor barrel file * delete components/grid/components/formatter barrel file * delete components/grid/components/grid barrel file * delete components/grid/components/header/filter barrel file * remote components/grid/store barrel file * remove components/interfaces/Auth/Policies barrel file * delete components/interfaces/Settings/Logs barrel file * delete components/ui/CodeEditor barrel file * delete components/ui/Forms barrel file * delete components/ui/Shimmers barrel file * delete data/analytics barrel file * delete hooks barrel file * cleanup lib/common/fetch barrel file * final * barral files cleanup * global react-data-grid styles * remove console.log --------- Co-authored-by: Kevin Grüneberg <k.grueneberg1994@gmail.com> * fix build --------- Co-authored-by: Kevin Grüneberg <k.grueneberg1994@gmail.com>
99 lines
3.2 KiB
TypeScript
99 lines
3.2 KiB
TypeScript
import dayjs from 'dayjs'
|
|
|
|
import { FormSection, FormSectionContent, FormSectionLabel } from 'components/ui/Forms/FormSection'
|
|
import type { AuditLog } from 'data/organizations/organization-audit-logs-query'
|
|
import { useOrganizationsQuery } from 'data/organizations/organizations-query'
|
|
import { useProjectsQuery } from 'data/projects/projects-query'
|
|
import { Input, SidePanel } from 'ui'
|
|
|
|
export interface LogDetailsPanelProps {
|
|
selectedLog?: AuditLog
|
|
onClose: () => void
|
|
}
|
|
|
|
const LogDetailsPanel = ({ selectedLog, onClose }: LogDetailsPanelProps) => {
|
|
const { data: projects } = useProjectsQuery()
|
|
const { data: organizations } = useOrganizationsQuery()
|
|
|
|
const project = projects?.find(
|
|
(project) => project.ref === selectedLog?.target.metadata.project_ref
|
|
)
|
|
const organization = organizations?.find(
|
|
(org) => org.slug === selectedLog?.target.metadata.org_slug
|
|
)
|
|
|
|
return (
|
|
<SidePanel
|
|
size="large"
|
|
header={`"${selectedLog?.action.name}" on ${dayjs(selectedLog?.occurred_at).format(
|
|
'DD MMM YYYY, HH:mm:ss'
|
|
)}`}
|
|
visible={selectedLog !== undefined}
|
|
onCancel={onClose}
|
|
cancelText="Close"
|
|
>
|
|
<FormSection header={<FormSectionLabel>General</FormSectionLabel>}>
|
|
<FormSectionContent loading={false}>
|
|
<Input
|
|
readOnly
|
|
size="small"
|
|
label="Occurred at"
|
|
value={selectedLog?.occurred_at}
|
|
descriptionText={dayjs(selectedLog?.occurred_at).format('DD MMM YYYY, HH:mm:ss (ZZ)')}
|
|
/>
|
|
</FormSectionContent>
|
|
</FormSection>
|
|
|
|
<SidePanel.Separator />
|
|
|
|
<FormSection header={<FormSectionLabel>Actor</FormSectionLabel>}>
|
|
<FormSectionContent loading={false}>
|
|
<Input readOnly size="small" label="Actor ID" value={selectedLog?.actor.id} />
|
|
<Input.TextArea
|
|
readOnly
|
|
size="small"
|
|
label="Metadata"
|
|
rows={5}
|
|
className="input-mono input-xs"
|
|
value={JSON.stringify(selectedLog?.actor.metadata, null, 2)}
|
|
/>
|
|
</FormSectionContent>
|
|
</FormSection>
|
|
|
|
<SidePanel.Separator />
|
|
|
|
<FormSection header={<FormSectionLabel>Action</FormSectionLabel>}>
|
|
<FormSectionContent loading={false}>
|
|
<Input readOnly size="small" label="Name" value={selectedLog?.action.name} />
|
|
<Input.TextArea
|
|
readOnly
|
|
size="small"
|
|
label="Metadata"
|
|
rows={5}
|
|
className="input-mono input-xs"
|
|
value={JSON.stringify(selectedLog?.action.metadata, null, 2)}
|
|
/>
|
|
</FormSectionContent>
|
|
</FormSection>
|
|
|
|
<SidePanel.Separator />
|
|
|
|
<FormSection header={<FormSectionLabel>Target</FormSectionLabel>}>
|
|
<FormSectionContent loading={false}>
|
|
<Input readOnly size="small" label="Name" value={selectedLog?.target.description} />
|
|
<Input.TextArea
|
|
readOnly
|
|
size="small"
|
|
label="Metadata"
|
|
rows={5}
|
|
className="input-mono input-xs"
|
|
value={JSON.stringify(selectedLog?.target.metadata, null, 2)}
|
|
/>
|
|
</FormSectionContent>
|
|
</FormSection>
|
|
</SidePanel>
|
|
)
|
|
}
|
|
|
|
export default LogDetailsPanel
|