Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Provide VS Code AtlasMap extension in Che plugin registry #13922

Closed
apupier opened this issue Jul 19, 2019 · 24 comments
Closed

Provide VS Code AtlasMap extension in Che plugin registry #13922

apupier opened this issue Jul 19, 2019 · 24 comments
Labels
area/plugin-registry kind/enhancement A feature request - must adhere to the feature request template. lifecycle/stale Denotes an issue or PR has remained open with no activity and has become stale. severity/P2 Has a minor but important impact to the usage or development of the system.

Comments

@apupier
Copy link
Contributor

apupier commented Jul 19, 2019

  • requires Java in the container, need to use Java 8 as Java 11 is not supported yet Support java 11 atlasmap/atlasmap#1127
  • needs to test that the extension is working in Che, specificity which might require specific care: Java, VS Code webview, use of specific plugin folder data, use of specific port 8585, export of adm file

https://marketplace.visualstudio.com/items?itemName=redhat.atlasmap-viewer

@apupier
Copy link
Contributor Author

apupier commented Jul 19, 2019

  • export of adm file is broken:
    image
    Refused to display 'http://localhost:8585/#' in a frame because it set 'X-Frame-Options' to 'deny'.
  • ugly "-1%" when starting the server (I guess it is not specific to Atlasmap)
    image
  • on each server start, it is asking to open port 8585 or not (always open it? or find a way to not ask for it?)
    image
  • Open Instance schema file is opening local host browser, maybe woudl need to ask for both localhost and Che workspace? (I don't see it as blocking for an initial iteration)
  • clicking on top left menu "AtlasMap Data mapper UI" is redirecting to a non-workign page, also with
    Refused to display 'http://localhost:8585/' in a frame because it set 'X-Frame-Options' to 'deny'.
  • the "Open AtlasMap" contextual menu doesn't always appear (no found a pattern)
    image

After a little usage, the workspace started to go offline. I think i would need to check the memory used in a deeper analysis

@apupier
Copy link
Contributor Author

apupier commented Jul 19, 2019

several of these issues are nto specific to Che but can be reproduced in Theia eclipse-theia/theia#5007

@rhopp
Copy link
Contributor

rhopp commented Jul 19, 2019

I would vote for not including this issue in Che 7 GA, as we are pretty close to release and this seems to have lot of problems. Setting 7.1 milestone.

@rhopp rhopp added the severity/P2 Has a minor but important impact to the usage or development of the system. label Jul 19, 2019
@rhopp rhopp added this to the 7.1.0 milestone Jul 19, 2019
@apupier
Copy link
Contributor Author

apupier commented Jul 26, 2019

The Ui is no more even displayed.
I have a black screen:
image

the content of the frame seems normal(to verify but as far as I remember everything was coming with scripts)
image

If I reach the "provided URi" like http://server89h0rf9e-theia-idepea-server-13131.192.168.1.22.nip.io/ , I can access the AtlasMap data UI

image

using Che-Theia@4ef1d89 using Theia@4ef1d89 on minikube installed with chectl -a operator

I noticed in browser console that the connection was refused for the scripts, I suppose that I have not clicked "fast-enough" to enable" the redirection:
image

@apupier
Copy link
Contributor Author

apupier commented Dec 6, 2019

Using the new recommended way of using webviews and deactivating x-frame-options I have different error on latest Che:

Service Workers are not enabled. Webviews will not work properly
  | (anonymous) | @ | host.js:56
-- | -- | -- | --
  | (anonymous) | @ | host.js:54
  | (anonymous) | @ | host.js:115

as far as I know, AtlasMap is not using ServiceWorkers
This is workign well in latest Theia with this modified version of VS Code AtlasMap
if I follow the link suggested in the popup, the Ui is well displayed

Screenshot from 2019-12-06 16-18-07

@apupier
Copy link
Contributor Author

apupier commented Dec 6, 2019

based on coder/code-server#997 (comment) "service workers will only work over secure origins (localhost/127.0.0.1 or https)."

which explains why i tis working in Theia (it was on localhost) and why it is nto in my Ch einstance as it is using http.

@apupier
Copy link
Contributor Author

apupier commented Dec 10, 2019

Florent mentioned that TLS needs to be used to have https on the internal routes used between containers.

@apupier
Copy link
Contributor Author

apupier commented Dec 11, 2019

pointed out to #14035 (comment)

also need to start with --tls --self-signed-cert

apupier added a commit to apupier/che-plugin-registry that referenced this issue Feb 26, 2020
@apupier
Copy link
Contributor Author

apupier commented Feb 27, 2020

Tested with TLS activated, using latest chectl and still not working :-(

[apupier@linux ~]$ chectl version
chectl/0.0.20200226-next.bcb4028 linux-x64 node-v10.19.0
chectl server:start --platform=minikube --installer=helm

added the Certificate to Chrome:

  • 3 dots on top left -> Settings
  • Manage Certificates
  • Authorities
  • Import
  • Check website and software trust
  • Open Che
  • Create workspace using the plugin, for instance with this devfile:
metadata:
  name: atlasmap
components:
  - type: chePlugin
    reference: >-
      https://raw.githubusercontent.com/apupier/che-plugin-registry/addAtlasMap/v3/plugins/redhat/vscode-atlasmap/0.0.5/meta.yaml

apiVersion: 1.0.0
  • Use command palette to call "Open AtlasMap" command
  • webview is opening but with a grey page and message:
servergukvkt7z-theia-idehzc-server-3100.192.168.99.134.nip.io refused to connect.

There are no errors in the console browser.
There is one network request marked as red in browser developer tools:

Request URL: https://servergukvkt7z-theia-idehzc-server-3100.192.168.99.134.nip.io:8585/
Referrer Policy: no-referrer-when-downgrade
Provisional headers are shown
Referer: https://servergukvkt7z-theia-idehzc-server-3100.192.168.99.134.nip.io/webview/index.html?id=69cd592b-4938-49f0-959e-d0cexxxxxxx
sec-ch-ua: Google Chrome 80
Sec-Fetch-Dest: iframe
Upgrade-Insecure-Requests: 1
User-Agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/80.0.3987.87 Safari/537.36

apupier added a commit to apupier/che-plugin-registry that referenced this issue Jun 3, 2020
@benoitf
Copy link
Contributor

benoitf commented Jul 7, 2020

@apupier still a wip or there Is something we could merge ?

@apupier
Copy link
Contributor Author

apupier commented Jul 8, 2020

this is still not working.

@che-bot
Copy link
Contributor

che-bot commented Jan 4, 2021

Issues go stale after 180 days of inactivity. lifecycle/stale issues rot after an additional 7 days of inactivity and eventually close.

Mark the issue as fresh with /remove-lifecycle stale in a new comment.

If this issue is safe to close now please do so.

Moderators: Add lifecycle/frozen label to avoid stale mode.

@che-bot che-bot added the lifecycle/stale Denotes an issue or PR has remained open with no activity and has become stale. label Jan 4, 2021
@apupier
Copy link
Contributor Author

apupier commented Jan 4, 2021

/remove-lifecycle stale

@che-bot che-bot removed the lifecycle/stale Denotes an issue or PR has remained open with no activity and has become stale. label Jan 4, 2021
@che-bot
Copy link
Contributor

che-bot commented Jul 19, 2021

Issues go stale after 180 days of inactivity. lifecycle/stale issues rot after an additional 7 days of inactivity and eventually close.

Mark the issue as fresh with /remove-lifecycle stale in a new comment.

If this issue is safe to close now please do so.

Moderators: Add lifecycle/frozen label to avoid stale mode.

@che-bot che-bot added the lifecycle/stale Denotes an issue or PR has remained open with no activity and has become stale. label Jul 19, 2021
@apupier
Copy link
Contributor Author

apupier commented Jul 19, 2021

/remove-lifecycle stale

@apupier apupier removed the lifecycle/stale Denotes an issue or PR has remained open with no activity and has become stale. label Jul 19, 2021
@apupier
Copy link
Contributor Author

apupier commented Sep 3, 2021

tested with latest CodeReady Workspaces and latest VS Code AtlasMap.

in Red Hat developer sandbox with version
2.10 @ ee08d #4 :: Eclipse Che Dashboard 7.32.2 @ 135c

used:

apiVersion: 1.0.0
metadata:
  name: wksp-atlasmap-v5rbk
components:
  - type: chePlugin
    reference: 'https://gist.githubusercontent.com/apupier/ce1ad44916598ad57231d6e2cbb62830/raw/80e6c01de665d73132fab83ce808ef4de94300a8/meta.yaml'

the pointed gist contains:

apiVersion: v2
publisher: redhat
name: atlasmap-viewer
version: 0.0.7
type: VS Code extension
displayName: AtlasMap
title: AtlasMap
description: AtlasMap Data Transformation editor by Red Hat
category: Other
repository: 'https://github.com/jboss-fuse/vscode-atlasmap'
firstPublicationDate: '2021-04-30'
latestUpdateDate: '2021-06-09'
spec:
  extensions:
    - 'https://download.jboss.org/jbosstools/vscode/stable/vscode-atlasmap/vscode-atlasmap-0.0.7-106.vsix'
  endpoints:
  - name: "atlasmap-endpoint"
    public: true
    targetPort: 8585
    attributes:
      protocol: http
  containers:
    - image: "quay.io/eclipse/che-sidecar-java:11-86274e3"
      name: vscode-atlasmap
      memoryLimit: "512Mi"
      ports:
      - exposedPort: 8585

when calling, "Open AtlasMap" command, the webview is opening but it has an empty black screen.
Errors in console log seems unrelated (several times the same):

VM296 theia.3821aa02d8fe9311fc62.js:1 Uncaught (in promise) Error: Unknown actor CheTelemetry
  at RPCProtocolImpl.doInvokeHandler (/remote-endpoint/node_modules/@theia/plugin-ext/lib/common/rpc-protocol.js:287)
  at RPCProtocolImpl.invokeHandler (/remote-endpoint/node_modules/@theia/plugin-ext/lib/common/rpc-protocol.js:278)
  at RPCProtocolImpl.receiveRequest (/remote-endpoint/node_modules/@theia/plugin-ext/lib/common/rpc-protocol.js:242)
  at RPCProtocolImpl.receiveOneMessage (/remote-endpoint/node_modules/@theia/plugin-ext/lib/common/rpc-protocol.js:205)
  at /remote-endpoint/node_modules/@theia/plugin-ext/lib/common/rpc-protocol.js:103
  at /remote-endpoint/node_modules/@theia/core/lib/common/event.js:176
  at CallbackList.invoke (/remote-endpoint/node_modules/@theia/core/lib/common/event.js:191)
  at Emitter.fire (/remote-endpoint/node_modules/@theia/core/lib/common/event.js:318)
  at /remote-endpoint/node_modules/@theia/plugin-ext/lib/common/rpc-protocol.js:341
  at /remote-endpoint/node_modules/@theia/core/lib/common/event.js:176
the #document inside the iframe is ```html <style id="_defaultStyles"> body { background-color: var(--vscode-editor-background); color: var(--vscode-editor-foreground); font-family: var(--vscode-font-family); font-weight: var(--vscode-font-weight); font-size: var(--vscode-font-size); margin: 0; padding: 0 20px; }
img {
	max-width: 100%;
	max-height: 100%;
}

a {
	color: var(--vscode-textLink-foreground);
}

a:hover {
	color: var(--vscode-textLink-activeForeground);
}

a:focus,
input:focus,
select:focus,
textarea:focus {
	outline: 1px solid -webkit-focus-ring-color;
	outline-offset: -1px;
}

code {
	color: var(--vscode-textPreformat-foreground);
}

blockquote {
	background: var(--vscode-textBlockQuote-background);
	border-color: var(--vscode-textBlockQuote-border);
}

kbd {
	color: var(--vscode-editor-foreground);
	border-radius: 3px;
	vertical-align: middle;
	padding: 1px 3px;

	background-color: hsla(0,0%,50%,.17);
	border: 1px solid rgba(71,71,71,.4);
	border-bottom-color: rgba(88,88,88,.4);
	box-shadow: inset 0 -1px 0 rgba(88,88,88,.4);
}
.vscode-light kbd {
	background-color: hsla(0,0%,87%,.5);
	border: 1px solid hsla(0,0%,80%,.7);
	border-bottom-color: hsla(0,0%,73%,.7);
	box-shadow: inset 0 -1px 0 hsla(0,0%,73%,.7);
}

::-webkit-scrollbar {
	width: 10px;
	height: 10px;
}

::-webkit-scrollbar-thumb {
	background-color: var(--vscode-scrollbarSlider-background);
}
::-webkit-scrollbar-thumb:hover {
	background-color: var(--vscode-scrollbarSlider-hoverBackground);
}
::-webkit-scrollbar-thumb:active {
	background-color: var(--vscode-scrollbarSlider-activeBackground);
}</style><script>
		const acquireVsCodeApi = (function() {
			const originalPostMessage = window.parent.postMessage.bind(window.parent);
			const targetOrigin = '*';
			let acquired = false;

			let state = undefined;

			return () => {
				if (acquired) {
					throw new Error('An instance of the VS Code API has already been acquired');
				}
				acquired = true;
				return Object.freeze({
					postMessage: function(msg) {
						return originalPostMessage({ command: 'onmessage', data: msg }, targetOrigin);
					},
					setState: function(newState) {
						state = newState;
						originalPostMessage({ command: 'do-update-state', data: JSON.stringify(newState) }, targetOrigin);
						return newState;
					},
					getState: function() {
						return state;
					}
				});
			};
		})();
        const acquireTheiaApi = acquireVsCodeApi;
		delete window.parent;
		delete window.top;
		delete window.frameElement;
	</script>
				
			<base href="https://codeready-codeready-workspaces-operator.apps.sandbox-m2.ll9k.p1.openshiftapps.com:8585/">
			<meta http-equiv="Content-Security-Policy" content="
					default-src 'self' 'unsafe-inline' 'unsafe-hashes' 'unsafe-eval' https://codeready-codeready-workspaces-operator.apps.sandbox-m2.ll9k.p1.openshiftapps.com:8585/ https://codeready-codeready-workspaces-operator.apps.sandbox-m2.ll9k.p1.openshiftapps.com/;
					img-src 'self' https://codeready-codeready-workspaces-operator.apps.sandbox-m2.ll9k.p1.openshiftapps.com:8585/ https://codeready-codeready-workspaces-operator.apps.sandbox-m2.ll9k.p1.openshiftapps.com/ data:;
				">
		
			</head>
			<body class="vscode-dark">
				<div id="root"></div>
				<div id="modals"></div>
				<script>
					(async function injectAtlasmap() {
						const request = await fetch("https://codeready-codeready-workspaces-operator.apps.sandbox-m2.ll9k.p1.openshiftapps.com:8585/index.html");
						const body = await request.text();
						const vscode = acquireVsCodeApi();
						vscode.postMessage({
							command: 'atlasmapScripts',
							html: body,
						})
					})();
				</script>
			
			
		</body></html>

</details>

so got no entry point on why it is not working :-(

@tsmaeder
Copy link
Contributor

tsmaeder commented Sep 3, 2021

@apupier that stack trace indicates that the Che API doesn't work in the plugin host. We had a bug that was fixed some time ago, but probably not in that version. I don't know if that could affect webviews (might need che API to provide route URIs, maybe?)

@apupier
Copy link
Contributor Author

apupier commented Sep 8, 2021

with Che 7.36.0-SNAPSHOT installed through chectl chectl/0.0.20210906-next.57d4d7e linux-x64 node-v12.22.6
on minikube 1.22.0, there is still the black screen for the internal view. There is a popup notification asking to open in preview or in new tab. When clicking on preview, the AtlasMap UI is showing up. (but well this is not integrated in the normal UI).

Screenshot from 2021-09-08 09-33-29

In Console log, now there are these errors (which doesn't sound related to the problem itself):

Uncaught (in promise) ENOPRO: No file system provider found for scheme __minibrowser__preview__
   at https://serveriof3ov67-jwtproxy-server-4402.192.168.49.2.nip.io/theia.940ee5034cc0a50276d6.js:1:2309291
s @ theia.940ee5034cc0a50276d6.js:1
Promise.then (async)
c @ theia.940ee5034cc0a50276d6.js:1
(anonymous) @ theia.940ee5034cc0a50276d6.js:1
s @ theia.940ee5034cc0a50276d6.js:1
t.doUpdateOpenWidgets @ theia.940ee5034cc0a50276d6.js:1
(anonymous) @ navigator-open-editors-tree-model.ts:90
s @ index.js:476
e.emit @ index.js:433
e.emit @ index.js:106
t.processMessage @ dockpanel.js:319
f @ index.js:436
t @ index.js:172
p @ index.js:486
requestAnimationFrame (async)
(anonymous) @ index.js:455
e.postMessage @ index.js:202
e.update @ widget.js:354
(anonymous) @ status-bar.tsx:96
(anonymous) @ theia.940ee5034cc0a50276d6.js:1
(anonymous) @ theia.940ee5034cc0a50276d6.js:1
a @ theia.940ee5034cc0a50276d6.js:1
Promise.then (async)
c @ theia.940ee5034cc0a50276d6.js:1
(anonymous) @ theia.940ee5034cc0a50276d6.js:1
l @ theia.940ee5034cc0a50276d6.js:1
t.setElement @ theia.940ee5034cc0a50276d6.js:1
e.updateStatusBarItem @ notifications-contribution.ts:52
(anonymous) @ notifications-contribution.ts:49
(anonymous) @ event.ts:117
e.invoke @ event.ts:125
e.fire @ event.ts:267
(anonymous) @ notifications-manager.ts:76
b @ index.js:160
y @ index.js:170
C @ index.js:235
t.setVisibilityState @ notifications-manager.ts:107
t.showMessage @ notifications-manager.ts:190
e.processMessage @ message-service.ts:152
e.info @ message-service.ts:95
(anonymous) @ message-registry-main.ts:47
(anonymous) @ theia.940ee5034cc0a50276d6.js:1
(anonymous) @ theia.940ee5034cc0a50276d6.js:1
(anonymous) @ theia.940ee5034cc0a50276d6.js:1
i @ theia.940ee5034cc0a50276d6.js:1
e.doShowMessage @ theia.940ee5034cc0a50276d6.js:1
(anonymous) @ message-registry-main.ts:30
(anonymous) @ theia.940ee5034cc0a50276d6.js:1
(anonymous) @ theia.940ee5034cc0a50276d6.js:1
(anonymous) @ theia.940ee5034cc0a50276d6.js:1
i @ theia.940ee5034cc0a50276d6.js:1
e.$showMessage @ theia.940ee5034cc0a50276d6.js:1
e.doInvokeHandler @ rpc-protocol.ts:288
e.invokeHandler @ rpc-protocol.ts:273
e.receiveRequest @ rpc-protocol.ts:232
e.receiveOneMessage @ rpc-protocol.ts:193
(anonymous) @ rpc-protocol.ts:102
(anonymous) @ event.ts:117
e.invoke @ event.ts:125
e.fire @ event.ts:267
(anonymous) @ rpc-protocol.ts:344
(anonymous) @ event.ts:117
e.invoke @ event.ts:125
e.fire @ event.ts:267
(anonymous) @ hosted-plugin.ts:513
(anonymous) @ event.ts:117
e.invoke @ event.ts:125
e.fire @ event.ts:267
postMessage @ hosted-plugin-watcher.ts:35
(anonymous) @ proxy-factory.ts:157
(anonymous) @ theia.940ee5034cc0a50276d6.js:1
(anonymous) @ theia.940ee5034cc0a50276d6.js:1
(anonymous) @ theia.940ee5034cc0a50276d6.js:1
i @ theia.940ee5034cc0a50276d6.js:1
e.onRequest @ theia.940ee5034cc0a50276d6.js:1
(anonymous) @ proxy-factory.ts:135
(anonymous) @ main.js:376
(anonymous) @ main.js:270
(anonymous) @ main.js:260
(anonymous) @ setImmediate.js:40
_ @ setImmediate.js:69
s @ setImmediate.js:109
postMessage (async)
n @ setImmediate.js:120
f.setImmediate @ setImmediate.js:27
W @ main.js:258
V @ main.js:307
value @ reader.ts:57
(anonymous) @ reader.ts:18
e.handleMessage @ web-socket-channel.ts:49
e.handleIncomingRawMessage @ abstract-connection-provider.ts:111
i.onmessage @ ws-connection-provider.ts:64
_handleMessage @ reconnecting-websocket-mjs.js:172
Show 49 more frames
theia.940ee5034cc0a50276d6.js:1 Uncaught (in promise) ENOPRO: No file system provider found for scheme __minibrowser__preview__
   at https://serveriof3ov67-jwtproxy-server-4402.192.168.49.2.nip.io/theia.940ee5034cc0a50276d6.js:1:2309291

@apupier
Copy link
Contributor Author

apupier commented Sep 8, 2021

There is a black screen also with Pure Theia. (followed https://github.com/eclipse-theia/theia/wiki/Testing-VS-Code-extensions to test it)
asked to reopen eclipse-theia/theia#5007

@apupier
Copy link
Contributor Author

apupier commented Sep 10, 2021

Have it working in Theia.
To be tested again in Che when eclipse-theia/theia#10063 will be merged and latest Theia will be integrated in Che (currently blocked by #20366 )

@apupier
Copy link
Contributor Author

apupier commented Sep 20, 2021

using the provided fix in Theia, it doesn't work in Che. Even in the "preview". By looking at Che behavior, this is not vey surprising as the main fix in Theia is related to redirect with localhost but in CHe, localhost is not used and thus the modified code is not used.

To try, use this devfile to use the image built with this PR:

apiVersion: 1.0.0
metadata:
  name: pr-che_theia-maven-1220-ow4oy
projects:
  - name: console-java-simple
    source:
      location: 'https://github.com/che-samples/console-java-simple'
      type: git
      branch: java1.11
components:
  - id: redhat/java/latest
    preferences:
      java.server.launchMode: Standard
    type: chePlugin
  - type: chePlugin
    reference: 'https://gist.githubusercontent.com/apupier/ce1ad44916598ad57231d6e2cbb62830/raw/80e6c01de665d73132fab83ce808ef4de94300a8/meta.yaml'
  - mountSources: true
    endpoints:
      - attributes:
          public: 'false'
        name: debug
        port: 5005
    memoryLimit: 512Mi
    type: dockerimage
    volumes:
      - name: m2
        containerPath: /home/user/.m2
    alias: maven
    image: 'quay.io/eclipse/che-java11-maven:next'
    env:
      - value: ''
        name: MAVEN_CONFIG
      - value: '-XX:MaxRAMPercentage=50 -XX:+UseParallelGC -XX:MinHeapFreeRatio=10 -XX:MaxHeapFreeRatio=20 -XX:GCTimeRatio=4 -XX:AdaptiveSizePolicyWeight=90 -Dsun.zip.disableMemoryMapping=true -Xms20m -Djava.security.egd=file:/dev/./urandom -Duser.home=/home/user'
        name: MAVEN_OPTS
      - value: '-XX:MaxRAMPercentage=50 -XX:+UseParallelGC -XX:MinHeapFreeRatio=10 -XX:MaxHeapFreeRatio=20 -XX:GCTimeRatio=4 -XX:AdaptiveSizePolicyWeight=90 -Dsun.zip.disableMemoryMapping=true -Xms20m -Djava.security.egd=file:/dev/./urandom'
        name: JAVA_OPTS
      - value: '-XX:MaxRAMPercentage=50 -XX:+UseParallelGC -XX:MinHeapFreeRatio=10 -XX:MaxHeapFreeRatio=20 -XX:GCTimeRatio=4 -XX:AdaptiveSizePolicyWeight=90 -Dsun.zip.disableMemoryMapping=true -Xms20m -Djava.security.egd=file:/dev/./urandom'
        name: JAVA_TOOL_OPTIONS
  - type: cheEditor
    reference: 'https://raw.githubusercontent.com/chepullreq4/pr-check-files/master/che-theia/pr-1220/simple/che-theia-editor.yaml'
commands:
  - name: maven build
    actions:
      - workdir: '${CHE_PROJECTS_ROOT}/console-java-simple'
        type: exec
        command: mvn clean install
        component: maven
  - name: maven build and run
    actions:
      - workdir: '${CHE_PROJECTS_ROOT}/console-java-simple'
        type: exec
        command: mvn clean install && java -jar ./target/*.jar
        component: maven

The strange things that I notice are:

<!doctype html>
<html lang="en">

<head>
	<meta charset="utf-8" />
	<link rel="icon" href="/favicon.ico" />
	<meta name="viewport" content="width=device-width,initial-scale=1" />
	<meta name="theme-color" content="#000000" />
	<meta name="description" content="Web site created using create-react-app" />
	<link rel="apple-touch-icon" href="logo256.png" />
	<link rel="manifest" href="/manifest.json" />
	<title>AtlasMap Data Mapper UI</title>
	<link href="/static/css/2.2bd2ea5e.chunk.css" rel="stylesheet">
	<link href="/static/css/main.4491d336.chunk.css" rel="stylesheet">
</head>

<body class="pf-m-redhat-font"><noscript>You need to enable JavaScript to run this app.</noscript>
	<div id="root"></div>
	<div id="modals"></div>
	<script>!function (e) {function t(t) {for (var n, u, l = t[0], p = t[1], f = t[2], c = 0, s = []; c < l.length; c++)u = l[c], Object.prototype.hasOwnProperty.call(o, u) && o[u] && s.push(o[u][0]), o[u] = 0; for (n in p) Object.prototype.hasOwnProperty.call(p, n) && (e[n] = p[n]); for (i && i(t); s.length;)s.shift()(); return a.push.apply(a, f || []), r()} function r() {for (var e, t = 0; t < a.length; t++) {for (var r = a[t], n = !0, l = 1; l < r.length; l++) {var p = r[l]; 0 !== o[p] && (n = !1)} n && (a.splice(t--, 1), e = u(u.s = r[0]))} return e} var n = {}, o = {1: 0}, a = []; function u(t) {if (n[t]) return n[t].exports; var r = n[t] = {i: t, l: !1, exports: {}}; return e[t].call(r.exports, r, r.exports, u), r.l = !0, r.exports} u.m = e, u.c = n, u.d = function (e, t, r) {u.o(e, t) || Object.defineProperty(e, t, {enumerable: !0, get: r})}, u.r = function (e) {"undefined" != typeof Symbol && Symbol.toStringTag && Object.defineProperty(e, Symbol.toStringTag, {value: "Module"}), Object.defineProperty(e, "__esModule", {value: !0})}, u.t = function (e, t) {if (1 & t && (e = u(e)), 8 & t) return e; if (4 & t && "object" == typeof e && e && e.__esModule) return e; var r = Object.create(null); if (u.r(r), Object.defineProperty(r, "default", {enumerable: !0, value: e}), 2 & t && "string" != typeof e) for (var n in e) u.d(r, n, function (t) {return e[t]}.bind(null, n)); return r}, u.n = function (e) {var t = e && e.__esModule ? function () {return e.default} : function () {return e}; return u.d(t, "a", t), t}, u.o = function (e, t) {return Object.prototype.hasOwnProperty.call(e, t)}, u.p = "/"; var l = this["webpackJsonp@atlasmap/standalone"] = this["webpackJsonp@atlasmap/standalone"] || [], p = l.push.bind(l); l.push = t, l = l.slice(); for (var f = 0; f < l.length; f++)t(l[f]); var i = p; r()}([])</script>
	<script src="/static/js/2.ed2fcf53.chunk.js"></script>
	<script src="/static/js/main.d21c2c1b.chunk.js"></script>
</body>

</html>

The referenced file all returned a 302 with a redirection to /dashboard/ which sounds to be the Che Dashboard, not an AtlasMap thingy. So it is like the redirect is redirecting to the root of the parent of the iframe, not the iframe itself.

  • there are 4 errors logged:
file-service.ts:393 Uncaught (in promise) ENOPRO: No file system provider found for scheme https
    at https://codeready-codeready-workspaces-operator.apps.sandbox-m2.ll9k.p1.openshiftapps.com/serverms3hjbyj-jwtproxy/server-4403/bundle.js:2:5630079
file-service.ts:393 Uncaught (in promise) ENOPRO: No file system provider found for scheme __minibrowser__preview__
    at https://codeready-codeready-workspaces-operator.apps.sandbox-m2.ll9k.p1.openshiftapps.com/serverms3hjbyj-jwtproxy/server-4403/bundle.js:2:5630079

Uncaught SyntaxError: Unexpected token '<' in 2.ed2fcf53.chunk.js:formatted:1
Uncaught SyntaxError: Unexpected token '<' in main.d21c2c1b.chunk.js:1

  • I found no trace, either errors or calls to the first script which has a reference to AtlasMap. The dom contain the default script provided by VS Code AtlasMap and the one 'prepended' by Theia:
   					(async function injectAtlasmap() {
   						const request = await fetch("https://codeready-codeready-workspaces-operator.apps.sandbox-m2.ll9k.p1.openshiftapps.com:8585/index.html");
   						const body = await request.text();
   						const vscode = acquireVsCodeApi();
   						vscode.postMessage({
   							command: 'atlasmapScripts',
   							html: body,
   						})
   					})();
   				

   		const acquireVsCodeApi = (function() {
   			const originalPostMessage = window.parent.postMessage.bind(window.parent);
   			const targetOrigin = '*';
   			let acquired = false;

   			let state = undefined;

   			return () => {
   				if (acquired) {
   					throw new Error('An instance of the VS Code API has already been acquired');
   				}
   				acquired = true;
   				return Object.freeze({
   					postMessage: function(msg) {
   						return originalPostMessage({ command: 'onmessage', data: msg }, targetOrigin);
   					},
   					setState: function(newState) {
   						state = newState;
   						originalPostMessage({ command: 'do-update-state', data: JSON.stringify(newState) }, targetOrigin);
   						return newState;
   					},
   					getState: function() {
   						return state;
   					}
   				});
   			};
   		})();
           const acquireTheiaApi = acquireVsCodeApi;
   		delete window.parent;
   		delete window.top;
   		delete window.frameElement;

So sounds like this script is not called? How to investigate that?

@apupier
Copy link
Contributor Author

apupier commented Sep 20, 2021

From the VS Code AtlasMap container, if I call /projects/console-java-simple $ wget https://codeready-codeready-workspaces-operator.apps.sandbox-m2.ll9k.p1.openshiftapps.com:8585/index.html

it stays blocked on for several minutes:
Connecting to codeready-codeready-workspaces-operator.apps.sandbox-m2.ll9k.p1.openshiftapps.com:8585 (18.188.67.111:8585)

then:
wget: can't connect to remote host (18.188.67.111): Operation timed out

it could explain why the injected script by VS Code AtlasMap is not replacing the webview html with actual AtlasMap UI.

@apupier
Copy link
Contributor Author

apupier commented Sep 20, 2021

in the dom of the Preview, it sounds like it is able to resolve the initial script, the content is:

<body class="pf-m-redhat-font"><noscript>You need to enable JavaScript to run this app.</noscript>
	<div id="root"></div>
	<div id="modals"></div>
	<script>!function (e) {function t(t) {for (var n, u, l = t[0], p = t[1], f = t[2], c = 0, s = []; c < l.length; c++)u = l[c], Object.prototype.hasOwnProperty.call(o, u) && o[u] && s.push(o[u][0]), o[u] = 0; for (n in p) Object.prototype.hasOwnProperty.call(p, n) && (e[n] = p[n]); for (i && i(t); s.length;)s.shift()(); return a.push.apply(a, f || []), r()} function r() {for (var e, t = 0; t < a.length; t++) {for (var r = a[t], n = !0, l = 1; l < r.length; l++) {var p = r[l]; 0 !== o[p] && (n = !1)} n && (a.splice(t--, 1), e = u(u.s = r[0]))} return e} var n = {}, o = {1: 0}, a = []; function u(t) {if (n[t]) return n[t].exports; var r = n[t] = {i: t, l: !1, exports: {}}; return e[t].call(r.exports, r, r.exports, u), r.l = !0, r.exports} u.m = e, u.c = n, u.d = function (e, t, r) {u.o(e, t) || Object.defineProperty(e, t, {enumerable: !0, get: r})}, u.r = function (e) {"undefined" != typeof Symbol && Symbol.toStringTag && Object.defineProperty(e, Symbol.toStringTag, {value: "Module"}), Object.defineProperty(e, "__esModule", {value: !0})}, u.t = function (e, t) {if (1 & t && (e = u(e)), 8 & t) return e; if (4 & t && "object" == typeof e && e && e.__esModule) return e; var r = Object.create(null); if (u.r(r), Object.defineProperty(r, "default", {enumerable: !0, value: e}), 2 & t && "string" != typeof e) for (var n in e) u.d(r, n, function (t) {return e[t]}.bind(null, n)); return r}, u.n = function (e) {var t = e && e.__esModule ? function () {return e.default} : function () {return e}; return u.d(t, "a", t), t}, u.o = function (e, t) {return Object.prototype.hasOwnProperty.call(e, t)}, u.p = "/"; var l = this["webpackJsonp@atlasmap/standalone"] = this["webpackJsonp@atlasmap/standalone"] || [], p = l.push.bind(l); l.push = t, l = l.slice(); for (var f = 0; f < l.length; f++)t(l[f]); var i = p; r()}([])</script>
	<script src="/static/js/2.ed2fcf53.chunk.js"></script>
	<script src="/static/js/main.d21c2c1b.chunk.js"></script>
</body>

but the page remains blank

note: tested with a simpler devfile:

apiVersion: 1.0.0
metadata:
  name: pr-che_theia-maven-1220-simpler
attributes:
  persistVolumes: 'false'
components:
  - type: chePlugin
    reference: 'https://gist.githubusercontent.com/apupier/ce1ad44916598ad57231d6e2cbb62830/raw/80e6c01de665d73132fab83ce808ef4de94300a8/meta.yaml'
  - type: cheEditor
    reference: 'https://raw.githubusercontent.com/chepullreq4/pr-check-files/master/che-theia/pr-1220/simple/che-theia-editor.yaml'

@che-bot
Copy link
Contributor

che-bot commented Mar 19, 2022

Issues go stale after 180 days of inactivity. lifecycle/stale issues rot after an additional 7 days of inactivity and eventually close.

Mark the issue as fresh with /remove-lifecycle stale in a new comment.

If this issue is safe to close now please do so.

Moderators: Add lifecycle/frozen label to avoid stale mode.

@che-bot che-bot added the lifecycle/stale Denotes an issue or PR has remained open with no activity and has become stale. label Mar 19, 2022
@che-bot che-bot closed this as completed Mar 26, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
area/plugin-registry kind/enhancement A feature request - must adhere to the feature request template. lifecycle/stale Denotes an issue or PR has remained open with no activity and has become stale. severity/P2 Has a minor but important impact to the usage or development of the system.
Projects
None yet
Development

No branches or pull requests

5 participants