Creating a Cockpit module for a n00b

Development
1

I’m wanting to “graduate” from CLI-only modules (i.e., where all the configuration is done by config setprop commands from the shell) to being able to configure the module within the server manager. And since NS is moving to Cockpit, I guess that’s what I’d need to figure out. But reading through the tutorial has me wondering just how far over my head I’m getting here.

My biggest problem, I think, is that I’m simply not a web developer in any way, shape, or form. I know a little basic HTML, and I can manage a bit in PHP, but I’ve never touched CSS or done anything with Javascript. That last point seems like the real problem, as everything in Cockpit seems to be in .js. So–just how much Javascript do I need to know? Where should I start on that? Or am I misunderstanding even that much?

5 Likes
2

Some guys could say it is easy, but others could say it is beyond their knowledge of system administrators. Nethgui was easy, but you could do only what nethgui allowed you, cockpit let your free hands, however you have to write everything.

From what I think, vanilla js is not the way to go, vuejs is better, even if a js knowledge is needed, the data binding is easier. Vuejs takes care to update in the dom, the vars you have declared.

I started a scarfold of a rpm for cockpit vuejs, it is a starting point, after that you have to write your html/js/css but now you have several hundred thousand lines of code as example in the nethserver github repository.

If you only want to display a web application (or a nethgui panel) I did another way

4 Likes
3

For people interested we could make a dev hangout session for demistifying cockpit.

What is an api (easy, write to, read the esmith database in json format)
What is the UI (hard part) :

  • Html (make your button, checkbox, dropdown)
  • Js function (How to interact with UI and API)
  • css (adjust how you want to display your UI)

In the meanwhile I forgot to paste the official documentation of cockpit

https://nethserver.github.io/nethserver-cockpit/

The session I did at nethesis last year, helped me a lot, but at a point sometime you need to accept that it works without understand how it works…and read a lot of lines of code.

3 Likes
4

Thanks for the pointers. I’m not above cobbling together pieces of existing modules (that’s what Open Source is all about, right?), but it does sound like I’d need to learn at least some basics of JavaScript to make sense of what the existing stuff is doing.

3 Likes
5

learn vanilla js is good, but in fact you must think differently, you must think json and object, even in perl, bash or php.

This a good example of what you have to be prepared : https://blog-en.openalfa.com/how-to-read-and-write-json-files-in-perl

for example the UI queries the API in object json format, and you get an object json in output to update the DOM

in a terminal do

echo '{"action":"apacheStatus"}'| /usr/libexec/nethserver/api/nethserver-httpd/dashboard/read | jq

then you should have

{
  "BytesPerReq": "35345.1",
  "Total_kbytes": "2071",
  "ReqPerSec": ".0136116",
  "Uptime": "4408",
  "statistics": {
    "RunningWorkers": "1",
    "SpareWorkers": 247,
    "IdleWorkers": "8"
  },
  "TotalAccess": "60",
  "BytesPerSec": "481.103"
}

this is used to update the status vars in the dashboard of httpd.

2 Likes
6

Hi dan

I wonder if you had time to learn some cockpit tricks ?

7

Too much other stuff going on. I’d thought that with the COVID-19 lockdown I might have some extra time, but I’m busier with work than I’ve ever been. Still on my to-do list, but it doesn’t seem to be getting much higher on that list.

3 Likes