feat: adding generic resource interface (#5552)

Author: drdelambre

src/dataExplorer/components/DataExplorerPage.tsx

@@ -23,6 +23,7 @@ import SaveAsOverlay from 'src/dataExplorer/components/SaveAsOverlay'
 import ViewTypeDropdown from 'src/timeMachine/components/ViewTypeDropdown'
 import {AddAnnotationDEOverlay} from 'src/overlays/components/index'
 import {EditAnnotationDEOverlay} from 'src/overlays/components/index'
+import TemplatePage from 'src/dataExplorer/components/resources/TemplatePage'
 
 // Utils
 import {pageTitleSuffixer} from 'src/shared/utils/pageTitles'
@@ -67,6 +68,10 @@ const DataExplorerPage: FC = () => {
   return (
     <Page titleTag={pageTitleSuffixer(['Data Explorer'])}>
       <Switch>
+        <Route
+          path="/orgs/:orgID/data-explorer/from"
+          component={TemplatePage}
+        />
         <Route
           path="/orgs/:orgID/data-explorer/save"
           component={SaveAsOverlay}

src/dataExplorer/components/resources/TemplatePage.tsx

@@ -0,0 +1,65 @@
+import React, {FC, useEffect, useState, useContext} from 'react'
+import {useSelector} from 'react-redux'
+import {Switch, Route, useHistory, useParams} from 'react-router-dom'
+import {RemoteDataState} from 'src/types'
+
+import {getOrg} from 'src/organizations/selectors'
+
+import {RESOURCES} from 'src/dataExplorer/components/resources'
+import {
+  PersistanceContext,
+  PersistanceProvider,
+} from 'src/dataExplorer/context/persistance'
+
+const Template: FC = () => {
+  const {setQuery, setResource} = useContext(PersistanceContext)
+  const params = useParams()[0].split('/')
+  const org = useSelector(getOrg)
+  const history = useHistory()
+  const [loading, setLoading] = useState(RemoteDataState.NotStarted)
+
+  if (!params[0].endsWith('s')) {
+    params[0] += 's'
+  }
+
+  useEffect(() => {
+    if (!RESOURCES[params[0]] || RESOURCES[params[0]].disabled) {
+      setLoading(RemoteDataState.Error)
+      return
+    }
+
+    if (loading !== RemoteDataState.NotStarted) {
+      return
+    }
+
+    setLoading(RemoteDataState.Loading)
+    setQuery('')
+    setResource(null)
+
+    RESOURCES[params[0]].init.apply(this, params.slice(1)).then(data => {
+      setQuery(data.flux)
+      setResource(data)
+      history.replace(`/orgs/${org.id}/data-explorer`)
+    })
+  }, [params])
+
+  return <div></div>
+}
+
+const TemplatePage: FC = () => {
+  const org = useSelector(getOrg)
+
+  return (
+    <PersistanceProvider>
+      <Switch>
+        <Route
+          path={`/orgs/${org.id}/data-explorer/from/*`}
+          component={Template}
+        />
+        <Route component={() => <div />} />
+      </Switch>
+    </PersistanceProvider>
+  )
+}
+
+export default TemplatePage

src/dataExplorer/components/resources/index.ts

@@ -0,0 +1,38 @@
+import {ReactNode} from 'react'
+import {ResourceType} from 'src/types/resources'
+
+export interface ResourceConnectedQuery<T> {
+  type: ResourceType
+  flux: string
+  data: T
+}
+
+export interface ResourceRegistration {
+  type: ResourceType
+  disabled?: boolean
+  editor: ReactNode
+  init: (...args: string[]) => Promise<ResourceConnectedQuery<any>>
+  persist: (
+    query: ResourceConnectedQuery<any>
+  ) => Promise<ResourceConnectedQuery<any>>
+}
+
+interface Resources {
+  [type: string]: ResourceRegistration
+}
+
+export const RESOURCES: Resources = {}
+  // eslint-disable-next-line no-extra-semi
+;[].forEach(mod => {
+  mod.default((def: ResourceRegistration) => {
+    if (RESOURCES.hasOwnProperty(def.type)) {
+      throw new Error(
+        `Resource of type [${def.type}] has already been registered`
+      )
+    }
+
+    RESOURCES[def.type] = {
+      ...def,
+    }
+  })
+})

src/dataExplorer/context/persistance.tsx

@@ -4,6 +4,10 @@ import {DEFAULT_TIME_RANGE} from 'src/shared/constants/timeRanges'
 import {useSessionStorage} from 'src/dataExplorer/shared/utils'
 import {Bucket, TagKeyValuePair} from 'src/types'
 import {isFlagEnabled} from 'src/shared/utils/featureFlag'
+import {
+  RESOURCES,
+  ResourceConnectedQuery,
+} from 'src/dataExplorer/components/resources'
 
 interface SchemaComposition {
   synced: boolean // true == can modify session's schema
@@ -23,13 +27,17 @@ interface ContextType {
   vertical: number[]
   range: TimeRange
   query: string
+  resource: ResourceConnectedQuery<any>
   selection: SchemaSelection
 
   setHorizontal: (val: number[]) => void
   setVertical: (val: number[]) => void
   setRange: (val: TimeRange) => void
   setQuery: (val: string) => void
+  setResource: (val: ResourceConnectedQuery<any>) => void
   setSelection: (val: RecursivePartial<SchemaSelection>) => void
+
+  save: () => Promise<ResourceConnectedQuery<any>>
 }
 
 export const DEFAULT_SCHEMA: SchemaSelection = {
@@ -48,13 +56,17 @@ const DEFAULT_CONTEXT = {
   vertical: [0.25, 0.8],
   range: DEFAULT_TIME_RANGE,
   query: '',
+  resource: null,
   selection: DEFAULT_SCHEMA,
 
   setHorizontal: (_: number[]) => {},
   setVertical: (_: number[]) => {},
   setRange: (_: TimeRange) => {},
   setQuery: (_: string) => {},
+  setResource: (_: any) => {},
   setSelection: (_: RecursivePartial<SchemaSelection>) => {},
+
+  save: () => Promise.resolve(null),
 }
 
 export const PersistanceContext = createContext<ContextType>(DEFAULT_CONTEXT)
@@ -80,6 +92,7 @@ export const PersistanceProvider: FC = ({children}) => {
     'dataExplorer.range',
     DEFAULT_CONTEXT.range
   )
+  const [resource, setResource] = useSessionStorage('dataExplorer.resource', {})
   const [selection, setSelection] = useSessionStorage(
     'dataExplorer.schema',
     JSON.parse(JSON.stringify(DEFAULT_CONTEXT.selection))
@@ -107,20 +120,37 @@ export const PersistanceProvider: FC = ({children}) => {
     [selection, selection.composition, setSelection]
   )
 
+  const save = () => {
+    if (!resource || !RESOURCES[resource.type]) {
+      return Promise.resolve(null)
+    }
+
+    resource.flux = query
+
+    return RESOURCES[resource.type].persist(resource).then(data => {
+      setResource(data)
+      return data
+    })
+  }
+
   return (
     <PersistanceContext.Provider
       value={{
         horizontal,
         vertical,
         range,
         query,
+        resource,
         selection,
 
         setHorizontal,
         setVertical,
         setRange,
         setQuery,
+        setResource,
         setSelection: setSchemaSelection,
+
+        save,
       }}
     >
       {children}

src/types/resources.ts

@@ -36,6 +36,7 @@ export enum ResourceType {
   Plugins = 'plugins',
   Scrapers = 'scrapers',
   Secrets = 'secrets',
+  Scripts = 'scripts',
   Tasks = 'tasks',
   Templates = 'templates',
   Telegrafs = 'telegrafs',