[Pulp-list] Easy REST WebUI for Pulp
Jay Medrano
jay.medrano at neulion.com
Mon Aug 22 21:36:57 UTC 2016
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
More information about the Pulp-list
mailing list