 All right, so the reactive thing. So this is what you get. In this case, I have a REL system here running REL 8.1. And if I instantiate into it, I get a lot of message that, well, this is here where you can access the web console on HTTPS and the address of the system and port 1990. And if I put this in the web browser, I get this, which then exposes all the things that are able to administer on the system. Let me use it. I don't know. So, and yeah, this is the regular operating system bits. You know, it uses system D, it uses network manager, SSHD, Livevert, all of this. And all of this is documented on this URL here. And the QR code goes to the same URL. And this actually allows you to grow as an admin, because you can then do some tasks in the UI and other tasks in the CLI. And you can show it's like, with the help of this documentation, you can then see like, oh, but this piece of the UI, it uses these commands. So then you can start to learn how to grow as an admin and how to start automating things by just trying it outside by side, types and stuff in the terminal. It directly reflects in the UI, which then like, oh, this is how these commands work. This is the output of it. So, but since we ship on different Linux distributions, I mean, we ship Fedora, we ship on Debian, Ubuntu, Arch, Red Hat Enterprise Linux, all of these, like they have slightly different things about them. They have different default package sets. Here on Fedora, and I think this is still the case, it might not be still, but it still has Docker containers. You can't, it's like, there is no longer any Docker containers in RHEL. So we quickly figured out that, OK, we actually need to make this system pluggable so that you can, you know, like, all of the things here are done in different packages internally, and then they populate the site door here. So for example, if we look at RHEL, we then have an extremely critical part that is the subscription speech. You wouldn't have this on Fedora, of course, but on RHEL, you need to subscribe your system to connect your system to Red Hat so you can get the updates. And this is not an add-on, it's something that we put in the base installation, of course. So, yeah, then we figured out, OK, we need a pluggable system where we can add in, like, and have several packages that that builds up the UI. And this is also true for the things we were going to talk about today, because it then allows others to build their own UIs. Let's see. Yeah, so this is, like, in our regular Git repository. These are the things that are in the cockpit Git repository. And these other things are things that are in external repositories, and a lot of these are not developed by our team. Like, the subscription manager team is able to build their own UI, and they're able to maintain that because they have that domain-specific knowledge. And also, just the other day, I accidentally stumbled upon a very critical plugin that is like the Samba plugin. I had never seen this before. So things are happening outside of my immediate control and knowledge. So in another case, which we're going to talk about a little bit today, is how can you start building your own plugins? Because another piece of feedback we received a lot is that we have a lot of people out there that they want to build plugins specifically for their company, for their organization, which then allows, you know, they have a very specific need, and they quickly need to get something together to ease things, a very specific workflow, for their customers. And this is what we're going to show today. Yeah. So we will have no demo for it. But can you talk a little bit about how the whole thing is structured, maybe? Of course, of course. This is a witness. All right, so the idea was now that I live-code a demo for you. It's not live-coding, but showing how that would work and how it would be easy. And I wonder if I can unplug this. Oh, I could have done this before. And copy it over so that at least I can show you in a text editor. But the idea is all of this is, of course, can you go to a screenshot of it? Of this? You mean? Yeah, perfect. So all the pages you see here on the left side, this is the Chrome that Cockpit puts around it. And everything inside here is one of those packages or comes from one of those packages that Andreas just showed you. And these packages you can put anywhere. You can just write your own one and put it in .localshare cockpit. And then it gets that if you log in as that user. But you can also install it system-wide, of course. And let me copy those over and see if that works. On Windows, all we need is a text editor because it's all HTML and. You need WordPad probably because the WordPad is not working fine with line feeds. OK, good to know. You're a Windows professional. Let me see if I can bring this. I'm sorry, was that a insult? Did you say WordPad? Yeah, WordPad. Yeah, we're really winging this, I feel. It's improv. Well, if I had known, then we could have connected to you. But we're not going to make that in five minutes. So can you open that? Continue with what's going on. How does this upgrade system work? So there's a DevCon folder. Yeah, cool. I saw from here. OK, so like I said, it's all HTML and JavaScript. So this is the most minimal plugin that you can make. You need the HTML file, which is basically UI. You need a JavaScript file, which adds some interactivity because by default, we don't allow a JavaScript in the HTML just because we are very much about locking as much down as possible so that you can inject content and stuff. And then you need this little file, manifest.json. Which, if I can open this, where's the WordPad? It's behind. Is this how Windows works, too? Nice. Yes. Look at this. Cool. Can you all read this? No. No, OK. View, view, zoom in. So this is just a manifest that tells Cockpit a little bit about your project, right? Well, that package. So we just say what version it is, which version of Cockpit it requires because Cockpit has an API that you can talk to all kinds of low-level Unix APIs, like Debus and Files and whatnot. And also, you can say, right, where in the menu you want to put that in. The menu is the thing on the left side. So in this case, if I could show this to you, we would copy that folder over. And then we would see the DEF CONS label over here. And then I would click on it. And then we would load that index HTML. Let me show that to you. That's exactly what I wanted. Thank you. You can open the HTML file in a browser and show the source code. Yes. Thank you so much for all your. Look at this. We crowdsourced the. Does it control you here as well? It is. Look at this. So like I said, this is super simple. This is how we did HTML in the 90s. So just a little bit of a head where we load in the Cockpit just. Oh, I should make this bigger now, sorry about that. OK, that doesn't work. How do you make? I don't think I make this bigger. Text size. Largest. All right. So I load the index.js that you saw in my little plug-in. And I also load the Cockpit base API. And then all I do is have a little headline and an input field and a thing here. This is empty now because it's not running in Cockpit. If this were running in Cockpit, then we would see the list of NFS exports that I have. Because, and now comes the interesting bits. Do I open this in WordPress now? Get a try one. Don't say. Yay. OK, that's. Zoom in a little bit, yeah. If I could now make the page. OK, whatever. So this is JavaScript in the word processing document. So like I said, because we loaded Cockpit, right, there is a Cockpit object, a big Cockpit object that has access to all the APIs. And this is opening this file as SuperUser because I'm opening it at CXPorts, and we want to write it as well, so we need to be SuperUser. And then we watch the file. So every time the file changes, and also once at the very beginning, it calls this function that I passed here. And then all it does is it writes all of these things between here, like everything that it reads. This is so much cooler if I can show it. But imagine. Well, yeah, imagine. So the idea being that it's very reactive. So whenever that's what Andreas was referring to before, whenever something on the system changes, we also want that to change in Cockpit. So whenever I hit Control W, colon W in VI or something, if I write the file, then this function triggers so that the UI is always updated in real time. And then we have this little button here with a checkbox. I don't need to explain how this code works, because you probably can all program. But yeah, so you click the button, and then we write the content of the file by appending that one line to it. And yeah, like I said, this is how we did it in the 90s, right? And I think you already saw under the slides, because this is not how modern Java script development is done anymore. So let's see if I can do that. Do you want to talk about that, or shall I? No, I think it's better if you. I can talk about this. Oh, you can talk about that, OK. So in the Cockpit Project GitHub organization, we have something called the Sutterkit, which is a template for a modern, or how we use modern web development to make Cockpit plugins, which uses web pack, which uses other modern stuff. But definitely, like, use the web pack so they can use all the JavaScript libraries from everywhere. Mostly, we use it for React, because most of Cockpit's development is done in React these days. But we also have a lot of other things in there that we use to make successful open source projects, right? We can make RPMs. We have release scripts in there. We have hookups with a very extensive Cockpit Test Suite, which spins up VMs for you so that you can actually test that. And translation helpers, and stuff like this. The idea is, I also had a demo for that, but I'm not going to try that. And it's a little bit of a pick and choose also. If you, for your product, has no need to build our PM packages, you cannot doubt of that. And any other piece, or critical piece, in how we are able to build the beautiful looking and well-functional and accessible widgets and interfaces is that we make use of pattern file, which is a, what do you call it, like a toolkit library more or less, and a set of design guidelines and React templates, or what do you call it? Yeah. Components. Yeah, components. Let's see, can I even? I will. It's a link. We have five minutes. Because we did want to open for questions. Yeah, so yeah. And here you can find all the documentation, and it will allow you to then quickly build amazing. Can I see the code here? Do I see? Never mind. But you can get access to all the proper source code, and this will then be able to guide you if you use these classes and all of that. You're able to build amazing interfaces that are useful out of the box. Yes, so now we can open for questions after this little bit of a Kurt Havelova talk. Yeah, sorry about the demo. Cool, but do your questions. That's why we only have five minutes, and we actually want to open up for questions. Oh, that was amazing. Amazing. It was fine. Now we can just say that as much, but what? No, it was very impressive, or also the short amount of time you've put it together in this case. Desired UIs that they'd like to add. Yeah, definitely. We have a super helpful and friendly, I think, in hash cockpit on IOC. But also, we have on the cockpit, we've got tons of feature pages about things that we would like to add at some point, and also things that could be developed further in existing pages that we have. How is GPS works, like this on localhost? Where the certificate for the localhost comes from? So how is it handled? Well, we don't do it on localhost unless you have the IKOL certificate. A cockpit doesn't make any certificates for you. We need to supply them. Yeah, you can make a self-signed one. Yeah, but you need to supply them. I mean, it's not meant for localhost. It's meant for remote access in your server. And hopefully, your server has it. The idea being that it's easier than SSH, right? Like you have SSH in somewhere, and you do stuff on the terminal. This is a little bit more modern, because we have the full fidelity of web pages. And you can do so much more as reactive. You see much more on the same page. It's colors, it's different sized fonts, you know? Things you can do since a long time now. Yeah, I would say at the same time, for a lot of people who are unfamiliar with Linux, I mean, we all know and love our terminals. But for a lot of people who start dipping their toes in Linux system administration, the terminal is a bit scary. It's just a big, black hole there, right? So, yeah? We've been laying on GitHub, but we can see the demo. We couldn't make a video. There's tons of videos already on the Copper Channel, right? That do stuff like this, but we could also, yeah, I can record it and upload it. There is a Copper Channel on YouTube that has this. There is that. I think there is. I think there might be, yeah. There might be a Copper Channel on YouTube. Copper demo. There is, huh? Thank you. All right, cool. Thank you very much. Yeah.