[Pulp-list] Easy REST WebUI for Pulp
Brian Bouterse
bbouters at redhat.com
Tue Aug 23 13:56:27 UTC 2016
These all sound useful and simple. How great! Getting something going
with the 2.y line of Pulp would provide a lot of value for the existing
Pulp users.
FYI, Pulp 3.0 is currently in development and will likely have an
improved but different API. Watch the pulp-list for info on when it's
functional enough to do some testing. It would be great to have this
thing hooked up and ready for Pulp 3 also. If it's working with the 2.y
API it should be even easier with 3.0 because it will be more REST-y.
As an aside, user contributed blog posts can be made by making a pull
request adding a new file to this repo [0].
[0]: https://github.com/pulp/pulpproject.org/tree/gh-pages/_posts
-Brian
On 08/22/2016 05:36 PM, Jay Medrano wrote:
> This is awesome! I literally just started working on a small webUI as a
> view into a custom repository... and I never use the word 'literally'...
>
> Thanks for sharing! I'll make sure to post my experience with ng-admin.
>
> Jay
>
> -----Original Message-----
> From: pulp-list-bounces at redhat.com [mailto:pulp-list-bounces at redhat.com]
> On Behalf Of Russell E. Glaue
> Sent: Monday, August 22, 2016 12:50 PM
> To: pulp-list at redhat.com
> 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/v
> 2/');
>
> // create a Pulp Repositories entity
> // the API endpoint for this entity will be
> 'https://pulp.example.com/abc_secret_poorman_method/pulp/api/v2/repositori
> es/: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
>
More information about the Pulp-list
mailing list