Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Dashboard v1 UI rewrite done #2361

Merged
merged 6 commits into from Feb 4, 2019
Merged

Dashboard v1 UI rewrite done #2361

merged 6 commits into from Feb 4, 2019

Conversation

avdaredevil
Copy link
Contributor

@avdaredevil avdaredevil commented Feb 1, 2019

Targets issue #2359

Before After
Before design for Kubeflow Dashboard AP's design for Kubeflow Dashboard
Iframe view
image

Responsive

Responsive Menu Responsive Page with Hamburger
image image

TODOs

  • Most UI work for now is done (will confirm with UX folk)
  • Setup a backend to pass data to the dash

This change is Reviewable

Rewrote the entire app in polymer (using CDNs), added logo, made a sidebar, using animations, responsive and a11y added, colors matched up to spec, iframe navifation added for links, conditional view logic added, responsive view with hamburger icon added, empty state added for activities page
@richardsliu
Copy link
Contributor

/assign @ajayalfred

- Added Sidebar footer with Privacy and Build (currently static)
- Added Sidebar divider between menu and other items
- Sidebar content now is colored a dimunitive color till highlighted
- Sidebar active item no longer emboldens
- Paper-tabs moved lower to match design spec, and slider for tabs made thicc
… the default view (blue) and the responsive view (darker)
@jlewi
Copy link
Contributor

jlewi commented Feb 2, 2019

/test all

@jlewi
Copy link
Contributor

jlewi commented Feb 2, 2019

/assign @kunmingg

@jlewi
Copy link
Contributor

jlewi commented Feb 2, 2019

@avdaredevil This is great. It would be good to demo this at one of the community meetings once its merged.

@avdaredevil
Copy link
Contributor Author

@jlewi Thanks! Sounds good to me

@kunmingg
Copy link
Contributor

kunmingg commented Feb 4, 2019

/lgtm
/approve
Thanks!

@k8s-ci-robot
Copy link
Contributor

[APPROVALNOTIFIER] This PR is APPROVED

This pull-request has been approved by: kunmingg

The full list of commands accepted by this bot can be found here.

The pull request process is described here

Needs approval from an approver in each of these files:

Approvers can indicate their approval by writing /approve in a comment
Approvers can cancel approval by writing /approve cancel in a comment

@k8s-ci-robot k8s-ci-robot merged commit 16e4a48 into kubeflow:master Feb 4, 2019
@abhi-g
Copy link
Member

abhi-g commented Feb 4, 2019

🎉🎉🎉

Copy link
Contributor

@yebrahim yebrahim left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Sorry for the late review.
Was this merged by mistake though? I think we still have a few things to discuss here around using iframes and the choice of JS framework. Some pieces are also empty place holders now (namely Activities tab and namespace picker), should we keep only the working pieces in the UI?

@@ -0,0 +1,22 @@
<base href="https://cdn.rawgit.com/download/polymer-cdn/2.6.0/lib/">
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We should move away from using the CDN.
Separately, rawgit is going away, we shouldn't rely on it even in the interim.

homeOrIframeViewIndex: {type: Number, value: 0},
url: {type: String, value: ""},
}}
static get observers() {return [
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

cleanup?

@kunmingg
Copy link
Contributor

kunmingg commented Feb 4, 2019

@yebrahim
Thanks!
Can we select framework in follow up PRs, especially when backend parts are involved?

@yebrahim
Copy link
Contributor

yebrahim commented Feb 4, 2019

My comment was about the use of Polymer, I'm not aware of the backend parts.

@avdaredevil
Copy link
Contributor Author

@yebrahim Let's continue this conversation here: #2390

kkasravi pushed a commit to kkasravi/kubeflow that referenced this pull request Feb 8, 2019
* Dashboard v1 complete UI

Rewrote the entire app in polymer (using CDNs), added logo, made a sidebar, using animations, responsive and a11y added, colors matched up to spec, iframe navifation added for links, conditional view logic added, responsive view with hamburger icon added, empty state added for activities page

* Added dashboard blurb to roadmap

* Fixed a link issue on readme

* A bunch of polish:
- Added Sidebar footer with Privacy and Build (currently static)
- Added Sidebar divider between menu and other items
- Sidebar content now is colored a dimunitive color till highlighted
- Sidebar active item no longer emboldens
- Paper-tabs moved lower to match design spec, and slider for tabs made thicc

* Sidebar colors variabalized and made alpha based, so they can work on the default view (blue) and the responsive view (darker)
@sarahmaddox
Copy link
Contributor

sarahmaddox commented Feb 24, 2019

Comment moved to a separate issue, as this PR is already merged.
See issue: #2546

saffaalvi pushed a commit to StatCan/kubeflow that referenced this pull request Feb 11, 2021
* Dashboard v1 complete UI

Rewrote the entire app in polymer (using CDNs), added logo, made a sidebar, using animations, responsive and a11y added, colors matched up to spec, iframe navifation added for links, conditional view logic added, responsive view with hamburger icon added, empty state added for activities page

* Added dashboard blurb to roadmap

* Fixed a link issue on readme

* A bunch of polish:
- Added Sidebar footer with Privacy and Build (currently static)
- Added Sidebar divider between menu and other items
- Sidebar content now is colored a dimunitive color till highlighted
- Sidebar active item no longer emboldens
- Paper-tabs moved lower to match design spec, and slider for tabs made thicc

* Sidebar colors variabalized and made alpha based, so they can work on the default view (blue) and the responsive view (darker)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

10 participants