From: Martin Pitt <martin@piware.de>
Date: Fri, 11 Jan 2019 15:32:01 +0000 (+0100)
Subject: Initial version
X-Git-Url: https://piware.de/gitweb/?p=talk-cockpit-ecosystem.git;a=commitdiff_plain;h=7e49f0950b3741891fee1332dd974c7c6c25095b

Initial version

Takes about 18 minutes, so in time.

TODO: Make screenshots full-screen.
---

7e49f0950b3741891fee1332dd974c7c6c25095b
diff --git a/bot-update-1.png b/bot-update-1.png
new file mode 100644
index 0000000..b1731ee
Binary files /dev/null and b/bot-update-1.png differ
diff --git a/bot-update-2.png b/bot-update-2.png
new file mode 100644
index 0000000..d0de35a
Binary files /dev/null and b/bot-update-2.png differ
diff --git a/cockpit-ecosystem.md b/cockpit-ecosystem.md
new file mode 100644
index 0000000..3272e84
--- /dev/null
+++ b/cockpit-ecosystem.md
@@ -0,0 +1,251 @@
+---
+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}
diff --git a/firewall.png b/firewall.png
new file mode 100644
index 0000000..555abc3
Binary files /dev/null and b/firewall.png differ
diff --git a/pinger-result.png b/pinger-result.png
new file mode 100644
index 0000000..4a4dcb5
Binary files /dev/null and b/pinger-result.png differ
diff --git a/pinger-start.png b/pinger-start.png
new file mode 100644
index 0000000..0f90647
Binary files /dev/null and b/pinger-start.png differ
diff --git a/starter-kit.png b/starter-kit.png
new file mode 100644
index 0000000..743138c
Binary files /dev/null and b/starter-kit.png differ
diff --git a/system.png b/system.png
new file mode 100644
index 0000000..5729476
Binary files /dev/null and b/system.png differ
diff --git a/virtualmachines.png b/virtualmachines.png
new file mode 100644
index 0000000..1a3e58a
Binary files /dev/null and b/virtualmachines.png differ