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