-
Notifications
You must be signed in to change notification settings - Fork 7
2013 12 29 Hackaton UI
At 29th of December 2013, we’re doing a Hackaton on a or some UI(s) for Pipeline. The hackers can decide what type of UIs they create (CLI, GUI, Web-UI, …) and for what user type the UIs are (dev, test, business, wallboard, …).
Some requirements for the UIs:
-
uses API provided by Pipeline
-
view-only (for now)
-
user-type specific
The API provided by Pipeline, is a REST API which can be found at https://github.com/pipelinecd/client-api. During the hackaton this API will be extended as needed, though the implementation of the API will (most probably) be mocked at this time.
A developer friendly view on the Pipelines
*Given* multiple pipelines *When* I go to the overview page *Then* I get an overview of all known pipelines
*Given* multiple pipelines *When* I go to the overview page *Then* I can choose between a list and a grid view of the pipelines
*Given* multiple pipelines *When* I go to the overview page *Then* I filter to only see the pipelines I'm interested in
-
Overview of (all accessible) pipelines
-
support filtering
-
have different kind of views, like list, grid, …
-
UI Ideas
List view
+------+-------------------------------------------------------------------------------+
| Logo | {menu, or if browser supports... put menu in browser menu} |
| |----------------------------------------------------------------+--------------+
+------+ | {filter} |
| +--------------+
| |
| Name Status |
| +-----------------------------------------------------------------------+ |
| Project XXX Running |
| +-----------------------------------------------------------------------+ |
| Project YYY Failed |
| +-----------------------------------------------------------------------+ |
| Project ... Success |
+ +-----------------------------------------------------------------------+ +
| ...... ..... |
| +-----------------------------------------------------------------------+ |
| |
| +-----------------------------------------------------------------------+ |
| |
| |
+----------------+---------------------------------------------------------------------+
Detailed list view
+------+----------------------------------------------------------------+--------------+
| Logo | {menu, or if browser supports... put menu in browser men|} | {filter} |
| +----------------------------------------------------------------+--------------+
+------+ |
| |
| |
| Name Current stage Status Host |
| +-----------------------------------------------------------------------+ |
| Project XXX Component Test Running host-01-linux |
| +-----------------------------------------------------------------------+ |
| Project YYY Compile Failed host-02-linux-32 |
| +-----------------------------------------------------------------------+ |
| Project AAA Deploy to Prod Success .... |
| +-----------------------------------------------------------------------+ |
| Project ZZZ Deploy to Prod Need action .... |
| +-----------------------------------------------------------------------+ |
| ..... .... ..... .... |
| +-----------------------------------------------------------------------+ |
| |
| |
+--------------------------------------------------------------------------------------+
Grid view
+------+-------------------------------------------------------------------------------+
| Logo | {menu, or if browser supports... put menu in browser menu} |
| |------------------------------------------------------+---------+--------------+
+------+ | {sort} | {filter} |
| +---------+--------------+
| |
| +-----------------+ +-----------------+ +-----------------+ |
| | Project XXX | | Project YYY | | Project ... | |
| | | | | | | |
| | Running | | Failed | | Success | |
| | | | | | | |
| +-----------------+ +-----------------+ +-----------------+ |
| |
+ +-----------------+ +-----------------+ +-----------------+ +
| | Project ... | | Project ... | | Project ... | |
| | | | | | | |
| | .... | | .... | | .... | |
| | | | | | | |
| +-----------------+ +-----------------+ +-----------------+ |
| |
+----------------+---------------------------------------------------------------------+
*Given* a specific pipeline *When* I select the pipeline *Then* I get a visualization of the pipeline *and* I have insight in the history of this pipeline *and* I have insight in the current state (eg. running, failed, ...) *and* I have the possibility to see more details on specific parts (stages, tasks, ..) of this pipeline
-
Pipeline specific view
-
show queue?
-
specific pipeline overview picture
-
show details on-request
-
option to show history?
-
UI Idea
+------+-------------------------------------------------------------------------------+
| Logo | {menu, or if browser supports... put menu in browser menu} |
| |-------------------------------------------------------------------------------+
+------+ |
| +------+ +-------+ {pipeline workflow view |
| +>| |+-+ +->| |+---+ - zoomable |
| +-----+ | +------+ | +-----+ | +-------+ | - scrollable |
| | +--+ +->| |+-+ +-> - resizable |
| +-----+ + | +-----+ + +-------+ - onclick/onkey show |
| | +------+ | +->| | details in lower |
| +>| |+-+ +-------+ section |
| +------+ } |
| |
+----------------+---------------------------------------------------------------------+
| | |
| { execution | { details screen |
| specs/stats | - console / log |
| } | - report |
| | - .... |
| | } |
+----------------+---------------------------------------------------------------------+
-
Pipeline statistics…
-
For one specific pipeline
-
For all pipelines
-
-
REST API
-
DropWizard - http://www.dropwizard.io
-
DropWizard with Websockets - https://github.com/mgutz/dropwizard-atmosphere
-
-
WebApp
-
AngularJs - http://angularjs.org
-
-
Monitoring
-
DropWizard Dashboard - https://github.com/kimble/dropwizard-dashboard
-