DEV Community

Cover image for Create Custom Templates in MonokleπŸš€
Vrukshali Torawane
Vrukshali Torawane

Posted on

Create Custom Templates in MonokleπŸš€

What is Kubernetes?🎑

⚑ Kubernetes (sometimes shortened to K8s with the 8 standing for the number of letters between the "K" and the "s") is an open-source system to deploy, scale, and manage containerized applications anywhere.

What are Kubernetes Resources? πŸš€

⚑ A resource is an endpoint in the Kubernetes API that stores a collection of API objects of a certain kind; for example, the built-in pods resource contains a collection of Pod objects.

More information can be found here : https://kubernetes.io/docs/concepts/extend-kubernetes/api-extension/custom-resources/

What is Monokle? πŸ”°

⚑ Monokle helps you to:

  1. Quickly get a high-level view of your manifests, their contained resources and relationships.
  2. Easily edit resources without having to learn or look up yaml syntax. 3.Refactor resources with maintained integrity of names and references.
  3. Preview and debug resources generated with Kustomize or Helm.
  4. Diff resources against your cluster and apply changes immediately.
  5. Visualize and navigate resources in your clusters.
  6. And much more!

⚑ More information can be found here : https://kubeshop.github.io/monokle/

❄ Today's blog is about How can we create our custom Monokle Template!!

What are Monokle Templates? πŸ”°

A Monokle Template is a mechanism for creating visual forms and interpolating the data from those forms into one or multiple manifests.

⚑ More information can be found here : https://kubeshop.github.io/monokle/templates/

❄ I have created a custom template for Kubernetes Service

What is a Kubernetes Service?

An abstract way to expose an application running on a set of Pods as a network service.
With Kubernetes you don't need to modify your application to use an unfamiliar service discovery mechanism. Kubernetes gives Pods their own IP addresses and a single DNS name for a set of Pods, and can load-balance across them.

⚑ More information can be found here : https://kubernetes.io/docs/concepts/services-networking/service/

❄ Let's start

πŸ‘‰πŸ» Step-1: Create a package.json file

{
    "name": "Monokle Custom Templates Plugin",
    "author": "Vrukshali Torawane",
    "version": "1.0.0",
    "description": "This plugin provides the custom resource templates for Monokle",
    "repository": "https://github.com/Vrukshali-26/monokle-templates-plugins",
    "monoklePlugin": {
      "id": "com.github.Vrukshali-26.plugin.templates",
      "helpUrl": "https://github.com/Vrukshali-26/monokle-templates-plugins",
      "modules": [
        {
          "type": "template",
          "path": "service-template" 
        }
      ]
    }
}
Enter fullscreen mode Exit fullscreen mode

❄ In this name, author, version, description, monoklePlugin, helpUrl and modules are required to specify, also we are specifying where we have the template plugin folder e.g., in my case, service-template

πŸ‘‰πŸ» Step-2: Create a folder named service-template and add the following content:

1. In monokle-template.json file:

{
    "name": "Basic Kubernetes Service",
    "id": "com.github.Vrukshali-26.plugin.templates.basic-service-template",
    "author": "Vrukshali-26",
    "version": "1.0.0",
    "description": "Creates a Kubernetes Service",
    "repository": "",
    "type": "vanilla",
    "forms": [
      {
        "name": "Service Settings",
        "description": "Specify the settings for your Service",
        "schema": "form-schema.json",
        "uiSchema": "form-ui-schema.json"
      }
    ],
    "manifests": [
      {
        "filePath": "template.yaml"
      }
    ],
    "resultMessage": "Service resource created successfully!",
    "helpUrl": "https://github.com/Vrukshali-26/monokle-templates-plugins"
  }
Enter fullscreen mode Exit fullscreen mode

2. In form-schema.json file:

{
    "type": "object",
    "required": [
      "name",
      "podSelector",
      "targetPort"
    ],
    "properties": {

      "name": {
        "type": "string",
        "default": "my-custom-service"
      },

      "namespace": {
        "type": "string"
      },

      "podSelector": {
        "type": "string",
        "default": "app: my-app"
      },

      "servicePort": {
        "type": "number",
        "default": 80
      },

      "targetPort": {
        "type": "number"
      },

      "serviceType": {
        "type": "string",
        "default": "LoadBalancer",
        "enum": [
          "LoadBalancer",
          "NodePort",
          "ClusterIP"
        ]
      }

    }
  }
Enter fullscreen mode Exit fullscreen mode

3. In form-ui-schema.json file:

{
    "name": {
      "ui:title": "Name",
      "ui:help": "The name of Service"
    },

    "namespace": {
      "ui:title": "Namespace",
      "ui:help": "The target namespace for the created Service",
      "ui:widget": "namespaceSelection"
    },

    "podSelector": {
      "ui:title": "Pod Selector",
      "ui:help": "The label name-value pair to use for selecting target Pod(s) for this Service",
      "ui:widget": "podSelectorSelection"
    },

    "targetPort": {
      "ui:title": "Target Port",
      "ui:help": "The port exposed by the target Pod"
    },

    "servicePort": {
      "ui:title": "Service Port",
      "ui:help": "The port to expose the Service on"
    },

    "serviceType": {
      "ui:title": "Service Type",
      "ui:help": "The type of Service to create"
    }
  }
Enter fullscreen mode Exit fullscreen mode

4. In template.yaml file:

apiVersion: v1
kind: Service
metadata:
  name: [[forms[0].name]]
[[ forms[0].namespace ? "  namespace: " + forms[0].namespace + "\n" : ""]]
spec:
  ports:
    - port: [[forms[0].servicePort]]
      protocol: TCP
      targetPort: [[forms[0].targetPort]]
  selector:
    [[forms[0].podSelector]]
  type: [[forms[0].serviceType]]
Enter fullscreen mode Exit fullscreen mode

πŸ‘‰πŸ» Push this code to GitHub : https://github.com/Vrukshali-26/monokle-templates-plugins

❄ Download Monokle : https://monokle.kubeshop.io/

Now after installation, we will use our custom template-plugin:

πŸ‘‰πŸ» Step-1: Welcome to Monokle!!

Image1

πŸ‘‰πŸ» Step-2: Install Plugin
you can see a plugin button at top right corner

Image2

Image3

❄ Click on Install and enter the github URL!!

Image4

❄ You can see the plugin is installed

Image5

πŸ‘‰πŸ» Step-3: Now on Dashboard click Start from a Template:

Image6

πŸ‘‰πŸ» Step-4: Enter Project Name:

Image7

❄ Click Next Select a Template

Image8

❄ Now Click Create Project

Image9

Image10

Image11

❄ Click Submit and Resource is Created Successfully!!!!!

Image12

Image13

We have created our custom Template successfully!!!!
Thanks for Reading !! πŸ™ŒπŸ»πŸ˜πŸ“ƒ

πŸ”° Keep Learning !! Keep Sharing !!

πŸš€ Feel free to connect with me :
LinkedIn : https://www.linkedin.com/in/vrukshali-torawane/
GitHub : https://github.com/Vrukshali-26
Twitter : https://twitter.com/vrukshali26

Top comments (3)

Collapse
 
shivamtyagi12345 profile image
shivam tyagi

Awesome work

Collapse
 
vrukshali26 profile image
Vrukshali Torawane

Thankyou Shivam!

Collapse
 
vrukshali26 profile image
Vrukshali Torawane

Thankyou Kunal!!