Good First Issue: Ability to customise the sls-dev-tools HQ display

[mansurpasha]

Why: As the tool has a lot of features, being able to tailor the tool to your current project, by resizing or rearranging the grid panels, allows users to maximise its usefulness and minimise distractions.

Expected Behaviour:

• using a template as an example, write your desired panel sizes in slsdevtools.config.js
• on running the tool, if there is a config file then the grid uses the given sizes to resize/rearrange each panel

External Library Used:

• https://github.com/yaronn/blessed-contrib#grid

Scope Limit:

• Use the config file to set the width and height of panels, as well as their position
• It's not necessary to check if all rows and columns align correctly
• In a future issue/pr, the config may allow components to be removed entirely and for users to customise the order in which components are navigated using tab

Changes needed:

• Add a section to the config file for customising the layout, with a property for each component
• Update the slsdevtools.config.js.dst template file to show usage of this feature
• Where each component is added to the layout grid, use the parameters in the config file if specified, otherwise use the default
• Components are added using the grid.set() function which takes (row, col, rowSpan, colSpan, obj, opts) as arguments
• There are 8 panels in the tool, the grid.set() calls for each are linked below:
  • Title
  • Invocations Line Graph
  • Duration Bar Chart
  • Lambda Log
  • Console Logs
  • Map
  • Resource Table
  • Eventbridges Table
• update the readme docs