Move SOARCA GUI to React

[Paul2803k]

With the blessing of @MaartendeKruijf , I am making a start porting the GUI to a React based stack, based on TypeScript.
In this way, we hope to reorganize the UI into reusable components, easing development, helping with maintaining a cleaner and more consistent look and making the project more accessible to other devs for help.

As of now, not much functionality has been implemented, but the pages included are:

• Login page
• Dashboard without content
• Dashboard connection indicator (working)
• 404 page
• Setting page without content
• Monitoring overview page, with the overview of the executing(ed) playbooks.
• Monitoring details of each execution with timeline.
• Manual step, where the user can submit a variable to SOARCA while confirming or rejecting the action.
• Playbooks overview page
• Playbook detail page
• Playbook create/edit pages, where the user can edit the JSON of a playbook or upload a JSON file.

The effort also includes standardization of themes and components.
Thoughts and feedback is greatly appreciated!

Note

The README file has been updated with new instruction to run the project.

Warning

Most CI/CD has been removed, besides the branch naming and a basic CI script for linting and building the docker image.

Here some screen shots for the looks:

• Login page:

• Main page:

• 404 page:

• Monitoring page:

• Monitoring detail page, timeline view:

• Monitoring detail page, detailed view:

• Playbooks overview page:

• Playbooks details page:

• Playbooks edit page:

• Playbooks create page:

What is left to be done to get back to the current functionality?

• Implement the Reporting page, with live visualization of playbooks executions, details on each execution and user action for steps during the execution.
• Add username/password land OICD log-in logic. It seems that SOARCA has a certain support for it but I have not seen it working, I would not mind some info on that :)
• Mock of a settings page.

Any ideas on what could it be added next?

• Playbooks CRUD even if simple, as I am told that a playbook editor has been already made.
• Translation
• Define a consistent theme with feedback from others and dark mode.
• Dashboard content and user settings content
• More! any ideas?