falcosecurity / falco-playground Goto Github PK

View Code? Open in Web Editor NEW

18.0 18.0 17.0 133.63 MB

Web-application used to validate Falco rules and test against scap file

Home Page: http://play.falco.org

License: Apache License 2.0

HTML 1.45% TypeScript 87.83% CSS 5.88% JavaScript 4.84%

hacktoberfest wasm

falco-playground's People

Contributors

Stargazers

Watchers

Forkers

junior mikegcoleman zaydzezu7 jvgirish rohith-raju tunabearfish anniepauline mukeshmx antidoid wooodhead shreyass-ranganatha dhyutitewani roshanbhadauriya jes14 caiquecoelho issif lucaguerra

falco-playground's Issues

Wasm download status bar

Motivation

Right now, we don't have a proper way to inform the user about the status of the wasm file. The Wasm file is around 9 MB (as of now) and it takes a while to download. 1 min 30 sec in my case.

If it's the user's first visit, it takes quite a bit of time and during that time user is blocked. After the first visit, the wasm file is cached and loaded in a few seconds the second time around.

First visit (wasm is not cached)

Second visit (wasm is cached)

Feature

During this period, a user might feel the website is broken. Although efforts are being made to reduce the wasm file, It would be nice to indicate to the user the current status of the wasm file through a progress bar. Here's an example

Link: https://ant.design/components/progress

To reproduce this error , load the website in incognito mode.

Test case to check the maximum shareable file size

Motivation

Right now, the share button base64 encodes the entire rules written in the editor.

Feature

We need to check the maximum amount of rules that can be encoded. To accomplish this, we need to attempt to break the functionality of the share button by continuously adding more rules. We need to find that threshold and alert the user to prevent inconsistencies.

falco-playground/src/components/Sidebar/Sidebar.tsx

Lines 198 to 207 in 9ddf921

    
             const handleShare = () => { 
        
               const urlConstructor = new URLSearchParams(); 
        
               const data = encodedYaml(code); 
        
               urlConstructor.append("code", data); 
        
               const URL = `${window.location.origin}${ 
        
                 window.location.pathname 
        
               }#/?${urlConstructor.toString()}`; 
        
               navigator.clipboard.writeText(URL); 
        
               message.success("Copied URL to clipboard"); 
        
             };

Adding test coverage for checking drop-down for 'Run with scap'

Motivation
Ensuring that a drop-down exists when cursor hovers over the "Run with scap".

Feature
Adding a test case to check if the drop-down is visible when hovering over the "Run with scap" button.

Additional context

fix: Incorrect Testing Command in `README.md`

Describe the bug

Incorrect testing command in the README.md file. Under CLI testing, the command does not start testing.

Expected behaviour

The command should use cypress to start testing.

Support Dark Mode

Motivation

Right now falco-playground can be used in light mode.

Feature

Add support to Dark mode

Fix text color during on-click event

Describe the bug

Right now, the navigation bar changes text colour to back when clicked.

How to reproduce it

Open Falco-playground in mobile view

Expected behaviour

The click event should change the element's colour to white. In other words, the text should change to white colour.

Screenshots
screen-recorder-wed-oct-11-2023-16-27-48.webm

Automate downloading falco artifacts

Motivation

Right now, the Steps involved in downloading the artifacts are quite cumbersome.
https://github.com/falcosecurity/falco-playground#steps-to-download-additional-artifacts

Feature
Create a download script that automatically downloads the artifact and moves them into specific folders. Something like npm run download

falco-playground/package.json

Lines 8 to 15 in 2153d90

    
           "predeploy": "npm run build", 
        
           "deploy": "gh-pages -d dist", 
        
           "dev": "vite", 
        
           "build": "tsc && vite build --base=./ ", 
        
           "cy:open": "cypress open", 
        
           "cy:run": "cypress run", 
        
           "lint": "eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings 0", 
        
           "fix": "eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings 0 --fix",

Add new workflow when pull request is created

Motivation

Right now, we only test when we push to the master branch.

Feature

We need to add a new workflow to run Cypress tests when a new pull request is created.

falco-playground/.github/workflows/deploy.yaml

Lines 3 to 8 in 2153d90

Additional context

Add `ws` as a new dependency

Describe the bug

The JS file emitted by emscripten falco.js depends on a websockets

How to reproduce it

npm run dev

Expected behaviour

No errors

Screenshots

Fix: Github star button

Describe the bug

Right now, GitHub star button isn't showing the correct value.

falco-playground/src/components/Navbar/Navbar.tsx

Lines 27 to 34 in 4dfca29

    
           <GitHubButton 
        
             href="https://github.com/falcosecurity/falco-playground" 
        
             data-size="large" 
        
             data-show-count="true" 
        
             aria-label="Star falcosecurity/falco-playground on GitHub" 
        
           > 
        
             Star 
        
           </GitHubButton>

Reference: https://buttons.github.io/

How to reproduce it

Go to falco-playground

Expected behaviour

The value on the playground should correlate with the actual amount of stars. As of now it is

Add falco icon to falco-playground

Motivation

Right now, falco-playground dosen't have any icon

Feature

Add the falco icon which looks something like this.

Run with scap fails with "Error: Option ‘e’ does not exist"

Describe the bug / how to reproduce

go to https://falcosecurity.github.io/falco-playground/
select "run with scap" from the dropdown and click on a scap file
the terminal reports "Error: Option ‘e’ does not exist"

Expected behaviour

The scap file is loaded

Screenshots

Environment

Current master ( e113162 )

Add more test coverage

Motivation

Right now there are only a few test cases that cover basic functionality process.

falco-playground/cypress/e2e/home.cy.ts

Lines 5 to 28 in 4dfca29

    
           it("Check for nav bars", () => { 
        
             cy.visit("/"); 
        
             cy.contains("Blog"); 
        
             cy.contains("Docs"); 
        
             cy.contains("Community"); 
        
             cy.contains("About"); 
        
           }); 
        
           it("Check for Monaco Editor", () => { 
        
             cy.visit("/"); 
        
             cy.get(".monaco-editor"); 
        
           }); 
        
           it("Check for Buttons and terminal", () => { 
        
             cy.visit("/"); 
        
             cy.get("button").should("be.enabled").contains("Run"); 
        
             cy.get("button").should("be.enabled").contains("Import Yaml"); 
        
             cy.get("button").should("be.enabled").contains("Copy"); 
        
             cy.get("button").should("be.enabled").contains("Download"); 
        
             cy.get("button").should("be.enabled").contains("Load Examples"); 
        
             cy.get("button").should("be.enabled").contains("Run with scap"); 
        
             cy.get("button").should("be.enabled").contains("Share"); 
        
             cy.get("button").should("be.enabled").contains("Upload scap and run"); 
        
             const date = new Date(); 
        
             cy.get(".terminal-success").contains(date.getDate(), { timeout: 25000 }); 
        
           });

Feature

Add more test cases that cover features and it's edge cases like

Allow selecting the Falco version we want to run the playground with

Motivation

While not every version of Falco can be executed with every playground version, it would be nice to allow users to select what they would like to have a drop-down menu where to select the version of Falco they want to test in the playground. Now that we have introduced releases, I believe this became a possibility

Alternatives

Run only with the latest released version, like it is today

	on:
	push:
	branches:
	- "main"

	jobs:

	const handleShare = () => {
	const urlConstructor = new URLSearchParams();
	const data = encodedYaml(code);
	urlConstructor.append("code", data);
	const URL = `${window.location.origin}${
	window.location.pathname
	}#/?${urlConstructor.toString()}`;
	navigator.clipboard.writeText(URL);
	message.success("Copied URL to clipboard");
	};

	"predeploy": "npm run build",
	"deploy": "gh-pages -d dist",
	"dev": "vite",
	"build": "tsc && vite build --base=./ ",
	"cy:open": "cypress open",
	"cy:run": "cypress run",
	"lint": "eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
	"fix": "eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings 0 --fix",

	<GitHubButton
	href="https://github.com/falcosecurity/falco-playground"
	data-size="large"
	data-show-count="true"
	aria-label="Star falcosecurity/falco-playground on GitHub"
	>
	Star
	</GitHubButton>

	it("Check for nav bars", () => {
	cy.visit("/");
	cy.contains("Blog");
	cy.contains("Docs");
	cy.contains("Community");
	cy.contains("About");
	});
	it("Check for Monaco Editor", () => {
	cy.visit("/");
	cy.get(".monaco-editor");
	});
	it("Check for Buttons and terminal", () => {
	cy.visit("/");
	cy.get("button").should("be.enabled").contains("Run");
	cy.get("button").should("be.enabled").contains("Import Yaml");
	cy.get("button").should("be.enabled").contains("Copy");
	cy.get("button").should("be.enabled").contains("Download");
	cy.get("button").should("be.enabled").contains("Load Examples");
	cy.get("button").should("be.enabled").contains("Run with scap");
	cy.get("button").should("be.enabled").contains("Share");
	cy.get("button").should("be.enabled").contains("Upload scap and run");
	const date = new Date();
	cy.get(".terminal-success").contains(date.getDate(), { timeout: 25000 });
	});

falcosecurity / falco-playground Goto Github PK

falco-playground's People

Contributors

Stargazers

Watchers

Forkers

falco-playground's Issues

First visit (wasm is not cached)

Second visit (wasm is cached)

Feature

Recommend Projects

Recommend Topics

Recommend Org