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

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.

49f894a7f36362469c7b69a993dc6453?s=128

Jan Kleinert

February 22, 2019
Tweet

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