Intro to Kubernetes through React, SVG, and the OpenShift API

Learn the basics of Kubernetes as we use React, SVG, and the OpenShift REST API to build out a visual representation of a container-based, scalable web application. In this session, you’ll learn basic Kubernetes concepts as well as some additional components that OpenShift adds on top of Kubernetes.

Transcript

1. Intro to Kubernetes Through React, SVG, and the OpenShift API Jan Kleinert jan.kleinert@redhat.com February 22, 2019
2. @jankleinert 2 Jan Kleinert Developer Advocate, Red Hat twitter/github: @jankleinert Hello!
3. @jankleinert 3 What is Kubernetes? 4 basic primitives How the visualization works Additional OpenShift concepts What We’ll Cover
4. @jankleinert 4 What is Kubernetes?
5. @jankleinert 5 Kubernetes is... An open source platform for running container-based workloads and managing them at scale
6. @jankleinert 6 Kubernetes provides... An API kind apiVersion metadata spec status API object primitives include these attributes:
7. @jankleinert 7 Basic K8s Terminology 1. node 2. pod 3. service 4. deployment
8. @jankleinert 8 Node • Node: a host machine where containerized processes run • Node activity is managed via one or more Master instances
9. @jankleinert 9 Pod • A group of one or more co-located containers • Minimum unit of scale kind: Pod apiVersion: v1 metadata: creationTimestamp: name: hello-k8s labels: run: hello-k8s spec: containers: - name: hello-k8s image: jkleinert/nodejsint-workshop ports: - containerPort: 8080 resources: {}
10. @jankleinert 10 https://youtu.be/E7KWcvuFVns
11. @jankleinert 11 Service • Acts as a single endpoint for a collection of replicated pods • Like a load balancer kind: Service apiVersion: v1 metadata: name: hello-k8s creationTimestamp: labels: run: hello-k8s spec: ports: - protocol: TCP port: 8080 targetPort: 8080 selector: run: hello-k8s type: NodePort status: loadBalancer: {}
12. @jankleinert 12 https://youtu.be/mkLNa_5w_58
13. @jankleinert 13 Deployment • Helps you specify container runtime requirements (in terms of pods) kind: Deployment
 apiVersion: apps/v1beta1
 metadata:
 name: hello-k8s
 creationTimestamp: 
 labels:
 run: hello-k8s
 spec:
 replicas: 1
 selector:
 matchLabels:
 run: hello-k8s
 template:
 metadata:
 creationTimestamp: 
 labels:
 run: hello-k8s
 spec:
 containers:
 - name: hello-k8s
 image: jkleinert/nodejsint-workshop
 resources: {}
 strategy: {}
 status: {}
14. @jankleinert 14 https://youtu.be/1gjTeR4tsj0
15. @jankleinert 15 https://youtu.be/V8BOQhmC30w
16. @jankleinert 16 https://youtu.be/C8xAqfFaSLI
17. @jankleinert 17 https://youtu.be/YEkIAWFc9WE
18. @jankleinert 18 How does the visualization work? 1. Java backend
 https://github.com/jankleinert/k8s-visualization-backend 2. Node.js server 3. React frontend
 https://github.com/jankleinert/k8s-visualization-frontend
19. @jankleinert 19
20. @jankleinert 20 server.js client.on('subscribeToPods', (interval) => { setInterval(() => { var req = http.request(podOptions, function (res) { var responseString = ""; res.on("data", function (data) { responseString += data; }); res.on("end", function () { pods = JSON.parse(responseString); }); }); req.end(); client.emit('pods', pods); }, interval); });
21. @jankleinert 21 App.js class App extends Component { render() { const podGroup = Object.keys(this.state.pods).map(key => <> <circle cy="200" cx={key * (800/this.state.pods.length) + (800/this.state.pods.length/2)} r={this.state.podSize} className={this.state.pods[key].objectStatus}/> <text x={key * (800/this.state.pods.length) + (800/this.state.pods.length/2)} y="168" textAnchor="middle" stroke="#fff" fill="#fff" className="podlabel"> {this.state.pods[key].objectType}</text> <text x={key * (800/this.state.pods.length) + (800/this.state.pods.length/2)} y="208" textAnchor="middle" stroke="#fff" fill="#fff" className="podlabel">{this.state.pods[key].objectName}</text> </> )
22. @jankleinert 22 Kubernetes By Example: http://kubernetesbyexample.com Interactive Learning Portal: https://learn.openshift.com Backend repo:
 https://github.com/jankleinert/k8s-visualizer-backend Frontend repo: https://github.com/jankleinert/k8s-visualizer-frontend Resources
23. THANK YOU plus.google.com/+RedHat linkedin.com/company/red-hat youtube.com/user/RedHatVideos facebook.com/redhatinc twitter.com/RedHat