Fix wording
[talk-cockpit-ecosystem.git] / cockpit-ecosystem.md
1 ---
2 title: Your turn-key Cockpit UI in a CI/CD ecosystem
3 subtitle:
4 author: Martin Pitt <<mpitt@redhat.com>>
5 email: mpitt@redhat.com
6 date: DevConv.CZ 2019
7 theme: Singapore
8 header-includes:
9  - \usepackage{wasysym}\usepackage{pgfpages}\setbeameroption{show notes on second screen}
10  - \newcommand{\fullsizeimg}[1]{\makebox[\linewidth]{\includegraphics[width=\paperwidth]{#1}}}
11 ...
12
13 \centerline{\Huge \texttt{IaaS}}
14
15 \note[item]{10-second history of cloud computing}
16 \note[item]{Infrastructure aaS: my other computer is a data center}
17
18 ------
19
20 \centerline{\Huge \texttt{PaaS}}
21
22 \note[item]{Platform aaS: Kubernetes}
23
24 ------
25
26 \centerline{\Huge \texttt{SaaS}}
27
28 \note[item]{Software aaS: we don't host our source repos any more, GitHub}
29
30 ------
31
32 \centerline{\Huge \texttt{CoCICDaaS}}
33
34 \note[item]{undeniably the pinnacle of evolution: Cockpit Continuous Integration and Delivery aaS}
35 \note[item]{that's what I introduce today}
36
37 # Cockpit what?
38
39 - Interactive Server admin web interface
40 - Easy setup and troubleshooting for one or a few machines
41 - Included in all major distros
42
43 \note[item]{Conceptually: Linux session running in a web browser; technically very similar to ssh/VT/GNOME login}
44 \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}
45 \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”}
46 \note[item]{apt or yum install away in Fedora, Atomic, RHEL, Debian, Ubuntu, Arch}
47
48 ------------------
49
50 \fullsizeimg{system.png}
51
52 \note[item]{System page: Summary information about the machine and its current status}
53 \note[item]{can drill down into more detailed graphs and information.}
54 \note[item]{Menu on the left shows available administration pages for this machine, and can switch between multiple machines}
55
56 ------------------
57
58 \fullsizeimg{firewall.png}
59
60 \note[item]{subpage of Networking is a UI for firewalld}
61
62 ------------------
63
64 \fullsizeimg{virtualmachines.png}
65
66 \note[item]{See and interact with your local libvirt or ovirt VMs}
67 \note[item]{Cockpit team maintains pages seen on the screenshots}
68
69 # Imagine your own page here!
70
71 ```html
72 <script src="../base1/cockpit.js" />
73 ```
74
75 API docs: [https://cockpit-project.org/guide/latest](https://cockpit-project.org/guide/latest)
76
77 \note[item]{there will always be things missing for your use cases, so designed from the ground up to be easily extensible}
78 \note[item]{offers JS API to interact with connected target machine: programs, D-Bus, files, sockets, etc.}
79
80 ----
81
82 ```html
83 <table>
84     <tr>
85         <td><label for="address">Address</label></td>
86         <td><input id="address" value="8.8.8.8"></td>
87     </tr>
88     <tr>
89         <td><button id="ping">Ping</button></td>
90         <td><span id="result"></span></td>
91     </tr>
92 </table>
93
94 <p> <pre id="output"></pre> </p>
95 ```
96
97 \note[item]{little example: create a UI for ping}
98 \note[item]{input for address, button to start, and pre for output}
99
100 ----
101
102 ```js
103 const button = document.getElementById("ping");
104 const address = document.getElementById("address");
105 const result = document.getElementById("result");
106 const output = document.getElementById("output");
107
108 button.addEventListener("click", () => {
109   cockpit.spawn(["ping", "-c", "4", address.value])
110     .stream(data => output.append(
111                         document.createTextNode(data))
112     .done(() => {
113         result.innerHTML = "success";
114         result.style.color = "green";
115     });
116 });
117 ```
118
119 \note[item]{wire cockpit API for running a process - ping in this case to this UI}
120 \note[item]{whenever something new on stdout → append to output field for live streaming}
121 \note[item]{slightly simplified, e. g. no error handling, but this is the gist}
122 \note[item]{similar structure for a D-Bus call, or files}
123
124 -----
125
126 \fullsizeimg{pinger-start.png}
127
128 \note[item]{initially looks like this; enter address, press button}
129
130 -----
131
132 \fullsizeimg{pinger-result.png}
133
134 \note[item]{and you see the result}
135 \note[item]{appears in the menu via a little declaration file called manifest; not shown here}
136 \note[item]{above good enough for your own personal environment/company specific pages}
137 \note[item]{ex: cheap monitoring/control of services or house automation}
138 \note[item]{cockpit more popular, more extension projects which are public, get packaged and team-maintained}
139 \note[item]{ex: UI for podman, building installable OS images, IPA server, Fleet Commander}
140 \note[item]{proposed: NFS server, SSL certificate management}
141 \note[item]{then tossing the above into a single HTML file is not good enough}
142
143 # Public projects
144
145 - Code layout
146 - Modern frameworks: React, PatternFly
147 - Build system: Babel, ESLint, webpack
148 - Tests/CI
149 - Automated releases
150
151 \note[item]{Separation of HTML, CSS, and JavaScript into lots of little files for maintainability}
152 \note[item]{Don't do UI by hand like in pinger, integrate React and PatternFly}
153 \note[item]{JavaScript toolchain to compile all your files into a blob the browser can understand}
154 \note[item]{complex build system, integrate static code checks}
155 \note[item]{create automated browser tests, run them  in PRs}
156 \note[item]{test on various operating systems, maintain VM images for these}
157 \note[item]{release very often to GitHub, various distros, COPR, dockerhub, update your project page, etc.}
158 \note[item]{putting this together is a daunting task}
159
160 # Bootstrapping with Cockpit starter-kit
161
162
163 ```sh
164 git clone https://github.com/cockpit-project/starter-kit
165 cd starter-kit
166 make devel-install
167 sudo make install
168 make rpm
169 ```
170
171 \note[item]{we put together the Cockpit starter kit, does all that for you}
172 \note[item]{best practices for a Cockpit project}
173 \note[item]{example UI with all the glory I mentioned before}
174 \note[item]{devel-install: run straight out of your build tree; install: /usr/local/, build rpm}
175
176 ----
177
178 \fullsizeimg{starter-kit.png}
179
180 \note[item]{looks unspectacular, but demonstrates cockpit API (reading hostname) and LESS/CSS}
181 \note[item]{point is to be a simple React component which you can directly hack on without worrying about all the boilerplate}
182
183 # Integration testing
184
185 ```sh
186
187 $ TEST_OS=rhel-7-6 make check
188 1..1
189 # ----------------------------------------------------------------------
190 # testBasic (__main__.TestStarterKit)
191 #
192
193 ok 1 testBasic (__main__.TestStarterKit) # duration: 21s
194 ```
195
196 \note[item]{RPM build, integration test}
197 \note[item]{test looks simple, but does a lot of stuff for you}
198 \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}
199 \note[item]{re-uses VMs of Cockpit team, half-time job to maintain them}
200 \note[item]{integrate into CI: webhook, ask Cockpit team to whitelist to run on our infra}
201
202 # Automated releases
203
204 ```sh
205 $ cat ./cockpituous-release
206 RELEASE_SOURCE="_release/source"
207 RELEASE_SPEC="cockpit-starter-kit.spec"
208 RELEASE_SRPM="_release/srpm"
209
210 job release-source
211 job release-srpm
212
213 # job release-koji -k master
214 # job release-koji f29
215 # job release-bodhi F29
216 # job release-github
217 # job release-copr @myorg/myrepo
218 ```
219
220 \note[item]{release process: push a signed git tag with a summary of changes}
221 \note[item]{our cockpituous infra then builds release tarballs, srpms, pushes them to github, Fedora, dockerhub, copr, etc.}
222 \note[item]{real file has lots of comments}
223 \note[item]{just like with CI, ask Cockpit team}
224 \note[item]{that part is relatively easy to self-host: container with a bunch of credentials; or run on your laptop}
225
226 # https://github.com/cockpit-project/starter-kit/pull/75
227
228 ![](./bot-update-1.png){width=80%}
229 ![](./bot-update-2.png){width=80%}
230
231 \note[item]{routine maintenance tasks: latest NPM dependencies, uploading translation templates to Zanata, download translations}
232 \note[item]{bots for code maintenance; example for NPM update}
233 \note[item]{proposes a PR for updating to latest React, tests pass; human can sign off and presses the button}
234
235 # Current users
236
237 - [Composer](https://github.com/weldr/welder-web)
238 - [cockpit-podman](https://github.com/cockpit-project/cockpit-podman)
239 - [cockpit-ostree](https://github.com/cockpit-project/cockpit-ostree)
240
241 \note[item]{these projects are real-life, thus this is not a pipe dream; let's add your's}
242 \note[item]{Our team wants to scale from "we build UIs for everything" to "we support your team with building your UI"}
243 \note[item]{we work a lot on providing CI infrastructure, cross-project testing and maintenance}
244
245 # Contact
246
247 - `#cockpit` on Freenode
248 - https://cockpit-project.org
249 - Hackfest: Sunday 14:30 to 15:15, room A218
250 - Red Hat User Experience Design booth
251
252 \note[item]{Home page leads to mailing lists, documentation}
253 \note[item]{Join us on the hackfest on Sunday}
254 \note[item]{Help us with improving the Cockpit and Composer UX: Design booth}
255 \note[item]{thanks for your attention; Q+A}