-
-
Notifications
You must be signed in to change notification settings - Fork 273
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Support serverless Function datasource (#641)
* WIP * Update NOTES.md * fwefwr * proto * cleany * typo * remove comment * Update server.ts * wip * Wip * console * lint * wip * params types * params * better default * Add secrets * response headers * Add timeout * cancel logic * Move types * Move Console to components * Console theming * fix parameter view * Move toolbar * tweakztweaky * header * network * remove legacy * theme spacing * dense tabs * fix build
- Loading branch information
Showing
23 changed files
with
994 additions
and
8 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,141 @@ | ||
| import { darken, IconButton, lighten, styled, SxProps } from '@mui/material'; | ||
| import clsx from 'clsx'; | ||
| import * as React from 'react'; | ||
| import DoDisturbIcon from '@mui/icons-material/DoDisturb'; | ||
| import Inspector, { InspectorProps } from 'react-inspector'; | ||
| import inspectorTheme from '../inspectorTheme'; | ||
| import { interleave } from '../utils/react'; | ||
|
|
||
| export interface LogEntry { | ||
| timestamp: number; | ||
| level: string; | ||
| args: any[]; | ||
| } | ||
|
|
||
| const classes = { | ||
| header: 'Toolpad_ConsoleHeader', | ||
| logEntriesContainer: 'Toolpad_ConsoleLogEntriesContainer', | ||
| logEntries: 'Toolpad_ConsoleLogEntries', | ||
| logEntry: 'Toolpad_ConsoleLogEntry', | ||
| logEntryText: 'Toolpad_ConsoleLogEntryTExt', | ||
| }; | ||
|
|
||
| const ConsoleRoot = styled('div')(({ theme }) => { | ||
| const getColor = (color: string) => { | ||
| const modify = theme.palette.mode === 'light' ? darken : lighten; | ||
| return modify(color, 0.6); | ||
| }; | ||
|
|
||
| const getBackgroundColor = (color: string) => { | ||
| const modify = theme.palette.mode === 'light' ? lighten : darken; | ||
| return modify(color, 0.9); | ||
| }; | ||
|
|
||
| return { | ||
| width: '100%', | ||
| height: '100%', | ||
| display: 'flex', | ||
| flexDirection: 'column', | ||
| alignItems: 'stretch', | ||
|
|
||
| [`& .${classes.header}`]: { | ||
| padding: theme.spacing('2px', 1), | ||
| borderBottom: `1px solid ${theme.palette.divider}`, | ||
| }, | ||
|
|
||
| [`& .${classes.logEntriesContainer}`]: { | ||
| flex: 1, | ||
|
|
||
| // This container has only a single item, but the column-reverse has the effect that it | ||
| // keeps the scroll position at the bottom when the content grows | ||
| display: 'flex', | ||
| flexDirection: 'column-reverse', | ||
| overflow: 'auto', | ||
|
|
||
| fontSize: 12, | ||
| lineHeight: 1.2, | ||
| fontFamily: 'Consolas, Menlo, Monaco, "Andale Mono", "Ubuntu Mono", monospace', | ||
| }, | ||
|
|
||
| [`& .${classes.logEntry}`]: { | ||
| '&:first-of-type': { | ||
| borderTop: `1px solid ${theme.palette.divider}`, | ||
| }, | ||
| borderBottom: `1px solid ${theme.palette.divider}`, | ||
| paddingLeft: theme.spacing(1), | ||
| paddingRight: theme.spacing(1), | ||
| paddingTop: 3, | ||
| paddingBottom: 1, | ||
| }, | ||
|
|
||
| [`& .${classes.logEntry}.error`]: { | ||
| color: getColor(theme.palette.error.light), | ||
| background: getBackgroundColor(theme.palette.error.light), | ||
| }, | ||
|
|
||
| [`& .${classes.logEntry}.warn`]: { | ||
| color: getColor(theme.palette.warning.light), | ||
| background: getBackgroundColor(theme.palette.warning.light), | ||
| }, | ||
|
|
||
| [`& .${classes.logEntry}.info`]: { | ||
| color: getColor(theme.palette.info.light), | ||
| background: getBackgroundColor(theme.palette.info.light), | ||
| }, | ||
|
|
||
| [`& .${classes.logEntryText} > *`]: { | ||
| display: 'inline-block', | ||
| verticalAlign: 'top', | ||
| }, | ||
| }; | ||
| }); | ||
|
|
||
| function ConsoleInpector(props: InspectorProps) { | ||
| return <Inspector {...props} theme={inspectorTheme} />; | ||
| } | ||
|
|
||
| interface ConsoleEntryProps { | ||
| entry: LogEntry; | ||
| } | ||
|
|
||
| function ConsoleEntry({ entry }: ConsoleEntryProps) { | ||
| return ( | ||
| <div className={clsx(classes.logEntry, entry.level)}> | ||
| <div className={classes.logEntryText}> | ||
| {interleave( | ||
| entry.args.map((arg, i) => | ||
| typeof arg === 'string' ? arg : <ConsoleInpector key={i} data={arg} />, | ||
| ), | ||
| ' ', | ||
| )} | ||
| </div> | ||
| </div> | ||
| ); | ||
| } | ||
|
|
||
| interface ConsoleProps { | ||
| sx?: SxProps; | ||
| value?: LogEntry[]; | ||
| onChange?: (logEntries: LogEntry[]) => void; | ||
| } | ||
|
|
||
| export default function Console({ value = [], onChange, sx }: ConsoleProps) { | ||
| return ( | ||
| <ConsoleRoot sx={sx}> | ||
| <div className={classes.header}> | ||
| {onChange ? ( | ||
| <IconButton disabled={value.length <= 0} onClick={() => onChange([])}> | ||
| <DoDisturbIcon /> | ||
| </IconButton> | ||
| ) : null} | ||
| </div> | ||
| <div className={classes.logEntriesContainer}> | ||
| <div className={classes.logEntries}> | ||
| {value.map((entry, i) => ( | ||
| <ConsoleEntry key={i} entry={entry} /> | ||
| ))} | ||
| </div> | ||
| </div> | ||
| </ConsoleRoot> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,52 @@ | ||
| import { fromHar } from 'perf-cascade'; | ||
| import * as React from 'react'; | ||
| import { Har } from 'har-format'; | ||
| import { styled, SxProps } from '@mui/material'; | ||
| import 'perf-cascade/dist/perf-cascade.css'; | ||
|
|
||
| const HarViewerRoot = styled('div')({}); | ||
|
|
||
| function fixLinks(elm: Element) { | ||
| elm.querySelectorAll('a').forEach((link) => link.setAttribute('target', '_blank')); | ||
| } | ||
|
|
||
| export interface HarViewerProps { | ||
| har?: Har; | ||
| sx?: SxProps; | ||
| } | ||
|
|
||
| export default function HarViewer({ har, sx }: HarViewerProps) { | ||
| const rootRef = React.useRef<HTMLDivElement>(null); | ||
|
|
||
| React.useEffect(() => { | ||
| const root = rootRef.current; | ||
| if (har && root) { | ||
| const svg = fromHar(har); | ||
| fixLinks(svg); | ||
|
|
||
| const observer = new MutationObserver((entries) => { | ||
| for (const entry of entries) { | ||
| for (const node of entry.addedNodes) { | ||
| if (node instanceof Element) { | ||
| fixLinks(node); | ||
| } | ||
| } | ||
| } | ||
| }); | ||
|
|
||
| observer.observe(svg, { | ||
| subtree: true, | ||
| childList: true, | ||
| }); | ||
|
|
||
| root.append(svg); | ||
| return () => { | ||
| observer.disconnect(); | ||
| svg.remove(); | ||
| }; | ||
| } | ||
| return () => {}; | ||
| }, [har]); | ||
|
|
||
| return <HarViewerRoot ref={rootRef} sx={sx} />; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,15 @@ | ||
| import { chromeDark, chromeLight, InspectorTheme } from 'react-inspector'; | ||
|
|
||
| import theme from './theme'; | ||
|
|
||
| const inspectorTheme: InspectorTheme = { | ||
| ...(theme.palette.mode === 'dark' ? chromeDark : chromeLight), | ||
|
|
||
| BASE_BACKGROUND_COLOR: 'inherit', | ||
| TREENODE_FONT_FAMILY: 'inherit', | ||
| TREENODE_FONT_SIZE: 'inherit', | ||
| ARROW_FONT_SIZE: 'inherit', | ||
| TREENODE_LINE_HEIGHT: 'inherit', | ||
| }; | ||
|
|
||
| export default inspectorTheme; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,5 @@ | ||
| import theme from './theme'; | ||
|
|
||
| const monacoEditorTheme: string = theme.palette.mode === 'dark' ? 'vs-dark' : 'vs'; | ||
|
|
||
| export default monacoEditorTheme; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.