feat(flow): add search button to get a flow tree

bee-queue · Jun 11, 2021 · 59b0423 · 59b0423
1 parent eb93a60
commit 59b0423
Show file tree

Hide file tree

Showing 4 changed files with 100 additions and 2 deletions.
diff --git a/public/dashboard.js b/public/dashboard.js
@@ -223,7 +223,7 @@ $(document).ready(() => {
   $('.js-toggle-add-flow-editor').on('click', function () {
     const addFlowText = $('.js-toggle-add-flow-editor').text();
     const shouldNotHide = addFlowText === 'Add Flow';
-    const newAddFlowText = shouldNotHide ? 'Cancel' : 'Add Flow';
+    const newAddFlowText = shouldNotHide ? 'Cancel Add' : 'Add Flow';
     $('.jsoneditorx').toggleClass('hide', !shouldNotHide);
     $('.js-toggle-add-flow-editor').text(newAddFlowText);
 
@@ -236,6 +236,14 @@ $(document).ready(() => {
     }
   });
 
+  $('.js-toggle-search-flow').on('click', function () {
+    const searchFlowText = $('.js-toggle-search-flow').text();
+    const shouldNotHide = searchFlowText === 'Search Flow';
+    const newSearchFlowText = shouldNotHide ? 'Cancel Search' : 'Search Flow';
+    $('.searchflowx').toggleClass('hide', !shouldNotHide);
+    $('.js-toggle-search-flow').text(newSearchFlowText);
+  });
+
   $('.js-add-job').on('click', function () {
     const name = $('input.js-add-job-name').val() || null;
     const data = window.jsonEditor.get();
@@ -286,6 +294,36 @@ $(document).ready(() => {
       });
   });
 
+  $('.js-search-flow').on('click', function (e) {
+    e.preventDefault();
+    const queueName = $('.js-queue-input-search').val();
+    const jobId = $('.js-job-id-input-search').val();
+    const depth = $('.js-depth-input-search').val();
+    const maxChildren = $('.js-max-children-input-search').val();
+
+    const {flowHost, connectionName} = window.arenaInitialPayload;
+
+    $.ajax({
+      url: `${basePath}/api/flow/${encodeURIComponent(
+        flowHost
+      )}/${encodeURIComponent(
+        connectionName
+      )}/flow?jobId=${jobId}&queueName=${queueName}&depth=${depth}&maxChildren=${maxChildren}`,
+      type: 'GET',
+      contentType: 'application/json',
+    })
+      .done((res) => {
+        const flowTree = formatToTreeView(res);
+        alert('Flow info successfully fetched!');
+        $('#tree').treeview({data: [flowTree]});
+        $('.js-tree').toggleClass('hide', false);
+      })
+      .fail((jqXHR) => {
+        window.alert('Failed to get flow info, check console for error.');
+        console.error(jqXHR.responseText);
+      });
+  });
+
   $('.js-pause-queue').on('click', function (e) {
     e.preventDefault();
     $(this).prop('disabled', true);

diff --git a/src/server/views/api/getFlow.js b/src/server/views/api/getFlow.js
@@ -0,0 +1,19 @@
+async function handler(req, res) {
+  const {connectionName, flowHost} = req.params;
+  const {depth, jobId, maxChildren, queueName} = req.query;
+  const {Flows} = req.app.locals;
+  const flow = await Flows.get(connectionName, flowHost);
+  if (!flow) return res.status(404).json({error: 'flow not found'});
+  try {
+    const flowTree = await flow.getFlow({
+      id: jobId,
+      queueName,
+      depth: Number(depth),
+      maxChildren: Number(maxChildren),
+    });
+    return res.status(200).json(flowTree);
+  } catch (err) {
+    return res.status(500).json({error: err.message});
+  }
+}
+module.exports = handler;
diff --git a/src/server/views/api/index.js b/src/server/views/api/index.js
@@ -1,6 +1,7 @@
 const router = require('express').Router();
 
 const addFlow = require('./addFlow');
+const getFlow = require('./getFlow');
 const jobAdd = require('./jobAdd');
 const jobPromote = require('./jobPromote');
 const jobRetry = require('./jobRetry');
@@ -13,6 +14,7 @@ const queueResume = require('./queueResume');
 
 router.post('/queue/:queueHost/:queueName/job', jobAdd);
 router.post('/flow/:flowHost/:connectionName/flow', addFlow);
+router.get('/flow/:flowHost/:connectionName/flow', getFlow);
 router.post('/queue/:queueHost/:queueName/job/bulk', bulkJobsRemove);
 router.patch('/queue/:queueHost/:queueName/job/bulk', bulkJobsRetry);
 router.patch('/queue/:queueHost/:queueName/delayed/job/bulk', bulkJobsPromote);

diff --git a/src/server/views/dashboard/templates/flowDetails.hbs b/src/server/views/dashboard/templates/flowDetails.hbs
@@ -4,7 +4,8 @@
   <div class="col-sm-6">
     <div class="panel panel-default">
       <div class="panel-heading">
-        <div class="js-toggle-add-flow-editor  btn btn-default btn-xs pull-right">Add Flow</div>
+        <div class="js-toggle-search-flow btn btn-default btn-xs pull-right">Search Flow</div>
+        <div class="js-toggle-add-flow-editor btn btn-default btn-xs pull-right">Add Flow</div>
         <h4 class="panel-title">Flow Panel</h4>
       </div>
       <div class="panel-body">
@@ -15,6 +16,44 @@
             <div class="js-add-flow btn btn-primary btn-sm">Create</div>
           </div>
         </div>
+        <div class="searchflowx hide">
+          <div class="row">
+            <div class="col-sm-4 ">
+              <h5>Queue Name</h5>
+            </div>
+            <div class="col-sm-2 ">
+              <input class="js-queue-input-search" type="text" name="queueNameInputSearch">
+            </div>
+          </div>
+          <div class="row">
+            <div class="col-sm-4 right-buffer">
+              <h5>Job Id</h5>
+            </div>
+            <div class="col-sm-2 right-buffer">
+              <input class="js-job-id-input-search" type="text" name="jobIdInputSearch">
+            </div>
+          </div>
+          <div class="row">
+            <div class="col-sm-4 right-buffer">
+              <h5>Tree depth</h5>
+            </div>
+            <div class="col-sm-2 right-buffer">
+              <input class="js-depth-input-search" type="text" name="depthInputSearch">
+            </div>
+          </div>
+          <div class="row">
+            <div class="col-sm-4 right-buffer">
+              <h5>Limit Children</h5>
+            </div>
+            <div class="col-sm-2 right-buffer">
+              <input class="js-max-children-input-search" type="text" name="maxChildrenInputSearch">
+            </div>
+          </div>
+          <br />
+          <div class="form-inline pull-right">
+            <div class="js-search-flow btn btn-primary btn-sm">Search</div>
+          </div>
+        </div>
       </div>
     </div>
   </div>