feat(ui): implemented search by Workflow names

.gitignore

@@ -69,6 +69,9 @@ todo.md
 
 rhythm_api/
 rhythm/rhythm_api
+
 signet/signet
+
 db/mongo/data
 db/postgres/data
+db/db_postgres

api/src/routes/datasets/uploads.js

@@ -111,9 +111,9 @@ router.get(
       };
     }
     where.audit_log = {
-      user : {
+      user: {
         username: req.params.username,
-      }
+      },
     };
 
     const filter_query = {

api/src/routes/workflows.js

@@ -13,19 +13,33 @@ const prisma = require('@/db');
 const isPermittedTo = accessControl('workflow');
 const router = express.Router();
 
+router.get(
+  '/names',
+  isPermittedTo('read'),
+  asyncHandler(
+    async (req, res, next) => {
+      const workflows_names = Object.keys(config.workflow_registry);
+      res.json(workflows_names);
+    },
+  ),
+);
+
 router.get(
   '/',
   isPermittedTo('read'),
   validate([
     query('dataset_id').isInt().toInt().optional(),
     query('dataset_name').isString().optional().notEmpty(),
     query('workflow_id').isString().optional().notEmpty(),
+    query('workflow_name').isString().optional().notEmpty(),
   ]),
   asyncHandler(
     async (req, res, next) => {
       // #swagger.tags = ['Workflow']
 
-      const { dataset_id, dataset_name, workflow_id } = req.query;
+      const {
+        dataset_id, dataset_name, workflow_id, workflow_name,
+      } = req.query;
       let workflow_ids = null;
 
       // if workflow_id is provided, then ignore dataset_id and dataset_name
@@ -76,6 +90,7 @@ router.get(
         skip: req.query.skip,
         limit: req.query.limit,
         workflow_ids,
+        workflow_name,
       });
 
       // for each workflow, get initiator details from the app db

api/src/services/workflow.js

@@ -14,6 +14,7 @@ function getAll({
   skip = null,
   limit = null,
   workflow_ids = null,
+  workflow_name = null,
 } = {}) {
   return wfApi.get('/workflows', {
     params: {
@@ -24,6 +25,7 @@ function getAll({
       skip,
       limit,
       workflow_id: workflow_ids,
+      workflow_name,
     },
     paramsSerializer: {
       // to create workflow_id=123&workflow_id=456

ui/src/components/runs/WorkflowSearchInputFilter.vue

@@ -13,24 +13,56 @@
     >
     </va-select>
 
-    <va-input
-      class="flex-1"
-      v-model="search_text"
-      :placeholder="`Search by ${getSearchByLabel(search_by)}`"
-      clearable
-      :type="search_by === 'dataset_id' ? 'number' : 'text'"
-    />
+    <div class="flex-1">
+      <!-- Dropdown for search by Workflow Name -->
+      <va-select
+        v-if="search_by === 'workflow_name'"
+        class="w-full"
+        v-model="search_text"
+        :options="workflow_names"
+        text-by="label"
+        value-by="key"
+        placeholder="Select Workflow"
+        clearable
+      />
+      <!-- Autocomplete for search by Dataset Name -->
+      <DatasetSelectAutoComplete
+        v-else-if="search_by === 'dataset_name'"
+        class="w-full"
+        v-model:selected="selected_dataset"
+        v-model:search-term="dataset_search_text"
+        @clear="resetDatasetSearch"
+        @close="onDatasetSearchClose"
+        :placeholder="`Search by ${getSearchByLabel(search_by)}`"
+      />
+      <!-- Inputs for search by Workflow ID / Dataset Id -->
+      <va-input
+        v-else
+        class="w-full"
+        v-model="search_text"
+        :placeholder="`Search by ${getSearchByLabel(search_by)}`"
+        clearable
+        :type="search_by === 'dataset_id' ? 'number' : 'text'"
+      />
+    </div>
   </div>
 </template>
 
 <script setup>
+import workflowService from "@/services/workflow";
+
 const search_by = defineModel("search_by", { type: String, required: true });
 const search_text = defineModel("search_text", {
   type: String,
   required: true,
 });
 // const props = defineProps({});
 
+const selected_dataset = ref(null);
+const dataset_search_text = ref("");
+
+const workflow_names = ref([]);
+
 const search_by_options = [
   {
     label: "Dataset Name",
@@ -44,14 +76,64 @@ const search_by_options = [
     label: "Workflow ID",
     key: "workflow_id",
   },
+  {
+    label: "Workflow Name",
+    key: "workflow_name",
+  },
 ];
 
 function getSearchByLabel(key) {
   return search_by_options.find((o) => o.key === key)?.label;
 }
 
+function resetDatasetSearch() {
+  selected_dataset.value = null;
+  dataset_search_text.value = "";
+}
+
+function onDatasetSearchClose() {
+  if (!selected_dataset.value) {
+    dataset_search_text.value = "";
+  } else {
+    dataset_search_text.value = selected_dataset.value?.name || "";
+  }
+}
+
+function toTitleCase(text) {
+  return text
+    .replace(/_/g, " ")
+    .split(" ")
+    .filter((segment) => segment.length > 0)
+    .map((word) => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase())
+    .join(" ");
+}
+
 // clear search text when user selects a new search by option
 watch(search_by, () => {
+  // clear search-field's search text
   search_text.value = "";
+  // clear Dataset-Search attributes
+  selected_dataset.value = null;
+  dataset_search_text.value = "";
+});
+
+onMounted(() => {
+  workflowService
+    .getWorkflowNames()
+    .then((res) => {
+      workflow_names.value = res.data.map((wf_name) => {
+        return {
+          key: wf_name,
+          label: toTitleCase(wf_name),
+        };
+      });
+    })
+    .catch(() => {
+      // console.error("error fetching workflow names");
+    });
+});
+
+watch(selected_dataset, () => {
+  search_text.value = selected_dataset.value?.name || "";
 });
 </script>

ui/src/services/datetime.js

@@ -153,6 +153,5 @@ export {
   fromNow,
   getMidnightNextDay,
   readableDuration,
-  time
+  time,
 };
-

ui/src/services/utils.js

@@ -381,6 +381,5 @@ export {
   navigateBackSafely,
   setIntersection,
   union,
-  validateEmail
+  validateEmail,
 };
-

ui/src/services/workflow.js

@@ -3,12 +3,17 @@ import api from "./api";
 const DONE_STATUSES = ["REVOKED", "FAILURE", "SUCCESS"];
 
 class WorkflowService {
+  getWorkflowNames() {
+    return api.get("/workflows/names");
+  }
+
   getAll({
     last_task_run = false,
     prev_task_runs = false,
     workflow_id = null,
     dataset_id = null,
     dataset_name = null,
+    workflow_name = null,
     status = null,
     skip = 0,
     limit = 10,
@@ -24,6 +29,7 @@ class WorkflowService {
         limit,
         dataset_id,
         dataset_name,
+        workflow_name,
         initiator,
       },
       paramsSerializer: {