search

eduk8s-labs / lab-spring-boot-k8s-getting-started

Getting Started with Spring Boot on Kubernetes
Apache License 2.0
3 stars 12 forks source link

Execute command line snippets from lab notes in IDE terminal #2

Open dsyer opened 4 years ago

dsyer commented 4 years ago

The IDE is more comfortable for developers than the bare terminal, and it's a "one stop shop" for workshop activities. If it's not too expensive to implement, it would be good to have the option to execute command line snippets in the IDE.

BoykoAlex commented 4 years ago

We made an unsuccessful attempt. @GrahamDumpleton We could use your help

This is what we've tried: https://github.com/eduk8s-tests/lab-spring-boot-k8s-getting-started/tree/tools-experiment (https://github.com/eduk8s-tests/lab-spring-boot-k8s-getting-started branch tools-experiment)

How it is supposed to work

There is a VSCode extension: https://github.com/kdvolder/eduk8s-vscode-helper It runs an express server within the Code Server process on port 10011

The workshop content intro page loads a JS script here: https://github.com/eduk8s-tests/lab-spring-boot-k8s-getting-started/blob/tools-experiment/workshop/content/intro.md

The JS script - workspace.js is located under the same folder https://github.com/eduk8s-tests/lab-spring-boot-k8s-getting-started/blob/tools-experiment/workshop/content/workshop.js When the user clicks the action link this code triggers: https://github.com/eduk8s-tests/lab-spring-boot-k8s-getting-started/blob/tools-experiment/workshop/content/workshop.js#L13 This calls the method here: https://github.com/eduk8s-tests/lab-spring-boot-k8s-getting-started/blob/tools-experiment/dashboard-customization/dashboard.pug#L260

The problem is here https://github.com/eduk8s-tests/lab-spring-boot-k8s-getting-started/blob/tools-experiment/dashboard-customization/dashboard.pug#L267 and the next line. These are the 2 things we've tried the browser to call on the backend.

Problem 1 (Line 267)

Call the ingress defined in resources/workshop.yaml https://github.com/eduk8s-tests/lab-spring-boot-k8s-getting-started/blob/tools-experiment/resources/workshop.yaml#L38

Didn't work. OAuth redirect blocked by CORS

Access to XMLHttpRequest at 'http://lab-spring-boot-k8s-gs-ui.training.eduk8s.springapps.io/oauth2/authorize?response_type=code&client_id=lab-spring-boot-k8s-gs-w01-s001&redirect_uri=http%3A%2F%2Flab-spring-boot-k8s-gs-w01-s001-editor-remote-control.training.eduk8s.springapps.io%2Foauth_callback&scope=user%3Ainfo&state=848f2e68-bbab-4e19-b483-34254e16f8fa' (redirected from 'http://lab-spring-boot-k8s-gs-w01-s001-editor-remote-control.training.eduk8s.springapps.io/hello') from origin 'http://lab-spring-boot-k8s-gs-w01-s001.training.eduk8s.springapps.io' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Problem 2 (Line 268)

We've attempted to add endpoint: https://github.com/eduk8s-tests/lab-spring-boot-k8s-getting-started/blob/tools-experiment/dashboard-customization/dashboard.js#L106

Didn't work. We've tried a number of ways of adding this endpoint and all of them resulted in: 404 page not found... Unclear why...

GrahamDumpleton commented 4 years ago

Until I pull apart what you have and try and replicate it, the closest example I can give you which does the sort of thing you appear to be wanting to do is:

Note that it works without you needing to modify any existing files in the base image. Not sure if part of the problem is because you are trying to execute code in the context of the parent (from the iframe content), which probably results in loss of the headers which mark that you have already negotiated past the OAuth stuff. Doing that seems wrong to me.

Key files are:

This is the liquid template engine include file which contains the JavaScript code (not using script tag to fetch JS as separate request as you are).

It gets included by a content file like:

Then using another liquid template engine snippet file to expand specific Javascript call. Look for render "verify_test.liquid" in that file.

The snippet file is:

The only difference can see to what you are trying to do is that am using web sockets only at this point and not plain HTTP request.

GrahamDumpleton commented 4 years ago

BTW, I don't recommend using web sockets because of how nginx ingress controller will break the connections whenever a new ingress is created for something else. Contour appears to be okay.

So using plain HTTP requests rather than web socket unless you implement reconnections of web socket when connection is lost.

kdvolder commented 4 years ago

Not sure if part of the problem is because you are trying to execute code in the context of the parent (from the iframe content),

We didn't do that at first, but... if we don't then we cannot seem to make the Editor tab visible. Some permission errors reported while trying to access that div and send it a 'you are clicked' event. I don't exactly remember in detail the error, but I thought that it was telling us the iframe isn't allowed to access that stuff. We saw that something similar was done for the butterfly terminal and it goes via a function defined in the parent. So we figured... it has to be done that way because only the parent is allowed to manipulate its children in that way. But children aren't allowed to do stuff like that directly to its parent or siblings. And while this is not proof this is the right approach... that part of it does work now.

which probably results in loss of the headers which mark that you have already negotiated past the OAuth stuff.

I think we have not negotiated past the oauth stuff yet because the worksphop content js has never accessed the 'editor remote control' service which is exposed as a separate ingress? Not sure really, this stuff is all a bit outside of our wheelhouse and just guessing and trying things a bit blindly :-(

Anyhow... in our minds its really just a simple question: there is a service running in the workshop container on port 10011. How can we make it so when the user clicks on a widget in the workshop content then the following things both happen:

We know the service on port 10011 is working fine, you can curl it from the butterfly terminal. The troubles is, we are just not able to make the 'glue' between eduk8s and our service work.

BTW: I don't think the eventual goal is to make all this work by mucking with script tags etc. in the workshop content. This should work much like the 'executable' code snippets that eduk8s supports right now. So workshop author would simply put something in their content with a specific css tag, and the 'glue javascript' code is automatically provided by eduk8s. Mucking with script tags was just the only way we could think of trying this out for ourselves.

BTW, I don't recommend using web sockets

We weren't planning to.

The only difference can see to what you are trying to do is that am using web sockets only at this point and not plain HTTP request

I don't know much about this stuff.. are http request via 'XMLHttpRequest' treated exactly the same as websockets via 'new WebSocket) w.r.t to cors and oauth validation?