[Pulp-list] Easy REST WebUI for Pulp
Kodiak Firesmith
kfiresmith at gmail.com
Tue Aug 23 18:57:13 UTC 2016
Awesome to see this might have legs. I'd be interested to see if this can
work with our current auth setup which uses mod_auth_gssapi (against Active
Directory) for users/admins, and /root/.pulp/admin.conf for login-less
programmatic access to Pulp's API (that file is used by pulp-admin to
subvert the /api/v2/login(?) path and/or use of a certificate. That login
url is of course owned by mod_auth_gssapi currently, but maybe for
something like this I could add a 2nd login path that doesn't use
mod_auth_gssapi.
So think about funky edge cases like this when you design the auth scheme
please :)
I'm just an end user but I'll gladly buy all the devs of this webapp a beer
in appreciation.
- Kodiak
On Tue, Aug 23, 2016 at 2:45 PM, Russell E. Glaue <rglaue at cait.org> wrote:
> I appreciate all the feedback from the community. It is good to see people
> want something like this, and would support it.
> If there is interest in contributing, we can setup a git repo to
> facilitate contribution.
>
>
> I figured out how to get web based authentication from ng-admin to Pulp
> REST API working using Basic auth.
> With this change, you can remove the Apache Reverse Proxy authentication.
>
> Now, just deploy the ng-admin app, the index.html file I provided earlier,
> and then add this in the index.html file, under the line "var myApp =
> angular.module('myApp', ['ng-admin']);"
>
> -
> myApp.run(function($http) {
> $http.defaults.headers.common.Authorization = 'Basic
> YWRtaW46YWRtaW5=';
> });
> -
> This assumes "admin:admin" as the username and password.
> You can change the (YWR..5=) string with a Base64 encryption of your
> string in the format of "YourUserName:YourPassword" (without quotes)
> Source: https://docs.angularjs.org/api/ng/service/$http#setting-
> http-headers
>
>
> Related - there is an example Angular JS app for doing HTTP basic auth
> login with AngularJS. Should be possible to add the login page as a view
> inside the ng-admin WebUI.
> http://jasonwatmore.com/post/2014/05/26/AngularJS-Basic-
> HTTP-Authentication-Example.aspx
> https://github.com/cornflourblue/angular-authentication-example
>
> -RG
>
>
> ----- Original Message -----
> From: "Russell E. Glaue" <rglaue at cait.org>
> To: pulp-list at redhat.com
> Sent: Monday, August 22, 2016 2:50:12 PM
> Subject: [Pulp-list] Easy REST WebUI for Pulp
>
> I know there has been discussion off and on from pulp users about wanting
> a WebUI for Pulp.
>
> I know there is one out there now named sponge, though quite old
> https://github.com/stpierre/sponge
>
>
> I am inquiring if anyone would like to help build a WebUI for Pulp based
> on ng-admin
> https://github.com/marmelab/ng-admin
> It seems crazy easy to do with any RESTful API. And Pulp has a RESTful API.
>
> I have been successful, within an hour's time, to write a first step WebUI
> using ng-admin (see below).
> Perhaps someone with know-how, interest, and some time, can help?
> You only need to know basic Javascript and the Pulp REST API to build this
> WebUI.
>
>
> Based on AngularJS 1.4, ng-admin is used to add an AngularJS admin GUI /
> WebUI to any RESTful API.
> The only code that needs to be written is a little Javascript Object Code
> in an HTML page.
>
> It is really straight forward to create a beautiful and functional CRUD
> WebUI, only using an HTML5 AngularJS app that accesses the existing Pulp
> REST API.
>
> The only caveat is I had to come up with an authentication-work-around
> because, I am not sure how to give the ng-admin app an authenticated Pulp
> session.
> So, to test ng-admin without authentication one can create an
> authenticated reverse-proxy with Apache on the Pulp server.
>
> (This assumes user/password is the default admin/admin)
> /etc/httpd/conf.d/pulpauthreverseproxy.conf
> -
> LoadModule proxy_module modules/mod_proxy.so
> LoadModule proxy_http_module modules/mod_proxy_http.so
> SSLProxyEngine on
>
> RequestHeader set Authorization "Basic YWRtaW46YWRtaW4="
> ProxyPass /abc_secret_poorman_method/pulp/api/
> https://pulp.example.com/pulp/api/
> ProxyPassReverse /abc_secret_poorman_method/pulp/api/
> https://pulp.example.com/pulp/api/
> -
>
>
> Here, I have created a little bit of the ng-admin Javascript code that
> works with Pulp, tested with Pulp 1.9.2 REST API.
>
> index.html
> -
> <!doctype html>
> <html lang="en">
> <head>
> <title>Pulp Admin</title>
> <link rel="stylesheet" href="build/ng-admin.min.css">
> </head>
> <body ng-app="myApp">
> <div ui-view></div>
> <script src="build/ng-admin.min.js"></script>
> <script type="text/javascript">
> var myApp = angular.module('myApp', ['ng-admin']);
>
> // Main Config
> myApp.config(['NgAdminConfigurationProvider', function(NgAdminConfigurationProvider)
> {
> var nga = NgAdminConfigurationProvider;
> // create an admin application
> var admin = nga.application('Pulp Admin')
> .baseApiUrl('https://pulp.example.com/abc_secret_
> poorman_method/pulp/api/v2/');
>
> // create a Pulp Repositories entity
> // the API endpoint for this entity will be '
> https://pulp.example.com/abc_secret_poorman_method/pulp/
> api/v2/repositories/:id
> var repositories = nga.entity('repositories');
> // set the fields of the repositories entity list view
> repositories.listView().fields([
> nga.field('id').isDetailLink(true),
> nga.field('display_name'),
> nga.field('description')
> ]);
> repositories.creationView().fields([
> nga.field('id'),
> nga.field('display_name'),
> nga.field('description'),
> // these do not work as-is, because values are of an array.
> // change this to support values as an array
> nga.field('importer_type_id', 'choice')
> .choices([
> { label: 'yum_importer', value: 'yum_importer' }
> ]),
> nga.field('distributors.distributor_id', 'choice')
> .choices([
> { label: 'yum_distributor', value: 'yum_distributor' }
> ]),
> nga.field('distributors.distributor_type_id', 'choice')
> .choices([
> { label: 'yum_distributor', value: 'yum_distributor' }
> ]),
> nga.field('distributors.auto_publish', 'choice')
> .choices([
> { label: 'TRUE', value: 'true' },
> { label: 'FALSE', value: 'false' }
> ])
> ]);
> // use the same fields for the editionView as for the creationView
> repositories.editionView().fields(repositories.
> creationView().fields());
> // add the repositories entity to the admin application
> admin.addEntity(repositories);
>
> // create a Pulp User entity
> var users = nga.entity('users')
> .identifier(nga.field('login'));
> users.listView().fields([
> nga.field('name'),
> nga.field('login'),
> nga.field('roles')
> ]);
> admin.addEntity(users);
>
> // this does not load properly as configured
> // var status = nga.entity('status');
> // // set the fields of the user entity list view
> // status.listView().fields([
> // nga.field('versions.platform_version'),
> // nga.field('database_connection.connected'),
> // nga.field('messaging_connection.connected')
> // ]);
> // admin.addEntity(status);
>
> // create a Pulp Tasks entity
> var tasks = nga.entity('tasks');
> tasks.listView().fields([
> nga.field('state'),
> nga.field('start_time'),
> nga.field('finish_time'),
> nga.field('task_type')
> ]);
> admin.addEntity(tasks);
>
>
> // attach the admin application to the DOM and run it
> nga.configure(admin);
> }]);
>
> </script>
> </body>
> </html>
> -
>
>
> Steps to get this code working. (Instructions assume CentOS/RHEL 6/7 OS)
>
> 1. Clone the ng-admin git repository into /var/www/html
> git clone https://github.com/marmelab/ng-admin.git
>
> 2. drop the above index.html file into /var/www/html/ng-admin/index.html
> and change the pulp server name.
>
> 3. Setup the Apache reverse proxy authentication, drop above file
> /etc/httpd/conf.d/pulpauthreverseproxy.conf
>
> 4. restart httpd
>
> 5. in browser goto: https://yourpulpserver/ng-admin/
>
>
>
> Any interest?
>
> -RG
>
> _______________________________________________
> Pulp-list mailing list
> Pulp-list at redhat.com
> https://www.redhat.com/mailman/listinfo/pulp-list
>
> _______________________________________________
> Pulp-list mailing list
> Pulp-list at redhat.com
> https://www.redhat.com/mailman/listinfo/pulp-list
>
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://listman.redhat.com/archives/pulp-list/attachments/20160823/95313863/attachment.htm>
More information about the Pulp-list
mailing list