kpz-2021-github-actions-builder

About the product

Our goal was to create a GUI for Github Actions pipelines. As of now, GitHub Actions is a Continous Integration/Deployment tool that is integrated directly with GitHub. Currently, after configuring it with YAML files, there could be a scenario, where You would need to wait 30 minutes, just to receive an error. We wanted to make a simple application, that would prevent this kind of situations.

Functionalities

1. Integrated editor
   
   
2. Interpretation of YAML format
   • Conversion to JSON
   • Validation
     
     
   • Error handling:
     - detection of self-links
     - detection of all dependent jobs
     - detection of cycles
     - detection of duplicate needs
     - detection of not-existant job needed
     
     
3. Providing links to used actions
   
   
4. Graphical representation of provided workflow
   
   
5. Changing orientation of diagrams
   
   
6. Hiding editor and diagrams window
   
   
7. Handling matrixes
   
   
8. Autocomplete on shortcut (CTRL+SPACE)
   
   

Roadmap

1. Interpreting a workflow, based on "if" statement
2. Displaying all kinds of errors inline
3. Extend error handling logic
4. End, with, matrix depth handling

Technologies

• DagreJS
• React-Diagrams
• Js-Yaml
• Codemirror2
• Reactjs-Popup
• React
• TypeScript
• JSON Schema
• AJV

Project chronology

Week 1 - Week 5 - Assimilating with new technologies, first concept creation, added first functionalities (codemirror), creating first SVG's
Week 6 - Week 7 - Interpretation of YAML, converting YAML to JSON format, first errors (inline)
Week 8 - Week 9 - Integration with React-Diagrams and DagreJS
Week 10 - Week 11 - Bug-fixes, implementing custom errors, working on style-sheet (added grid)
Week 12 - Finishing touches

Encountered bugs, problems and provided solutions

1. "OffsetWidth error" - First encoutered after implementing DagreJS. It was caused, by calling a setTimeout function, before the previous call ended. We fixed it, by deleting said timeout in componentWillUnmount function.
2. Incorrect assumption, that the first job of provided workflow, needs to be independent - Huge mistake on our part, that forced us to re-write a whole function, which was handling the creation of diagrams.
3. Problems with DagreJS
   • Redistribution of diagrams - problem visible only in a scenario of changing the size of a diagram component. The only solution that we could come up with was to force a re-mount of our diagram component, by adding the "key" property to said component.