Request for comments: camel-k GUI POC

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

Request for comments: camel-k GUI POC

Riccardo Forina
Hello everybody,

in the last few days, I have been working on a GUI for camel-k, for a few reasons:
- I know nothing about Camel, so this seemed a good way to test the water
- Nicola asked me if I could do it :D

The main, and only, goal was to edit a custom resource and save it. Since to do that I had to figure out how to talk with the server, I added also a custom resource definitions "explorer" (it's just a list of CRDs really...).

This is as POC as it gets, so don't expect to find it particularly useful (well the editing part works, so I guess it's useful if you need that!).

I'd like to know what you guys think about this and if it can be useful for the project.

The code's here https://github.com/riccardo-forina/camel-k-ui and you can see a demo here https://drive.google.com/open?id=1OzDPGdAEtU8PajZxJY5HKXQ1OyrH6s79

About the technical details, it's a React app bootstrapped with create-react-app (the typescript version) and with 2 external dependencies:
- react-patternfly (version 3)
- monaco-editor, which is the editor component used by Visual Studio Code

If you want to test it out locally, the process is:
$ yarn
$ yarn start
$ point a browser to http://localhost:3000

You then need to add a new OAuth client to the server. In the README.md there is a copy-pastable snippet to create one, already set up to work with the app running locally on the default port.

Cheers,
Riccardo
Reply | Threaded
Open this post in threaded view
|

Re: Request for comments: camel-k GUI POC

Andrea Cosentino-2
This is wonderful, thanks a lot!

I'll have a deeper look today.

--
Andrea Cosentino 
----------------------------------
Apache Camel PMC Chair
Apache Karaf Committer
Apache Servicemix PMC Member
Email: [hidden email]
Twitter: @oscerd2
Github: oscerd






On Tuesday, October 9, 2018, 9:15:36 AM GMT+2, Riccardo Forina <[hidden email]> wrote:





Hello everybody,

in the last few days, I have been working on a GUI for camel-k, for a few reasons:
- I know nothing about Camel, so this seemed a good way to test the water
- Nicola asked me if I could do it :D

The main, and only, goal was to edit a custom resource and save it. Since to do that I had to figure out how to talk with the server, I added also a custom resource definitions "explorer" (it's just a list of CRDs really...).

This is as POC as it gets, so don't expect to find it particularly useful (well the editing part works, so I guess it's useful if you need that!).

I'd like to know what you guys think about this and if it can be useful for the project.

The code's here https://github.com/riccardo-forina/camel-k-ui and you can see a demo here https://drive.google.com/open?id=1OzDPGdAEtU8PajZxJY5HKXQ1OyrH6s79

About the technical details, it's a React app bootstrapped with create-react-app (the typescript version) and with 2 external dependencies:
- react-patternfly (version 3)
- monaco-editor, which is the editor component used by Visual Studio Code

If you want to test it out locally, the process is:
$ yarn
$ yarn start
$ point a browser to http://localhost:3000

You then need to add a new OAuth client to the server. In the README.md there is a copy-pastable snippet to create one, already set up to work with the app running locally on the default port.

Cheers,
Riccardo
Reply | Threaded
Open this post in threaded view
|

Re: Request for comments: camel-k GUI POC

astefanutti
In reply to this post by Riccardo Forina
Hi Riccardo,

This looks very promising! I think having a Web UI for Camel-K would be very valuable.

Here are my quick feedback:
- It’d be great to have the UI self-hosted. For it to work while avoiding to configure CORS on the API server, it is possible to proxy the communication to the API server and use in-cluster client config to connect to it.
- It is possible to use OAuth 2 server metadata to discover OAuth endpoints, as documented in [1] and [2].
- Creating an OAuth client generally requires cluster-admin permission and it's possible to use a service account as OAuth client to alleviate that requirement [3].

[1] https://tools.ietf.org/id/draft-ietf-oauth-discovery-08.html
[2] https://docs.okd.io/latest/architecture/additional_concepts/authentication.html#oauth-server-metadata
[3] https://docs.openshift.com/container-platform/3.10/architecture/additional_concepts/authentication.html#service-accounts-as-oauth-clients

Antonin

> On 9 Oct 2018, at 09:15, Riccardo Forina <[hidden email]> wrote:
>
> Hello everybody,
>
> in the last few days, I have been working on a GUI for camel-k, for a few reasons:
> - I know nothing about Camel, so this seemed a good way to test the water
> - Nicola asked me if I could do it :D
>
> The main, and only, goal was to edit a custom resource and save it. Since to do that I had to figure out how to talk with the server, I added also a custom resource definitions "explorer" (it's just a list of CRDs really...).
>
> This is as POC as it gets, so don't expect to find it particularly useful (well the editing part works, so I guess it's useful if you need that!).
>
> I'd like to know what you guys think about this and if it can be useful for the project.
>
> The code's here https://github.com/riccardo-forina/camel-k-ui and you can see a demo here https://drive.google.com/open?id=1OzDPGdAEtU8PajZxJY5HKXQ1OyrH6s79
>
> About the technical details, it's a React app bootstrapped with create-react-app (the typescript version) and with 2 external dependencies:
> - react-patternfly (version 3)
> - monaco-editor, which is the editor component used by Visual Studio Code
>
> If you want to test it out locally, the process is:
> $ yarn
> $ yarn start
> $ point a browser to http://localhost:3000
>
> You then need to add a new OAuth client to the server. In the README.md there is a copy-pastable snippet to create one, already set up to work with the app running locally on the default port.
>
> Cheers,
> Riccardo

Reply | Threaded
Open this post in threaded view
|

Re: Request for comments: camel-k GUI POC

Jean-Baptiste Onofré
That sounds great indeed !

Gonna take a deeper look asap.

Regards
JB

Le 9 oct. 2018 à 13:41, à 13:41, Antonin Stefanutti <[hidden email]> a écrit:

>Hi Riccardo,
>
>This looks very promising! I think having a Web UI for Camel-K would be
>very valuable.
>
>Here are my quick feedback:
>- It’d be great to have the UI self-hosted. For it to work while
>avoiding to configure CORS on the API server, it is possible to proxy
>the communication to the API server and use in-cluster client config to
>connect to it.
>- It is possible to use OAuth 2 server metadata to discover OAuth
>endpoints, as documented in [1] and [2].
>- Creating an OAuth client generally requires cluster-admin permission
>and it's possible to use a service account as OAuth client to alleviate
>that requirement [3].
>
>[1] https://tools.ietf.org/id/draft-ietf-oauth-discovery-08.html
>[2]
>https://docs.okd.io/latest/architecture/additional_concepts/authentication.html#oauth-server-metadata
>[3]
>https://docs.openshift.com/container-platform/3.10/architecture/additional_concepts/authentication.html#service-accounts-as-oauth-clients
>
>Antonin
>
>> On 9 Oct 2018, at 09:15, Riccardo Forina <[hidden email]> wrote:
>>
>> Hello everybody,
>>
>> in the last few days, I have been working on a GUI for camel-k, for a
>few reasons:
>> - I know nothing about Camel, so this seemed a good way to test the
>water
>> - Nicola asked me if I could do it :D
>>
>> The main, and only, goal was to edit a custom resource and save it.
>Since to do that I had to figure out how to talk with the server, I
>added also a custom resource definitions "explorer" (it's just a list
>of CRDs really...).
>>
>> This is as POC as it gets, so don't expect to find it particularly
>useful (well the editing part works, so I guess it's useful if you need
>that!).
>>
>> I'd like to know what you guys think about this and if it can be
>useful for the project.
>>
>> The code's here https://github.com/riccardo-forina/camel-k-ui and you
>can see a demo here
>https://drive.google.com/open?id=1OzDPGdAEtU8PajZxJY5HKXQ1OyrH6s79
>>
>> About the technical details, it's a React app bootstrapped with
>create-react-app (the typescript version) and with 2 external
>dependencies:
>> - react-patternfly (version 3)
>> - monaco-editor, which is the editor component used by Visual Studio
>Code
>>
>> If you want to test it out locally, the process is:
>> $ yarn
>> $ yarn start
>> $ point a browser to http://localhost:3000
>>
>> You then need to add a new OAuth client to the server. In the
>README.md there is a copy-pastable snippet to create one, already set
>up to work with the app running locally on the default port.
>>
>> Cheers,
>> Riccardo
Reply | Threaded
Open this post in threaded view
|

Re: Request for comments: camel-k GUI POC

Riccardo Forina
In reply to this post by astefanutti
Hi Antonin,

absolutely! I actually thought about doing it like that at first, but
then decided to have a client-only solution for this POC.
I guess deciding how to implement this will depend on how we want to
make this UI available. Something like `kamel ui` to spin a web
server perhaps? Maybe with the UI already set up to talk with the
right backend?

Riccardo

On Tue, Oct 9, 2018, at 12:41, Antonin Stefanutti wrote:

> Hi Riccardo,
>
> This looks very promising! I think having a Web UI for Camel-K would
> be very valuable.>
> Here are my quick feedback:
> - It’d be great to have the UI self-hosted. For it to work while
>   avoiding to configure CORS on the API server, it is possible to
>   proxy the communication to the API server and use in-cluster client
>   config to connect to it.> - It is possible to use OAuth 2 server metadata to discover OAuth
>   endpoints, as documented in [1] and [2].> - Creating an OAuth client generally requires cluster-admin permission
>   and it's possible to use a service account as OAuth client to
>   alleviate that requirement [3].>
> [1] https://tools.ietf.org/id/draft-ietf-oauth-discovery-08.html
> [2] https://docs.okd.io/latest/architecture/additional_concepts/authentication.html#oauth-server-metadata> [3] https://docs.openshift.com/container-platform/3.10/architecture/additional_concepts/authentication.html#service-accounts-as-oauth-clients>
> Antonin
>
>> On 9 Oct 2018, at 09:15, Riccardo Forina <[hidden email]> wrote:>>
>> Hello everybody,
>>
>> in the last few days, I have been working on a GUI for camel-k, for a
>> few reasons:>> - I know nothing about Camel, so this seemed a good way to test the
>>   water>> - Nicola asked me if I could do it :D
>>
>> The main, and only, goal was to edit a custom resource and save it.
>> Since to do that I had to figure out how to talk with the server, I
>> added also a custom resource definitions "explorer" (it's just a list
>> of CRDs really...).>>
>> This is as POC as it gets, so don't expect to find it particularly
>> useful (well the editing part works, so I guess it's useful if you
>> need that!).>>
>> I'd like to know what you guys think about this and if it can be
>> useful for the project.>>
>> The code's here https://github.com/riccardo-forina/camel-k-ui and you
>> can see a demo here
>> https://drive.google.com/open?id=1OzDPGdAEtU8PajZxJY5HKXQ1OyrH6s79>>
>> About the technical details, it's a React app bootstrapped with create-react-
>> app (the typescript version) and with 2 external dependencies:>> - react-patternfly (version 3)
>> - monaco-editor, which is the editor component used by Visual
>>   Studio Code>>
>> If you want to test it out locally, the process is:
>> $ yarn
>> $ yarn start
>> $ point a browser to http://localhost:3000
>>
>> You then need to add a new OAuth client to the server. In the
>> README.md there is a copy-pastable snippet to create one, already set
>> up to work with the app running locally on the default port.>>
>> Cheers,
>> Riccardo
>

Reply | Threaded
Open this post in threaded view
|

Re: Request for comments: camel-k GUI POC

astefanutti


> On 9 Oct 2018, at 13:56, Riccardo Forina <[hidden email]> wrote:
>
> Hi Antonin,
>
> absolutely! I actually thought about doing it like that at first, but
> then decided to have a client-only solution for this POC.
> I guess deciding how to implement this will depend on how we want to
> make this UI available. Something like `kamel ui` to spin a web
> server perhaps? Maybe with the UI already set up to talk with the
> right backend?

I love the idea of having it deployed with `kamel ui`!

> Riccardo
>
> On Tue, Oct 9, 2018, at 12:41, Antonin Stefanutti wrote:
>> Hi Riccardo,
>>
>> This looks very promising! I think having a Web UI for Camel-K would
>> be very valuable.>
>> Here are my quick feedback:
>> - It’d be great to have the UI self-hosted. For it to work while
>>  avoiding to configure CORS on the API server, it is possible to
>>  proxy the communication to the API server and use in-cluster client
>>  config to connect to it.> - It is possible to use OAuth 2 server metadata to discover OAuth
>>  endpoints, as documented in [1] and [2].> - Creating an OAuth client generally requires cluster-admin permission
>>  and it's possible to use a service account as OAuth client to
>>  alleviate that requirement [3].>
>> [1] https://tools.ietf.org/id/draft-ietf-oauth-discovery-08.html
>> [2] https://docs.okd.io/latest/architecture/additional_concepts/authentication.html#oauth-server-metadata> [3] https://docs.openshift.com/container-platform/3.10/architecture/additional_concepts/authentication.html#service-accounts-as-oauth-clients>
>> Antonin
>>
>>> On 9 Oct 2018, at 09:15, Riccardo Forina <[hidden email]> wrote:>>
>>> Hello everybody,
>>>
>>> in the last few days, I have been working on a GUI for camel-k, for a
>>> few reasons:>> - I know nothing about Camel, so this seemed a good way to test the
>>>  water>> - Nicola asked me if I could do it :D
>>>
>>> The main, and only, goal was to edit a custom resource and save it.
>>> Since to do that I had to figure out how to talk with the server, I
>>> added also a custom resource definitions "explorer" (it's just a list
>>> of CRDs really...).>>
>>> This is as POC as it gets, so don't expect to find it particularly
>>> useful (well the editing part works, so I guess it's useful if you
>>> need that!).>>
>>> I'd like to know what you guys think about this and if it can be
>>> useful for the project.>>
>>> The code's here https://github.com/riccardo-forina/camel-k-ui and you
>>> can see a demo here
>>> https://drive.google.com/open?id=1OzDPGdAEtU8PajZxJY5HKXQ1OyrH6s79>>
>>> About the technical details, it's a React app bootstrapped with create-react-
>>> app (the typescript version) and with 2 external dependencies:>> - react-patternfly (version 3)
>>> - monaco-editor, which is the editor component used by Visual
>>>  Studio Code>>
>>> If you want to test it out locally, the process is:
>>> $ yarn
>>> $ yarn start
>>> $ point a browser to http://localhost:3000
>>>
>>> You then need to add a new OAuth client to the server. In the
>>> README.md there is a copy-pastable snippet to create one, already set
>>> up to work with the app running locally on the default port.>>
>>> Cheers,
>>> Riccardo
>>
>

Reply | Threaded
Open this post in threaded view
|

Re: Request for comments: camel-k GUI POC

Andrea Cosentino-2
This task is really interesting. It seems a good one to work together on :-)

--
Andrea Cosentino 
----------------------------------
Apache Camel PMC Chair
Apache Karaf Committer
Apache Servicemix PMC Member
Email: [hidden email]
Twitter: @oscerd2
Github: oscerd






On Tuesday, October 9, 2018, 2:00:44 PM GMT+2, Antonin Stefanutti <[hidden email]> wrote:







> On 9 Oct 2018, at 13:56, Riccardo Forina <[hidden email]> wrote:
>
> Hi Antonin,
>
> absolutely! I actually thought about doing it like that at first, but
> then decided to have a client-only solution for this POC.
> I guess deciding how to implement this will depend on how we want to
> make this UI available. Something like `kamel ui` to spin a web
> server perhaps? Maybe with the UI already set up to talk with the
> right backend?

I love the idea of having it deployed with `kamel ui`!


> Riccardo
>
> On Tue, Oct 9, 2018, at 12:41, Antonin Stefanutti wrote:
>> Hi Riccardo,
>>
>> This looks very promising! I think having a Web UI for Camel-K would
>> be very valuable.>
>> Here are my quick feedback:
>> - It’d be great to have the UI self-hosted. For it to work while
>>  avoiding to configure CORS on the API server, it is possible to
>>  proxy the communication to the API server and use in-cluster client
>>  config to connect to it.> - It is possible to use OAuth 2 server metadata to discover OAuth
>>  endpoints, as documented in [1] and [2].> - Creating an OAuth client generally requires cluster-admin permission
>>  and it's possible to use a service account as OAuth client to
>>  alleviate that requirement [3].>
>> [1] https://tools.ietf.org/id/draft-ietf-oauth-discovery-08.html
>> [2] https://docs.okd.io/latest/architecture/additional_concepts/authentication.html#oauth-server-metadata> [3] https://docs.openshift.com/container-platform/3.10/architecture/additional_concepts/authentication.html#service-accounts-as-oauth-clients>
>> Antonin
>>
>>> On 9 Oct 2018, at 09:15, Riccardo Forina <[hidden email]> wrote:>>
>>> Hello everybody,
>>>
>>> in the last few days, I have been working on a GUI for camel-k, for a
>>> few reasons:>> - I know nothing about Camel, so this seemed a good way to test the
>>>  water>> - Nicola asked me if I could do it :D
>>>
>>> The main, and only, goal was to edit a custom resource and save it.
>>> Since to do that I had to figure out how to talk with the server, I
>>> added also a custom resource definitions "explorer" (it's just a list
>>> of CRDs really...).>>
>>> This is as POC as it gets, so don't expect to find it particularly
>>> useful (well the editing part works, so I guess it's useful if you
>>> need that!).>>
>>> I'd like to know what you guys think about this and if it can be
>>> useful for the project.>>
>>> The code's here https://github.com/riccardo-forina/camel-k-ui and you
>>> can see a demo here
>>> https://drive.google.com/open?id=1OzDPGdAEtU8PajZxJY5HKXQ1OyrH6s79>>
>>> About the technical details, it's a React app bootstrapped with create-react-
>>> app (the typescript version) and with 2 external dependencies:>> - react-patternfly (version 3)
>>> - monaco-editor, which is the editor component used by Visual
>>>  Studio Code>>
>>> If you want to test it out locally, the process is:
>>> $ yarn
>>> $ yarn start
>>> $ point a browser to http://localhost:3000
>>>
>>> You then need to add a new OAuth client to the server. In the
>>> README.md there is a copy-pastable snippet to create one, already set
>>> up to work with the app running locally on the default port.>>
>>> Cheers,
>>> Riccardo
>>
>

Reply | Threaded
Open this post in threaded view
|

Re: Request for comments: camel-k GUI POC

Nicola Ferraro
Very nice Riccardo!
Also the kubernetes explorer may turn out to be useful in the future once
we start working on Knative integration (that is completely based on custom
CRDs).

I've added a high level goal for the UI, together with others in
https://github.com/apache/camel-k/projects, so we can track easily what
steps we need to do to include it with the command: `kamel ui`

:)

Nicola

On Tue, Oct 9, 2018 at 2:02 PM Andrea Cosentino
<[hidden email]> wrote:

> This task is really interesting. It seems a good one to work together on
> :-)
>
> --
> Andrea Cosentino
> ----------------------------------
> Apache Camel PMC Chair
> Apache Karaf Committer
> Apache Servicemix PMC Member
> Email: [hidden email]
> Twitter: @oscerd2
> Github: oscerd
>
>
>
>
>
>
> On Tuesday, October 9, 2018, 2:00:44 PM GMT+2, Antonin Stefanutti <
> [hidden email]> wrote:
>
>
>
>
>
>
>
> > On 9 Oct 2018, at 13:56, Riccardo Forina <[hidden email]> wrote:
> >
> > Hi Antonin,
> >
> > absolutely! I actually thought about doing it like that at first, but
> > then decided to have a client-only solution for this POC.
> > I guess deciding how to implement this will depend on how we want to
> > make this UI available. Something like `kamel ui` to spin a web
> > server perhaps? Maybe with the UI already set up to talk with the
> > right backend?
>
> I love the idea of having it deployed with `kamel ui`!
>
>
> > Riccardo
> >
> > On Tue, Oct 9, 2018, at 12:41, Antonin Stefanutti wrote:
> >> Hi Riccardo,
> >>
> >> This looks very promising! I think having a Web UI for Camel-K would
> >> be very valuable.>
> >> Here are my quick feedback:
> >> - It’d be great to have the UI self-hosted. For it to work while
> >>  avoiding to configure CORS on the API server, it is possible to
> >>  proxy the communication to the API server and use in-cluster client
> >>  config to connect to it.> - It is possible to use OAuth 2 server
> metadata to discover OAuth
> >>  endpoints, as documented in [1] and [2].> - Creating an OAuth client
> generally requires cluster-admin permission
> >>  and it's possible to use a service account as OAuth client to
> >>  alleviate that requirement [3].>
> >> [1] https://tools.ietf.org/id/draft-ietf-oauth-discovery-08.html
> >> [2]
> https://docs.okd.io/latest/architecture/additional_concepts/authentication.html#oauth-server-metadata>
> [3]
> https://docs.openshift.com/container-platform/3.10/architecture/additional_concepts/authentication.html#service-accounts-as-oauth-clients>
>
> >> Antonin
> >>
> >>> On 9 Oct 2018, at 09:15, Riccardo Forina <[hidden email]>
> wrote:>>
> >>> Hello everybody,
> >>>
> >>> in the last few days, I have been working on a GUI for camel-k, for a
> >>> few reasons:>> - I know nothing about Camel, so this seemed a good way
> to test the
> >>>  water>> - Nicola asked me if I could do it :D
> >>>
> >>> The main, and only, goal was to edit a custom resource and save it.
> >>> Since to do that I had to figure out how to talk with the server, I
> >>> added also a custom resource definitions "explorer" (it's just a list
> >>> of CRDs really...).>>
> >>> This is as POC as it gets, so don't expect to find it particularly
> >>> useful (well the editing part works, so I guess it's useful if you
> >>> need that!).>>
> >>> I'd like to know what you guys think about this and if it can be
> >>> useful for the project.>>
> >>> The code's here https://github.com/riccardo-forina/camel-k-ui and you
> >>> can see a demo here
> >>> https://drive.google.com/open?id=1OzDPGdAEtU8PajZxJY5HKXQ1OyrH6s79>>
> >>> About the technical details, it's a React app bootstrapped with
> create-react-
> >>> app (the typescript version) and with 2 external dependencies:>> -
> react-patternfly (version 3)
> >>> - monaco-editor, which is the editor component used by Visual
> >>>  Studio Code>>
> >>> If you want to test it out locally, the process is:
> >>> $ yarn
> >>> $ yarn start
> >>> $ point a browser to http://localhost:3000
> >>>
> >>> You then need to add a new OAuth client to the server. In the
> >>> README.md there is a copy-pastable snippet to create one, already set
> >>> up to work with the app running locally on the default port.>>
> >>> Cheers,
> >>> Riccardo
> >>
> >
>
>