feature(WorkArea.svelte): Add global search to the Workspace

This commit adds a global search bar to the Workspace page. This bar
allows user to search Argus for any test, group or release names, as
well as specific run ids. The following hapens for each:

* Test: a Test selector is added and shown to the user.
* Group: all Tests from a Group are added to the selector.
* Release: a Grid View is shown to the user to pick a single group or
  test
* Test Run: a Test selector is added with a selected run automatically
  opened

argus/backend/service/planner_service.py

@@ -204,7 +204,7 @@ def get_gridview_for_release(self, release_id: str | UUID) -> dict[str, dict]:
         tests_by_group = reduce(lambda acc, test: acc[str(test.group_id)].append(test) or acc, tests, defaultdict(list))
 
         res = {
-            "tests": { str(t.id): TestLookup.index_mapper(t) for t in tests if t.enabled and groups[str(t.group_id)]["enabled"] },
+            "tests": { str(t.id): TestLookup.index_mapper(t) for t in tests if t.enabled and groups.get(str(t.group_id), {}).get("enabled", False) },
             "groups": groups,
             "testByGroup": tests_by_group
         }

argus/backend/service/test_lookup.py

@@ -4,11 +4,14 @@
 from functools import partial
 import re
 from urllib.parse import unquote
-from typing import Callable
+from typing import Any, Callable
 from uuid import UUID
 
 from cassandra.cqlengine.models import Model
 from argus.backend.models.web import ArgusGroup, ArgusRelease, ArgusTest
+from argus.backend.plugins.core import PluginModelBase
+from argus.backend.plugins.loader import all_plugin_models
+from argus.backend.util.common import get_build_number
 
 
 class TestLookup:
@@ -36,8 +39,72 @@ def explode_group(cls, group_id: UUID | str):
 
         return exploded
 
+    @classmethod
+    def find_run(self, run_id: UUID) -> PluginModelBase | None:
+        for model in all_plugin_models():
+            try:
+                return model.get(id=run_id)
+            except model.DoesNotExist:
+                pass
+        return None
+
+
+    @classmethod
+    def query_to_uuid(cls, query: str) -> UUID | None:
+        try:
+            uuid = UUID(query.strip())
+            return uuid
+        except ValueError:
+            return None
+
+    @classmethod
+    def resolve_run_test(cls, test_id: UUID) -> ArgusTest:
+        try:
+            test = ArgusTest.get(id=test_id)
+            return test
+        except ArgusTest.DoesNotExist:
+            return None
+
+    @classmethod
+    def resolve_run_group(cls, group_id: UUID) -> ArgusGroup:
+        try:
+            group = ArgusGroup.get(id=group_id)
+            return group
+        except ArgusGroup.DoesNotExist:
+            return None
+
+    @classmethod
+    def resolve_run_release(cls, run_test_id: UUID) -> ArgusRelease:
+        try:
+            release = ArgusRelease.get(id=run_test_id)
+            return release
+        except ArgusRelease.DoesNotExist:
+            return None
+
+    @classmethod
+    def make_single_run_response(cls, run_id: UUID) -> list[dict[str, Any]]:
+        run = cls.find_run(run_id)
+        if run:
+            run = dict(run.items())
+            run["type"] = "run"
+            run["test"] = dict(cls.resolve_run_test(run["test_id"]).items()) if run["test_id"] else None
+            if run["test"]:
+                name = run["test"]["name"]
+            run["group"] = dict(cls.resolve_run_group(run["group_id"]).items())if run["group_id"] else None
+            run["release"] = dict(cls.resolve_run_release(run["release_id"]).items()) if run["release_id"] else None
+            run["build_number"] = get_build_number(run["build_job_url"])
+            run["name"] = f"{name}#{run['build_number']}"
+
+            return [run]
+
+
+        return []
+
     @classmethod
     def test_lookup(cls, query: str, release_id: UUID | str = None):
+        if uuid := cls.query_to_uuid(query):
+            return cls.make_single_run_response(uuid)
+
         def check_visibility(entity: dict):
             if entity["type"] == "release" and release_id:
                 return False

frontend/AdminPanel/ViewSelectItem.svelte

@@ -8,7 +8,8 @@
         test: "T",
         group: "G",
         release: "R",
-        special: "S"
+        special: "S",
+        run: "R",
     };
 </script>
 
@@ -23,8 +24,13 @@
         <div class="me-2"><span class="fw-bold">{ITEM_TYPES[item.type]}</span></div>
         <div>{item.pretty_name || item.name}</div>
         <div class="ms-auto d-flex justify-content-end align-items-center text-sm">
-            {#if item.release}
+            {#if item.test}
                 <div>
+                    <span class="fw-bold">{item.test?.name}</span>
+                </div>
+            {/if}
+            {#if item.release}
+                <div class="ms-2">
                     <span class="fw-bold">{item.release?.name}</span>
                 </div>
             {/if}

frontend/ReleasePlanner/ReleasePlannerGridView.svelte

@@ -9,6 +9,7 @@
 
     export let release = {};
     export let mode = "multi";
+    export let format = "list";
     export let groupOnly = false;
     export let existingPlans = [];
     let filterExisting = false;
@@ -75,7 +76,7 @@
 
     const retrieveGroupName = function(groupId) {
         const group = gridView.groups[groupId];
-        return (group.pretty_name || group.name) ?? "#NO_GROUP";
+        return (group?.pretty_name || group?.name) ?? "#NO_GROUP";
     };
 
     const onTestClick = function (test) {
@@ -95,10 +96,17 @@
             .entries(clickedTests)
             .filter(([_, selected]) => selected)
             .map(([tid, _]) => gridView.tests[tid]);
-        let items = [...selectedGroups, ...selectedTests];
-        dispatch("gridViewConfirmed", {
-            items: items,
-        });
+        if (format == "list") {
+            let items = [...selectedGroups, ...selectedTests];
+            dispatch("gridViewConfirmed", {
+                items: items,
+            });
+        } else if (format == "map") {
+            dispatch("gridViewConfirmed", {
+                tests: selectedTests,
+                groups: selectedGroups,
+            });
+        }
     };
 
     /**
@@ -206,9 +214,10 @@
                 .sort(
                     ([leftGroupId], [rightGroupId]) => sortFunc(retrieveGroupName(leftGroupId).toLowerCase(), retrieveGroupName(rightGroupId).toLowerCase())
                 ) as [groupId, tests] (groupId)}
-            {@const group = gridView.groups[groupId]}
-            {@const prettyName = group.pretty_name ?? group.name}
-            {@const groupStats = releaseStats?.groups[group.id]}
+            {@const group = gridView.groups[groupId] ?? {}}
+            {@const prettyName = group?.pretty_name ?? group?.name}
+            {@const groupStats = releaseStats?.groups[group?.id]}
+            {#if group && groupStats}
                 <div class="mb-2 rounded bg-white p-2 border-success" class:border={clickedGroups[group.id]} style="border-size: 4px" class:d-none={shouldFilter(group, filterExisting)}>
                     <div
                         class="fw-bold align-items-center d-flex mb-2"
@@ -293,6 +302,7 @@
                         </div>
                     {/if}
                 </div>
+            {/if}
             {/each}
         </div>
     {:else}

frontend/ReleasePlanner/SearchBar.svelte

@@ -21,7 +21,7 @@
         try {
             const params = {
                 query: query,
-                releaseId: release.id,
+                releaseId: release ?  release.id : null,
             };
             const qs = queryString.stringify(params);
             const response = await fetch("/api/v1/planning/search?" + qs);
@@ -66,8 +66,13 @@
             name: item.pretty_name || item.name,
             release: item.release?.name,
             group: item.group?.pretty_name || item.group?.name,
+            test: item.test?.name,
+            testId: item.test?.id,
+            groupId: item.group?.id,
+            releaseId: item.release?.id,
             type: item.type,
             id: item.id,
+
         }];
         testSearcherValue = undefined;
         if (mode == "single") handleFinishSearch();
@@ -77,6 +82,7 @@
         dispatch("selected", {
             items: items,
         });
+        items = [];
     };
 
 </script>
@@ -86,8 +92,8 @@
         id="viewSelectComponent"
         inputAttributes={{ class: "form-control" }}
         bind:value={testSearcherValue}
-        placeholder="Search for tests..."
-        noOptionsMessage="Type to search. Can be: Test name, Release name, Group name."
+        placeholder="Type to search. Can be: Test name, Release name, Group name."
+        noOptionsMessage='Examples: "release:5.4 artifacts" (any test or group inside 5.4 named artifacts), "group:artifacts centos release:5.3" (tests that contain centos substring inside 5.3 in the artifacts groups), "<test_uuid>" (specific test run id)'
         labelIdentifier="name"
         optionIdentifier="id"
         Item={ViewSelectItem}

frontend/WorkArea/TestRuns.svelte

@@ -12,7 +12,7 @@
     import { AVAILABLE_PLUGINS } from "../Common/PluginDispatch";
     import { sendMessage } from "../Stores/AlertStore";
     import TestRunsMessage from "./TestRunsMessage.svelte";
-    import { faGear, faRefresh, faTimes } from "@fortawesome/free-solid-svg-icons";
+    import { faGear, faTimes } from "@fortawesome/free-solid-svg-icons";
     import Fa from "svelte-fa";
     import { Collapse } from "bootstrap";
     import JobConfigureModal from "./JobConfigureModal.svelte";
@@ -234,6 +234,7 @@
             console.log(json);
         }
         pluginFixed = true;
+        main();
     };
 
     const handleIgnoreRuns = async function(e) {
@@ -271,15 +272,17 @@
         }
     };
 
-    onMount(async () => {
+    const main = async () => {
         await fetchTestInfo();
         if (testInfo) {
             fetchTestRuns();
             runRefreshInterval = setInterval(async () => {
                 fetchTestRuns();
             }, 120 * 1000);
         }
-    });
+    };
+
+    onMount(main);
 
     onDestroy(() => {
         if (runRefreshInterval) {
@@ -320,7 +323,7 @@
                 </div>
             {/if}
             {#if removableRuns}
-                <div class="ms-1 me-2" class:flex-fill={runs.length == 0}>
+                <div class="me-2" class:ms-1={runs.length > 0} class:ms-auto={runs.length == 0} >
                     <button
                         class="btn"
                         on:click={(e) => { dispatch("testRunRemove", { testId: testId }); e.stopPropagation(); }}

frontend/WorkArea/TestRunsPanel.svelte

@@ -1,30 +1,112 @@
 <script>
+    import queryString from "query-string";
+    import ModalWindow from "../Common/ModalWindow.svelte";
     import { stateEncoder } from "../Common/StateManagement";
+    import ReleasePlannerGridView from "../ReleasePlanner/ReleasePlannerGridView.svelte";
+    import SearchBar from "../ReleasePlanner/SearchBar.svelte";
     import TestRuns from "./TestRuns.svelte";
     export let testRuns = [];
     export let workAreaAttached = false;
+    let additionalRuns = {};
     let serializedState = "";
     $: serializedState = stateEncoder(testRuns);
-    let filterStringRuns = "";
-    const isFiltered = function(name = "", filterString = "") {
-        if (filterString == "") {
-            return false;
+
+    let selectingFromGrid = false;
+    let release = null;
+
+    const updateUrl = function () {
+        serializedState = stateEncoder(testRuns);
+        let params = queryString.parse(document.location.search, {arrayFormat: "bracket"});
+        params.state = serializedState;
+        history.pushState({}, "", `?${queryString.stringify(params, {arrayFormat: "bracket"})}`);
+    };
+
+    /**
+     * 
+     * @param {CustomEvent} event
+     */
+    const handleSearch = function(event) {
+        const item = event.detail.items[0];
+        switch (item.type) {
+        case "test": {
+            testRuns.includes(item.id) ? null: testRuns.push(item.id);
+            break;
+        }
+        case "group": {
+            fetchGroupTests(item.id);
+            break;
+        }
+        case "release": {
+            release = item;
+            selectingFromGrid = true;
+            break;
+        }
+        case "run": {
+            const testId = item.testId;
+            if (!testId) break;
+            additionalRuns[testId] = [...(additionalRuns[testId] || []), item.id];
+            testRuns.includes(item.testId) ? null: testRuns.push(item.testId);
+            break;
+        }
+        }
+        testRuns = testRuns;
+        updateUrl();
+    };
+
+    const fetchGroupTests = async function (groupId) {
+        try {
+            const qs = queryString.stringify({ groupId });
+            const res = await fetch("/api/v1/tests?" + qs);
+            const json = await res.json();
+            if (json.status !== "ok") {
+                throw json;
+            }
+            json.response.forEach((test) => {
+                if (!testRuns.includes(test.id)) testRuns.push(test.id);
+            });
+            testRuns = testRuns;
+            updateUrl();
+        } catch (e) {
+            console.log(e);
         }
-        return !RegExp(filterString).test(name);
+    };
+
+    const handleGridSelect = function(e) {
+        const selection = e.detail;
+        selection.tests.forEach((test) => {
+            testRuns.includes(test.id) ? null: testRuns.push(test.id);
+        });
+        selection.groups.forEach((group) => {
+            fetchGroupTests(group.id);
+        });
+        selectingFromGrid = false;
+        release = null; 
+        testRuns = testRuns;
+        updateUrl();
     };
 </script>
 
-{#if Object.keys(testRuns).length > 0}
-<div class="p-2 mb-1 text-end"><a href="/test_runs?state={serializedState}" class="btn btn-secondary btn-sm">Share</a></div>
 <div class="p-2">
-    <input class="form-control" type="text" placeholder="Filter runs" bind:value={filterStringRuns} on:input={() => { testRuns = testRuns; }}>
+    <SearchBar targetType={null} release={null} on:selected={handleSearch}/>
 </div>
+
+{#if selectingFromGrid}
+    <ModalWindow widthClass="w-75" on:modalClose={() => {selectingFromGrid = false; release = null; }}>
+        <div slot="title">Grid View</div>
+        <div slot="body">
+            <ReleasePlannerGridView format="map" {release} on:gridViewConfirmed={handleGridSelect}/>
+        </div>
+    </ModalWindow>
+{/if}
+
+{#if Object.keys(testRuns).length > 0}
+<div class="p-2 mb-1 text-end"><a href="/test_runs?state={serializedState}" class="btn btn-secondary btn-sm">Share</a></div>
 <div class="accordion mb-2" id="accordionTestRuns">
     {#each testRuns as testId (testId)}
         <TestRuns
             {testId}
+            additionalRuns={additionalRuns[testId] ?? []}
             parent="#accordionTestRuns"
-            filtered={isFiltered(testId, filterStringRuns)}
             removableRuns={workAreaAttached}
             on:testRunRemove
         />