[Pulp-list] Easy REST WebUI for Pulp
Russell E. Glaue
rglaue at cait.org
Tue Aug 23 18:45:54 UTC 2016
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
More information about the Pulp-list
mailing list