Re-formatted base view template to be more in-line with PEP8 standards.

Working on dashboard clean-up and redesign.

Added custom Jinja date/time formatting function to utils.py.
This commit is contained in:
Matt Scott 2023-02-19 08:52:00 -05:00
parent bad36b5e75
commit 58aabacd91
4 changed files with 790 additions and 768 deletions

View File

@ -74,9 +74,9 @@ def create_app(config=None):
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[
'display_setting_state'] = utils.display_setting_state
app.jinja_env.filters['display_setting_state'] = utils.display_setting_state
app.jinja_env.filters['pretty_domain_name'] = utils.pretty_domain_name
app.jinja_env.filters['format_datetime_local'] = utils.format_datetime
# Register context proccessors
from .models.setting import Setting

View File

@ -225,6 +225,7 @@ class customBoxes:
}
order = ["reverse", "ip6arpa", "inaddrarpa"]
def pretty_domain_name(domain_name):
# Add a debugging statement to print out the domain name
print("Received domain name:", domain_name)
@ -264,3 +265,10 @@ def to_idna(value, action):
else:
raise Exception('No valid action received')
return '.'.join(result)
def format_datetime(value, format_str="%Y-%m-%d %I:%M %p"):
"""Format a date time to (Default): YYYY-MM-DD HH:MM P"""
if value is None:
return ""
return value.strftime(format_str)

View File

@ -5,22 +5,15 @@
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="icon" href="{{ url_for('static', filename='img/favicon.png') }}">
{% block title %}
<title>
{{ SITE_NAME }}
</title>
{% endblock %}
{% block title %}<title>{{ SITE_NAME }}</title>{% endblock %}
<link rel="stylesheet" href="{{ url_for('static', filename='assets/css/style.css') }}">
<!-- Get Google Fonts we like -->
<link rel="stylesheet" href="{{ url_for('static', filename='assets/css/source_sans_pro.css') }}">
<link rel="stylesheet" href="{{ url_for('static', filename='assets/css/roboto_mono.css') }}">
<!-- 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">
<!-- Tell Safari to not recognise telephone numbers -->
<meta name="format-detection" content="telephone=no">
{% assets "css_main" -%}
<link rel="stylesheet" href="{{ ASSET_URL }}">
{%- endassets %}
{% assets "css_main" -%}<link rel="stylesheet" href="{{ ASSET_URL }}">{%- endassets %}
{% if SETTING.get('custom_css') %}
<link rel="stylesheet" href="/static/custom/{{ SETTING.get('custom_css') }}">
{% endif %}
@ -28,8 +21,8 @@
</head>
<body class="hold-transition sidebar-mini {% if not SETTING.get('fullscreen_layout') %}layout-boxed{% endif %}">
{% set user_image_url = url_for('user.image', username=current_user.username) %}
<div class="wrapper">
{% set user_image_url = url_for('user.image', username=current_user.username) %}
<div class="wrapper">
{% block pageheader %}
<nav class="main-header navbar navbar-expand navbar-white navbar-light">
<!-- Header Navbar: style can be found in header.less -->
@ -55,7 +48,8 @@
<aside class="main-sidebar sidebar-dark-primary">
<!-- Logo -->
<a href="{{ url_for('index.index') }}" class="brand-link">
<img src="{{ url_for('static', filename='img/favicon.png') }}" alt="PowerDNS-Admin FavIcon" class="brand-image img-circle elevation-3" style="opacity: .8">
<img src="{{ url_for('static', filename='img/favicon.png') }}" alt="PowerDNS-Admin FavIcon"
class="brand-image img-circle elevation-3" style="opacity: .8">
<span class="brand-text font-weight-light">
{% if SETTING.get('site_name') %}
<b>{{ SITE_NAME }}</b>
@ -72,7 +66,8 @@
<img src="{{ user_image_url }}" class="img-circle elevation-2" alt="User Image">
</div>
<div class="info">
<a href="{{ url_for('user.profile') }}" class="d-block">{{ current_user.firstname }} {{ current_user.lastname }}</a>
<a href="{{ url_for('user.profile') }}"
class="d-block">{{ current_user.firstname }} {{ current_user.lastname }}</a>
</div>
</div>
<!-- sidebar menu: : style can be found in sidebar.less -->
@ -164,7 +159,8 @@
<i class="right fa-solid fa-angle-left"></i>
</p>
</a>
<ul class="nav nav-treeview" {% if active_page == 'admin_settings' %}style="display: block;"{% endif %}>
<ul class="nav nav-treeview"
{% if active_page == 'admin_settings' %}style="display: block;"{% endif %}>
<li class="nav-item">
<a href="{{ url_for('admin.setting_basic') }}" class="nav-link">
<i class="nav-icon fa-solid fa-circle"></i>
@ -236,18 +232,17 @@
</div>
<!-- /.content-wrapper -->
<footer class="main-footer">
<strong><a href="https://github.com/PowerDNS-Admin/PowerDNS-Admin">PowerDNS-Admin</a></strong> - A PowerDNS web interface with advanced features.
<strong><a href="https://github.com/PowerDNS-Admin/PowerDNS-Admin">PowerDNS-Admin</a></strong> - A PowerDNS web
interface with advanced features.
</footer>
</div>
<!-- ./wrapper -->
<script type="text/javascript">
$SCRIPT_ROOT = {{ request.script_root|tojson|safe }};
</script>
<script type="text/javascript">
var PDNS_VERSION = '{{ pdns_version }}'
var PDNS_VERSION = '{{ pdns_version }}';
</script>
{% block scripts %}
{% assets "js_main" -%}
{% assets "js_main" -%}
<script type="text/javascript" src="{{ ASSET_URL }}"></script>
{% if SETTING.get('warn_session_timeout') and current_user.is_authenticated %}
<script>
@ -255,7 +250,7 @@
// a boradcast message
var bc = new BroadcastChannel('powerdnsadmin');
bc.addEventListener('message', function (e) {
if (e.data == 'close_session_timeout_modal'){
if (e.data == 'close_session_timeout_modal') {
$("#modal_session_warning").modal('hide');
}
});
@ -265,7 +260,7 @@
$.get({
url: $.jTimeout().options.extendUrl,
cache: false,
success: function(){
success: function () {
$.jTimeout().resetExpiration();
}
});
@ -278,7 +273,7 @@
});
// Things happen when session warning popup shown
$(document).on('show.bs.modal','#modal_session_warning', function () {
$(document).on('show.bs.modal', '#modal_session_warning', function () {
var secondsLeft = jTimeout.getSecondsTillExpiration();
var t = timer($('#modal-time'), secondsLeft);
@ -291,7 +286,7 @@
});
// jTimeout definition
$(function(){
$(function () {
$.jTimeout({
flashTitle: true,
flashTitleSpeed: 500,
@ -306,14 +301,14 @@
logoutUrl: '{{ url_for("index.logout") }}',
loginUrl: '{{ url_for("index.login") }}',
onClickExtend: function(){
onClickExtend: function () {
// broadcast a message to tell other tabes
// close the session warning popup
var bc = new BroadcastChannel('powerdnsadmin');
bc.postMessage('close_session_timeout_modal');
},
onMouseMove: function(){
onMouseMove: function () {
// if the mouse is moving while popup is present, we
// don't extend the session.
if (!$('#modal_session_warning').hasClass('in')) {
@ -327,15 +322,16 @@
}
},
onTimeout: function(jTimeout){
onTimeout: function (jTimeout) {
window.location.replace("{{ url_for('index.logout') }}");
},
onPriorCallback: function(jTimeout){
$("#modal_session_warning").modal('show');;
onPriorCallback: function (jTimeout) {
$("#modal_session_warning").modal('show');
;
},
onSessionExtended:function(jTimeout){
onSessionExtended: function (jTimeout) {
$("#modal_session_warning").modal('hide');
}
});
@ -354,12 +350,12 @@
}
</script>
{% endif %}
{%- endassets %}
{%- endassets %}
{% endblock %}
{% block extrascripts %}
{% endblock %}
{% block defaultmodals %}
<div class="modal fade modal-danger" id="modal_error">
<div class="modal fade modal-danger" id="modal_error">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
@ -378,9 +374,9 @@
</div>
</div>
</div>
</div>
<!-- /.modal -->
<div class="modal fade modal-success" id="modal_success">
</div>
<!-- /.modal -->
<div class="modal fade modal-success" id="modal_success">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
@ -399,8 +395,8 @@
</div>
</div>
</div>
</div>
<div class="modal fade modal-warning" data-backdrop="static" id="modal_session_warning">
</div>
<div class="modal fade modal-warning" data-backdrop="static" id="modal_session_warning">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
@ -412,7 +408,8 @@
<p>To coninue your ssession, select <strong>Stay Signed In</strong></p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-success float-right button_stay_signed_in" data-dismiss="modal">
<button type="button" class="btn btn-success float-right button_stay_signed_in"
data-dismiss="modal">
Stay Signed In
</button>
<button type="button" class="btn btn-danger float-left button_sign_out" data-dismiss="modal">
@ -421,7 +418,7 @@
</div>
</div>
</div>
</div>
</div>
{% endblock %}
{% block modals %}
{% endblock %}

View File

@ -1,12 +1,6 @@
{% extends "base.html" %}
{% set active_page = "dashboard" %}
{% block title %}
<title>
Dashboard - {{ SITE_NAME }}
</title>
{% endblock %}
{% block title %}<title>Dashboard - {{ SITE_NAME }}</title>{% endblock %}
{% block dashboard_stat %}
<div class="content-header">
@ -33,17 +27,17 @@
{% block content %}
<section class="content">
<div class="container-fluid">
{% if current_user.role.name in ['Administrator', 'Operator'] or SETTING.get('allow_user_view_history') %}
<div class="row">
<div class="col-3">
<div class="card">
<div class="col-lg-12">
<div class="card card-outline card-secondary">
<div class="card-header">
<h3 class="card-title">Statistics</h3>
</div>
<!-- /.card-header -->
<div class="card-body">
<div class="row">
<div class="col-6">
<!-- small box -->
<div class="col-6 col-sm-3">
<div class="small-box bg-info">
<div class="inner">
<h3>{{ domain_count }}</h3>
@ -54,8 +48,22 @@
</div>
</div>
</div>
<div class="col-6 col-sm-3">
<a href="{{ url_for('admin.history') }}">
<div class="small-box bg-green">
<div class="inner">
<h3>{{ history_number }}</h3>
<p>{% if history_number > 1 %}Histories{% else %}
History{% endif %}</p>
</div>
<div class="icon">
<i class="fa-solid fa-calendar"></i>
</div>
</div>
</a>
</div>
{% if current_user.role.name in ['Administrator', 'Operator'] %}
<div class="col-6">
<div class="col-6 col-sm-3">
<a href="{{ url_for('admin.manage_user') }}">
<div class="small-box bg-green">
<div class="inner">
@ -68,28 +76,13 @@
</div>
</a>
</div>
{% endif %}
</div>
<div class="row">
<div class="col-6">
<a href="{{ url_for('admin.history') }}">
<div class="small-box bg-green">
<div class="inner">
<h3>{{ history_number }}</h3>
<p>{% if history_number > 1 %}Histories{% else %}History{% endif %}</p>
</div>
<div class="icon">
<i class="fa-solid fa-calendar"></i>
</div>
</div>
</a>
</div>
{% if current_user.role.name in ['Administrator', 'Operator'] %}
<div class="col-6">
<div class="col-6 col-sm-3">
<a href="{{ url_for('admin.pdns_stats') }}">
<div class="small-box bg-green">
<div class="inner">
<h3><span style="font-size: 18px">{{ uptime|display_second_to_time }}</span></h3>
<h3><span
style="font-size: 18px">{{ uptime|display_second_to_time }}</span>
</h3>
<p>Uptime</p>
</div>
<div class="icon">
@ -100,22 +93,32 @@
</div>
{% endif %}
</div>
<!-- /.row -->
</div>
<!-- /.card-body -->
</div>
<!-- /.card -->
</div>
<div class="col-9">
<div class="card">
<!-- /.col -->
</div>
<!-- /.row -->
{% if current_user.role.name in ['Administrator', 'Operator'] or SETTING.get('allow_user_view_history') %}
<div class="row">
<div class="col-12">
<div class="card card-outline card-secondary">
<div class="card-header">
<h3 class="card-title">Recent History</h3>
</div>
<div class="card-body">
<table id="tbl_history" class="table table-bordered table-striped">
<!-- /.card-header -->
<div class="card-body table-responsive p-0">
<table class="table table-striped table-hover">
<thead>
<tr>
<th>Changed By</th>
<th>Content</th>
<th>Time</th>
<th>Detail</th>
<th>User</th>
<th>Log Message</th>
<th>Timestamp</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
@ -123,8 +126,8 @@
<tr class="odd">
<td>{{ history.history.created_by }}</td>
<td>{{ history.history.msg }}</td>
<td>{{ history.history.created_on }}</td>
<td width="6%">
<td>{{ history.history.created_on | format_datetime_local }}</td>
<td>
<div id="history-info-div-{{ loop.index0 }}" style="display: none;">
{{ history.detailed_msg | safe }}
{% if history.change_set %}
@ -147,10 +150,15 @@
</tbody>
</table>
</div>
<!-- /.card-body -->
</div>
<!-- /.card -->
</div>
<!-- /.col -->
</div>
<!-- /.row -->
{% endif %}
<div class="row">
<div class="col-12">
<div class="card">
@ -158,13 +166,15 @@
<div class="nav-tabs-custom">
<ul class="nav nav-tabs card-header-tabs" id="custom-content-below-tab" role="tablist">
<li class="nav-item">
<a class="nav-link active" href="#tab_{{custom_boxes.order[0]}}" data-toggle="pill" role="tab">
Hosted Domains <b>{{custom_boxes.boxes[custom_boxes.order[0]][0]}}</b>
<a class="nav-link active" href="#tab_{{ custom_boxes.order[0] }}"
data-toggle="pill" role="tab">
Hosted Domains <b>{{ custom_boxes.boxes[custom_boxes.order[0]][0] }}</b>
</a>
</li>
{% for boxId in custom_boxes.order[1:] %}
<li class="nav-item">
<a class="nav-link" href="#tab_{{boxId}}" data-toggle="pill" role="tab">Hosted Domains <b>{{custom_boxes.boxes[boxId][0]}}</b></a>
<a class="nav-link" href="#tab_{{ boxId }}" data-toggle="pill" role="tab">Hosted
Domains <b>{{ custom_boxes.boxes[boxId][0] }}</b></a>
</li>
{% endfor %}
</ul>
@ -173,18 +183,21 @@
<div class="card-body">
<div class="tab-content">
{% for boxId in custom_boxes.order %}
<div class="tab-pane fade show" id='tab_{{boxId}}'>
<div class="tab-pane fade show" id='tab_{{ boxId }}'>
<div class="card-header">
<h3 class="card-title">Hosted Domains <b>{{custom_boxes.boxes[boxId][0]}}</b></h3>
<h3 class="card-title">Hosted Domains
<b>{{ custom_boxes.boxes[boxId][0] }}</b></h3>
{% if show_bg_domain_button %}
<button type="button" class="btn btn-primary refresh-bg-button float-right">
<button type="button"
class="btn btn-primary refresh-bg-button float-right">
<i class="fa-solid fa-sync"></i>
&nbsp;Sync Domains
</button>
{% endif %}
</div>
<div class="card-body">
<table id='tbl_domain_list_{{boxId}}' class="table table-bordered table-striped">
<div class="card-body table-responsive p-0 pt-2">
<table id='tbl_domain_list_{{ boxId }}'
class="table table-striped table-hover">
<thead>
<tr>
<th>Name</th>
@ -213,53 +226,57 @@
{% endblock %}
{% block extrascripts %}
<script>
//SYBPATCH START//
function setUpDomainList(id ,url){
<script>
//SYBPATCH START//
function setUpDomainList(id, url) {
$(id).DataTable({
"paging" : true,
"lengthChange" : true,
"paging": true,
"lengthChange": true,
language: {
searchPlaceholder: "Use ^ and $ for start and end",
},
"searching" : true,
"ordering" : true,
"searching": true,
"ordering": true,
"columnDefs": [
{ "orderable": false, "targets": [-1] }
{% if current_user.role.name not in ['Administrator', 'Operator'] %},{ "visible": false, "targets": [-2] }{% endif %}
{"orderable": false, "targets": [-1]}
{% if current_user.role.name not in ['Administrator', 'Operator'] %},{
"visible": false,
"targets": [-2]
}{% endif %}
],
"processing" : true,
"serverSide" : true,
"ajax" : url,
"info" : false,
"autoWidth" : false,
"processing": true,
"serverSide": true,
"ajax": url,
"info": false,
"autoWidth": false,
{% if SETTING.get('default_domain_table_size')|string in ['10','25','50','100'] %}
"lengthMenu": [ [10, 25, 50, 100, -1],
"lengthMenu": [[10, 25, 50, 100, -1],
[10, 25, 50, 100, "All"]],
{% else %}
"lengthMenu": [ [10, 25, 50, 100, {{ SETTING.get('default_domain_table_size') }}, -1],
"lengthMenu": [[10, 25, 50, 100, {{ SETTING.get('default_domain_table_size') }}, -1],
[10, 25, 50, 100, {{ SETTING.get('default_domain_table_size') }}, "All"]],
{% endif %}
"pageLength": {{ SETTING.get('default_domain_table_size') }}
});
}
$('#tab_{{custom_boxes.order[0]}}').addClass( "active" );
$('#tab_{{custom_boxes.order[0]}}').addClass("active");
{% for boxId in custom_boxes.order %}
setUpDomainList("#tbl_domain_list_{{boxId}}", "{{url_for('dashboard.domains_custom',boxId=boxId)}}");
{% endfor %}
//SYBPATCH END//
//SYBPATCH END//
// set up history data table
$("#tbl_history").DataTable({
"paging" : false,
"lengthChange" : false,
"searching" : false,
"ordering" : false,
"info" : false,
"autoWidth" : true,
"paging": false,
"lengthChange": false,
"searching": false,
"ordering": false,
"info": false,
"autoWidth": true,
"columnDefs": [
{
"render": function ( data, type, row ) {
"render": function (data, type, row) {
return moment.utc(data).local().format('YYYY-MM-DD HH:mm:ss');
},
"targets": 2
@ -275,7 +292,7 @@
modal.modal('show');
});
$(document.body).on('click', '.refresh-bg-button', function() {
$(document.body).on('click', '.refresh-bg-button', function () {
var modal = $("#modal_bg_reload");
modal.modal('show');
reload_domains($SCRIPT_ROOT + '/dashboard/domains-updater');
@ -288,10 +305,10 @@
<input type=\"text\" class=\"form-control\" name=\"template_name\" id=\"template_name\" placeholder=\"Enter a valid template name (required)\"> \
<label for=\"template_description\">Template description</label> \
<input type=\"text\" class=\"form-control\" name=\"template_description\" id=\"template_description\" placeholder=\"Enter a template description (optional)\"> \
<input id=\"domain\" name=\"domain\" type=\"hidden\" value=\""+domain+"\"> \
<input id=\"domain\" name=\"domain\" type=\"hidden\" value=\"" + domain + "\"> \
";
modal.find('.modal-body p').html(form);
modal.find('#button_save').click(function() {
modal.find('#button_save').click(function () {
var data = {'_csrf_token': '{{ csrf_token() }}'};
data['name'] = modal.find('#template_name').val();
data['description'] = modal.find('#template_description').val();
@ -299,7 +316,7 @@
applyChanges(data, "{{ url_for('admin.create_template_from_zone') }}", true);
modal.modal('hide');
})
modal.find('#button_close').click(function() {
modal.find('#button_close').click(function () {
modal.modal('hide');
})
@ -307,26 +324,26 @@
});
{% if current_user.role.name in ['Administrator', 'Operator'] or not SETTING.get('dnssec_admins_only') %}
$(document.body).on("click", ".button_dnssec", function() {
$(document.body).on("click", ".button_dnssec", function () {
var domain = $(this).prop('id');
getdnssec($SCRIPT_ROOT + '/domain/' + domain + '/dnssec', domain);
});
$(document.body).on("click", ".button_dnssec_enable", function() {
$(document.body).on("click", ".button_dnssec_enable", function () {
var domain = $(this).prop('id');
enable_dns_sec($SCRIPT_ROOT + '/domain/' + domain + '/dnssec/enable', '{{ csrf_token() }}');
});
$(document.body).on("click", ".button_dnssec_disable", function() {
$(document.body).on("click", ".button_dnssec_disable", function () {
var domain = $(this).prop('id');
enable_dns_sec($SCRIPT_ROOT + '/domain/' + domain + '/dnssec/disable', '{{ csrf_token() }}');
});
{% endif %}
</script>
</script>
{% endblock %}
{% block modals %}
<div class="modal fade" id="modal_history_info">
<div class="modal fade" id="modal_history_info">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
@ -346,9 +363,9 @@
</div>
</div>
</div>
</div>
</div>
<div class="modal fade modal-primary" id="modal_template">
<div class="modal fade modal-primary" id="modal_template">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
@ -370,9 +387,9 @@
</div>
</div>
</div>
</div>
</div>
<div class="modal fade" id="modal_dnssec_info">
<div class="modal fade" id="modal_dnssec_info">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
@ -391,9 +408,9 @@
</div>
</div>
</div>
</div>
</div>
<div class="modal fade" id="modal_bg_reload">
<div class="modal fade" id="modal_bg_reload">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
@ -414,5 +431,5 @@
</div>
</div>
</div>
</div>
</div>
{% endblock %}