[Pulp-list] Easy REST WebUI for Pulp
Russell E. Glaue
rglaue at cait.org
Tue Sep 6 19:08:56 UTC 2016
After reviewing django-admin, I read this: "The [django-]admin’s recommended use is limited to an organization’s internal management tool. It’s not intended for building your entire front end around."
They do not recommend using django-admin for a primary access user interface - only to provide admin-level task access.
So if Pulp does use this, it will still need a general-access WebUI.
-RG
----- Original Message -----
From: "Russell E. Glaue" <rglaue at cait.org>
To: "Michael Hrivnak" <mhrivnak at redhat.com>
Cc: "pulp-list" <pulp-list at redhat.com>
Sent: Tuesday, August 23, 2016 4:04:08 PM
Subject: Re: [Pulp-list] Easy REST WebUI for Pulp
The django-admin requires a Python coded application to interact directly with the relational database under the hood.
If the pulp community is going this direction, for sure, then why build the boat twice by trying ng-admin? Perhaps I just wait for 3.0?
On the other side, ng-admin would work with the existing Pulp REST API. So, technically, the community need only build one internal query engine which is the REST API. All tools, including the ng-admin WebUI would be built off the RESTful interface.
Which would you think will require heavy-hitting DevOps contributors? A Python app working under the hood against a RDBM, or a Javascript app on top of the hood against a RESTful interface?
Other than perhaps performance, would the Python django-admin provide something a RESTful WebUI interface doesn't?
Has any direction been given about what functionality the django-admin app would drive? Admin-only, or both Admin/User functions? Or perhaps it would provide additional functionality the RESTful interface would not?
-RG
----- Original Message -----
From: "Michael Hrivnak" <mhrivnak at redhat.com>
To: "Kodiak Firesmith" <kfiresmith at gmail.com>
Cc: "Russell E. Glaue" <rglaue at cait.org>, "pulp-list" <pulp-list at redhat.com>
Sent: Tuesday, August 23, 2016 2:09:58 PM
Subject: Re: [Pulp-list] Easy REST WebUI for Pulp
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
_______________________________________________
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