openshift-dd-ext icon indicating copy to clipboard operation
openshift-dd-ext copied to clipboard
verified publisher icon redhat-developer

Display URL link of the deployed image

Open slemeur opened this issue 3 years ago • 4 comments

As a user, once I have deployed my application, I'd like the URL to the application to be displayed in the window. Right now it automatically opens a new tab in the browser, but I might need to get that URL as a clickable link, as I might close the browser tab or need to copy/paste the URL in another tool.

slemeur avatar Apr 25 '22 09:04 slemeur

You can already copy the route URL from the last output line ('Application is exposed as: ' + route). But I think we need to use a regular div instead of a textarea to show the output, so we can display richer content, like hyperlinks.

fbricon avatar Apr 25 '22 09:04 fbricon

We can use https://www.npmjs.com/package/react-lazylog.

dgolovin avatar Apr 27 '22 06:04 dgolovin

@dgolovin react-lazylog doesn't have clickable links, although there's a 7 month old PR for that. Regardless, when I tried to use it, I managed to see something the 1st time, then the page rendering was gone when I reloaded.

export function DeploymentOutput(props: DeploymentOutputProps) {

  let output = props?.deployResponse;

  return (
    <Box
      display="flex"
      flexDirection="column"
      flexGrow={1}
      width="100%"
    >
      <LazyLog extraLines={1} follow enableSearch text={output} caseInsensitive />
    </Box>
  );
}

Restarting the dashboard didn't help. Something makes it crash but no idea what/why.

Uncaught Error: Invalid offset NaN specified
    at CellSizeAndPositionManager._findNearestCell (CellSizeAndPositionManager.js:277:1)
    at CellSizeAndPositionManager.getVisibleCellRange (CellSizeAndPositionManager.js:205:1)
    at ScalingCellSizeAndPositionManager.getVisibleCellRange (ScalingCellSizeAndPositionManager.js:133:1)
    at Grid._calculateChildrenToRender (Grid.js:752:1)
    at Grid.render (Grid.js:669:1)
    at finishClassComponent (react-dom.development.js:17485:1)
    at updateClassComponent (react-dom.development.js:17435:1)
    at beginWork (react-dom.development.js:19073:1)
    at HTMLUnknownElement.callCallback (react-dom.development.js:3945:1)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:3994:1)
_findNearestCell @ CellSizeAndPositionManager.js:277
getVisibleCellRange @ CellSizeAndPositionManager.js:205
getVisibleCellRange @ ScalingCellSizeAndPositionManager.js:133
_calculateChildrenToRender @ Grid.js:752
render @ Grid.js:669
finishClassComponent @ react-dom.development.js:17485
updateClassComponent @ react-dom.development.js:17435
beginWork @ react-dom.development.js:19073
callCallback @ react-dom.development.js:3945
invokeGuardedCallbackDev @ react-dom.development.js:3994
invokeGuardedCallback @ react-dom.development.js:4056
beginWork$1 @ react-dom.development.js:23964
performUnitOfWork @ react-dom.development.js:22776
workLoopSync @ react-dom.development.js:22707
renderRootSync @ react-dom.development.js:22670
performSyncWorkOnRoot @ react-dom.development.js:22293
(anonymous) @ react-dom.development.js:11327
unstable_runWithPriority @ scheduler.development.js:468
runWithPriority$1 @ react-dom.development.js:11276
flushSyncCallbackQueueImpl @ react-dom.development.js:11322
flushSyncCallbackQueue @ react-dom.development.js:11309
discreteUpdates$1 @ react-dom.development.js:22420
discreteUpdates @ react-dom.development.js:3756
dispatchDiscreteEvent @ react-dom.development.js:5889
react-dom.development.js:20085 The above error occurred in the <Grid> component:

    at Grid (http://localhost:3000/static/js/bundle.js:89761:86)
    at List (http://localhost:3000/static/js/bundle.js:92708:86)
    at div
    at AutoSizer (http://localhost:3000/static/js/bundle.js:87460:86)
    at t (http://localhost:3000/static/js/bundle.js:74527:9)
    at div
    at http://localhost:3000/static/js/bundle.js:4325:66
    at Box (http://localhost:3000/static/js/bundle.js:30235:72)
    at DeploymentOutput
    at div
    at http://localhost:3000/static/js/bundle.js:4325:66
    at Box (http://localhost:3000/static/js/bundle.js:30235:72)
    at App (http://localhost:3000/static/js/bundle.js:67:94)
    at InnerThemeProvider (http://localhost:3000/static/js/bundle.js:29473:70)
    at ThemeProvider (http://localhost:3000/static/js/bundle.js:29166:5)
    at ThemeProvider (http://localhost:3000/static/js/bundle.js:29493:5)
    at DockerMuiThemeProvider (http://localhost:3000/static/js/bundle.js:3246:3)

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.
logCapturedError @ react-dom.development.js:20085
update.callback @ react-dom.development.js:20118
callCallback @ react-dom.development.js:12318
commitUpdateQueue @ react-dom.development.js:12339
commitLifeCycles @ react-dom.development.js:20736
commitLayoutEffects @ react-dom.development.js:23426
callCallback @ react-dom.development.js:3945
invokeGuardedCallbackDev @ react-dom.development.js:3994
invokeGuardedCallback @ react-dom.development.js:4056
commitRootImpl @ react-dom.development.js:23151
unstable_runWithPriority @ scheduler.development.js:468
runWithPriority$1 @ react-dom.development.js:11276
commitRoot @ react-dom.development.js:22990
performSyncWorkOnRoot @ react-dom.development.js:22329
(anonymous) @ react-dom.development.js:11327
unstable_runWithPriority @ scheduler.development.js:468
runWithPriority$1 @ react-dom.development.js:11276
flushSyncCallbackQueueImpl @ react-dom.development.js:11322
flushSyncCallbackQueue @ react-dom.development.js:11309
discreteUpdates$1 @ react-dom.development.js:22420
discreteUpdates @ react-dom.development.js:3756
dispatchDiscreteEvent @ react-dom.development.js:5889
CellSizeAndPositionManager.js:277 Uncaught Error: Invalid offset NaN specified
    at CellSizeAndPositionManager._findNearestCell (CellSizeAndPositionManager.js:277:1)
    at CellSizeAndPositionManager.getVisibleCellRange (CellSizeAndPositionManager.js:205:1)
    at ScalingCellSizeAndPositionManager.getVisibleCellRange (ScalingCellSizeAndPositionManager.js:133:1)
    at Grid._calculateChildrenToRender (Grid.js:752:1)
    at Grid.render (Grid.js:669:1)
    at finishClassComponent (react-dom.development.js:17485:1)
    at updateClassComponent (react-dom.development.js:17435:1)
    at beginWork (react-dom.development.js:19073:1)
    at HTMLUnknownElement.callCallback (react-dom.development.js:3945:1)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:3994:1)
_findNearestCell @ CellSizeAndPositionManager.js:277
getVisibleCellRange @ CellSizeAndPositionManager.js:205
getVisibleCellRange @ ScalingCellSizeAndPositionManager.js:133
_calculateChildrenToRender @ Grid.js:752
render @ Grid.js:669
finishClassComponent @ react-dom.development.js:17485
updateClassComponent @ react-dom.development.js:17435
beginWork @ react-dom.development.js:19073
callCallback @ react-dom.development.js:3945
invokeGuardedCallbackDev @ react-dom.development.js:3994
invokeGuardedCallback @ react-dom.development.js:4056
beginWork$1 @ react-dom.development.js:23964
performUnitOfWork @ react-dom.development.js:22776
workLoopSync @ react-dom.development.js:22707
renderRootSync @ react-dom.development.js:22670
performSyncWorkOnRoot @ react-dom.development.js:22293
(anonymous) @ react-dom.development.js:11327
unstable_runWithPriority @ scheduler.development.js:468
runWithPriority$1 @ react-dom.development.js:11276
flushSyncCallbackQueueImpl @ react-dom.development.js:11322
flushSyncCallbackQueue @ react-dom.development.js:11309
discreteUpdates$1 @ react-dom.development.js:22420
discreteUpdates @ react-dom.development.js:3756
dispatchDiscreteEvent @ react-dom.development.js:5889
react-dom.development.js:67 Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.
    at ImageSelector (http://localhost:3000/static/js/bundle.js:2152:94)
    at div
    at http://localhost:3000/static/js/bundle.js:4325:66
    at Box (http://localhost:3000/static/js/bundle.js:30235:72)
    at App (http://localhost:3000/static/js/bundle.js:67:94)
    at InnerThemeProvider (http://localhost:3000/static/js/bundle.js:29473:70)
    at ThemeProvider (http://localhost:3000/static/js/bundle.js:29166:5)
    at ThemeProvider (http://localhost:3000/static/js/bundle.js:29493:5)
    at DockerMuiThemeProvider (http://localhost:3000/static/js/bundle.js:3246:3)

fbricon avatar Apr 27 '22 10:04 fbricon

@fbricon It was is old and abandoned, but it is working fine in VSCode OpenShift. Another option to use PatternFly reat-log-viewer but I have no idea how to control styles there and if it support links.

dgolovin avatar Apr 28 '22 04:04 dgolovin