Initial version

[talk-cockpit-ecosystem.git] / cockpit-ecosystem.md

---
title: Your turn-key Cockpit UI in a CI/CD ecosystem
subtitle:
author: Martin Pitt <<mpitt@redhat.com>>
email: mpitt@redhat.com
date: DevConv.CZ 2019
theme: Singapore
header-includes: \usepackage{wasysym}\usepackage{pgfpages}\setbeameroption{show notes on second screen}
...

\centerline{\Huge \texttt{IaaS}}

\note[item]{10-second history of cloud computing}
\note[item]{Infrastructure aaS: my other computer is a data center}

------

\centerline{\Huge \texttt{PaaS}}

\note[item]{Platform aaS: Kubernetes}

------

\centerline{\Huge \texttt{SaaS}}

\note[item]{Software aaS: we don't host our source repos any more, GitHub}

------

\centerline{\Huge \texttt{CoCICDaaS}}

\note[item]{undeniably the pinnacle of evolution: Cockpit Continuous Integration and Deployment aaS}
\note[item]{that's what I introduce today}

# Cockpit what?

- Interactive Server admin web interface
- Easy setup and troubleshooting for one or a few machines
- Included in all major distros

\note[item]{Conceptually: Linux session running in a web browser; technically very similar to ssh/VT/GNOME login}
\note[item]{Aimed at admins who are new to Linux, e. g. coming from the Windows world and familiar with the concepts, but not Linux terminology}
\note[item]{but also to experienced ones for infrequent tasks (set up RAID once a year, don’t remember all the commands); not just setup, but also investigating “what is wrong with this machine”}
\note[item]{apt or yum install away in Fedora, Atomic, RHEL, Debian, Ubuntu, Arch}

------------------

![](./system.png)\ 

\note[item]{System page: Summary information about the machine and its current status}
\note[item]{can drill down into more detailed graphs and information.}
\note[item]{Menu on the left shows available administration pages for this machine, and can switch between multiple machines}

------------------

![](./firewall.png)\ 

\note[item]{subpage of Networking is a UI for firewalld}

------------------

![](./virtualmachines.png)\ 

\note[item]{See and interact with your local libvirt or ovirt VMs}
\note[item]{Cockpit team maintains pages seen on the screenshots}

# Imagine your own page here!

```html
<script src="../base1/cockpit.js" />
```

API docs: [https://cockpit-project.org/guide/latest](https://cockpit-project.org/guide/latest)

\note[item]{there will always be things missing for your use cases, so designed from the ground up to be easily extensible}
\note[item]{offers JS API to interact with connected target machine: programs, D-Bus, files, sockets, etc.}

----

```html
<table>
    <tr>
        <td><label for="address">Address</label></td>
        <td><input id="address" value="8.8.8.8"></td>
    </tr>
    <tr>
        <td><button id="ping">Ping</button></td>
        <td><span id="result"></span></td>
    </tr>
</table>

<p> <pre id="output"></pre> </p>
```

\note[item]{little example: create a UI for ping}
\note[item]{input for address, button to start, and pre for output}

----

```js
const button = document.getElementById("ping");
const address = document.getElementById("address");
const result = document.getElementById("result");
const output = document.getElementById("output");

button.addEventListener("click", () => {
  cockpit.spawn(["ping", "-c", "4", address.value])
    .stream(data => output.append(
                        document.createTextNode(data))
    .done(() => {
        result.innerHTML = "success";
        result.style.color = "green";
    });
});
```

\note[item]{wire cockpit API for running a process - ping in this case to this UI}
\note[item]{whenever something new on stdout → append to output field for live streaming}
\note[item]{slightly simplified, e. g. no error handling, but this is the gist}
\note[item]{similar structure for a D-Bus call, or files}

-----

![](./pinger-start.png)\ 

\note[item]{initially looks like this; enter address, press button}

-----

![](./pinger-result.png)\ 

\note[item]{and you see the result}
\note[item]{appears in the menu via a little declaration file called manifest; not shown here}
\note[item]{above good enough for your own personal environment/company specific pages}
\note[item]{ex: cheap monitoring/control of services or house automation}
\note[item]{cockpit more popular, more extension projects which are public, get packaged and team-maintained}
\note[item]{ex: UI for podman, building installable OS images, IPA server, Fleet Commander}
\note[item]{proposed: NFS server, SSL certificate management}
\note[item]{then tossing the above into a single HTML file is not good enough}

# Public projects

- Code layout
- Modern frameworks: React, PatternFly
- Build system: Babel, ESLint, webpack
- Tests/CI
- Automated releases

\note[item]{Separation of HTML, CSS, and JavaScript into lots of little files for maintainability}
\note[item]{Don't do UI by hand like in pinger, integrate React and PatternFly}
\note[item]{JavaScript toolchain to compile all your files into a blob the browser can understand}
\note[item]{complex build system, integrate static code checks}
\note[item]{create automated browser tests, run them  in PRs}
\note[item]{test on various operating systems, maintain VM images for these}
\note[item]{release very often to GitHub, various distros, COPR, dockerhub, update your project page, etc.}
\note[item]{putting this together is a daunting task}

# Bootstrapping with Cockpit starter-kit


```sh
git clone https://github.com/cockpit-project/starter-kit
cd starter-kit
make devel-install
sudo make install
make rpm
```

\note[item]{we put together the Cockpit starter kit, does all that for you}
\note[item]{best practices for a Cockpit project}
\note[item]{example UI with all the glory I mentioned before}
\note[item]{devel-install: run straight out of your build tree; install: /usr/local/, build rpm}

----

![](./starter-kit.png)

\note[item]{looks unspectacular, but demonstrates cockpit API (reading hostname) and LESS/CSS}
\note[item]{point is to be a simple React component which you can directly hack on without worrying about all the boilerplate}

# Integration testing

```sh

$ TEST_OS=rhel-7-6 make check
1..1
# ----------------------------------------------------------------------
# testBasic (__main__.TestStarterKit)
#

ok 1 testBasic (__main__.TestStarterKit) # duration: 21s
```

\note[item]{RPM build, integration test}
\note[item]{test looks simple, but does a lot of stuff for you}
\note[item]{download appropriate Cockpit VM image (lots of OSes), builds code, installs it into the VM, starts headless Chromium, runs your test on it}
\note[item]{re-uses VMs of Cockpit team, half-time job to maintain them}
\note[item]{integrate into CI: webhook, ask Cockpit team to whitelist to run on our infra}

# Automated releases

```sh
$ cat ./cockpituous-release
RELEASE_SOURCE="_release/source"
RELEASE_SPEC="cockpit-starter-kit.spec"
RELEASE_SRPM="_release/srpm"

job release-source
job release-srpm

# job release-koji -k master
# job release-koji f29
# job release-bodhi F29
# job release-github
# job release-copr @myorg/myrepo
```

\note[item]{release process: push a signed git tag with a summary of changes}
\note[item]{our cockpituous infra then builds release tarballs, srpms, pushes them to github, Fedora, dockerhub, copr, etc.}
\note[item]{real file has lots of comments}
\note[item]{just like with CI, ask Cockpit team}
\note[item]{that part is relatively easy to self-host: container with a bunch of credentials; or run on your laptop}

# https://github.com/cockpit-project/starter-kit/pull/75

![](./bot-update-1.png){width=80%}
![](./bot-update-2.png){width=80%}

\note[item]{routine maintenance tasks: latest NPM dependencies, uploading translation templates to Zanata, download translations}
\note[item]{bots for code maintenance; example for NPM update}
\note[item]{proposes a PR for updating to latest React, tests pass; human can sign off and presses the button}

# Current users

- [Composer](https://github.com/weldr/welder-web)
- [cockpit-podman](https://github.com/cockpit-project/cockpit-podman)
- [cockpit-ostree](https://github.com/cockpit-project/cockpit-ostree)

\note[item]{these projects are real-life, thus this is not a pipe dream; let's add your's}
\note[item]{Our team wants to move from "we build UIs for everything" to "we support your team with building your UI"}
\note[item]{we work a lot on providing CI infrastructure, cross-project testing and maintenance}

# Contact

- `#cockpit` on Freenode
- https://cockpit-project.org
- Hackfest: Sunday 14:30 to 15:15, room A218

\note[item]{Home page leads to mailing lists, documentation}
\note[item]{Join us on the hackfest on Sunday}
\note[item]{thanks for your attention; Q+A}