How to customize guacamole angular app

classic Classic list List threaded Threaded
6 messages Options
Reply | Threaded
Open this post in threaded view
|

How to customize guacamole angular app

Ben Davis
I would like to make some customizations to the angular javascript app. However, I'm not familiar with the frontend build system that guacamole uses. I tried adding some console.log() statements in the source files in /var/lib/tomcat9/webapps/guacamole, but haven't found where I can change anything.

My main goal right now is inserting a new screen between when the user has authenticated and when they are connected to their desktop. Can anyone provide some direction on how I can get started hacking around on it?

Ben Davis
Education Director

214-442-1635  | https://boldidea.org/



Reply | Threaded
Open this post in threaded view
|

Re: How to customize guacamole angular app

Marko Nikolić
Hi Ben,

Guacamole supports extension, which are used to add custom features, integrations etc... to the main application. It is better to use this method instead of hacking the Guacamole code. 

You can find more details on extensions in the docs:


Marko

суб, 23. нов 2019. 02.18 Ben Davis <[hidden email]> је написао/ла:
I would like to make some customizations to the angular javascript app. However, I'm not familiar with the frontend build system that guacamole uses. I tried adding some console.log() statements in the source files in /var/lib/tomcat9/webapps/guacamole, but haven't found where I can change anything.

My main goal right now is inserting a new screen between when the user has authenticated and when they are connected to their desktop. Can anyone provide some direction on how I can get started hacking around on it?

Ben Davis
Education Director

214-442-1635  | https://boldidea.org/



Reply | Threaded
Open this post in threaded view
|

Re: How to customize guacamole angular app

vnick
On Sat, Nov 23, 2019 at 03:34 Marko Nikolić <[hidden email]> wrote:
Hi Ben,

Guacamole supports extension, which are used to add custom features, integrations etc... to the main application. It is better to use this method instead of hacking the Guacamole code. 

You can find more details on extensions in the docs:



Marko

суб, 23. нов 2019. 02.18 Ben Davis <[hidden email]> је написао/ла:
I would like to make some customizations to the angular javascript app. However, I'm not familiar with the frontend build system that guacamole uses. I tried adding some console.log() statements in the source files in /var/lib/tomcat9/webapps/guacamole, but haven't found where I can change anything.

Just to add to what Marko already said, you don't want to try to modify the code in-place - you want to modify the source and then rebuild and redeploy the web application, asking with any extensions that you use.

-Nick
Reply | Threaded
Open this post in threaded view
|

Re: How to customize guacamole angular app

Ben Davis
In reply to this post by Marko Nikolić
That makes sense. The two main things I want to do are A) modify the UI and B) add a REST endpoint that returns VM status info for a connection. I've done very little with Java in the past. Are there example extensions I can look at that show how to do those two things?

Ben Davis
Education Director

214-442-1635  | https://boldidea.org/





On Sat, Nov 23, 2019 at 2:34 AM Marko Nikolić <[hidden email]> wrote:
Hi Ben,

Guacamole supports extension, which are used to add custom features, integrations etc... to the main application. It is better to use this method instead of hacking the Guacamole code. 

You can find more details on extensions in the docs:


Marko

суб, 23. нов 2019. 02.18 Ben Davis <[hidden email]> је написао/ла:
I would like to make some customizations to the angular javascript app. However, I'm not familiar with the frontend build system that guacamole uses. I tried adding some console.log() statements in the source files in /var/lib/tomcat9/webapps/guacamole, but haven't found where I can change anything.

My main goal right now is inserting a new screen between when the user has authenticated and when they are connected to their desktop. Can anyone provide some direction on how I can get started hacking around on it?

Ben Davis
Education Director

214-442-1635  | https://boldidea.org/



Reply | Threaded
Open this post in threaded view
|

Re: How to customize guacamole angular app

vnick
On Mon, Nov 25, 2019 at 12:33 PM Ben Davis <[hidden email]> wrote:
That makes sense. The two main things I want to do are A) modify the UI and B) add a REST endpoint that returns VM status info for a connection. I've done very little with Java in the past. Are there example extensions I can look at that show how to do those two things?


Both of these should be doable, although item B can be a little more problematic, depending on what you're trying to do.   For item A, I'd take a look at the guacamole-ext page of the manual:

 
Ben Davis
Education Director

214-442-1635  | https://boldidea.org/





On Sat, Nov 23, 2019 at 2:34 AM Marko Nikolić <[hidden email]> wrote:
Hi Ben,

Guacamole supports extension, which are used to add custom features, integrations etc... to the main application. It is better to use this method instead of hacking the Guacamole code. 

You can find more details on extensions in the docs:


Marko

суб, 23. нов 2019. 02.18 Ben Davis <[hidden email]> је написао/ла:
I would like to make some customizations to the angular javascript app. However, I'm not familiar with the frontend build system that guacamole uses. I tried adding some console.log() statements in the source files in /var/lib/tomcat9/webapps/guacamole, but haven't found where I can change anything.

My main goal right now is inserting a new screen between when the user has authenticated and when they are connected to their desktop. Can anyone provide some direction on how I can get started hacking around on it?

Ben Davis
Education Director

214-442-1635  | https://boldidea.org/



Reply | Threaded
Open this post in threaded view
|

Re: How to customize guacamole angular app

vnick
On Tue, Nov 26, 2019 at 8:51 PM Nick Couchman <[hidden email]> wrote:
On Mon, Nov 25, 2019 at 12:33 PM Ben Davis <[hidden email]> wrote:
That makes sense. The two main things I want to do are A) modify the UI and B) add a REST endpoint that returns VM status info for a connection. I've done very little with Java in the past. Are there example extensions I can look at that show how to do those two things?


Both of these should be doable, although item B can be a little more problematic, depending on what you're trying to do.   For item A, I'd take a look at the guacamole-ext page of the manual:


Well, that was fun...apparently Gmail decided I was done typing my message!  Anyway, as I was saying, have a look at the guacamole-ext page:


There's a section toward the top of the page on updating HTML that tells you how to insert code that will be placed within certain sections of the web application.  You can also write AngularJS directives, controllers, etc., and have those generate UI pages.

For item B, you can definitely return the VM status for a connection and display that on the page; however, because the application operates rather asynchronously, your mileage may vary on how easy that is to do.  I ran into some issues writing the WoL module (https://github.com/apache/guacamole-client/pull/374) trying to get the hostname of the connection through the decorating module, and ended up having to, somewhat clumsily, feed the hostname to ping back into the REST API in order to get the status.  It would be a lot cleaner if I could have done it all on the back-end, but it would have required some significant reworking of the code.  May still happen, but who knows.

Anyway, have a look at any/all of the extensions, as there are various places that each of them do one or the other or both of what you're looking for.  And, of course, post back here if you have any specific questions.

-Nick