[Pulp-list] Easy REST WebUI for Pulp
Michael Hrivnak
mhrivnak at redhat.com
Tue Aug 23 19:09:58 UTC 2016
This is wonderful to see!
One additional thought as we move toward Pulp 3.0 using a relational DB
with django: We should be able to allow the use of django-admin:
https://docs.djangoproject.com/en/1.8/ref/contrib/admin/
This is a web app that allows basic CRUD operations based on inspection of
the data model. It is not intended to take the place of a proper user
interface, but for admin use cases like being able to graphically browse
task status reports, or create/manage users, it can be very useful. Much
about the forms and widgets can be customized to make it an intuitive
experience. This will be another option to explore, to see how useful it
can be for basic web UI interactions. But of course we have to get to Pulp
3.0 first, which is going to be a little while. :) In the mean time I look
forward to seeing where things go with ng-admin!
Michael
On Tue, Aug 23, 2016 at 2:57 PM, Kodiak Firesmith <kfiresmith at gmail.com>
wrote:
> 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
>>
>
>
> _______________________________________________
> 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/a1577f82/attachment.htm>
More information about the Pulp-list
mailing list