DEV Community

Cover image for Sparky - composable user interfaces for internal services
Alexey Melezhik
Alexey Melezhik

Posted on

Sparky - composable user interfaces for internal services

Sparky recent releases have introduced a lot of features allowing to build user interfaces for internal web applications.


In a nutshell Sparky is a web platform to run automation tasks, and Sparky equips you with a rich feature set to build a frontend to launch tasks with parameters.

HTML controls

Let's brew some coffee, even though I've been trying to slow down on caffeine recently.

allow_manual_run: true
vars:
  -
    name: Flavor
    default: "latte"
    type: select 
    values: [ espresso, amerikano, latte ]

  -
    name: Topic  
    default: "milk"
    type: select
    values: [ milk, cream, cinnamon ]
    multiple: true

  -
    name: Step3 
    default: "boiled water"
    type: input
Enter fullscreen mode Exit fullscreen mode

This simple Sparky job definition will spin up a simple UI with 3 controls:

UI

In Raku scenario those input parameters are handled like that:

my $flavor = tags()<Flavor>;
my $water = tags()<Step3>;
my @topics = [];

# tags() needs :array modifier
# as multiple choices are passed

for tags(:array)<Topic><> -> $t {
   @topics.push: $t;
};
Enter fullscreen mode Exit fullscreen mode

Simple, huh?

One more coffee, please!

Or maybe you like a tea?

Another cool feature of Sparky is a multi scenario flows or group variables. Let's say you would like to give a choice of coffer or tea, so instead of having 2 job definitions with different sets of variables, let's create just one:

vars:

  # tea vars

  -
    name: Flavor
    default: "black" 
    type: select 
    values: [ black, green ]
    group: [ tea ]

  -
    name: Topic
    default: "milk"
    type: select
    values: [ milk, cream ]
    group: [ tea ]

  # coffee vars

  -
    name: Flavor
    default: "latte"
    type: select 
    values: [ espresso, amerikano, latte ]
    group: [ coffee ]

  -
    name: Topic  
    default: "milk"
    type: select
    values: [ milk, cream, cinnamon ]
    group: [ coffee ]
    multiple: true

  # common vars

  -

    name: Step3
    default: "boiled water"
    type: input
    group: [ tea, coffee ]

# every var
# in group vars
# is a separate
# scenario 

group_vars:
  - tea
  - coffee
Enter fullscreen mode Exit fullscreen mode

Now, when the job gets run, we have a choice:

UI2

And then (when click on proper link), let's enjoy some tea:

UI3


Conclusion

Sparky is a nice web console to build internal automation services with HTML and write automation scenarios with Raku. Thanks for reading.

Top comments (1)