Creating a Cockpit plugin

Twitter   Facebook   meneame   reddit   QR   Telegram   Whatsapp

During this year, I started to migrate the project I'm working on to a Cockpit plugin. Our idea is to convert Fleet Commander Admin into a Cockpit tool plugin. That will allow us to focus on the development of features, leaving the authentication, session management etc. to an already existing application.

First of all let me talk a bit about Fleet Commander and Cockpit:

Fleet commander is intended as a tool to create and deploy user profiles with configuration for applications based on gsettings for Linux. Right now you have an admin web application that allows you to create and deploy the profiles, and a client that has to be installed in the user machines to get, load and apply the profiles intended to your users.

Cockpit is a web application to manage and administer linux servers. In this post I will explain how to create a basic plugin and how to use the Dbus client that comes with Cockpit.

To create a Cockpit plugin, is as easy as to create a manifest.json file specifying some information about your plugin:

{
    "version": 0,
    "tools": {
        "cockpit-exampleplugin": {
            "label": "My plugin",
            "path": "index.html"
        }
    }
}

This file has to be located in a folder under the following locations:

  • /usr/share/cockpit/
  • $HOME/.local/share/cockpit/

The main difference between that paths is that the plugins located at user's path will only be loaded if we login into cockpit using that specific user.

The next step is to create our main HTML file, where we define our plugin elements:

<!doctype html>
<html>
  <head>
      <title translatable="yes">My plugin</title>
      <meta charset="utf-8">
      <link href="../base1/cockpit.css" type="text/css" rel="stylesheet">
      <script src="../base1/jquery.js"></script>
      <script src="../base1/cockpit.js"></script>
      <script src="myplugin.js"></script>
  </head>
  <body class="page-ct">
    <div class="col-xs-12">
      <h1>My plugin title</h1>
      <h2>Public key</h2>
      <textarea cols="80" rows="8" id="publickey"></textarea>
    </div>
  </body>
</html>

We make use of several bundled libraries that comes with Cockpit already like jQuery and patternfly. This is an advantage, specially if you want to make a package for a Linux distribution and you don't want to bundle more and more third party code (having to handle with versions, licenses etc.).

We also added a javascript file called myplugin.js, where we will be writing the actual logic for the plugin.

Cockpit comes with an awesome JavaScript library that allows our plugin to access to dbus services, execute commands and new processes in machines, channels for communication with machines etc. This API will allow us to communicate with the underlying dbus service that is the real core of Fleet Commander.

Fleet Commander dbus service has a call to get the public key we need to install in our hypervisor machine for properly using live session feature, so, let's call it and get our public key:

$(document).ready(function() {
  service = cockpit.dbus('org.freedesktop.FleetCommander');
  proxy = service.proxy();
  proxy.wait().done(function(resp) {
    console.log('Connected to Fleet Commander dbus service');
    // Get the public key
    proxy.GetPublicKey().done(function(resp) {
      $('#publickey').html(resp);
    }).fail(function(){
      console.log('Failed to get public key');
    });
  }).fail(function(err){
    console.log('Failed to connect to Fleet Commander dbus service');
  });
});

As you can see, it's very easy to access dbus using Cockpit API. They had done a great job creating an easy plugin interface for extending their functionalities.

Now we can place the folder or a link to it into any of the cockpit plugin paths and after a logout/login, cockpit will load our plugin. You can see the result of the load of our basic plugin in Cockpit. The public key is loaded and shown in the web interface.

Simple Cockpit plugin

For more information about Cockpit, you can read more at the Cockpit project website.

If you want to see what is going on with Fleet Commander, you can visit the Fleet Commander Github.

The code for this example plugin is available also at my personal Github