Varnish Dashboard – VCL editor

I decided that I would add a page which would allow me to edit the VCL in the webpage directly.  So the page will get the current VLC and then put that into an editor which also does some syntax highlighting.

The following is the page as it stands at the moment, I just have to add the button which will send the updated VCL to the backend restful interface.  I think I will have the list of available VCLs in a panel at the bottom which you can then view and activate as required.

Improvements

Some of the improvements that I want to add:

• Updating of some of the syntax highlighting
• Add a panel which has some standard code snippets so you can click to add them to the VCL being added

Update

I’ve now updated the VCL editing page so that it has snippets of code you can then just copy and past into the main window.  I’ve also added a save function to it so that it will save the currently edited vcl.

The following is the main edit screen, you have the buttons above the main editor to save the VCL and minimise the panel.  Below the main editor window you have the snippet selection which allows you to select from a list of predefined snippets which are shown in the window to the right.

You now have the active VCLs that are currently in the Varnish instance with the current active VCL highlighted in green.  You have a pencil icon to the right of it which will then open up that VCL in the editor.

If you click on the VCL then it will also show you the content of the VCL which you can also copy and past from if you are creating a new VCL configuration.

So the next thing that is on the list of things to do for this page is when saving instead of just saving to a file it will load it into Varnish so that it is available for activation.  I also plan on putting a button next to the edit button so that I can change the currently active VCL.