jwa(front): Create distinct notebook details page #6769

orfeas-k · 2022-11-24T12:38:29Z

This PR is part of the effort to add details pages for objects in our WAs. It creates a new notebook details page where a user can navigate and see key information about each notebook. More specifically, this tab contains an overview of the .status of the object plus a selection of the most important fields from the spec. These are Volumes, Applied Configurations from PodDefaults, Notebook type, ENV Vars, Minimum/Maximum CPU/RAM, Docker image, Conditions. We will also introduce soon LOGS, EVENTS and YAML tab.

Route

Regarding the link that this page will be served on, we need to be able to extract from the link information about the notebook's name we 're currently viewing and the current namespace. Thus, we ended up with notebook/details/namespace/notebook-name?ns=namespace .

Notebook's Conditions

Our plan here was to add a Conditions table inside the OVERVIEW tab in order to show the .status.conditions of the notebook.

Problem
However, we found out that the notebook’s .status.conditions are fundamentally broken. Right now the Notebook Controller is blindly appending Pod conditions on the Notebook's conditions https://github.com/kubeflow/kubeflow/blob/master/components/notebook-controller/controllers/notebook_controller.go#L247.
The conditions are expected to provide a summary of the state of an object for a specific point in time, not use the list to combine the conditions to get to the final state. https://github.com/kubernetes/community/blob/master/contributors/devel/sig-architecture/api-conventions.md#typical-status-properties

Workaround
Since currently, there is no point in exposing the notebook .status.conditions, we decided, as a temporary workaround, to show the Notebook’s underlying Pod conditions and to be explicit about which conditions the table refers to.

Sidenote

For clickable items - links, we followed the style and what we do in general in KFP (e.g. Output Artifacts)

Screenshots

cc @kimwnasptd

kimwnasptd

Looks great @orfeas-k!

Had some proposals mostly around using Notebook's Conditions and not the Pod ones. We've ensured the Controller is setting the Notebook Conditions properly from the previous release cc @apo-ger

kimwnasptd · 2022-11-28T17:57:59Z

components/crud-web-apps/common/backend/kubeflow/kubeflow/crud_backend/api/pod.py

+    if label_selector is None:
+        return v1_core.list_namespaced_pod(namespace)
+    else:
+        return v1_core.list_namespaced_pod(namespace = namespace, label_selector = label_selector)


Let's remove this if/else case and just do:

return v1_core.list_namespaced_pod(namespace = namespace, label_selector=label_selector)

in both cases. The default value is None so we should be good, since we use None in the function definition

kimwnasptd · 2022-11-28T17:59:17Z

.../crud-web-apps/jupyter/frontend/src/app/pages/notebook-page/overview/overview.component.html

+<ng-container *ngIf="!podRequestCompleted">
+  <lib-heading-row
+    class="heading-row"
+    heading="Pod Conditions"


Let's just do Conditions here. We should be able to use Notebook conditions

kimwnasptd · 2022-11-28T18:01:26Z

.../crud-web-apps/jupyter/frontend/src/app/pages/notebook-page/overview/overview.component.html

+<ng-container *ngIf="podRequestCompleted && pod">
+  <lib-conditions-table
+    *ngIf="pod?.status"
+    [conditions]="pod.status?.conditions"


Let's use the conditions from the Notebook status.

We've updated the Notebook Controller to properly set the conditions in #6628

kimwnasptd · 2022-11-28T18:03:13Z

Also, could you do a rebase on top of the latest changes? We've pushed some commits that updated the versions in packge.json

In this commit: - Add logic in the backend to fetch a single notebook and its underlying pod. - Make list_pods function in Kubeflow common code to accept a label_selector parameter and use it to filter out results when available. Signed-off-by: Orfeas Kourkakis <orfeas@arrikto.com>

In this commit: - Create OVERVIEW tab to show key information about the notebook and its underlying pod. - Create Content List Item component in Kubeflow commonn library to be able to encapsulate any content/component in the form of a list item. - Create Variables Group component in Kubeflow common library to show groups of variables in the form of chips. - Small UI tweak in Details list Item component from Kubeflow common library in order to stop chips from overlapping with each other. Signed-off-by: Orfeas Kourkakis <orfeas@arrikto.com>

Signed-off-by: Orfeas Kourkakis <orfeas@arrikto.com>

orfeas-k · 2022-11-29T08:05:08Z

@kimwnasptd Had to force push since I rebased to resolve the conflicts but the fixes for the comments above are separate commits on their own.

kimwnasptd · 2022-11-29T08:16:12Z

Changes look good, thanks for driving this @orfeas-k!

/lgtm
/approve

google-oss-prow · 2022-11-29T08:16:47Z

[APPROVALNOTIFIER] This PR is APPROVED

This pull-request has been approved by: kimwnasptd

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/crud-web-apps/OWNERS~~ [kimwnasptd]

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

* jwa(back): Get a single notebook and its pod In this commit: - Add logic in the backend to fetch a single notebook and its underlying pod. - Make list_pods function in Kubeflow common code to accept a label_selector parameter and use it to filter out results when available. Signed-off-by: Orfeas Kourkakis <orfeas@arrikto.com> * jwa(front): Create Notebook details page with OVERVIEW tab In this commit: - Create OVERVIEW tab to show key information about the notebook and its underlying pod. - Create Content List Item component in Kubeflow commonn library to be able to encapsulate any content/component in the form of a list item. - Create Variables Group component in Kubeflow common library to show groups of variables in the form of chips. - Small UI tweak in Details list Item component from Kubeflow common library in order to stop chips from overlapping with each other. Signed-off-by: Orfeas Kourkakis <orfeas@arrikto.com> * Fix linting errors * Include Kubeflow common library's new package-lock.json Signed-off-by: Orfeas Kourkakis <orfeas@arrikto.com> * jwa(front): Replace pod conditions with notebook status conditions Signed-off-by: Orfeas Kourkakis <orfeas@arrikto.com> * web-apps(back): Backend fetch pods fix Signed-off-by: Orfeas Kourkakis <orfeas@arrikto.com> Signed-off-by: Orfeas Kourkakis <orfeas@arrikto.com>

…6769) * jwa(back): Get a single notebook and its pod In this commit: - Add logic in the backend to fetch a single notebook and its underlying pod. - Make list_pods function in Kubeflow common code to accept a label_selector parameter and use it to filter out results when available. Signed-off-by: Orfeas Kourkakis <orfeas@arrikto.com> * jwa(front): Create Notebook details page with OVERVIEW tab In this commit: - Create OVERVIEW tab to show key information about the notebook and its underlying pod. - Create Content List Item component in Kubeflow commonn library to be able to encapsulate any content/component in the form of a list item. - Create Variables Group component in Kubeflow common library to show groups of variables in the form of chips. - Small UI tweak in Details list Item component from Kubeflow common library in order to stop chips from overlapping with each other. Signed-off-by: Orfeas Kourkakis <orfeas@arrikto.com> * Fix linting errors * Include Kubeflow common library's new package-lock.json Signed-off-by: Orfeas Kourkakis <orfeas@arrikto.com> * jwa(front): Replace pod conditions with notebook status conditions Signed-off-by: Orfeas Kourkakis <orfeas@arrikto.com> * web-apps(back): Backend fetch pods fix Signed-off-by: Orfeas Kourkakis <orfeas@arrikto.com> Signed-off-by: Orfeas Kourkakis <orfeas@arrikto.com>

google-oss-prow bot requested review from elikatsis and StefanoFioravanzo November 24, 2022 12:38

google-oss-prow bot added the size/XXL label Nov 24, 2022

kimwnasptd reviewed Nov 28, 2022

View reviewed changes

orfeas-k added 6 commits November 29, 2022 10:01

Fix linting errors

fed93d8

Include Kubeflow common library's new package-lock.json

f78cd42

Signed-off-by: Orfeas Kourkakis <orfeas@arrikto.com>

jwa(front): Replace pod conditions with notebook status conditions

3783679

Signed-off-by: Orfeas Kourkakis <orfeas@arrikto.com>

web-apps(back): Backend fetch pods fix

f3265ba

Signed-off-by: Orfeas Kourkakis <orfeas@arrikto.com>

orfeas-k force-pushed the feature-orfeas-k-jwa-notebook-details-page branch from f36bc87 to f3265ba Compare November 29, 2022 08:04

google-oss-prow bot assigned kimwnasptd Nov 29, 2022

google-oss-prow bot added the lgtm label Nov 29, 2022

google-oss-prow bot added the approved label Nov 29, 2022

google-oss-prow bot merged commit 6b899b2 into kubeflow:master Nov 29, 2022

kimwnasptd deleted the feature-orfeas-k-jwa-notebook-details-page branch November 29, 2022 08:20

This was referenced Nov 29, 2022

jwa(front): Add LOGS tab to the notebook details page #6779

Merged

VWA: Create Volume details page #6788

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

jwa(front): Create distinct notebook details page #6769

jwa(front): Create distinct notebook details page #6769

orfeas-k commented Nov 24, 2022 •

edited

Loading

kimwnasptd left a comment

kimwnasptd Nov 28, 2022

kimwnasptd Nov 28, 2022

kimwnasptd Nov 28, 2022

kimwnasptd commented Nov 28, 2022

orfeas-k commented Nov 29, 2022

kimwnasptd commented Nov 29, 2022

google-oss-prow bot commented Nov 29, 2022

jwa(front): Create distinct notebook details page #6769

jwa(front): Create distinct notebook details page #6769

Conversation

orfeas-k commented Nov 24, 2022 • edited Loading

Route

Notebook's Conditions

Sidenote

Screenshots

kimwnasptd left a comment

Choose a reason for hiding this comment

kimwnasptd Nov 28, 2022

Choose a reason for hiding this comment

kimwnasptd Nov 28, 2022

Choose a reason for hiding this comment

kimwnasptd Nov 28, 2022

Choose a reason for hiding this comment

kimwnasptd commented Nov 28, 2022

orfeas-k commented Nov 29, 2022

kimwnasptd commented Nov 29, 2022

google-oss-prow bot commented Nov 29, 2022

orfeas-k commented Nov 24, 2022 •

edited

Loading