Files
supabase/apps/studio/components/interfaces/Settings/Logs/LogSelectionRenderers/FunctionLogsSelectionRender.tsx
Francesco Sansalvadore be9590c890 Multiple themes management (#18871)
* set up multiple themes in studio

* set up multiple themes in studio

* set up multiple themes in docs and www

* update all resolvedTheme to also include deep-dark

* update all resolvedTheme checks to also include deep-dark

* update tailwind.config.js tokens

* update tailwind.config.js tokens

* update leftover scale12 token

* update if resolvedTheme _doesn't_ include 'dark'

* update more styling tokens

* add dynamic themes to CmdK

* fix nav and footer for multi theme

* add data-theme selector output to transformTokens.js

* update code-hike.css to target data-theme css

* update tailwindcss to ^3.3.5

* ThemeImage with light and dark src for www and docs

* add brand-button styling token

* update old dark theme boolean

* update old dark theme boolean

* make homepage product visuals themeable

* update product page themed images

* update badge green with brand

* fix roles list appearance

* fix auth widget in auth page

* update more dark logic

* update more dark logic

* add button default bg and border

* update pricing page theme styling

* clean up Themeimage

* remove forceDark in homepage

* update dark:border-dark occurrences

* update dark:border-dark occurrences

* fix dark mode base colors

* remove foreground-strong

* fix notification badge bg

* remove some dark: selectors

* update dark: selectors

* update code-hike deep dark bg color

* fix comment typo

* update border-button-hover token

* fix customer story logo

* remove some more dark: selectors

* restore forceDark in www homepage

* fix auth react icon

* fix homepage product visuals

* remove theme

* add brand-link token

* fix checkbox bg

* npm install

* more visible EntityListItem active bg

* fix --background-alternative-default css vars

---------

Co-authored-by: Jonathan Summers-Muir <MildTomato@users.noreply.github.com>
2023-11-16 16:41:53 +00:00

48 lines
1.8 KiB
TypeScript

import { LOGS_TAILWIND_CLASSES } from '../Logs.constants'
import {
jsonSyntaxHighlight,
SelectionDetailedRow,
SelectionDetailedTimestampRow,
SeverityFormatter,
} from '../LogsFormatters'
const FunctionLogsSelectionRender = ({ log }: any) => {
const metadata = log.metadata[0]
return (
<>
<div className={`${LOGS_TAILWIND_CLASSES.log_selection_x_padding}`}>
<span className="text-foreground-lighter text-sm col-span-4">Event message</span>
<div className="text-xs text-wrap font-mono text-foreground mt-2 whitespace-pre-wrap overflow-x-auto">
{log.event_message}
</div>
</div>
<div className="h-px w-full bg-panel-border-interior-light [[data-theme*=dark]_&]:bg-panel-border-interior-dark"></div>
<div className={`${LOGS_TAILWIND_CLASSES.log_selection_x_padding} space-y-2`}>
<SelectionDetailedRow
label="Severity"
value={metadata.level}
valueRender={<SeverityFormatter value={metadata.level} />}
/>
<SelectionDetailedRow label="Deployment version" value={metadata.version} />
<SelectionDetailedTimestampRow value={log.timestamp} />
<SelectionDetailedRow label="Execution ID" value={metadata.execution_id} />
<SelectionDetailedRow label="Deployment ID" value={metadata.deployment_id} />
</div>
<div className={`${LOGS_TAILWIND_CLASSES.log_selection_x_padding}`}>
<h3 className="text-lg text-foreground mb-4">Metadata</h3>
<pre className="text-sm syntax-highlight overflow-x-auto">
<div
className="text-wrap"
dangerouslySetInnerHTML={{
__html: metadata ? jsonSyntaxHighlight(metadata) : '',
}}
/>
</pre>
</div>
</>
)
}
export default FunctionLogsSelectionRender