Testing Electron Apps with Playwright

Feb 11, 2022
7 min
read
Andrei Vinaga
Software Engineer
monokle

Monokle is built using Electron, which is used to build desktop applications across multiple platforms using a web framework like React.

Share on Twitter
Share on LinkedIn
Share on Reddit
Share on HackerNews
Copy URL

Table of Contents

Get started with Monokle today

Monokle is a great tool to inspect your Kubernetes manifests with an easy and intuitive interface showing you how your manifests are connected to each other and how they translate to your existing cluster. It also allows your team to avoid drifts between your manifests and clusters as you keep adding more and more components.

Apart from inspecting your existing manifests, Monokle allows you to create manifests both from scratch and from templates. These templates help you gain speed while creating new components, but more importantly, they reduce grounds for errors from wrongly misconfiguring them.

For example, if your team has a policy of adding a specific property to every component, you can enforce the correct creation of these properties in your template instead of having the developer manually create the manifest and forgetting to add the required property.

When you create your templates with Monokle, you will be able to have a form that developers will fill out to create the resources they need, as seen in the example below.

Electron app dashboard

Monokle comes with a number of default templates to get you started with Kubernetes, and in this tutorial, you will learn how to make your own template for a simple Kubernetes Pod.

Setting up the project

Templates are installed through a plugin in Monokle. A plugin is basically a Github repository with a valid Monokle package.json. So, first, let’s go ahead and create a github repository –you can call it 1monokle-templates-plugin1 – and connect the repository to your local machine. We will create now the 1package.json1 for our template plugin in the root of our repository:

Template configuration

For this template, we need three different parts:

  1. a Monokle template configuration
  2. a Form configuration
  3. and a Kubernetes YAML manifest with placeholders

We will expand about those in the next section while we are creating them.

Creating the template

1. Monokle template configuration

We will need a specific folder for each template. We will create a folder and call it `basic-pod-template`, just like we have defined it in the path section of our `package.json`:

`$ mkdir basic-pod-template && cd basic-pod-template`

First, let’s start by creating the template configuration, which is Monokle-specific and defines what type of template you are creating.

There are two types of templates in Monokle for now: vanilla and helm-charts; we will be creating a simple vanilla type template. Create the file monokle-template-json with following content:

2. Form configuration

In the code above, we have defined the `fields forms.schema` and `forms.uiSchema`. Both of these fields are used by Monokle to provide users of our template with a nice input form. The `form-schema.json` file will contain the form fields that we will request the user to input, and the `form-ui-schema.json` defines how the form is going to appear (titles for the fields, descriptions, etc). Let’s go ahead and create our `form-schema.json` defining the basic fields that we will request from the user to create a Pod:

This is a standard JSON schema format, which you can read more about in the json-schema website. JSON schema is used in most projects to define custom forms like the one we are creating now, where you can define, among other things, the required fields for your form, as seen in the `required` section. Monokle uses the `react-json-schema-form` frontend component to render the forms for these templates. It takes the form fields definition which we just created, and a UI form definition, which we will build next. Create the file the file `form-ui-schema.json` with the following content:

Notice that we are using a custom widget, internally defined for Monokle, called `namespaceSelection`. This widget provides the user with a dropdown of available namespaces.

3. YAML manifest template

Finally, we’ll define the YAML manifest template with the placeholders that we will update with the form data. Note that we are using forms as an array because we can define multiple successive forms in our `monokle-template.json`, instead of having one huge form. In our case, we have only one form so we will use `forms[0]` to access it. Create the `template.yaml` file and populate it with:

As you can see, we have been able to enforce a specific type of property, by marking the form field as required and formatting it in a specific way in our template. You can also see that Monokle uses [[,..]] as the syntax for interpolation of form values and simple scripts written in javascript.

Upload your project to Github

Let us wrap up with the creation of the template and upload the `package.json` and our template folder to the Github repository that we created at the beginning of this tutorial.

Importing your template in Monokle

Now that we have defined our template configuration, the form definition and our manifest with its placeholders, we need to import the template to Monokle in our configured project.

Click on the plugin section, on the top left of Monokle’s interface

plugin control for Kubernetes

Click on install, and add your Github repository link on the prompted field.

K8s endpoint plugins

You will now find your brand new plugin in the Plugin Manager, as shown below

plugin toggles

If you check the Templates section, you’ll now find your new template available to use.

deploying Kubernetes pod template

Using your template

Let’s create a basic pod by using the template and filling the form:

Elctron kubernetes deployment

Now that the Manifest is created, we can save it and deploy it!

deployment confirmed

And just like that, you’ve created a template! 🥳

Next Steps

All the steps from this tutorial can be found in this Github repository – feel free to clone it, make your own changes and use it as a starting point to your new templates. You can also read and learn more in the Monokle documentation about plugins and templates.

Check Monokle on GitHub — and let us know if you’re missing something we should be adding to make your everyday life with Kubernetes manifests and resources easier.

Related Content