Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

dashboard: Add search box and link to URL #22

Open
wants to merge 4 commits into
base: main
Choose a base branch
from

Conversation

afinn12
Copy link
Contributor

@afinn12 afinn12 commented Nov 5, 2024

Needed

Description

  • Implemented form component that handles searching.
    • Appends search terms to URL.
      • matchMode= matchAny/matchAll (or/and)
      • Filters job based on "value" --> contains only
    • "Keep Search Terms" button keeps the existing search terms in the URL, adding the new rule.
      • If not selected, the search erases the previous search terms, only searching for the new rule.
    • "Clear Search" button clears the search terms, if they exist.

Possible Feature

  • Could implement a button "Change Match Mode" that keeps the current search parameters, but toggles between Match Any/Match All
  • Could implement an excludes option (currently, only contains)

Testing

  • Tested in dev
  • Tested in prod

in prod:

Default:
image

Searching with the form appends to URL:
image

Adding another search with "Keep Search Terms" appends to the URL:
(will update matchMode (and/or) if it changes)
image

Adding another search without "Keep Search Terms" appends to the URL:
image

Selecting "Clear Search":
image

@afinn12 afinn12 marked this pull request as ready for review November 5, 2024 21:44
@afinn12 afinn12 changed the title Url search dashboard: add search/link to URL Nov 6, 2024
@afinn12 afinn12 changed the title dashboard: add search/link to URL dashboard: add search box and link to URL Nov 6, 2024
@afinn12 afinn12 changed the title dashboard: add search box and link to URL dashboard: Add search box and link to URL Nov 6, 2024
Copy link
Contributor

@a1icja a1icja left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Minor changes again - Sorry D:

pages/index.js Outdated Show resolved Hide resolved
pages/index.js Outdated Show resolved Hide resolved
pages/index.js Outdated
Comment on lines 47 to 87
// Filters the jobs s.t. all values must be contained in the name.
const matchAll = (filteredJobs, urlParams) => {
const values = urlParams.getAll("value");
return filteredJobs.filter((job) => {
const jobName = job.name.toLowerCase();
return values.every((val) => {
const decodedValue = decodeURIComponent(val).toLowerCase();
return jobName.includes(decodedValue);
});
});
};

// Filters the jobs s.t. at least one value must be contained in the name.
const matchAny = (filteredJobs, urlParams) => {
const values = urlParams.getAll("value");
return filteredJobs.filter((job) => {
const jobName = job.name.toLowerCase();
return values.some((val) => {
const decodedValue = decodeURIComponent(val).toLowerCase();
return jobName.includes(decodedValue);
});
});
};


Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is there not already an existing implementation for this somewhere? Just curious

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

How do you mean? Besides .some/.every?
We could pull the values out of the URL before passing them into the function. Then, it's just a filter. A little simpler maybe?

pages/index.js Outdated Show resolved Hide resolved
pages/index.js Outdated Show resolved Hide resolved
pages/index.js Outdated Show resolved Hide resolved
@afinn12 afinn12 marked this pull request as draft November 6, 2024 18:19
@afinn12 afinn12 marked this pull request as ready for review November 7, 2024 17:34
@afinn12 afinn12 force-pushed the url-search branch 3 times, most recently from fe876d0 to bcb9abc Compare November 22, 2024 21:11
@afinn12 afinn12 force-pushed the url-search branch 2 times, most recently from 0d7a6c6 to cee8258 Compare December 6, 2024 17:51
Added a script that fetches PR data and created a separate view on the dashboard.
Tweaked dotenv require.

Fixes kata-containers#1

Signed-off-by: Anna Finn <[email protected]>
Added code to get rerun information to both fetch scripts.
Display the reruns as a superscript in the rowExpansionTemplate with the result/URL.

Fixes: kata-containers#8

Signed-off-by: Anna Finn <[email protected]>
Added a separate view to display all tests for a given PR.
Added the display to the URL, rowExpansionTemplate is unchanged.

Fixes: kata-containers#12

Signed-off-by: Anna Finn <[email protected]>
Adds an input form for searching job names. Searches are appended to the URL.

Fixes kata-containers#4

Signed-off-by: Anna Finn <[email protected]>
@afinn12
Copy link
Contributor Author

afinn12 commented Dec 6, 2024

Changes

  • Removed Clear Search/Keep Search Terms
  • Removed matchMode (any/all)
    • Only supports 1 term at a time

To reimplement, define clearSearch:

// Clear the search parameters, but only if they exist.
  const clearSearch = () => {
    if(window.location.href.includes("matchMode")){
      const path = new URLSearchParams();
      path.append("display", display);
      if (display === "prsingle" && selectedPR) {
        path.append("pr", selectedPR);
      }
      window.location.assign(`${basePath}/?${path.toString()}`);
    }
  };

Modify handleSearch:

const handleSearch= (e) => {
    // Prevent the default behavior so that we can keep search terms.
    e.preventDefault();
    const matchMode = e.target.matchMode.value;
    const value = e.target.value.value.trimEnd(); 
    if (value) {  
      // Append the new matchMode regardless of if search terms were kept.
      const path = new URLSearchParams();
      path.append("display", display);
      if(display === "prsingle" && selectedPR){
        path.append("pr", selectedPR);
      }
      path.append("matchMode", matchMode);
      if (keepSearch) {
        // If keepSearch is true, add existing parameters in the URL.
        const urlParams = new URLSearchParams(window.location.search);
        urlParams.getAll("value").forEach((val) => {
          path.append("value", val); 
        });
      }
      //Add the search term from the form and redirect. 
      path.append("value", encodeURIComponent(value)); 
      window.location.assign(`${basePath}/?${path.toString()}`);
    }
  };

Add buttons to use:

      <button 
              className={buttonClass()} 
              onClick={() => clearSearch()}>
              Clear Search
            </button>
            <button 
              className={buttonClass(keepSearch)} 
              onClick={() => setKeepSearch(!keepSearch)}>
              Keep URL Search Terms
       </button>

  • Users don't have to manually clear the URL

  • Tested in dev and prod
    image

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants