diff --git a/ui/src/notebooks/components/Notebook.tsx b/ui/src/notebooks/components/Notebook.tsx index 9fbdc80ff7..b4fab8cdf1 100644 --- a/ui/src/notebooks/components/Notebook.tsx +++ b/ui/src/notebooks/components/Notebook.tsx @@ -1,13 +1,16 @@ import React, {FC} from 'react' import {Page} from '@influxdata/clockface' +import {NotebookProvider} from 'src/notebooks/context/notebook' const NotebookPage: FC = () => { return ( - - - - + + + + + + ) } diff --git a/ui/src/notebooks/context/notebook.mock.json b/ui/src/notebooks/context/notebook.mock.json new file mode 100644 index 0000000000..1180616fe1 --- /dev/null +++ b/ui/src/notebooks/context/notebook.mock.json @@ -0,0 +1,78 @@ +{ + "id": "testing", + "pipes": [ + { + "type": "query", + "activeQuery": 0, + "queries": [ + { + "text": "from(bucket: \"project\")\n |> range(start: v.timeRangeStart, stop: v.timeRangeStop)\n |> filter(fn: (r) => r[\"_measurement\"] == \"docker_container_cpu\")", + "editMode": "advanced", + "builderConfig": { + "buckets": [], + "tags": [], + "functions": [] + } + } + ] + }, + { + "type": "query", + "activeQuery": 0, + "queries": [ + { + "text": "// Tip: Use the __PREVIOUS_RESULT__ variable to link your queries\n\n__PREVIOUS_RESULT__\n |> filter(fn: (r) => r[\"_field\"] == \"usage_percent\")", + "editMode": "advanced", + "builderConfig": { + "buckets": [], + "tags": [], + "functions": [] + } + } + ] + }, + { + "type": "visualization" + }, + { + "type": "visualization" + }, + { + "type": "query", + "activeQuery": 0, + "queries": [ + { + "text": "// Tip: Use the __PREVIOUS_RESULT__ variable to link your queries\n\n__PREVIOUS_RESULT__\n |> sum()", + "editMode": "advanced", + "builderConfig": { + "buckets": [], + "tags": [], + "functions": [] + } + } + ] + }, + { + "type": "visualization" + }, + { + "type": "query", + "activeQuery": 0, + "queries": [ + { + "text": "// Tip: Use the __PREVIOUS_RESULT__ variable to link your queries\n\nfrom(bucket: \"project\")\n |> range(start: v.timeRangeStart, stop: v.timeRangeStop)\n |> filter(fn: (r) => r[\"_measurement\"] == \"docker_container_cpu\")", + "editMode": "advanced", + "builderConfig": { + "buckets": [], + "tags": [], + "functions": [] + } + } + ] + }, + { + "type": "visualization" + } + ] +} + diff --git a/ui/src/notebooks/context/notebook.tsx b/ui/src/notebooks/context/notebook.tsx new file mode 100644 index 0000000000..542c2b774b --- /dev/null +++ b/ui/src/notebooks/context/notebook.tsx @@ -0,0 +1,78 @@ +import React, {FC, useState} from 'react' + +// TODO make this polymorphic to mimic the self registration +// of pipe stages +export type Pipe = any + +export interface NotebookContextType { + id: string + pipes: Pipe[] + addPipe: (pipe: Pipe) => void + updatePipe: (idx: number, pipe: Pipe) => void + removePipe: (idx: number) => void +} + +export const DEFAULT_CONTEXT = { + id: 'new', + pipes: [], + addPipe: () => {}, + updatePipe: () => {}, + removePipe: () => {}, +} + +// NOTE: this just loads some test data for exploring the +// interactions between types. Make sure it's never true +// during the pull review process +const TEST_MODE = false +if (TEST_MODE) { + const TEST_NOTEBOOK = require('src/notebooks/context/notebook.mock.json') + DEFAULT_CONTEXT.id = TEST_NOTEBOOK.id + DEFAULT_CONTEXT.pipes = TEST_NOTEBOOK.pipes +} + +export const NotebookContext = React.createContext( + DEFAULT_CONTEXT +) + +export const NotebookProvider: FC = ({children}) => { + const [id] = useState(DEFAULT_CONTEXT.id) + const [pipes, setPipes] = useState(DEFAULT_CONTEXT.pipes) + + function addPipe(pipe: Pipe) { + setPipes(pipes => { + pipes.push(pipe) + return pipes.slice() + }) + } + + function updatePipe(idx: number, pipe: Pipe) { + setPipes(pipes => { + pipes[idx] = { + ...pipes[idx], + ...pipe, + } + return pipes.slice() + }) + } + + function removePipe(idx: number) { + setPipes(pipes => { + pipes.splice(idx, 1) + return pipes.slice() + }) + } + + return ( + + {children} + + ) +}