Add webassets support

Also updates AdminLTE to latest stable version.

Signed-off-by: Felix Kaechele <felix@kaechele.ca>

.gitignore

@@ -36,3 +36,6 @@ tmp/*
 pdns.db
 
 node_modules
+
+.webassets-cache
+app/static/generated

app/__init__.py

@@ -3,10 +3,14 @@ from flask import Flask, request, session, redirect, url_for
 from flask_login import LoginManager
 from flask_sqlalchemy import SQLAlchemy
 
+from app.assets import assets
+
 app = Flask(__name__)
 app.config.from_object('config')
 app.wsgi_app = ProxyFix(app.wsgi_app)
 
+assets.init_app(app)
+
 #### CONFIGURE LOGGER ####
 from app.lib.log import logger
 logging = logger('powerdns-admin', app.config['LOG_LEVEL'], app.config['LOG_FILE']).config()

app/assets.py

@@ -0,0 +1,67 @@
+from flask_assets import Bundle, Environment, Filter
+
+class ConcatFilter(Filter):
+    """
+    Filter that merges files, placing a semicolon between them.
+
+    Fixes issues caused by missing semicolons at end of JS assets, for example
+    with last statement of jquery.pjax.js.
+    """
+    def concat(self, out, hunks, **kw):
+        out.write(';'.join([h.data() for h, info in hunks]))
+
+css_login = Bundle(
+    'node_modules/bootstrap/dist/css/bootstrap.css',
+    'node_modules/font-awesome/css/font-awesome.css',
+    'node_modules/ionicons/dist/css/ionicons.css',
+    'node_modules/icheck/skins/square/blue.css',
+    'node_modules/admin-lte/dist/css/AdminLTE.css',
+    filters=('cssmin','cssrewrite'),
+    output='generated/login.css'
+)
+
+js_login = Bundle(
+    'node_modules/jquery/dist/jquery.js',
+    'node_modules/bootstrap/dist/js/bootstrap.js',
+    'node_modules/icheck/icheck.js',
+    filters=(ConcatFilter, 'jsmin'),
+    output='generated/login.js'
+)
+
+css_main = Bundle(
+    'node_modules/bootstrap/dist/css/bootstrap.css',
+    'node_modules/font-awesome/css/font-awesome.css',
+    'node_modules/ionicons/dist/css/ionicons.css',
+    'node_modules/datatables.net-bs/css/dataTables.bootstrap.css',
+    'node_modules/icheck/skins/square/blue.css',
+    'node_modules/multiselect/css/multi-select.css',
+    'node_modules/admin-lte/dist/css/AdminLTE.css',
+    'node_modules/admin-lte/dist/css/skins/_all-skins.css',
+    'custom/css/custom.css',
+    filters=('cssmin','cssrewrite'),
+    output='generated/main.css'
+)
+
+js_main = Bundle(
+    'node_modules/jquery/dist/jquery.js',
+    'node_modules/jquery-ui-dist/jquery-ui.js',
+    'node_modules/bootstrap/dist/js/bootstrap.js',
+    'node_modules/datatables.net/js/jquery.dataTables.js',
+    'node_modules/datatables.net-bs/js/dataTables.bootstrap.js',
+    'node_modules/jquery-sparkline/jquery.sparkline.js',
+    'node_modules/jquery-slimscroll/jquery.slimscroll.js',
+    'node_modules/icheck/icheck.js',
+    'node_modules/fastclick/lib/fastclick.js',
+    'node_modules/moment/moment.js',
+    'node_modules/admin-lte/dist/js/adminlte.js',
+    'node_modules/multiselect/js/jquery.multi-select.js',
+    'custom/js/custom.js',
+    filters=(ConcatFilter, 'jsmin'),
+    output='generated/main.js'
+)
+
+assets = Environment()
+assets.register('js_login', js_login)
+assets.register('css_login', css_login)
+assets.register('js_main', js_main)
+assets.register('css_main', css_main)

app/templates/base.html

@@ -6,30 +6,13 @@
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   {% block title %}<title>DNS Control Panel</title>{% endblock %}
   <!--  Get Google Fonts we like -->
-  <link href="//fonts.googleapis.com/css?family=Open+Sans:400,300,600,700&subset=all" rel="stylesheet" type="text/css"/>
-  <link href='//fonts.googleapis.com/css?family=Roboto+Mono:400,300,700' rel='stylesheet' type='text/css'>
+  <link rel="stylesheet" href="//fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,300italic,400italic,600italic">
+  <link rel="stylesheet" href="//fonts.googleapis.com/css?family=Roboto+Mono:400,300,700">
   <!-- Tell the browser to be responsive to screen width -->
   <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
-  <!-- Bootstrap 3.3.6 -->
-  <link rel="stylesheet" href="{{ url_for('static', filename='adminlte2/bootstrap/css/bootstrap.min.css') }}">
-  <!-- Font Awesome -->
-  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css">
-  <!-- Ionicons -->
-  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css">
-  <!-- DataTables -->
-  <link rel="stylesheet" href="{{ url_for('static', filename='adminlte2/plugins/datatables/dataTables.bootstrap.css') }}">
-  <!-- Theme style -->
-  <link rel="stylesheet" href="{{ url_for('static', filename='adminlte2/dist/css/AdminLTE.min.css') }}">
-  <!-- AdminLTE Skins. Choose a skin from the css/skins
-       folder instead of downloading all of them to reduce the load. -->
-  <link rel="stylesheet" href="{{ url_for('static', filename='adminlte2/dist/css/skins/_all-skins.min.css') }}">
-  <!-- iCheck -->
-  <link rel="stylesheet" href="{{ url_for('static', filename='adminlte2/plugins/iCheck/all.css') }}">
-  <!-- multiselect -->
-  <link rel="stylesheet" href="{{ url_for('static', filename='multiselect/css/multi-select.css') }}">
-  <!-- custom CSS -->
-  <link rel="stylesheet" href="{{ url_for('static', filename='custom/css/custom.css') }}">
-
+  {% assets "css_main" -%}
+      <link rel="stylesheet" href="{{ ASSET_URL }}">
+  {%- endassets %}
   <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
   <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
   <!--[if lt IE 9]>
@@ -52,7 +35,7 @@
     <!-- Header Navbar: style can be found in header.less -->
     <nav class="navbar navbar-static-top">
       <!-- Sidebar toggle button-->
-      <a href="#" class="sidebar-toggle" data-toggle="offcanvas" role="button">
+      <a href="#" class="sidebar-toggle" data-toggle="push-menu" role="button">
         <span class="sr-only">Toggle navigation</span>
       </a>
 
@@ -120,7 +103,7 @@
         </div>
       </div>
       <!-- sidebar menu: : style can be found in sidebar.less -->
-      <ul class="sidebar-menu">
+      <ul class="sidebar-menu" data-widget="tree">
         <li class="header">USER ACTIONS</li>
         <li><a href="{{ url_for('dashboard') }}"><i class="fa fa-dashboard"></i> <span>Dashboard</span></a></li>
         {% if current_user.role.name == 'Administrator' %}
@@ -165,37 +148,9 @@
 	$SCRIPT_ROOT = {{ request.script_root|tojson|safe }};
 </script>
 {% block scripts %}
-<!-- jQuery 2.2.0 -->
-<script src="{{ url_for('static', filename='adminlte2/plugins/jQuery/jQuery-2.2.0.min.js') }}"></script>
-<!-- jQuery UI 1.11.4 -->
-<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
-<!-- Resolve conflict in jQuery UI tooltip with Bootstrap tooltip -->
-<script>
-  $.widget.bridge('uibutton', $.ui.button);
-</script>
-<!-- Bootstrap 3.3.6 -->
-<script src="{{ url_for('static', filename='adminlte2/bootstrap/js/bootstrap.min.js') }}"></script>
-<!-- DataTables -->
-<script src="{{ url_for('static', filename='adminlte2/plugins/datatables/jquery.dataTables.min.js') }}"></script>
-<script src="{{ url_for('static', filename='adminlte2/plugins/datatables/dataTables.bootstrap.min.js') }}"></script>
-<!-- DataTables Natural Sort -->
-<script src="{{ url_for('static', filename='adminlte2/plugins/datatables/extensions/NaturalSort/natural.min.js') }}"></script>
-<!-- Sparkline -->
-<script src="{{ url_for('static', filename='adminlte2/plugins/sparkline/jquery.sparkline.min.js') }}"></script>
-<!-- Slimscroll -->
-<script src="{{ url_for('static', filename='adminlte2/plugins/slimScroll/jquery.slimscroll.min.js') }}"></script>
-<!-- iCheck 1.0.1 -->
-<script src="{{ url_for('static', filename='adminlte2/plugins/iCheck/icheck.min.js') }}"></script>
-<!-- FastClick -->
-<script src="{{ url_for('static', filename='adminlte2/plugins/fastclick/fastclick.js') }}"></script>
-<!-- Moment.js -->
-<script src="{{ url_for('static', filename='adminlte2/plugins/daterangepicker/moment.min.js') }}"></script>
-<!-- AdminLTE App -->
-<script src="{{ url_for('static', filename='adminlte2/dist/js/app.min.js') }}"></script>
-<!-- Multiselect -->
-<script src="{{ url_for('static', filename='multiselect/js/jquery.multi-select.js') }}"></script>
-<!-- PowerDNS-Admin custom.js -->
-<script src="{{ url_for('static', filename='custom/js/custom.js') }}"></script>
+{% assets "js_main" -%}
+  <script type="text/javascript" src="{{ ASSET_URL }}"></script>
+{%- endassets %}
 {% endblock %}
 {% block extrascripts %}
 {% endblock %}

app/templates/login.html

@@ -6,16 +6,9 @@
   <title>DNS Control Panel - Log In</title>
   <!-- Tell the browser to be responsive to screen width -->
   <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
-  <!-- Bootstrap 3.3.6 -->
-  <link rel="stylesheet" href="{{ url_for('static', filename='adminlte2/bootstrap/css/bootstrap.min.css') }}">
-  <!-- Font Awesome -->
-  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css">
-  <!-- Ionicons -->
-  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css">
-  <!-- Theme style -->
-  <link rel="stylesheet" href="{{ url_for('static', filename='adminlte2/dist/css/AdminLTE.min.css') }}">
-  <!-- iCheck -->
-  <link rel="stylesheet" href="{{ url_for('static', filename='adminlte2/plugins/iCheck/square/blue.css') }}">
+  {% assets "css_login" -%}
+      <link rel="stylesheet" href="{{ ASSET_URL }}">
+  {%- endassets %}
 
   <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
   <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
@@ -121,12 +114,9 @@
 </div>
 <!-- /.login-box -->
 
-<!-- jQuery 2.2.0 -->
-<script src="{{ url_for('static', filename='adminlte2/plugins/jQuery/jQuery-2.2.0.min.js') }}"></script>
-<!-- Bootstrap 3.3.6 -->
-<script src="{{ url_for('static', filename='adminlte2/bootstrap/js/bootstrap.min.js') }}"></script>
-<!-- iCheck -->
-<script src="{{ url_for('static', filename='adminlte2/plugins/iCheck/icheck.min.js') }}"></script>
+{% assets "js_login" -%}
+  <script type="text/javascript" src="{{ ASSET_URL }}"></script>
+{%- endassets %}
 <script>
   $(function () {
     $('input').iCheck({

app/templates/register.html

@@ -6,16 +6,9 @@
   <title>DNS Control Panel - Register</title>
   <!-- Tell the browser to be responsive to screen width -->
   <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
-  <!-- Bootstrap 3.3.6 -->
-  <link rel="stylesheet" href="{{ url_for('static', filename='adminlte2/bootstrap/css/bootstrap.min.css') }}">
-  <!-- Font Awesome -->
-  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css">
-  <!-- Ionicons -->
-  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css">
-  <!-- Theme style -->
-  <link rel="stylesheet" href="{{ url_for('static', filename='adminlte2/dist/css/AdminLTE.min.css') }}">
-  <!-- iCheck -->
-  <link rel="stylesheet" href="{{ url_for('static', filename='adminlte2/plugins/iCheck/square/blue.css') }}">
+  {% assets "css_login" -%}
+      <link rel="stylesheet" href="{{ ASSET_URL }}">
+  {%- endassets %}
 
   <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
   <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
@@ -89,12 +82,9 @@
 </div>
 <!-- /.login-box -->
 
-<!-- jQuery 2.2.0 -->
-<script src="{{ url_for('static', filename='adminlte2/plugins/jQuery/jQuery-2.2.0.min.js') }}"></script>
-<!-- Bootstrap 3.3.6 -->
-<script src="{{ url_for('static', filename='adminlte2/bootstrap/js/bootstrap.min.js') }}"></script>
-<!-- iCheck -->
-<script src="{{ url_for('static', filename='adminlte2/plugins/iCheck/icheck.min.js') }}"></script>
+{% assets "js_login" -%}
+  <script type="text/javascript" src="{{ ASSET_URL }}"></script>
+{%- endassets %}
 <script>
   $(function () {
     $('#button_back').click(function(){

app/views.py

@@ -29,10 +29,10 @@ if app.config['SAML_ENABLED']:
 logging = logger.getLogger(__name__)
 
 # FILTERS
-jinja2.filters.FILTERS['display_record_name'] = utils.display_record_name
-jinja2.filters.FILTERS['display_master_name'] = utils.display_master_name
-jinja2.filters.FILTERS['display_second_to_time'] = utils.display_time
-jinja2.filters.FILTERS['email_to_gravatar_url'] = utils.email_to_gravatar_url
+app.jinja_env.filters['display_record_name'] = utils.display_record_name
+app.jinja_env.filters['display_master_name'] = utils.display_master_name
+app.jinja_env.filters['display_second_to_time'] = utils.display_time
+app.jinja_env.filters['email_to_gravatar_url'] = utils.email_to_gravatar_url
 
 # Flag for pdns v4.x.x
 # TODO: Find another way to do this

docker/PowerDNS-Admin/Dockerfile

@@ -26,7 +26,6 @@ RUN apt-get install -y libxml2-dev libxslt1-dev libxmlsec1-dev libffi-dev pkg-co
 
 COPY ./requirements.txt /powerdns-admin/requirements.txt
 RUN pip3 install -r requirements.txt
-RUN yarn
 
 ADD ./supervisord.conf /etc/supervisord.conf
 ADD . /powerdns-admin/

docker/PowerDNS-Admin/entrypoint.sh

@@ -1,3 +1,11 @@
 #!/bin/sh
-cd /powerdns-admin && ./create_db.py
+
+export LC_ALL=C.UTF-8
+export LANG=C.UTF-8
+
+cd /powerdns-admin
+./create_db.py
+yarn install --pure-lockfile
+FLASK_APP=app/__init__.py flask assets build
+
 /usr/bin/supervisord -c /etc/supervisord.conf

requirements.txt

@@ -1,4 +1,5 @@
 Flask==0.12.2
+Flask-Assets==0.12
 Flask-WTF==0.14.2
 Flask-Login==0.4.1
 Flask-OAuthlib==0.9.4
@@ -17,3 +18,5 @@ gunicorn==19.7.1
 python3-saml
 pyOpenSSL>=0.15
 pytz>=2017.3
+cssmin==0.2.0
+jsmin==2.2.2