Add loadJob and loadForm

daiquiri/query/assets/js/query/components/App.js

@@ -1,13 +1,27 @@
-import React from 'react'
+import React, { useState } from 'react'
 
-import { parseLocation } from '../utils/location'
+import { parseLocation, updateLocation } from '../utils/location'
 
+import Form from './Form'
 import Forms from './Forms'
+import Job from './Job'
 import Jobs from './Jobs'
 import Status from './Status'
 
 const App = () => {
-  const { jobId, formKey } = parseLocation()
+  const location = parseLocation()
+
+  const [state, setState] = useState(location)
+
+  const loadJob = (jobId) => {
+    updateLocation({ jobId })
+    setState({ jobId })
+  }
+
+  const loadForm = (formKey) => {
+    updateLocation({ formKey })
+    setState({ formKey })
+  }
 
   return (
     <div className="container">
@@ -16,15 +30,15 @@ const App = () => {
       <div className="row">
         <div className="col-sm-4">
           <Status />
-          <Forms />
-          <Jobs />
+          <Forms loadForm={loadForm} />
+          <Jobs loadJob={loadJob} />
         </div>
         <div className="col-sm-8">
           {
-            jobId && <pre>{jobId}</pre>
+            state.jobId && <Job jobId={state.jobId} />
           }
           {
-            formKey && <pre>{formKey}</pre>
+            state.formKey && <Form formKey={state.formKey} />
           }
         </div>
       </div>

daiquiri/query/assets/js/query/components/Form.js

@@ -0,0 +1,16 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+const Form = ({ formKey }) => {
+  return (
+    <div className="form">
+      <h2>{formKey}</h2>
+    </div>
+  )
+}
+
+Form.propTypes = {
+  formKey: PropTypes.string.isRequired
+}
+
+export default Form

daiquiri/query/assets/js/query/components/Forms.js

@@ -1,11 +1,20 @@
 import React from 'react'
+import PropTypes from 'prop-types'
 import { isNil } from 'lodash'
 
 import { useFormsQuery } from '../hooks/query'
+import { basePath } from '../utils/location'
 
-const Forms = () => {
+import Loading from './Loading'
+
+const Forms = ({ loadForm }) => {
   const { data: forms } = useFormsQuery()
 
+  const handleLoadForm = (event, form) => {
+    event.preventDefault()
+    loadForm(form.key)
+  }
+
   return (
     <div className="card mb-3">
       <div className="card-header">
@@ -14,13 +23,17 @@ const Forms = () => {
       {
         isNil(forms) ? (
           <div className="card-body">
-            <p>Loading ...</p>
+            <Loading />
           </div>
         ) : (
           <ul className="list-group list-group-flush">
             {
               forms.map((form) => (
-                <li key={form.key} className="list-group-item">{form.key}</li>
+                <li key={form.key} className="list-group-item">
+                  <a href={`${basePath}/${form.key}/`} onClick={(event) => handleLoadForm(event, form)}>
+                    {form.key}
+                  </a>
+                </li>
               ))
             }
           </ul>
@@ -30,4 +43,8 @@ const Forms = () => {
   )
 }
 
+Forms.propTypes = {
+  loadForm: PropTypes.func.isRequired
+}
+
 export default Forms

daiquiri/query/assets/js/query/components/Job.js

@@ -0,0 +1,24 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { isNil } from 'lodash'
+import { useJobQuery } from '../hooks/query'
+
+const Job = ({ jobId }) => {
+  const { data: job } = useJobQuery(jobId)
+
+  return isNil(job) ? (
+      <span>{gettext('Loading ...')}</span>
+    ) : (
+    <div className="job">
+      <h2>{job.table_name}</h2>
+      <pre>{job.id}</pre>
+      <pre>{job.query}</pre>
+    </div>
+  )
+}
+
+Job.propTypes = {
+  jobId: PropTypes.string.isRequired
+}
+
+export default Job

daiquiri/query/assets/js/query/components/Jobs.js

@@ -1,11 +1,20 @@
 import React from 'react'
+import PropTypes from 'prop-types'
 import { isNil } from 'lodash'
 
 import { useJobsQuery } from '../hooks/query'
+import { basePath } from '../utils/location'
 
-const Jobs = () => {
+import Loading from './Loading'
+
+const Jobs = ({ loadJob }) => {
   const { data: jobs } = useJobsQuery()
 
+  const handleLoadJob = (event, job) => {
+    event.preventDefault()
+    loadJob(job.id)
+  }
+
   return (
     <div className="card mb-3">
       <div className="card-header">
@@ -14,13 +23,17 @@ const Jobs = () => {
       {
         isNil(jobs) ? (
           <div className="card-body">
-            <p>Loading ...</p>
+            <Loading />
           </div>
         ) : (
           <ul className="list-group list-group-flush">
             {
               jobs.map((job) => (
-                <li key={job.id} className="list-group-item">{job.table_name}</li>
+                <li key={job.id} className="list-group-item">
+                  <a href={`${basePath}/${job.id}/`} onClick={(event) => handleLoadJob(event, job)}>
+                    {job.table_name}
+                  </a>
+                </li>
               ))
             }
           </ul>
@@ -30,4 +43,8 @@ const Jobs = () => {
   )
 }
 
+Jobs.propTypes = {
+  loadJob: PropTypes.func.isRequired
+}
+
 export default Jobs

daiquiri/query/assets/js/query/components/Loading.js

@@ -0,0 +1,18 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+const Loading = ({ show }) => {
+  return show && (
+    <span>{gettext('Loading ...')}</span>
+  )
+}
+
+Loading.defaultProps = {
+  show: true
+}
+
+Loading.propTypes = {
+  show: PropTypes.bool.isRequired
+}
+
+export default Loading

daiquiri/query/assets/js/query/hooks/query.js

@@ -35,3 +35,10 @@ export const useUserSchema = () => {
     refetchInterval: refetchInterval
   })
 }
+
+export const useJobQuery = (jobId) => {
+  return useQuery({
+    queryKey: ['job', jobId],
+    queryFn: () => QueryApi.fetchJob(jobId)
+  })
+}

daiquiri/query/assets/js/query/utils/location.js

@@ -2,7 +2,7 @@ import { isEmpty, isNil, trim } from 'lodash'
 
 import { baseUrl } from '../../../../../core/assets/js/utils/location'
 
-const basePath = `${baseUrl}query/new/`
+const basePath = `${baseUrl}/query/new/`
 
 const parseLocation = () => {
   const path = trim(window.location.pathname.replace(basePath, ''), '/')
@@ -40,4 +40,4 @@ const buildPath = ({ jobId, formKey }) => {
   return path
 }
 
-export { parseLocation, updateLocation, buildPath }
+export { basePath, parseLocation, updateLocation, buildPath }