Comments (25)
This is just a slight cleanup of the work @skaegi and @pkruithofjr did yesterday but I wanted to post it here just so I'm not losing artifacts. I'm still looking at the second screen with the expanding trees though. It seems like there is a design opportunity there.
from dashboard.
I don't mind the epic there but all issues should be here plz to make things as transparent as possible and let anyone come in and contribute.
from dashboard.
One idea is to have the dashboard take on more of a look and feel similar to the Kube dashboard -- https://github.com/kubernetes/dashboard
So something like this... (note I am not a professional visual designer but I sure know some ;) that I hope will help us out...
from dashboard.
Considering using line drawings without color to avoid any confusion. We also need to be more specific about what is being proposed. For example, the left navigation pane from K8s?
from dashboard.
This was the digital equivalent of me cutting and pasting paper on a poster board. nothing more nothing less. With that said from now on my poster boards will be light grey ;).
The left navigation pane is directly from the Kube dashboard. For Tekton I'm thinking of something similar but instead of "Cluster" the Headings might be:
Tekton
- Pipeline
- PipelineRun
- PipelineResource
- Task
- TaskRun
Namespace
Extension Category 1 [from Service metadata] Knative Eventing
- Extension topic 1
- Extension topic 2
Extension Category 2 [from Service metadata] Native worker agent
- Extension topic 1
- Extension topic 2
etc...
from dashboard.
Is this what you were thinking? I was struggling a bit with what you meant by Extension Category 1 and Extension Category 2.
from dashboard.
Thanks @pkruithofjr that captures it nicely.
from dashboard.
Examples of pipelines for inspiration:
Jenkins Blue Ocean CI/CD pipeline: https://jenkins.io/doc/book/blueocean/dashboard/
Gitlab CI/CD pipeline: https://docs.gitlab.com/ee/ci/quick_start/
OpenShift v3 CI pipeline demo: https://www.youtube.com/watch?v=bLuMSW3p9So
https://blog.openshift.com/building-declarative-pipelines-openshift-dsl-plugin/
https://labs.consol.de/development/2017/07/17/openshift-build-pipelines.html
Jenkins vs. TeamCity vs. Bamboo: https://stackify.com/jenkins-teamcity-bamboo/
See more ideas at https://github.com/marketplace/category/continuous-integration
from dashboard.
Should we break this issue into separate issues? Info Architecture, Pipeline Design, and Dashboard Design?
from dashboard.
Yes absolutely we should definitely break off into separate issues... and please feel to take a crack at it. I don't want to go too far on dashboard architecture without running code but that is the area I'm probably most interested in. Any help to break down the problem appreciated.
This issue is primarily concerned with finding a top-level layout that will work for us. There should be separate issues covering the top banner, breadcrumbs, navigation menu, and main content pane.
Graphical rendering of pipelines and pipeline runs are huge topics all by themselves that will cover a bunch of issues.
from dashboard.
@skaegi I was looking at the dashboard and I am wondering why are you creating REST and points? Kubernetes already has an API server and tekton does everything as CRDs, wouldn't it be easier and more portable to develop the UI against kubernetes API server and tekton CRDs?
from dashboard.
@skaegi @pkruithofjr We're going to track the design work here:
https://github.ibm.com/dev-ex/design-work/issues/200
from dashboard.
This issue is primarily concerned with finding a top-level layout that will work for us. There should be separate issues covering the top banner, breadcrumbs, navigation menu, and main content pane.
Graphical rendering of pipelines and pipeline runs are huge topics all by themselves that will cover a bunch of issues.
It's up to Alan and Alexandra how they want to divide their work up into issues but I have UX and visual design issues there to start.
Typically, for visual design, we do not need separate issues for each UI component. Alexandra will submit HTML/CSS blueprints of the UI to your team.
from dashboard.
@gorkem that's a good question -- open an issue on that.
A couple of things...
- When we first started talking about a UI for Tekton the notion of object persistence independent of cluster lifecycle was something we were thinking about. In a pure dashboard maybe it's overkill.
- The API used by the UI might be tailored to include more, less, or computed information based on the resource. We probably should talk to the Kube dashboard folks to see what their experience was.
from dashboard.
Just some ideas I've been putting together ..... just images for now, probably wider than just how to navigate... haven't covered all menu options
@AlanGreene @kimholmes keen to discuss and be involved especially regarding extension - where I have more ideas
from dashboard.
Wow this is fantastic. Thanks @dibbles! Not sure about the "funky drag and drop UI" but I love how the cat plays a central role in the design. Thanks for posting it.
from dashboard.
Updated user flows for discussion
from dashboard.
Is the idea is to show ClusterTasks
under the Tasks
in these designs?
from dashboard.
Wireframes that I showed in today's meeting:
https://ibm.invisionapp.com/share/3GNZ28C986U
from dashboard.
latest Invision link-> https://ibm.invisionapp.com/d/main#/console/15348721/319165802/preview
to see the updated troubleshooting click on Tekton logo twice, it will bring you to this screen:
to take you back to old version click the header
from dashboard.
Lastest Invision Link:
https://ibm.invisionapp.com/share/X4NZ57VC5FR
from dashboard.
Updated Invision Link:
https://ibm.invisionapp.com/share/3NNZ5IO9WRH
Please let me know if any links are broken or if you have any comments/feedback would be greatly appreciated!
from dashboard.
Wireframe Diagram Design Demo
Diagram Design.zip
from dashboard.
@skaegi I'm having a look through issues looking for ones we can close out/reprioritise etc, thoughts on closing this out and capturing new designs (like those posted above) as part of new issues that are more specific?
This was a really early days issue that we've done a great job on - we don't want this to be open forever though
from dashboard.
@AlanGreene @skaegi I think it's fine to close it but we do need to track this effort somewhere. I see it as having to pieces, the design spec and the dev issue. So, it could be divided into two new issues.
from dashboard.
Related Issues (20)
- v1 Release Dashboard Support HOT 4
- Stop pipeline default option should be CancelledRunFinally instead of Cancelled HOT 2
- External Logs URL data is not displayed HOT 4
- Tekton pipeline run should support a params with an drop-down option HOT 4
- Tekton Dashboard 401 error HOT 1
- Migrate off `pipelineResources` for Dashboard HOT 2
- how to make params optional with drop-down box like serviceaccount
- Dashboard Not Available After Following Install Directions HOT 2
- TEP-0047: Pipeline Task Display Name HOT 2
- Logs are only appearing once pod is completed HOT 12
- Support for re-try option in the pipeline dashboard HOT 1
- can not import some Tekton resources using the Tekton Dashboard HOT 3
- Dashboard step output doesn't appear when stdoutConfig or stderrConfig is used in task definition HOT 2
- Improve display of pipelines loaded via remote resolution HOT 8
- Unable to import pipeline and tasks while following the Minikube tutorial HOT 5
- Cert manager can't create pods for ingress deployed in tekton-pipelines namespace due to namespace restrictions HOT 1
- Dashboard hangs when pipelineruns are in 1000's HOT 1
- Pass timeframe to external-logs service HOT 1
- Have Pipelines and Tasks sections also display definitions from remote resolvers, such as git, etc HOT 2
- Google storage has not been updated with latest 0.36.1 release HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from dashboard.