-
Notifications
You must be signed in to change notification settings - Fork 1.4k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(hogql): query debugger (#17939)
- Loading branch information
1 parent
85451aa
commit f66850d
Showing
6 changed files
with
186 additions
and
81 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,94 @@ | ||
| import { debugSceneLogic } from './debugSceneLogic' | ||
| import { SceneExport } from 'scenes/sceneTypes' | ||
| import { PageHeader } from 'lib/components/PageHeader' | ||
| import { Query } from '~/queries/Query/Query' | ||
| import { useActions, useValues } from 'kea' | ||
| import { stringifiedExamples } from '~/queries/examples' | ||
| import { LemonSelect } from 'lib/lemon-ui/LemonSelect' | ||
| import { LemonLabel } from 'lib/lemon-ui/LemonLabel/LemonLabel' | ||
| import { LemonButton } from 'lib/lemon-ui/LemonButton' | ||
| import { HogQLQuery } from '~/queries/schema' | ||
| import { HogQLDebug } from 'scenes/debug/HogQLDebug' | ||
|
|
||
| export function DebugScene(): JSX.Element { | ||
| const { query } = useValues(debugSceneLogic) | ||
| const { setQuery } = useActions(debugSceneLogic) | ||
|
|
||
| let parsed: Record<string, any> | undefined | ||
| try { | ||
| parsed = JSON.parse(query) | ||
| } catch (e) { | ||
| // do nothing | ||
| } | ||
|
|
||
| const showQueryEditor = !( | ||
| parsed && | ||
| parsed.kind == 'DataTableNode' && | ||
| parsed.source.kind == 'HogQLQuery' && | ||
| (parsed.full || parsed.showHogQLEditor) | ||
| ) | ||
|
|
||
| return ( | ||
| <div className="QueryScene"> | ||
| <PageHeader | ||
| title="Query Debugger" | ||
| buttons={ | ||
| <> | ||
| <LemonButton | ||
| active={query === stringifiedExamples.HogQLRaw} | ||
| onClick={() => setQuery(stringifiedExamples.HogQLRaw)} | ||
| > | ||
| HogQL Debug | ||
| </LemonButton> | ||
| <LemonButton | ||
| active={query === stringifiedExamples.HogQLTable} | ||
| onClick={() => setQuery(stringifiedExamples.HogQLTable)} | ||
| > | ||
| HogQL Table | ||
| </LemonButton> | ||
| <LemonButton | ||
| active={query === stringifiedExamples.Events} | ||
| onClick={() => setQuery(stringifiedExamples.Events)} | ||
| > | ||
| Any Query | ||
| </LemonButton> | ||
| <LemonLabel> | ||
| <LemonSelect | ||
| placeholder={'More sample queries'} | ||
| options={Object.entries(stringifiedExamples) | ||
| .filter(([k]) => k !== 'HogQLTable' && k !== 'HogQLRaw') | ||
| .map(([k, v]) => { | ||
| return { label: k, value: v } | ||
| })} | ||
| onChange={(v) => { | ||
| if (v) { | ||
| setQuery(v) | ||
| } | ||
| }} | ||
| /> | ||
| </LemonLabel> | ||
| </> | ||
| } | ||
| /> | ||
| {parsed && parsed?.kind === 'HogQLQuery' ? ( | ||
| <HogQLDebug | ||
| query={parsed as HogQLQuery} | ||
| setQuery={(query) => setQuery(JSON.stringify(query, null, 2))} | ||
| /> | ||
| ) : ( | ||
| <Query | ||
| query={query} | ||
| setQuery={(query) => setQuery(JSON.stringify(query, null, 2))} | ||
| context={{ | ||
| showQueryEditor: showQueryEditor, | ||
| }} | ||
| /> | ||
| )} | ||
| </div> | ||
| ) | ||
| } | ||
|
|
||
| export const scene: SceneExport = { | ||
| component: DebugScene, | ||
| logic: debugSceneLogic, | ||
| } |
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,69 @@ | ||
| import { HogQLQueryEditor } from '~/queries/nodes/HogQLQuery/HogQLQueryEditor' | ||
| import { DataNode, HogQLQuery } from '~/queries/schema' | ||
| import { DateRange } from '~/queries/nodes/DataNode/DateRange' | ||
| import { EventPropertyFilters } from '~/queries/nodes/EventsNode/EventPropertyFilters' | ||
| import { BindLogic, useValues } from 'kea' | ||
| import { dataNodeLogic, DataNodeLogicProps } from '~/queries/nodes/DataNode/dataNodeLogic' | ||
| import { ElapsedTime, Timings } from '~/queries/nodes/DataNode/ElapsedTime' | ||
| import { CodeSnippet, Language } from 'lib/components/CodeSnippet' | ||
| import { CodeEditor } from 'lib/components/CodeEditors' | ||
|
|
||
| interface HogQLDebugProps { | ||
| query: HogQLQuery | ||
| setQuery: (query: DataNode) => void | ||
| } | ||
| export function HogQLDebug({ query, setQuery }: HogQLDebugProps): JSX.Element { | ||
| const dataNodeLogicProps: DataNodeLogicProps = { query, key: 'debug-scene' } | ||
| const { dataLoading, response, responseErrorObject, elapsedTime } = useValues(dataNodeLogic(dataNodeLogicProps)) | ||
| return ( | ||
| <BindLogic logic={dataNodeLogic} props={dataNodeLogicProps}> | ||
| <div className="space-y-2"> | ||
| <HogQLQueryEditor query={query} setQuery={setQuery} /> | ||
| <div className="flex gap-2"> | ||
| <DateRange key="date-range" query={query} setQuery={setQuery} /> | ||
| <EventPropertyFilters key="event-property" query={query} setQuery={setQuery} /> | ||
| </div> | ||
| {dataLoading ? ( | ||
| <> | ||
| <h2>Running query...</h2> | ||
| <div className="flex"> | ||
| Time elapsed: <ElapsedTime /> | ||
| </div> | ||
| </> | ||
| ) : ( | ||
| <> | ||
| {response?.hogql ? ( | ||
| <> | ||
| <h2>Executed HogQL</h2> | ||
| <CodeSnippet language={Language.SQL} wrap> | ||
| {response.hogql} | ||
| </CodeSnippet> | ||
| </> | ||
| ) : null} | ||
| {response?.clickhouse ? ( | ||
| <> | ||
| <h2>Executed ClickHouse SQL</h2> | ||
| <CodeSnippet language={Language.SQL} wrap> | ||
| {response.clickhouse} | ||
| </CodeSnippet> | ||
| </> | ||
| ) : null} | ||
| {response?.timings && elapsedTime !== null ? ( | ||
| <> | ||
| <h2>Time spent</h2> | ||
| <Timings timings={response.timings} elapsedTime={elapsedTime} /> | ||
| </> | ||
| ) : null} | ||
| <h2>Raw response</h2> | ||
| <CodeEditor | ||
| className="border" | ||
| language={'json'} | ||
| value={JSON.stringify(response ?? responseErrorObject, null, 2)} | ||
| height={800} | ||
| /> | ||
| </> | ||
| )} | ||
| </div> | ||
| </BindLogic> | ||
| ) | ||
| } |
8 changes: 4 additions & 4 deletions
8
frontend/src/scenes/query/querySceneLogic.ts → frontend/src/scenes/debug/debugSceneLogic.ts
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 was deleted.
Oops, something went wrong.