Load sql form with query from job overview

django-daiquiri · Jul 11, 2024 · 5f0023a · 5f0023a
1 parent 0a6b337
commit 5f0023a
Show file tree

Hide file tree

Showing 5 changed files with 18 additions and 15 deletions.
diff --git a/daiquiri/query/assets/js/query/components/App.js b/daiquiri/query/assets/js/query/components/App.js
@@ -18,9 +18,9 @@ const App = () => {
     setState({ jobId })
   }
 
-  const loadForm = (formKey) => {
+  const loadForm = (formKey, query = null) => {
     updateLocation({ formKey })
-    setState({ formKey })
+    setState({ formKey, query })
   }
 
   return (
@@ -35,10 +35,10 @@ const App = () => {
         </div>
         <div className="col-lg-9 order-1 order-lg-2">
           {
-            state.jobId && <Job jobId={state.jobId} />
+            state.jobId && <Job jobId={state.jobId} loadForm={loadForm} />
           }
           {
-            state.formKey && <Form formKey={state.formKey} loadJob={loadJob} />
+            state.formKey && <Form formKey={state.formKey} loadJob={loadJob} query={state.query} />
           }
         </div>
       </div>

diff --git a/daiquiri/query/assets/js/query/components/form/Form.js b/daiquiri/query/assets/js/query/components/form/Form.js
@@ -8,7 +8,7 @@ import FormSql from './FormSql'
 import FormCustom from './FormCustom'
 import FormUpload from './FormUpload'
 
-const Form = ({ formKey, loadJob }) => {
+const Form = ({ formKey, loadJob, query }) => {
   const { data: form } = useFormQuery(formKey)
 
   if (isNil(form)) {
@@ -17,7 +17,7 @@ const Form = ({ formKey, loadJob }) => {
 
   switch (form.key) {
     case 'sql':
-      return <FormSql form={form} loadJob={loadJob} />
+      return <FormSql form={form} loadJob={loadJob} query={query} />
     case 'upload':
       return <FormUpload form={form} loadJob={loadJob} />
     default:
@@ -27,7 +27,8 @@ const Form = ({ formKey, loadJob }) => {
 
 Form.propTypes = {
   formKey: PropTypes.string.isRequired,
-  loadJob: PropTypes.func.isRequired
+  loadJob: PropTypes.func.isRequired,
+  query: PropTypes.string
 }
 
 export default Form
diff --git a/daiquiri/query/assets/js/query/components/form/FormSql.js b/daiquiri/query/assets/js/query/components/form/FormSql.js
@@ -15,9 +15,9 @@ import { useQueryLanguagesQuery, useQueuesQuery, useSubmitJobMutation } from '..
 const FormSql = ({ form, loadJob, query }) => {
 
   const [values, setValues] = useState({
-    query: query || 'SELECT ra, dec, parallax, id FROM daiquiri_data_obs.stars',
+    query: query || '',
     table_name: '',
-    run_id: '1',
+    run_id: '',
     query_language: '',
     queue: '',
   })

diff --git a/daiquiri/query/assets/js/query/components/job/Job.js b/daiquiri/query/assets/js/query/components/job/Job.js
@@ -12,7 +12,7 @@ import JobResults from './JobResults'
 import JobPlot from './JobPlot'
 import JobDownload from './JobDownload'
 
-const Job = ({ jobId, loadJob, loadForm }) => {
+const Job = ({ jobId, loadForm }) => {
   const { data: job } = useJobQuery(jobId)
 
   const [activeTab, setActiveTab] = useLsState('daiquiri.query.job.activeTab', 'overview')
@@ -55,7 +55,7 @@ const Job = ({ jobId, loadJob, loadForm }) => {
       </ul>
       <div className="job-tab-content mt-3">
         {
-          activeTab === 'overview' && <JobOverview job={job} />
+          activeTab === 'overview' && <JobOverview job={job} loadForm={loadForm} />
         }
         {
           activeTab === 'results' && <JobResults job={job} />
@@ -72,7 +72,8 @@ const Job = ({ jobId, loadJob, loadForm }) => {
 }
 
 Job.propTypes = {
-  jobId: PropTypes.string.isRequired
+  jobId: PropTypes.string.isRequired,
+  loadForm: PropTypes.func.isRequired
 }
 
 export default Job
diff --git a/daiquiri/query/assets/js/query/components/job/JobOverview.js b/daiquiri/query/assets/js/query/components/job/JobOverview.js
@@ -11,7 +11,7 @@ import JobRenameModal from './JobRenameModal'
 import JobAbortModal from './JobAbortModal'
 import JobArchiveModal from './JobArchiveModal'
 
-const JobOverview = ({ job }) => {
+const JobOverview = ({ job, loadForm }) => {
 
   const [showRenameModal, toggleRenameModal] = useToggle()
   const [showAbortModal, toggleAbortModal] = useToggle()
@@ -60,7 +60,7 @@ const JobOverview = ({ job }) => {
           {renderQuery(job.query)}
         </div>
         <div className="card-footer">
-          <button className="btn btn-link">
+          <button className="btn btn-link" onClick={() => loadForm('sql', job.query)}>
             {gettext('Open new query form with this query')}
           </button>
         </div>
@@ -198,7 +198,8 @@ const JobOverview = ({ job }) => {
 }
 
 JobOverview.propTypes = {
-  job: PropTypes.object.isRequired
+  job: PropTypes.object.isRequired,
+  loadForm: PropTypes.func.isRequired
 }
 
 export default JobOverview