cf webui - cloudfoundry user group dach

Zürcher Fachhochschule

CF WebUI

ICCLabZurich University of Applied Sciences

Zürcher Fachhochschule

What is CF WebUI

Single web page front-end for Cloud Foundry

Based on Cloud Foundry API

Open Source

Zürcher Fachhochschule

How we developed CF WebUI

Bootstrap

AngularJS

Nginx

Zürcher Fachhochschule

Challenges

Same Origin Policy

API Features

Zürcher Fachhochschule

Same Origin Policy

Problem:• Same Origin Policy in browser

Two solutions: • Cross-Origin Resource Sharing (CORS)• Proxy

Zürcher Fachhochschule

Same Origin Policy using CORS

Zürcher Fachhochschule

Same Origin Policy using proxy

Zürcher Fachhochschule

Proxy Implementations

First version: PHP Proxy• Based on cURL• Buildpack: PHPSecond version• Based on reverse proxy (nginx)• Buildpack: staticfile-buildpack

Zürcher Fachhochschule

Proxy - First Version

Zürcher Fachhochschule

Proxy - Second Version

Zürcher Fachhochschule

API Endpoint

‘List all apps’

Not showing crashed ones

Alternative solution: compare running instances

Zürcher Fachhochschule

API Endpoint

Zürcher Fachhochschule

API Endpoint

Zürcher Fachhochschule

How to configure CF WebUI - manifest.yml

---applications:- name: cf-webui memory: 64M host: console-cf-webui-${random-word} path: ./build buildpack: https://github.com/cloudfoundry/staticfile-buildpack env:

API_ENDPOINT: https://api.run.pivotal.io# Use Google DNS by defaultNGINX_RESOLVER: 8.8.8.8#Enforce https is used (using x_forwarded_proto check). Default: enabledFORCE_HTTPS: 1

Zürcher Fachhochschule

Roadmap

Upcoming Features:• Show applications logs• Create/deploy new application• Update for Cloud Foundry API v3

Update to AngularJS 2

Zürcher Fachhochschule

Contribute & Questions

Questions?

Thank you!

https://icclab.github.io/cf-webui/https://github.com/icclab/cf-webuihttps://blog.zhaw.ch/icclab/