Adds recent Pipelines cards for Definitions and Runs. #3379

prodonjs · 2019-05-31T15:51:48Z

closes #3236

Adds two new cards for showing the 5 most recently created Pipeline definitions and Pipeline runs.

/area front-end
/area centraldashboard
/cc @avdaredevil
/cc @ajayalfred

This change is

prodonjs · 2019-05-31T15:55:44Z

This commit is pushed to the test cluster (https://kf-dev.endpoints.prodonjs-kubeflow-dev.cloud.goog/)

Here's a shot with everything populated.

ajayalfred · 2019-05-31T17:04:36Z

Looks soooo good!!!! I love it.

Can you please change the title of the pipeline card to "Recent Pipelines". Pipelines are not always created, they're sometimes uploaded, saved from the Hub, in the future they'll be deployed directly from Notebooks... it's safer to just call it "Recent Pipelines"

avdaredevil · 2019-05-31T16:11:01Z

components/centraldashboard/public/components/dashboard-view.pug

@@ -21,6 +21,10 @@ div#grid
    .column
        paper-card(heading='Recent Notebooks')
                notebooks-card(namespace='[[namespace]]')


Suggested change

notebooks-card(namespace='[[namespace]]')

notebooks-card(namespace='[[namespace]]')

avdaredevil · 2019-05-31T16:12:13Z

components/centraldashboard/public/components/dashboard-view.pug

+        paper-card(heading='Recently Created Pipelines')
+            pipelines-card(artifact-type='pipelines')
+        paper-card(heading='Recent Pipeline Runs')
+            pipelines-card(artifact-type='runs')


Does it make sense to call these elements cards? In that case, maybe they should extend paper-card itself?

class PipelinesCard extends PaperCard

You know I never thought of that. Going with the inheritance route doesn't seem like it would provide much benefit since the main purpose of the paper-card is to get the elevation style and template which exposes the slot where our content goes. I experimented with it and it seemed like a bit more trouble than it's worth, especially since our overridden styles for paper-card wouldn't apply to the new element's name.

We could have the paper-card be part of the template for the pipelines-card and notebooks-card items, but we'd need to move some styles around to accommodate that.

It would probably be more explicit to say pipelines-card-body but I got lazy with naming.

I see, yeah both are valid. Ok let's go with the body name in that case?

…nes cards

prodonjs · 2019-05-31T19:06:53Z

@avdaredevil I was able to move most of the common card stuff to the the card-styles module and then move the paper-card into the notebooks and pipelines component templates. That was definitely easier than refactoring the component name everywhere.

Changes are deployed to the cluster so LMK what you think.

avdaredevil · 2019-05-31T19:41:40Z

components/centraldashboard/webpack.config.js

@@ -206,6 +206,10 @@ module.exports = {
                        '/$1/services/$2/proxy/notebook/$1/$2/$3',
                },
            },
+            '/pipeline': {
+                target: 'http://localhost:8083/api/v1/namespaces/kubeflow/services/ml-pipeline:8888/proxy',


What's this?

During development, this allows requests made from the browser that are destined for URLs that would only be available in cluster (ie. /jupyter/ or /pipeline/) to be proxied to a local Kubernetes proxy server that can be started by running kubectl proxy -p 8083.

So when you run npm run dev, the front-end is served on port 8081. Our API server runs on port 8082 with any request made from the front-end to /api being proxied there. These additional lines allow you to communicate with the other services that will be available at specific top-level routes when deployed.

Here's some more information on what you can do with kubectl proxy.
https://kubernetes.io/docs/tasks/access-application-cluster/access-cluster/#directly-accessing-the-rest-api

avdaredevil · 2019-05-31T19:47:20Z

@prodonjs Just verified with the view. One thing is that I don't think that the chart cards scale when the view changes.

This is obviously not a relevant issue to this PR, but could perhaps be included if the fix is small enough?

prodonjs · 2019-05-31T20:04:36Z

With respect to the chart resizing issue, I noticed this behavior but I could not figure out how to the responsiveness to work like you would expect despite trying different things in their documentation. The current state at least ensures that the chart takes up the full width of the column, but there doesn't seem to be any detection of when the parent container is resized. I experimented with seeing when the onResize callback gets fired and it appears like it only happens once when the chart is initially loaded.

ajayalfred · 2019-05-31T20:22:45Z

I'd vote for the chart staying within it's containing box over responsiveness.

prodonjs · 2019-06-03T14:52:12Z

OK the latest commit should fix the chart display issue. It turns out there was a known bug with Chart.js rendering inside of Polymer Shadow DOM (chartjs/Chart.js#5763). The fix requires injecting some of the Chart.JS css at the component level.

https://kf-dev.endpoints.prodonjs-kubeflow-dev.cloud.goog/ has the change deployed which should result in the charts always filling the full size of the container they reside in.

avdaredevil · 2019-06-03T18:01:12Z

That's great news! Thanks, @prodonjs

avdaredevil · 2019-06-04T02:39:36Z

/lgtm
/approve

k8s-ci-robot · 2019-06-04T02:39:40Z

[APPROVALNOTIFIER] This PR is APPROVED

This pull-request has been approved by: avdaredevil

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:

~~components/centraldashboard/OWNERS~~ [avdaredevil]

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

* Adds Pipelines Cards for definitions and runs. * Address review comments * Fix progress colors and move to common card-styles * Consolidates styles and embeds paper-card inside notebooks and pipelines cards * Adds Chart.JS css to ShadowDOM to enable responsive behavior

Adds Pipelines Cards for definitions and runs.

5a5052a

k8s-ci-robot requested review from ajayalfred and avdaredevil May 31, 2019 15:51

k8s-ci-robot added area/front-end area/centraldashboard UI/UX improvements for Kubeflow central dashboard / landing page labels May 31, 2019

googlebot added the cla: yes label May 31, 2019

k8s-ci-robot added the size/L label May 31, 2019

avdaredevil suggested changes May 31, 2019

View reviewed changes

Address review comments

fff0071

prodonjs mentioned this pull request May 31, 2019

Adds recent Jupyter Notebooks card to Central Dashboard #3377

Merged

Fix progress colors and move to common card-styles

ebfb796

k8s-ci-robot added size/XL and removed size/L labels May 31, 2019

Consolidates styles and embeds paper-card inside notebooks and pipeli…

63efa57

…nes cards

prodonjs force-pushed the pipelines-card branch from 336b9d6 to 63efa57 Compare May 31, 2019 19:01

avdaredevil reviewed May 31, 2019

View reviewed changes

Adds Chart.JS css to ShadowDOM to enable responsive behavior

a704c4e

k8s-ci-robot assigned avdaredevil Jun 4, 2019

k8s-ci-robot added the lgtm label Jun 4, 2019

k8s-ci-robot added the approved label Jun 4, 2019

k8s-ci-robot merged commit 4fda196 into kubeflow:master Jun 4, 2019

prodonjs deleted the pipelines-card branch June 5, 2019 13:33

LuChengTHU mentioned this pull request Oct 20, 2020

Fix development README for central dashboard #5351

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Adds recent Pipelines cards for Definitions and Runs. #3379

Adds recent Pipelines cards for Definitions and Runs. #3379

prodonjs commented May 31, 2019 •

edited by jlewi

Loading

prodonjs commented May 31, 2019

ajayalfred commented May 31, 2019

avdaredevil May 31, 2019

prodonjs May 31, 2019

avdaredevil May 31, 2019

prodonjs May 31, 2019

avdaredevil May 31, 2019

prodonjs commented May 31, 2019

avdaredevil May 31, 2019

prodonjs May 31, 2019

avdaredevil commented May 31, 2019 •

edited

Loading

prodonjs commented May 31, 2019

ajayalfred commented May 31, 2019

prodonjs commented Jun 3, 2019

avdaredevil commented Jun 3, 2019

avdaredevil commented Jun 4, 2019

k8s-ci-robot commented Jun 4, 2019

	notebooks-card(namespace='[[namespace]]')
	notebooks-card(namespace='[[namespace]]')

Adds recent Pipelines cards for Definitions and Runs. #3379

Adds recent Pipelines cards for Definitions and Runs. #3379

Conversation

prodonjs commented May 31, 2019 • edited by jlewi Loading

prodonjs commented May 31, 2019

ajayalfred commented May 31, 2019

avdaredevil May 31, 2019

Choose a reason for hiding this comment

prodonjs May 31, 2019

Choose a reason for hiding this comment

avdaredevil May 31, 2019

Choose a reason for hiding this comment

prodonjs May 31, 2019

Choose a reason for hiding this comment

avdaredevil May 31, 2019

Choose a reason for hiding this comment

prodonjs commented May 31, 2019

avdaredevil May 31, 2019

Choose a reason for hiding this comment

prodonjs May 31, 2019

Choose a reason for hiding this comment

avdaredevil commented May 31, 2019 • edited Loading

prodonjs commented May 31, 2019

ajayalfred commented May 31, 2019

prodonjs commented Jun 3, 2019

avdaredevil commented Jun 3, 2019

avdaredevil commented Jun 4, 2019

k8s-ci-robot commented Jun 4, 2019

prodonjs commented May 31, 2019 •

edited by jlewi

Loading

avdaredevil commented May 31, 2019 •

edited

Loading