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}