Search VX workflows

conf/application.conf

@@ -150,8 +150,8 @@ features {
   taskReopenAllowedInSeconds = 30
   allowDeleteDatasets = true
   # to enable jobs for local development, use "yarn enable-jobs" to also activate it in the database
-  jobsEnabled = false
-  voxelyticsEnabled = false
+  jobsEnabled = true
+  voxelyticsEnabled = true
   # For new users, the dashboard will show a banner which encourages the user to check out the following dataset.
   # If isWkorgInstance == true, `/createExplorative/hybrid/true` is appended to the URL so that a new tracing is opened.
   # If isWkorgInstance == false, `/view` is appended to the URL so that it's opened in view mode (since the user might not

frontend/javascripts/admin/voxelytics/workflow_list_view.tsx

@@ -1,6 +1,6 @@
-import React, { useMemo, useState } from "react";
+import React, { useEffect, useMemo, useState } from "react";
 import { SyncOutlined } from "@ant-design/icons";
-import { Table, Progress, Tooltip, Button } from "antd";
+import { Table, Progress, Tooltip, Button, Input } from "antd";
 import { Link } from "react-router-dom";
 import { getVoxelyticsWorkflows } from "admin/admin_rest_api";
 import {
@@ -12,6 +12,18 @@ import { usePolling } from "libs/react_hooks";
 import { formatCountToDataAmountUnit, formatDateMedium, formatNumber } from "libs/format_utils";
 import Toast from "libs/toast";
 import { runStateToStatus, VX_POLLING_INTERVAL } from "./utils";
+import Persistence from "libs/persistence";
+import * as Utils from "libs/utils";
+import { PropTypes } from "@scalableminds/prop-types";
+
+const { Search } = Input;
+
+const persistence = new Persistence<Pick<{ searchQuery: string }, "searchQuery">>(
+  {
+    searchQuery: PropTypes.string,
+  },
+  "workflowList",
+);
 
 function parseRunInfo(runInfo: VoxelyticsWorkflowListingRun): VoxelyticsWorkflowListingRun {
   return {
@@ -43,6 +55,21 @@ type RenderRunInfo = VoxelyticsWorkflowListingRun & {
 export default function WorkflowListView() {
   const [isLoading, setIsLoading] = useState(false);
   const [workflows, setWorkflows] = useState<Array<VoxelyticsWorkflowListing>>([]);
+  const [searchQuery, setSearchQuery] = useState("");
+
+  function handleSearch(event: React.ChangeEvent<HTMLInputElement>): void {
+    setSearchQuery(event.target.value);
+  }
+
+  useEffect(() => {
+    const { searchQuery } = persistence.load();
+    setSearchQuery(searchQuery || "");
+    loadData();
+  }, []);
+
+  useEffect(() => {
+    persistence.persist({ searchQuery });
+  }, [searchQuery]);
 
   async function loadData() {
     setIsLoading(true);
@@ -127,9 +154,16 @@ export default function WorkflowListView() {
   return (
     <div className="container voxelytics-view">
       <div className="pull-right">
-        <Button onClick={() => loadData()}>
+        <Button onClick={() => loadData()} style={{ marginRight: 20 }}>
           <SyncOutlined spin={isLoading} /> Refresh
         </Button>
+        <Search
+          style={{
+            width: 200,
+          }}
+          onChange={handleSearch}
+          value={searchQuery}
+        />
       </div>
       <h3>Voxelytics Workflows</h3>
       <Table
@@ -218,7 +252,7 @@ export default function WorkflowListView() {
             render: (run: RenderRunInfo) => run.endTime && formatDateMedium(run.endTime),
           },
         ]}
-        dataSource={renderRuns}
+        dataSource={Utils.filterWithSearchQueryAND(renderRuns, ["workflowName"], searchQuery)}
       />
     </div>
   );