[FR] Hide sidebar when in Kubeflow mode

[StefanoFioravanzo]

There is an ongoing discussion about how web apps should behave when deployed as part Kubeflow. See kubeflow/dashboard#41.

The main discussion point I would like to focus on for KFP UI is (quoting from the issue):

There is a CentralDashboard which:

• decides what Namespaces to show to the user and feeds to the app the selected Namespace
• has a left hand sidebar, which can have subsections centraldashboard: Improve sidebar UX kubeflow#5474. This side bar can be used for navigating the user between different pages of the underlying deployed app

Centraldashboard should act as the single place where all applications expose their pages. Centraldashboard's sidebar is very easily customizable with a ConfigMap and allows creating collapsible subsections.

Consider also the discussion here kubeflow/katib#1437 (comment) around the sidebar of the Katib UI. The new Katib UI (kubeflow/katib#1427) will not have such sidebar and instead expose Katib pages using Centraldashboard (when deployed in Kubeflow mode).

[StefanoFioravanzo]

KFP comes already with two deployment modes: KUBEFLOW and MARKETPLACE. See

pipelines/frontend/src/lib/Flags.ts

Lines 1 to 4 in 0795597

	export enum Deployments {
	KUBEFLOW = 'KUBEFLOW',
	MARKETPLACE = 'MARKETPLACE',
	}

and

pipelines/frontend/server/handlers/index-html.ts

Lines 60 to 72 in 0795597

	function replaceRuntimeContent(content: string | undefined, deployment: Deployments) {
	if (content && deployment === Deployments.KUBEFLOW) {
	return content
	.replace(DEFAULT_FLAG, 'window.KFP_FLAGS.DEPLOYMENT="KUBEFLOW"')
	.replace(
	KUBEFLOW_CLIENT_PLACEHOLDER,
	`<script id="kubeflow-client-placeholder" src="/dashboard_lib.bundle.js"></script>`,
	);
	}
	if (content && deployment === Deployments.MARKETPLACE) {
	return content.replace(DEFAULT_FLAG, 'window.KFP_FLAGS.DEPLOYMENT="MARKETPLACE"');
	}
	return content;

When in KUBEFLOW mode, KFP loads the Centraldashboard shared library to inherit the selected Namespace.

Given that this mechanism is already in place, we can simply hide the sidebar component whenever the deployment is KUBEFLOW. With the Kubeflow 1.3 release, we will update the Centraldashboard manifests to include all KFP pages as well.

Now:

Then:

/cc @Bobgy

[Bobgy]

@StefanoFioravanzo some of KFP users may deploy it in their own env, shall we add a separate config to hide sidebar?

[StefanoFioravanzo]

@Bobgy Do you have examples of people deploying KFP in KUBEFLOW mode, but outside of Kubeflow? I think in those cases they wouldn't set the DEPLOYMENT var, since it's not needed. So:

1. Having KUBEFLOW deployment mode both load the Centraldashboard lib and hide the sidenav makes it crystal clear what this mode is for: being part of Kubeflow
2. Having a HIDE_SIDENAV var makes it more flexible, allowing people to activate Centraldashboard lib without hiding the sidebar

I do prefer (1) because it makes more sense semantically, but if you feel strongly about (2) then let's go with it

[Bobgy]

@StefanoFioravanzo we do have customers who pick Kubeflow components and deploy in a very customized way (in multi-user mode). So I worry if we always hide sidenav for Kubeflow deployment, KFP UI will be very coupled to central dashboard UI. It'll be harder to upgrade KFP UI (including sidenav upgrade) by itself.

Therefore, I'd suggest to go with 2.
or maybe, HIDE_SIDENAV can default to true in KUBEFLOW mode, but it can be overridden by explicitly setting HIDE_SIDENAV=false.

[StefanoFioravanzo]

@Bobgy I like this proposal

HIDE_SIDENAV can default to true in KUBEFLOW mode, but it can be overridden by explicitly setting HIDE_SIDENAV=false.

Ok then, I will update the related PR to introduce this new env var