Issue 489: Fix the links

backend/kale/rpc/kfp.py

@@ -19,6 +19,13 @@ def list_experiments(request):
     return experiments
 
 
+def get_ui_host(request):
+    """Get a UI Host. If it does not exist return None."""
+    c = _get_client()
+    host = getattr(c, "_uihost", None) or getattr(c, "host", None)
+    return host
+
+
 def get_experiment(request, experiment_name):
     """Get a KFP experiment. If it does not exist return None."""
     client = _get_client()

labextension/src/lib/Commands.ts

@@ -132,6 +132,19 @@ export default class Commands {
     };
   };
 
+  getKfpUiHost = async (): Promise<string> => {
+    try {
+      return await _legacy_executeRpc(
+        this._notebook,
+        this._kernel,
+        'kfp.get_ui_host',
+      );
+    } catch (error) {
+      console.error('Failed to retrieve KFP UI host', error);
+      return '';
+    }
+  };
+
   pollRun(runPipeline: RunPipeline, onUpdate: OnUpdateCallbak) {
     _legacy_executeRpcAndShowRPCError(
       this._notebook,

labextension/src/widgets/LeftPanel.tsx

@@ -376,6 +376,9 @@ export class KubeflowKaleLeftPanel extends React.Component<IProps, IState> {
       });
     };
 
+    const kfpUiHost = await commands.getKfpUiHost();
+    _updateDeployProgress({ kfpUiHost });
+
     const metadata = JSON.parse(JSON.stringify(this.state.metadata)); // Deepcopy metadata
 
     // assign the default docker image in case it is empty
@@ -443,7 +446,13 @@ export class KubeflowKaleLeftPanel extends React.Component<IProps, IState> {
     }
     _updateDeployProgress({
       message: 'Pipeline uploaded successfully',
-      pipeline: true
+      pipeline: {
+        pipeline: {
+          pipelineid: uploadPipeline.pipeline.pipelineid,
+          versionid: uploadPipeline.pipeline.versionid,
+          name: uploadPipeline.pipeline.name
+        }
+      }
     });
     // RUN
     if (this.state.deploymentType === 'run') {

labextension/src/widgets/deploys-progress/DeployProgress.tsx

@@ -16,6 +16,7 @@ import TerminatedIcon from '../../icons/statusTerminated';
 import { DeployProgressState } from './DeploysProgress';
 import DeployUtils from './DeployUtils';
 import { UploadPipelineResp, RunPipeline } from './DeploysProgress';
+import NotebookUtils from '../../lib/NotebookUtils';
 
 // From kubeflow/pipelines repo
 enum PipelineStatus {
@@ -30,6 +31,22 @@ enum PipelineStatus {
   UNKNOWN = 'UNKNOWN'
 }
 
+const DEFAULT_UI_URL = 'http://localhost:8080';
+
+const logLinksHint = (() => {
+  let logged = false;
+  return () => {
+    if (logged) {
+      return;
+    }
+    logged = true;
+    console.info(
+      `default for upload and run links is ${DEFAULT_UI_URL} ` +
+        'if your kpf ui is running somewhere else, set the KF_PIPELINES_UI_ENDPOINT environment variable.'
+    );
+  };
+})();
+
 interface IDeployProgressProps extends DeployProgressState {
   onRemove?: () => void;
 }
@@ -38,24 +55,22 @@ export const DeployProgress: React.FunctionComponent<
   IDeployProgressProps
 > = props => {
   const getUploadLink = (pipeline: UploadPipelineResp) => {
-    // link: /_/pipeline/#/pipelines/details/<id>
-    // id = uploadPipeline.pipeline.id
     if (!pipeline.pipeline || !pipeline.pipeline.pipelineid) {
       return '#';
     }
-    const link = `${window.location.origin}/_/pipeline/#/pipelines/details/${pipeline.pipeline.pipelineid}/version/${pipeline.pipeline.versionid}`;
+    const base = props.kfpUiHost || DEFAULT_UI_URL;
+    const link = `${base}/#/pipelines/details/${pipeline.pipeline.pipelineid}/version/${pipeline.pipeline.versionid}`;
     return props.namespace
       ? link.replace('#', `?ns=${props.namespace}#`)
       : link;
   };
 
   const getRunLink = (run: RunPipeline) => {
-    // link: /_/pipeline/#/runs/details/<id>
-    // id = runPipeline.id
     if (!run.id) {
       return '#';
     }
-    const link = `${window.location.origin}/_/pipeline/#/runs/details/${run.id}`;
+    const base = props.kfpUiHost || DEFAULT_UI_URL;
+    const link = `${base}/#/runs/details/${run.id}`;
     return props.namespace
       ? link.replace('#', `?ns=${props.namespace}#`)
       : link;
@@ -131,12 +146,20 @@ export const DeployProgress: React.FunctionComponent<
     );
   };
 
-  const handleCompileClick = () => {
+  const handleCompileClick = async () => {
     if (props.docManager && props.compiledPath) {
       try {
-        props.docManager.openOrReveal(props.compiledPath);
+        await props.docManager.services.contents.get(props.compiledPath);
+        await props.docManager.openOrReveal(props.compiledPath);
       } catch (error) {
         console.error('Error opening compiled path:', error);
+        const title = 'Failed to open compiled file';
+        const message = [
+          `File path: <pre><b>${props.compiledPath}</b></pre>`,
+          '',
+          'Probable cause: the file is hidden, try running jupyterlab with the --ContentsManager.allow_hidden=True flag'
+        ];
+        NotebookUtils.showMessage(title, message);
       }
     }
   };
@@ -243,6 +266,7 @@ export const DeployProgress: React.FunctionComponent<
         </a>
       </React.Fragment>
     );
+    logLinksHint();
   } else if (props.runPipeline === false) {
     runTpl = (
       <React.Fragment>

labextension/src/widgets/deploys-progress/DeploysProgress.tsx

@@ -36,6 +36,7 @@ export type DeployProgressState = {
   docManager?: IDocumentManager;
   namespace?: string;
   message?: string;
+  kfpUiHost?: string;
 };
 
 interface IDeploysProgress {