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}
+
+ )
+}