feat: Add search through resources functionality

[yahia3200]

Demo

Changes Made

• Seprate Navbar into a seprate file
• Implement search with debounce function
• separate filtering and search logic in a custom react hook
• focus on search input when ctrl + f are pressed

Additional Notes

For now, the search is done using the resource name only but this can easily be extended to different resource attributes

[mshudrak]

@yahia3200 could you please add a simple manual on how to run the tool in the description here? https://github.com/google/gcp_scanner#working-with-results. I want to run it to test and provide feedback.

[yahia3200]

@mshudrak for now to work with the vis tool you need node.js to be installed on your system and following this steps

cd visualization_tool npm i npm run dev

As this not the way that the user should use the tool, I didn't add these steps to the repo In the future I will add a build step and bundle the tool with gcp scanner and use flask to start the tool. This is partially done but not complete yet

[mshudrak]

Thanks. it works for me. I am trying to load test report but it shows just "no resource found". Am I doing something wrong? I also left 2 comments/questions

[yahia3200]

I saw the two comments but didn't see this one After you upload the file, did you click on the plus icon ?

[mshudrak]

All good, sometimes it is hard to see them :) Yes, I upload the file and clicked on plus button.

[mshudrak]

You can try it on your own. test.zip

[yahia3200]

I made a mistake in renaming the resources in the tool and the final I'm using for demo. The tool now only parses the compute_instances and compute_disks resources not storage_buckets.

I made a commit to fix this issue and use names Compute Instance and Compute Disk instead of GCE and GCS In my plan that In the next PR the tool should parse all resources in the light_version_scan_schema