You are viewing a plain text version of this content. The canonical link for it is here.
Posted to dev@camel.apache.org by Riccardo Forina <ri...@forina.eu> on 2018/10/09 07:15:21 UTC
Request for comments: camel-k GUI POC
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
Re: Request for comments: camel-k GUI POC
Posted by Nicola Ferraro <ni...@gmail.com>.
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
<an...@yahoo.com.invalid> 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: ancosen1985@yahoo.com
> Twitter: @oscerd2
> Github: oscerd
>
>
>
>
>
>
> On Tuesday, October 9, 2018, 2:00:44 PM GMT+2, Antonin Stefanutti <
> antonin@stefanutti.fr> wrote:
>
>
>
>
>
>
>
> > On 9 Oct 2018, at 13:56, Riccardo Forina <ri...@forina.eu> 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 <ri...@forina.eu>
> 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
> >>
> >
>
>
Re: Request for comments: camel-k GUI POC
Posted by Andrea Cosentino <an...@yahoo.com.INVALID>.
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: ancosen1985@yahoo.com
Twitter: @oscerd2
Github: oscerd
On Tuesday, October 9, 2018, 2:00:44 PM GMT+2, Antonin Stefanutti <an...@stefanutti.fr> wrote:
> On 9 Oct 2018, at 13:56, Riccardo Forina <ri...@forina.eu> 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 <ri...@forina.eu> 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
>>
>
Re: Request for comments: camel-k GUI POC
Posted by Antonin Stefanutti <an...@stefanutti.fr>.
> On 9 Oct 2018, at 13:56, Riccardo Forina <ri...@forina.eu> 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 <ri...@forina.eu> 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
>>
>
Re: Request for comments: camel-k GUI POC
Posted by Riccardo Forina <ri...@forina.eu>.
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 <ri...@forina.eu> 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
>
Re: Request for comments: camel-k GUI POC
Posted by Jean-Baptiste Onofré <jb...@nanthrax.net>.
That sounds great indeed !
Gonna take a deeper look asap.
Regards
JB
Le 9 oct. 2018 à 13:41, à 13:41, Antonin Stefanutti <an...@stefanutti.fr> 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 <ri...@forina.eu> 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
Re: Request for comments: camel-k GUI POC
Posted by Antonin Stefanutti <an...@stefanutti.fr>.
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 <ri...@forina.eu> 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
Re: Request for comments: camel-k GUI POC
Posted by Andrea Cosentino <an...@yahoo.com.INVALID>.
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: ancosen1985@yahoo.com
Twitter: @oscerd2
Github: oscerd
On Tuesday, October 9, 2018, 9:15:36 AM GMT+2, Riccardo Forina <ri...@forina.eu> 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